Adjust SuiWeb according to the standards

src/js/Components.js

@@ -67,7 +67,7 @@ export function App(game)
         },
         [
             Board,
-            game.board
+            { board: game.board }
         ],
         [
             "div",
@@ -83,13 +83,13 @@ export function App(game)
 /**
  * Renders an element which represents the specified {@link board `board`}.
  *
- * @param {Board} board
+ * @param {{ board: Board }} board
  * The board represented in this element.
  *
  * @returns {NodeDescriptor}
  * The rendered element.
  */
-export function Board(board)
+export function Board({ board })
 {
     let fields = board.flatMap((row) => row);
 
@@ -99,7 +99,7 @@ export function Board(board)
         ...fields.map(
             (field) =>
             {
-                return /** @type {NodeDescriptor} */([Field, field]);
+                return /** @type {NodeDescriptor} */([Field, { field }]);
             }),
         ["div", { style: "clear: both;" }]
     ];
@@ -108,13 +108,13 @@ export function Board(board)
 /**
  * Renders an element which represents the specified {@link field `field`}.
  *
- * @param {CellOwner} field
+ * @param {{ field: CellOwner }} field
  * The field to represent.
  *
  * @returns {NodeDescriptor}
  * The rendered element.
  */
-export function Field(field)
+export function Field({ field })
 {
     return [
         "div",
@@ -143,23 +143,23 @@ export function MenuBar()
     return [
         "div",
         { className: "menu-bar" },
-        [Button, ["New Game", { className: newGameClass }]],
-        [Button, ["Save Game", { className: saveGameClass }]],
-        [Button, ["Load Game", { className: loadGameClass }]],
-        [Button, ["Undo Last Move", { className: undoClass }]]
+        [Button, { content: ["New Game", { className: newGameClass }] }],
+        [Button, { content: ["Save Game", { className: saveGameClass }] }],
+        [Button, { content: ["Load Game", { className: loadGameClass }] }],
+        [Button, { content: ["Undo Last Move", { className: undoClass }] }]
     ];
 }
 
 /**
  * Renders a button.
  *
- * @param {...ElementDescriptor[1][]} content
+ * @param {{ content: ElementDescriptor[1][] }} content
  * The settings of the button.
  *
  * @returns {NodeDescriptor}
  * The rendered element.
  */
-export function Button(content)
+export function Button({ content })
 {
     return [
         "button",

src/js/SuiWeb.js

@@ -11,6 +11,9 @@ export class SuiWeb
      *
      * @param {HTMLElement} element
      * The element to add the rendered node to.
+     *
+     * @returns {Node}
+     * The resulting element.
      */
     static render(data, element)
     {
@@ -19,14 +22,33 @@ export class SuiWeb
             let descriptor = data[0];
             let args = data.slice(1);
 
-            if (typeof descriptor === "function")
+            if (typeof descriptor === "function" || typeof descriptor === "string")
             {
-                SuiWeb.render(descriptor(...args), element);
-            }
-            else if (typeof descriptor === "string")
-            {
-                let result = element.ownerDocument.createElement(descriptor);
-                element.appendChild(result);
+                /**
+                 * @type {HTMLElement}
+                 */
+                let result;
+
+                if (typeof descriptor === "function")
+                {
+                    /**
+                     * @type {any[]}
+                     */
+                    let arg = [];
+
+                    if (typeof args[0] === "object" && !Array.isArray(args[0]))
+                    {
+                        arg = [args[0]];
+                        args = args.slice(1);
+                    }
+
+                    result = /** @type {HTMLElement} */ (SuiWeb.render(descriptor(...arg), element));
+                }
+                else
+                {
+                    result = element.ownerDocument.createElement(descriptor);
+                    element.appendChild(result);
+                }
 
                 for (let arg of args)
                 {
@@ -39,6 +61,8 @@ export class SuiWeb
                         SuiWeb.render(arg, result);
                     }
                 }
+
+                return result;
             }
             else
             {
@@ -47,7 +71,7 @@ export class SuiWeb
         }
         else if (typeof data === "string")
         {
-            element.appendChild(element.ownerDocument.createTextNode(data));
+            return element.appendChild(element.ownerDocument.createTextNode(data));
         }
         else
         {