@fluffjs/cli 0.4.3 → 0.4.5

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/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/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/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.3",
+  "version": "0.4.5",
   "type": "module",
   "main": "./index.js",
   "module": "./index.js",