subay 0.0.12 → 0.1.0

package/src/h.ts

@@ -1,4 +1,5 @@
 // deno-lint-ignore-file no-explicit-any no-sloppy-imports
+import { arr } from './arr.js';
 import { cleanup, isReactive, root, S, sample } from './s.js';
 
 const enum InterNodeType {
@@ -28,88 +29,61 @@ type InterAttributeNode = {
 };
 
 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 rnds = () => String.fromCharCode((97 + Math.random() * 26) | 0) + Math.random().toString(36).substring(2, 5);
+const MarkStart = rnds();
+const MarkEnd = rnds();
 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 isNum = (d: any): d is number => typeof d === 'number';
+const isFun = (d: any): d is (...args: any[]) => any => typeof d === 'function';
+const isStr = (d: any): d is string => typeof d === 'string';
+const deferRemove = <T extends Element | Comment | Text>(d: T) => (cleanup(() => d.remove()), d);
+const callif = <T>(fun: (() => T) | T): T => (isFun(fun) ? fun() : fun);
 
 const parseText = (data: string) => {
-    const result: Array<string | number> = [];
     data = data.replace(BlankText, '');
+    if (!data) return [];
     if (data.includes(MarkStart) && data.includes(MarkEnd)) {
+        const result: Array<string | number> = [];
         for (const res of data.matchAll(MarkReg)) {
             const [, prefix, index, suffix] = res;
             if (prefix) {
                 result.push(prefix);
             }
             if (index) {
-                result.push(Number(index));
+                result.push(+index);
             }
             if (suffix) {
                 result.push(suffix);
             }
         }
-    } else if (data) {
-        result.push(data);
+        return result;
     }
-    return result;
+    return [data];
 };
 
 const unparseText = (data: Array<string | number | boolean>, values: any[]) => {
     if (data.length === 1) {
-        if (typeof data[0] === 'number') {
-            return values[data[0]!];
-        }
-        return data[0];
+        const head = data[0];
+        return isNum(head) ? values[head] : head;
     }
-    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('');
-    });
+    return S(() => data.map((it) => (isNum(it) ? callif(values[it]) : it)).join(''));
 };
 
 const parse = (
-    docType: DOMParserSupportedType,
-    wrapSource: (source: string) => string,
-    unwrapNode: (node: Document) => NodeList,
+    markup2nodeList: (markup: string) => 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];
-        })
+        .flatMap((segment, index, { length }) =>
+            index === length - 1 ? [segment] : [segment, MarkStart, indexMap[index], MarkEnd],
+        )
         .join('');
-
-    const wrappedHtmlStr = wrapSource(htmlStr);
-
-    const document = domParser.parseFromString(wrappedHtmlStr, docType);
-
     const dom2treenode = (domNodeList: NodeList) => {
         const nodeList: InterTreeNode[] = [];
         for (
@@ -117,115 +91,79 @@ const parse = (
             item != null;
             item = nextSibling, nextSibling = nextSibling?.nextSibling, index++
         ) {
-            do
-                remove_and_dec_index: {
-                    if (item.nodeType === 1 /* 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 [
-                                    {
-                                        _name: name,
-                                        _value: value.length === 0 ? [true] : value,
-                                    } satisfies InterAttributeNode,
-                                ];
-                            }),
-                            _content: el.childNodes.length > 0 ? dom2treenode(el.childNodes) : [],
-                            _sourceNode: isVariableElem ? null : el,
-                            _sourceIndex: index,
-                        });
-
-                        if (!isVariableElem) {
-                            break remove_and_dec_index;
+            if (item.nodeType === 1 /* Node.ELEMENT_NODE*/) {
+                const el = item as Element;
+                const tag = parseText(el.tagName.toLowerCase());
+                const isVariableElem = tag.length > 1 || isNum(tag[0]);
+
+                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 || isNum(name[0]) || value.length > 1 || isNum(value[0]);
+
+                        if (!isVariableElem && !isVariableAttr) {
+                            return [];
                         }
-                    } else if (item.nodeType === 3 /*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--;
+                        el.removeAttribute(attr.nodeName);
+                        return [
+                            {
+                                _name: name,
+                                _value: value.length === 0 ? [true] : value,
+                            } satisfies InterAttributeNode,
+                        ];
+                    }),
+                    _content: el.childNodes.length > 0 ? dom2treenode(el.childNodes) : [],
+                    _sourceNode: isVariableElem ? null : el,
+                    _sourceIndex: index,
+                });
+
+                if (!isVariableElem) {
+                    continue;
                 }
-            while (false);
+            } else if (item.nodeType === 3 /*Node.TEXT_NODE*/) {
+                const result = parseText((item as Text).data);
+                if (result.length > 0) {
+                    nodeList.push({
+                        _type: InterNodeType.Text,
+                        _data: result,
+                    });
+                }
+            }
+            (item as Comment | Text | Element).remove();
+            index--;
         }
         return nodeList;
     };
-
-    const rootList = unwrapNode(document);
-
-    const treeNode = dom2treenode(rootList);
-
+    const treeNode = dom2treenode(markup2nodeList(htmlStr));
     cache.set(segments, treeNode);
-
     return treeNode;
 };
 
 const element = (
     ns: string | null,
     sourceNode: Element | null,
-    tagName: string | (() => string) | ((...props: any[]) => Node[]),
-    attrs: InterAttributeNode[],
-    values: any[],
-    child: () => Node[],
+    tagName: string | (() => string),
+    child: (el: Element) => Node[],
 ): Node[] => {
-    if (typeof tagName === 'function') {
-        if (isReactive(tagName)) {
-            return fragment(() => {
-                const realTagName = tagName();
-                return element(ns, null, realTagName, attrs, values, child);
-            });
-        } else {
-            return fragment(() => {
-                return tagName(
-                    ...attrs.flatMap(({ _name: name, _value: value }) => {
-                        if (name[0] === '...' && typeof name[1] === 'number') {
-                            return unparseText(name.slice(1), values);
-                        } else {
-                            return unparseText(value, values);
-                        }
-                    }),
-                    child,
-                ) as Node[];
-            });
-        }
+    if (isFun(tagName)) {
+        return fragment(() => {
+            const realTagName = tagName();
+            if (!isStr(realTagName)) {
+                throw new Error(`Expecting string returned from ${tagName} but get ${realTagName}`, { cause: tagName });
+            }
+            return element(ns, null, realTagName, child);
+        });
     }
-    if (typeof tagName !== 'string') {
+    if (!isStr(tagName)) {
         return [];
     }
-    const el = sourceNode || (ns ? document.createElementNS(ns, tagName) : document.createElement(tagName));
+    const el = deferRemove(sourceNode || (ns ? document.createElementNS(ns, tagName) : document.createElement(tagName)));
     S(() => {
-        for (const { _name: name, _value: value } of attrs) {
-            if (name[0] === '...' && typeof name[1] === 'number') {
-                spreadAttrs(el, unparseText(name.slice(1), values));
-            } else {
-                attribute(el, unparseText(name, values), unparseText(value, values));
-            }
-        }
-        const subnodes = child();
+        const subnodes = child(el);
         if (subnodes.length === 0) {
             return;
         }
@@ -242,28 +180,17 @@ const element = (
             }
         }
     });
-    cleanup(() => el.remove());
     return [el];
 };
 let fragmentHeadNode: null | Comment = null;
 const fragment = (child: () => Node[]): Node[] => {
-    const firstNode = new Comment('');
-    cleanup(() => firstNode.remove());
+    const firstNode = deferRemove(new Text(''));
     const tempArray: Node[] = [firstNode];
     S(() => {
         fragmentHeadNode = firstNode;
         const c = child();
         const carr = Array.isArray(c) ? c : [c];
-
-        const nodified = carr.map((c) => {
-            if (c instanceof Node) {
-                return c;
-            }
-            const node = new Text(c);
-            cleanup(() => node.remove());
-            return node;
-        });
-
+        const nodified = carr.map((c) => (c instanceof Node ? c : deferRemove(new Text(c))));
         if (firstNode.isConnected) {
             firstNode.after(...nodified);
         } else {
@@ -273,218 +200,82 @@ const fragment = (child: () => Node[]): Node[] => {
 
     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[];
+    _killer: Array<() => void>;
+    _nodes: Node[][];
+    _arr: T[];
 }
 export const map = <T>(array: () => T[], f: (item: T) => Node[]): Node[] => {
     return fragment(() => {
         const headNode = fragmentHeadNode;
-        cleanup(() => {
-            mapState()._itemDestroyer.forEach((f) => f());
-        });
-        const createItem = (item: T) => {
-            return root((destroyItem) => {
-                const domNodes = f(item);
-                return [destroyItem, domNodes] as [() => void, Node[]];
-            });
-        };
+        cleanup(() => mapState()._killer.forEach((f) => f()));
+        const createItem = (item: T) => root((destroyItem) => [destroyItem, f(item)] as [() => void, Node[]]);
         const mapState = S<MapState<T>>(
             (
                 preState = {
-                    _arrayValue: [] as T[],
-                    _domNodesOfItem: [],
-                    _itemDestroyer: [],
+                    _arr: [] as T[],
+                    _nodes: [],
+                    _killer: [],
                 },
             ) => {
                 const currentArrayValue = array();
-                const preArrayValue = preState._arrayValue;
+                const preArrayValue = preState._arr;
                 const newState: MapState<T> = {
-                    _arrayValue: currentArrayValue,
-                    _domNodesOfItem: [],
-                    _itemDestroyer: [],
+                    _arr: currentArrayValue,
+                    _nodes: [],
+                    _killer: [],
                 };
-                arrTrans(
+                arr(
                     preArrayValue,
                     currentArrayValue,
+                    (oldItem) => preState._killer[preArrayValue.indexOf(oldItem)]!(),
                     (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);
+                        const preNode = (newState._nodes.at(-1)?.at(-1) ?? headNode) as Element | Comment;
+                        preNode.after(...domNodes);
+                        newState._nodes.push(domNodes);
+                        newState._killer.push(destroyer);
                     },
                     (oldItem) => {
                         const i = preArrayValue.indexOf(oldItem);
-                        preState._itemDestroyer[i]!();
+                        newState._nodes.push(preState._nodes[i]!);
+                        newState._killer.push(preState._killer[i]!);
                     },
                     (oldItem) => {
                         const i = preArrayValue.indexOf(oldItem);
-                        newState._domNodesOfItem.push(preState._domNodesOfItem[i]!);
-                        newState._itemDestroyer.push(preState._itemDestroyer[i]!);
+                        const preNode = (newState._nodes.at(-1)?.at(-1) ?? headNode) as Element | Comment;
+                        const domNodes = preState._nodes[i]!;
+                        preNode.after(...domNodes);
+                        newState._nodes.push(domNodes);
+                        newState._killer.push(preState._killer[i]!);
                     },
                 );
                 return newState;
             },
         );
-        return sample(() => mapState()._domNodesOfItem.flat());
+        return sample(() => mapState()._nodes.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 isPropertyOf = (el: HTMLElement | SVGElement, key: string) => {
+    if (!(key in el)) return false;
+    let d;
+    while (el && !(d = Object.getOwnPropertyDescriptor(el, key))) el = Object.getPrototypeOf(el);
+    return d && d.writable !== false && !!(!d.get || d.set);
 };
 
 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];
+    if (!(node instanceof Element)) {
+        return;
+    }
+    if (!isFun(key) && !isReactive(val)) {
+        if (isPropertyOf(node as any, key)) {
             (node as any)[key] = val;
-            cleanup(() => {
-                (node as any)[key] = preValue;
-            });
         } else {
             node.setAttribute(key, String(val));
-            cleanup(() => {
-                node.removeAttribute(key);
-            });
         }
     } else {
-        S(() => {
-            attribute(node, typeof key === 'function' ? key() : key, isReactive(val) ? val() : val);
-        });
+        S(() => attribute(node, callif(key), isReactive(val) ? val() : val));
     }
 };
 
@@ -500,31 +291,29 @@ const spreadAttrs = (node: Element, value: () => any) => {
 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 = new Text(part);
-                cleanup(() => textNode.remove());
-                return textNode;
-            } else if (typeof part === 'number') {
-                const value = values[part];
-                if (typeof value === 'function') {
-                    if (isReactive(value)) {
-                        return fragment(() => value());
-                    } else {
-                        return fragment(value);
-                    }
-                } else if (typeof value !== 'object') {
-                    const textNode = new Text(String(value));
-                    cleanup(() => textNode.remove());
-                    return textNode;
-                }
-                return value;
+            if (isStr(part)) {
+                return deferRemove(new Text(part));
+            }
+            const value = values[part];
+            if (isFun(value)) {
+                return fragment(value);
+            } else if (typeof value !== 'object') {
+                return deferRemove(new Text(String(value)));
             }
+            return value;
         });
     } 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, attrs, values, () => {
+        return element(currentNs, sourceNode, tagValue, (el) => {
+            for (const { _name: name, _value: value } of attrs) {
+                if (name[0] === '...' && isNum(name[1])) {
+                    spreadAttrs(el, unparseText(name.slice(1), values));
+                } else {
+                    attribute(el, unparseText(name, values), unparseText(value, values));
+                }
+            }
             return content.flatMap((t) => tree2dom(currentNs, t, values));
         });
     }
@@ -550,35 +339,19 @@ const cloneTreeNode = (treeNode: InterTreeNode, parentNode: Element | null): Int
 };
 
 const tag =
-    (
-        ns: string | null,
-        docType: DOMParserSupportedType,
-        wrapSource: (source: string) => string,
-        unwrapNode: (node: Document) => NodeList,
-    ) =>
+    (ns: string | null, markup2nodeList: (markup: string) => NodeList) =>
     (segments: TemplateStringsArray, ...values: any[]): Node[] => {
         const tree = parse(
-            docType,
-            wrapSource,
-            unwrapNode,
+            markup2nodeList,
             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));
-        });
+        return fragment(() => 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,
+    (svgStr) => domParser.parseFromString(`<svg xmlns="${svgns}">${svgStr}</svg>`, 'text/xml').firstChild!.childNodes,
 );
+export const html = tag(null, (htmlStr) => domParser.parseFromString(htmlStr, 'text/html').body.childNodes);

package/src/s.ts

@@ -159,7 +159,7 @@ export const transaction = <T>(f: () => T): T => {
     return result;
 };
 
-export { o as observable };
+export { o as observable, S as computed };
 
 export const sample = <T>(f: () => T): T => {
     const fallback = currentUpdate;