native-document 1.0.93 → 1.0.95

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "native-document",
-  "version": "1.0.93",
+  "version": "1.0.95",
   "main": "index.js",
   "type": "module",
   "scripts": {

package/src/core/elements/anchor.js

@@ -15,6 +15,7 @@ export default function Anchor(name, isUniqueChild = false) {
 
     anchorFragment.nativeInsertBefore = anchorFragment.insertBefore;
     anchorFragment.nativeAppendChild = anchorFragment.appendChild;
+    anchorFragment.nativeAppend = anchorFragment.append;
 
     const isParentUniqueChild = (parent) => (isUniqueChild || (parent.firstChild === anchorStart && parent.lastChild === anchorEnd))
 
@@ -50,59 +51,66 @@ export default function Anchor(name, isUniqueChild = false) {
         before = before ?? anchorEnd;
         insertBefore(parent, child, before);
     };
+
     anchorFragment.append = function(...args ) {
         return anchorFragment.appendChild(args);
-    }
+    };
 
-    anchorFragment.removeChildren = function() {
+    anchorFragment.removeChildren = async function() {
         const parent = anchorEnd.parentNode;
         if(parent === anchorFragment) {
             return;
         }
-        if(isParentUniqueChild(parent)) {
-            parent.replaceChildren(anchorStart, anchorEnd);
-            return;
-        }
+        // if(isParentUniqueChild(parent)) {
+        //     parent.replaceChildren(anchorStart, anchorEnd);
+        //     return;
+        // }
 
         let itemToRemove = anchorStart.nextSibling, tempItem;
-        const fragment = document.createDocumentFragment();
+        const removes = [];
         while(itemToRemove && itemToRemove !== anchorEnd) {
             tempItem = itemToRemove.nextSibling;
-            fragment.append(itemToRemove);
+            removes.push(itemToRemove.remove());
             itemToRemove =  tempItem;
         }
-        fragment.replaceChildren();
-    }
-    anchorFragment.remove = function() {
+        await Promise.all(removes);
+    };
+
+    anchorFragment.remove = async function() {
         const parent = anchorEnd.parentNode;
         if(parent === anchorFragment) {
             return;
         }
         let itemToRemove = anchorStart.nextSibling, tempItem;
+        const allItemToRemove = [];
+        const removes = [];
         while(itemToRemove && itemToRemove !== anchorEnd) {
             tempItem = itemToRemove.nextSibling;
-            anchorFragment.nativeAppendChild(itemToRemove);
+            allItemToRemove.push(itemToRemove);
+            removes.push(itemToRemove.remove());
             itemToRemove = tempItem;
         }
+        await Promise.all(removes);
+        anchorFragment.nativeAppend(...allItemToRemove);
     };
 
-    anchorFragment.removeWithAnchors = function() {
-        anchorFragment.removeChildren();
+    anchorFragment.removeWithAnchors = async function() {
+        await anchorFragment.removeChildren();
         anchorStart.remove();
         anchorEnd.remove();
     };
 
-    anchorFragment.replaceContent = function(child) {
+    anchorFragment.replaceContent = async function(child) {
         const childElement = Validator.isElement(child) ? child : ElementCreator.getChild(child);
         const parent = anchorEnd.parentNode;
         if(!parent) {
             return;
         }
-        if(isParentUniqueChild(parent)) {
-            parent.replaceChildren(anchorStart, childElement, anchorEnd);
-            return;
-        }
-        anchorFragment.removeChildren();
+        // if(isParentUniqueChild(parent)) {
+        //     parent.replaceChildren(anchorStart, childElement, anchorEnd);
+        //     return;
+        // }
+        await anchorFragment.removeChildren();
         parent.insertBefore(childElement, anchorEnd);
     };
 

package/src/core/elements/content-formatter.js

@@ -1,32 +1,169 @@
 import HtmlElementWrapper from "../wrappers/HtmlElementWrapper";
 
+/**
+ * Creates a `<div>` element.
+ * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLDivElement}
+ */
 export const Div = HtmlElementWrapper('div');
+
+/**
+ * Creates a `<span>` element.
+ * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLSpanElement}
+ */
 export const Span = HtmlElementWrapper('span');
+
+/**
+ * Creates a `<label>` element.
+ * @type {function(LabelAttributes=, NdChild|NdChild[]=): HTMLLabelElement}
+ */
 export const Label = HtmlElementWrapper('label');
+
+/**
+ * Creates a `<p>` element.
+ * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLParagraphElement}
+ */
 export const P = HtmlElementWrapper('p');
+
+/**
+ * Alias for {@link P}.
+ * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLParagraphElement}
+ */
 export const Paragraph = P;
+
+/**
+ * Creates a `<strong>` element.
+ * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLElement}
+ */
 export const Strong = HtmlElementWrapper('strong');
+
+/**
+ * Creates a `<h1>` element.
+ * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLHeadingElement}
+ */
 export const H1 = HtmlElementWrapper('h1');
+
+/**
+ * Creates a `<h2>` element.
+ * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLHeadingElement}
+ */
 export const H2 = HtmlElementWrapper('h2');
+
+/**
+ * Creates a `<h3>` element.
+ * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLHeadingElement}
+ */
 export const H3 = HtmlElementWrapper('h3');
+
+/**
+ * Creates a `<h4>` element.
+ * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLHeadingElement}
+ */
 export const H4 = HtmlElementWrapper('h4');
+
+/**
+ * Creates a `<h5>` element.
+ * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLHeadingElement}
+ */
 export const H5 = HtmlElementWrapper('h5');
+
+/**
+ * Creates a `<h6>` element.
+ * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLHeadingElement}
+ */
 export const H6 = HtmlElementWrapper('h6');
 
+/**
+ * Creates a `<br>` element.
+ * @type {function(GlobalAttributes=): HTMLBRElement}
+ */
 export const Br = HtmlElementWrapper('br');
 
+/**
+ * Creates an `<a>` element.
+ * @type {function(AnchorAttributes=, NdChild|NdChild[]=): HTMLAnchorElement}
+ */
 export const Link = HtmlElementWrapper('a');
+
+/**
+ * Creates a `<pre>` element.
+ * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLPreElement}
+ */
 export const Pre = HtmlElementWrapper('pre');
+
+/**
+ * Creates a `<code>` element.
+ * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLElement}
+ */
 export const Code = HtmlElementWrapper('code');
+
+/**
+ * Creates a `<blockquote>` element.
+ * @type {function(GlobalAttributes & { cite?: string }=, NdChild|NdChild[]=): HTMLQuoteElement}
+ */
 export const Blockquote = HtmlElementWrapper('blockquote');
+
+/**
+ * Creates an `<hr>` element.
+ * @type {function(GlobalAttributes=): HTMLHRElement}
+ */
 export const Hr = HtmlElementWrapper('hr');
+
+/**
+ * Creates an `<em>` element.
+ * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLElement}
+ */
 export const Em = HtmlElementWrapper('em');
+
+/**
+ * Creates a `<small>` element.
+ * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLElement}
+ */
 export const Small = HtmlElementWrapper('small');
+
+/**
+ * Creates a `<mark>` element.
+ * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLElement}
+ */
 export const Mark = HtmlElementWrapper('mark');
+
+/**
+ * Creates a `<del>` element.
+ * @type {function(ModAttributes=, NdChild|NdChild[]=): HTMLModElement}
+ */
 export const Del = HtmlElementWrapper('del');
+
+/**
+ * Creates an `<ins>` element.
+ * @type {function(ModAttributes=, NdChild|NdChild[]=): HTMLModElement}
+ */
 export const Ins = HtmlElementWrapper('ins');
+
+/**
+ * Creates a `<sub>` element.
+ * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLElement}
+ */
 export const Sub = HtmlElementWrapper('sub');
+
+/**
+ * Creates a `<sup>` element.
+ * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLElement}
+ */
 export const Sup = HtmlElementWrapper('sup');
+
+/**
+ * Creates an `<abbr>` element.
+ * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLElement}
+ */
 export const Abbr = HtmlElementWrapper('abbr');
+
+/**
+ * Creates a `<cite>` element.
+ * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLElement}
+ */
 export const Cite = HtmlElementWrapper('cite');
-export const Quote = HtmlElementWrapper('q');
+
+/**
+ * Creates a `<q>` element.
+ * @type {function(GlobalAttributes & { cite?: string }=, NdChild|NdChild[]=): HTMLQuoteElement}
+ */
+export const Quote = HtmlElementWrapper('q');

package/src/core/elements/control/for-each-array.js

@@ -9,7 +9,7 @@ import NativeDocumentError from "../../errors/NativeDocumentError";
  * Provides index observables and handles array mutations efficiently.
  *
  * @param {ObservableArray} data - ObservableArray to iterate over
- * @param {Function} callback - Function that renders each item (item, indexObservable) => ValidChild
+ * @param {(item: *, index: null|ObservableItem) => NdChild} callback - Function that renders each item (item, indexObservable) => ValidChild
  * @param {Object} [configs={}] - Configuration options
  * @param {boolean} [configs.shouldKeepItemsInCache] - Whether to cache rendered items
  * @param {boolean} [configs.isParentUniqueChild] - When it's the only child of the parent

package/src/core/elements/control/for-each.js

@@ -11,7 +11,7 @@ import NativeDocumentError from "../../errors/NativeDocumentError";
  * Efficiently manages DOM updates by tracking items with keys.
  *
  * @param {ObservableItem<Array|Object>} data - Observable containing array or object to iterate over
- * @param {Function} callback - Function that renders each item (item, index) => ValidChild
+ * @param {(item: *, index: null|ObservableItem) => NdChild} callback - Function that renders each item (item, index) => ValidChild
  * @param {string|Function} [key] - Property name or function to generate unique keys for items
  * @param {Object} [options={}] - Configuration options
  * @param {boolean} [options.shouldKeepItemsInCache=false] - Whether to cache rendered items
@@ -50,7 +50,7 @@ export function ForEach(data, callback, key, { shouldKeepItemsInCache = false }
             }
             const child = cacheItem.child?.deref();
             if(parent && child) {
-                parent.removeChild(child);
+                child.remove();
             }
             cacheItem.indexObserver?.cleanup();
             cacheItem.child = null;

package/src/core/elements/control/show-if.js

@@ -9,7 +9,7 @@ import {ElementCreator} from "../../wrappers/ElementCreator";
  * The element is mounted/unmounted from the DOM as the condition changes.
  *
  * @param {ObservableItem<boolean>|ObservableChecker<boolean>|ObservableWhen} condition - Observable condition to watch
- * @param {ValidChild} child - Element or content to show/hide
+ * @param {NdChild|(() => NdChild)} child - Element or content to show/hide
  * @param {Object} [options={}] - Configuration options
  * @param {string|null} [options.comment=null] - Comment for debugging
  * @param {boolean} [options.shouldKeepInCache=true] - Whether to cache the element when hidden
@@ -57,7 +57,7 @@ export const ShowIf = function(condition, child, { comment = null, shouldKeepInC
  * Inverse of ShowIf - element is shown when condition is false.
  *
  * @param {ObservableItem<boolean>|ObservableChecker<boolean>} condition - Observable condition to watch
- * @param {ValidChild} child - Element or content to show/hide
+ * @param {NdChild|(() => NdChild)} child - Element or content to show/hide
  * @param {Object} [configs] - Configuration options
  * @param {string|null} [configs.comment] - Comment for debugging
  * @param {boolean} [configs.shouldKeepInCache] - Whether to cache element when hidden
@@ -78,7 +78,7 @@ export const HideIf = function(condition, child, configs) {
  * Same as ShowIf - element is shown when condition is true.
  *
  * @param {ObservableItem<boolean>|ObservableChecker<boolean>|ObservableWhen} condition - Observable condition to watch
- * @param {ValidChild} child - Element or content to show/hide
+ * @param {NdChild|(() => NdChild)} child - Element or content to show/hide
  * @param {Object} [configs] - Configuration options
  * @param {string|null} [configs.comment] - Comment for debugging
  * @param {boolean} [configs.shouldKeepInCache] - Whether to cache element when hidden

package/src/core/elements/control/show-when.js

@@ -8,13 +8,13 @@ import {ShowIf} from "./show-if.js";
  *
  * @overload
  * @param {ObservableWhen} observerWhenResult - Result from observable.when(value)
- * @param {ValidChild} view - Content to show when condition matches
+ * @param {NdChild|(() => NdChild)} view - Content to show when condition matches
  * @returns {AnchorDocumentFragment}
  *
  * @overload
  * @param {ObservableItem} observer - Observable to watch
  * @param {*} target - Value to match
- * @param {ValidChild} view - Content to show when observable equals target
+ * @param {NdChild|(() => NdChild)} view - Content to show when observable equals target
  * @returns {AnchorDocumentFragment}
  *
  * @example

package/src/core/elements/control/switch.js

@@ -10,7 +10,7 @@ import {ElementCreator} from "../../wrappers/ElementCreator";
  * Like a switch statement for UI - shows the content corresponding to current value.
  *
  * @param {ObservableItem|ObservableChecker} $condition - Observable to watch
- * @param {Object<string|number, ValidChild>} values - Map of values to their corresponding content
+ * @param {Object<string|number, NdChild|(() => NdChild)>} values - Map of values to their corresponding content
  * @param {boolean} [shouldKeepInCache=true] - Whether to cache rendered views
  * @returns {AnchorDocumentFragment & {add: Function, remove: Function}} Fragment with dynamic methods
  * @example

package/src/core/elements/description-list.js

@@ -1,5 +1,19 @@
 import HtmlElementWrapper from "../wrappers/HtmlElementWrapper";
 
+/**
+ * Creates a `<dl>` element.
+ * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLDListElement}
+ */
 export const Dl = HtmlElementWrapper('dl');
+
+/**
+ * Creates a `<dt>` element.
+ * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLElement}
+ */
 export const Dt = HtmlElementWrapper('dt');
+
+/**
+ * Creates a `<dd>` element.
+ * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLElement}
+ */
 export const Dd = HtmlElementWrapper('dd');

package/src/core/elements/form.js

@@ -1,6 +1,16 @@
 import HtmlElementWrapper from "../wrappers/HtmlElementWrapper";
 
 
+/**
+ * Creates a `<form>` element.
+ * Extended with fluent methods: `.submit()`, `.post()`, `.get()`, `.multipartFormData()`.
+ * @type {function(FormAttributes=, NdChild|NdChild[]=): HTMLFormElement & {
+ *   submit: (actionOrFn: string | ((e: SubmitEvent) => void)) => HTMLFormElement,
+ *   post: (action: string) => HTMLFormElement,
+ *   get: (action: string) => HTMLFormElement,
+ *   multipartFormData: () => HTMLFormElement,
+ * }}
+ */
 export const Form = HtmlElementWrapper('form', function(el) {
 
     el.submit = function(action) {
@@ -30,42 +40,216 @@ export const Form = HtmlElementWrapper('form', function(el) {
     return el;
 });
 
+/**
+ * Creates an `<input>` element.
+ * @type {function(InputAttributes=): HTMLInputElement}
+ */
 export const Input = HtmlElementWrapper('input');
 
+/**
+ * Creates a `<textarea>` element.
+ * @type {function(TextAreaAttributes=, NdChild|NdChild[]=): HTMLTextAreaElement}
+ */
 export const TextArea = HtmlElementWrapper('textarea');
+
+/**
+ * Alias for {@link TextArea}.
+ * @type {function(TextAreaAttributes=, NdChild|NdChild[]=): HTMLTextAreaElement}
+ */
 export const TextInput = TextArea;
 
+/**
+ * Creates a `<select>` element.
+ * @type {function(SelectAttributes=, NdChild|NdChild[]=): HTMLSelectElement}
+ */
 export const Select = HtmlElementWrapper('select');
-export const FieldSet = HtmlElementWrapper('fieldset', );
+
+/**
+ * Creates a `<fieldset>` element.
+ * @type {function(GlobalAttributes & { disabled?: Observable<boolean>|boolean }=, NdChild|NdChild[]=): HTMLFieldSetElement}
+ */
+export const FieldSet = HtmlElementWrapper('fieldset');
+
+/**
+ * Creates an `<option>` element.
+ * @type {function(OptionAttributes=, NdChild|NdChild[]=): HTMLOptionElement}
+ */
 export const Option = HtmlElementWrapper('option');
+
+/**
+ * Creates a `<legend>` element.
+ * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLLegendElement}
+ */
 export const Legend = HtmlElementWrapper('legend');
+
+/**
+ * Creates a `<datalist>` element.
+ * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLDataListElement}
+ */
 export const Datalist = HtmlElementWrapper('datalist');
+
+/**
+ * Creates an `<output>` element.
+ * @type {function(OutputAttributes=, NdChild|NdChild[]=): HTMLOutputElement}
+ */
 export const Output = HtmlElementWrapper('output');
+
+/**
+ * Creates a `<progress>` element.
+ * @type {function(ProgressAttributes=, NdChild|NdChild[]=): HTMLProgressElement}
+ */
 export const Progress = HtmlElementWrapper('progress');
+
+/**
+ * Creates a `<meter>` element.
+ * @type {function(MeterAttributes=, NdChild|NdChild[]=): HTMLMeterElement}
+ */
 export const Meter = HtmlElementWrapper('meter');
 
+/**
+ * Creates an `<input readonly>` element.
+ * @param {Omit<InputAttributes, 'type'|'readonly'|'readOnly'>} [attributes]
+ * @returns {HTMLInputElement}
+ */
 export const ReadonlyInput = (attributes) => Input({ readonly: true, ...attributes });
-export const HiddenInput = (attributes) => Input({type: 'hidden', ...attributes });
+
+/**
+ * Creates an `<input type="hidden">` element.
+ * @param {Omit<InputAttributes, 'type'>} [attributes]
+ * @returns {HTMLInputElement}
+ */
+export const HiddenInput = (attributes) => Input({ type: 'hidden', ...attributes });
+
+/**
+ * Creates an `<input type="file">` element.
+ * @param {Omit<InputAttributes, 'type'>} [attributes]
+ * @returns {HTMLInputElement}
+ */
 export const FileInput = (attributes) => Input({ type: 'file', ...attributes });
+
+/**
+ * Creates an `<input type="password">` element.
+ * @param {Omit<InputAttributes, 'type'>} [attributes]
+ * @returns {HTMLInputElement}
+ */
 export const PasswordInput = (attributes) => Input({ type: 'password', ...attributes });
+
+/**
+ * Creates an `<input type="checkbox">` element.
+ * @param {Omit<InputAttributes, 'type'>} [attributes]
+ * @returns {HTMLInputElement}
+ */
 export const Checkbox = (attributes) => Input({ type: 'checkbox', ...attributes });
+
+/**
+ * Creates an `<input type="radio">` element.
+ * @param {Omit<InputAttributes, 'type'>} [attributes]
+ * @returns {HTMLInputElement}
+ */
 export const Radio = (attributes) => Input({ type: 'radio', ...attributes });
 
+/**
+ * Creates an `<input type="range">` element.
+ * @param {Omit<InputAttributes, 'type'>} [attributes]
+ * @returns {HTMLInputElement}
+ */
 export const RangeInput = (attributes) => Input({ type: 'range', ...attributes });
+
+/**
+ * Creates an `<input type="color">` element.
+ * @param {Omit<InputAttributes, 'type'>} [attributes]
+ * @returns {HTMLInputElement}
+ */
 export const ColorInput = (attributes) => Input({ type: 'color', ...attributes });
+
+/**
+ * Creates an `<input type="date">` element.
+ * @param {Omit<InputAttributes, 'type'>} [attributes]
+ * @returns {HTMLInputElement}
+ */
 export const DateInput = (attributes) => Input({ type: 'date', ...attributes });
+
+/**
+ * Creates an `<input type="time">` element.
+ * @param {Omit<InputAttributes, 'type'>} [attributes]
+ * @returns {HTMLInputElement}
+ */
 export const TimeInput = (attributes) => Input({ type: 'time', ...attributes });
+
+/**
+ * Creates an `<input type="datetime-local">` element.
+ * @param {Omit<InputAttributes, 'type'>} [attributes]
+ * @returns {HTMLInputElement}
+ */
 export const DateTimeInput = (attributes) => Input({ type: 'datetime-local', ...attributes });
+
+/**
+ * Creates an `<input type="week">` element.
+ * @param {Omit<InputAttributes, 'type'>} [attributes]
+ * @returns {HTMLInputElement}
+ */
 export const WeekInput = (attributes) => Input({ type: 'week', ...attributes });
+
+/**
+ * Creates an `<input type="month">` element.
+ * @param {Omit<InputAttributes, 'type'>} [attributes]
+ * @returns {HTMLInputElement}
+ */
 export const MonthInput = (attributes) => Input({ type: 'month', ...attributes });
+
+/**
+ * Creates an `<input type="search">` element.
+ * @param {Omit<InputAttributes, 'type'>} [attributes]
+ * @returns {HTMLInputElement}
+ */
 export const SearchInput = (attributes) => Input({ type: 'search', ...attributes });
+
+/**
+ * Creates an `<input type="tel">` element.
+ * @param {Omit<InputAttributes, 'type'>} [attributes]
+ * @returns {HTMLInputElement}
+ */
 export const TelInput = (attributes) => Input({ type: 'tel', ...attributes });
+
+/**
+ * Creates an `<input type="url">` element.
+ * @param {Omit<InputAttributes, 'type'>} [attributes]
+ * @returns {HTMLInputElement}
+ */
 export const UrlInput = (attributes) => Input({ type: 'url', ...attributes });
+
+/**
+ * Creates an `<input type="email">` element.
+ * @param {Omit<InputAttributes, 'type'>} [attributes]
+ * @returns {HTMLInputElement}
+ */
 export const EmailInput = (attributes) => Input({ type: 'email', ...attributes });
-export const NumberInput = (attributes) => Input({ type: 'number', ...attributes });
 
+/**
+ * Creates an `<input type="number">` element.
+ * @param {Omit<InputAttributes, 'type'>} [attributes]
+ * @returns {HTMLInputElement}
+ */
+export const NumberInput = (attributes) => Input({ type: 'number', ...attributes });
 
+/**
+ * Creates a `<button>` element.
+ * @type {function(ButtonAttributes=, NdChild|NdChild[]=): HTMLButtonElement}
+ */
 export const Button = HtmlElementWrapper('button');
+
+/**
+ * Creates a `<button type="button">` element.
+ * @param {NdChild|NdChild[]} [child]
+ * @param {Omit<ButtonAttributes, 'type'>} [attributes]
+ * @returns {HTMLButtonElement}
+ */
 export const SimpleButton = (child, attributes) => Button(child, { type: 'button', ...attributes });
-export const SubmitButton = (child, attributes) => Button(child, { type: 'submit', ...attributes });
 
+/**
+ * Creates a `<button type="submit">` element.
+ * @param {NdChild|NdChild[]} [child]
+ * @param {Omit<ButtonAttributes, 'type'>} [attributes]
+ * @returns {HTMLButtonElement}
+ */
+export const SubmitButton = (child, attributes) => Button(child, { type: 'submit', ...attributes });

package/src/core/elements/html5-semantics.js

@@ -1,12 +1,55 @@
 import HtmlElementWrapper from "../wrappers/HtmlElementWrapper";
 
+/**
+ * Creates a `<main>` element.
+ * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLElement}
+ */
 export const Main = HtmlElementWrapper('main');
+
+/**
+ * Creates a `<section>` element.
+ * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLElement}
+ */
 export const Section = HtmlElementWrapper('section');
+
+/**
+ * Creates an `<article>` element.
+ * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLElement}
+ */
 export const Article = HtmlElementWrapper('article');
+
+/**
+ * Creates an `<aside>` element.
+ * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLElement}
+ */
 export const Aside = HtmlElementWrapper('aside');
+
+/**
+ * Creates a `<nav>` element.
+ * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLElement}
+ */
 export const Nav = HtmlElementWrapper('nav');
+
+/**
+ * Creates a `<figure>` element.
+ * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLElement}
+ */
 export const Figure = HtmlElementWrapper('figure');
+
+/**
+ * Creates a `<figcaption>` element.
+ * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLElement}
+ */
 export const FigCaption = HtmlElementWrapper('figcaption');
 
+/**
+ * Creates a `<header>` element.
+ * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLElement}
+ */
 export const Header = HtmlElementWrapper('header');
-export const Footer = HtmlElementWrapper('footer');
+
+/**
+ * Creates a `<footer>` element.
+ * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLElement}
+ */
+export const Footer = HtmlElementWrapper('footer');