subay 0.0.7 → 0.0.10

package/src/h.ts

@@ -1,11 +1,8 @@
-/** @format */
-
 import { cleanup, isReactive, root, S, sample } from './s.js';
 
 const enum InterNodeType {
     Text = 1,
     Element = 2,
-    Attribute = 3,
 }
 
 type InterTreeNode = InterTextNode | InterElementNode;
@@ -25,9 +22,8 @@ type InterElementNode = {
 };
 
 type InterAttributeNode = {
-    _type: InterNodeType.Attribute;
     _name: Array<string | number>;
-    _value: Array<string | number>;
+    _value: Array<string | number | true>;
 };
 
 const cache = new Map<TemplateStringsArray, InterTreeNode[]>();
@@ -66,7 +62,7 @@ const parseText = (data: string) => {
     return result;
 };
 
-const unparseText = (data: Array<string | number>, values: any[]) => {
+const unparseText = (data: Array<string | number | boolean>, values: any[]) => {
     if (data.length === 1) {
         if (typeof data[0] === 'number') {
             return values[data[0]!];
@@ -122,7 +118,7 @@ const parse = (
         ) {
             do
                 remove_and_dec_index: {
-                    if (item.nodeType === Node.ELEMENT_NODE) {
+                    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';
@@ -147,9 +143,8 @@ const parse = (
                                 }
                                 return [
                                     {
-                                        _type: InterNodeType.Attribute,
                                         _name: name,
-                                        _value: value,
+                                        _value: value.length === 0 ? [true] : value,
                                     } satisfies InterAttributeNode,
                                 ];
                             }),
@@ -161,7 +156,7 @@ const parse = (
                         if (!isVariableElem) {
                             break remove_and_dec_index;
                         }
-                    } else if (item.nodeType === Node.TEXT_NODE) {
+                    } else if (item.nodeType === 3 /*Node.TEXT_NODE*/) {
                         const data = (item as Text).data;
                         const result = parseText(data);
                         if (result.length > 0) {
@@ -191,29 +186,49 @@ const parse = (
 const element = (
     ns: string | null,
     sourceNode: Element | null,
-    tagName: string | (() => string),
-    child: (node: Element) => Node[],
+    tagName: string | (() => string) | ((...props: any[]) => Node[]),
+    attrs: InterAttributeNode[],
+    values: any[],
+    child: () => Node[],
 ): Node[] => {
     if (typeof tagName === 'function') {
-        return fragment(() => {
-            const realTagName = tagName();
-            if (typeof realTagName === 'string') {
-                return element(ns, null, realTagName, child);
-            }
-            return [];
-        });
+        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 (typeof tagName !== 'string') {
         return [];
     }
     const el = sourceNode || (ns ? document.createElementNS(ns, tagName) : document.createElement(tagName));
     S(() => {
-        const subnodes = child(el);
+        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();
         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++) {
@@ -221,7 +236,6 @@ const element = (
                 if (left === right) {
                     left = left.nextElementSibling;
                 } else {
-                    // @domact
                     el.insertBefore(right, left);
                 }
             }
@@ -230,20 +244,21 @@ const element = (
     cleanup(() => el.remove());
     return [el];
 };
-
-const fragment = (child: (head: Node) => Node[]): Node[] => {
-    const firstNode = document.createComment('start-frag');
+let fragmentHeadNode: null | Comment = null;
+const fragment = (child: () => Node[]): Node[] => {
+    const firstNode = new Comment('');
     cleanup(() => firstNode.remove());
     const tempArray: Node[] = [firstNode];
     S(() => {
-        const c = child(firstNode);
+        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 = document.createTextNode(c);
+            const node = new Text(c);
             cleanup(() => node.remove());
             return node;
         });
@@ -373,7 +388,8 @@ interface MapState<T> {
     _arrayValue: T[];
 }
 export const map = <T>(array: () => T[], f: (item: T) => Node[]): Node[] => {
-    return fragment((headNode) => {
+    return fragment(() => {
+        const headNode = fragmentHeadNode;
         cleanup(() => {
             mapState()._itemDestroyer.forEach((f) => f());
         });
@@ -442,6 +458,7 @@ const isPropertyOf = (domEl: HTMLElement | SVGElement, traitName: string) => {
     }
     return true;
 };
+
 const attribute = (node: Element, key: string | (() => string), val: string | (() => any)) => {
     if (typeof key !== 'function' && !isReactive(val)) {
         if (!node) {
@@ -458,7 +475,7 @@ const attribute = (node: Element, key: string | (() => string), val: string | ((
                 (node as any)[key] = preValue;
             });
         } else {
-            node.setAttribute(key, val);
+            node.setAttribute(key, String(val));
             cleanup(() => {
                 node.removeAttribute(key);
             });
@@ -483,33 +500,30 @@ 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);
+                const textNode = new Text(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));
+                    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;
             }
-            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 element(currentNs, sourceNode, tagValue, attrs, values, () => {
             return content.flatMap((t) => tree2dom(currentNs, t, values));
         });
     }

package/src/index.ts

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

package/src/name.ts

@@ -0,0 +1,60 @@
+const url2src = new Map<string, string>();
+const getLeftName = function getLeftName() {
+    const stack = new Error().stack;
+    if (!stack) {
+        return null;
+    }
+    const urlRegex = /((?:\w+:\/\/)[-a-zA-Z0-9:@;?&=\/%\+\.\*!'\(\),\$_\{\}\^~\[\]`#|]+):(\d+):(\d+)/;
+    const lines = stack.split('\n');
+
+    const currentLineIndex = lines.findIndex((line) => {
+        return line.includes(import.meta.url) && line.includes(getLeftName.name);
+    });
+
+    if (currentLineIndex > -1) {
+        const offset = 3;
+        const line = lines[currentLineIndex + offset];
+        if (!line) {
+            return null;
+        }
+        const location = line.match(urlRegex);
+        if (!location) {
+            return null;
+        }
+        const url = location[1];
+        const lineNo = location[2];
+        const colNo = location[3];
+        if (!url || !lineNo || !colNo) {
+            return null;
+        }
+        let src: string;
+        if (url2src.has(url)) {
+            src = url2src.get(url)!;
+        } else {
+            const xhr = new XMLHttpRequest();
+            xhr.open('GET', url, false);
+            xhr.send();
+            src = xhr.responseText;
+            url2src.set(url, src);
+        }
+
+        const reg = new RegExp(`(?:.*\r?\n){${Number(lineNo) - 1}}.{${Number(colNo) - 1}}`);
+        const segment = src.match(reg);
+        if (!segment) {
+            return null;
+        }
+        return segment[0].match(/(\w+)\s*=\s*$/)?.[1];
+    }
+    return null;
+};
+
+export const namedFunc = <F extends (...args: any[]) => any>(f: F, fallback?: string): F => {
+    const leftName = getLeftName() ?? fallback;
+    if (!leftName) {
+        return f;
+    }
+    const g = new Function(`return function ${leftName} (...args) {return ${leftName}._(...args)}`)();
+    g._ = f;
+    Object.setPrototypeOf(g, f);
+    return g;
+};

package/src/s.ts

@@ -1,167 +1,169 @@
-interface IUpdater {
-    (): void;
-    _whoIOwn: Array<IUpdater>;
-    _whoINeed: Array<ITrigger>;
-    _dirty: boolean;
-    _onCleanupCallback: Array<() => void>;
-}
+declare const __SUBAY_DEV__: boolean | undefined;
 
-interface ITrigger {
-    _whoNeedMe: Array<IUpdater>;
-    _data: IO<any>;
-    _pendingValue: any;
-}
+const namedFunc = typeof __SUBAY_DEV__ === 'boolean' && __SUBAY_DEV__ ? (await import('./name.js')).namedFunc : <T>(f: T) => f;
 
 interface IS<T> {
-    (): T;
+    (force?: typeof Yes): T;
+    _whoIOwn: Array<IS<any>>;
+    _whoINeed: Set<IO<any> | IS<any>>;
+    _whoNeedMe: Array<IS<any>>;
+    _dirty: boolean;
+    _onCleanupCallback: Array<() => void>;
+    $o: number;
+    _lastAccess: number;
 }
 
+type IPartialS<T> = {
+    (force?: typeof Yes): T;
+    _whoIOwn?: Array<IS<any>>;
+    _whoINeed?: Set<IO<any> | IS<any>>;
+    _whoNeedMe?: Array<IS<any>>;
+    _dirty?: boolean;
+    _onCleanupCallback?: Array<() => void>;
+    $o?: number;
+    _lastAccess?: number;
+};
+
 interface IO<T> {
     (): T;
     (nextValue: T): T;
+    _whoNeedMe: Array<IS<any>>;
+    _pendingValue: any;
+    $o: number;
 }
 
-let currentUpdate: IUpdater | undefined = undefined;
+let currentUpdate: IS<any> | undefined = undefined;
 const NoValue: unique symbol = Symbol();
-let triggerQueue: Array<ITrigger> | undefined = undefined;
-const fun2s = new WeakMap<(...args: any[]) => any, IUpdater>();
-class Reactive {}
-class Observable extends Reactive {}
-class Computation extends Reactive {}
-const cProto = new Computation();
-const oProto = new Observable();
+const Yes: unique symbol = Symbol();
+let triggerQueue: Array<IO<any>> | undefined = undefined;
+const fun2s = new WeakMap<(...args: any[]) => any, IS<any>>();
+let clock = 0;
 
 export const root = <T>(fn: (destroy: () => void) => T): T => {
     const backup = currentUpdate;
-    const rootUpdate: IUpdater = (() => {}) as any;
-    resetUpdate(rootUpdate);
+    const rootUpdate: IS<any> = (() => {}) as any;
+    resetS(rootUpdate);
     rootUpdate._dirty = false;
     currentUpdate = rootUpdate;
     const result = fn(() => {
-        recycleUpdate(rootUpdate);
+        recycleS(rootUpdate);
         currentUpdate = undefined;
     });
     currentUpdate = backup;
     return result;
 };
 export const S = <T>(fn: (pv: T | undefined) => T, value?: T): IS<T> => {
-    const data = () => {
-        if (update._dirty) {
-            update();
-        } else if (currentUpdate) {
-            update._whoINeed.forEach((t) => t._data());
-        }
-        return value as T;
-    };
-    Object.setPrototypeOf(data, cProto);
-    const update: IUpdater = (() => {
-        const backup = currentUpdate;
-        recycleUpdate(update);
-        update._dirty = false;
-        currentUpdate = update;
-        value = fn(value);
-        currentUpdate = backup;
-    }) as any;
+    const data: IS<T> = namedFunc(
+        resetS((force?: typeof Yes) => {
+            if (force === Yes || data._dirty) {
+                data._lastAccess = clock;
+                const backup = currentUpdate;
+                recycleS(data);
+                data._dirty = false;
+                currentUpdate = data;
+                value = fn(value);
+                currentUpdate = backup;
+            } else if (currentUpdate && !currentUpdate._whoINeed.has(data)) {
+                currentUpdate._whoINeed.add(data);
+                data._whoNeedMe.push(currentUpdate);
+            }
+            return value as T;
+        }),
+    );
+    data.$o = 0xc03;
+    data._lastAccess = clock++;
     if (currentUpdate) {
-        currentUpdate._whoIOwn.push(update);
+        currentUpdate._whoIOwn.push(data);
     }
-    resetUpdate(update);
-    update();
-    fun2s.set(fn, update);
+    data(Yes);
+    fun2s.set(fn, data);
     return data;
 };
 export const o = <T>(value: T): IO<T> => {
-    function data(): T;
-    function data(nextValue: T): T;
-    function data(nextValue?: T) {
+    function d(): T;
+    function d(nextValue: T): T;
+    function d(nextValue?: T) {
         if (arguments.length === 0) {
-            if (currentUpdate) {
-                if (!currentUpdate._whoINeed.includes(trigger)) {
-                    currentUpdate._whoINeed.push(trigger);
-                }
-                if (!trigger._whoNeedMe.includes(currentUpdate)) {
-                    trigger._whoNeedMe.push(currentUpdate);
-                }
+            if (currentUpdate && !currentUpdate._whoINeed.has(data)) {
+                currentUpdate._whoINeed.add(data);
+                data._whoNeedMe.push(currentUpdate);
             }
             return value;
         }
-
+        clock++;
         if (triggerQueue) {
-            if (trigger._pendingValue === NoValue) {
-                triggerQueue.push(trigger);
+            if (data._pendingValue === NoValue) {
+                triggerQueue.push(data);
             }
-            trigger._pendingValue = nextValue;
+            (data as IO<T>)._pendingValue = nextValue as T;
             return nextValue;
         }
-
         value = nextValue!;
-
         const backup = currentUpdate;
         currentUpdate = undefined;
-
-        const whoNeedMeLasttime = trigger._whoNeedMe.filter((it) => {
-            return it._whoINeed.includes(trigger);
-        });
+        const collection = new Set<IS<any>>();
+        const collect = (it: IS<any>, by: IS<any> | IO<any>): void => {
+            if (!it._whoINeed.has(by) || collection.has(it)) {
+                return;
+            }
+            collection.add(it);
+            it._whoNeedMe.forEach((i) => collect(i, it));
+        };
+        data._whoNeedMe.forEach((it) => collect(it, data));
+        const whoNeedMeLasttime = Array.from(collection);
         whoNeedMeLasttime.forEach((u) => {
             u._dirty = true;
         });
-        trigger._whoNeedMe = [];
-        whoNeedMeLasttime.forEach((u) => {
+        data._whoNeedMe = [];
+        whoNeedMeLasttime.sort(byLastAccess).forEach((u) => {
             if (u._dirty) {
                 u();
             }
         });
-
         currentUpdate = backup;
-
         return value;
     }
-
-    Object.setPrototypeOf(data, oProto);
-
-    const trigger: ITrigger = {
-        _whoNeedMe: [],
-        _data: data,
-        _pendingValue: NoValue,
-    };
-
+    const data = namedFunc(d as IO<T>);
+    data._whoNeedMe = [] as Array<IS<any>>;
+    data._pendingValue = NoValue;
+    data.$o = 0x0b5;
+    clock++;
     return data;
 };
-const recycleUpdate = (update: IUpdater) => {
-    update._whoIOwn.forEach(recycleUpdate);
+const byLastAccess = (a: IS<any>, b: IS<any>) => a._lastAccess - b._lastAccess;
+const recycleS = (update: IS<any>) => {
+    update._whoIOwn.forEach(recycleS);
     update._dirty = false;
     update._onCleanupCallback.forEach((f) => f());
-    resetUpdate(update);
+    resetS(update);
 };
 
-const resetUpdate = (update: IUpdater) => {
-    update._whoINeed = [];
+const resetS = (update: IPartialS<any>) => {
+    update._whoINeed = new Set();
+    update._whoNeedMe = [];
     update._whoIOwn = [];
     update._onCleanupCallback = [];
+    return update as IS<any>;
 };
 
 export const cleanup = <T extends () => void>(f: T): T => {
-    if (currentUpdate) {
-        currentUpdate._onCleanupCallback.push(f);
-    }
+    currentUpdate?._onCleanupCallback.push(f);
     return f;
 };
 
 export const transaction = <T>(f: () => T): T => {
     const fallback = triggerQueue;
-    triggerQueue = [] as ITrigger[];
+    triggerQueue = [] as IO<any>[];
     const result = f();
     const workedQueue = triggerQueue;
     triggerQueue = fallback;
-
     workedQueue.forEach((t) => {
         if (t._pendingValue !== NoValue) {
             const pv = t._pendingValue;
             t._pendingValue = NoValue;
-            t._data(pv);
+            t(pv);
         }
     });
-
     return result;
 };
 
@@ -184,10 +186,9 @@ export const subscribe = (f: () => void) => {
 export const unsubscribe = (f: () => void) => {
     const update = fun2s.get(f);
     if (update) {
-        recycleUpdate(update);
+        recycleS(update);
     }
 };
-
-export const isObservable = (o: any): o is IO<any> => o instanceof Observable;
-export const isComputed = (o: any): o is IS<any> => o instanceof Computation;
-export const isReactive = (o: any): o is IO<any> | IS<any> => o instanceof Reactive;
+export const isObservable = (o: any): o is IO<any> => o?.$o === 0x0b5;
+export const isComputed = (o: any): o is IS<any> => o?.$o === 0xc03;
+export const isReactive = (o: any): o is IO<any> | IS<any> => o?.$o;