@thyn/vite-plugin 0.0.312 → 0.0.314

package/dist/index.js

@@ -1,7 +1,7 @@
 import * as acorn from "acorn";
 import * as acornwalk from "acorn-walk";
 import * as esbuild from "esbuild";
-import { JSDOM } from "jsdom";
+import { parseHTML } from "./html-parser.js";
 import MagicString from "magic-string";
 import postcss from 'postcss';
 import selectorParser from 'postcss-selector-parser';
@@ -224,6 +224,7 @@ function generateTextContentTemplate(text, parent, prevSibling) {
             dynamic: "",
             root: "",
             staticRoot: root,
+            html: escapeHTML(finalText),
         };
     }
     const interpolated = parts.map((part) => {
@@ -235,6 +236,19 @@ function generateTextContentTemplate(text, parent, prevSibling) {
     const textNode = prevSibling
         ? `${prevSibling}.nextSibling`
         : `${parent}.firstChild`;
+    // For templates with interpolations, build HTML with the static parts
+    // For reactive/dynamic content, we use the initial value
+    let htmlContent = "";
+    for (const part of parts) {
+        if (typeof part === "string") {
+            htmlContent += escapeHTML(part);
+        }
+        else {
+            // For interpolation, we can't compute the value at compile time
+            // So we use an empty string as placeholder
+            htmlContent += "";
+        }
+    }
     if (hasReactive) {
         let fn = `(() => \`${interpolated}\`)`;
         if (parts.length === 1) {
@@ -254,6 +268,7 @@ function generateTextContentTemplate(text, parent, prevSibling) {
             dynamic,
             root: "",
             staticRoot: root,
+            html: htmlContent || " ", // Use space to ensure text node is created
         };
     }
     if (parts.length === 1) {
@@ -262,6 +277,7 @@ function generateTextContentTemplate(text, parent, prevSibling) {
             static: `const ${root} = document.createTextNode("");\n`,
             root: "",
             staticRoot: root,
+            html: htmlContent || " ",
         };
     }
     return {
@@ -269,6 +285,7 @@ function generateTextContentTemplate(text, parent, prevSibling) {
         static: `const ${root} = document.createTextNode("");\n`,
         root: "",
         staticRoot: root,
+        html: htmlContent || " ",
     };
 }
 const NAMESPACE = "__THYN__";
@@ -298,30 +315,63 @@ let varId = 0;
 function makeVariable() {
     return `${NAMESPACE}${varId++}`;
 }
-function makeTemplate(node, parent, prevSibling) {
+function escapeHTML(str) {
+    return str
+        .replace(/&/g, '&')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;')
+        .replace(/'/g, '&#39;');
+}
+function processTextForHTML(text) {
+    // Handle escaped braces by removing the backslashes
+    text = text.replace(/\\\{\{/g, '{{').replace(/\\\}\}/g, '}}');
+    return escapeHTML(text.trim());
+}
+function makeTemplate(node, parent, prevSibling, path = "") {
     if (node.nodeType === 3) {
         const text = node.textContent;
-        return generateTextContentTemplate(text, parent, prevSibling);
+        const result = generateTextContentTemplate(text, parent, prevSibling);
+        // For templates with interpolations, we need a placeholder
+        const html = result.html !== "<!-- -->" ? result.html : "<!-- -->";
+        return {
+            ...result,
+            html,
+        };
     }
     const tag = node.tagName.toLowerCase();
     const attrs = parseAttributes(node);
     let statRoot = makeVariable();
-    let template = `const ${statRoot} = document.createElement("${tag}");\n`;
-    if (!parent) {
-        statRoot = "__THYN__template";
-        template = `${statRoot} = document.createElement("${tag}");\n`;
-    }
     let code = "";
     let dynRoot = makeVariable();
+    // Build HTML string for static template
+    let htmlAttrs = "";
+    const staticAttrs = {};
+    for (const [key, val] of Object.entries(attrs)) {
+        if (DIRECTIVES.includes(key))
+            continue;
+        if ("quoted" in val) {
+            staticAttrs[key] = val.quoted;
+            if (key === "class") {
+                htmlAttrs += ` class="${escapeHTML(val.quoted)}"`;
+            }
+            else {
+                htmlAttrs += ` ${key}="${escapeHTML(val.quoted)}"`;
+            }
+        }
+    }
     const childNodes = Array.from(node.childNodes).filter((n) => n.nodeType !== 3 || n.textContent.trim());
     const children = [];
     let ps = undefined;
+    let childHTML = "";
     for (let i = 0; i < childNodes.length; i++) {
         const cn = childNodes[i];
-        const ch = makeTemplate(cn, dynRoot, ps);
+        const ch = makeTemplate(cn, dynRoot, ps, `${path}.childNodes[${i}]`);
         children.push(ch);
         ps = ch.root || `${dynRoot}.childNodes[${i}]`;
+        childHTML += ch.html || "";
     }
+    const fullHTML = `<${tag}${htmlAttrs}>${childHTML}</${tag}>`;
     if (!parent) {
         code = `const ${dynRoot} = __THYN__template_generate();\n`;
     }
@@ -331,21 +381,7 @@ function makeTemplate(node, parent, prevSibling) {
     else {
         code = `const ${dynRoot} = ${prevSibling}.nextSibling;\n`;
     }
-    for (const [key, val] of Object.entries(attrs)) {
-        if (DIRECTIVES.includes(key))
-            continue;
-        if ("quoted" in val) {
-            if (key === "class") {
-                template += `${statRoot}.className = "${val.quoted}";\n`;
-            }
-            else if (key.includes("-")) {
-                template += `${statRoot}.setAttribute("${key}", "${val.quoted}");\n`;
-            }
-            else {
-                template += `${statRoot}["${key}"] = "${val.quoted}";\n`;
-            }
-        }
-    }
+    // Generate dynamic code for reactive attributes and events
     for (const [key, val] of Object.entries(attrs)) {
         if (DIRECTIVES.includes(key))
             continue;
@@ -410,24 +446,19 @@ function makeTemplate(node, parent, prevSibling) {
             code += `${dynRoot}.${key} = ${val.raw};\n`;
         }
     }
-    if (children.length) {
-        for (let i = 0; i < children.length; i++) {
-            const ch = children[i];
-            if (ch.static) {
-                template += ch.static;
-                const childStaticRoot = ch.staticRoot || ch.root;
-                template += `${statRoot}.appendChild(${childStaticRoot});\n`;
-            }
-            if (ch.dynamic) {
-                code += ch.dynamic;
-            }
+    // Handle dynamic text content
+    for (let i = 0; i < children.length; i++) {
+        const ch = children[i];
+        if (ch.dynamic) {
+            code += ch.dynamic;
         }
     }
     return {
         root: dynRoot,
         staticRoot: statRoot,
-        static: template,
+        static: "", // No longer used - template is built from HTML
         dynamic: code,
+        html: fullHTML,
     };
 }
 function walkConditionChain(nodes, i) {
@@ -641,14 +672,6 @@ function hasComponentChildren(node) {
     }
     return Array.from(node.childNodes).some((n) => hasComponentChildren(n));
 }
-const forcedChildren = new Map([
-    ["tbody", "tr"],
-    ["thead", "tr"],
-    ["tfoot", "tr"],
-    ["ul", "li"],
-    ["ol", "li"],
-    ["select", "option"],
-]);
 const COMPONENT_TAG_REGEX = /<\/?([A-Z][a-zA-Z0-9]*)(\s(?:[^"'<>\/]|"[^"]*"|'[^']*')*)?(\/?)>/g;
 function convertToColonBindings(html) {
     let result = '';
@@ -742,20 +765,6 @@ function preserveCamelCaseAttributes(html) {
 }
 function addComponentAttributes(html) {
     let processedHTML = html;
-    for (const [parentTag, childTag] of forcedChildren) {
-        const parentRegex = new RegExp(`<${parentTag}([^>]*)>([\\s\\S]*?)<\\/${parentTag}>`, "gis");
-        processedHTML = processedHTML.replace(parentRegex, (match, attributes, content) => {
-            const processedContent = content.replace(COMPONENT_TAG_REGEX, (componentMatch, componentName, attributes, selfClose) => {
-                const isClosing = componentMatch.startsWith("</");
-                return isClosing
-                    ? `</${childTag}>`
-                    : selfClose
-                        ? `<${childTag}${attributes || ""} __thyn_component="${componentName}"/>`
-                        : `<${childTag}${attributes || ""} __thyn_component="${componentName}">`;
-            });
-            return `<${parentTag}${attributes}>${processedContent}</${parentTag}>`;
-        });
-    }
     processedHTML = processedHTML.replace(COMPONENT_TAG_REGEX, (componentMatch, componentName, attributes, selfClose) => {
         const isClosing = componentMatch.startsWith("</");
         return isClosing
@@ -833,10 +842,8 @@ function removeUnusedThynVars(code) {
 }
 async function transformHTMLtoJSX(html, style) {
     const scopeId = `thyn-${(styleId++).toString(36)}`;
-    const div = new JSDOM("").window.document.createElement("div");
     const processedHTML = preprocessHTML(html);
-    div.innerHTML = "<template>" + processedHTML + "</template>";
-    const template = div.firstElementChild;
+    const template = parseHTML("<template>" + processedHTML + "</template>");
     const rootElement = template.content.firstElementChild;
     let scopedStyle = null;
     if (style) {
@@ -849,12 +856,14 @@ async function transformHTMLtoJSX(html, style) {
         const root = makeVariable();
         return [root, `const ${root} = ${code};`, hoist, scopedStyle];
     }
-    const { root, static: tmpl, dynamic } = makeTemplate(rootElement);
+    const { root, dynamic, html: templateHTML } = makeTemplate(rootElement);
     const hoist = [`
   let __THYN__template;
   function __THYN__template_generate() {
     if (!__THYN__template) {
-      ${tmpl}
+      const t = document.createElement('template');
+      t.innerHTML = \`${escapeTemplateLiteral(templateHTML)}\`;
+      __THYN__template = t.content.firstChild;
       return __THYN__template;
     }
     return __THYN__template.cloneNode(true);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thyn/vite-plugin",
-  "version": "0.0.312",
+  "version": "0.0.314",
   "scripts": {
     "build": "tsc",
     "pub": "tsc && npm version patch -f && npm -f publish --access=public",
@@ -19,7 +19,6 @@
     "acorn": "^8.15.0",
     "acorn-walk": "^8.3.4",
     "esbuild": "^0.27.2",
-    "jsdom": "^27.4.0",
     "magic-string": "^0.30.21",
     "postcss": "^8.5.6",
     "postcss-selector-parser": "^7.1.1",
@@ -28,6 +27,7 @@
   "devDependencies": {
     "@thyn/core": "^0.0.298",
     "@types/jsdom": "^27.0.0",
+    "jsdom": "^27.4.0",
     "vite": "^7.3.1",
     "vitest": "^4.0.16"
   }

package/src/html-parser.ts

@@ -0,0 +1,332 @@
+interface Node {
+  nodeType: number;
+  nodeName: string;
+  textContent: string;
+  childNodes: Node[];
+}
+
+interface Element extends Node {
+  tagName: string;
+  attributes: Array<{ name: string; value: string }>;
+  children: Element[];
+  firstElementChild: Element | null;
+  hasAttribute(name: string): boolean;
+  getAttribute(name: string): string | null;
+  setAttribute(name: string, value: string): void;
+  removeAttribute(name: string): void;
+  classList: { add(className: string): void };
+}
+
+interface DocumentFragment {
+  childNodes: Node[];
+  firstElementChild: Element | null;
+}
+
+interface TemplateElement extends Element {
+  content: DocumentFragment;
+}
+
+function parseAttributes(attrStr: string): Array<{ name: string; value: string }> {
+  const attrs: Array<{ name: string; value: string }> = []
+  let i = 0;
+
+  while (i < attrStr.length) {
+    // Skip whitespace
+    while (i < attrStr.length && /\s/.test(attrStr[i])) i++;
+    if (i >= attrStr.length) break;
+
+    // Parse attribute name
+    let name = "";
+    while (i < attrStr.length && !/[\s=]/.test(attrStr[i])) {
+      name += attrStr[i];
+      i++;
+    }
+
+    if (!name) break;
+
+    // Skip whitespace
+    while (i < attrStr.length && /\s/.test(attrStr[i])) i++;
+
+    let value = "";
+    if (i < attrStr.length && attrStr[i] === "=") {
+      i++; // skip '='
+      // Skip whitespace
+      while (i < attrStr.length && /\s/.test(attrStr[i])) i++;
+
+      if (i < attrStr.length) {
+        const quote = attrStr[i];
+        if (quote === '"' || quote === "'") {
+          i++; // skip opening quote
+          while (i < attrStr.length && attrStr[i] !== quote) {
+            value += attrStr[i];
+            i++;
+          }
+          if (i < attrStr.length) i++; // skip closing quote
+        } else {
+          // Unquoted value - take until whitespace
+          while (i < attrStr.length && !/\s/.test(attrStr[i])) {
+            value += attrStr[i];
+            i++;
+          }
+        }
+      }
+    }
+
+    attrs.push({ name, value });
+  }
+
+  return attrs;
+}
+
+function createTextNode(text: string): Node {
+  return {
+    nodeType: 3,
+    nodeName: "#text",
+    textContent: text,
+    childNodes: [],
+  };
+}
+
+function createElement(tagName: string, attributes: Array<{ name: string; value: string }> = []): Element {
+  const children: Element[] = [];
+  const childNodes: Node[] = [];
+
+  const element: Element = {
+    nodeType: 1,
+    nodeName: tagName.toUpperCase(),
+    tagName: tagName.toUpperCase(),
+    textContent: "",
+    attributes: [...attributes],
+    children,
+    childNodes,
+    firstElementChild: null,
+    hasAttribute(name: string): boolean {
+      return this.attributes.some((attr) => attr.name === name);
+    },
+    getAttribute(name: string): string | null {
+      const attr = this.attributes.find((attr) => attr.name === name);
+      return attr ? attr.value : null;
+    },
+    setAttribute(name: string, value: string): void {
+      const existing = this.attributes.find((attr) => attr.name === name);
+      if (existing) {
+        existing.value = value;
+      } else {
+        this.attributes.push({ name, value });
+      }
+    },
+    removeAttribute(name: string): void {
+      this.attributes = this.attributes.filter((attr) => attr.name !== name);
+    },
+    classList: {
+      add: (className: string) => {
+        const existing = element.getAttribute("class");
+        const classes = existing ? existing.split(" ").filter(Boolean) : [];
+        if (!classes.includes(className)) {
+          classes.push(className);
+          element.setAttribute("class", classes.join(" "));
+        }
+      },
+    },
+  };
+
+  return element;
+}
+
+// Find next tag position, properly handling quoted strings
+function findNextTag(html: string, startIndex: number): { index: number; endIndex: number; isClose: boolean; tagName: string; attrs: string; isSelfClose: boolean } | null {
+  let i = startIndex;
+  
+  while (i < html.length) {
+    // Find the next '<'
+    while (i < html.length && html[i] !== '<') {
+      i++;
+    }
+    
+    if (i >= html.length) return null;
+    
+    const tagStart = i;
+    i++; // skip '<'
+    
+    // Check if it's a closing tag
+    const isClose = i < html.length && html[i] === '/';
+    if (isClose) i++;
+    
+    // Parse tag name
+    let tagName = '';
+    while (i < html.length && /[a-zA-Z0-9-]/.test(html[i])) {
+      tagName += html[i];
+      i++;
+    }
+    
+    if (!tagName) {
+      // Not a valid tag, continue searching
+      i = tagStart + 1;
+      continue;
+    }
+    
+    // Parse attributes, respecting quotes
+    let attrs = '';
+    let inQuote: string | null = null;
+    let tagEnd = -1;
+    
+    while (i < html.length) {
+      const char = html[i];
+      
+      if (inQuote) {
+        attrs += char;
+        if (char === inQuote) {
+          inQuote = null;
+        }
+        i++;
+      } else if (char === '"' || char === "'") {
+        attrs += char;
+        inQuote = char;
+        i++;
+      } else if (char === '>') {
+        tagEnd = i + 1; // Include the '>'
+        i++;
+        break;
+      } else {
+        attrs += char;
+        i++;
+      }
+    }
+    
+    if (tagEnd === -1) {
+      // Malformed tag (no closing >), continue searching
+      i = tagStart + 1;
+      continue;
+    }
+    
+    // Check for self-closing
+    const trimmedAttrs = attrs.trim();
+    const isSelfClose = trimmedAttrs.endsWith('/');
+    const finalAttrs = isSelfClose ? trimmedAttrs.slice(0, -1).trim() : trimmedAttrs;
+    
+    return {
+      index: tagStart,
+      endIndex: tagEnd,
+      isClose,
+      tagName,
+      attrs: finalAttrs,
+      isSelfClose
+    };
+  }
+  
+  return null;
+}
+
+export function parseHTML(html: string): TemplateElement {
+  const match = html.match(/<template([^>]*)>([\s\S]*)<\/template>/i);
+
+  if (!match) {
+    throw new Error("No <template> tag found in HTML");
+  }
+
+  const content = match[2].trim();
+  const stack: Element[] = [];
+  const textChunks: string[] = [];
+  const fragmentChildren: Node[] = [];
+  const fragmentElements: Element[] = [];
+
+  let pos = 0;
+
+  const flushText = () => {
+    if (textChunks.length > 0) {
+      const text = textChunks.join("");
+      textChunks.length = 0;
+      const textNode = createTextNode(text);
+      if (stack.length > 0) {
+        const parent = stack[stack.length - 1];
+        parent.childNodes.push(textNode);
+      } else {
+        fragmentChildren.push(textNode);
+      }
+    }
+  };
+
+  while (pos < content.length) {
+    const tagInfo = findNextTag(content, pos);
+    
+    if (!tagInfo) {
+      // No more tags, add remaining as text
+      if (pos < content.length) {
+        textChunks.push(content.slice(pos));
+      }
+      break;
+    }
+    
+    // Add text before this tag
+    if (tagInfo.index > pos) {
+      textChunks.push(content.slice(pos, tagInfo.index));
+    }
+    
+    const { isClose, tagName, attrs, isSelfClose, endIndex } = tagInfo;
+    
+    if (isClose) {
+      flushText();
+      if (stack.length > 0) {
+        const closedElement = stack.pop()!;
+        if (closedElement.tagName.toLowerCase() !== tagName.toLowerCase()) {
+          throw new Error(`Mismatched tags: expected </${closedElement.tagName}>, got </${tagName}>`);
+        }
+
+        // Update parent's firstElementChild if needed
+        const parent = stack.length > 0 ? stack[stack.length - 1] : null;
+        if (parent && !parent.firstElementChild) {
+          parent.firstElementChild = closedElement;
+        }
+      }
+    } else {
+      flushText();
+      const attributes = parseAttributes(attrs);
+      const element = createElement(tagName, attributes);
+
+      if (stack.length === 0) {
+        // Top-level element
+        fragmentChildren.push(element);
+        fragmentElements.push(element);
+      } else {
+        const parent = stack[stack.length - 1];
+        parent.children.push(element);
+        parent.childNodes.push(element);
+        if (!parent.firstElementChild) {
+          parent.firstElementChild = element;
+        }
+      }
+
+      if (!isSelfClose) {
+        stack.push(element);
+      }
+    }
+    
+    // Move position past this tag
+    pos = endIndex;
+  }
+
+  // Flush any remaining text
+  if (stack.length === 0) {
+    flushText();
+  }
+
+  if (stack.length > 0) {
+    throw new Error(`Unclosed tags remain: ${stack.map(e => e.tagName).join(', ')}`);
+  }
+
+  const fragment: DocumentFragment = {
+    childNodes: fragmentChildren,
+    firstElementChild: fragmentElements[0] || null,
+  };
+
+  const templateAttrs = parseAttributes(match[1].trim());
+  const templateElement: TemplateElement = {
+    ...createElement("template", templateAttrs),
+    content: fragment,
+  };
+  templateElement.childNodes = [...fragmentChildren];
+  templateElement.children = [...fragmentElements];
+  templateElement.firstElementChild = fragmentElements[0] || null;
+
+  return templateElement;
+}