refactor(widget): migrate remaining widgets to v2 & remove v1 backwar…

…ds compatability (#4863)

* refactor(widget): migrate infobox widgets to v2

* fix deploy name

* add flip

* re-add missing div

* linter

* typo

* remove self.children

* hopefully fix customizable

* as self.children is removed

* simplify widget

* ???

* fix headers

* instead of hacking with the injector, let's use a context for it

* fix typo

* fix typo

* fix typo

* fix

* fix error on links

* fix instance

* fix ppt

* fully fix links

* flip the correct one

* fix display text

* fix breakdown

* fix center

* respect annos

components/infobox/commons/infobox_basic.lua

@@ -102,13 +102,19 @@ end
 ---@param widgets Widget[]
 ---@return string
 function BasicInfobox:build(widgets)
-	return Infobox{
+	local infobox = Infobox{
 		gameName = self.wiki,
 		forceDarkMode = Logic.readBool(self.args.darkmodeforced),
 		bottomContent = self.bottomContent,
 		warnings = self.warnings,
 		children = widgets,
-	}:tryMake(self.injector) or ''
+	}
+	if self.injector then
+		-- Customizable backwards compatibility
+		local CustomizableContext = Lua.import('Module:Widget/Contexts/Customizable')
+		return CustomizableContext.LegacyCustomizable{value = self.injector, children = {infobox}}:tryMake()
+	end
+	return infobox:tryMake()
 end
 
 return BasicInfobox

components/prize_pool/commons/prize_pool_base.lua

@@ -644,11 +644,11 @@ function BasePrizePool:_buildRows()
 				local lastCellOfType = previousOfPrizeType[prize.type]
 				if lastCellOfType and prizeTypeData.mergeDisplayColumns then
 
-					if Table.isNotEmpty(lastCellOfType.children) and Table.isNotEmpty(cell.children) then
-						table.insert(lastCellOfType.children, tostring(mw.html.create('hr'):css('width', '100%')))
+					if Table.isNotEmpty(lastCellOfType.props.children) and Table.isNotEmpty(cell.props.children) then
+						table.insert(lastCellOfType.props.children, tostring(mw.html.create('hr'):css('width', '100%')))
 					end
 
-					Array.extendWith(lastCellOfType.children, cell.children)
+					Array.extendWith(lastCellOfType.props.children, cell.props.children)
 					lastCellOfType.css['flex-direction'] = 'column'
 
 					return nil
@@ -662,11 +662,11 @@ function BasePrizePool:_buildRows()
 				local lastInColumn = previousOpponent[columnIndex]
 
 				---@cast prizeCell -nil
-				if Table.isEmpty(prizeCell.children) then
+				if Table.isEmpty(prizeCell.props.children) then
 					prizeCell = BasePrizePool._emptyCell()
 				end
 
-				if lastInColumn and Table.deepEquals(lastInColumn.children, prizeCell.children) then
+				if lastInColumn and Table.deepEquals(lastInColumn.props.children, prizeCell.props.children) then
 					lastInColumn.rowSpan = (lastInColumn.rowSpan or 1) + 1
 				else
 					previousOpponent[columnIndex] = prizeCell

components/widget/contexts/widget_contexts_customizable.lua

@@ -0,0 +1,16 @@
+---
+-- @Liquipedia
+-- wiki=commons
+-- page=Module:Widget/Contexts/Customizable
+--
+-- Please see https://github.com/Liquipedia/Lua-Modules to contribute
+--
+
+local Class = require('Module:Class')
+local Lua = require('Module:Lua')
+local Context = Lua.import('Module:Widget/Context')
+
+-- Customizable backwards compatibility
+return {
+	LegacyCustomizable = Class.new(Context),
+}

components/widget/html/widget_html_all.lua

@@ -12,10 +12,12 @@ local Lua = require('Module:Lua')
 
 Widgets.Div = Lua.import('Module:Widget/Html/Div')
 Widgets.Fragment = Lua.import('Module:Widget/Html/Fragment')
+Widgets.Li = Lua.import('Module:Widget/Html/Li')
 Widgets.Span = Lua.import('Module:Widget/Html/Span')
 Widgets.Table = Lua.import('Module:Widget/Html/Table')
 Widgets.Td = Lua.import('Module:Widget/Html/Td')
 Widgets.Th = Lua.import('Module:Widget/Html/Th')
 Widgets.Tr = Lua.import('Module:Widget/Html/Tr')
+Widgets.Ul = Lua.import('Module:Widget/Html/Ul')
 
 return Widgets

components/widget/html/widget_html_li.lua

@@ -0,0 +1,27 @@
+---
+-- @Liquipedia
+-- wiki=commons
+-- page=Module:Widget/Html/Li
+--
+-- Please see https://github.com/Liquipedia/Lua-Modules to contribute
+--
+
+local Class = require('Module:Class')
+local Lua = require('Module:Lua')
+local Table = require('Module:Table')
+
+local WidgetHtml = Lua.import('Module:Widget/Html/Base')
+
+---@class WidgetLi: WidgetHtmlBase
+---@operator call(table): WidgetLi
+local Li = Class.new(WidgetHtml)
+
+---@return Html
+function Li:render()
+	local attributes = Table.copy(self.props.attributes or {})
+	attributes.class = self.props.classes
+	attributes.style = self.props.css
+	return self:renderAs('li', self.props.children, attributes)
+end
+
+return Li

components/widget/html/widget_html_ul.lua

@@ -0,0 +1,27 @@
+---
+-- @Liquipedia
+-- wiki=commons
+-- page=Module:Widget/Html/Ul
+--
+-- Please see https://github.com/Liquipedia/Lua-Modules to contribute
+--
+
+local Class = require('Module:Class')
+local Lua = require('Module:Lua')
+local Table = require('Module:Table')
+
+local WidgetHtml = Lua.import('Module:Widget/Html/Base')
+
+---@class WidgetUl: WidgetHtmlBase
+---@operator call(table): WidgetUl
+local Ul = Class.new(WidgetHtml)
+
+---@return Html
+function Ul:render()
+	local attributes = Table.copy(self.props.attributes or {})
+	attributes.class = self.props.classes
+	attributes.style = self.props.css
+	return self:renderAs('ul', self.props.children, attributes)
+end
+
+return Ul

components/widget/infobox/widget_infobox_breakdown.lua

@@ -6,53 +6,41 @@
 -- Please see https://github.com/Liquipedia/Lua-Modules to contribute
 --
 
+local Array = require('Module:Array')
 local Class = require('Module:Class')
 local Lua = require('Module:Lua')
+local Table = require('Module:Table')
 
 local Widget = Lua.import('Module:Widget')
+local WidgetUtil = Lua.import('Module:Widget/Util')
+local HtmlWidgets = Lua.import('Module:Widget/Html/All')
 
 ---@class BreakdownWidget: Widget
----@operator call({children:(string|number)[],classes:string[],contentClasses:table<integer,string[]>}):BreakdownWidget
+---@operator call(table):BreakdownWidget
 ---@field classes string[]
 ---@field contentClasses table<integer, string[]> --can have gaps in the outer table
-local Breakdown = Class.new(
-	Widget,
-	function(self, input)
-		self.classes = input.classes
-		self.contentClasses = input.contentClasses or {}
-	end
-)
-
----@param children string[]
----@return string?
-function Breakdown:make(children)
-	return Breakdown:_breakdown(children, self.classes, self.contentClasses)
-end
+local Breakdown = Class.new(Widget)
 
----@param contents (string|number)[]
----@param classes string[]
----@param contentClasses table<integer, string[]> --can have gaps in the outer table
----@return string?
-function Breakdown:_breakdown(contents, classes, contentClasses)
-	if type(contents) ~= 'table' or contents == {} then
+---@return Widget?
+function Breakdown:render()
+	if Table.isEmpty(self.props.children) then
 		return nil
 	end
 
-	local div = mw.html.create('div')
-	local number = #contents
-	for contentIndex, content in ipairs(contents) do
-		local infoboxCustomCell = mw.html.create('div'):addClass('infobox-cell-' .. number)
-		for _, class in pairs(classes or {}) do
-			infoboxCustomCell:addClass(class)
-		end
-		for _, class in pairs(contentClasses['content' .. contentIndex] or {}) do
-			infoboxCustomCell:addClass(class)
-		end
-		infoboxCustomCell:wikitext(content)
-		div:node(infoboxCustomCell)
-	end
-
-	return tostring(div)
+	local number = #self.props.children
+	local mappedChildren = Array.map(self.props.children, function(child, childIndex)
+		return HtmlWidgets.Div{
+			children = {child},
+			classes = WidgetUtil.collect(
+				'infobox-cell-' .. number,
+				self.props.classes,
+				(self.props.contentClasses or {})['content' .. childIndex]
+			),
+		}
+	end)
+	return HtmlWidgets.Div{
+		children = mappedChildren,
+	}
 end
 
 return Breakdown

components/widget/infobox/widget_infobox_cell.lua

@@ -8,100 +8,64 @@
 
 local Class = require('Module:Class')
 local Lua = require('Module:Lua')
+local Logic = require('Module:Logic')
 
 local Widget = Lua.import('Module:Widget')
+local HtmlWidgets = Lua.import('Module:Widget/Html/All')
+local Link = Lua.import('Module:Widget/Basic/Link')
 
 ---@class CellWidgetOptions
 ---@field columns number?
 ---@field makeLink boolean?
 ---@field surpressColon boolean?
 
 ---@class CellWidget: Widget
----@operator call({name:string|number,content:(string|number)[],classes:string[]?,options:CellWidgetOptions}):CellWidget
----@field name string|number
----@field options CellWidgetOptions
----@field classes string[]?
+---@operator call(table):CellWidget
 local Cell = Class.new(Widget,
 	function(self, input)
 		self.name = self:assertExistsAndCopy(input.name)
-		self.children = input.children or input.content or {}
-		self.options = input.options or {}
-		self.classes = input.classes
-
-		self.options.columns = self.options.columns or 2
+		self.props.children = input.children or input.content or {}
 	end
 )
 
----@param description string|number
----@return CellWidget
-function Cell:_new(description)
-	self.root = mw.html.create('div')
-	self.description = mw.html.create('div')
-	self.description:addClass('infobox-cell-'.. self.options.columns)
-					:addClass('infobox-description')
-					:wikitext(description)
-					:wikitext(not self.options.surpressColon and ':' or nil)
-	self.contentDiv = nil
-	return self
-end
-
----@param ... string
----@return CellWidget
-function Cell:_class(...)
-	for i = 1, select('#', ...) do
-		local item = select(i, ...)
-		if item == nil then
-			break
-		end
-
-		self.root:addClass(item)
+---@return Widget?
+function Cell:render()
+	if Logic.isEmpty(self.props.children) then
+		return
 	end
-	return self
-end
 
----@param ... string
----@return CellWidget
-function Cell:_content(...)
-	local firstItem = select(1, ...)
-	if firstItem == nil or firstItem == '' then
-		self.contentDiv = nil
-		return self
-	end
+	local options = self.props.options or {}
+	options.columns = options.columns or 2
 
-	self.contentDiv = mw.html.create('div')
-	self.contentDiv:css('width', (100 * (self.options.columns - 1) / self.options.columns) .. '%') -- 66.66% for col = 3
-	for i = 1, select('#', ...) do
+	local mappedChildren = {}
+	for i, child in ipairs(self.props.children) do
 		if i > 1 then
-			self.contentDiv:wikitext('<br/>')
-		end
-		local item = select(i, ...) ---@type string?
-		if item == nil then
-			break
+			table.insert(mappedChildren, '<br/>')
 		end
-
-		if self.options.makeLink == true then
-			self.contentDiv:wikitext('[[' .. item .. ']]')
+		if options.makeLink then
+			table.insert(mappedChildren, Link{children = {child}, link = child})
 		else
-			self.contentDiv:wikitext(item)
+			table.insert(mappedChildren, child)
 		end
 	end
-	return self
-end
-
----@param children string[]
----@return string?
-function Cell:make(children)
-	self:_new(self.name)
-	self:_class(unpack(self.classes or {}))
-	self:_content(unpack(children))
 
-	if self.contentDiv == nil then
+	if Logic.isEmpty(mappedChildren[1]) then
 		return
 	end
 
-	self.root	:node(self.description)
-				:node(self.contentDiv)
-	return tostring(self.root)
+	return HtmlWidgets.Div{
+		classes = self.props.classes,
+		children = {
+			HtmlWidgets.Div{
+				classes = {'infobox-cell-' .. options.columns, 'infobox-description'},
+				children = {self.props.name, not options.surpressColon and ':' or nil}
+			},
+			HtmlWidgets.Div{
+				css = {width = (100 * (options.columns - 1) / options.columns) .. '%'}, -- 66.66% for col = 3
+				children = mappedChildren,
+			}
+		}
+	}
 end
 
 return Cell

components/widget/infobox/widget_infobox_center.lua

@@ -11,41 +11,23 @@ local Lua = require('Module:Lua')
 local Table = require('Module:Table')
 
 local Widget = Lua.import('Module:Widget')
+local WidgetUtil = Lua.import('Module:Widget/Util')
+local HtmlWidgets = Lua.import('Module:Widget/Html/All')
 
 ---@class CentereWidget: Widget
 ---@operator call(table): CentereWidget
 ---@field classes string[]
-local Center = Class.new(
-	Widget,
-	function(self, input)
-		self.classes = input.classes
-	end
-)
-
----@param children string[]
----@return string?
-function Center:make(children)
-	return Center:_create(children, self.classes)
-end
+local Center = Class.new(Widget)
 
----@param content (string|number)[]
----@param classes string[]
----@return string?
-function Center:_create(content, classes)
-	if Table.isEmpty(content) then
+---@return Widget?
+function Center:render()
+	if Table.isEmpty(self.props.children) then
 		return nil
 	end
-
-	local centered = mw.html.create('div'):addClass('infobox-center')
-	for _, class in ipairs(classes or {}) do
-		centered:addClass(class)
-	end
-
-	for _, item in pairs(content) do
-		centered:wikitext(item)
-	end
-
-	return tostring(mw.html.create('div'):node(centered))
+	return HtmlWidgets.Div{children = {HtmlWidgets.Div{
+		classes = WidgetUtil.collect('infobox-center', self.props.classes),
+		children = self.props.children
+	}}}
 end
 
 return Center