@viewfly/core 0.0.28 → 0.0.29

package/bundles/index.js

@@ -628,60 +628,30 @@ function getSetupContext(need = true) {
 function getSignalDepsContext() {
     return signalDepsStack[signalDepsStack.length - 1];
 }
-class JSXComponent {
-    constructor(props, factory) {
-        this.props = props;
-        this.factory = factory;
-    }
-    createInstance(injector) {
-        return this.factory(injector, this.props);
-    }
-}
 /**
  * Viewfly 组件管理类，用于管理组件的生命周期，上下文等
  */
 class Component extends ReflectiveInjector {
-    get dirty() {
-        return this._dirty;
-    }
-    get changed() {
-        return this._changed;
-    }
-    constructor(context, type, props, key) {
+    constructor(context, jsxNode, props, key) {
         super(context, [{
                 provide: Injector,
                 useFactory: () => this
             }]);
-        this.type = type;
+        this.jsxNode = jsxNode;
         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;
-        this.parentComponent = this.parentInjector;
-    }
-    is(target) {
-        return target.$$typeOf === this.$$typeOf;
-    }
-    provide(providers) {
-        providers = Array.isArray(providers) ? providers : [providers];
-        this.normalizedProviders.unshift(...providers.map(i => normalizeProvider(i)));
-    }
-    setup() {
         const self = this;
-        const props = new Proxy(this.props, {
+        const proxiesProps = new Proxy(props, {
             get(_, key) {
-                if (self.props) {
-                    return self.props[key];
-                }
+                // 必须用 self，因为 props 会随着页面更新变更，使用 self 才能更新引用
+                return self.props[key];
             },
             set() {
                 // 防止因外部捕获异常引引起的缓存未清理的问题
@@ -693,84 +663,72 @@ class Component extends ReflectiveInjector {
         });
         componentSetupStack.push(this);
         let isSetup = true;
-        const render = this.type(props);
+        const render = this.jsxNode.type(proxiesProps);
         const isRenderFn = typeof render === 'function';
-        const componentInstance = isRenderFn ? { $render: render } : render;
-        let refs = toRefs(this.props.ref);
-        onMounted(() => {
-            for (const ref of refs) {
-                ref.bind(componentInstance);
+        this.instance = isRenderFn ? { $render: render } : render;
+        this.refs = toRefs(props.ref);
+        this.mountCallbacks.push(() => {
+            for (const ref of this.refs) {
+                ref.bind(this.instance);
             }
         });
-        onDestroy(() => {
-            for (const ref of refs) {
-                ref.unBind(componentInstance);
+        this.destroyCallbacks.push(() => {
+            for (const ref of this.refs) {
+                ref.unBind(this.instance);
             }
         });
         isSetup = false;
         componentSetupStack.pop();
+    }
+    render() {
         signalDepsStack.push([]);
-        let template = componentInstance.$render();
+        let template = this.instance.$render();
         const deps = signalDepsStack.pop();
         this.unWatch = useEffect(deps, () => {
-            this.markAsDirtied();
+            this.jsxNode.markAsDirtied();
         });
-        return {
-            template,
-            render: (newProps, oldProps) => {
-                if (newProps !== oldProps) {
-                    const { add, remove, replace } = getObjectChanges(newProps, oldProps);
-                    if (add.length || remove.length || replace.length) {
-                        this.invokePropsChangedHooks(newProps);
-                    }
-                    const newRefs = toRefs(newProps.ref);
-                    for (const oldRef of refs) {
-                        if (!newRefs.includes(oldRef)) {
-                            oldRef.unBind(componentInstance);
-                        }
-                    }
-                    for (const newRef of newRefs) {
-                        if (!refs.includes(newRef)) {
-                            newRef.bind(componentInstance);
-                        }
-                    }
-                    refs = newRefs;
-                }
-                if (typeof componentInstance.$shouldUpdate === 'function') {
-                    if (!componentInstance.$shouldUpdate(newProps, oldProps)) {
-                        return template;
-                    }
-                }
-                this.unWatch();
-                signalDepsStack.push([]);
-                template = componentInstance.$render();
-                const deps = signalDepsStack.pop();
-                this.unWatch = useEffect(deps, () => {
-                    this.markAsDirtied();
-                });
-                return template;
-            }
-        };
+        this.template = template;
+        return template;
     }
-    markAsDirtied() {
-        this._dirty = true;
-        this.markAsChanged();
-    }
-    markAsChanged(changedComponent) {
-        if (changedComponent) {
-            this.changedSubComponents.add(changedComponent);
+    update(newProps, forceUpdate = false) {
+        const oldProps = this.props;
+        const { add, remove, replace } = getObjectChanges(newProps, this.props);
+        if (add.length || remove.length || replace.length) {
+            this.invokePropsChangedHooks(newProps);
+        }
+        const newRefs = toRefs(newProps.ref);
+        for (const oldRef of this.refs) {
+            if (!newRefs.includes(oldRef)) {
+                oldRef.unBind(this.instance);
+            }
         }
-        if (this._changed) {
-            return;
+        for (const newRef of newRefs) {
+            if (!this.refs.includes(newRef)) {
+                newRef.bind(this.instance);
+            }
         }
-        this._changed = true;
-        this.parentComponent.markAsChanged(this);
+        this.refs = newRefs;
+        if (!forceUpdate && typeof this.instance.$useMemo === 'function') {
+            if (this.instance.$useMemo(newProps, oldProps)) {
+                return this.template;
+            }
+        }
+        this.unWatch();
+        signalDepsStack.push([]);
+        this.template = this.instance.$render();
+        const deps = signalDepsStack.pop();
+        this.unWatch = useEffect(deps, () => {
+            this.jsxNode.markAsDirtied();
+        });
+        return this.template;
+    }
+    provide(providers) {
+        providers = Array.isArray(providers) ? providers : [providers];
+        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();
@@ -1118,6 +1076,9 @@ function inject(token, notFoundValue = THROW_IF_NOT_FOUND, flags = exports.Injec
     return component.get(token, notFoundValue, flags);
 }
 
+class NativeRenderer {
+}
+
 function Fragment(props) {
     return () => {
         return props.children;
@@ -1127,9 +1088,9 @@ function jsx(setup, props, key) {
     if (typeof setup === 'string') {
         return JSXElement.create(setup, props, key);
     }
-    return new JSXComponent(props, function (context, props) {
-        return new Component(context, setup, props, key);
-    });
+    return new JSXComponent(setup, props, function (context, jsxNode) {
+        return new Component(context, jsxNode, props, key);
+    }, key);
 }
 const jsxs = jsx;
 class JSXText {
@@ -1155,66 +1116,91 @@ class JSXElement {
         return target.$$typeOf === this.$$typeOf;
     }
 }
-
-function withMemo(shouldUpdate, render) {
-    return {
-        $shouldUpdate: shouldUpdate,
-        $render: render
-    };
-}
-
-/**
- * Viewfly 根组件，用于实现组件状态更新事件通知
- */
-class RootComponent extends Component {
-    constructor(parentInjector, factory) {
-        super(parentInjector, factory, {});
-        this.onChange = null;
+class JSXComponent {
+    get dirty() {
+        return this._dirty;
     }
-    markAsChanged(changedComponent) {
-        var _a;
+    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);
         }
-        (_a = this.onChange) === null || _a === void 0 ? void 0 : _a.call(this);
+        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;
     }
 }
 
-class NativeRenderer {
+function withMemo(canUseMemo, render) {
+    return {
+        $useMemo: canUseMemo,
+        $render: render
+    };
 }
 
-function createRenderer(component, nativeRenderer) {
+function createRenderer(jsxComponent, nativeRenderer, parentComponent) {
     let isInit = true;
     return function render(host) {
         if (isInit) {
             isInit = false;
             const atom = {
-                jsxNode: component,
+                jsxNode: jsxComponent,
                 parent: null,
                 sibling: null,
                 child: null,
                 nativeNode: null
             };
-            buildView(nativeRenderer, atom, {
+            buildView(nativeRenderer, parentComponent, atom, {
                 isParent: true,
                 host
             });
         }
         else {
-            updateView(nativeRenderer, component);
+            updateView(nativeRenderer, jsxComponent);
         }
     };
 }
-function buildView(nativeRenderer, atom, context) {
-    if (atom.jsxNode instanceof Component) {
-        componentRender(atom.jsxNode, atom, context);
+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, child, context);
+            buildView(nativeRenderer, component, child, context);
             child = child.sibling;
         }
-        atom.jsxNode.rendered();
+        atom.jsxNode.reset();
     }
     else {
         let nativeNode;
@@ -1241,7 +1227,7 @@ function buildView(nativeRenderer, atom, context) {
             };
             let child = atom.child;
             while (child) {
-                buildView(nativeRenderer, child, childContext);
+                buildView(nativeRenderer, parentComponent, child, childContext);
                 child = child.sibling;
             }
         }
@@ -1252,24 +1238,24 @@ function buildView(nativeRenderer, atom, context) {
         }
     }
 }
-function updateView(nativeRenderer, component) {
-    if (component.dirty) {
-        applyChanges(nativeRenderer, component);
-        component.rendered();
+function updateView(nativeRenderer, jsxComponent) {
+    if (jsxComponent.dirty) {
+        applyChanges(nativeRenderer, jsxComponent);
+        jsxComponent.reset();
     }
-    else if (component.changed) {
-        component.changedSubComponents.forEach(child => {
+    else if (jsxComponent.changed) {
+        jsxComponent.changedSubComponents.forEach(child => {
             updateView(nativeRenderer, child);
         });
-        component.rendered();
+        jsxComponent.reset();
     }
 }
-function applyChanges(nativeRenderer, component) {
-    const { atom, render, host, isParent } = component.$$view;
+function applyChanges(nativeRenderer, jsxComponent) {
+    const { atom, host, isParent } = jsxComponent.$$view;
     const diffAtom = atom.child;
-    const template = render(component.props, component.props);
+    const template = jsxComponent.instance.update(jsxComponent.instance.props, true);
     if (template) {
-        linkTemplate(template, component, atom);
+        linkTemplate(template, jsxComponent, atom);
     }
     else {
         atom.child = null;
@@ -1278,14 +1264,14 @@ function applyChanges(nativeRenderer, component) {
         host,
         isParent
     };
-    diff(nativeRenderer, atom.child, diffAtom, context, 0, 0);
+    diff(nativeRenderer, jsxComponent.instance, atom.child, diffAtom, context, 0, 0);
     const next = atom.sibling;
-    if (next && next.jsxNode instanceof Component) {
+    if (next && next.jsxNode instanceof JSXComponent) {
         next.jsxNode.$$view.host = context.host;
         next.jsxNode.$$view.isParent = context.isParent;
     }
 }
-function diff(nativeRenderer, newAtom, oldAtom, context, expectIndex, index) {
+function diff(nativeRenderer, parentComponent, newAtom, oldAtom, context, expectIndex, index) {
     const oldChildren = [];
     while (oldAtom) {
         oldChildren.push({
@@ -1299,13 +1285,14 @@ function diff(nativeRenderer, newAtom, oldAtom, context, expectIndex, index) {
     const changeCommits = {
         updateComponent: (newAtom, reusedAtom, expectIndex, diffIndex) => {
             commits.push((offset) => {
-                const { render, template } = reusedAtom.jsxNode.$$view;
+                const oldJSXComponent = reusedAtom.jsxNode;
+                const instance = oldJSXComponent.instance;
                 const newProps = newAtom.jsxNode.props;
-                const oldProps = reusedAtom.jsxNode.props;
-                newAtom.jsxNode = reusedAtom.jsxNode;
-                const newTemplate = render(newProps, oldProps);
-                newAtom.jsxNode.$$view = Object.assign({ render, template: newTemplate, atom: newAtom }, context);
-                if (newTemplate === template) {
+                const oldTemplate = instance.template;
+                const newTemplate = instance.update(newProps);
+                oldJSXComponent.$$view = Object.assign({ atom: newAtom }, context);
+                newAtom.jsxNode = oldJSXComponent;
+                if (newTemplate === oldTemplate) {
                     reuseComponentView(nativeRenderer, newAtom, reusedAtom, context, expectIndex !== diffIndex - offset);
                     return;
                 }
@@ -1313,7 +1300,7 @@ function diff(nativeRenderer, newAtom, oldAtom, context, expectIndex, index) {
                     linkTemplate(newTemplate, newAtom.jsxNode, newAtom);
                 }
                 if (newAtom.child) {
-                    diff(nativeRenderer, newAtom.child, reusedAtom.child, context, expectIndex, diffIndex);
+                    diff(nativeRenderer, instance, newAtom.child, reusedAtom.child, context, expectIndex, diffIndex);
                 }
                 else if (reusedAtom.child) {
                     let atom = reusedAtom.child;
@@ -1322,7 +1309,7 @@ function diff(nativeRenderer, newAtom, oldAtom, context, expectIndex, index) {
                         atom = atom.sibling;
                     }
                 }
-                newAtom.jsxNode.rendered();
+                oldJSXComponent.reset();
             });
         },
         updateElement: (newAtom, oldAtom, expectIndex, oldIndex) => {
@@ -1341,7 +1328,7 @@ function diff(nativeRenderer, newAtom, oldAtom, context, expectIndex, index) {
                 context.isParent = false;
                 const applyRefs = updateNativeNodeProperties(nativeRenderer, newAtom.jsxNode, oldAtom.jsxNode, newAtom.nativeNode);
                 if (newAtom.child) {
-                    diff(nativeRenderer, newAtom.child, oldAtom.child, {
+                    diff(nativeRenderer, parentComponent, newAtom.child, oldAtom.child, {
                         host: newAtom.nativeNode,
                         isParent: true
                     }, 0, 0);
@@ -1369,7 +1356,7 @@ function diff(nativeRenderer, newAtom, oldAtom, context, expectIndex, index) {
         },
         create: (start) => {
             commits.push(() => {
-                buildView(nativeRenderer, start, context);
+                buildView(nativeRenderer, parentComponent, start, context);
             });
         }
     };
@@ -1408,7 +1395,7 @@ function reuseComponentView(nativeRenderer, newAtom, reusedAtom, context, moveVi
         child = child.sibling;
     }
     const updateContext = (atom) => {
-        if (atom.jsxNode instanceof Component) {
+        if (atom.jsxNode instanceof JSXComponent) {
             let child = atom.child;
             while (child) {
                 updateContext(child);
@@ -1474,30 +1461,29 @@ function cleanView(nativeRenderer, atom, isClean) {
         cleanView(nativeRenderer, child, isClean);
         child = child.sibling;
     }
-    if (atom.jsxNode instanceof Component) {
-        atom.jsxNode.destroy();
+    if (atom.jsxNode instanceof JSXComponent) {
+        atom.jsxNode.instance.destroy();
     }
 }
-function componentRender(component, from, context) {
-    const { template, render } = component.setup();
+function componentRender(jsxComponent, parentComponent, from, context) {
+    const component = jsxComponent.createInstance(parentComponent);
+    const template = component.render();
     if (template) {
-        linkTemplate(template, component, from);
+        linkTemplate(template, jsxComponent, from);
     }
-    component.$$view = Object.assign({ render,
-        template, atom: from }, context);
-    return from;
+    jsxComponent.$$view = Object.assign({ atom: from }, context);
+    return component;
 }
-function createChainByComponentFactory(context, factory, parent) {
-    const component = factory.createInstance(context);
+function createChainByComponentFactory(jsxComponent, parent) {
     return {
-        jsxNode: component,
+        jsxNode: jsxComponent,
         parent,
         sibling: null,
         child: null,
         nativeNode: null
     };
 }
-function createChainByJSXElement(context, element, parent) {
+function createChainByJSXElement(jsxComponent, element, parent) {
     const atom = {
         jsxNode: element,
         parent,
@@ -1507,7 +1493,7 @@ function createChainByJSXElement(context, element, parent) {
     };
     if (Reflect.has(element.props, 'children')) {
         const jsxChildren = element.props.children;
-        const children = createChainByChildren(context, Array.isArray(jsxChildren) ? jsxChildren : [jsxChildren], atom, []);
+        const children = createChainByChildren(jsxComponent, Array.isArray(jsxChildren) ? jsxChildren : [jsxChildren], atom, []);
         link(atom, children);
     }
     return atom;
@@ -1521,14 +1507,14 @@ function createChainByJSXText(node, parent) {
         nativeNode: null
     };
 }
-function createChainByChildren(context, children, parent, atoms) {
+function createChainByChildren(jsxComponent, children, parent, atoms) {
     for (const item of children) {
         if (item instanceof JSXElement) {
-            atoms.push(createChainByJSXElement(context, item, parent));
+            atoms.push(createChainByJSXElement(jsxComponent, item, parent));
             continue;
         }
         if (item instanceof JSXComponent) {
-            const childAtom = createChainByComponentFactory(context, item, parent);
+            const childAtom = createChainByComponentFactory(item, parent);
             atoms.push(childAtom);
             continue;
         }
@@ -1537,7 +1523,7 @@ function createChainByChildren(context, children, parent, atoms) {
             continue;
         }
         if (Array.isArray(item)) {
-            createChainByChildren(context, item, parent, atoms);
+            createChainByChildren(jsxComponent, item, parent, atoms);
             continue;
         }
         if (item !== null && typeof item !== 'undefined') {
@@ -1546,9 +1532,10 @@ function createChainByChildren(context, children, parent, atoms) {
     }
     return atoms;
 }
-function linkTemplate(template, component, parent) {
+function linkTemplate(template, jsxComponent, parent) {
     const children = Array.isArray(template) ? template : [template];
-    link(parent, createChainByChildren(component, children, parent, []));
+    const newChildren = createChainByChildren(jsxComponent, children, parent, []);
+    link(parent, newChildren);
 }
 function link(parent, children) {
     for (let i = 1; i < children.length; i++) {
@@ -1728,17 +1715,37 @@ function bindEvent(nativeRenderer, vNode, key, nativeNode, listenFn) {
     nativeRenderer.listen(nativeNode, type, delegate);
 }
 
+/**
+ * Viewfly 根组件，用于实现组件状态更新事件通知
+ */
+class RootComponent extends JSXComponent {
+    constructor(factory, {}) {
+        super(factory, {}, (parentComponent, jsxNode) => {
+            return new Component(parentComponent, jsxNode, {});
+        });
+        this.onChange = null;
+    }
+    markAsChanged(changedComponent) {
+        var _a;
+        this._changed = true;
+        if (changedComponent) {
+            this.changedSubComponents.add(changedComponent);
+        }
+        (_a = this.onChange) === null || _a === void 0 ? void 0 : _a.call(this);
+    }
+}
+
 const viewflyErrorFn = makeError('Viewfly');
 function viewfly({ context, nativeRenderer, autoUpdate, root }) {
     const appProviders = [];
     let destroyed = false;
-    const rootComponent = new RootComponent(context || null, () => {
+    const rootComponent = new RootComponent(() => {
         provide(appProviders);
         return () => {
             return destroyed ? null : root;
         };
-    });
-    const render = createRenderer(rootComponent, nativeRenderer);
+    }, {});
+    const render = createRenderer(rootComponent, nativeRenderer, context || new NullInjector());
     let isStarted = false;
     let task = null;
     function microTask(callback) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viewfly/core",
-  "version": "0.0.28",
+  "version": "0.0.29",
   "description": "Viewfly is a simple and easy-to-use JavaScript framework with an intuitive development experience.",
   "main": "./bundles/index.js",
   "module": "./bundles/index.esm.js",
@@ -46,5 +46,5 @@
   "bugs": {
     "url": "https://github.com/viewfly/viewfly.git/issues"
   },
-  "gitHead": "fab3872455d5c34634ef007b4e154025ced3b833"
+  "gitHead": "ff67aecb0dd61ac7d81decbbd1670cdfe850f1cb"
 }