@viewfly/core 0.5.0 → 0.5.3

package/bundles/foundation/_api.d.ts

@@ -5,3 +5,4 @@ export * from './memo';
 export * from './renderer';
 export * from './root.component';
 export * from './types';
+export { Atom, ComponentView } from './_utils';

package/bundles/foundation/_utils.d.ts

@@ -31,4 +31,5 @@ export interface ComponentView {
     atom: Atom;
     host: NativeNode;
     isParent: boolean;
+    rootHost: NativeNode;
 }

package/bundles/foundation/component.d.ts

@@ -31,7 +31,10 @@ export declare class Component extends ReflectiveInjector implements JSXTypeof<J
     constructor(parentComponent: Injector | null, type: JSXInternal.ComponentSetup, props: Props, key?: Key | undefined);
     markAsDirtied(): void;
     markAsChanged(changedComponent?: Component): void;
-    render(): any;
+    render(): {
+        template: any;
+        portalHost: import("./injection-tokens").NativeNode | undefined;
+    };
     update(newProps: Props, forceUpdate?: boolean): any;
     provide<T>(providers: Provider<T> | Provider<T>[]): void;
     rendered(): void;

package/bundles/foundation/injection-tokens.d.ts

@@ -3,6 +3,7 @@ export declare abstract class NativeRenderer<ElementNode = NativeNode, TextNode
     abstract createElement(name: string, isSvg: boolean): ElementNode;
     abstract createTextNode(textContent: string, isSvg: boolean): TextNode;
     abstract setProperty(node: ElementNode, key: string, value: any, isSvg: boolean): void;
+    abstract appendChild(parent: ElementNode, newChild: ElementNode | TextNode, isSvg: boolean): void;
     abstract prependChild(parent: ElementNode, newChild: ElementNode | TextNode, isSvg: boolean): void;
     abstract removeProperty(node: ElementNode, key: string, isSvg: boolean): void;
     abstract setStyle(target: ElementNode, key: string, value: any, isSvg: boolean): void;

package/bundles/foundation/types.d.ts

@@ -1,10 +1,12 @@
 import { Key } from './jsx-element';
 import { ExtractInstanceType, DynamicRef } from './component';
 import { Scope } from '../di/injectable';
+import { NativeNode } from './injection-tokens';
 export type JSXNode = JSXInternal.JSXNode;
 export declare namespace JSXInternal {
     type ClassNames = string | Record<string, unknown> | false | null | undefined | ClassNames[];
     interface ComponentInstance<P> {
+        $portalHost?: NativeNode;
         $render(): JSXNode;
         $useMemo?(currentProps: P, prevProps: P): boolean;
     }

package/bundles/index.esm.js

@@ -732,7 +732,10 @@ class Component extends ReflectiveInjector {
             this.markAsDirtied();
         });
         this.template = template;
-        return template;
+        return {
+            template: template,
+            portalHost: this.instance.$portalHost
+        };
     }
     update(newProps, forceUpdate = false) {
         const oldProps = this.props;
@@ -1258,7 +1261,8 @@ function createRenderer(component, nativeRenderer) {
             };
             componentRender(nativeRenderer, component, atom, {
                 isParent: true,
-                host
+                host,
+                rootHost: host
             });
         }
         else {
@@ -1285,7 +1289,12 @@ function buildView(nativeRenderer, parentComponent, atom, context) {
         }
         atom.nativeNode = nativeNode;
         if (context.isParent) {
-            nativeRenderer.prependChild(context.host, nativeNode, atom.isSvg);
+            if (context.host === context.rootHost) {
+                nativeRenderer.appendChild(context.host, nativeNode, atom.isSvg);
+            }
+            else {
+                nativeRenderer.prependChild(context.host, nativeNode, atom.isSvg);
+            }
         }
         else {
             nativeRenderer.insertAfter(nativeNode, context.host, atom.isSvg);
@@ -1293,7 +1302,8 @@ function buildView(nativeRenderer, parentComponent, atom, context) {
         if (atom.jsxNode instanceof JSXElement) {
             const childContext = {
                 isParent: true,
-                host: nativeNode
+                host: nativeNode,
+                rootHost: context.rootHost
             };
             let child = atom.child;
             while (child) {
@@ -1321,7 +1331,7 @@ function updateView(nativeRenderer, component) {
     }
 }
 function applyChanges(nativeRenderer, component) {
-    const { atom, host, isParent } = component.$$view;
+    const { atom, host, isParent, rootHost } = component.$$view;
     const diffAtom = atom.child;
     const template = component.update(component.props, true);
     if (template) {
@@ -1332,7 +1342,8 @@ function applyChanges(nativeRenderer, component) {
     }
     const context = {
         host,
-        isParent
+        isParent,
+        rootHost
     };
     diff(nativeRenderer, component, atom.child, diffAtom, context, 0, 0);
     const next = atom.sibling;
@@ -1464,7 +1475,12 @@ function updateElement(newAtom, oldAtom, expectIndex, oldIndex, nativeRenderer,
         const host = context.host;
         if (expectIndex - offset !== oldIndex) {
             if (context.isParent) {
-                nativeRenderer.prependChild(host, newAtom.nativeNode, newAtom.isSvg);
+                if (host === context.rootHost) {
+                    nativeRenderer.appendChild(host, newAtom.nativeNode, newAtom.isSvg);
+                }
+                else {
+                    nativeRenderer.prependChild(host, newAtom.nativeNode, newAtom.isSvg);
+                }
             }
             else {
                 nativeRenderer.insertAfter(newAtom.nativeNode, host, newAtom.isSvg);
@@ -1476,7 +1492,8 @@ function updateElement(newAtom, oldAtom, expectIndex, oldIndex, nativeRenderer,
         if (newAtom.child) {
             diff(nativeRenderer, parentComponent, newAtom.child, oldAtom.child, {
                 host: newAtom.nativeNode,
-                isParent: true
+                isParent: true,
+                rootHost: context.rootHost
             }, 0, 0);
         }
         else if (oldAtom.child) {
@@ -1491,22 +1508,24 @@ function updateElement(newAtom, oldAtom, expectIndex, oldIndex, nativeRenderer,
 }
 function updateComponent(newAtom, reusedAtom, expectIndex, oldIndex, nativeRenderer, context) {
     return function (offset) {
-        const instance = reusedAtom.jsxNode;
+        const component = reusedAtom.jsxNode;
         const newProps = newAtom.jsxNode.props;
-        const oldTemplate = instance.template;
-        const newTemplate = instance.update(newProps);
-        instance.$$view = Object.assign({ atom: newAtom }, context);
-        newAtom.jsxNode = instance;
+        const oldTemplate = component.template;
+        const newTemplate = component.update(newProps);
+        const portalHost = component.instance.$portalHost;
+        context = portalHost ? { isParent: true, host: portalHost, rootHost: portalHost } : context;
+        component.$$view = Object.assign({ atom: newAtom }, context);
+        newAtom.jsxNode = component;
         if (newTemplate === oldTemplate) {
             reuseComponentView(nativeRenderer, newAtom, reusedAtom, context, expectIndex - offset !== oldIndex);
-            updateView(nativeRenderer, instance);
+            updateView(nativeRenderer, component);
             return;
         }
         if (newTemplate) {
             linkTemplate(newTemplate, newAtom.jsxNode, newAtom);
         }
         if (newAtom.child) {
-            diff(nativeRenderer, instance, newAtom.child, reusedAtom.child, context, expectIndex, oldIndex);
+            diff(nativeRenderer, component, newAtom.child, reusedAtom.child, context, expectIndex, oldIndex);
         }
         else if (reusedAtom.child) {
             let atom = reusedAtom.child;
@@ -1515,7 +1534,7 @@ function updateComponent(newAtom, reusedAtom, expectIndex, oldIndex, nativeRende
                 atom = atom.sibling;
             }
         }
-        instance.rendered();
+        component.rendered();
     };
 }
 function reuseComponentView(nativeRenderer, newAtom, reusedAtom, context, moveView) {
@@ -1538,7 +1557,12 @@ function reuseComponentView(nativeRenderer, newAtom, reusedAtom, context, moveVi
         else {
             if (moveView) {
                 if (context.isParent) {
-                    nativeRenderer.prependChild(context.host, atom.nativeNode, atom.isSvg);
+                    if (context.host === context.rootHost) {
+                        nativeRenderer.appendChild(context.host, atom.nativeNode, atom.isSvg);
+                    }
+                    else {
+                        nativeRenderer.prependChild(context.host, atom.nativeNode, atom.isSvg);
+                    }
                 }
                 else {
                     nativeRenderer.insertAfter(atom.nativeNode, context.host, atom.isSvg);
@@ -1573,10 +1597,11 @@ function cleanView(nativeRenderer, atom, isClean) {
     }
 }
 function componentRender(nativeRenderer, component, from, context) {
-    const template = component.render();
+    const { template, portalHost } = component.render();
     if (template) {
         linkTemplate(template, component, from);
     }
+    context = portalHost ? { isParent: true, host: portalHost, rootHost: portalHost } : context;
     component.$$view = Object.assign({ atom: from }, context);
     let child = from.child;
     while (child) {
@@ -1838,7 +1863,10 @@ class RootComponent extends Component {
 const viewflyErrorFn = makeError('Viewfly');
 function viewfly(config) {
     const { context, nativeRenderer, autoUpdate, root } = Object.assign({ autoUpdate: true }, config);
-    const appProviders = [];
+    const appProviders = [{
+            provide: NativeRenderer,
+            useValue: nativeRenderer
+        }];
     const modules = [];
     let destroyed = false;
     let appHost = null;

package/bundles/index.js

@@ -734,7 +734,10 @@ class Component extends ReflectiveInjector {
             this.markAsDirtied();
         });
         this.template = template;
-        return template;
+        return {
+            template: template,
+            portalHost: this.instance.$portalHost
+        };
     }
     update(newProps, forceUpdate = false) {
         const oldProps = this.props;
@@ -1260,7 +1263,8 @@ function createRenderer(component, nativeRenderer) {
             };
             componentRender(nativeRenderer, component, atom, {
                 isParent: true,
-                host
+                host,
+                rootHost: host
             });
         }
         else {
@@ -1287,7 +1291,12 @@ function buildView(nativeRenderer, parentComponent, atom, context) {
         }
         atom.nativeNode = nativeNode;
         if (context.isParent) {
-            nativeRenderer.prependChild(context.host, nativeNode, atom.isSvg);
+            if (context.host === context.rootHost) {
+                nativeRenderer.appendChild(context.host, nativeNode, atom.isSvg);
+            }
+            else {
+                nativeRenderer.prependChild(context.host, nativeNode, atom.isSvg);
+            }
         }
         else {
             nativeRenderer.insertAfter(nativeNode, context.host, atom.isSvg);
@@ -1295,7 +1304,8 @@ function buildView(nativeRenderer, parentComponent, atom, context) {
         if (atom.jsxNode instanceof JSXElement) {
             const childContext = {
                 isParent: true,
-                host: nativeNode
+                host: nativeNode,
+                rootHost: context.rootHost
             };
             let child = atom.child;
             while (child) {
@@ -1323,7 +1333,7 @@ function updateView(nativeRenderer, component) {
     }
 }
 function applyChanges(nativeRenderer, component) {
-    const { atom, host, isParent } = component.$$view;
+    const { atom, host, isParent, rootHost } = component.$$view;
     const diffAtom = atom.child;
     const template = component.update(component.props, true);
     if (template) {
@@ -1334,7 +1344,8 @@ function applyChanges(nativeRenderer, component) {
     }
     const context = {
         host,
-        isParent
+        isParent,
+        rootHost
     };
     diff(nativeRenderer, component, atom.child, diffAtom, context, 0, 0);
     const next = atom.sibling;
@@ -1466,7 +1477,12 @@ function updateElement(newAtom, oldAtom, expectIndex, oldIndex, nativeRenderer,
         const host = context.host;
         if (expectIndex - offset !== oldIndex) {
             if (context.isParent) {
-                nativeRenderer.prependChild(host, newAtom.nativeNode, newAtom.isSvg);
+                if (host === context.rootHost) {
+                    nativeRenderer.appendChild(host, newAtom.nativeNode, newAtom.isSvg);
+                }
+                else {
+                    nativeRenderer.prependChild(host, newAtom.nativeNode, newAtom.isSvg);
+                }
             }
             else {
                 nativeRenderer.insertAfter(newAtom.nativeNode, host, newAtom.isSvg);
@@ -1478,7 +1494,8 @@ function updateElement(newAtom, oldAtom, expectIndex, oldIndex, nativeRenderer,
         if (newAtom.child) {
             diff(nativeRenderer, parentComponent, newAtom.child, oldAtom.child, {
                 host: newAtom.nativeNode,
-                isParent: true
+                isParent: true,
+                rootHost: context.rootHost
             }, 0, 0);
         }
         else if (oldAtom.child) {
@@ -1493,22 +1510,24 @@ function updateElement(newAtom, oldAtom, expectIndex, oldIndex, nativeRenderer,
 }
 function updateComponent(newAtom, reusedAtom, expectIndex, oldIndex, nativeRenderer, context) {
     return function (offset) {
-        const instance = reusedAtom.jsxNode;
+        const component = reusedAtom.jsxNode;
         const newProps = newAtom.jsxNode.props;
-        const oldTemplate = instance.template;
-        const newTemplate = instance.update(newProps);
-        instance.$$view = Object.assign({ atom: newAtom }, context);
-        newAtom.jsxNode = instance;
+        const oldTemplate = component.template;
+        const newTemplate = component.update(newProps);
+        const portalHost = component.instance.$portalHost;
+        context = portalHost ? { isParent: true, host: portalHost, rootHost: portalHost } : context;
+        component.$$view = Object.assign({ atom: newAtom }, context);
+        newAtom.jsxNode = component;
         if (newTemplate === oldTemplate) {
             reuseComponentView(nativeRenderer, newAtom, reusedAtom, context, expectIndex - offset !== oldIndex);
-            updateView(nativeRenderer, instance);
+            updateView(nativeRenderer, component);
             return;
         }
         if (newTemplate) {
             linkTemplate(newTemplate, newAtom.jsxNode, newAtom);
         }
         if (newAtom.child) {
-            diff(nativeRenderer, instance, newAtom.child, reusedAtom.child, context, expectIndex, oldIndex);
+            diff(nativeRenderer, component, newAtom.child, reusedAtom.child, context, expectIndex, oldIndex);
         }
         else if (reusedAtom.child) {
             let atom = reusedAtom.child;
@@ -1517,7 +1536,7 @@ function updateComponent(newAtom, reusedAtom, expectIndex, oldIndex, nativeRende
                 atom = atom.sibling;
             }
         }
-        instance.rendered();
+        component.rendered();
     };
 }
 function reuseComponentView(nativeRenderer, newAtom, reusedAtom, context, moveView) {
@@ -1540,7 +1559,12 @@ function reuseComponentView(nativeRenderer, newAtom, reusedAtom, context, moveVi
         else {
             if (moveView) {
                 if (context.isParent) {
-                    nativeRenderer.prependChild(context.host, atom.nativeNode, atom.isSvg);
+                    if (context.host === context.rootHost) {
+                        nativeRenderer.appendChild(context.host, atom.nativeNode, atom.isSvg);
+                    }
+                    else {
+                        nativeRenderer.prependChild(context.host, atom.nativeNode, atom.isSvg);
+                    }
                 }
                 else {
                     nativeRenderer.insertAfter(atom.nativeNode, context.host, atom.isSvg);
@@ -1575,10 +1599,11 @@ function cleanView(nativeRenderer, atom, isClean) {
     }
 }
 function componentRender(nativeRenderer, component, from, context) {
-    const template = component.render();
+    const { template, portalHost } = component.render();
     if (template) {
         linkTemplate(template, component, from);
     }
+    context = portalHost ? { isParent: true, host: portalHost, rootHost: portalHost } : context;
     component.$$view = Object.assign({ atom: from }, context);
     let child = from.child;
     while (child) {
@@ -1840,7 +1865,10 @@ class RootComponent extends Component {
 const viewflyErrorFn = makeError('Viewfly');
 function viewfly(config) {
     const { context, nativeRenderer, autoUpdate, root } = Object.assign({ autoUpdate: true }, config);
-    const appProviders = [];
+    const appProviders = [{
+            provide: NativeRenderer,
+            useValue: nativeRenderer
+        }];
     const modules = [];
     let destroyed = false;
     let appHost = null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viewfly/core",
-  "version": "0.5.0",
+  "version": "0.5.3",
   "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",
@@ -47,7 +47,7 @@
   "bugs": {
     "url": "https://github.com/viewfly/viewfly.git/issues"
   },
-  "gitHead": "75a746eb22f41295157d079e8557154d5fa50e01",
+  "gitHead": "7dadc17107c6fc4b8db6e620e9b95141db09e042",
   "dependencies": {
     "reflect-metadata": "^0.1.13"
   }