@ryupold/vode 1.1.9 → 1.3.0

package/src/state-context.ts

@@ -0,0 +1,228 @@
+import { AnimatedPatch, DeepPartial, PatchableState, RenderPatch } from "./vode.js";
+
+/**
+ * Generates dot-notation path strings for all nested properties in an object type.
+ * 
+ * @example
+ * type User = { profile: { settings: { theme: string } } };
+ * type Paths = KeyPath<User>; // "profile" | "profile.settings" | "profile.settings.theme"
+ */
+export type KeyPath<ObjectType extends object> =
+    { [Key in keyof ObjectType & (string | number)]: ObjectType[Key] extends object
+        ? `${Key}` | `${Key}.${KeyPath<ObjectType[Key]>}`
+        : `${Key}`
+    }[keyof ObjectType & (string | number)];
+
+/**
+ * Extracts the value type at a given dot-notation path in an object type.
+ * 
+ * @example
+ * type User = { profile: { settings: { theme: string } } };
+ * type Theme = PathValue<User, "profile.settings.theme">; // string
+ */
+export type PathValue<T, P extends string> =
+    P extends `${infer Key}.${infer Rest}`
+    ? Key extends keyof T ? PathValue<T[Key], Rest> : never
+    : P extends keyof T ? T[P] : never;
+
+/**
+ * Maps valid paths in an object type to paths that resolve to a specific substate type.
+ * Used for type-safe path constraints in StateContext.
+ * Ensures exact type matching (not just compatibility).
+ * 
+ * @example
+ * type User = { profile: { name: string, settings: { theme: string } } };
+ * type SettingsPaths = KeyToSubState<User, { theme: string }>; // "profile.settings"
+ * type InvalidPath = KeyToSubState<User, { theme: string }, "profile">; // never (type mismatch)
+ */
+export type KeyToSubState<S extends object, Sub, K = KeyPath<S>> =
+    K extends KeyPath<S> ? [PathValue<S, K>] extends [Sub] ? [Sub] extends [PathValue<S, K>] ? K
+    : never : never : never;
+
+/**
+ * State context for type-safe access and manipulation of nested state paths
+ * while still be able to access the parent state. 
+ */
+export interface StateContext<S extends PatchableState, SubState> extends SubStateContext<SubState> {
+    /** 
+     * parent state
+     * @see PatchableState<S>
+     */
+    get state(): S;
+}
+
+/**
+ * State context for type-safe access and manipulation of nested sub-state values without knowledge of the parent state.
+ */
+export interface SubStateContext<SubState> {
+    /**
+     * Reads the current value of the substate if it exists.
+     * 
+     * @returns The current value, or undefined if the path doesn't exist
+     */
+    get(): SubState | undefined;
+
+    /**
+     * Updates the nested sub-state value WITHOUT triggering a render.
+     * This performs a silent mutation of the parent state object.
+     * 
+     * @param {DeepPartial<SubState>} value - The new value or partial update to apply
+     */
+    put(value: SubState | DeepPartial<SubState> | undefined | null): void;
+
+    /**
+     * Updates the nested sub-state value AND triggers a render.
+     * This is the recommended way to update nested state in most cases.
+     * 
+     * @param value - The new value or partial update to apply
+     */
+    patch(value: SubState | DeepPartial<SubState> | Array<DeepPartial<SubState>> | undefined | null): void;
+}
+
+/**
+ * Provides type-safe access to deeply nested state with path-based operations.
+ * 
+ * **When to use:**
+ * - State is deeply nested
+ * - Multiple components access the same nested path
+ * - You need type safety for nested updates
+ * 
+ * **When to avoid:**
+ * - Shallow state structures for main state
+ * - State structure changes frequently
+ * - Learning vode for the first time (start simpler)
+ * 
+ * @example
+ * ```typescript
+ * const state = createState({
+ *   user: {
+ *     profile: {
+ *       settings: { theme: 'dark', lang: 'en' }
+ *     }
+ *   }
+ * });
+ * app(element, state, (s) => [DIV]);
+ * 
+ * // Create a context for the nested settings
+ * const settingsCtx = new StateContext(state, 'user.profile.settings');
+ * 
+ * // Read current value
+ * const settings = settingsCtx.get(); // { theme: 'dark', lang: 'en' }
+ * 
+ * // Update and trigger render
+ * settingsCtx.patch({ theme: 'light' });
+ * 
+ * // Update without render (silent mutation)
+ * settingsCtx.put({ lang: 'de' });
+ * state.patch({}); // trigger render manually later
+ * ```
+ * 
+ * @template S - The root state type (must extend PatchableState)
+ * @template SubState - The type of the nested state being accessed
+ */
+export class KeyStateContext<S extends PatchableState, SubState>
+    implements StateContext<S, SubState> {
+    private readonly keys: string[];
+
+    constructor(
+        public readonly state: S,
+        public readonly path: KeyToSubState<S, SubState>
+    ) {
+        this.keys = path.split('.');
+    }
+
+    get(): SubState | undefined {
+        const keys = this.keys;
+        let raw = this.state ? (<any>this.state)[keys[0]] : undefined;
+        for (let i = 1; i < keys.length && !!raw; i++) {
+            raw = raw[keys[i]];
+        }
+        return raw;
+    }
+
+    put(value: SubState | DeepPartial<SubState> | undefined | null) {
+        this.putDeep(value, this.state);
+    }
+
+    patch(value: SubState | DeepPartial<SubState> | Array<DeepPartial<SubState>> | undefined | null) {
+        if (Array.isArray(value)) {
+            const animation: AnimatedPatch<S> = [];
+            for(const v of value){
+                animation.push(this.createPatch(v));
+            }
+            this.state.patch(animation);
+        }
+        this.state.patch(this.createPatch(value as DeepPartial<SubState>));
+    }
+
+    /**
+     * Creates a render-patch for the parent state by setting a nested sub-state value while creating necessary structure. 
+     * 
+     * @example
+     * ```typescript
+     * const ctx = new StateContext(state, 'user.profile.settings');
+     * const patch = ctx.createPatch({ theme: 'light' });
+     * // patch is { user: { profile: { settings: { theme: 'light' } } } }
+     * ```
+     * 
+     * @param value 
+     * @returns {{key-path}:{...: value}} render-patch for the parent state
+     */
+    createPatch(value: SubState | DeepPartial<SubState> | undefined | null): RenderPatch<S> {
+        const renderPatch: DeepPartial<S> = {};
+        this.putDeep(value, renderPatch);
+        return renderPatch;
+    }
+
+    private putDeep(value: SubState | DeepPartial<SubState> | undefined | null, target: S | DeepPartial<S>) {
+        const keys = this.keys;
+        if (keys.length > 1) {
+            let i = 0;
+            let raw = (<any>target)[keys[i]];
+            if (typeof raw !== "object" || raw === null) {
+                (<any>target)[keys[i]] = raw = {};
+            }
+            for (i = 1; i < keys.length - 1; i++) {
+                const p = raw;
+                raw = raw[keys[i]];
+                if (typeof raw !== "object" || raw === null) {
+                    p[keys[i]] = raw = {};
+                }
+            }
+            raw[keys[i]] = value;
+        } else {
+            if (typeof (<any>target)[keys[0]] === "object" && typeof value === "object")
+                Object.assign((<any>target)[keys[0]], value);
+            else
+                (<any>target)[keys[0]] = value;
+        }
+    }
+}
+
+/**
+ * Provides type-safe access to sub-state with fetch & store delegate functions.
+ * Implementer is responsible for reading/writing the sub-state correctly.
+ * 
+ * **When to use:**
+ * - State structure is dynamic or complex
+ * - You need custom logic for accessing nested state
+ * - You want to encapsulate access logic outside of parent state
+ * 
+ * **When to avoid:**
+ * - Simple, static state structures
+ * - You want automatic path-based access (use KeyStateContext instead)
+ * - Learning vode for the first time (start simpler)
+ */
+export class DelegateStateContext<S extends PatchableState, SubState>
+    implements StateContext<S, SubState> {
+    constructor(
+        public readonly state: S,
+
+        public readonly get: () => SubState | undefined,
+
+        public readonly put: (value: SubState | DeepPartial<SubState> | undefined | null) => void,
+
+        public readonly patch: (value: SubState | DeepPartial<SubState> | Array<DeepPartial<SubState>> | undefined | null) => void,
+    ) {
+    }
+}

package/src/vode-tags.ts

@@ -1,207 +1,208 @@
 import { Tag } from "./vode.js";
 
-//=== HTML ========================================================================================
-export const A: Tag = "a";
-export const ABBR: Tag = "abbr";
-export const ADDRESS: Tag = "address";
-export const AREA: Tag = "area";
-export const ARTICLE: Tag = "article";
-export const ASIDE: Tag = "aside";
-export const AUDIO: Tag = "audio";
-export const B: Tag = "b";
-export const BASE: Tag = "base";
-export const BDI: Tag = "bdi";
-export const BDO: Tag = "bdo";
-export const BLOCKQUOTE: Tag = "blockquote";
-export const BODY: Tag = "body";
-export const BR: Tag = "br";
-export const BUTTON: Tag = "button";
-export const CANVAS: Tag = "canvas";
-export const CAPTION: Tag = "caption";
-export const CITE: Tag = "cite";
-export const CODE: Tag = "code";
-export const COL: Tag = "col";
-export const COLGROUP: Tag = "colgroup";
-export const DATA: Tag = "data";
-export const DATALIST: Tag = "datalist";
-export const DD: Tag = "dd";
-export const DEL: Tag = "del";
-export const DETAILS: Tag = "details";
-export const DFN: Tag = "dfn";
-export const DIALOG: Tag = "dialog";
-export const DIV: Tag = "div";
-export const DL: Tag = "dl";
-export const DT: Tag = "dt";
-export const EM: Tag = "em";
-export const EMBED: Tag = "embed";
-export const FIELDSET: Tag = "fieldset";
-export const FIGCAPTION: Tag = "figcaption";
-export const FIGURE: Tag = "figure";
-export const FOOTER: Tag = "footer";
-export const FORM: Tag = "form";
-export const H1: Tag = "h1";
-export const H2: Tag = "h2";
-export const H3: Tag = "h3";
-export const H4: Tag = "h4";
-export const H5: Tag = "h5";
-export const H6: Tag = "h6";
-export const HEAD: Tag = "head";
-export const HEADER: Tag = "header";
-export const HGROUP: Tag = "hgroup";
-export const HR: Tag = "hr";
-export const HTML: Tag = "html";
-export const I: Tag = "i";
-export const IFRAME: Tag = "iframe";
-export const IMG: Tag = "img";
-export const INPUT: Tag = "input";
-export const INS: Tag = "ins";
-export const KBD: Tag = "kbd";
-export const LABEL: Tag = "label";
-export const LEGEND: Tag = "legend";
-export const LI: Tag = "li";
-export const LINK: Tag = "link";
-export const MAIN: Tag = "main";
-export const MAP: Tag = "map";
-export const MARK: Tag = "mark";
-export const MENU: Tag = "menu";
-export const META: Tag = "meta";
-export const METER: Tag = "meter";
-export const NAV: Tag = "nav";
-export const NOSCRIPT: Tag = "noscript";
-export const OBJECT: Tag = "object";
-export const OL: Tag = "ol";
-export const OPTGROUP: Tag = "optgroup";
-export const OPTION: Tag = "option";
-export const OUTPUT: Tag = "output";
-export const P: Tag = "p";
-export const PICTURE: Tag = "picture";
-export const PRE: Tag = "pre";
-export const PROGRESS: Tag = "progress";
-export const Q: Tag = "q";
-export const RP: Tag = "rp";
-export const RT: Tag = "rt";
-export const RUBY: Tag = "ruby";
-export const S: Tag = "s";
-export const SAMP: Tag = "samp";
-export const SCRIPT: Tag = "script";
-export const SECTION: Tag = "section";
-export const SELECT: Tag = "select";
-export const SLOT: Tag = "slot";
-export const SMALL: Tag = "small";
-export const SOURCE: Tag = "source";
-export const SPAN: Tag = "span";
-export const STRONG: Tag = "strong";
-export const STYLE: Tag = "style";
-export const SUB: Tag = "sub";
-export const SUMMARY: Tag = "summary";
-export const SUP: Tag = "sup";
-export const TABLE: Tag = "table";
-export const TBODY: Tag = "tbody";
-export const TD: Tag = "td";
-export const TEMPLATE: Tag = "template";
-export const TEXTAREA: Tag = "textarea";
-export const TFOOT: Tag = "tfoot";
-export const TH: Tag = "th";
-export const THEAD: Tag = "thead";
-export const TIME: Tag = "time";
-export const TITLE: Tag = "title";
-export const TR: Tag = "tr";
-export const TRACK: Tag = "track";
-export const U: Tag = "u";
-export const UL: Tag = "ul";
-export const VIDEO: Tag = "video";
-export const WBR: Tag = "wbr";
+//=== HTML ====================================================
+export const A: Tag = "a" as const;
+export const ABBR: Tag = "abbr" as const;
+export const ADDRESS: Tag = "address" as const;
+export const AREA: Tag = "area" as const;
+export const ARTICLE: Tag = "article" as const;
+export const ASIDE: Tag = "aside" as const;
+export const AUDIO: Tag = "audio" as const;
+export const B: Tag = "b" as const;
+export const BASE: Tag = "base" as const;
+export const BDI: Tag = "bdi" as const;
+export const BDO: Tag = "bdo" as const;
+export const BLOCKQUOTE: Tag = "blockquote" as const;
+export const BODY: Tag = "body" as const;
+export const BR: Tag = "br" as const;
+export const BUTTON: Tag = "button" as const;
+export const CANVAS: Tag = "canvas" as const;
+export const CAPTION: Tag = "caption" as const;
+export const CITE: Tag = "cite" as const;
+export const CODE: Tag = "code" as const;
+export const COL: Tag = "col" as const;
+export const COLGROUP: Tag = "colgroup" as const;
+export const DATA: Tag = "data" as const;
+export const DATALIST: Tag = "datalist" as const;
+export const DD: Tag = "dd" as const;
+export const DEL: Tag = "del" as const;
+export const DETAILS: Tag = "details" as const;
+export const DFN: Tag = "dfn" as const;
+export const DIALOG: Tag = "dialog" as const;
+export const DIV: Tag = "div" as const;
+export const DL: Tag = "dl" as const;
+export const DT: Tag = "dt" as const;
+export const EM: Tag = "em" as const;
+export const EMBED: Tag = "embed" as const;
+export const FIELDSET: Tag = "fieldset" as const;
+export const FIGCAPTION: Tag = "figcaption" as const;
+export const FIGURE: Tag = "figure" as const;
+export const FOOTER: Tag = "footer" as const;
+export const FORM: Tag = "form" as const;
+export const H1: Tag = "h1" as const;
+export const H2: Tag = "h2" as const;
+export const H3: Tag = "h3" as const;
+export const H4: Tag = "h4" as const;
+export const H5: Tag = "h5" as const;
+export const H6: Tag = "h6" as const;
+export const HEAD: Tag = "head" as const;
+export const HEADER: Tag = "header" as const;
+export const HGROUP: Tag = "hgroup" as const;
+export const HR: Tag = "hr" as const;
+export const HTML: Tag = "html" as const;
+export const I: Tag = "i" as const;
+export const IFRAME: Tag = "iframe" as const;
+export const IMG: Tag = "img" as const;
+export const INPUT: Tag = "input" as const;
+export const INS: Tag = "ins" as const;
+export const KBD: Tag = "kbd" as const;
+export const LABEL: Tag = "label" as const;
+export const LEGEND: Tag = "legend" as const;
+export const LI: Tag = "li" as const;
+export const LINK: Tag = "link" as const;
+export const MAIN: Tag = "main" as const;
+export const MAP: Tag = "map" as const;
+export const MARK: Tag = "mark" as const;
+export const MENU: Tag = "menu" as const;
+export const META: Tag = "meta" as const;
+export const METER: Tag = "meter" as const;
+export const NAV: Tag = "nav" as const;
+export const NOSCRIPT: Tag = "noscript" as const;
+export const OBJECT: Tag = "object" as const;
+export const OL: Tag = "ol" as const;
+export const OPTGROUP: Tag = "optgroup" as const;
+export const OPTION: Tag = "option" as const;
+export const OUTPUT: Tag = "output" as const;
+export const P: Tag = "p" as const;
+export const PICTURE: Tag = "picture" as const;
+export const PRE: Tag = "pre" as const;
+export const PROGRESS: Tag = "progress" as const;
+export const Q: Tag = "q" as const;
+export const RP: Tag = "rp" as const;
+export const RT: Tag = "rt" as const;
+export const RUBY: Tag = "ruby" as const;
+export const S: Tag = "s" as const;
+export const SAMP: Tag = "samp" as const;
+export const SCRIPT: Tag = "script" as const;
+export const SEARCH: Tag = "search" as const;
+export const SECTION: Tag = "section" as const;
+export const SELECT: Tag = "select" as const;
+export const SLOT: Tag = "slot" as const;
+export const SMALL: Tag = "small" as const;
+export const SOURCE: Tag = "source" as const;
+export const SPAN: Tag = "span" as const;
+export const STRONG: Tag = "strong" as const;
+export const STYLE: Tag = "style" as const;
+export const SUB: Tag = "sub" as const;
+export const SUMMARY: Tag = "summary" as const;
+export const SUP: Tag = "sup" as const;
+export const TABLE: Tag = "table" as const;
+export const TBODY: Tag = "tbody" as const;
+export const TD: Tag = "td" as const;
+export const TEMPLATE: Tag = "template" as const;
+export const TEXTAREA: Tag = "textarea" as const;
+export const TFOOT: Tag = "tfoot" as const;
+export const TH: Tag = "th" as const;
+export const THEAD: Tag = "thead" as const;
+export const TIME: Tag = "time" as const;
+export const TITLE: Tag = "title" as const;
+export const TR: Tag = "tr" as const;
+export const TRACK: Tag = "track" as const;
+export const U: Tag = "u" as const;
+export const UL: Tag = "ul" as const;
+export const VAR: Tag = "var" as const;
+export const VIDEO: Tag = "video" as const;
+export const WBR: Tag = "wbr" as const;
 
-//=== SVG =========================================================================================
-export const ANIMATE: Tag = "animate";
-export const ANIMATEMOTION: Tag = "animateMotion";
-export const ANIMATETRANSFORM: Tag = "animateTransform";
-export const CIRCLE: Tag = "circle";
-export const CLIPPATH: Tag = "clipPath";
-export const DEFS: Tag = "defs";
-export const DESC: Tag = "desc";
-export const ELLIPSE: Tag = "ellipse";
-export const FEBLEND: Tag = "feBlend";
-export const FECOLORMATRIX: Tag = "feColorMatrix";
-export const FECOMPONENTTRANSFER: Tag = "feComponentTransfer";
-export const FECOMPOSITE: Tag = "feComposite";
-export const FECONVOLVEMATRIX: Tag = "feConvolveMatrix";
-export const FEDIFFUSELIGHTING: Tag = "feDiffuseLighting";
-export const FEDISPLACEMENTMAP: Tag = "feDisplacementMap";
-export const FEDISTANTLIGHT: Tag = "feDistantLight";
-export const FEDROPSHADOW: Tag = "feDropShadow";
-export const FEFLOOD: Tag = "feFlood";
-export const FEFUNCA: Tag = "feFuncA";
-export const FEFUNCB: Tag = "feFuncB";
-export const FEFUNCG: Tag = "feFuncG";
-export const FEFUNCR: Tag = "feFuncR";
-export const FEGAUSSIANBLUR: Tag = "feGaussianBlur";
-export const FEIMAGE: Tag = "feImage";
-export const FEMERGE: Tag = "feMerge";
-export const FEMERGENODE: Tag = "feMergeNode";
-export const FEMORPHOLOGY: Tag = "feMorphology";
-export const FEOFFSET: Tag = "feOffset";
-export const FEPOINTLIGHT: Tag = "fePointLight";
-export const FESPECULARLIGHTING: Tag = "feSpecularLighting";
-export const FESPOTLIGHT: Tag = "feSpotLight";
-export const FETILE: Tag = "feTile";
-export const FETURBULENCE: Tag = "feTurbulence";
-export const FILTER: Tag = "filter";
-export const FOREIGNOBJECT: Tag = "foreignObject";
-export const G: Tag = "g";
-export const IMAGE: Tag = "image";
-export const LINE: Tag = "line";
-export const LINEARGRADIENT: Tag = "linearGradient";
-export const MARKER: Tag = "marker";
-export const MASK: Tag = "mask";
-export const METADATA: Tag = "metadata";
-export const MPATH: Tag = "mpath";
-export const PATH: Tag = "path";
-export const PATTERN: Tag = "pattern";
-export const POLYGON: Tag = "polygon";
-export const POLYLINE: Tag = "polyline";
-export const RADIALGRADIENT: Tag = "radialGradient";
-export const RECT: Tag = "rect";
-export const SET: Tag = "set";
-export const STOP: Tag = "stop";
-export const SVG: Tag = "svg";
-export const SWITCH: Tag = "switch";
-export const SYMBOL: Tag = "symbol";
-export const TEXT: Tag = "text";
-export const TEXTPATH: Tag = "textPath";
-export const TSPAN: Tag = "tspan";
-export const USE: Tag = "use";
-export const VIEW: Tag = "view";
+//=== SVG =====================================================
+export const ANIMATE: Tag = "animate" as const;
+export const ANIMATEMOTION: Tag = "animateMotion" as const;
+export const ANIMATETRANSFORM: Tag = "animateTransform" as const;
+export const CIRCLE: Tag = "circle" as const;
+export const CLIPPATH: Tag = "clipPath" as const;
+export const DEFS: Tag = "defs" as const;
+export const DESC: Tag = "desc" as const;
+export const ELLIPSE: Tag = "ellipse" as const;
+export const FEBLEND: Tag = "feBlend" as const;
+export const FECOLORMATRIX: Tag = "feColorMatrix" as const;
+export const FECOMPONENTTRANSFER: Tag = "feComponentTransfer" as const;
+export const FECOMPOSITE: Tag = "feComposite" as const;
+export const FECONVOLVEMATRIX: Tag = "feConvolveMatrix" as const;
+export const FEDIFFUSELIGHTING: Tag = "feDiffuseLighting" as const;
+export const FEDISPLACEMENTMAP: Tag = "feDisplacementMap" as const;
+export const FEDISTANTLIGHT: Tag = "feDistantLight" as const;
+export const FEDROPSHADOW: Tag = "feDropShadow" as const;
+export const FEFLOOD: Tag = "feFlood" as const;
+export const FEFUNCA: Tag = "feFuncA" as const;
+export const FEFUNCB: Tag = "feFuncB" as const;
+export const FEFUNCG: Tag = "feFuncG" as const;
+export const FEFUNCR: Tag = "feFuncR" as const;
+export const FEGAUSSIANBLUR: Tag = "feGaussianBlur" as const;
+export const FEIMAGE: Tag = "feImage" as const;
+export const FEMERGE: Tag = "feMerge" as const;
+export const FEMERGENODE: Tag = "feMergeNode" as const;
+export const FEMORPHOLOGY: Tag = "feMorphology" as const;
+export const FEOFFSET: Tag = "feOffset" as const;
+export const FEPOINTLIGHT: Tag = "fePointLight" as const;
+export const FESPECULARLIGHTING: Tag = "feSpecularLighting" as const;
+export const FESPOTLIGHT: Tag = "feSpotLight" as const;
+export const FETILE: Tag = "feTile" as const;
+export const FETURBULENCE: Tag = "feTurbulence" as const;
+export const FILTER: Tag = "filter" as const;
+export const FOREIGNOBJECT: Tag = "foreignObject" as const;
+export const G: Tag = "g" as const;
+export const IMAGE: Tag = "image" as const;
+export const LINE: Tag = "line" as const;
+export const LINEARGRADIENT: Tag = "linearGradient" as const;
+export const MARKER: Tag = "marker" as const;
+export const MASK: Tag = "mask" as const;
+export const METADATA: Tag = "metadata" as const;
+export const MPATH: Tag = "mpath" as const;
+export const PATH: Tag = "path" as const;
+export const PATTERN: Tag = "pattern" as const;
+export const POLYGON: Tag = "polygon" as const;
+export const POLYLINE: Tag = "polyline" as const;
+export const RADIALGRADIENT: Tag = "radialGradient" as const;
+export const RECT: Tag = "rect" as const;
+export const SET: Tag = "set" as const;
+export const STOP: Tag = "stop" as const;
+export const SVG: Tag = "svg" as const;
+export const SWITCH: Tag = "switch" as const;
+export const SYMBOL: Tag = "symbol" as const;
+export const TEXT: Tag = "text" as const;
+export const TEXTPATH: Tag = "textPath" as const;
+export const TSPAN: Tag = "tspan" as const;
+export const USE: Tag = "use" as const;
+export const VIEW: Tag = "view" as const;
 
-//=== MathML ======================================================================================
-
-export const ANNOTATION: Tag = "annotation";
-export const ANNOTATION_XML: Tag = "annotation-xml";
-export const MACTION: Tag = "maction";
-export const MATH: Tag = "math";
-export const MERROR: Tag = "merror";
-export const MFRAC: Tag = "mfrac";
-export const MI: Tag = "mi";
-export const MMULTISCRIPTS: Tag = "mmultiscripts";
-export const MN: Tag = "mn";
-export const MO: Tag = "mo";
-export const MOVER: Tag = "mover";
-export const MPADDED: Tag = "mpadded";
-export const MPHANTOM: Tag = "mphantom";
-export const MPRESCRIPTS: Tag = "mprescripts";
-export const MROOT: Tag = "mroot";
-export const MROW: Tag = "mrow";
-export const MS: Tag = "ms";
-export const MSPACE: Tag = "mspace";
-export const MSQRT: Tag = "msqrt";
-export const MSTYLE: Tag = "mstyle";
-export const MSUB: Tag = "msub";
-export const MSUBSUP: Tag = "msubsup";
-export const MSUP: Tag = "msup";
-export const MTABLE: Tag = "mtable";
-export const MTD: Tag = "mtd";
-export const MTEXT: Tag = "mtext";
-export const MTR: Tag = "mtr";
-export const MUNDER: Tag = "munder";
-export const MUNDEROVER: Tag = "munderover";
-export const SEMANTICS: Tag = "semantics";
+//=== MathML ==================================================
+export const ANNOTATION: Tag = "annotation" as const;
+export const ANNOTATION_XML: Tag = "annotation-xml" as const;
+export const MACTION: Tag = "maction" as const;
+export const MATH: Tag = "math" as const;
+export const MERROR: Tag = "merror" as const;
+export const MFRAC: Tag = "mfrac" as const;
+export const MI: Tag = "mi" as const;
+export const MMULTISCRIPTS: Tag = "mmultiscripts" as const;
+export const MN: Tag = "mn" as const;
+export const MO: Tag = "mo" as const;
+export const MOVER: Tag = "mover" as const;
+export const MPADDED: Tag = "mpadded" as const;
+export const MPHANTOM: Tag = "mphantom" as const;
+export const MPRESCRIPTS: Tag = "mprescripts" as const;
+export const MROOT: Tag = "mroot" as const;
+export const MROW: Tag = "mrow" as const;
+export const MS: Tag = "ms" as const;
+export const MSPACE: Tag = "mspace" as const;
+export const MSQRT: Tag = "msqrt" as const;
+export const MSTYLE: Tag = "mstyle" as const;
+export const MSUB: Tag = "msub" as const;
+export const MSUBSUP: Tag = "msubsup" as const;
+export const MSUP: Tag = "msup" as const;
+export const MTABLE: Tag = "mtable" as const;
+export const MTD: Tag = "mtd" as const;
+export const MTEXT: Tag = "mtext" as const;
+export const MTR: Tag = "mtr" as const;
+export const MUNDER: Tag = "munder" as const;
+export const MUNDEROVER: Tag = "munderover" as const;
+export const SEMANTICS: Tag = "semantics" as const;