Change shared files naming. Rework tree structure and item management rendering.

shared/dom.virtual.ts

@@ -0,0 +1,107 @@
+import { iconLoaded, loadIcon, getIcon } from "iconify-icon";
+import type { NodeProperties, Class } from "#shared/dom";
+
+export type VirtualNode = string;
+export function dom<K extends keyof HTMLElementTagNameMap>(tag: K, properties?: NodeProperties, children?: VirtualNode[]): VirtualNode
+{
+    const node = [`<${tag}`];
+    if(properties?.attributes)
+        for(const [k, v] of Object.entries(properties.attributes))
+            if(typeof v === 'string' || typeof v === 'number') node.push(` ${k}="${v.toString(10).replaceAll('"', "'")}"`);
+            else if(typeof v === 'boolean' && v) node.push(` ${k.replaceAll('"', "'")}`);
+
+    if(properties?.class)
+        node.push(` class="${mergeClasses(properties.class).replaceAll('"', "'")}"`);
+
+    if(properties?.style)
+    {
+        if(typeof properties.style === 'string') node.push(` style="${properties.style.replaceAll('"', "'")}"`);
+        else node.push(` style="${Object.entries(properties.style).map(([k, v]) => { if(v !== undefined && v !== false) return `${k.replaceAll('"', "'")}: ${v.toString(10).replaceAll('"', "'")};` }).join('')}"`);
+    }
+
+    if(properties?.text)
+    {
+        const text = typeof properties.text === 'function' ? properties.text() : properties.text;
+        children ??= [];
+        text && children?.push(text.toString());
+    }
+
+    if(children)
+        node.push(`>${children.filter(e => !!e).join('')}</${tag}>`);
+    else
+        node.push(`></${tag}>`)
+
+    return node.join('');
+}
+export function div(cls?: Class, children?: VirtualNode[]): VirtualNode
+{
+    return dom("div", { class: cls }, children);
+}
+export function span(cls?: Class, text?: string): VirtualNode
+{
+    return dom("span", { class: cls, text: text });
+}
+export function svg<K extends keyof SVGElementTagNameMap>(tag: K, properties?: NodeProperties, children?: VirtualNode[]): VirtualNode
+{
+    const node = [`<${tag}`];
+    if(properties?.attributes)
+        for(const [k, v] of Object.entries(properties.attributes))
+            if(typeof v === 'string' || typeof v === 'number') node.push(` ${k.replaceAll('"', "'")}="${v.toString(10).replaceAll('"', "'")}"`);
+            else if(typeof v === 'boolean' && v) node.push(` ${k.replaceAll('"', "'")}`);
+
+    if(properties?.class)
+        node.push(` class="${mergeClasses(properties.class).replaceAll('"', "'")}"`);
+
+    if(properties?.style)
+    {
+        if(typeof properties.style === 'string') node.push(` style="${properties.style.replaceAll('"', "'")}"`);
+        else node.push(` style="${Object.entries(properties.style).map(([k, v]) => { if(v !== undefined && v !== false) return `${k.replaceAll('"', "'")}: ${v.toString(10).replaceAll('"', "'")};"` }).join('')}"`);
+    }
+
+    if(children)
+        node.push(`>${children.filter(e => !!e).join('')}</${tag}>`);
+    else
+        node.push(`></${tag}>`)
+
+    return node.join(' ');
+}
+export function text(data: string): VirtualNode
+{
+    return data;
+}
+export interface IconProperties
+{
+    mode?: string;
+    inline?: boolean;
+    noobserver?: boolean;
+    width?: string|number;
+    height?: string|number;
+    flip?: string;
+    rotate?: number|string;
+    style?: Record<string, string | undefined> | string;
+    class?: Class;
+}
+export function icon(name: string, properties?: IconProperties): VirtualNode
+{
+    return '';
+}
+
+export function mergeClasses(classes: Class): string
+{
+    if(typeof classes === 'string')
+    {
+        return classes.trim();
+    }
+    else if(Array.isArray(classes))
+    {
+        return classes.map(e => mergeClasses(e)).join(' ');
+    }
+    else if(classes)
+    {
+        return Object.entries(classes).filter(e => e[1]).map(e => e[0].trim()).join(' ');
+    }
+    else
+    {
+        return '';
+    }
+}