@viewfly/platform-browser 0.3.1 → 0.4.0

package/bundles/create-app.d.ts

@@ -1,4 +1,4 @@
-import { JSXNode, Application, Config } from '@viewfly/core';
+import { JSXNode, Application, Config, NativeNode } from '@viewfly/core';
 /**
  * 创建一个 Viewfly 实例
  * @param root 应用根节点
@@ -13,5 +13,5 @@ import { JSXNode, Application, Config } from '@viewfly/core';
  * app.render() // 手动更新视图
  * ```
  */
-export declare function createApp(root: JSXNode, autoUpdate?: boolean): Application;
-export declare function createApp(root: JSXNode, config?: Omit<Config, 'nativeRenderer' | 'root'>): Application;
+export declare function createApp<T extends NativeNode>(root: JSXNode, autoUpdate?: boolean): Application<T>;
+export declare function createApp<T extends NativeNode>(root: JSXNode, config?: Partial<Omit<Config, 'root'>>): Application<T>;

package/bundles/dom-renderer.d.ts

@@ -10,7 +10,6 @@ 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;
@@ -23,4 +22,5 @@ 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

@@ -0,0 +1,52 @@
+import { NativeRenderer } from '@viewfly/core';
+export declare class VDOMElement {
+    name: string;
+    props: Map<string, any>;
+    children: Array<VDOMElement | VDomText>;
+    style: Map<string, any>;
+    className: string;
+    parent: VDOMElement | null;
+    constructor(name: string);
+}
+export declare class VDomText {
+    text: string;
+    parent: VDOMElement | null;
+    constructor(text: string);
+}
+/**
+ * 用于生成模拟轻量 DOM 节点的渲染器
+ */
+export declare class HTMLRenderer extends NativeRenderer<VDOMElement, VDomText> {
+    createElement(name: string): VDOMElement;
+    createTextNode(textContent: string): VDomText;
+    setProperty(node: VDOMElement, key: string, value: any): void;
+    prependChild(parent: VDOMElement, newChild: VDOMElement | VDomText): void;
+    removeProperty(node: VDOMElement, key: string): void;
+    setStyle(target: VDOMElement, key: string, value: any): void;
+    removeStyle(target: VDOMElement, key: string): void;
+    setClass(target: VDOMElement, value: string): void;
+    listen(): void;
+    unListen(): void;
+    remove(node: VDOMElement | VDomText): void;
+    syncTextContent(target: VDomText, content: string): void;
+    insertAfter(newNode: VDOMElement | VDomText, ref: VDOMElement | VDomText): void;
+}
+/**
+ * 轻量 DOM 转换为 HTML 字符串的转换器
+ */
+export declare class OutputTranslator {
+    static singleTags: string[];
+    static simpleXSSFilter: {
+        text(text: string): string;
+        attrName(text: string): string;
+        attrValue(text: string): string;
+    };
+    private singleTagTest;
+    /**
+     * 将虚拟 DOM 转换为 HTML 字符串的方法
+     * @param vDom 虚拟 DOM 节点
+     */
+    transform(vDom: VDOMElement): string;
+    private vDomToHTMLString;
+    private replaceEmpty;
+}

package/bundles/index.esm.js

@@ -12,12 +12,6 @@ class DomRenderer extends NativeRenderer {
             }
         };
     }
-    // valueProps: Record<string, string[]> = {
-    //   input: ['value'],
-    //   option: ['value'],
-    //   video: ['src'],
-    //   audio: ['src']
-    // }
     createElement(name, isSvg) {
         if (isSvg) {
             return document.createElementNS(DomRenderer.NAMESPACES.svg, name);
@@ -27,9 +21,6 @@ class DomRenderer extends NativeRenderer {
     createTextNode(textContent) {
         return document.createTextNode(textContent);
     }
-    appendChild(parent, newChild) {
-        parent.appendChild(newChild);
-    }
     prependChild(parent, newChild) {
         parent.prepend(newChild);
     }
@@ -105,6 +96,9 @@ 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',
@@ -122,7 +116,7 @@ function createApp(root, config = true) {
     else if (typeof config === 'object') {
         Object.assign(c, config);
     }
-    return viewfly(Object.assign(Object.assign({}, c), { root, nativeRenderer: new DomRenderer() }));
+    return viewfly(Object.assign(Object.assign({}, c), { root, nativeRenderer: c.nativeRenderer || new DomRenderer() }));
 }
 
 const forkErrorFn = makeError('fork');
@@ -148,4 +142,171 @@ function fork(root, config = true) {
     return app;
 }
 
-export { DomRenderer, createApp, fork };
+class VDOMElement {
+    constructor(name) {
+        this.name = name;
+        this.props = new Map();
+        this.children = [];
+        this.style = new Map();
+        this.className = '';
+        this.parent = null;
+    }
+}
+class VDomText {
+    constructor(text) {
+        this.text = text;
+        this.parent = null;
+    }
+}
+/**
+ * 用于生成模拟轻量 DOM 节点的渲染器
+ */
+class HTMLRenderer extends NativeRenderer {
+    createElement(name) {
+        return new VDOMElement(name);
+    }
+    createTextNode(textContent) {
+        return new VDomText(textContent);
+    }
+    setProperty(node, key, value) {
+        node.props.set(key, value);
+    }
+    prependChild(parent, newChild) {
+        parent.children.unshift(newChild);
+        newChild.parent = parent;
+    }
+    removeProperty(node, key) {
+        node.props.delete(key);
+    }
+    setStyle(target, key, value) {
+        target.style.set(key, value);
+    }
+    removeStyle(target, key) {
+        target.style.delete(key);
+    }
+    setClass(target, value) {
+        target.className = value;
+    }
+    listen() {
+        //
+    }
+    unListen() {
+        //
+    }
+    remove(node) {
+        if (node.parent) {
+            const i = node.parent.children.indexOf(node);
+            if (i > -1) {
+                node.parent.children.splice(i, 1);
+            }
+        }
+        node.parent = null;
+    }
+    syncTextContent(target, content) {
+        target.text = content;
+    }
+    insertAfter(newNode, ref) {
+        const parent = ref.parent;
+        if (parent) {
+            const i = parent.children.indexOf(ref);
+            if (i > -1) {
+                newNode.parent = parent;
+                parent.children.splice(i + 1, 0, newNode);
+            }
+        }
+    }
+}
+/**
+ * 轻量 DOM 转换为 HTML 字符串的转换器
+ */
+class OutputTranslator {
+    constructor() {
+        this.singleTagTest = new RegExp(`^(${OutputTranslator.singleTags.join('|')})$`, 'i');
+    }
+    /**
+     * 将虚拟 DOM 转换为 HTML 字符串的方法
+     * @param vDom 虚拟 DOM 节点
+     */
+    transform(vDom) {
+        return vDom.children.map(child => {
+            return this.vDomToHTMLString(child);
+        }).join('');
+    }
+    vDomToHTMLString(vDom) {
+        const xssFilter = OutputTranslator.simpleXSSFilter;
+        if (vDom instanceof VDomText) {
+            return this.replaceEmpty(xssFilter.text(vDom.text), '&nbsp;');
+        }
+        const styles = Array.from(vDom.style.keys()).filter(key => {
+            const v = vDom.style.get(key);
+            return !(v === undefined || v === null || v === '');
+        }).map(key => {
+            const k = key.replace(/(?=[A-Z])/g, '-').toLowerCase();
+            return xssFilter.attrValue(`${k}:${vDom.style.get(key)}`);
+        }).join(';');
+        const attrs = Array.from(vDom.props.keys()).filter(key => key !== 'ref' && vDom.props.get(key) !== false).map(k => {
+            const key = xssFilter.attrName(k);
+            const value = vDom.props.get(k);
+            return (value === true ? `${key}` : `${key}="${xssFilter.attrValue(`${value}`)}"`);
+        });
+        if (styles) {
+            attrs.push(`style="${styles}"`);
+        }
+        if (vDom.className) {
+            attrs.push(`class="${xssFilter.attrValue(vDom.className)}"`);
+        }
+        let attrStr = attrs.join(' ');
+        attrStr = attrStr ? ' ' + attrStr : '';
+        if (this.singleTagTest.test(vDom.name)) {
+            return `<${vDom.name}${attrStr}>`;
+        }
+        const childHTML = vDom.children.map(child => {
+            return this.vDomToHTMLString(child);
+        }).join('');
+        return [
+            `<${vDom.name}${attrStr}>`,
+            childHTML,
+            `</${vDom.name}>`
+        ].join('');
+    }
+    replaceEmpty(s, target) {
+        return s.replace(/\s\s+/g, str => {
+            return ' ' + Array.from({
+                length: str.length - 1
+            }).fill(target).join('');
+        }).replace(/^\s|\s$/g, target);
+    }
+}
+OutputTranslator.singleTags = 'br,img,hr'.split(',');
+OutputTranslator.simpleXSSFilter = {
+    text(text) {
+        return text.replace(/[><&]/g, str => {
+            return {
+                '<': '&lt;',
+                '>': '&gt;',
+                '&': '&amp;'
+            }[str];
+        });
+    },
+    attrName(text) {
+        return text.replace(/[><"'&]/g, str => {
+            return {
+                '<': '&lt;',
+                '>': '&gt;',
+                '"': '&quot;',
+                '\'': '&#x27;',
+                '&': '&amp;'
+            }[str];
+        });
+    },
+    attrValue(text) {
+        return text.replace(/["']/g, str => {
+            return {
+                '"': '&quot;',
+                '\'': '&#x27;'
+            }[str];
+        });
+    }
+};
+
+export { DomRenderer, HTMLRenderer, OutputTranslator, VDOMElement, VDomText, createApp, fork };

package/bundles/index.js

@@ -14,12 +14,6 @@ class DomRenderer extends core.NativeRenderer {
             }
         };
     }
-    // valueProps: Record<string, string[]> = {
-    //   input: ['value'],
-    //   option: ['value'],
-    //   video: ['src'],
-    //   audio: ['src']
-    // }
     createElement(name, isSvg) {
         if (isSvg) {
             return document.createElementNS(DomRenderer.NAMESPACES.svg, name);
@@ -29,9 +23,6 @@ class DomRenderer extends core.NativeRenderer {
     createTextNode(textContent) {
         return document.createTextNode(textContent);
     }
-    appendChild(parent, newChild) {
-        parent.appendChild(newChild);
-    }
     prependChild(parent, newChild) {
         parent.prepend(newChild);
     }
@@ -107,6 +98,9 @@ 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',
@@ -124,7 +118,7 @@ function createApp(root, config = true) {
     else if (typeof config === 'object') {
         Object.assign(c, config);
     }
-    return core.viewfly(Object.assign(Object.assign({}, c), { root, nativeRenderer: new DomRenderer() }));
+    return core.viewfly(Object.assign(Object.assign({}, c), { root, nativeRenderer: c.nativeRenderer || new DomRenderer() }));
 }
 
 const forkErrorFn = core.makeError('fork');
@@ -150,6 +144,177 @@ function fork(root, config = true) {
     return app;
 }
 
+class VDOMElement {
+    constructor(name) {
+        this.name = name;
+        this.props = new Map();
+        this.children = [];
+        this.style = new Map();
+        this.className = '';
+        this.parent = null;
+    }
+}
+class VDomText {
+    constructor(text) {
+        this.text = text;
+        this.parent = null;
+    }
+}
+/**
+ * 用于生成模拟轻量 DOM 节点的渲染器
+ */
+class HTMLRenderer extends core.NativeRenderer {
+    createElement(name) {
+        return new VDOMElement(name);
+    }
+    createTextNode(textContent) {
+        return new VDomText(textContent);
+    }
+    setProperty(node, key, value) {
+        node.props.set(key, value);
+    }
+    prependChild(parent, newChild) {
+        parent.children.unshift(newChild);
+        newChild.parent = parent;
+    }
+    removeProperty(node, key) {
+        node.props.delete(key);
+    }
+    setStyle(target, key, value) {
+        target.style.set(key, value);
+    }
+    removeStyle(target, key) {
+        target.style.delete(key);
+    }
+    setClass(target, value) {
+        target.className = value;
+    }
+    listen() {
+        //
+    }
+    unListen() {
+        //
+    }
+    remove(node) {
+        if (node.parent) {
+            const i = node.parent.children.indexOf(node);
+            if (i > -1) {
+                node.parent.children.splice(i, 1);
+            }
+        }
+        node.parent = null;
+    }
+    syncTextContent(target, content) {
+        target.text = content;
+    }
+    insertAfter(newNode, ref) {
+        const parent = ref.parent;
+        if (parent) {
+            const i = parent.children.indexOf(ref);
+            if (i > -1) {
+                newNode.parent = parent;
+                parent.children.splice(i + 1, 0, newNode);
+            }
+        }
+    }
+}
+/**
+ * 轻量 DOM 转换为 HTML 字符串的转换器
+ */
+class OutputTranslator {
+    constructor() {
+        this.singleTagTest = new RegExp(`^(${OutputTranslator.singleTags.join('|')})$`, 'i');
+    }
+    /**
+     * 将虚拟 DOM 转换为 HTML 字符串的方法
+     * @param vDom 虚拟 DOM 节点
+     */
+    transform(vDom) {
+        return vDom.children.map(child => {
+            return this.vDomToHTMLString(child);
+        }).join('');
+    }
+    vDomToHTMLString(vDom) {
+        const xssFilter = OutputTranslator.simpleXSSFilter;
+        if (vDom instanceof VDomText) {
+            return this.replaceEmpty(xssFilter.text(vDom.text), '&nbsp;');
+        }
+        const styles = Array.from(vDom.style.keys()).filter(key => {
+            const v = vDom.style.get(key);
+            return !(v === undefined || v === null || v === '');
+        }).map(key => {
+            const k = key.replace(/(?=[A-Z])/g, '-').toLowerCase();
+            return xssFilter.attrValue(`${k}:${vDom.style.get(key)}`);
+        }).join(';');
+        const attrs = Array.from(vDom.props.keys()).filter(key => key !== 'ref' && vDom.props.get(key) !== false).map(k => {
+            const key = xssFilter.attrName(k);
+            const value = vDom.props.get(k);
+            return (value === true ? `${key}` : `${key}="${xssFilter.attrValue(`${value}`)}"`);
+        });
+        if (styles) {
+            attrs.push(`style="${styles}"`);
+        }
+        if (vDom.className) {
+            attrs.push(`class="${xssFilter.attrValue(vDom.className)}"`);
+        }
+        let attrStr = attrs.join(' ');
+        attrStr = attrStr ? ' ' + attrStr : '';
+        if (this.singleTagTest.test(vDom.name)) {
+            return `<${vDom.name}${attrStr}>`;
+        }
+        const childHTML = vDom.children.map(child => {
+            return this.vDomToHTMLString(child);
+        }).join('');
+        return [
+            `<${vDom.name}${attrStr}>`,
+            childHTML,
+            `</${vDom.name}>`
+        ].join('');
+    }
+    replaceEmpty(s, target) {
+        return s.replace(/\s\s+/g, str => {
+            return ' ' + Array.from({
+                length: str.length - 1
+            }).fill(target).join('');
+        }).replace(/^\s|\s$/g, target);
+    }
+}
+OutputTranslator.singleTags = 'br,img,hr'.split(',');
+OutputTranslator.simpleXSSFilter = {
+    text(text) {
+        return text.replace(/[><&]/g, str => {
+            return {
+                '<': '&lt;',
+                '>': '&gt;',
+                '&': '&amp;'
+            }[str];
+        });
+    },
+    attrName(text) {
+        return text.replace(/[><"'&]/g, str => {
+            return {
+                '<': '&lt;',
+                '>': '&gt;',
+                '"': '&quot;',
+                '\'': '&#x27;',
+                '&': '&amp;'
+            }[str];
+        });
+    },
+    attrValue(text) {
+        return text.replace(/["']/g, str => {
+            return {
+                '"': '&quot;',
+                '\'': '&#x27;'
+            }[str];
+        });
+    }
+};
+
 exports.DomRenderer = DomRenderer;
+exports.HTMLRenderer = HTMLRenderer;
+exports.OutputTranslator = OutputTranslator;
+exports.VDOMElement = VDOMElement;
+exports.VDomText = VDomText;
 exports.createApp = createApp;
 exports.fork = fork;

package/bundles/public-api.d.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viewfly/platform-browser",
-  "version": "0.3.1",
+  "version": "0.4.0",
   "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.3.1",
+    "@viewfly/core": "^0.4.0",
     "csstype": "^3.1.2"
   },
   "devDependencies": {
@@ -33,5 +33,5 @@
   "bugs": {
     "url": "https://github.com/viewfly/viewfly.git/issues"
   },
-  "gitHead": "b66ca589f7662cd518fc2e5955b3e3ff9de83f94"
+  "gitHead": "d14b3cd0247a07f72519745933c3070f12adbfa1"
 }