@fluffjs/cli 0.4.2 → 0.4.4

package/CodeGenerator.d.ts

@@ -57,6 +57,7 @@ export declare class CodeGenerator {
     private readonly bindingsMap;
     private rootFragment;
     private readonly collectedTemplates;
+    private readonly namespaceStack;
     constructor(componentSelectors?: Set<string>, componentSelector?: string);
     static resetGlobalState(): void;
     static internString(str: string): number;
@@ -80,6 +81,8 @@ export declare class CodeGenerator {
     private renderNodesToParent;
     private renderNodeToParent;
     private renderElementToParent;
+    private getCurrentNamespace;
+    private renderToTemplateWithNamespace;
     private renderTextToParent;
     private isComponentTag;
     private serializeBinding;

package/CodeGenerator.js

@@ -35,6 +35,7 @@ export class CodeGenerator {
     bindingsMap = new Map();
     rootFragment = null;
     collectedTemplates = [];
+    namespaceStack = [Parse5Helpers.NS_HTML];
     constructor(componentSelectors = new Set(), componentSelector = '') {
         this.componentSelectors = componentSelectors;
         this.componentSelector = componentSelector;
@@ -70,6 +71,8 @@ export class CodeGenerator {
     generateHtml(template) {
         this.rootFragment = parse5.parseFragment('');
         this.collectedTemplates.length = 0;
+        this.namespaceStack.length = 0;
+        this.namespaceStack.push(Parse5Helpers.NS_HTML);
         this.renderNodesToParent(template.root, this.rootFragment);
         for (const tpl of this.collectedTemplates) {
             tpl.parentNode = this.rootFragment;
@@ -314,9 +317,36 @@ export class CodeGenerator {
         if (tagName.startsWith(RESTRICTED_ELEMENT_PREFIX)) {
             tagName = tagName.slice(RESTRICTED_ELEMENT_PREFIX.length);
         }
-        const el = Parse5Helpers.createElement(tagName, attrs);
+        const currentNamespace = this.namespaceStack[this.namespaceStack.length - 1];
+        const elementNamespace = node.namespaceURI ?? currentNamespace;
+        const el = Parse5Helpers.createElement(tagName, attrs, elementNamespace);
         Parse5Helpers.appendChild(parent, el);
+        if (elementNamespace !== currentNamespace) {
+            this.namespaceStack.push(elementNamespace);
+        }
         this.renderNodesToParent(node.children, el);
+        if (elementNamespace !== currentNamespace) {
+            this.namespaceStack.pop();
+        }
+    }
+    getCurrentNamespace() {
+        return this.namespaceStack[this.namespaceStack.length - 1];
+    }
+    renderToTemplateWithNamespace(nodes, attrName, attrValue) {
+        const tpl = Parse5Helpers.createElement('template', [{ name: attrName, value: attrValue }]);
+        const tplContent = Parse5Helpers.getTemplateContent(tpl);
+        const currentNs = this.getCurrentNamespace();
+        if (currentNs !== Parse5Helpers.NS_HTML) {
+            const wrapperTag = currentNs === Parse5Helpers.NS_SVG ? 'svg' : 'math';
+            const wrapper = Parse5Helpers.createElement(wrapperTag, [{ name: 'data-fluff-ns-wrapper', value: '' }], currentNs);
+            Parse5Helpers.appendChild(tplContent, wrapper);
+            this.renderNodesToParent(nodes, wrapper);
+        }
+        else {
+            this.renderNodesToParent(nodes, tplContent);
+        }
+        this.collectedTemplates.push(tpl);
+        return tpl;
     }
     renderTextToParent(node, parent) {
         Parse5Helpers.appendText(parent, node.content);
@@ -435,9 +465,7 @@ export class CodeGenerator {
         for (let i = 0; i < node.branches.length; i++) {
             const branch = node.branches[i];
             const templateId = `${this.componentSelector}-${id}-${i}`;
-            const tpl = Parse5Helpers.createElement('template', [{ name: 'data-fluff-branch', value: templateId }]);
-            this.renderNodesToParent(branch.children, Parse5Helpers.getTemplateContent(tpl));
-            this.collectedTemplates.push(tpl);
+            this.renderToTemplateWithNamespace(branch.children, 'data-fluff-branch', templateId);
         }
         Parse5Helpers.appendComment(parent, `/fluff:if:${id}`);
     }
@@ -454,13 +482,9 @@ export class CodeGenerator {
         this.markerConfigs.set(id, config);
         Parse5Helpers.appendComment(parent, `fluff:for:${id}`);
         const templateId = `${this.componentSelector}-${id}`;
-        const tpl = Parse5Helpers.createElement('template', [{ name: 'data-fluff-tpl', value: templateId }]);
-        this.renderNodesToParent(node.children, Parse5Helpers.getTemplateContent(tpl));
-        this.collectedTemplates.push(tpl);
+        this.renderToTemplateWithNamespace(node.children, 'data-fluff-tpl', templateId);
         if (node.emptyContent) {
-            const emptyTpl = Parse5Helpers.createElement('template', [{ name: 'data-fluff-empty', value: templateId }]);
-            this.renderNodesToParent(node.emptyContent, Parse5Helpers.getTemplateContent(emptyTpl));
-            this.collectedTemplates.push(emptyTpl);
+            this.renderToTemplateWithNamespace(node.emptyContent, 'data-fluff-empty', templateId);
         }
         Parse5Helpers.appendComment(parent, `/fluff:for:${id}`);
     }
@@ -481,9 +505,7 @@ export class CodeGenerator {
         for (let i = 0; i < node.cases.length; i++) {
             const caseNode = node.cases[i];
             const templateId = `${this.componentSelector}-${id}-${i}`;
-            const tpl = Parse5Helpers.createElement('template', [{ name: 'data-fluff-case', value: templateId }]);
-            this.renderNodesToParent(caseNode.children, Parse5Helpers.getTemplateContent(tpl));
-            this.collectedTemplates.push(tpl);
+            this.renderToTemplateWithNamespace(caseNode.children, 'data-fluff-case', templateId);
         }
         Parse5Helpers.appendComment(parent, `/fluff:switch:${id}`);
     }

package/Generator.js

@@ -102,8 +102,8 @@ export class Generator {
             private: true,
             type: 'module',
             scripts: {
-                build: 'npx @fluffjs/cli build',
-                serve: 'npx @fluffjs/cli serve'
+                build: 'fluff build',
+                serve: 'fluff serve'
             },
             dependencies: {
                 '@fluffjs/fluff': `^${cliVersion}`

package/Parse5Helpers.d.ts

@@ -1,10 +1,16 @@
+import type * as parse5 from 'parse5';
+import { type html } from 'parse5';
+export type Parse5NS = html.NS;
 import type { Parse5ChildNode, Parse5Document, Parse5DocumentFragment, Parse5Element, Parse5Node, Parse5ParentNode } from './Typeguards.js';
 export type Parse5NodeVisitor = (node: Parse5Node) => boolean | undefined;
 export declare class Parse5Helpers {
+    static readonly NS_HTML = parse5.html.NS.HTML;
+    static readonly NS_SVG = parse5.html.NS.SVG;
+    static readonly NS_MATHML = parse5.html.NS.MATHML;
     static createElement(tagName: string, attrs: {
         name: string;
         value: string;
-    }[]): Parse5Element;
+    }[], namespaceURI?: Parse5NS): Parse5Element;
     static appendChild(parent: Parse5ParentNode, child: Parse5ChildNode): void;
     static appendText(parent: Parse5ParentNode, value: string): void;
     static appendComment(parent: Parse5ParentNode, data: string): void;

package/Parse5Helpers.js

@@ -1,13 +1,16 @@
 import { html as parse5Html } from 'parse5';
 import { Typeguards } from './Typeguards.js';
 export class Parse5Helpers {
-    static createElement(tagName, attrs) {
+    static NS_HTML = parse5Html.NS.HTML;
+    static NS_SVG = parse5Html.NS.SVG;
+    static NS_MATHML = parse5Html.NS.MATHML;
+    static createElement(tagName, attrs, namespaceURI) {
         const el = {
             nodeName: tagName,
             tagName,
             attrs,
             childNodes: [],
-            namespaceURI: parse5Html.NS.HTML,
+            namespaceURI: namespaceURI ?? Parse5Helpers.NS_HTML,
             parentNode: null
         };
         if (tagName === 'template') {

package/PeerDependencies.d.ts

@@ -0,0 +1,6 @@
+export interface PeerDependency {
+    name: string;
+    version: string;
+}
+export declare function getCliPeerDependencies(): PeerDependency[];
+//# sourceMappingURL=PeerDependencies.d.ts.map

package/PeerDependencies.js

@@ -0,0 +1,7 @@
+export function getCliPeerDependencies() {
+    return [
+        { name: 'cssnano', version: '^7.1.2' },
+        { name: 'postcss', version: '^8.5.6' },
+        { name: 'jsesc', version: '^3.1.0' }
+    ];
+}

package/TemplateParser.js

@@ -327,7 +327,8 @@ export class TemplateParser {
             tagName: element.tagName,
             attributes,
             bindings,
-            children
+            children,
+            namespaceURI: element.namespaceURI
         };
         if (hasBindings) {
             node.id = `l${this.bindingId++}`;

package/fluff-esbuild-plugin.js

@@ -137,7 +137,7 @@ export function fluffPlugin(options) {
                     plugins: ['typescript', 'decorators']
                 });
                 const exprTableImport = t.importDeclaration([], t.stringLiteral(VIRTUAL_EXPR_TABLE_ID));
-                ast.program.body.push(exprTableImport);
+                ast.program.body.unshift(exprTableImport);
                 const output = generate(ast, { compact: false });
                 return {
                     contents: output.code,

package/interfaces/ElementNode.d.ts

@@ -1,5 +1,6 @@
 import type { BindingInfo } from './BindingInfo.js';
 import type { TemplateNode } from './TemplateNode.js';
+import type { Parse5NS } from '../Parse5Helpers.js';
 export interface ElementNode {
     type: 'element';
     tagName: string;
@@ -7,5 +8,6 @@ export interface ElementNode {
     bindings: BindingInfo[];
     children: TemplateNode[];
     id?: string;
+    namespaceURI?: Parse5NS;
 }
 //# sourceMappingURL=ElementNode.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluffjs/cli",
-  "version": "0.4.2",
+  "version": "0.4.4",
   "type": "module",
   "main": "./index.js",
   "module": "./index.js",
@@ -29,23 +29,23 @@
     "@babel/preset-typescript": "^7.28.5",
     "@babel/traverse": "^7.28.6",
     "@babel/types": "^7.28.6",
+    "cssnano": "^7.1.2",
     "esbuild": "^0.27.2",
     "he": "^1.2.0",
     "html-minifier-terser": "^7.2.0",
     "http-proxy": "^1.18.1",
+    "jsesc": "^3.1.0",
     "parse5": "^8.0.0",
     "parse5-sax-parser": "^8.0.0",
     "picomatch": "^4.0.2",
+    "postcss": "^8.5.6",
     "source-map": "^0.7.6",
     "tslib": "^2.3.0"
   },
   "devDependencies": {
     "@types/he": "^1.2.3",
     "@types/http-proxy": "^1.17.16",
-    "@types/jsesc": "^3.0.3",
-    "cssnano": "^7.1.2",
-    "jsesc": "^3.1.0",
-    "postcss": "^8.5.6"
+    "@types/jsesc": "^3.0.3"
   },
   "publishConfig": {
     "access": "public"