@viewfly/core 0.0.1-alpha.3 → 0.0.1-alpha.5

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();
         }
@@ -482,8 +502,12 @@ const depsKey = Symbol('deps');
  */
 function useSignal(state) {
     const usedComponents = new Set();
-    function stateManager() {
+    function signal() {
         const component = getRendingContext();
+        const derivedContext = getDerivedContext();
+        if (derivedContext) {
+            derivedContext.push(signal);
+        }
         if (component && !usedComponents.has(component)) {
             usedComponents.add(component);
             component.destroyCallbacks.push(() => {
@@ -492,7 +516,7 @@ function useSignal(state) {
         }
         return state;
     }
-    stateManager.set = function (newState) {
+    signal.set = function (newState) {
         if (newState === state) {
             return;
         }
@@ -500,28 +524,54 @@ function useSignal(state) {
         for (const component of usedComponents) {
             component.markAsDirtied();
         }
-        for (const fn of stateManager[depsKey]) {
+        for (const fn of signal[depsKey]) {
             fn();
         }
     };
-    stateManager[depsKey] = new Set();
-    return stateManager;
+    signal[depsKey] = new Set();
+    return signal;
 }
 /**
- * 监听状态变化，当任意一个状态发生变更时，触发回调。
- * useEffect 会返回一个取消监听的函数，调用此函数，可以取消监听。
- * 当在组件中调用时，组件销毁时会自动取消监听。
- * @param deps 依赖的状态 Signal，可以是一个 Signal，只可以一个数包含 Signal 的数组
- * @param effect 状态变更后的回调函数
+ * 使用派生值，Viewfly 会收集回调函数内同步执行时访问的 Signal，
+ * 并在你获取 useDerived 函数返回的 Signal 的值时，自动计算最新的值。
+ *
+ * @param callback
+ * @param isContinue 可选的停止函数，在每次值更新后调用，当返回值为 false 时，将不再监听依赖的变化
  */
+function useDerived(callback, isContinue) {
+    const deps = [];
+    derivedStack.push(deps);
+    const data = callback();
+    derivedStack.pop();
+    const signal = useSignal(data);
+    if (deps.length) {
+        const unListen = useEffect(deps, () => {
+            const data = callback();
+            signal.set(data);
+            if (typeof isContinue === 'function' && !isContinue(data)) {
+                unListen();
+            }
+        });
+    }
+    return signal;
+}
+/* eslint-enable max-len*/
 function useEffect(deps, effect) {
+    if (typeof deps === 'function' &&
+        typeof deps.set === 'undefined' &&
+        typeof deps[depsKey] === 'undefined') {
+        deps = useDerived(deps);
+    }
     const signals = Array.isArray(deps) ? deps : [deps];
+    let oldValues = signals.map(s => s());
     let prevCleanup;
     function effectCallback() {
         if (typeof prevCleanup === 'function') {
             prevCleanup();
         }
-        prevCleanup = effect();
+        const newValues = signals.map(s => s());
+        prevCleanup = Array.isArray(deps) ? effect(newValues, oldValues) : effect(newValues[0], oldValues[0]);
+        oldValues = newValues;
     }
     for (const dep of signals) {
         dep[depsKey].add(effectCallback);
@@ -567,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() {
@@ -756,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) {
@@ -1178,7 +1259,7 @@ class Viewfly extends ReflectiveInjector {
     /**
      * 启动 Viewfly
      */
-    start() {
+    run() {
         const renderer = this.get(Renderer);
         renderer.render();
         if (this.config.autoUpdate === false) {
@@ -1203,8 +1284,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, 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();
         }
@@ -483,8 +503,12 @@ const depsKey = Symbol('deps');
  */
 function useSignal(state) {
     const usedComponents = new Set();
-    function stateManager() {
+    function signal() {
         const component = getRendingContext();
+        const derivedContext = getDerivedContext();
+        if (derivedContext) {
+            derivedContext.push(signal);
+        }
         if (component && !usedComponents.has(component)) {
             usedComponents.add(component);
             component.destroyCallbacks.push(() => {
@@ -493,7 +517,7 @@ function useSignal(state) {
         }
         return state;
     }
-    stateManager.set = function (newState) {
+    signal.set = function (newState) {
         if (newState === state) {
             return;
         }
@@ -501,28 +525,54 @@ function useSignal(state) {
         for (const component of usedComponents) {
             component.markAsDirtied();
         }
-        for (const fn of stateManager[depsKey]) {
+        for (const fn of signal[depsKey]) {
             fn();
         }
     };
-    stateManager[depsKey] = new Set();
-    return stateManager;
+    signal[depsKey] = new Set();
+    return signal;
 }
 /**
- * 监听状态变化，当任意一个状态发生变更时，触发回调。
- * useEffect 会返回一个取消监听的函数，调用此函数，可以取消监听。
- * 当在组件中调用时，组件销毁时会自动取消监听。
- * @param deps 依赖的状态 Signal，可以是一个 Signal，只可以一个数包含 Signal 的数组
- * @param effect 状态变更后的回调函数
+ * 使用派生值，Viewfly 会收集回调函数内同步执行时访问的 Signal，
+ * 并在你获取 useDerived 函数返回的 Signal 的值时，自动计算最新的值。
+ *
+ * @param callback
+ * @param isContinue 可选的停止函数，在每次值更新后调用，当返回值为 false 时，将不再监听依赖的变化
  */
+function useDerived(callback, isContinue) {
+    const deps = [];
+    derivedStack.push(deps);
+    const data = callback();
+    derivedStack.pop();
+    const signal = useSignal(data);
+    if (deps.length) {
+        const unListen = useEffect(deps, () => {
+            const data = callback();
+            signal.set(data);
+            if (typeof isContinue === 'function' && !isContinue(data)) {
+                unListen();
+            }
+        });
+    }
+    return signal;
+}
+/* eslint-enable max-len*/
 function useEffect(deps, effect) {
+    if (typeof deps === 'function' &&
+        typeof deps.set === 'undefined' &&
+        typeof deps[depsKey] === 'undefined') {
+        deps = useDerived(deps);
+    }
     const signals = Array.isArray(deps) ? deps : [deps];
+    let oldValues = signals.map(s => s());
     let prevCleanup;
     function effectCallback() {
         if (typeof prevCleanup === 'function') {
             prevCleanup();
         }
-        prevCleanup = effect();
+        const newValues = signals.map(s => s());
+        prevCleanup = Array.isArray(deps) ? effect(newValues, oldValues) : effect(newValues[0], oldValues[0]);
+        oldValues = newValues;
     }
     for (const dep of signals) {
         dep[depsKey].add(effectCallback);
@@ -568,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() {
@@ -757,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) {
@@ -1179,7 +1260,7 @@ class Viewfly extends di.ReflectiveInjector {
     /**
      * 启动 Viewfly
      */
-    start() {
+    run() {
         const renderer = this.get(exports.Renderer);
         renderer.render();
         if (this.config.autoUpdate === false) {
@@ -1204,7 +1285,7 @@ class Viewfly extends di.ReflectiveInjector {
             return () => {
                 return this.destroyed ? null : rootNode;
             };
-        });
+        }, this.config.context);
     }
 }
 
@@ -1222,11 +1303,13 @@ exports.Viewfly = Viewfly;
 exports.inject = inject;
 exports.jsx = jsx;
 exports.jsxs = jsxs;
+exports.makeError = makeError;
 exports.onDestroy = onDestroy;
 exports.onMount = onMount;
 exports.onPropsChanged = onPropsChanged;
 exports.onUpdated = onUpdated;
 exports.provide = provide;
+exports.useDerived = useDerived;
 exports.useEffect = useEffect;
 exports.useRef = useRef;
 exports.useSignal = useSignal;

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;
@@ -175,14 +175,35 @@ export interface Signal<T> {
  * }
  */
 export declare function useSignal<T>(state: T): Signal<T>;
+/**
+ * 使用派生值，Viewfly 会收集回调函数内同步执行时访问的 Signal，
+ * 并在你获取 useDerived 函数返回的 Signal 的值时，自动计算最新的值。
+ *
+ * @param callback
+ * @param isContinue 可选的停止函数，在每次值更新后调用，当返回值为 false 时，将不再监听依赖的变化
+ */
+export declare function useDerived<T>(callback: () => T, isContinue?: (data: T) => unknown): Signal<T>;
+export interface EffectCallback<T, U> {
+    (newValue: T, oldValue: U): void | (() => void);
+}
 /**
  * 监听状态变化，当任意一个状态发生变更时，触发回调。
  * useEffect 会返回一个取消监听的函数，调用此函数，可以取消监听。
  * 当在组件中调用时，组件销毁时会自动取消监听。
- * @param deps 依赖的状态 Signal，可以是一个 Signal，只可以一个数包含 Signal 的数组
+ * @param deps 依赖的状态 Signal，可以是一个 Signal，只可以一个数包含 Signal 的数组，或者是一个求值函数
  * @param effect 状态变更后的回调函数
  */
-export declare function useEffect(deps: Signal<any> | Signal<any>[], effect: LifeCycleCallback): () => void;
+export declare function useEffect<T>(deps: Signal<T>, effect: EffectCallback<T, T>): () => void;
+export declare function useEffect<T>(deps: [Signal<T>], effect: EffectCallback<[T], [T]>): () => void;
+export declare function useEffect<T, T1>(deps: [Signal<T>, Signal<T1>], effect: EffectCallback<[T, T1], [T, T1]>): () => void;
+export declare function useEffect<T, T1, T2>(deps: [Signal<T>, Signal<T1>, Signal<T2>], effect: EffectCallback<[T, T1, T2], [T, T1, T2]>): () => void;
+export declare function useEffect<T, T1, T2, T3>(deps: [Signal<T>, Signal<T1>, Signal<T2>, Signal<T3>], effect: EffectCallback<[T, T1, T2, T3], [T, T1, T2, T3]>): () => void;
+export declare function useEffect<T, T1, T2, T3, T4>(deps: [Signal<T>, Signal<T1>, Signal<T2>, Signal<T3>, Signal<T4>], effect: EffectCallback<[T, T1, T2, T3, T4], [T, T1, T2, T3, T4]>): () => void;
+export declare function useEffect<T, T1, T2, T3, T4, T5>(deps: [Signal<T>, Signal<T1>, Signal<T2>, Signal<T3>, Signal<T4>, Signal<T5>], effect: EffectCallback<[T, T1, T2, T3, T4, T5], [T, T1, T2, T3, T4, T5]>): () => void;
+export declare function useEffect<T, T1, T2, T3, T4, T5, T6>(deps: [Signal<T>, Signal<T1>, Signal<T2>, Signal<T3>, Signal<T4>, Signal<T5>, Signal<T6>], effect: EffectCallback<[T, T1, T2, T3, T4, T5, T6], [T, T1, T2, T3, T4, T5, T6]>): () => void;
+export declare function useEffect<T, T1, T2, T3, T4, T5, T6, T7>(deps: [Signal<T>, Signal<T1>, Signal<T2>, Signal<T3>, Signal<T4>, Signal<T5>, Signal<T6>, Signal<T7>], effect: EffectCallback<[T, T1, T2, T3, T4, T5, T6, T7], [T, T1, T2, T3, T4, T5, T6, T7]>): () => void;
+export declare function useEffect<T>(deps: () => T, effect: EffectCallback<T, T>): () => void;
+export declare function useEffect<T = any>(deps: Signal<any>[], effect: EffectCallback<T[], T[]>): () => void;
 /**
  * 通过 IoC 容器当前组件提供上下文共享数据的方法
  * @param provider

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.3",
+  "version": "0.0.1-alpha.5",
   "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": "e0795c315c3b3e1df2e3d2d9f823843b91838ff6"
+  "gitHead": "135aeda546b83c7947e888dfe40860858123b6fc"
 }