@viewfly/platform-browser 0.5.0 → 0.5.1

package/bundles/create-portal.d.ts

@@ -0,0 +1,31 @@
+import { JSXNode, NativeNode } from '@viewfly/core';
+/**
+ * 用于创建脱离当前 DOM 树的子节点，常用于弹窗等
+ * @param childRender
+ * @param host
+ * @example
+ * ```tsx
+ * function App() {
+ *   const number = createSignal(0)
+ *
+ *   setInterval(() => {
+ *     number.set(number() + 1)
+ *   }, 1000)
+ *
+ *   const ModalPortal = function (props) {
+ *     return createPortal(() => {
+ *       return <div class="modal">parent data is {props.text}</div>
+ *     }, document.body)
+ *   }
+ *   return () => {
+ *     return (
+ *       <div>
+ *         <div>data is {number()}</div>
+ *         <ModalPortal text={number()}/>
+ *       </div>
+ *     )
+ *   }
+ * }
+ * ```
+ */
+export declare function createPortal<T extends NativeNode>(childRender: () => JSXNode, host: T): () => null;

package/bundles/dom-renderer.d.ts

@@ -10,6 +10,7 @@ export declare class DomRenderer extends NativeRenderer<HTMLElement, Text> {
     propMap: Record<string, Record<string, string>>;
     createElement(name: string, isSvg: boolean): HTMLElement;
     createTextNode(textContent: string): Text;
+    appendChild(parent: HTMLElement, newChild: any): void;
     prependChild(parent: HTMLElement, newChild: HTMLElement | Text): void;
     insertAfter(newNode: HTMLElement | Text, ref: HTMLElement | Text): void;
     remove(node: HTMLElement | Text): void;
@@ -22,5 +23,4 @@ export declare class DomRenderer extends NativeRenderer<HTMLElement, Text> {
     unListen(node: HTMLElement, type: string, callback: (ev: any) => any): void;
     syncTextContent(target: Text, content: string): void;
     private insertBefore;
-    private appendChild;
 }

package/bundles/html-renderer.d.ts

@@ -20,6 +20,7 @@ export declare class HTMLRenderer extends NativeRenderer<VDOMElement, VDomText>
     createElement(name: string): VDOMElement;
     createTextNode(textContent: string): VDomText;
     setProperty(node: VDOMElement, key: string, value: any): void;
+    appendChild(parent: VDOMElement, newChild: VDOMElement | VDomText): void;
     prependChild(parent: VDOMElement, newChild: VDOMElement | VDomText): void;
     removeProperty(node: VDOMElement, key: string): void;
     setStyle(target: VDOMElement, key: string, value: any): void;

package/bundles/index.esm.js

@@ -1,4 +1,4 @@
-import { NativeRenderer, viewfly, makeError, inject, Injector, THROW_IF_NOT_FOUND, InjectFlags, onUnmounted } from '@viewfly/core';
+import { NativeRenderer, viewfly, getCurrentInstance, inject, Component, onPropsChanged, createRenderer, makeError, Injector, THROW_IF_NOT_FOUND, InjectFlags, onUnmounted } from '@viewfly/core';
 
 class DomRenderer extends NativeRenderer {
     constructor() {
@@ -21,6 +21,9 @@ class DomRenderer extends NativeRenderer {
     createTextNode(textContent) {
         return document.createTextNode(textContent);
     }
+    appendChild(parent, newChild) {
+        parent.appendChild(newChild);
+    }
     prependChild(parent, newChild) {
         parent.prepend(newChild);
     }
@@ -96,9 +99,6 @@ class DomRenderer extends NativeRenderer {
     insertBefore(newNode, ref) {
         ref.parentNode.insertBefore(newNode, ref);
     }
-    appendChild(parent, newChild) {
-        parent.appendChild(newChild);
-    }
 }
 DomRenderer.NAMESPACES = {
     svg: 'http://www.w3.org/2000/svg',
@@ -119,6 +119,49 @@ function createApp(root, config = true) {
     return viewfly(Object.assign(Object.assign({}, c), { root, nativeRenderer: c.nativeRenderer || new DomRenderer() }));
 }
 
+/**
+ * 用于创建脱离当前 DOM 树的子节点，常用于弹窗等
+ * @param childRender
+ * @param host
+ * @example
+ * ```tsx
+ * function App() {
+ *   const number = createSignal(0)
+ *
+ *   setInterval(() => {
+ *     number.set(number() + 1)
+ *   }, 1000)
+ *
+ *   const ModalPortal = function (props) {
+ *     return createPortal(() => {
+ *       return <div class="modal">parent data is {props.text}</div>
+ *     }, document.body)
+ *   }
+ *   return () => {
+ *     return (
+ *       <div>
+ *         <div>data is {number()}</div>
+ *         <ModalPortal text={number()}/>
+ *       </div>
+ *     )
+ *   }
+ * }
+ * ```
+ */
+function createPortal(childRender, host) {
+    const instance = getCurrentInstance();
+    const nativeRenderer = inject(NativeRenderer);
+    const component = new Component(instance, () => childRender, {});
+    onPropsChanged(() => {
+        component.markAsDirtied();
+    });
+    const render = createRenderer(component, nativeRenderer);
+    return function () {
+        render(host);
+        return null;
+    };
+}
+
 const forkErrorFn = makeError('fork');
 function fork(root, config = true) {
     const c = { autoUpdate: true };
@@ -171,6 +214,10 @@ class HTMLRenderer extends NativeRenderer {
     setProperty(node, key, value) {
         node.props.set(key, value);
     }
+    appendChild(parent, newChild) {
+        parent.children.push(newChild);
+        newChild.parent = parent;
+    }
     prependChild(parent, newChild) {
         parent.children.unshift(newChild);
         newChild.parent = parent;
@@ -309,4 +356,4 @@ OutputTranslator.simpleXSSFilter = {
     }
 };
 
-export { DomRenderer, HTMLRenderer, OutputTranslator, VDOMElement, VDomText, createApp, fork };
+export { DomRenderer, HTMLRenderer, OutputTranslator, VDOMElement, VDomText, createApp, createPortal, fork };

package/bundles/index.js

@@ -23,6 +23,9 @@ class DomRenderer extends core.NativeRenderer {
     createTextNode(textContent) {
         return document.createTextNode(textContent);
     }
+    appendChild(parent, newChild) {
+        parent.appendChild(newChild);
+    }
     prependChild(parent, newChild) {
         parent.prepend(newChild);
     }
@@ -98,9 +101,6 @@ class DomRenderer extends core.NativeRenderer {
     insertBefore(newNode, ref) {
         ref.parentNode.insertBefore(newNode, ref);
     }
-    appendChild(parent, newChild) {
-        parent.appendChild(newChild);
-    }
 }
 DomRenderer.NAMESPACES = {
     svg: 'http://www.w3.org/2000/svg',
@@ -121,6 +121,49 @@ function createApp(root, config = true) {
     return core.viewfly(Object.assign(Object.assign({}, c), { root, nativeRenderer: c.nativeRenderer || new DomRenderer() }));
 }
 
+/**
+ * 用于创建脱离当前 DOM 树的子节点，常用于弹窗等
+ * @param childRender
+ * @param host
+ * @example
+ * ```tsx
+ * function App() {
+ *   const number = createSignal(0)
+ *
+ *   setInterval(() => {
+ *     number.set(number() + 1)
+ *   }, 1000)
+ *
+ *   const ModalPortal = function (props) {
+ *     return createPortal(() => {
+ *       return <div class="modal">parent data is {props.text}</div>
+ *     }, document.body)
+ *   }
+ *   return () => {
+ *     return (
+ *       <div>
+ *         <div>data is {number()}</div>
+ *         <ModalPortal text={number()}/>
+ *       </div>
+ *     )
+ *   }
+ * }
+ * ```
+ */
+function createPortal(childRender, host) {
+    const instance = core.getCurrentInstance();
+    const nativeRenderer = core.inject(core.NativeRenderer);
+    const component = new core.Component(instance, () => childRender, {});
+    core.onPropsChanged(() => {
+        component.markAsDirtied();
+    });
+    const render = core.createRenderer(component, nativeRenderer);
+    return function () {
+        render(host);
+        return null;
+    };
+}
+
 const forkErrorFn = core.makeError('fork');
 function fork(root, config = true) {
     const c = { autoUpdate: true };
@@ -173,6 +216,10 @@ class HTMLRenderer extends core.NativeRenderer {
     setProperty(node, key, value) {
         node.props.set(key, value);
     }
+    appendChild(parent, newChild) {
+        parent.children.push(newChild);
+        newChild.parent = parent;
+    }
     prependChild(parent, newChild) {
         parent.children.unshift(newChild);
         newChild.parent = parent;
@@ -317,4 +364,5 @@ exports.OutputTranslator = OutputTranslator;
 exports.VDOMElement = VDOMElement;
 exports.VDomText = VDomText;
 exports.createApp = createApp;
+exports.createPortal = createPortal;
 exports.fork = fork;

package/bundles/public-api.d.ts

@@ -1,4 +1,5 @@
 export * from './create-app';
+export * from './create-portal';
 export * from './fork';
 export * from './html-renderer';
 export * from './dom-renderer';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viewfly/platform-browser",
-  "version": "0.5.0",
+  "version": "0.5.1",
   "description": "This project is used to enable the Viewfly framework to run in a browser.",
   "main": "./bundles/index.js",
   "module": "./bundles/index.esm.js",
@@ -12,7 +12,7 @@
   "license": "MIT",
   "keywords": [],
   "dependencies": {
-    "@viewfly/core": "^0.5.0",
+    "@viewfly/core": "^0.5.1",
     "csstype": "^3.1.2"
   },
   "devDependencies": {
@@ -33,5 +33,5 @@
   "bugs": {
     "url": "https://github.com/viewfly/viewfly.git/issues"
   },
-  "gitHead": "75a746eb22f41295157d079e8557154d5fa50e01"
+  "gitHead": "343b1bff988837e5e0a2acee63c18c3f4a3e8721"
 }