subay 0.0.5 → 0.0.7

package/src/h.ts

@@ -0,0 +1,569 @@
+/** @format */
+
+import { cleanup, isReactive, root, S, sample } from './s.js';
+
+const enum InterNodeType {
+    Text = 1,
+    Element = 2,
+    Attribute = 3,
+}
+
+type InterTreeNode = InterTextNode | InterElementNode;
+
+type InterTextNode = {
+    _type: InterNodeType.Text;
+    _data: Array<string | number>;
+};
+type InterElementNode = {
+    _ns: string | null;
+    _tag: Array<string | number>;
+    _type: InterNodeType.Element;
+    _attrs: InterAttributeNode[];
+    _content: Array<InterTreeNode>;
+    _sourceNode: Element | null;
+    _sourceIndex: number;
+};
+
+type InterAttributeNode = {
+    _type: InterNodeType.Attribute;
+    _name: Array<string | number>;
+    _value: Array<string | number>;
+};
+
+const cache = new Map<TemplateStringsArray, InterTreeNode[]>();
+function random6LetterString() {
+    const BASE = 36;
+    const power5 = BASE ** 5;
+    const min = 10 * power5;
+    const length = 26 * power5;
+    return Math.floor(Math.random() * length + min).toString(BASE);
+}
+const MarkStart = random6LetterString();
+const MarkEnd = random6LetterString();
+const MarkReg = new RegExp(`([\\s\\S]*?)${MarkStart}(\\d+)${MarkEnd}([\\s\\S]*?)(?=${MarkStart}\\d+${MarkEnd}|$)`, 'g');
+const BlankText = /\s*\n\s*/g;
+const domParser = new DOMParser();
+
+const parseText = (data: string) => {
+    const result: Array<string | number> = [];
+    data = data.replace(BlankText, '');
+    if (data.includes(MarkStart) && data.includes(MarkEnd)) {
+        for (const res of data.matchAll(MarkReg)) {
+            const [, prefix, index, suffix] = res;
+            if (prefix) {
+                result.push(prefix);
+            }
+            if (index) {
+                result.push(Number(index));
+            }
+            if (suffix) {
+                result.push(suffix);
+            }
+        }
+    } else if (data) {
+        result.push(data);
+    }
+    return result;
+};
+
+const unparseText = (data: Array<string | number>, values: any[]) => {
+    if (data.length === 1) {
+        if (typeof data[0] === 'number') {
+            return values[data[0]!];
+        }
+        return data[0];
+    }
+    return S(() => {
+        return data
+            .map((it) => {
+                if (typeof it === 'number') {
+                    const value = values[it];
+                    if (typeof value === 'function') {
+                        return value();
+                    }
+                    return value;
+                }
+                return it;
+            })
+            .join('');
+    });
+};
+
+const parse = (
+    docType: DOMParserSupportedType,
+    wrapSource: (source: string) => string,
+    unwrapNode: (node: Document) => NodeList,
+    segments: TemplateStringsArray,
+    indexMap: number[],
+): InterTreeNode[] => {
+    if (cache.has(segments)) {
+        return cache.get(segments)!;
+    }
+
+    const htmlStr = segments
+        .flatMap((segment, index, { length }) => {
+            if (index === length - 1) {
+                return [segment];
+            }
+            return [segment, MarkStart, indexMap[index], MarkEnd];
+        })
+        .join('');
+
+    const wrappedHtmlStr = wrapSource(htmlStr);
+
+    const document = domParser.parseFromString(wrappedHtmlStr, docType);
+
+    const dom2treenode = (domNodeList: NodeList) => {
+        const nodeList: InterTreeNode[] = [];
+        for (
+            let item: Node | undefined | null = domNodeList.item(0), nextSibling = item?.nextSibling, index = 0;
+            item != null;
+            item = nextSibling, nextSibling = nextSibling?.nextSibling, index++
+        ) {
+            do
+                remove_and_dec_index: {
+                    if (item.nodeType === Node.ELEMENT_NODE) {
+                        const el = item as Element;
+                        const tag = parseText(el.tagName.toLowerCase());
+                        const isVariableElem = tag.length > 1 || typeof tag[0] === 'number';
+
+                        nodeList.push({
+                            _ns: el.namespaceURI,
+                            _type: InterNodeType.Element,
+                            _tag: tag,
+                            _attrs: Array.from(el.attributes).flatMap((attr) => {
+                                const name = parseText(attr.nodeName);
+                                const value = parseText(attr.value);
+                                const isVariableAttr =
+                                    name.length > 1 ||
+                                    typeof name[0] === 'number' ||
+                                    value.length > 1 ||
+                                    typeof value[0] === 'number';
+
+                                if (!isVariableElem && !isVariableAttr) {
+                                    return [];
+                                } else {
+                                    el.removeAttribute(attr.nodeName);
+                                }
+                                return [
+                                    {
+                                        _type: InterNodeType.Attribute,
+                                        _name: name,
+                                        _value: value,
+                                    } satisfies InterAttributeNode,
+                                ];
+                            }),
+                            _content: el.childNodes.length > 0 ? dom2treenode(el.childNodes) : [],
+                            _sourceNode: isVariableElem ? null : el,
+                            _sourceIndex: index,
+                        });
+
+                        if (!isVariableElem) {
+                            break remove_and_dec_index;
+                        }
+                    } else if (item.nodeType === Node.TEXT_NODE) {
+                        const data = (item as Text).data;
+                        const result = parseText(data);
+                        if (result.length > 0) {
+                            nodeList.push({
+                                _type: InterNodeType.Text,
+                                _data: result,
+                            });
+                        }
+                    }
+                    (item as Comment | Text | Element).remove();
+                    index--;
+                }
+            while (false);
+        }
+        return nodeList;
+    };
+
+    const rootList = unwrapNode(document);
+
+    const treeNode = dom2treenode(rootList);
+
+    cache.set(segments, treeNode);
+
+    return treeNode;
+};
+
+const element = (
+    ns: string | null,
+    sourceNode: Element | null,
+    tagName: string | (() => string),
+    child: (node: Element) => Node[],
+): Node[] => {
+    if (typeof tagName === 'function') {
+        return fragment(() => {
+            const realTagName = tagName();
+            if (typeof realTagName === 'string') {
+                return element(ns, null, realTagName, child);
+            }
+            return [];
+        });
+    }
+    if (typeof tagName !== 'string') {
+        return [];
+    }
+    const el = sourceNode || (ns ? document.createElementNS(ns, tagName) : document.createElement(tagName));
+    S(() => {
+        const subnodes = child(el);
+        if (subnodes.length === 0) {
+            return;
+        }
+        if (!el.firstChild) {
+            // @domact
+            el.append(...subnodes);
+        } else {
+            for (let left: Element | null = el.firstElementChild, rightIndex = 0; rightIndex < subnodes.length; rightIndex++) {
+                const right = subnodes[rightIndex]!;
+                if (left === right) {
+                    left = left.nextElementSibling;
+                } else {
+                    // @domact
+                    el.insertBefore(right, left);
+                }
+            }
+        }
+    });
+    cleanup(() => el.remove());
+    return [el];
+};
+
+const fragment = (child: (head: Node) => Node[]): Node[] => {
+    const firstNode = document.createComment('start-frag');
+    cleanup(() => firstNode.remove());
+    const tempArray: Node[] = [firstNode];
+    S(() => {
+        const c = child(firstNode);
+        const carr = Array.isArray(c) ? c : [c];
+
+        const nodified = carr.map((c) => {
+            if (c instanceof Node) {
+                return c;
+            }
+            const node = document.createTextNode(c);
+            cleanup(() => node.remove());
+            return node;
+        });
+
+        if (firstNode.isConnected) {
+            firstNode.after(...nodified);
+        } else {
+            tempArray.push(...nodified);
+        }
+    });
+
+    return tempArray;
+};
+function arrTrans<T>(a: readonly T[], b: readonly T[], a2b: (a: T) => void, dela: (a: T) => void, keep: (a: T) => void): void {
+    const aLen = a.length;
+    const bLen = b.length;
+
+    if (a === b || (aLen === 0 && bLen === 0)) {
+        return;
+    }
+
+    let start = 0;
+    const minLen = Math.min(aLen, bLen);
+    while (start < minLen && a[start] === b[start]) {
+        start++;
+    }
+
+    let end = 0;
+    while (end < minLen - start && a[aLen - 1 - end] === b[bLen - 1 - end]) {
+        end++;
+    }
+
+    const aMidLen = aLen - start - end;
+    const bMidLen = bLen - start - end;
+
+    if (aMidLen === 0 && bMidLen === 0) {
+        for (let i = 0; i < start; i++) {
+            keep(a[i]!);
+        }
+        for (let i = 0; i < end; i++) {
+            keep(a[aLen - end + i]!);
+        }
+        return;
+    }
+
+    const bIndexMap = new Map<T, number>();
+    for (let i = 0; i < bMidLen; i++) {
+        bIndexMap.set(b[start + i]!, i);
+    }
+
+    const indices: number[] = [];
+    for (let i = 0; i < aMidLen; i++) {
+        const val = a[start + i]!;
+        const bIdx = bIndexMap.get(val);
+        if (bIdx !== undefined) {
+            indices.push(bIdx);
+        }
+    }
+
+    const tails: number[] = [];
+    const parents: number[] = new Array(indices.length).fill(-1);
+    const tailIndices: number[] = [];
+
+    for (let i = 0; i < indices.length; i++) {
+        const idx = indices[i]!;
+
+        let left = 0;
+        let right = tails.length;
+        while (left < right) {
+            const mid = (left + right) >> 1;
+            if (tails[mid]! < idx) {
+                left = mid + 1;
+            } else {
+                right = mid;
+            }
+        }
+
+        const pos = left;
+        if (pos === tails.length) {
+            tails.push(idx);
+            tailIndices.push(i);
+        } else {
+            tails[pos] = idx;
+            tailIndices[pos] = i;
+        }
+
+        if (pos > 0) {
+            parents[i] = tailIndices[pos - 1]!;
+        }
+    }
+
+    const keepSet = new Set<T>();
+    let curr = tailIndices.length > 0 ? tailIndices[tailIndices.length - 1]! : -1;
+    while (curr !== -1) {
+        const bIdx = indices[curr]!;
+        keepSet.add(b[start + bIdx]!);
+        curr = parents[curr]!;
+    }
+
+    for (let i = 0; i < start; i++) {
+        keep(a[i]!);
+    }
+
+    for (let i = 0; i < aMidLen; i++) {
+        const val = a[start + i]!;
+        if (!keepSet.has(val)) {
+            dela(val);
+        }
+    }
+
+    for (let i = 0; i < bMidLen; i++) {
+        const val = b[start + i]!;
+        if (keepSet.has(val)) {
+            keep(val);
+        } else {
+            a2b(val);
+        }
+    }
+
+    for (let i = 0; i < end; i++) {
+        keep(a[aLen - end + i]!);
+    }
+}
+interface MapState<T> {
+    _itemDestroyer: Array<() => void>;
+    _domNodesOfItem: Node[][];
+    _arrayValue: T[];
+}
+export const map = <T>(array: () => T[], f: (item: T) => Node[]): Node[] => {
+    return fragment((headNode) => {
+        cleanup(() => {
+            mapState()._itemDestroyer.forEach((f) => f());
+        });
+        const createItem = (item: T) => {
+            return root((destroyItem) => {
+                const domNodes = f(item);
+                return [destroyItem, domNodes] as [() => void, Node[]];
+            });
+        };
+        const mapState = S<MapState<T>>(
+            (
+                preState = {
+                    _arrayValue: [] as T[],
+                    _domNodesOfItem: [],
+                    _itemDestroyer: [],
+                },
+            ) => {
+                const currentArrayValue = array();
+                const preArrayValue = preState._arrayValue;
+                const newState: MapState<T> = {
+                    _arrayValue: currentArrayValue,
+                    _domNodesOfItem: [],
+                    _itemDestroyer: [],
+                };
+                arrTrans(
+                    preArrayValue,
+                    currentArrayValue,
+                    (newItem) => {
+                        const [destroyer, domNodes] = createItem(newItem);
+                        const preNode = newState._domNodesOfItem.at(-1)?.at(-1) ?? headNode;
+                        (preNode as Element | Comment).after(...domNodes);
+                        newState._domNodesOfItem.push(domNodes);
+                        newState._itemDestroyer.push(destroyer);
+                    },
+                    (oldItem) => {
+                        const i = preArrayValue.indexOf(oldItem);
+                        preState._itemDestroyer[i]!();
+                    },
+                    (oldItem) => {
+                        const i = preArrayValue.indexOf(oldItem);
+                        newState._domNodesOfItem.push(preState._domNodesOfItem[i]!);
+                        newState._itemDestroyer.push(preState._itemDestroyer[i]!);
+                    },
+                );
+                return newState;
+            },
+        );
+        return sample(() => mapState()._domNodesOfItem.flat());
+    });
+};
+
+const isPropertyOf = (domEl: HTMLElement | SVGElement, traitName: string) => {
+    let descriptor;
+    do {
+        descriptor = Object.getOwnPropertyDescriptor(domEl, traitName);
+        domEl = Object.getPrototypeOf(domEl);
+    } while (domEl && !descriptor);
+    if (!descriptor) {
+        return false;
+    }
+    if (false === descriptor.writable) {
+        return false;
+    }
+    if (descriptor.get && !descriptor.set) {
+        return false;
+    }
+    return true;
+};
+const attribute = (node: Element, key: string | (() => string), val: string | (() => any)) => {
+    if (typeof key !== 'function' && !isReactive(val)) {
+        if (!node) {
+            return;
+        }
+        if (!(node instanceof Element)) {
+            return;
+        }
+        const isProp = isPropertyOf(node as any, key);
+        if (isProp) {
+            const preValue = (node as any)[key];
+            (node as any)[key] = val;
+            cleanup(() => {
+                (node as any)[key] = preValue;
+            });
+        } else {
+            node.setAttribute(key, val);
+            cleanup(() => {
+                node.removeAttribute(key);
+            });
+        }
+    } else {
+        S(() => {
+            attribute(node, typeof key === 'function' ? key() : key, isReactive(val) ? val() : val);
+        });
+    }
+};
+
+const spreadAttrs = (node: Element, value: () => any) => {
+    S(() => {
+        const attrs = value();
+        for (const key in attrs) {
+            attribute(node, key, attrs[key]);
+        }
+    });
+};
+
+const tree2dom = (ns: string | null, node: InterTreeNode, values: any[]): Node[] => {
+    if (node._type === InterNodeType.Text) {
+        return node._data.flatMap((part) => {
+            if (typeof part === 'string') {
+                const textNode = document.createTextNode(part);
+                cleanup(() => textNode.remove());
+                return textNode;
+            } else if (typeof part === 'number') {
+                const value = values[part];
+                if (typeof value === 'function') {
+                    return fragment(value);
+                } else {
+                    const textNode = document.createTextNode(String(value));
+                    cleanup(() => textNode.remove());
+                    return textNode;
+                }
+            }
+            return [];
+        });
+    } else {
+        const { _attrs: attrs, _content: content, _tag: tag, _sourceNode: sourceNode } = node;
+        const tagValue = unparseText(tag, values);
+        const currentNs = node._ns ?? ns;
+        return element(currentNs, sourceNode, tagValue, (node) => {
+            for (const { _name: name, _value: value } of attrs) {
+                if (name[0] === '...' && typeof name[1] === 'number') {
+                    spreadAttrs(node, unparseText(name.slice(1), values));
+                } else {
+                    attribute(node, unparseText(name, values), unparseText(value, values));
+                }
+            }
+            return content.flatMap((t) => tree2dom(currentNs, t, values));
+        });
+    }
+};
+
+const cloneTreeNode = (treeNode: InterTreeNode, parentNode: Element | null): InterTreeNode => {
+    if (treeNode._type === InterNodeType.Text) {
+        return treeNode;
+    } else {
+        if (!treeNode._sourceNode) {
+            return treeNode;
+        }
+        const currentNode =
+            parentNode ?
+                (parentNode.childNodes.item(treeNode._sourceIndex) as Element)
+            :   (treeNode._sourceNode.cloneNode(true) as Element);
+        return {
+            ...treeNode,
+            _sourceNode: currentNode,
+            _content: treeNode._content.map((node) => cloneTreeNode(node, currentNode)),
+        } satisfies InterElementNode;
+    }
+};
+
+const tag =
+    (
+        ns: string | null,
+        docType: DOMParserSupportedType,
+        wrapSource: (source: string) => string,
+        unwrapNode: (node: Document) => NodeList,
+    ) =>
+    (segments: TemplateStringsArray, ...values: any[]): Node[] => {
+        const tree = parse(
+            docType,
+            wrapSource,
+            unwrapNode,
+            segments,
+            values.map((it) => values.indexOf(it)),
+        );
+        const clonedTree = tree.map((tree) => cloneTreeNode(tree, null));
+        return fragment(() => {
+            return clonedTree.flatMap((item) => tree2dom(ns, item, values));
+        });
+    };
+const svgns = 'http://www.w3.org/2000/svg';
+export const svg = tag(
+    svgns,
+    'text/xml',
+    (svg) => `<svg xmlns="${svgns}">${svg}</svg>`,
+    (doc) => doc.firstChild!.childNodes,
+);
+export const html = tag(
+    null,
+    'text/html',
+    (html) => html,
+    (doc) => doc.body.childNodes,
+);

package/src/index.ts

@@ -0,0 +1,4 @@
+/** @format */
+
+export * from './s.js';
+export * from './h.js';