@viewfly/core 0.0.17 → 0.0.19

package/bundles/foundation/renderer.d.ts

@@ -2,15 +2,18 @@ import { RootComponent } from '../model/_api';
 import { NativeNode, NativeRenderer } from './injection-tokens';
 export declare abstract class RootComponentRef {
     abstract component: RootComponent;
+}
+export declare abstract class HostRef {
     abstract host: NativeNode;
 }
 export declare class Renderer {
     private nativeRenderer;
     private rootComponentRef;
+    private hostRef;
     private componentAtomCaches;
-    constructor(nativeRenderer: NativeRenderer, rootComponentRef: RootComponentRef);
+    private isInit;
+    constructor(nativeRenderer: NativeRenderer, rootComponentRef: RootComponentRef, hostRef: HostRef);
     render(): void;
-    refresh(): void;
     private reconcile;
     private getPrevSibling;
     private reconcileElement;

package/bundles/index.esm.js

@@ -1,5 +1,5 @@
 import 'reflect-metadata';
-import { ReflectiveInjector, normalizeProvider, NullInjector, Injectable } from '@tanbo/di';
+import { ReflectiveInjector, Injector, normalizeProvider, InjectFlags, Injectable, NullInjector } from '@tanbo/di';
 export * from '@tanbo/di';
 import { Subject, Subscription, microTask } from '@tanbo/stream';
 
@@ -152,7 +152,10 @@ class Component extends ReflectiveInjector {
         return this._changed;
     }
     constructor(context, type, props, key) {
-        super(context, []);
+        super(context, [{
+                provide: Injector,
+                useFactory: () => this
+            }]);
         this.type = type;
         this.props = props;
         this.key = key;
@@ -171,11 +174,11 @@ class Component extends ReflectiveInjector {
     is(target) {
         return target.$$typeOf === this.$$typeOf;
     }
-    addProvide(providers) {
+    provide(providers) {
         providers = Array.isArray(providers) ? providers : [providers];
         this.normalizedProviders.unshift(...providers.map(i => normalizeProvider(i)));
     }
-    init() {
+    setup() {
         const self = this;
         const props = new Proxy(this.props, {
             get(_, key) {
@@ -603,7 +606,7 @@ function useEffect(deps, effect) {
  */
 function provide(provider) {
     const component = getSetupContext();
-    component.addProvide(provider);
+    component.provide(provider);
     return component;
 }
 /**
@@ -611,7 +614,7 @@ function provide(provider) {
  */
 function inject(token, notFoundValue, flags) {
     const component = getSetupContext();
-    return component.parentInjector.get(token, notFoundValue, flags);
+    return component.get(token, notFoundValue, flags || InjectFlags.SkipSelf);
 }
 
 function Fragment(props) {
@@ -660,7 +663,7 @@ function withMemo(shouldUpdate, render) {
  * Viewfly 根组件，用于实现组件状态更新事件通知
  */
 class RootComponent extends Component {
-    constructor(factory, parentInjector = new NullInjector()) {
+    constructor(factory, parentInjector) {
         super(parentInjector, factory, {});
         this.changeEmitter = new Subject();
     }
@@ -672,6 +675,8 @@ class RootComponent extends Component {
 
 class RootComponentRef {
 }
+class HostRef {
+}
 class Atom {
     constructor(jsxNode, parent) {
         this.jsxNode = jsxNode;
@@ -682,25 +687,30 @@ class Atom {
     }
 }
 let Renderer = class Renderer {
-    constructor(nativeRenderer, rootComponentRef) {
+    constructor(nativeRenderer, rootComponentRef, hostRef) {
         this.nativeRenderer = nativeRenderer;
         this.rootComponentRef = rootComponentRef;
+        this.hostRef = hostRef;
         this.componentAtomCaches = new WeakMap();
+        this.isInit = true;
     }
     render() {
-        const { component, host } = this.rootComponentRef;
-        const atom = new Atom(component, null);
-        this.buildView(atom, {
-            isParent: true,
-            host
-        });
-    }
-    refresh() {
-        const { component, host } = this.rootComponentRef;
-        this.reconcile(component, {
-            host,
-            isParent: true
-        });
+        const component = this.rootComponentRef.component;
+        const host = this.hostRef.host;
+        if (this.isInit) {
+            const atom = new Atom(component, null);
+            this.buildView(atom, {
+                isParent: true,
+                host
+            });
+        }
+        else {
+            this.reconcile(component, {
+                host,
+                isParent: true
+            });
+        }
+        this.isInit = false;
     }
     reconcile(component, context) {
         if (component.dirty) {
@@ -788,19 +798,18 @@ let Renderer = class Renderer {
         const changeCommits = {
             updateComponent: (newAtom, reusedAtom, expectIndex, diffIndex) => {
                 commits.push((offset) => {
+                    const { render, template } = this.componentAtomCaches.get(reusedAtom.jsxNode);
                     const newProps = newAtom.jsxNode.props;
                     const oldProps = reusedAtom.jsxNode.props;
                     newAtom.jsxNode = reusedAtom.jsxNode;
-                    const { render, template } = this.componentAtomCaches.get(newAtom.jsxNode);
                     const newTemplate = render(newProps, oldProps);
                     this.componentAtomCaches.set(newAtom.jsxNode, {
                         render,
-                        template,
+                        template: newTemplate,
                         atom: newAtom
                     });
                     if (newTemplate === template) {
                         this.reuseComponentView(newAtom, reusedAtom, context, expectIndex !== diffIndex - offset);
-                        // (newAtom.jsxNode as Component).rendered()
                         return;
                     }
                     if (newTemplate) {
@@ -1019,7 +1028,7 @@ let Renderer = class Renderer {
         }
     }
     componentRender(component, from) {
-        const { template, render } = component.init();
+        const { template, render } = component.setup();
         if (template) {
             this.linkTemplate(template, component, from);
         }
@@ -1256,7 +1265,8 @@ let Renderer = class Renderer {
 Renderer = __decorate([
     Injectable(),
     __metadata("design:paramtypes", [NativeRenderer,
-        RootComponentRef])
+        RootComponentRef,
+        HostRef])
 ], Renderer);
 
 const viewflyErrorFn = makeError('Viewfly');
@@ -1265,8 +1275,7 @@ const viewflyErrorFn = makeError('Viewfly');
  */
 class Viewfly extends ReflectiveInjector {
     constructor(config) {
-        super(new NullInjector(), [
-            ...(config.providers || []),
+        super(config.context || new NullInjector(), [
             Renderer,
             {
                 provide: RootComponentRef,
@@ -1281,6 +1290,12 @@ class Viewfly extends ReflectiveInjector {
                 useFactory() {
                     throw viewflyErrorFn('You must implement the `NativeRenderer` interface to start Viewfly!');
                 }
+            },
+            {
+                provide: HostRef,
+                useFactory() {
+                    throw viewflyErrorFn('Viewfly has not mounted!');
+                }
             }
         ]);
         this.config = config;
@@ -1288,39 +1303,52 @@ class Viewfly extends ReflectiveInjector {
         this.subscription = new Subscription();
         this.rootComponent = this.createRootComponent(config.root);
     }
+    provide(providers) {
+        providers = Array.isArray(providers) ? providers : [providers];
+        this.normalizedProviders.unshift(...providers.map(i => normalizeProvider(i)));
+        return this;
+    }
     /**
      * 启动 Viewfly
      * @param host 应用根节点
      */
     mount(host) {
-        const rootComponentRef = this.get(RootComponentRef);
-        rootComponentRef.host = host;
+        this.provide({
+            provide: HostRef,
+            useValue: {
+                host
+            }
+        });
         const renderer = this.get(Renderer);
         renderer.render();
         if (this.config.autoUpdate === false) {
-            return;
+            return this;
         }
         this.subscription.add(this.rootComponent.changeEmitter.pipe(microTask()).subscribe(() => {
-            renderer.refresh();
+            renderer.render();
         }));
+        return this;
+    }
+    render() {
+        const renderer = this.get(Renderer);
+        renderer.render();
     }
     /**
      * 销毁 Viewfly 实例
      */
     destroy() {
-        const renderer = this.get(Renderer);
         this.destroyed = true;
         this.rootComponent.markAsDirtied();
         this.subscription.unsubscribe();
-        renderer.refresh();
+        this.render();
     }
     createRootComponent(rootNode) {
         return new RootComponent(() => {
             return () => {
                 return this.destroyed ? null : rootNode;
             };
-        }, this.config.context);
+        }, this);
     }
 }
 
-export { Component, Fragment, JSXComponent, JSXElement, JSXText, NativeRenderer, Ref, Renderer, RootComponent, RootComponentRef, Viewfly, inject, jsx, jsxs, makeError, onDestroy, onMounted, onPropsChanged, onUpdated, provide, useDerived, useEffect, useRef, useSignal, withMemo };
+export { Component, Fragment, HostRef, JSXComponent, JSXElement, JSXText, NativeRenderer, Ref, Renderer, RootComponent, RootComponentRef, Viewfly, inject, jsx, jsxs, makeError, onDestroy, onMounted, onPropsChanged, onUpdated, provide, useDerived, useEffect, useRef, useSignal, withMemo };

package/bundles/index.js

@@ -153,7 +153,10 @@ class Component extends di.ReflectiveInjector {
         return this._changed;
     }
     constructor(context, type, props, key) {
-        super(context, []);
+        super(context, [{
+                provide: di.Injector,
+                useFactory: () => this
+            }]);
         this.type = type;
         this.props = props;
         this.key = key;
@@ -172,11 +175,11 @@ class Component extends di.ReflectiveInjector {
     is(target) {
         return target.$$typeOf === this.$$typeOf;
     }
-    addProvide(providers) {
+    provide(providers) {
         providers = Array.isArray(providers) ? providers : [providers];
         this.normalizedProviders.unshift(...providers.map(i => di.normalizeProvider(i)));
     }
-    init() {
+    setup() {
         const self = this;
         const props = new Proxy(this.props, {
             get(_, key) {
@@ -604,7 +607,7 @@ function useEffect(deps, effect) {
  */
 function provide(provider) {
     const component = getSetupContext();
-    component.addProvide(provider);
+    component.provide(provider);
     return component;
 }
 /**
@@ -612,7 +615,7 @@ function provide(provider) {
  */
 function inject(token, notFoundValue, flags) {
     const component = getSetupContext();
-    return component.parentInjector.get(token, notFoundValue, flags);
+    return component.get(token, notFoundValue, flags || di.InjectFlags.SkipSelf);
 }
 
 function Fragment(props) {
@@ -661,7 +664,7 @@ function withMemo(shouldUpdate, render) {
  * Viewfly 根组件，用于实现组件状态更新事件通知
  */
 class RootComponent extends Component {
-    constructor(factory, parentInjector = new di.NullInjector()) {
+    constructor(factory, parentInjector) {
         super(parentInjector, factory, {});
         this.changeEmitter = new stream.Subject();
     }
@@ -673,6 +676,8 @@ class RootComponent extends Component {
 
 class RootComponentRef {
 }
+class HostRef {
+}
 class Atom {
     constructor(jsxNode, parent) {
         this.jsxNode = jsxNode;
@@ -683,25 +688,30 @@ class Atom {
     }
 }
 exports.Renderer = class Renderer {
-    constructor(nativeRenderer, rootComponentRef) {
+    constructor(nativeRenderer, rootComponentRef, hostRef) {
         this.nativeRenderer = nativeRenderer;
         this.rootComponentRef = rootComponentRef;
+        this.hostRef = hostRef;
         this.componentAtomCaches = new WeakMap();
+        this.isInit = true;
     }
     render() {
-        const { component, host } = this.rootComponentRef;
-        const atom = new Atom(component, null);
-        this.buildView(atom, {
-            isParent: true,
-            host
-        });
-    }
-    refresh() {
-        const { component, host } = this.rootComponentRef;
-        this.reconcile(component, {
-            host,
-            isParent: true
-        });
+        const component = this.rootComponentRef.component;
+        const host = this.hostRef.host;
+        if (this.isInit) {
+            const atom = new Atom(component, null);
+            this.buildView(atom, {
+                isParent: true,
+                host
+            });
+        }
+        else {
+            this.reconcile(component, {
+                host,
+                isParent: true
+            });
+        }
+        this.isInit = false;
     }
     reconcile(component, context) {
         if (component.dirty) {
@@ -789,19 +799,18 @@ exports.Renderer = class Renderer {
         const changeCommits = {
             updateComponent: (newAtom, reusedAtom, expectIndex, diffIndex) => {
                 commits.push((offset) => {
+                    const { render, template } = this.componentAtomCaches.get(reusedAtom.jsxNode);
                     const newProps = newAtom.jsxNode.props;
                     const oldProps = reusedAtom.jsxNode.props;
                     newAtom.jsxNode = reusedAtom.jsxNode;
-                    const { render, template } = this.componentAtomCaches.get(newAtom.jsxNode);
                     const newTemplate = render(newProps, oldProps);
                     this.componentAtomCaches.set(newAtom.jsxNode, {
                         render,
-                        template,
+                        template: newTemplate,
                         atom: newAtom
                     });
                     if (newTemplate === template) {
                         this.reuseComponentView(newAtom, reusedAtom, context, expectIndex !== diffIndex - offset);
-                        // (newAtom.jsxNode as Component).rendered()
                         return;
                     }
                     if (newTemplate) {
@@ -1020,7 +1029,7 @@ exports.Renderer = class Renderer {
         }
     }
     componentRender(component, from) {
-        const { template, render } = component.init();
+        const { template, render } = component.setup();
         if (template) {
             this.linkTemplate(template, component, from);
         }
@@ -1257,7 +1266,8 @@ exports.Renderer = class Renderer {
 exports.Renderer = __decorate([
     di.Injectable(),
     __metadata("design:paramtypes", [NativeRenderer,
-        RootComponentRef])
+        RootComponentRef,
+        HostRef])
 ], exports.Renderer);
 
 const viewflyErrorFn = makeError('Viewfly');
@@ -1266,8 +1276,7 @@ const viewflyErrorFn = makeError('Viewfly');
  */
 class Viewfly extends di.ReflectiveInjector {
     constructor(config) {
-        super(new di.NullInjector(), [
-            ...(config.providers || []),
+        super(config.context || new di.NullInjector(), [
             exports.Renderer,
             {
                 provide: RootComponentRef,
@@ -1282,6 +1291,12 @@ class Viewfly extends di.ReflectiveInjector {
                 useFactory() {
                     throw viewflyErrorFn('You must implement the `NativeRenderer` interface to start Viewfly!');
                 }
+            },
+            {
+                provide: HostRef,
+                useFactory() {
+                    throw viewflyErrorFn('Viewfly has not mounted!');
+                }
             }
         ]);
         this.config = config;
@@ -1289,43 +1304,57 @@ class Viewfly extends di.ReflectiveInjector {
         this.subscription = new stream.Subscription();
         this.rootComponent = this.createRootComponent(config.root);
     }
+    provide(providers) {
+        providers = Array.isArray(providers) ? providers : [providers];
+        this.normalizedProviders.unshift(...providers.map(i => di.normalizeProvider(i)));
+        return this;
+    }
     /**
      * 启动 Viewfly
      * @param host 应用根节点
      */
     mount(host) {
-        const rootComponentRef = this.get(RootComponentRef);
-        rootComponentRef.host = host;
+        this.provide({
+            provide: HostRef,
+            useValue: {
+                host
+            }
+        });
         const renderer = this.get(exports.Renderer);
         renderer.render();
         if (this.config.autoUpdate === false) {
-            return;
+            return this;
         }
         this.subscription.add(this.rootComponent.changeEmitter.pipe(stream.microTask()).subscribe(() => {
-            renderer.refresh();
+            renderer.render();
         }));
+        return this;
+    }
+    render() {
+        const renderer = this.get(exports.Renderer);
+        renderer.render();
     }
     /**
      * 销毁 Viewfly 实例
      */
     destroy() {
-        const renderer = this.get(exports.Renderer);
         this.destroyed = true;
         this.rootComponent.markAsDirtied();
         this.subscription.unsubscribe();
-        renderer.refresh();
+        this.render();
     }
     createRootComponent(rootNode) {
         return new RootComponent(() => {
             return () => {
                 return this.destroyed ? null : rootNode;
             };
-        }, this.config.context);
+        }, this);
     }
 }
 
 exports.Component = Component;
 exports.Fragment = Fragment;
+exports.HostRef = HostRef;
 exports.JSXComponent = JSXComponent;
 exports.JSXElement = JSXElement;
 exports.JSXText = JSXText;

package/bundles/model/component.d.ts

@@ -1,5 +1,5 @@
-import { Provider, ReflectiveInjector, AbstractType, Type, InjectionToken, InjectFlags, Injector } from '@tanbo/di';
-import { Props, Key, JSXTypeof } from './jsx-element';
+import { AbstractType, InjectFlags, InjectionToken, Injector, Provider, ReflectiveInjector, Type } from '@tanbo/di';
+import { JSXTypeof, Key, Props } from './jsx-element';
 import { JSXInternal } from './types';
 export declare class JSXComponent {
     props: Props;
@@ -30,10 +30,10 @@ export declare class Component extends ReflectiveInjector implements JSXTypeof {
     private isFirstRending;
     constructor(context: Injector, type: JSXInternal.ElementClass, props: Props, key?: Key | undefined);
     is(target: JSXTypeof): boolean;
-    addProvide<T>(providers: Provider<T> | Provider<T>[]): void;
-    init(): {
-        template: JSXInternal.JSXChildNode;
-        render: (newProps: Props, oldProps: Props) => JSXInternal.JSXChildNode;
+    provide<T>(providers: Provider<T> | Provider<T>[]): void;
+    setup(): {
+        template: JSXInternal.JSXNode;
+        render: (newProps: Props, oldProps: Props) => JSXInternal.JSXNode;
     };
     markAsDirtied(): void;
     markAsChanged(): void;

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

@@ -1,11 +1,11 @@
 import { JSXComponent } from './component';
 import { JSXInternal } from './types';
 export interface Props {
-    children?: JSXInternal.JSXChildNode | JSXInternal.JSXChildNode[];
+    children?: JSXInternal.JSXNode | JSXInternal.JSXNode[];
     [key: string]: any;
     [key: symbol]: any;
 }
-export declare function Fragment(props: Props): () => JSXInternal.JSXChildNode | JSXInternal.JSXChildNode[];
+export declare function Fragment(props: Props): () => JSXInternal.JSXNode | JSXInternal.JSXNode[];
 export type Key = number | string;
 export declare function jsx(name: string, props: Props, key?: Key): JSXElement;
 export declare function jsx(setup: JSXInternal.ElementClass, props: Props, key?: Key): JSXComponent;

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

@@ -1,5 +1,4 @@
 import { Subject } from '@tanbo/stream';
-import { NullInjector } from '@tanbo/di';
 import { Component } from './component';
 import { JSXInternal } from './types';
 /**
@@ -7,6 +6,6 @@ import { JSXInternal } from './types';
  */
 export declare class RootComponent extends Component {
     changeEmitter: Subject<void>;
-    constructor(factory: JSXInternal.ElementClass, parentInjector?: NullInjector);
+    constructor(factory: JSXInternal.ElementClass, parentInjector: any);
     markAsChanged(): void;
 }

package/bundles/model/types.d.ts

@@ -1,11 +1,12 @@
 import { Key, ExtractInstanceType, Ref } from './_api';
+export type JSXNode = JSXInternal.JSXNode;
 export declare namespace JSXInternal {
     type ClassNames = string | Record<string, unknown> | ClassNames[];
     interface ComponentInstance<P> {
-        $render(): JSXChildNode;
+        $render(): JSXNode;
         $shouldUpdate?(currentProps: P, prevProps: P): boolean;
     }
-    type JSXChildNode = Element | ElementClass | string | number | boolean | null | undefined | JSXChildNode[];
+    type JSXNode = Element | JSXInternal.ElementClass | string | number | boolean | null | undefined | JSXNode[];
     interface Element<P = any, C extends string | ElementClass<P> = string | ElementClass<P>> {
     }
     interface IntrinsicAttributes {
@@ -16,7 +17,7 @@ export declare namespace JSXInternal {
         ref?: Ref<T, ExtractInstanceType<T>> | Ref<T, ExtractInstanceType<T>>[];
     }
     interface ElementClass<P = any> {
-        (props?: P): () => (JSXChildNode | ComponentInstance<P>);
+        (props?: P): () => (JSXNode | ComponentInstance<P>);
     }
     interface ElementChildrenAttribute {
     }

package/bundles/viewfly.d.ts

@@ -5,29 +5,29 @@ import { JSXInternal } from './model/_api';
  * Viewfly 配置项
  */
 export interface Config {
-    /** Viewfly IoC 容器中提供者集合 */
-    providers?: Provider[];
     /** 是否自动更新视图 */
     autoUpdate?: boolean;
     /** 根节点 */
-    root: JSXInternal.JSXChildNode;
-    /** 根组件的上下文 */
+    root: JSXInternal.JSXNode;
+    /** 应用的上下文 */
     context?: Injector;
 }
 /**
  * Viewfly 核心类，用于启动一个 Viewfly 应用
  */
-export declare class Viewfly extends ReflectiveInjector {
+export declare class Viewfly<T extends NativeNode = NativeNode> extends ReflectiveInjector {
     private config;
     private destroyed;
     private rootComponent;
     private subscription;
     constructor(config: Config);
+    provide(providers: Provider | Provider[]): this;
     /**
      * 启动 Viewfly
      * @param host 应用根节点
      */
-    mount(host: NativeNode): void;
+    mount(host: T): this;
+    render(): void;
     /**
      * 销毁 Viewfly 实例
      */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viewfly/core",
-  "version": "0.0.17",
+  "version": "0.0.19",
   "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",
@@ -29,8 +29,8 @@
   "license": "MIT",
   "keywords": [],
   "dependencies": {
-    "@tanbo/di": "^1.1.5",
-    "@tanbo/stream": "^1.2.0",
+    "@tanbo/di": "^1.1.8",
+    "@tanbo/stream": "^1.2.3",
     "reflect-metadata": "^0.1.13"
   },
   "devDependencies": {
@@ -51,5 +51,5 @@
   "bugs": {
     "url": "https://github.com/viewfly/viewfly.git/issues"
   },
-  "gitHead": "7a61edbca87f411d2ddbb390eb0b2e0416d80551"
+  "gitHead": "9276451814bcda728846876797e327d297a31b0e"
 }