@viewfly/core 1.0.4 → 1.1.0

package/bundles/index.esm.js

@@ -570,23 +570,6 @@ 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 (typeof config === 'string') {
         return config;
@@ -635,8 +618,28 @@ const TextAtomType = Symbol('Text');
 const ElementAtomType = Symbol('Element');
 const ComponentAtomType = Symbol('Component');
 
+class Listener {
+    constructor(effect) {
+        this.effect = effect;
+        this.destroyCallbacks = [];
+    }
+    destroy() {
+        this.destroyCallbacks.forEach(fn => fn());
+        this.destroyCallbacks = [];
+    }
+}
+const listeners = [];
+function getCurrentListener() {
+    return listeners.at(-1);
+}
+function pushListener(listener) {
+    listeners.push(listener);
+}
+function popListener() {
+    listeners.pop();
+}
+
 const componentSetupStack = [];
-const signalDepsStack = [];
 const componentErrorFn = makeError('component');
 function getSetupContext(need = true) {
     const current = componentSetupStack[componentSetupStack.length - 1];
@@ -646,9 +649,6 @@ function getSetupContext(need = true) {
     }
     return current;
 }
-function getSignalDepsContext() {
-    return signalDepsStack[signalDepsStack.length - 1];
-}
 /**
  * Viewfly 组件管理类，用于管理组件的生命周期，上下文等
  */
@@ -675,6 +675,9 @@ class Component extends ReflectiveInjector {
         this._changed = true;
         this.isFirstRendering = true;
         this.refs = null;
+        this.listener = new Listener(() => {
+            this.markAsDirtied();
+        });
     }
     markAsDirtied() {
         this._dirty = true;
@@ -728,12 +731,9 @@ class Component extends ReflectiveInjector {
         }
         isSetup = false;
         componentSetupStack.pop();
-        signalDepsStack.push([]);
+        pushListener(this.listener);
         const template = this.instance.$render();
-        const deps = signalDepsStack.pop();
-        this.unWatch = watch(Array.from(new Set(deps)), () => {
-            this.markAsDirtied();
-        });
+        popListener();
         update(template, this.instance.$portalHost);
         this.rendered();
     }
@@ -772,13 +772,10 @@ class Component extends ReflectiveInjector {
                 return;
             }
         }
-        this.unWatch();
-        signalDepsStack.push([]);
+        this.listener.destroy();
+        pushListener(this.listener);
         const template = this.instance.$render();
-        const deps = signalDepsStack.pop();
-        this.unWatch = watch(Array.from(new Set(deps)), () => {
-            this.markAsDirtied();
-        });
+        popListener();
         updateChildren(template);
         this.rendered();
     }
@@ -788,7 +785,7 @@ class Component extends ReflectiveInjector {
     }
     destroy() {
         var _a, _b, _c;
-        this.unWatch();
+        this.listener.destroy();
         (_a = this.updatedDestroyCallbacks) === null || _a === void 0 ? void 0 : _a.forEach(fn => {
             fn();
         });
@@ -1050,173 +1047,6 @@ class StaticRef extends DynamicRef {
 function createRef() {
     return new StaticRef();
 }
-const depsKey = Symbol('deps');
-/**
- * 组件状态管理器
- * @param state 初始状态
- * @example
- * ```tsx
- * function App() {
- *   // 初始化状态
- *   const state = createSignal(1)
- *
- *   return () => {
- *     <div>
- *       <div>当前值为：{state()}</div>
- *       <div>
- *         <button type="button" onClick={() => {
- *           // 当点击时更新状态
- *           state.set(state() + 1)
- *         }
- *         }>updateState</button>
- *       </div>
- *     </div>
- *   }
- * }
- */
-function createSignal(state) {
-    function signal() {
-        const depsContext = getSignalDepsContext();
-        if (depsContext) {
-            depsContext.push(signal);
-        }
-        return state;
-    }
-    signal.$isSignal = true;
-    signal.set = function (newState) {
-        if (newState === state) {
-            return;
-        }
-        state = newState;
-        const depCallbacks = Array.from(signal[depsKey]);
-        for (const fn of depCallbacks) {
-            // 回调中可能会对依赖做出修改，故需先缓存起来
-            fn();
-        }
-    };
-    //
-    // signal.toString = function () {
-    //   return String(state)
-    // }
-    //
-    // signal.valueOf = function () {
-    //   return state
-    // }
-    signal[depsKey] = new Set();
-    return signal;
-}
-function invokeDepFn(fn) {
-    const deps = [];
-    signalDepsStack.push(deps);
-    const data = fn();
-    signalDepsStack.pop();
-    return {
-        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 的值时，自动计算最新的值。
- *
- * @param callback
- * @param isContinue 可选的停止函数，在每次值更新后调用，当返回值为 false 时，将不再监听依赖的变化
- */
-function createDerived(callback, isContinue) {
-    const { data, deps } = invokeDepFn(callback);
-    const signal = createSignal(data);
-    const component = getSetupContext(false);
-    const unListen = listen(signal, deps, callback, isContinue);
-    if (component) {
-        if (!component.unmountedCallbacks) {
-            component.unmountedCallbacks = [];
-        }
-        component.unmountedCallbacks.push(() => {
-            unListen();
-        });
-    }
-    return signal;
-}
-/* eslint-enable max-len*/
-function watch(deps, callback) {
-    if (typeof deps === 'function' && !deps.$isSignal) {
-        deps = createDerived(deps);
-    }
-    const signals = Array.isArray(deps) ? deps : [deps];
-    let oldValues = signals.map(s => s());
-    let prevCleanup;
-    function effectCallback() {
-        if (typeof prevCleanup === 'function') {
-            prevCleanup();
-        }
-        const newValues = signals.map(s => s());
-        prevCleanup = Array.isArray(deps) ? callback(newValues, oldValues) : callback(newValues[0], oldValues[0]);
-        oldValues = newValues;
-    }
-    for (const dep of signals) {
-        dep[depsKey].add(effectCallback);
-    }
-    const component = getSetupContext(false);
-    let isClean = false;
-    const destroyFn = () => {
-        if (isClean) {
-            return;
-        }
-        isClean = true;
-        if (component === null || component === void 0 ? void 0 : component.unmountedCallbacks) {
-            const index = component.unmountedCallbacks.indexOf(destroyFn);
-            component.unmountedCallbacks.splice(index, 1);
-        }
-        for (const dep of signals) {
-            dep[depsKey].delete(effectCallback);
-        }
-    };
-    if (component) {
-        if (!component.unmountedCallbacks) {
-            component.unmountedCallbacks = [];
-        }
-        component.unmountedCallbacks.push(destroyFn);
-    }
-    return destroyFn;
-}
 /**
  * 给组件添加注解
  * @param annotation
@@ -1266,10 +1096,21 @@ function Fragment(props) {
     };
 }
 function Context(props) {
-    const instance = getCurrentInstance();
-    instance.provide(props.providers);
+    function createContextComponent(providers) {
+        return withAnnotation({
+            providers,
+        }, () => {
+            return () => {
+                return props.children;
+            };
+        });
+    }
+    let contextComponent = createContextComponent(props.providers);
+    onPropsChanged((newProps) => {
+        contextComponent = createContextComponent(newProps.providers);
+    });
     return () => {
-        return props.children;
+        return jsx(contextComponent, {});
     };
 }
 function jsx(type, props, key) {
@@ -1293,9 +1134,13 @@ function withMemo(canUseMemo, render) {
     };
 }
 
+const ElementNamespaceMap = {
+    svg: 'svg',
+    math: 'mathml',
+};
 const componentViewCache = new WeakMap();
 const listenerReg = /^on[A-Z]/;
-function createRenderer(component, nativeRenderer) {
+function createRenderer(component, nativeRenderer, namespace) {
     let isInit = true;
     return function render(host) {
         if (isInit) {
@@ -1308,7 +1153,7 @@ function createRenderer(component, nativeRenderer) {
                 sibling: null,
                 child: null,
                 nativeNode: null,
-                isSvg: false
+                namespace
             };
             componentRender(nativeRenderer, component, atom, {
                 isParent: true,
@@ -1361,7 +1206,7 @@ function updateView(nativeRenderer, component, needMove) {
 function applyChanges(nativeRenderer, component, atom, context, needMove) {
     const diffAtom = atom.child;
     component.update(component.props, newTemplate => {
-        atom.child = createChildChain(newTemplate, atom.isSvg);
+        atom.child = createChildChain(newTemplate, atom.namespace);
         diff(nativeRenderer, component, atom.child, diffAtom, context, needMove);
         const next = atom.sibling;
         if (next && next.jsxNode instanceof Component) {
@@ -1474,7 +1319,7 @@ function updateComponent(newAtom, reusedAtom, nativeRenderer, context) {
         newAtom.jsxNode = component;
         component.update(newProps, newTemplate => {
             if (newTemplate) {
-                newAtom.child = createChildChain(newTemplate, newAtom.isSvg);
+                newAtom.child = createChildChain(newTemplate, newAtom.namespace);
             }
             if (newAtom.child) {
                 diff(nativeRenderer, component, newAtom.child, reusedAtom.child, context, needMove || newAtom.index - offset !== reusedAtom.index);
@@ -1534,7 +1379,7 @@ function reuseElementChildrenView(nativeRenderer, atom, context, skipSubComponen
 }
 function cleanElementChildren(atom, nativeRenderer) {
     let child = atom.child;
-    nativeRenderer.cleanChildren(atom.nativeNode, atom.isSvg);
+    nativeRenderer.cleanChildren(atom.nativeNode, atom.namespace);
     while (child) {
         cleanView(nativeRenderer, child, false);
         child = child.sibling;
@@ -1543,7 +1388,7 @@ function cleanElementChildren(atom, nativeRenderer) {
 function cleanView(nativeRenderer, atom, needClean) {
     if (atom.nativeNode) {
         if (needClean) {
-            nativeRenderer.remove(atom.nativeNode, atom.isSvg);
+            nativeRenderer.remove(atom.nativeNode, atom.namespace);
             needClean = false;
         }
         if (atom.type === ElementAtomType) {
@@ -1565,7 +1410,7 @@ function cleanView(nativeRenderer, atom, needClean) {
 }
 function componentRender(nativeRenderer, component, from, context) {
     component.render((template, portalHost) => {
-        from.child = createChildChain(template, from.isSvg);
+        from.child = createChildChain(template, from.namespace);
         context = portalHost ? { isParent: true, host: portalHost, rootHost: portalHost } : context;
         componentViewCache.set(component, Object.assign({ atom: from }, context));
         let child = from.child;
@@ -1575,7 +1420,7 @@ function componentRender(nativeRenderer, component, from, context) {
         }
     });
 }
-function createChainByJSXNode(type, jsxNode, nodeType, prevAtom, isSvg, key) {
+function createChainByJSXNode(type, jsxNode, nodeType, prevAtom, namespace, key) {
     const atom = {
         type,
         index: prevAtom.index + 1,
@@ -1583,88 +1428,88 @@ function createChainByJSXNode(type, jsxNode, nodeType, prevAtom, isSvg, key) {
         sibling: null,
         child: null,
         nativeNode: null,
-        isSvg,
+        namespace,
         nodeType,
         key
     };
     prevAtom.sibling = atom;
     return atom;
 }
-function createChainByNode(jsxNode, prevAtom, isSvg) {
+function createChainByNode(jsxNode, prevAtom, elementNamespace) {
     const type = typeof jsxNode;
     if (jsxNode !== null && type !== 'undefined' && type !== 'boolean') {
         if (typeof jsxNode === 'string') {
-            return createChainByJSXNode(TextAtomType, jsxNode, jsxNode, prevAtom, isSvg);
+            return createChainByJSXNode(TextAtomType, jsxNode, jsxNode, prevAtom, elementNamespace);
         }
         if (Array.isArray(jsxNode)) {
-            return createChainByChildren(jsxNode, prevAtom, isSvg);
+            return createChainByChildren(jsxNode, prevAtom, elementNamespace);
         }
         if (type === 'object') {
             const nodeType = typeof jsxNode.type;
             if (nodeType === 'string') {
-                return createChainByJSXNode(ElementAtomType, jsxNode, jsxNode.type, prevAtom, isSvg || jsxNode.type === 'svg', jsxNode.key);
+                return createChainByJSXNode(ElementAtomType, jsxNode, jsxNode.type, prevAtom, elementNamespace || ElementNamespaceMap[jsxNode.type], jsxNode.key);
             }
             else if (nodeType === 'function') {
-                return createChainByJSXNode(ComponentAtomType, jsxNode, jsxNode.type, prevAtom, isSvg, jsxNode.key);
+                return createChainByJSXNode(ComponentAtomType, jsxNode, jsxNode.type, prevAtom, ElementNamespaceMap[jsxNode.type], jsxNode.key);
             }
         }
         const text = String(jsxNode);
-        return createChainByJSXNode(TextAtomType, text, text, prevAtom, isSvg);
+        return createChainByJSXNode(TextAtomType, text, text, prevAtom, ElementNamespaceMap[jsxNode.type]);
     }
     return prevAtom;
 }
-function createChainByChildren(children, prevAtom, isSvg) {
+function createChainByChildren(children, prevAtom, elementNamespace) {
     for (const item of children) {
-        prevAtom = createChainByNode(item, prevAtom, isSvg);
+        prevAtom = createChainByNode(item, prevAtom, elementNamespace);
     }
     return prevAtom;
 }
-function createChildChain(template, isSvg) {
+function createChildChain(template, namespace) {
     const beforeAtom = { sibling: null, index: -1 };
-    createChainByNode(template, beforeAtom, isSvg);
+    createChainByNode(template, beforeAtom, namespace);
     return beforeAtom.sibling;
 }
 function insertNode(nativeRenderer, atom, context) {
     if (context.isParent) {
         if (context.host === context.rootHost) {
-            nativeRenderer.appendChild(context.host, atom.nativeNode, atom.isSvg);
+            nativeRenderer.appendChild(context.host, atom.nativeNode, atom.namespace);
         }
         else {
-            nativeRenderer.prependChild(context.host, atom.nativeNode, atom.isSvg);
+            nativeRenderer.prependChild(context.host, atom.nativeNode, atom.namespace);
         }
     }
     else {
-        nativeRenderer.insertAfter(atom.nativeNode, context.host, atom.isSvg);
+        nativeRenderer.insertAfter(atom.nativeNode, context.host, atom.namespace);
     }
 }
 function createElement(nativeRenderer, atom, parentComponent, context) {
-    const { isSvg, jsxNode } = atom;
-    const nativeNode = nativeRenderer.createElement(jsxNode.type, isSvg);
+    const { namespace, jsxNode } = atom;
+    const nativeNode = nativeRenderer.createElement(jsxNode.type, namespace);
     const props = jsxNode.props;
     let bindingRefs;
     for (const key in props) {
         if (key === 'children') {
-            atom.child = createChildChain(jsxNode.props.children, isSvg);
+            atom.child = createChildChain(jsxNode.props.children, namespace);
             continue;
         }
         if (key === 'class') {
             const className = classToString(props[key]);
             if (className) {
-                nativeRenderer.setClass(nativeNode, className, isSvg);
+                nativeRenderer.setClass(nativeNode, className, namespace);
             }
             continue;
         }
         if (key === 'style') {
             const style = styleToObject(props.style);
             for (const key in style) {
-                nativeRenderer.setStyle(nativeNode, key, style[key], isSvg);
+                nativeRenderer.setStyle(nativeNode, key, style[key], namespace);
             }
             continue;
         }
         if (listenerReg.test(key)) {
             const listener = props[key];
             if (typeof listener === 'function') {
-                nativeRenderer.listen(nativeNode, key, listener, isSvg);
+                nativeRenderer.listen(nativeNode, key, listener, namespace);
             }
             continue;
         }
@@ -1672,7 +1517,7 @@ function createElement(nativeRenderer, atom, parentComponent, context) {
             bindingRefs = props[key];
             continue;
         }
-        nativeRenderer.setProperty(nativeNode, key, props[key], isSvg);
+        nativeRenderer.setProperty(nativeNode, key, props[key], namespace);
     }
     atom.nativeNode = nativeNode;
     insertNode(nativeRenderer, atom, context);
@@ -1686,7 +1531,7 @@ function createElement(nativeRenderer, atom, parentComponent, context) {
     applyRefs(bindingRefs, nativeNode, true);
 }
 function createTextNode(nativeRenderer, atom, context) {
-    const nativeNode = nativeRenderer.createTextNode(atom.jsxNode, atom.isSvg);
+    const nativeNode = nativeRenderer.createTextNode(atom.jsxNode, atom.namespace);
     atom.nativeNode = nativeNode;
     insertNode(nativeRenderer, atom, context);
     context.host = nativeNode;
@@ -1694,7 +1539,7 @@ function createTextNode(nativeRenderer, atom, context) {
 }
 function updateNativeNodeProperties(nativeRenderer, newAtom, oldAtom, parentComponent, context) {
     const newVNode = newAtom.jsxNode;
-    const isSvg = newAtom.isSvg;
+    const isSvg = newAtom.namespace;
     const nativeNode = newAtom.nativeNode;
     const oldVNode = oldAtom.jsxNode;
     if (newVNode === oldVNode) {
@@ -1741,6 +1586,9 @@ function updateNativeNodeProperties(nativeRenderer, newAtom, oldAtom, parentComp
             if (!newAtom.child) {
                 cleanElementChildren(oldAtom, nativeRenderer);
             }
+            else if (!oldAtom.child) {
+                buildElementChildren(newAtom, nativeRenderer, parentComponent, context);
+            }
             else {
                 diff(nativeRenderer, parentComponent, newAtom.child, oldAtom.child, context, false);
             }
@@ -1841,6 +1689,133 @@ class RootComponent extends Component {
     }
 }
 
+/**
+ * 组件状态管理器
+ * @param state 初始状态
+ * @example
+ * ```tsx
+ * function App() {
+ *   // 初始化状态
+ *   const state = createSignal(1)
+ *
+ *   return () => {
+ *     <div>
+ *       <div>当前值为：{state()}</div>
+ *       <div>
+ *         <button type="button" onClick={() => {
+ *           // 当点击时更新状态
+ *           state.set(state() + 1)
+ *         }
+ *         }>updateState</button>
+ *       </div>
+ *     </div>
+ *   }
+ * }
+ */
+function createSignal(state) {
+    const subscribers = new Set();
+    function signal() {
+        const listener = getCurrentListener();
+        if (listener) {
+            listener.destroyCallbacks.push(() => {
+                subscribers.delete(listener);
+            });
+            subscribers.add(listener);
+        }
+        return state;
+    }
+    signal.set = function (newValue) {
+        if (newValue === state) {
+            return;
+        }
+        state = newValue;
+        const listeners = Array.from(subscribers);
+        listeners.forEach(listener => listener.effect());
+    };
+    return signal;
+}
+/**
+ * 使用派生值，Viewfly 会收集回调函数内同步执行时访问的 Signal，
+ * 并在你获取 createDerived 函数返回的 Signal 的值时，自动计算最新的值。
+ *
+ * @param fn
+ * @param isContinue 可选的停止函数，在每次值更新后调用，当返回值为 false 时，将不再监听依赖的变化
+ */
+function computed(fn, isContinue) {
+    let isStop = false;
+    function canListen(value) {
+        if (isContinue) {
+            const b = isContinue(value);
+            if (b === false) {
+                listener.destroy();
+                return false;
+            }
+        }
+        return true;
+    }
+    const listener = new Listener(() => {
+        if (isStop) {
+            return;
+        }
+        isStop = true;
+        listener.destroy();
+        pushListener(listener);
+        const value = fn();
+        popListener();
+        signal.set(value);
+        canListen(value);
+        isStop = false;
+    });
+    pushListener(listener);
+    const value = fn();
+    const signal = createSignal(value);
+    popListener();
+    isStop = false;
+    if (canListen(value)) {
+        registryComponentDestroyCallback(() => listener.destroy());
+    }
+    return signal;
+}
+const createDerived = computed;
+/* eslint-enable max-len*/
+function watch(deps, callback) {
+    let prevFn;
+    const isArray = Array.isArray(deps);
+    const effect = new Listener(function () {
+        if (prevFn) {
+            prevFn();
+        }
+        const newValue = isArray ? deps.map(fn => fn()) : deps();
+        prevFn = callback(newValue, oldValue);
+        oldValue = newValue;
+    });
+    pushListener(effect);
+    let oldValue = isArray ? deps.map(fn => fn()) : deps();
+    popListener();
+    let isUnWatch = false;
+    function unWatch() {
+        if (isUnWatch) {
+            return;
+        }
+        isUnWatch = true;
+        if (prevFn) {
+            prevFn();
+        }
+        effect.destroy();
+    }
+    registryComponentDestroyCallback(unWatch);
+    return unWatch;
+}
+function registryComponentDestroyCallback(fn) {
+    const component = getSetupContext(false);
+    if (component) {
+        if (!component.unmountedCallbacks) {
+            component.unmountedCallbacks = [];
+        }
+        component.unmountedCallbacks.push(fn);
+    }
+}
+
 const viewflyErrorFn = makeError('Viewfly');
 function viewfly(config) {
     const { context, nativeRenderer, autoUpdate, root } = Object.assign({ autoUpdate: true }, config);
@@ -1864,7 +1839,7 @@ function viewfly(config) {
             render(appHost);
         });
     });
-    const render = createRenderer(rootComponent, nativeRenderer);
+    const render = createRenderer(rootComponent, nativeRenderer, config.elementNamespace);
     let isStarted = false;
     let task = null;
     function nextTick(callback) {
@@ -1928,4 +1903,4 @@ function viewfly(config) {
     return app;
 }
 
-export { Component, Context, DynamicRef, ForwardRef, Fragment, Inject, InjectFlags, Injectable, InjectionToken, Injector, JSXNodeFactory, NativeRenderer, NullInjector, Optional, Prop, ReflectiveInjector, RootComponent, Scope, Self, SkipSelf, StaticRef, THROW_IF_NOT_FOUND, Type, createDerived, createDynamicRef, createRef, createRenderer, createSignal, forwardRef, getCurrentInstance, inject, jsx, jsxs, makeError, normalizeProvider, onMounted, onPropsChanged, onUnmounted, onUpdated, viewfly, watch, withAnnotation, withMemo };
+export { Component, Context, DynamicRef, ElementNamespaceMap, ForwardRef, Fragment, Inject, InjectFlags, Injectable, InjectionToken, Injector, JSXNodeFactory, NativeRenderer, NullInjector, Optional, Prop, ReflectiveInjector, RootComponent, Scope, Self, SkipSelf, StaticRef, THROW_IF_NOT_FOUND, Type, computed, createDerived, createDynamicRef, createRef, createRenderer, createSignal, forwardRef, getCurrentInstance, getSetupContext, inject, jsx, jsxs, makeError, normalizeProvider, onMounted, onPropsChanged, onUnmounted, onUpdated, viewfly, watch, withAnnotation, withMemo };