@viewfly/platform-browser 2.1.0 → 2.2.1

package/dist/xml-jsx-attr-name.d.ts

@@ -0,0 +1,14 @@
+/**
+ * 对标 React `possibleStandardNames`：SVG / Math 子树中 JSX 的 camelCase -> 真正写在 DOM 上的 attribute 名。
+ * 易错、不能简单「插横线」的名字放在 XML_JSX_NAME_TO_ATTR；其余走受控的 kebab 回退。
+ * @see https://github.com/facebook/react/blob/main/packages/react-dom-bindings/src/shared/possibleStandardNames.js
+ */
+/**
+ * 显式表：JSX 名 -> 属性名（多含 kebab 或需保留大小写如 viewBox）。
+ * 全小写、单字符（x,y,r,cx 等）不必列出，会原样使用。
+ */
+export declare const XML_JSX_NAME_TO_ATTR: Readonly<Record<string, string>>;
+/**
+ * 返回在 SVG / Math 元素上应使用的 content attribute 名（用于 set/removeAttribute，含 `xml:…`、`xmlns:…`）。
+ */
+export declare function getXmlPresentationAttributeName(jsxKey: string): string;

package/package.json

@@ -1,29 +1,37 @@
 {
   "name": "@viewfly/platform-browser",
-  "version": "2.1.0",
+  "version": "2.2.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",
-  "typings": "./bundles/index.d.ts",
+  "main": "./dist/index.js",
+  "module": "./dist/index.esm.js",
+  "typings": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.esm.js",
+      "require": "./dist/index.js"
+    }
+  },
   "scripts": {
-    "build:lib": "rimraf bundles && npm run build  && npm run build-d",
-    "build": "rollup --config rollup.config.ts --configPlugin @rollup/plugin-typescript",
-    "build-d": "rollup --config rollup-d.config.ts --configPlugin @rollup/plugin-typescript",
+    "build:lib": "rimraf dist && pnpm run build && rimraf dist/platform-browser",
+    "build": "vite build --config vite.config.ts",
     "publish:lib": "npm run build:lib && npm publish --access=public"
   },
+  "files": [
+    "dist/**/*"
+  ],
   "license": "MIT",
   "keywords": [],
   "dependencies": {
-    "@viewfly/core": "^2.1.0",
-    "csstype": "^3.1.2"
+    "@viewfly/core": "^2.2.0",
+    "csstype": "^3.1.3"
   },
   "devDependencies": {
-    "@rollup/plugin-commonjs": "^25.0.3",
-    "@rollup/plugin-typescript": "^11.1.2",
-    "rimraf": "^3.0.2",
-    "rollup": "^3.26.3",
-    "rollup-plugin-dts": "^6.1.1",
-    "tslib": "^2.6.0"
+    "rimraf": "^6.0.1",
+    "tslib": "^2.8.1",
+    "typescript": "~5.8.3",
+    "vite": "^8.0.9",
+    "vite-plugin-dts": "^4.5.4"
   },
   "author": {
     "name": "Tanbo",
@@ -34,7 +42,6 @@
     "url": "git+https://github.com/viewfly/viewfly.git"
   },
   "bugs": {
-    "url": "https://github.com/viewfly/viewfly.git/issues"
-  },
-  "gitHead": "b66ca589f7662cd518fc2e5955b3e3ff9de83f94"
+    "url": "https://github.com/viewfly/viewfly/issues"
+  }
 }

package/bundles/index.esm.js

@@ -1,488 +0,0 @@
-import { NativeRenderer, viewfly } from '@viewfly/core';
-
-class DomRenderer extends NativeRenderer {
-    constructor() {
-        super(...arguments);
-        Object.defineProperty(this, "propMap", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: {
-                INPUT: {
-                    readonly: 'readOnly'
-                },
-                TEXTAREA: {
-                    readonly: 'readOnly'
-                }
-            }
-        });
-    }
-    createElement(name, namespace) {
-        const ns = namespace && DomRenderer.NAMESPACES[namespace];
-        if (ns) {
-            return document.createElementNS(ns, name);
-        }
-        return document.createElement(name);
-    }
-    createTextNode(textContent) {
-        return document.createTextNode(textContent);
-    }
-    appendChild(parent, newChild) {
-        parent.appendChild(newChild);
-    }
-    prependChild(parent, newChild) {
-        parent.prepend(newChild);
-    }
-    insertAfter(newNode, ref) {
-        if (ref.nextSibling) {
-            this.insertBefore(newNode, ref.nextSibling);
-        }
-        else if (ref.parentNode) {
-            this.appendChild(ref.parentNode, newNode);
-        }
-        else {
-            // eslint-disable-next-line
-            console.warn(`Element "${ref instanceof Text ? ref.textContent : ref.tagName}" was accidentally deleted, and viewfly is unable to update the current view`);
-        }
-    }
-    remove(node) {
-        node.remove();
-    }
-    cleanChildren(node) {
-        node.textContent = '';
-    }
-    setProperty(node, key, value, namespace) {
-        if (value == null) {
-            this.removeProperty(node, key, namespace);
-            return;
-        }
-        if (namespace) {
-            const prefix = 'xlink:';
-            if (key.startsWith(prefix)) {
-                const ns = key.substring(prefix.length);
-                node.setAttributeNS(ns, key, String(value));
-            }
-            else {
-                node.setAttribute(key, String(value));
-            }
-            return;
-        }
-        const map = this.propMap[node.tagName];
-        if (map) {
-            key = map[key] || key;
-        }
-        if (key in node) {
-            if (map && document.activeElement === node && key === 'value') {
-                return;
-            }
-            node[key] = value;
-        }
-        else {
-            node.setAttribute(key, value);
-        }
-    }
-    removeProperty(node, key, namespace) {
-        if (namespace) {
-            const prefix = 'xlink:';
-            if (key.startsWith(prefix)) {
-                const ns = key.substring(prefix.length);
-                node.removeAttributeNS(ns, key.substring(prefix.length));
-            }
-            else {
-                node.removeAttribute(key);
-            }
-            return;
-        }
-        const map = this.propMap[node.tagName];
-        const resolvedKey = map ? (map[key] || key) : key;
-        const attrName = DomRenderer.REMOVE_VIA_ATTRIBUTE[resolvedKey];
-        if (attrName) {
-            node.removeAttribute(attrName);
-            return;
-        }
-        if (resolvedKey in node) {
-            node[resolvedKey] = '';
-        }
-        else {
-            node.removeAttribute(key);
-        }
-    }
-    setClass(target, className) {
-        target.setAttribute('class', className);
-    }
-    setStyle(target, key, value) {
-        if (key.startsWith('--')) {
-            target.style.setProperty(key, value);
-            return;
-        }
-        target.style[key] = value !== null && value !== void 0 ? value : '';
-    }
-    removeStyle(target, key) {
-        if (key.startsWith('--')) {
-            target.style.removeProperty(key);
-            return;
-        }
-        target.style[key] = '';
-    }
-    listen(node, type, callback) {
-        const normalizedType = this.normalizedEventType(type);
-        node.addEventListener(normalizedType, callback);
-    }
-    unListen(node, type, callback) {
-        const normalizedType = this.normalizedEventType(type);
-        node.removeEventListener(normalizedType, callback);
-    }
-    syncTextContent(target, content) {
-        target.textContent = content;
-    }
-    getNameSpace(type, namespace) {
-        if (namespace === 'svg') {
-            if (type === 'foreignObject') {
-                return;
-            }
-            return namespace;
-        }
-        if (type === 'svg') {
-            return type;
-        }
-        if (type === 'math') {
-            return 'mathml';
-        }
-        return namespace;
-    }
-    normalizedEventType(type) {
-        return type.substring(2).toLowerCase();
-    }
-    insertBefore(newNode, ref) {
-        if (ref.parentNode) {
-            ref.parentNode.insertBefore(newNode, ref);
-        }
-        else {
-            // eslint-disable-next-line
-            console.warn(`Element "${ref instanceof Text ? ref.textContent : ref.tagName}" was accidentally deleted, and viewfly is unable to update the current view`);
-        }
-    }
-}
-Object.defineProperty(DomRenderer, "NAMESPACES", {
-    enumerable: true,
-    configurable: true,
-    writable: true,
-    value: {
-        svg: 'http://www.w3.org/2000/svg',
-        html: 'http://www.w3.org/1999/xhtml',
-        xml: 'http://www.w3.org/XML/1998/namespace',
-        xlink: 'http://www.w3.org/1999/xlink',
-        xmlns: 'http://www.w3.org/2000/xmlns/',
-        mathml: 'http://www.w3.org/1998/Math/MathML',
-    }
-});
-/**
- * IDL 属性赋 `''` 会被转成数字 0（如 maxLength/minLength），无法表示「未设置」。
- * 这些键在移除时应删掉对应 content attribute。
- */
-Object.defineProperty(DomRenderer, "REMOVE_VIA_ATTRIBUTE", {
-    enumerable: true,
-    configurable: true,
-    writable: true,
-    value: {
-        maxLength: 'maxlength',
-        minLength: 'minlength',
-        size: 'size',
-        cols: 'cols',
-        rows: 'rows',
-        tabIndex: 'tabindex',
-    }
-});
-
-function createApp(root, config = true) {
-    const c = { autoUpdate: true };
-    if (typeof config === 'boolean') {
-        c.autoUpdate = config;
-    }
-    else if (typeof config === 'object') {
-        Object.assign(c, config);
-    }
-    return viewfly(Object.assign(Object.assign({}, c), { root, nativeRenderer: c.nativeRenderer || new DomRenderer() }));
-}
-
-/**
- * 用于创建脱离当前 DOM 树的子节点，常用于弹窗等
- * @deprecated 即将弃用，请使用 @viewfly/core 模块的 Portal 组件实现
- * @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) {
-    return {
-        $portalHost: host,
-        $render: childRender
-    };
-}
-
-class VDOMNode {
-    constructor() {
-        Object.defineProperty(this, "parent", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: null
-        });
-    }
-    remove() {
-        if (this.parent) {
-            const i = this.parent.children.indexOf(this);
-            if (i > -1) {
-                this.parent.children.splice(i, 1);
-            }
-        }
-        this.parent = null;
-    }
-}
-class VDOMElement extends VDOMNode {
-    constructor(name) {
-        super();
-        Object.defineProperty(this, "name", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: name
-        });
-        Object.defineProperty(this, "props", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: new Map()
-        });
-        Object.defineProperty(this, "children", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: []
-        });
-        Object.defineProperty(this, "style", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: new Map()
-        });
-        Object.defineProperty(this, "className", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: ''
-        });
-    }
-}
-class VDOMText extends VDOMNode {
-    constructor(text) {
-        super();
-        Object.defineProperty(this, "text", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: text
-        });
-    }
-}
-/**
- * 用于生成模拟轻量 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);
-    }
-    appendChild(parent, newChild) {
-        newChild.remove();
-        parent.children.push(newChild);
-        newChild.parent = parent;
-    }
-    prependChild(parent, newChild) {
-        newChild.remove();
-        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) {
-        node.remove();
-    }
-    cleanChildren(node) {
-        node.children.forEach(i => i.parent = null);
-        node.children = [];
-    }
-    syncTextContent(target, content) {
-        target.text = content;
-    }
-    insertAfter(newNode, ref) {
-        newNode.remove();
-        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);
-            }
-        }
-        else {
-            // eslint-disable-next-line
-            console.warn(`Element "${ref instanceof VDOMText ? ref.text : ref.name}" was accidentally deleted, and viewfly is unable to update the current view`);
-        }
-    }
-    getNameSpace() {
-        //
-    }
-}
-/**
- * 轻量 DOM 转换为 HTML 字符串的转换器
- */
-class OutputTranslator {
-    constructor() {
-        Object.defineProperty(this, "singleTagTest", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: 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 && /^\w+$/.test(key) ? `${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);
-    }
-}
-Object.defineProperty(OutputTranslator, "singleTags", {
-    enumerable: true,
-    configurable: true,
-    writable: true,
-    value: 'area,base,br,col,embed,hr,img,input,link,meta,source,track,wbr'.split(',')
-});
-Object.defineProperty(OutputTranslator, "simpleXSSFilter", {
-    enumerable: true,
-    configurable: true,
-    writable: true,
-    value: {
-        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, VDOMNode, VDOMText, createApp, createPortal };