refactor(widget): migrate ppt widgets to v2 + cleanup (#4861)

* refactor(widget): migrate and cleanup ppt widgets

* unused

* might help catch bad input

* fix

* halp

* typo

* got a bit much info

* fix finally

* move the dump fake to mw, cleanup the error for prod

* more cleanup

* fix attr

* typo

* update golden (css in a different order)

components/infobox/wikis/apexlegends/infobox_map_custom.lua

@@ -49,6 +49,11 @@ function CustomInjector:parse(id, widgets)
 
 		if String.isEmpty(args.ring) then return widgets end
 
+		local rows = {self.caller:_createRingTableHeader()}
+		Array.forEach(self.caller:getAllArgsForBase(args, 'ring'), function(ringData)
+			table.insert(rows, self.caller:_createRingTableRow(ringData))
+		end)
+
 		local ringTable = WidgetTable{
 			classes = {'fo-nttax-infobox' ,'wiki-bordercolor-light'}, --row alternating bg
 			css = {
@@ -58,14 +63,9 @@ function CustomInjector:parse(id, widgets)
 				['padding-bottom'] = '0px',
 				['border-top-style'] = 'none',
 			},
+			children = rows,
 		}
 
-		ringTable:addRow(self.caller:_createRingTableHeader())
-
-		Array.forEach(self.caller:getAllArgsForBase(args, 'ring'), function(ringData)
-			ringTable:addRow(self.caller:_createRingTableRow(ringData))
-		end)
-
 		Array.appendWith(widgets,
 			Title{children = 'Ring Information'},
 			ringTable
@@ -77,23 +77,23 @@ end
 
 ---@return WidgetTableRow
 function CustomMap:_createRingTableHeader()
-	local headerRow = TableRow{css = {['font-weight'] = 'bold'}} -- bg needed
-	return headerRow
-		:addCell(TableCell{children = {'Ring'}})
-		:addCell(TableCell{children = {'Wait (s)'}})
-		:addCell(TableCell{children = {'Close<br>Time (s)'}})
-		:addCell(TableCell{children = {'Damage<br>per tick'}})
-		:addCell(TableCell{children = {'End Diameter (m)'}})
+	return TableRow{css = {['font-weight'] = 'bold'}, children = {
+		TableCell{children = {'Ring'}},
+		TableCell{children = {'Wait (s)'}},
+		TableCell{children = {'Close Time (s)'}},
+		TableCell{children = {'Damage per tick'}},
+		TableCell{children = {'End Diameter (m)'}},
+	}} -- bg needed
 end
 
 ---@param ringData string
 ---@return WidgetTableRow
 function CustomMap:_createRingTableRow(ringData)
-	local row = TableRow{}
+	local cells = {}
 	for _, item in ipairs(mw.text.split(ringData, ',')) do
-		row:addCell(TableCell{children = {item}})
+		table.insert(cells, TableCell{children = {item}})
 	end
-	return row
+	return TableRow{children = cells}
 end
 
 ---@param args table

components/prize_pool/commons/prize_pool.lua

@@ -64,11 +64,12 @@ function PrizePool:placeOrAwardCell(placement)
 end
 
 ---@param placement PrizePoolPlacement
----@param row WidgetTableRow
-function PrizePool:applyCutAfter(placement, row)
+---@return boolean
+function PrizePool:applyCutAfter(placement)
 	if placement.placeStart > self.options.cutafter then
-		row:addClass('ppt-hide-on-collapse')
+		return true
 	end
+	return false
 end
 
 ---@param placement PrizePoolPlacement?
@@ -91,12 +92,16 @@ end
 ---@return WidgetTableRow
 function PrizePool:_toggleExpand(placeStart, placeEnd)
 	local text = 'place ' .. placeStart .. ' to ' .. placeEnd
-	local expandButton = TableCell{children = {'<div>' .. text .. '&nbsp;<i class="fa fa-chevron-down"></i></div>'}}
-		:addClass('general-collapsible-expand-button')
-	local collapseButton = TableCell{children = {'<div>' .. text .. '&nbsp;<i class="fa fa-chevron-up"></i></div>'}}
-		:addClass('general-collapsible-collapse-button')
+	local expandButton = TableCell{
+		children = {'<div>' .. text .. '&nbsp;<i class="fa fa-chevron-down"></i></div>'},
+		classes = {'general-collapsible-expand-button'},
+	}
+	local collapseButton = TableCell{
+		children = {'<div>' .. text .. '&nbsp;<i class="fa fa-chevron-up"></i></div>'},
+		classes = {'general-collapsible-collapse-button'},
+	}
 
-	return TableRow{classes = {'ppt-toggle-expand'}}:addCell(expandButton):addCell(collapseButton)
+	return TableRow{classes = {'ppt-toggle-expand'}, children = {expandButton, collapseButton}}
 end
 
 -- get the lpdbObjectName depending on opponenttype

components/prize_pool/commons/prize_pool_award.lua

@@ -63,11 +63,12 @@ function AwardPrizePool:placeOrAwardCell(placement)
 end
 
 ---@param placement AwardPlacement
----@param row WidgetTableRow
-function AwardPrizePool:applyCutAfter(placement, row)
+---@return boolean
+function AwardPrizePool:applyCutAfter(placement)
 	if (placement.previousTotalNumberOfParticipants + 1) > self.options.cutafter then
-		row:addClass('ppt-hide-on-collapse')
+		return true
 	end
+	return false
 end
 
 ---@param placement AwardPlacement?
@@ -85,12 +86,16 @@ end
 
 ---@return WidgetTableRow
 function AwardPrizePool:_toggleExpand()
-	local expandButton = TableCell{children = {'<div>Show more Awards&nbsp;<i class="fa fa-chevron-down"></i></div>'}}
-		:addClass('general-collapsible-expand-button')
-	local collapseButton = TableCell{children = {'<div>Show less Awards&nbsp;<i class="fa fa-chevron-up"></i></div>'}}
-		:addClass('general-collapsible-collapse-button')
+	local expandButton = TableCell{
+		children = {'<div>Show more Awards&nbsp;<i class="fa fa-chevron-down"></i></div>'},
+		classes = {'general-collapsible-expand-button'},
+	}
+	local collapseButton = TableCell{
+		children = {'<div>Show less Awards&nbsp;<i class="fa fa-chevron-up"></i></div>'},
+		classes = {'general-collapsible-collapse-button'},
+	}
 
-	return TableRow{classes = {'ppt-toggle-expand'}}:addCell(expandButton):addCell(collapseButton)
+	return TableRow{classes = {'ppt-toggle-expand'}, children = {expandButton, collapseButton}}
 end
 
 -- Get the lpdbObjectName depending on opponenttype

components/prize_pool/commons/prize_pool_base.lua

@@ -20,17 +20,19 @@ local Variables = require('Module:Variables')
 
 local Currency = Lua.import('Module:Currency')
 local LpdbInjector = Lua.import('Module:Lpdb/Injector')
-local WidgetInjector = Lua.import('Module:Widget/Injector')
 
 local OpponentLibraries = require('Module:OpponentLibraries')
 local Opponent = OpponentLibraries.Opponent
 local OpponentDisplay = OpponentLibraries.OpponentDisplay
 
 local Widgets = Lua.import('Module:Widget/All')
+local HtmlWidgets = Lua.import('Module:Widget/Html/All')
 local WidgetTable = Widgets.TableOld
 local TableRow = Widgets.TableRow
 local TableCell = Widgets.TableCell
-local Div = Widgets.Div
+local Div = HtmlWidgets.Div
+local Span = HtmlWidgets.Span
+local WidgetUtil = Lua.import('Module:Widget/Util')
 
 local pageVars = PageVariableNamespace('PrizePool')
 
@@ -556,7 +558,7 @@ function BasePrizePool:_shouldDisplayPrizeSummary()
 end
 
 ---@param isAward boolean?
----@return Html
+---@return Widget
 function BasePrizePool:build(isAward)
 	local prizePoolTable = self:_buildTable(isAward)
 
@@ -568,72 +570,53 @@ function BasePrizePool:build(isAward)
 		return prizePoolTable
 	end
 
-	local wrapper = mw.html.create('div'):addClass('prizepool-section-wrapper')
-
-	if self:_shouldDisplayPrizeSummary() then
-		wrapper:tag('span'):wikitext(self:_getPrizeSummaryText())
-	end
-
-	local tablesWrapper = mw.html.create('div'):addClass('prizepool-section-tables'):node(prizePoolTable)
-
-	if self.adjacentContent then
-		tablesWrapper:wikitext(self.adjacentContent)
-	end
-
-	wrapper:node(tablesWrapper)
-
-	if self.options.exchangeInfo then
-		wrapper:wikitext(self:_currencyExchangeInfo())
-	end
-
-	return wrapper
+	return Div{classes = {'prizepool-section-wrapper'}, children = WidgetUtil.collect(
+		self:_shouldDisplayPrizeSummary() and Span{children = {self:_getPrizeSummaryText()}} or nil,
+		Div{
+			classes = {'prizepool-section-tables'},
+			children = WidgetUtil.collect(prizePoolTable, self.adjacentContent)
+		},
+		self.options.exchangeInfo and self:_currencyExchangeInfo() or nil
+	)}
 end
 
 ---@param isAward boolean?
----@return Html
+---@return Widget
 function BasePrizePool:_buildTable(isAward)
-	local tbl = WidgetTable{
-		classes = {'collapsed', 'general-collapsible', 'prizepooltable'},
-		css = {width = 'max-content'},
-	}
-
 	local headerRow = self:_buildHeader(isAward)
 
-	tbl:addRow(headerRow)
-
-	tbl.columns = headerRow:getCellCount()
-
-	for _, row in ipairs(self:_buildRows()) do
-		tbl:addRow(row)
-	end
-
-	local tableNode = mw.html.create('div'):css('overflow-x', 'auto')
-	tableNode:node(tbl:tryMake(self._widgetInjector))
-
-	return tableNode
+	return Div{
+		css = {['overflow-x'] = 'auto'},
+		children = {WidgetTable{
+			classes = {'collapsed', 'general-collapsible', 'prizepooltable'},
+			css = {width = 'max-content'},
+			columns = headerRow:getCellCount(),
+			children = WidgetUtil.collect(headerRow, unpack(self:_buildRows()))
+		}},
+	}
 end
 
 ---@param isAward boolean?
 ---@return WidgetTableRow
 function BasePrizePool:_buildHeader(isAward)
-	local headerRow = TableRow{classes = {'prizepooltable-header'}, css = {['font-weight'] = 'bold'}}
+	local children = {}
 
-	headerRow:addCell(TableCell{children = {isAward and 'Award' or 'Place'}, css = {['min-width'] = '80px'}})
+	table.insert(children, TableCell{children = {isAward and 'Award' or 'Place'}, css = {['min-width'] = '80px'}})
 
 	local previousOfType = {}
 	for _, prize in ipairs(self.prizes) do
 		local prizeTypeData = self.prizeTypes[prize.type]
 
 		if not prizeTypeData.mergeDisplayColumns or not previousOfType[prize.type] then
 			local cell = prizeTypeData.headerDisplay(prize.data)
-			headerRow:addCell(cell)
+			table.insert(children, cell)
 			previousOfType[prize.type] = cell
 		end
 	end
 
-	headerRow:addCell(TableCell{children = {'Participant'}, classes = {'prizepooltable-col-team'}})
+	table.insert(children, TableCell{children = {'Participant'}, classes = {'prizepooltable-col-team'}})
 
-	return headerRow
+	return TableRow{classes = {'prizepooltable-header'}, css = {['font-weight'] = 'bold'}, children = children}
 end
 
 ---@return WidgetTableRow[]
@@ -646,12 +629,8 @@ function BasePrizePool:_buildRows()
 
 		self:applyToggleExpand(previousPlacement, placement, rows)
 
-		local row = TableRow{}
-		row:addClass(placement:getBackground())
-
-		self:applyCutAfter(placement, row)
-
-		row:addCell(self:placeOrAwardCell(placement))
+		local cells = {}
+		table.insert(cells, self:placeOrAwardCell(placement))
 
 		for _, opponent in ipairs(placement.opponents) do
 			local previousOfPrizeType = {}
@@ -666,7 +645,7 @@ function BasePrizePool:_buildRows()
 				if lastCellOfType and prizeTypeData.mergeDisplayColumns then
 
 					if Table.isNotEmpty(lastCellOfType.children) and Table.isNotEmpty(cell.children) then
-						lastCellOfType:addContent(tostring(mw.html.create('hr'):css('width', '100%')))
+						table.insert(lastCellOfType.children, tostring(mw.html.create('hr'):css('width', '100%')))
 					end
 
 					Array.extendWith(lastCellOfType.children, cell.children)
@@ -691,7 +670,7 @@ function BasePrizePool:_buildRows()
 					lastInColumn.rowSpan = (lastInColumn.rowSpan or 1) + 1
 				else
 					previousOpponent[columnIndex] = prizeCell
-					row:addCell(prizeCell)
+					table.insert(cells, prizeCell)
 				end
 			end)
 
@@ -702,8 +681,13 @@ function BasePrizePool:_buildRows()
 			})
 			local opponentCss = {['justify-content'] = 'start'}
 
-			row:addCell(TableCell{children = {opponentDisplay}, css = opponentCss})
+			table.insert(cells, TableCell{children = {opponentDisplay}, css = opponentCss})
+		end
+		local classes = {placement:getBackground()}
+		if self:applyCutAfter(placement) then
+			table.insert(classes, 'ppt-hide-on-collapse')
 		end
+		local row = TableRow{children = cells, classes = classes}
 
 		table.insert(rows, row)
 
@@ -719,8 +703,8 @@ function BasePrizePool:placeOrAwardCell(placement)
 end
 
 ---@param placement BasePlacement
----@param row WidgetTableRow
-function BasePrizePool:applyCutAfter(placement, row)
+---@return boolean
+function BasePrizePool:applyCutAfter(placement)
 	error('Function applyCutAfter needs to be implemented by a child class of "Module:PrizePool/Base"')
 end
 
@@ -915,15 +899,6 @@ function BasePrizePool:storeData()
 	return self
 end
 
---- Set the WidgetInjector.
----@param widgetInjector WidgetInjector An instance of a class that implements the WidgetInjector interface
----@return self
-function BasePrizePool:setWidgetInjector(widgetInjector)
-	assert(Class.instanceOf(widgetInjector, WidgetInjector), 'setWidgetInjector: Not a Widget Injector')
-	self._widgetInjector = widgetInjector
-	return self
-end
-
 --- Set the LpdbInjector.
 ---@param lpdbInjector LpdbInjector An instance of a class that implements the LpdbInjector interface
 ---@return self

components/widget/html/widget_html_base.lua

@@ -46,6 +46,13 @@ function HtmlBase:renderAs(tag, children, attributesInput)
 			htmlNode:node(child:tryMake())
 		else
 			---@cast child -Widget
+			---@diagnostic disable-next-line: undefined-field
+			if type(child) == 'table' and not child._build then
+				mw.log('ERROR! Bad child input:' .. mw.dumpObject(self.props.children))
+				-- Erroring here to make it easier to debug
+				-- Otherwise it will fail when the html is built
+				error('Table passed to HtmlBase:renderAs() without _build method')
+			end
 			htmlNode:node(child)
 		end
 	end)