@viewfly/core 0.0.29 → 0.0.30

package/bundles/index.esm.js

@@ -567,6 +567,23 @@ function getObjectChanges(newProps, oldProps) {
     });
     return changes;
 }
+function getArrayChanges(left, right) {
+    const changes = {
+        add: [],
+        remove: []
+    };
+    for (const i of left) {
+        if (!right.includes(i)) {
+            changes.remove.push(i);
+        }
+    }
+    for (const i of right) {
+        if (!left.includes(i)) {
+            changes.add.push(i);
+        }
+    }
+    return changes;
+}
 function classToString(config) {
     if (!config) {
         return '';
@@ -630,23 +647,52 @@ function getSignalDepsContext() {
  * Viewfly 组件管理类，用于管理组件的生命周期，上下文等
  */
 class Component extends ReflectiveInjector {
-    constructor(context, jsxNode, props, key) {
-        super(context, [{
+    get dirty() {
+        return this._dirty;
+    }
+    get changed() {
+        return this._changed;
+    }
+    constructor(parentComponent, type, props, key) {
+        super(parentComponent, [{
                 provide: Injector,
                 useFactory: () => this
             }]);
-        this.jsxNode = jsxNode;
+        this.parentComponent = parentComponent;
+        this.type = type;
         this.props = props;
         this.key = key;
+        this.$$typeOf = this.type;
         this.destroyCallbacks = [];
         this.mountCallbacks = [];
         this.propsChangedCallbacks = [];
         this.updatedCallbacks = [];
+        this.changedSubComponents = new Set();
+        this._dirty = true;
+        this._changed = true;
         this.updatedDestroyCallbacks = [];
         this.propsChangedDestroyCallbacks = [];
         this.isFirstRending = true;
+    }
+    markAsDirtied() {
+        this._dirty = true;
+        this.markAsChanged();
+    }
+    markAsChanged(changedComponent) {
+        if (changedComponent) {
+            this.changedSubComponents.add(changedComponent);
+        }
+        if (this._changed) {
+            return;
+        }
+        this._changed = true;
+        if (this.parentComponent instanceof Component) {
+            this.parentComponent.markAsChanged(this);
+        }
+    }
+    render() {
         const self = this;
-        const proxiesProps = new Proxy(props, {
+        const proxiesProps = new Proxy(this.props, {
             get(_, key) {
                 // 必须用 self，因为 props 会随着页面更新变更，使用 self 才能更新引用
                 return self.props[key];
@@ -661,10 +707,10 @@ class Component extends ReflectiveInjector {
         });
         componentSetupStack.push(this);
         let isSetup = true;
-        const render = this.jsxNode.type(proxiesProps);
+        const render = this.type(proxiesProps);
         const isRenderFn = typeof render === 'function';
         this.instance = isRenderFn ? { $render: render } : render;
-        this.refs = toRefs(props.ref);
+        this.refs = toRefs(this.props.ref);
         this.mountCallbacks.push(() => {
             for (const ref of this.refs) {
                 ref.bind(this.instance);
@@ -677,13 +723,11 @@ class Component extends ReflectiveInjector {
         });
         isSetup = false;
         componentSetupStack.pop();
-    }
-    render() {
         signalDepsStack.push([]);
         let template = this.instance.$render();
         const deps = signalDepsStack.pop();
-        this.unWatch = useEffect(deps, () => {
-            this.jsxNode.markAsDirtied();
+        this.unWatch = useEffect(Array.from(new Set(deps)), () => {
+            this.markAsDirtied();
         });
         this.template = template;
         return template;
@@ -715,8 +759,8 @@ class Component extends ReflectiveInjector {
         signalDepsStack.push([]);
         this.template = this.instance.$render();
         const deps = signalDepsStack.pop();
-        this.unWatch = useEffect(deps, () => {
-            this.jsxNode.markAsDirtied();
+        this.unWatch = useEffect(Array.from(new Set(deps)), () => {
+            this.markAsDirtied();
         });
         return this.template;
     }
@@ -725,8 +769,10 @@ class Component extends ReflectiveInjector {
         this.normalizedProviders.unshift(...providers.map(i => normalizeProvider(i)));
     }
     rendered() {
+        this.changedSubComponents.clear();
         const is = this.isFirstRending;
         this.isFirstRending = false;
+        this._dirty = this._changed = false;
         if (is) {
             this.invokeUpdatedHooks();
             this.invokeMountHooks();
@@ -974,10 +1020,48 @@ function invokeDepFn(fn) {
     const data = fn();
     signalDepsStack.pop();
     return {
-        deps,
+        deps: Array.from(new Set(deps)),
         data
     };
 }
+function listen(model, deps, callback, isContinue) {
+    let isStop = false;
+    const nextListen = () => {
+        if (isStop) {
+            return;
+        }
+        isStop = true;
+        const { data: nextData, deps: nextDeps } = invokeDepFn(callback);
+        model.set(nextData);
+        if (typeof isContinue === 'function' && isContinue(nextData) === false) {
+            unListen();
+            return;
+        }
+        const changes = getArrayChanges(deps, nextDeps);
+        deps = deps.filter(i => {
+            const has = changes.remove.includes(i);
+            if (has) {
+                i[depsKey].delete(nextListen);
+                return false;
+            }
+            return true;
+        });
+        for (const s of changes.add) {
+            s[depsKey].add(nextListen);
+        }
+        deps.push(...changes.add);
+        isStop = false;
+    };
+    const unListen = () => {
+        for (const s of deps) {
+            s[depsKey].delete(nextListen);
+        }
+    };
+    for (const s of deps) {
+        s[depsKey].add(nextListen);
+    }
+    return unListen;
+}
 /**
  * 使用派生值，Viewfly 会收集回调函数内同步执行时访问的 Signal，
  * 并在你获取 useDerived 函数返回的 Signal 的值时，自动计算最新的值。
@@ -989,29 +1073,10 @@ function useDerived(callback, isContinue) {
     let { data, deps } = invokeDepFn(callback);
     const signal = useSignal(data);
     const component = getSetupContext(false);
-    const unListenRef = {};
-    function listen(model, deps, callback, unListenRef, isContinue) {
-        const nextListen = () => {
-            unListenRef.unListen();
-            const { data: nextData, deps: nextDeps } = invokeDepFn(callback);
-            model.set(nextData);
-            if (typeof isContinue !== 'function' || isContinue(nextData) !== false) {
-                listen(model, nextDeps, callback, unListenRef, isContinue);
-            }
-        };
-        unListenRef.unListen = () => {
-            for (const s of deps) {
-                s[depsKey].delete(nextListen);
-            }
-        };
-        for (const s of deps) {
-            s[depsKey].add(nextListen);
-        }
-    }
-    listen(signal, deps, callback, unListenRef, isContinue);
+    const unListen = listen(signal, deps, callback, isContinue);
     if (component) {
         component.destroyCallbacks.push(() => {
-            unListenRef.unListen();
+            unListen();
         });
     }
     return signal;
@@ -1084,25 +1149,23 @@ function Fragment(props) {
 }
 function jsx(setup, props, key) {
     if (typeof setup === 'string') {
-        return JSXElement.create(setup, props, key);
+        return JSXElement.createInstance(setup, props, key);
     }
-    return new JSXComponent(setup, props, function (context, jsxNode) {
-        return new Component(context, jsxNode, props, key);
+    return new JSXComponent(setup, props, function (context) {
+        return new Component(context, setup, props, key);
     }, key);
 }
 const jsxs = jsx;
+const JSXTextTypeOf = Symbol('JSXText');
 class JSXText {
     constructor(text) {
         this.text = text;
-        this.$$typeOf = '#text';
-    }
-    is(target) {
-        return target.$$typeOf === this.$$typeOf;
+        this.$$typeOf = JSXTextTypeOf;
     }
 }
 class JSXElement {
-    static create(name, props, key) {
-        return new JSXElement(name, props, key);
+    static createInstance(type, props, key) {
+        return new JSXElement(type, props, key);
     }
     constructor(type, props, key) {
         this.type = type;
@@ -1110,54 +1173,17 @@ class JSXElement {
         this.key = key;
         this.$$typeOf = this.type;
     }
-    is(target) {
-        return target.$$typeOf === this.$$typeOf;
-    }
 }
 class JSXComponent {
-    get dirty() {
-        return this._dirty;
-    }
-    get changed() {
-        return this._changed;
-    }
     constructor(type, props, factory, key) {
         this.type = type;
         this.props = props;
         this.factory = factory;
         this.key = key;
         this.$$typeOf = this.type;
-        this.parentComponent = null;
-        this.changedSubComponents = new Set();
-        this._dirty = true;
-        this._changed = true;
     }
-    markAsDirtied() {
-        this._dirty = true;
-        this.markAsChanged();
-    }
-    markAsChanged(changedComponent) {
-        if (changedComponent) {
-            this.changedSubComponents.add(changedComponent);
-        }
-        if (this._changed) {
-            return;
-        }
-        this._changed = true;
-        this.parentComponent.markAsChanged(this);
-    }
-    reset() {
-        this.changedSubComponents.clear();
-        this.instance.rendered();
-        this._dirty = this._changed = false;
-    }
-    is(target) {
-        return target.$$typeOf === this.$$typeOf;
-    }
-    createInstance(injector) {
-        this.parentComponent = injector.jsxNode;
-        this.instance = this.factory(injector, this);
-        return this.instance;
+    createInstance(parentComponent) {
+        return this.factory(parentComponent);
     }
 }
 
@@ -1168,37 +1194,33 @@ function withMemo(canUseMemo, render) {
     };
 }
 
-function createRenderer(jsxComponent, nativeRenderer, parentComponent) {
+function createRenderer(component, nativeRenderer) {
     let isInit = true;
     return function render(host) {
         if (isInit) {
             isInit = false;
             const atom = {
-                jsxNode: jsxComponent,
+                jsxNode: component,
                 parent: null,
                 sibling: null,
                 child: null,
                 nativeNode: null
             };
-            buildView(nativeRenderer, parentComponent, atom, {
+            componentRender(nativeRenderer, component, atom, {
                 isParent: true,
                 host
             });
         }
         else {
-            updateView(nativeRenderer, jsxComponent);
+            updateView(nativeRenderer, component);
         }
     };
 }
 function buildView(nativeRenderer, parentComponent, atom, context) {
     if (atom.jsxNode instanceof JSXComponent) {
-        const component = componentRender(atom.jsxNode, parentComponent, atom, context);
-        let child = atom.child;
-        while (child) {
-            buildView(nativeRenderer, component, child, context);
-            child = child.sibling;
-        }
-        atom.jsxNode.reset();
+        const component = atom.jsxNode.createInstance(parentComponent);
+        atom.jsxNode = component;
+        componentRender(nativeRenderer, component, atom, context);
     }
     else {
         let nativeNode;
@@ -1236,24 +1258,24 @@ function buildView(nativeRenderer, parentComponent, atom, context) {
         }
     }
 }
-function updateView(nativeRenderer, jsxComponent) {
-    if (jsxComponent.dirty) {
-        applyChanges(nativeRenderer, jsxComponent);
-        jsxComponent.reset();
+function updateView(nativeRenderer, component) {
+    if (component.dirty) {
+        applyChanges(nativeRenderer, component);
+        component.rendered();
     }
-    else if (jsxComponent.changed) {
-        jsxComponent.changedSubComponents.forEach(child => {
+    else if (component.changed) {
+        component.changedSubComponents.forEach(child => {
             updateView(nativeRenderer, child);
         });
-        jsxComponent.reset();
+        component.rendered();
     }
 }
-function applyChanges(nativeRenderer, jsxComponent) {
-    const { atom, host, isParent } = jsxComponent.$$view;
+function applyChanges(nativeRenderer, component) {
+    const { atom, host, isParent } = component.$$view;
     const diffAtom = atom.child;
-    const template = jsxComponent.instance.update(jsxComponent.instance.props, true);
+    const template = component.update(component.props, true);
     if (template) {
-        linkTemplate(template, jsxComponent, atom);
+        linkTemplate(template, component, atom);
     }
     else {
         atom.child = null;
@@ -1262,34 +1284,47 @@ function applyChanges(nativeRenderer, jsxComponent) {
         host,
         isParent
     };
-    diff(nativeRenderer, jsxComponent.instance, atom.child, diffAtom, context, 0, 0);
+    diff(nativeRenderer, component, atom.child, diffAtom, context, 0, 0);
     const next = atom.sibling;
-    if (next && next.jsxNode instanceof JSXComponent) {
+    if (next && next.jsxNode instanceof Component) {
         next.jsxNode.$$view.host = context.host;
         next.jsxNode.$$view.isParent = context.isParent;
     }
 }
 function diff(nativeRenderer, parentComponent, newAtom, oldAtom, context, expectIndex, index) {
-    const oldChildren = [];
-    while (oldAtom) {
-        oldChildren.push({
+    let prevDiffAtom = null;
+    let firstDiffAtomIndexed = null;
+    if (oldAtom) {
+        prevDiffAtom = {
             index,
-            atom: oldAtom
-        });
-        oldAtom = oldAtom.sibling;
+            atom: oldAtom,
+            prev: null
+        };
         index++;
+        firstDiffAtomIndexed = prevDiffAtom;
+        oldAtom = oldAtom.sibling;
+        while (oldAtom) {
+            const diffAtom = {
+                index,
+                atom: oldAtom,
+                prev: prevDiffAtom
+            };
+            prevDiffAtom.next = diffAtom;
+            prevDiffAtom = diffAtom;
+            oldAtom = oldAtom.sibling;
+            index++;
+        }
     }
     const commits = [];
     const changeCommits = {
         updateComponent: (newAtom, reusedAtom, expectIndex, diffIndex) => {
             commits.push((offset) => {
-                const oldJSXComponent = reusedAtom.jsxNode;
-                const instance = oldJSXComponent.instance;
+                const instance = reusedAtom.jsxNode;
                 const newProps = newAtom.jsxNode.props;
                 const oldTemplate = instance.template;
                 const newTemplate = instance.update(newProps);
-                oldJSXComponent.$$view = Object.assign({ atom: newAtom }, context);
-                newAtom.jsxNode = oldJSXComponent;
+                instance.$$view = Object.assign({ atom: newAtom }, context);
+                newAtom.jsxNode = instance;
                 if (newTemplate === oldTemplate) {
                     reuseComponentView(nativeRenderer, newAtom, reusedAtom, context, expectIndex !== diffIndex - offset);
                     return;
@@ -1307,7 +1342,7 @@ function diff(nativeRenderer, parentComponent, newAtom, oldAtom, context, expect
                         atom = atom.sibling;
                     }
                 }
-                oldJSXComponent.reset();
+                instance.rendered();
             });
         },
         updateElement: (newAtom, oldAtom, expectIndex, oldIndex) => {
@@ -1359,23 +1394,22 @@ function diff(nativeRenderer, parentComponent, newAtom, oldAtom, context, expect
         }
     };
     while (newAtom) {
-        createChanges(newAtom, expectIndex, oldChildren, changeCommits);
+        firstDiffAtomIndexed = createChanges(newAtom, expectIndex, firstDiffAtomIndexed, changeCommits);
         newAtom = newAtom.sibling;
         expectIndex++;
     }
-    for (const item of oldChildren) {
-        cleanView(nativeRenderer, item.atom, false);
+    let dirtyDiffAtom = firstDiffAtomIndexed;
+    while (dirtyDiffAtom) {
+        cleanView(nativeRenderer, dirtyDiffAtom.atom, false);
+        dirtyDiffAtom = dirtyDiffAtom.next;
     }
-    let j = 0;
     let offset = 0;
-    const len = oldChildren.length;
     for (let i = 0; i < commits.length; i++) {
         const commit = commits[i];
-        while (j < len) {
-            const current = oldChildren[j];
-            if (current.index <= i) {
+        while (firstDiffAtomIndexed) {
+            if (firstDiffAtomIndexed.index <= i) {
                 offset++;
-                j++;
+                firstDiffAtomIndexed = firstDiffAtomIndexed.next;
                 continue;
             }
             break;
@@ -1393,7 +1427,7 @@ function reuseComponentView(nativeRenderer, newAtom, reusedAtom, context, moveVi
         child = child.sibling;
     }
     const updateContext = (atom) => {
-        if (atom.jsxNode instanceof JSXComponent) {
+        if (atom.jsxNode instanceof Component) {
             let child = atom.child;
             while (child) {
                 updateContext(child);
@@ -1417,17 +1451,19 @@ function reuseComponentView(nativeRenderer, newAtom, reusedAtom, context, moveVi
         updateContext(atom);
     }
 }
-function createChanges(newAtom, expectIndex, oldChildren, changeCommits) {
-    for (let i = 0; i < oldChildren.length; i++) {
-        const { atom: diffAtom, index: diffIndex } = oldChildren[i];
+function createChanges(newAtom, expectIndex, diffAtomIndexed, changeCommits) {
+    const startDiffAtom = diffAtomIndexed;
+    while (diffAtomIndexed) {
+        const { atom: diffAtom, index: diffIndex } = diffAtomIndexed;
         const key = newAtom.jsxNode.key;
         const diffKey = diffAtom.jsxNode.key;
         if (key !== undefined && diffKey !== undefined) {
             if (diffKey !== key) {
+                diffAtomIndexed = diffAtomIndexed.next;
                 continue;
             }
         }
-        if (newAtom.jsxNode.is(diffAtom.jsxNode)) {
+        if (newAtom.jsxNode.$$typeOf === diffAtom.jsxNode.$$typeOf) {
             if (newAtom.jsxNode instanceof JSXElement) {
                 changeCommits.updateElement(newAtom, diffAtom, expectIndex, diffIndex);
             }
@@ -1437,11 +1473,25 @@ function createChanges(newAtom, expectIndex, oldChildren, changeCommits) {
             else {
                 changeCommits.updateComponent(newAtom, diffAtom, expectIndex, diffIndex);
             }
-            oldChildren.splice(i, 1);
-            return;
+            const next = diffAtomIndexed.next;
+            const prev = diffAtomIndexed.prev;
+            if (!prev) {
+                diffAtomIndexed = next;
+                if (diffAtomIndexed) {
+                    diffAtomIndexed.prev = null;
+                }
+                return diffAtomIndexed;
+            }
+            prev.next = next;
+            if (next) {
+                next.prev = prev;
+            }
+            return startDiffAtom;
         }
+        diffAtomIndexed = diffAtomIndexed.next;
     }
     changeCommits.create(newAtom);
+    return startDiffAtom;
 }
 function cleanView(nativeRenderer, atom, isClean) {
     if (atom.nativeNode) {
@@ -1459,18 +1509,22 @@ function cleanView(nativeRenderer, atom, isClean) {
         cleanView(nativeRenderer, child, isClean);
         child = child.sibling;
     }
-    if (atom.jsxNode instanceof JSXComponent) {
-        atom.jsxNode.instance.destroy();
+    if (atom.jsxNode instanceof Component) {
+        atom.jsxNode.destroy();
     }
 }
-function componentRender(jsxComponent, parentComponent, from, context) {
-    const component = jsxComponent.createInstance(parentComponent);
+function componentRender(nativeRenderer, component, from, context) {
     const template = component.render();
     if (template) {
-        linkTemplate(template, jsxComponent, from);
+        linkTemplate(template, component, from);
     }
-    jsxComponent.$$view = Object.assign({ atom: from }, context);
-    return component;
+    component.$$view = Object.assign({ atom: from }, context);
+    let child = from.child;
+    while (child) {
+        buildView(nativeRenderer, component, child, context);
+        child = child.sibling;
+    }
+    component.rendered();
 }
 function createChainByComponentFactory(jsxComponent, parent) {
     return {
@@ -1481,7 +1535,7 @@ function createChainByComponentFactory(jsxComponent, parent) {
         nativeNode: null
     };
 }
-function createChainByJSXElement(jsxComponent, element, parent) {
+function createChainByJSXElement(component, element, parent) {
     const atom = {
         jsxNode: element,
         parent,
@@ -1491,7 +1545,7 @@ function createChainByJSXElement(jsxComponent, element, parent) {
     };
     if (Reflect.has(element.props, 'children')) {
         const jsxChildren = element.props.children;
-        const children = createChainByChildren(jsxComponent, Array.isArray(jsxChildren) ? jsxChildren : [jsxChildren], atom, []);
+        const children = createChainByChildren(component, Array.isArray(jsxChildren) ? jsxChildren : [jsxChildren], atom, []);
         link(atom, children);
     }
     return atom;
@@ -1505,34 +1559,34 @@ function createChainByJSXText(node, parent) {
         nativeNode: null
     };
 }
-function createChainByChildren(jsxComponent, children, parent, atoms) {
+function createChainByChildren(component, children, parent, atoms) {
     for (const item of children) {
-        if (item instanceof JSXElement) {
-            atoms.push(createChainByJSXElement(jsxComponent, item, parent));
-            continue;
-        }
-        if (item instanceof JSXComponent) {
-            const childAtom = createChainByComponentFactory(item, parent);
-            atoms.push(childAtom);
-            continue;
-        }
-        if (typeof item === 'string' && item.length) {
-            atoms.push(createChainByJSXText(new JSXText(item), parent));
-            continue;
-        }
-        if (Array.isArray(item)) {
-            createChainByChildren(jsxComponent, item, parent, atoms);
-            continue;
-        }
         if (item !== null && typeof item !== 'undefined') {
+            if (item instanceof JSXElement) {
+                atoms.push(createChainByJSXElement(component, item, parent));
+                continue;
+            }
+            if (item instanceof JSXComponent) {
+                const childAtom = createChainByComponentFactory(item, parent);
+                atoms.push(childAtom);
+                continue;
+            }
+            if (typeof item === 'string' && item.length) {
+                atoms.push(createChainByJSXText(new JSXText(item), parent));
+                continue;
+            }
+            if (Array.isArray(item)) {
+                createChainByChildren(component, item, parent, atoms);
+                continue;
+            }
             atoms.push(createChainByJSXText(new JSXText(String(item)), parent));
         }
     }
     return atoms;
 }
-function linkTemplate(template, jsxComponent, parent) {
+function linkTemplate(template, component, parent) {
     const children = Array.isArray(template) ? template : [template];
-    const newChildren = createChainByChildren(jsxComponent, children, parent, []);
+    const newChildren = createChainByChildren(component, children, parent, []);
     link(parent, newChildren);
 }
 function link(parent, children) {
@@ -1716,11 +1770,9 @@ function bindEvent(nativeRenderer, vNode, key, nativeNode, listenFn) {
 /**
  * Viewfly 根组件，用于实现组件状态更新事件通知
  */
-class RootComponent extends JSXComponent {
-    constructor(factory, {}) {
-        super(factory, {}, (parentComponent, jsxNode) => {
-            return new Component(parentComponent, jsxNode, {});
-        });
+class RootComponent extends Component {
+    constructor(parentInjector, factory) {
+        super(parentInjector, factory, {});
         this.onChange = null;
     }
     markAsChanged(changedComponent) {
@@ -1737,13 +1789,13 @@ const viewflyErrorFn = makeError('Viewfly');
 function viewfly({ context, nativeRenderer, autoUpdate, root }) {
     const appProviders = [];
     let destroyed = false;
-    const rootComponent = new RootComponent(() => {
+    const rootComponent = new RootComponent(context || null, () => {
         provide(appProviders);
         return () => {
             return destroyed ? null : root;
         };
-    }, {});
-    const render = createRenderer(rootComponent, nativeRenderer, context || new NullInjector());
+    });
+    const render = createRenderer(rootComponent, nativeRenderer);
     let isStarted = false;
     let task = null;
     function microTask(callback) {