@viewfly/core 0.0.1-alpha.4 → 0.0.1-alpha.6

package/bundles/foundation/renderer.d.ts

@@ -12,6 +12,7 @@ export declare class Renderer {
     render(): void;
     refresh(): void;
     private reconcile;
+    private getPrevSibling;
     private reconcileElement;
     private applyChanges;
     private diff;

package/bundles/index.esm.js

@@ -3,6 +3,15 @@ import { ReflectiveInjector, normalizeProvider, NullInjector, Injectable } from
 export * from '@tanbo/di';
 import { Subject, Subscription, microTask } from '@tanbo/stream';
 
+function makeError(name) {
+    return function viewflyError(message) {
+        const error = new Error(message);
+        error.name = `[ViewflyError: ${name}]`;
+        error.stack = error.stack.replace(/\n.*?(?=\n)/, '');
+        return error;
+    };
+}
+
 class NativeRenderer {
 }
 
@@ -34,15 +43,6 @@ function __metadata(metadataKey, metadataValue) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(metadataKey, metadataValue);
 }
 
-function makeError(name) {
-    return function viewflyError(message) {
-        const error = new Error(message);
-        error.name = `[ViewflyError: ${name}]`;
-        error.stack = error.stack.replace(/\n.*?(?=\n)/, '');
-        return error;
-    };
-}
-
 const jsxErrorFn = makeError('JSX');
 const Fragment = function Fragment() {
     throw jsxErrorFn('Fragment does not support calling.');
@@ -180,10 +180,13 @@ class JSXElement {
 
 const componentSetupStack = [];
 const componentRendingStack = [];
+const derivedStack = [];
 const componentErrorFn = makeError('component');
 function getSetupContext(need = true) {
     const current = componentSetupStack[componentSetupStack.length - 1];
     if (!current && need) {
+        // 防止因外部捕获异常引引起的缓存未清理的问题
+        componentRendingStack.pop();
         throw componentErrorFn('cannot be called outside the component!');
     }
     return current;
@@ -191,6 +194,9 @@ function getSetupContext(need = true) {
 function getRendingContext() {
     return componentRendingStack[componentRendingStack.length - 1];
 }
+function getDerivedContext() {
+    return derivedStack[derivedStack.length - 1];
+}
 class JSXComponent {
     constructor(createInstance) {
         this.createInstance = createInstance;
@@ -237,20 +243,33 @@ class Component extends ReflectiveInjector {
                 }
             },
             set() {
+                // 防止因外部捕获异常引引起的缓存未清理的问题
+                if (isSetup) {
+                    componentSetupStack.pop();
+                }
+                if (isRending) {
+                    componentRendingStack.pop();
+                }
                 throw componentErrorFn('component props is readonly!');
             }
         });
         componentSetupStack.push(this);
+        let isSetup = true;
         const render = this.setup(props);
+        isSetup = false;
         componentSetupStack.pop();
         componentRendingStack.push(this);
+        let isRending = true;
         const template = render();
+        isRending = false;
         componentRendingStack.pop();
         return {
             template,
             render: () => {
                 componentRendingStack.push(this);
+                isRending = true;
                 const template = render();
+                isRending = false;
                 componentRendingStack.pop();
                 return template;
             }
@@ -408,7 +427,7 @@ function onDestroy(callback) {
 class Ref {
     constructor(callback) {
         this.callback = callback;
-        this.unBindMap = new WeakMap;
+        this.unBindMap = new WeakMap();
         this.targetCaches = new Set();
     }
     bind(value) {
@@ -418,15 +437,16 @@ class Ref {
         if (this.targetCaches.has(value)) {
             return;
         }
-        this.targetCaches.add(value);
         const unBindFn = this.callback(value);
         if (typeof unBindFn === 'function') {
             this.unBindMap.set(value, unBindFn);
         }
+        this.targetCaches.add(value);
     }
     unBind(value) {
         this.targetCaches.delete(value);
         const unBindFn = this.unBindMap.get(value);
+        this.unBindMap.delete(value);
         if (typeof unBindFn === 'function') {
             unBindFn();
         }
@@ -511,10 +531,6 @@ function useSignal(state) {
     signal[depsKey] = new Set();
     return signal;
 }
-const derivedStack = [];
-function getDerivedContext() {
-    return derivedStack[derivedStack.length - 1];
-}
 /**
  * 使用派生值，Viewfly 会收集回调函数内同步执行时访问的 Signal，
  * 并在你获取 useDerived 函数返回的 Signal 的值时，自动计算最新的值。
@@ -601,8 +617,8 @@ function inject(token, notFoundValue, flags) {
  * Viewfly 根组件，用于实现组件状态更新事件通知
  */
 class RootComponent extends Component {
-    constructor(factory) {
-        super(new NullInjector(), factory, null);
+    constructor(factory, parentInjector = new NullInjector()) {
+        super(parentInjector, factory, null);
         this.changeEmitter = new Subject();
     }
     markAsChanged() {
@@ -790,6 +806,37 @@ let Renderer = class Renderer {
             const atom = this.componentAtomCaches.get(component).atom.child;
             this.reconcileElement(atom, context);
         }
+        else {
+            const prevSibling = this.getPrevSibling(component);
+            if (prevSibling) {
+                context.isParent = false;
+                context.host = prevSibling;
+            }
+        }
+    }
+    getPrevSibling(component) {
+        let atom = this.componentAtomCaches.get(component).atom.child;
+        const childAtoms = [];
+        while (atom) {
+            childAtoms.push(atom);
+            atom = atom.sibling;
+        }
+        const components = [];
+        while (childAtoms.length) {
+            const last = childAtoms.pop();
+            if (last.jsxNode instanceof Component) {
+                components.push(last.jsxNode);
+                continue;
+            }
+            return last.nativeNode;
+        }
+        for (const component of components) {
+            const nativeNode = this.getPrevSibling(component);
+            if (nativeNode) {
+                return nativeNode;
+            }
+        }
+        return null;
     }
     reconcileElement(atom, context) {
         while (atom) {
@@ -851,7 +898,11 @@ let Renderer = class Renderer {
                     this.diff(start.child, reusedAtom.child, childContext);
                 }
                 else if (reusedAtom.child) {
-                    this.cleanView(reusedAtom.child, false);
+                    let atom = reusedAtom.child;
+                    while (atom) {
+                        this.cleanView(atom, false);
+                        atom = atom.sibling;
+                    }
                 }
                 if (isComponent) {
                     start.jsxNode.rendered();
@@ -1212,7 +1263,7 @@ class Viewfly extends ReflectiveInjector {
     /**
      * 启动 Viewfly
      */
-    start() {
+    run() {
         const renderer = this.get(Renderer);
         renderer.render();
         if (this.config.autoUpdate === false) {
@@ -1237,8 +1288,8 @@ class Viewfly extends ReflectiveInjector {
             return () => {
                 return this.destroyed ? null : rootNode;
             };
-        });
+        }, this.config.context);
     }
 }
 
-export { Component, Fragment, JSXComponent, JSXElement, JSXText, NativeRenderer, Props, Ref, Renderer, RootComponent, RootComponentRef, Viewfly, inject, jsx, jsxs, onDestroy, onMount, onPropsChanged, onUpdated, provide, useDerived, useEffect, useRef, useSignal };
+export { Component, Fragment, JSXComponent, JSXElement, JSXText, NativeRenderer, Props, Ref, Renderer, RootComponent, RootComponentRef, Viewfly, inject, jsx, jsxs, makeError, onDestroy, onMount, onPropsChanged, onUpdated, provide, useDerived, useEffect, useRef, useSignal };

package/bundles/index.js

@@ -4,6 +4,15 @@ require('reflect-metadata');
 var di = require('@tanbo/di');
 var stream = require('@tanbo/stream');
 
+function makeError(name) {
+    return function viewflyError(message) {
+        const error = new Error(message);
+        error.name = `[ViewflyError: ${name}]`;
+        error.stack = error.stack.replace(/\n.*?(?=\n)/, '');
+        return error;
+    };
+}
+
 class NativeRenderer {
 }
 
@@ -35,15 +44,6 @@ function __metadata(metadataKey, metadataValue) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(metadataKey, metadataValue);
 }
 
-function makeError(name) {
-    return function viewflyError(message) {
-        const error = new Error(message);
-        error.name = `[ViewflyError: ${name}]`;
-        error.stack = error.stack.replace(/\n.*?(?=\n)/, '');
-        return error;
-    };
-}
-
 const jsxErrorFn = makeError('JSX');
 const Fragment = function Fragment() {
     throw jsxErrorFn('Fragment does not support calling.');
@@ -181,10 +181,13 @@ class JSXElement {
 
 const componentSetupStack = [];
 const componentRendingStack = [];
+const derivedStack = [];
 const componentErrorFn = makeError('component');
 function getSetupContext(need = true) {
     const current = componentSetupStack[componentSetupStack.length - 1];
     if (!current && need) {
+        // 防止因外部捕获异常引引起的缓存未清理的问题
+        componentRendingStack.pop();
         throw componentErrorFn('cannot be called outside the component!');
     }
     return current;
@@ -192,6 +195,9 @@ function getSetupContext(need = true) {
 function getRendingContext() {
     return componentRendingStack[componentRendingStack.length - 1];
 }
+function getDerivedContext() {
+    return derivedStack[derivedStack.length - 1];
+}
 class JSXComponent {
     constructor(createInstance) {
         this.createInstance = createInstance;
@@ -238,20 +244,33 @@ class Component extends di.ReflectiveInjector {
                 }
             },
             set() {
+                // 防止因外部捕获异常引引起的缓存未清理的问题
+                if (isSetup) {
+                    componentSetupStack.pop();
+                }
+                if (isRending) {
+                    componentRendingStack.pop();
+                }
                 throw componentErrorFn('component props is readonly!');
             }
         });
         componentSetupStack.push(this);
+        let isSetup = true;
         const render = this.setup(props);
+        isSetup = false;
         componentSetupStack.pop();
         componentRendingStack.push(this);
+        let isRending = true;
         const template = render();
+        isRending = false;
         componentRendingStack.pop();
         return {
             template,
             render: () => {
                 componentRendingStack.push(this);
+                isRending = true;
                 const template = render();
+                isRending = false;
                 componentRendingStack.pop();
                 return template;
             }
@@ -409,7 +428,7 @@ function onDestroy(callback) {
 class Ref {
     constructor(callback) {
         this.callback = callback;
-        this.unBindMap = new WeakMap;
+        this.unBindMap = new WeakMap();
         this.targetCaches = new Set();
     }
     bind(value) {
@@ -419,15 +438,16 @@ class Ref {
         if (this.targetCaches.has(value)) {
             return;
         }
-        this.targetCaches.add(value);
         const unBindFn = this.callback(value);
         if (typeof unBindFn === 'function') {
             this.unBindMap.set(value, unBindFn);
         }
+        this.targetCaches.add(value);
     }
     unBind(value) {
         this.targetCaches.delete(value);
         const unBindFn = this.unBindMap.get(value);
+        this.unBindMap.delete(value);
         if (typeof unBindFn === 'function') {
             unBindFn();
         }
@@ -512,10 +532,6 @@ function useSignal(state) {
     signal[depsKey] = new Set();
     return signal;
 }
-const derivedStack = [];
-function getDerivedContext() {
-    return derivedStack[derivedStack.length - 1];
-}
 /**
  * 使用派生值，Viewfly 会收集回调函数内同步执行时访问的 Signal，
  * 并在你获取 useDerived 函数返回的 Signal 的值时，自动计算最新的值。
@@ -602,8 +618,8 @@ function inject(token, notFoundValue, flags) {
  * Viewfly 根组件，用于实现组件状态更新事件通知
  */
 class RootComponent extends Component {
-    constructor(factory) {
-        super(new di.NullInjector(), factory, null);
+    constructor(factory, parentInjector = new di.NullInjector()) {
+        super(parentInjector, factory, null);
         this.changeEmitter = new stream.Subject();
     }
     markAsChanged() {
@@ -791,6 +807,37 @@ exports.Renderer = class Renderer {
             const atom = this.componentAtomCaches.get(component).atom.child;
             this.reconcileElement(atom, context);
         }
+        else {
+            const prevSibling = this.getPrevSibling(component);
+            if (prevSibling) {
+                context.isParent = false;
+                context.host = prevSibling;
+            }
+        }
+    }
+    getPrevSibling(component) {
+        let atom = this.componentAtomCaches.get(component).atom.child;
+        const childAtoms = [];
+        while (atom) {
+            childAtoms.push(atom);
+            atom = atom.sibling;
+        }
+        const components = [];
+        while (childAtoms.length) {
+            const last = childAtoms.pop();
+            if (last.jsxNode instanceof Component) {
+                components.push(last.jsxNode);
+                continue;
+            }
+            return last.nativeNode;
+        }
+        for (const component of components) {
+            const nativeNode = this.getPrevSibling(component);
+            if (nativeNode) {
+                return nativeNode;
+            }
+        }
+        return null;
     }
     reconcileElement(atom, context) {
         while (atom) {
@@ -852,7 +899,11 @@ exports.Renderer = class Renderer {
                     this.diff(start.child, reusedAtom.child, childContext);
                 }
                 else if (reusedAtom.child) {
-                    this.cleanView(reusedAtom.child, false);
+                    let atom = reusedAtom.child;
+                    while (atom) {
+                        this.cleanView(atom, false);
+                        atom = atom.sibling;
+                    }
                 }
                 if (isComponent) {
                     start.jsxNode.rendered();
@@ -1213,7 +1264,7 @@ class Viewfly extends di.ReflectiveInjector {
     /**
      * 启动 Viewfly
      */
-    start() {
+    run() {
         const renderer = this.get(exports.Renderer);
         renderer.render();
         if (this.config.autoUpdate === false) {
@@ -1238,7 +1289,7 @@ class Viewfly extends di.ReflectiveInjector {
             return () => {
                 return this.destroyed ? null : rootNode;
             };
-        });
+        }, this.config.context);
     }
 }
 
@@ -1256,6 +1307,7 @@ exports.Viewfly = Viewfly;
 exports.inject = inject;
 exports.jsx = jsx;
 exports.jsxs = jsxs;
+exports.makeError = makeError;
 exports.onDestroy = onDestroy;
 exports.onMount = onMount;
 exports.onPropsChanged = onPropsChanged;

package/bundles/model/component.d.ts

@@ -5,15 +5,15 @@ export declare class JSXComponent {
     constructor(createInstance: (injector: Component) => Component);
 }
 export type JSXTemplate = JSXElement | JSXComponent | null | void;
-export interface ComponentSetup {
-    (props?: JSXProps<any>): () => JSXTemplate;
+export interface ComponentSetup<T extends JSXProps<any> = JSXProps<any>> {
+    (props?: T): () => JSXTemplate;
 }
 /**
  * Viewfly 组件管理类，用于管理组件的生命周期，上下文等
  */
 export declare class Component extends ReflectiveInjector {
     setup: ComponentSetup;
-    config: JSXProps<any> | null;
+    config?: JSXProps<any> | null | undefined;
     destroyCallbacks: LifeCycleCallback[];
     mountCallbacks: LifeCycleCallback[];
     propsChangedCallbacks: PropsChangedCallback<any>[];
@@ -27,7 +27,7 @@ export declare class Component extends ReflectiveInjector {
     private updatedDestroyCallbacks;
     private propsChangedDestroyCallbacks;
     private isFirstRending;
-    constructor(context: Injector, setup: ComponentSetup, config: JSXProps<any> | null);
+    constructor(context: Injector, setup: ComponentSetup, config?: JSXProps<any> | null | undefined);
     addProvide<T>(providers: Provider<T> | Provider<T>[]): void;
     init(): {
         template: JSXTemplate;
@@ -36,7 +36,7 @@ export declare class Component extends ReflectiveInjector {
     markAsDirtied(): void;
     markAsChanged(): void;
     rendered(): void;
-    invokePropsChangedHooks(newProps: JSXProps<any> | null): void;
+    invokePropsChangedHooks(newProps?: JSXProps<any> | null): void;
     destroy(): void;
     private invokeMountHooks;
     private invokeUpdatedHooks;

package/bundles/model/jsx-element.d.ts

@@ -6,10 +6,10 @@ export interface JSXProps<T = JSXChildNode | JSXChildNode[]> {
     [key: symbol]: any;
 }
 export declare const Fragment: () => never;
-export declare function jsx<T extends JSXChildNode>(name: string, config: JSXProps<T> | null): JSXElement;
-export declare function jsx<T extends JSXChildNode>(setup: ComponentSetup, config: JSXProps<T> | null): JSXComponent;
-export declare function jsxs<T extends JSXChildNode[]>(name: string, config: JSXProps<T> | null): JSXElement;
-export declare function jsxs<T extends JSXChildNode[]>(setup: ComponentSetup, config: JSXProps<T> | null): JSXComponent;
+export declare function jsx<T extends JSXChildNode>(name: string, config?: JSXProps<T> | null): JSXElement;
+export declare function jsx<T extends JSXChildNode>(setup: ComponentSetup, config?: JSXProps<T> | null): JSXComponent;
+export declare function jsxs<T extends JSXChildNode[]>(name: string, config?: JSXProps<T> | null): JSXElement;
+export declare function jsxs<T extends JSXChildNode[]>(setup: ComponentSetup, config?: JSXProps<T> | null): JSXComponent;
 export interface VElementListeners {
     [listenKey: string]: <T extends Event>(ev: T) => any;
 }
@@ -24,12 +24,12 @@ export declare class Props {
     classes: Set<string>;
     listeners: VElementListeners;
     children: VNode[];
-    constructor(props: JSXProps<JSXChildNode> | JSXProps<JSXChildNode[]> | null);
+    constructor(props?: JSXProps<JSXChildNode> | JSXProps<JSXChildNode[]> | null);
     static classToArray(config: unknown): string[];
 }
 export declare class JSXElement {
     name: string;
-    config: JSXProps<any> | null;
+    config?: JSXProps<any> | null | undefined;
     props: Props;
-    constructor(name: string, config: JSXProps<any> | null);
+    constructor(name: string, config?: JSXProps<any> | null | undefined);
 }

package/bundles/model/root.component.d.ts

@@ -1,10 +1,11 @@
 import { Subject } from '@tanbo/stream';
+import { NullInjector } from '@tanbo/di';
 import { Component, ComponentSetup } from './component';
 /**
  * Viewfly 根组件，用于实现组件状态更新事件通知
  */
 export declare class RootComponent extends Component {
     changeEmitter: Subject<void>;
-    constructor(factory: ComponentSetup);
+    constructor(factory: ComponentSetup, parentInjector?: NullInjector);
     markAsChanged(): void;
 }

package/bundles/public-api.d.ts

@@ -1,5 +1,6 @@
 import 'reflect-metadata';
 export * from '@tanbo/di';
+export * from './_utils/make-error';
 export * from './foundation/_api';
 export * from './model/_api';
 export * from './viewfly';

package/bundles/viewfly.d.ts

@@ -1,4 +1,4 @@
-import { Provider, ReflectiveInjector } from '@tanbo/di';
+import { Injector, Provider, ReflectiveInjector } from '@tanbo/di';
 import { NativeNode } from './foundation/_api';
 import { JSXComponent, JSXElement } from './model/_api';
 export type RootNode = JSXElement | JSXComponent;
@@ -14,6 +14,8 @@ export interface Config {
     autoUpdate?: boolean;
     /** 根节点 */
     root: RootNode;
+    /** 根组件的上下文 */
+    context?: Injector;
 }
 /**
  * Viewfly 核心类，用于启动一个 Viewfly 应用
@@ -27,7 +29,7 @@ export declare class Viewfly extends ReflectiveInjector {
     /**
      * 启动 Viewfly
      */
-    start(): void;
+    run(): void;
     /**
      * 销毁 Viewfly 实例
      */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viewfly/core",
-  "version": "0.0.1-alpha.4",
+  "version": "0.0.1-alpha.6",
   "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",
@@ -37,5 +37,5 @@
   "bugs": {
     "url": "https://github.com/viewfly/viewfly.git/issues"
   },
-  "gitHead": "68a7c531c0040fc0b1b7addb87a8df3c5981600e"
+  "gitHead": "aedb326658afa6a712aebe3f22fe5209ae18a9f9"
 }