refactor: filter buttons to widget3

lua/wikis/commons/Widget/FilterButtons.lua

@@ -1,3 +1,3 @@
 ---
 -- @Liquipedia
 -- page=Module:Widget/FilterButtons
@@ -8,21 +8,18 @@
 local Lua = require('Module:Lua')
 
 local Array = Lua.import('Module:Array')
-local Class = Lua.import('Module:Class')
 local FnUtil = Lua.import('Module:FnUtil')
 local Logic = Lua.import('Module:Logic')
 local Variables = Lua.import('Module:Variables')
 local Table = Lua.import('Module:Table')
 
-local HtmlWidgets = Lua.import('Module:Widget/Html/All')
-local Div = HtmlWidgets.Div
+local Component = Lua.import('Module:Widget/Component')
+local Html = Lua.import('Module:Widget/Html')
+local Div = Html.Div
 local FilterButton = Lua.import('Module:Widget/FilterButtons/Button')
 local FilterButtonRow = Lua.import('Module:Widget/FilterButtons/ButtonRow')
-local Widget = Lua.import('Module:Widget')
 
----@class FilterButtons: Widget
----@operator call(table): FilterButtons
-local FilterButtons = Class.new(Widget)
+local FilterButtons = {}
 
 ---@class FilterButtonCategory
 ---@field name string
@@ -32,18 +29,18 @@
 ---@field defaultItem string?
 ---@field itemToPropertyValues? fun(item: string): string?
 ---@field itemIsValid? fun(item: string): boolean
----@field transform? fun(item: string): string|Widget|Html|nil
+---@field transform? fun(item: string): Renderable?
 ---@field expandKey string?
 ---@field expandable boolean?
 ---@field order? fun(a: string, b: string): boolean
 ---@field load? fun(cat: FilterButtonCategory)
 ---@field hasFeatured boolean?
 ---@field featuredByDefault boolean?
 
+---@param props {categories: FilterButtonCategory[]?}
 ---@return Widget
-function FilterButtons:render()
-	---@type FilterButtonCategory[]
-	local categories = self.props.categories or Lua.import('Module:FilterButtons/Config').categories
+function FilterButtons.render(props)
+	local categories = props.categories or Lua.import('Module:FilterButtons/Config').categories
 
 	Array.forEach(categories, FilterButtons._loadCategories)
 
@@ -70,7 +67,10 @@
 	end
 
 	local itemToPropertyValues = category.itemToPropertyValues or FnUtil.identity
-	category.defaultItems = Array.map(Logic.emptyOr(category.defaultItems, category.items), itemToPropertyValues)
+	category.defaultItems = Array.map(
+		Logic.emptyOr(category.defaultItems, category.items) --[[ @as string[] ]],
+		itemToPropertyValues
+	)
 end
 
 ---@param category FilterButtonCategory
@@ -86,7 +86,7 @@
 end
 
 ---@param category FilterButtonCategory
----@return Widget
+---@return VNode
 function FilterButtons.getButtonRow(category)
 	local transformValueToText = category.transform or FnUtil.identity
 	local itemToPropertyValues = category.itemToPropertyValues or FnUtil.identity
@@ -118,4 +118,4 @@
 	return buttons
 end
 
-return FilterButtons
+return Component.component(FilterButtons.render)

lua/wikis/commons/Widget/FilterButtons/Button.lua

@@ -1,3 +1,3 @@
 ---
 -- @Liquipedia
 -- page=Module:Widget/FilterButtons/Button
@@ -8,35 +8,32 @@
 local Lua = require('Module:Lua')
 
 local Array = Lua.import('Module:Array')
-local Class = Lua.import('Module:Class')
 local Logic = Lua.import('Module:Logic')
 
-local Widget = Lua.import('Module:Widget')
-local HtmlWidgets = Lua.import('Module:Widget/Html/All')
+local Component = Lua.import('Module:Widget/Component')
+local Html = Lua.import('Module:Widget/Html')
+
+---@alias FilterButton VNode<FilterButtonParameters>
 
 ---@class FilterButtonParameters
 ---@field buttonClasses string[]?
 ---@field css table<string,string>?
 ---@field active boolean?
 ---@field value string?
----@field display Renderable
-
----@class FilterButton: Widget
----@operator call(table): FilterButton
----@field props FilterButtonParameters
-local FilterButton = Class.new(Widget)
+---@field display Renderable|Renderable[]?
 
----@return Widget
-function FilterButton:render()
-	return HtmlWidgets.Span{
+---@param props FilterButtonParameters
+---@return VNode
+local function FilterButton(props)
+	return Html.Span{
 		classes = Array.extend({
 			'filter-button',
-			Logic.readBool(self.props.active) and 'filter-button--active' or nil
-		}, self.props.buttonClasses),
-		attributes = { ['data-filter-on'] = self.props.value },
-		css = self.props.css,
-		children = { self.props.display }
+			Logic.readBool(props.active) and 'filter-button--active' or nil
+		}, props.buttonClasses),
+		attributes = { ['data-filter-on'] = props.value },
+		css = props.css,
+		children = props.display
 	}
 end
 
-return FilterButton
+return Component.component(FilterButton)

lua/wikis/commons/Widget/FilterButtons/ButtonRow.lua

@@ -1,3 +1,3 @@
 ---
 -- @Liquipedia
 -- page=Module:Widget/FilterButtons/ButtonRow
@@ -7,62 +7,57 @@
 
 local Lua = require('Module:Lua')
 
-local Class = Lua.import('Module:Class')
 local I18n = Lua.import('Module:I18n')
 local String = Lua.import('Module:StringUtils')
 
-local Widget = Lua.import('Module:Widget')
+local Component = Lua.import('Module:Widget/Component')
 local FilterButton = Lua.import('Module:Widget/FilterButtons/Button')
-local HtmlWidgets = Lua.import('Module:Widget/Html/All')
+local Html = Lua.import('Module:Widget/Html')
 local IconFa = Lua.import('Module:Widget/Image/Icon/Fontawesome')
 local WidgetUtil = Lua.import('Module:Widget/Util')
 
 ---@class FilterButtonRowParameters
 ---@field categoryName string
----@field buttons (FilterButton?)[]
+---@field buttons FilterButton[]
 ---@field expandKey string?
 ---@field featuredByDefault boolean?
 ---@field hasFeatured boolean?
 
 local CLASS_NAME = 'filter-buttons'
 
----@class FilterButtonRow: Widget
----@operator call(table): FilterButtonRow
----@field props FilterButtonRowParameters
-local FilterButtonRow = Class.new(Widget)
-
----@return Widget
-function FilterButtonRow:render()
-	return HtmlWidgets.Div{
+---@param props FilterButtonRowParameters
+---@return VNode
+local function FilterButtonRow(props)
+	return Html.Div{
 		classes = {CLASS_NAME},
 		attributes = {
 			['data-filter'] = 'data-filter',
 			['data-filter-effect'] = 'fade',
-			['data-filter-group'] = 'filterbuttons-' .. self.props.categoryName,
-			['data-filter-default-curated'] = self.props.featuredByDefault and 'true' or nil,
+			['data-filter-group'] = 'filterbuttons-' .. props.categoryName,
+			['data-filter-default-curated'] = props.featuredByDefault and 'true' or nil,
 		},
 		children = WidgetUtil.collect(
 			FilterButton{
 				buttonClasses = { 'filter-button-all' },
 				value = 'all',
 				display = I18n.translate('filterbuttons-all')
 			},
-			self.props.hasFeatured and FilterButton{
+			props.hasFeatured and FilterButton{
 				value = 'curated',
 				display = I18n.translate('filterbuttons-featured')
 			},
-			self.props.buttons,
-			String.isNotEmpty(self.props.expandKey) and HtmlWidgets.Div{
+			props.buttons,
+			String.isNotEmpty(props.expandKey) and Html.Div{
 				classes = {CLASS_NAME},
 				attributes = {
 					['data-filter'] = 'data-filter',
 					['data-filter-effect'] ='fade',
-					['data-filter-group'] = 'tournaments-list-dropdown-' .. self.props.expandKey
+					['data-filter-group'] = 'tournaments-list-dropdown-' .. props.expandKey
 				},
 				children = {
 					FilterButton{
 						buttonClasses = { 'filter-button-dropdown' },
-						value = 'dropdown-' .. self.props.expandKey,
+						value = 'dropdown-' .. props.expandKey,
 						display = IconFa{iconName = 'expand'}
 					},
 					FilterButton{
@@ -75,4 +70,4 @@
 	}
 end
 
-return FilterButtonRow
+return Component.component(FilterButtonRow)