@barefootjs/vite 0.31.8 → 0.31.9

package/dist/index.js

@@ -3113,8 +3113,8 @@ function templateAttrExpr(attrName, valExpr, presenceOrUndefined) {
 function escapeAttrValueExpr(valExpr) {
   return `escapeAttr(${valExpr})`;
 }
-function escapeTextSlotExpr(innerExpr) {
-  return `escapeText(${innerExpr})`;
+function escapeTextSlotExpr(innerExpr, isMarkup = false) {
+  return `${isMarkup ? "escapeTextOrMarkup" : "escapeText"}(${innerExpr})`;
 }
 function dangerouslyHtmlChildren(attrs, toExpr) {
   const attr = attrs.find((a) => a.name === "dangerouslySetInnerHTML");
@@ -3391,7 +3391,7 @@ function irToHtmlTemplate(node, restSpreadNames, loopDepth = 0, loopParams, bran
           case "jsx-children": {
             const hoistedRecurse = (n) => irToHtmlTemplate(n, restSpreadNames, loopDepth, loopParams, branchSlotsVar, true);
             const childHtml = p.value.children.map((c) => hoistedRecurse(c)).join("");
-            return `${quotePropName(p.name)}: \`${childHtml}\``;
+            return p.name === "children" ? `${quotePropName(p.name)}: \`${childHtml}\`` : `${quotePropName(p.name)}: bfMarkup(\`${childHtml}\`)`;
           }
           case "literal":
             return `${quotePropName(p.name)}: ${JSON.stringify(p.value.value)}`;
@@ -3750,6 +3750,9 @@ function irChildrenToJsExpr(children) {
     return exprs[0];
   return `[${exprs.join(", ")}]`;
 }
+function isSingleElementJsxChildren(nodes) {
+  return nodes.length === 1 && nodes[0].type === "element";
+}
 function irNodeToJsExprs(node) {
   switch (node.type) {
     case "component": {
@@ -3758,8 +3761,11 @@ function irNodeToJsExprs(node) {
           return `${quotePropName(p.name)}: ${attrValueToString(p.value) ?? "undefined"}`;
         }
         switch (p.value.kind) {
-          case "jsx-children":
-            return `get ${quotePropName(p.name)}() { return ${irChildrenToJsExpr(p.value.children)} }`;
+          case "jsx-children": {
+            const jsxExpr = irChildrenToJsExpr(p.value.children);
+            const wrapped = p.name !== "children" && isSingleElementJsxChildren(p.value.children) ? `bfMarkup(${jsxExpr})` : jsxExpr;
+            return `get ${quotePropName(p.name)}() { return ${wrapped} }`;
+          }
           case "literal":
             return `get ${quotePropName(p.name)}() { return ${JSON.stringify(p.value.value)} }`;
           case "boolean-shorthand":
@@ -3818,8 +3824,8 @@ function isSingleRootElement(html) {
   const closingPattern = new RegExp(`</${tag}>\\s*$`);
   return closingPattern.test(html.trim());
 }
-function irToComponentTemplate(node, inlinableConstants, restSpreadNames, propsObjectName) {
-  return irToComponentTemplateWithOpts(node, { inlinableConstants, restSpreadNames, propsObjectName, loopDepth: -1 });
+function irToComponentTemplate(node, inlinableConstants, restSpreadNames, propsObjectName, markupSlotIds) {
+  return irToComponentTemplateWithOpts(node, { inlinableConstants, restSpreadNames, propsObjectName, loopDepth: -1, markupSlotIds });
 }
 function irToComponentTemplateWithOpts(node, opts) {
   const { inlinableConstants, restSpreadNames, propsObjectName, loopDepth = 0 } = opts;
@@ -3924,7 +3930,8 @@ function irToComponentTemplateWithOpts(node, opts) {
       const wrapped = transformExpr(node.expr, node.templateExpr);
       const value = node.joinArrayChild ? `Array.isArray(${wrapped}) ? ${wrapped}.join('') : (${wrapped} ?? '')` : wrapped;
       if (node.slotId) {
-        return `<!--bf:${node.slotId}-->\${${node.joinArrayChild ? value : escapeTextSlotExpr(wrapped)}}<!--/-->`;
+        const isMarkup = opts.markupSlotIds?.has(node.slotId) ?? false;
+        return `<!--bf:${node.slotId}-->\${${node.joinArrayChild ? value : escapeTextSlotExpr(wrapped, isMarkup)}}<!--/-->`;
       }
       return `\${${value}}`;
     }
@@ -3951,7 +3958,7 @@ function irToComponentTemplateWithOpts(node, opts) {
           case "jsx-children": {
             const hoistedRecurse = (n) => irToComponentTemplateWithOpts(n, { ...opts, inHoistedChildren: true });
             const childHtml = p.value.children.map((c) => hoistedRecurse(c)).join("");
-            return `${quotePropName(p.name)}: \`${childHtml}\``;
+            return p.name === "children" ? `${quotePropName(p.name)}: \`${childHtml}\`` : `${quotePropName(p.name)}: bfMarkup(\`${childHtml}\`)`;
           }
           case "literal":
             return `${quotePropName(p.name)}: ${JSON.stringify(p.value.value)}`;
@@ -4072,7 +4079,8 @@ function generateCsrTemplate(node, inlinableConstants, ctx, restSpreadNames, pro
     }
   }
   const effectiveUnsafeLocalNames = mergeCsrNullUnsafe(ctx, unsafeLocalNames);
-  return generateCsrTemplateWithOpts(node, { inlinableConstants, restSpreadNames, propsObjectName, csrEnv, unsafeLocalNames: effectiveUnsafeLocalNames, deferredChildSlots, loopDepth: -1 });
+  const markupSlotIds = new Set(ctx.dynamicElements.map((e) => e.slotId));
+  return generateCsrTemplateWithOpts(node, { inlinableConstants, restSpreadNames, propsObjectName, csrEnv, unsafeLocalNames: effectiveUnsafeLocalNames, deferredChildSlots, loopDepth: -1, markupSlotIds });
 }
 function mergeCsrNullUnsafe(ctx, unsafeLocalNames) {
   let merged = null;
@@ -4253,7 +4261,8 @@ function generateCsrTemplateWithOpts(node, opts) {
         const expr = transformed === UNSAFE_TEMPLATE_EXPR ? "''" : transformed;
         const value = node.joinArrayChild ? `Array.isArray(${expr}) ? ${expr}.join('') : (${expr} ?? '')` : expr;
         if (node.slotId) {
-          return `<!--bf:${node.slotId}-->\${${node.joinArrayChild ? value : escapeTextSlotExpr(expr)}}<!--/-->`;
+          const isMarkup = opts.markupSlotIds?.has(node.slotId) ?? false;
+          return `<!--bf:${node.slotId}-->\${${node.joinArrayChild ? value : escapeTextSlotExpr(expr, isMarkup)}}<!--/-->`;
         }
         return `\${${value}}`;
       }
@@ -4283,7 +4292,7 @@ function generateCsrTemplateWithOpts(node, opts) {
           case "jsx-children": {
             const hoistedRecurse = (n) => generateCsrTemplateWithOpts(n, { ...opts, inHoistedChildren: true });
             const childHtml = p.value.children.map((c) => hoistedRecurse(c)).join("");
-            return `${quotePropName(p.name)}: \`${childHtml}\``;
+            return p.name === "children" ? `${quotePropName(p.name)}: \`${childHtml}\`` : `${quotePropName(p.name)}: bfMarkup(\`${childHtml}\`)`;
           }
           case "literal":
             return `${quotePropName(p.name)}: ${JSON.stringify(p.value.value)}`;
@@ -13988,25 +13997,85 @@ var SVG_ROOT_TAGS = new Set([
   "animateTransform",
   "animateMotion"
 ]);
-function templateRootIsSvg(template) {
+var MATHML_ROOT_TAGS = new Set([
+  "math",
+  "mrow",
+  "mfrac",
+  "msup",
+  "msub",
+  "msubsup",
+  "mn",
+  "mi",
+  "mo",
+  "mtext",
+  "munder",
+  "mover",
+  "munderover",
+  "mtable",
+  "mtr",
+  "mtd",
+  "msqrt",
+  "mroot",
+  "mstyle",
+  "merror",
+  "mpadded",
+  "mphantom",
+  "menclose",
+  "semantics",
+  "annotation",
+  "annotation-xml"
+]);
+function namespaceForTag(tag) {
+  if (SVG_ROOT_TAGS.has(tag) || SVG_ROOT_TAGS.has(tag.toLowerCase()))
+    return "svg";
+  if (MATHML_ROOT_TAGS.has(tag) || MATHML_ROOT_TAGS.has(tag.toLowerCase()))
+    return "math";
+  return null;
+}
+function detectRootNamespaceWrapTag(template) {
   const stripped = stripLeadingNonContent(template);
   const m = stripped.match(/^<\s*([A-Za-z][A-Za-z0-9-]*)/);
-  if (m) {
-    const tag = m[1];
-    if (SVG_ROOT_TAGS.has(tag))
-      return true;
-    return SVG_ROOT_TAGS.has(tag.toLowerCase());
-  }
+  if (m)
+    return namespaceForTag(m[1]);
   const branches = extractConditionalBranchTemplates(stripped);
   if (branches === null || branches.length === 0)
-    return false;
-  return branches.every(templateRootIsSvg);
+    return null;
+  let result;
+  for (const branch of branches) {
+    const branchNs = detectRootNamespaceWrapTag(branch);
+    if (result === undefined) {
+      result = branchNs;
+    } else if (result !== branchNs) {
+      return null;
+    }
+  }
+  return result ?? null;
 }
-function multiRootTemplateNeedsSvgWrap(template) {
+function multiRootTemplateNeedsNamespaceWrap(template) {
   const m = stripLeadingNonContent(template).match(/^<\s*([A-Za-z][A-Za-z0-9-]*)/);
-  if (m && m[1].toLowerCase() === "svg")
-    return false;
-  return templateRootIsSvg(template);
+  if (m) {
+    const tagLower = m[1].toLowerCase();
+    if (tagLower === "svg" || tagLower === "math")
+      return null;
+  }
+  return detectRootNamespaceWrapTag(template);
+}
+function namespaceWrapForTemplate(template) {
+  const wrapTag = detectRootNamespaceWrapTag(template);
+  return {
+    wrapTag,
+    childPath: wrapTag ? ".firstElementChild.firstElementChild" : ".firstElementChild"
+  };
+}
+function multiRootNamespaceWrapForTemplate(template) {
+  const wrapTag = multiRootTemplateNeedsNamespaceWrap(template);
+  return {
+    wrapTag,
+    childPath: wrapTag ? ".firstElementChild" : ""
+  };
+}
+function wrapHtmlForNamespace(html, wrapTag) {
+  return wrapTag ? `<${wrapTag}>${html}</${wrapTag}>` : html;
 }
 function stripLeadingNonContent(template) {
   let s = template.trimStart();
@@ -14031,32 +14100,26 @@ function extractConditionalBranchTemplates(template) {
   return findTopLevelTemplateLiterals(expr);
 }
 function emitTemplateCloneInline(template) {
-  if (templateRootIsSvg(template)) {
-    return `const __tpl = document.createElement('template'); __tpl.innerHTML = \`<svg>${template}</svg>\`; return __tpl.content.firstElementChild.firstElementChild.cloneNode(true)`;
-  }
-  return `const __tpl = document.createElement('template'); __tpl.innerHTML = \`${template}\`; return __tpl.content.firstElementChild.cloneNode(true)`;
+  const { wrapTag, childPath } = namespaceWrapForTemplate(template);
+  const html = wrapHtmlForNamespace(template, wrapTag);
+  return `const __tpl = document.createElement('template'); __tpl.innerHTML = \`${html}\`; return __tpl.content${childPath}.cloneNode(true)`;
 }
 function emitHoistedTemplateDecl(lines, indent, tplVar, skeletonTemplate) {
-  const isSvg = templateRootIsSvg(skeletonTemplate);
-  const html = isSvg ? `<svg>${skeletonTemplate}</svg>` : skeletonTemplate;
+  const { wrapTag } = namespaceWrapForTemplate(skeletonTemplate);
+  const html = wrapHtmlForNamespace(skeletonTemplate, wrapTag);
   lines.push(`${indent}const ${tplVar} = document.createElement('template')`);
   lines.push(`${indent}${tplVar}.innerHTML = \`${html}\``);
 }
 function hoistedCloneExpr(tplVar, skeletonTemplate) {
-  return templateRootIsSvg(skeletonTemplate) ? `${tplVar}.content.firstElementChild.firstElementChild.cloneNode(true)` : `${tplVar}.content.firstElementChild.cloneNode(true)`;
+  return `${tplVar}.content${namespaceWrapForTemplate(skeletonTemplate).childPath}.cloneNode(true)`;
 }
 function emitTemplateCloneLines(template, indent) {
-  if (templateRootIsSvg(template)) {
-    return [
-      `${indent}const __tpl = document.createElement('template')`,
-      `${indent}__tpl.innerHTML = \`<svg>${template}</svg>\``,
-      `${indent}return __tpl.content.firstElementChild.firstElementChild.cloneNode(true)`
-    ];
-  }
+  const { wrapTag, childPath } = namespaceWrapForTemplate(template);
+  const html = wrapHtmlForNamespace(template, wrapTag);
   return [
     `${indent}const __tpl = document.createElement('template')`,
-    `${indent}__tpl.innerHTML = \`${template}\``,
-    `${indent}return __tpl.content.firstElementChild.cloneNode(true)`
+    `${indent}__tpl.innerHTML = \`${html}\``,
+    `${indent}return __tpl.content${childPath}.cloneNode(true)`
   ];
 }
 function emitLoopItemElementSetup(lines, opts) {
@@ -14088,9 +14151,9 @@ function emitLoopItemElementSetup(lines, opts) {
   lines.push(`${indent}})()${mountRow ? ")" : ""}`);
 }
 function emitMultiRootTemplateCloneLines(template, indent, varEl, varExtras) {
-  const isSvg = multiRootTemplateNeedsSvgWrap(template);
-  const innerHtmlExpr = isSvg ? `\`<svg>${template}</svg>\`` : `\`${template}\``;
-  const parentExpr = isSvg ? `__tpl.content.firstElementChild` : `__tpl.content`;
+  const { wrapTag, childPath } = multiRootNamespaceWrapForTemplate(template);
+  const innerHtmlExpr = `\`${wrapHtmlForNamespace(template, wrapTag)}\``;
+  const parentExpr = `__tpl.content${childPath}`;
   return [
     `${indent}const __tpl = document.createElement('template')`,
     `${indent}__tpl.innerHTML = ${innerHtmlExpr}`,
@@ -14321,6 +14384,9 @@ function jsxChildrenContainComponent(nodes) {
   }
   return false;
 }
+function isSingleElementJsxChildren2(nodes) {
+  return nodes.length === 1 && nodes[0].type === "element";
+}
 function buildRestSpreadNames(ctx) {
   const names = new Set;
   if (ctx.restPropsName)
@@ -14357,6 +14423,8 @@ function buildComponentPropsExpr(props, ctx) {
         const jsxExpr = irChildrenToJsExpr(prop.value.children);
         if (jsxChildrenContainComponent(prop.value.children)) {
           propsForInit.push(`get ${quotePropName(prop.name)}() { return __slot(() => ${jsxExpr}) }`);
+        } else if (prop.name !== "children" && isSingleElementJsxChildren2(prop.value.children)) {
+          propsForInit.push(`get ${quotePropName(prop.name)}() { return bfMarkup(${jsxExpr}) }`);
         } else {
           propsForInit.push(`get ${quotePropName(prop.name)}() { return ${jsxExpr} }`);
         }
@@ -14497,7 +14565,7 @@ function collectElements(node, ctx, siblingOffsets, insideConditional = false) {
             reactiveTextSlotIds: new Set(bindings.reactiveTexts.map((t) => t.slotId))
           };
           skeletonTemplate = buildLoopSkeletonTemplate(l.children[0], skeletonSafeSlots) ?? undefined;
-          if (skeletonTemplate && !templateRootIsSvg(skeletonTemplate)) {
+          if (skeletonTemplate && !detectRootNamespaceWrapTag(skeletonTemplate)) {
             skeletonPaths = computeSkeletonSlotPaths(l.children[0], skeletonSafeSlots) ?? undefined;
           }
         }
@@ -15416,6 +15484,8 @@ var RUNTIME_IMPORT_CANDIDATES = [
   "escapeAttr",
   "escapeText",
   "escapeTextOrNode",
+  "bfMarkup",
+  "escapeTextOrMarkup",
   "qsa",
   "qsaItem",
   "qsaChildScope",
@@ -16412,7 +16482,8 @@ function emitRegistrationAndHydration(lines, ctx, _ir, graph, inlinability) {
   const isCommentScope = _ir.root.type === "fragment" && _ir.root.needsScopeComment || _ir.root.type === "component";
   const defParts = [`init: init${name}`];
   if (canGenerateStaticTemplate(_ir.root, propNamesForStaticCheck, inlinableConstants, unsafeLocalNames)) {
-    const templateHtml = irToComponentTemplate(_ir.root, inlinableConstants, restSpreadNames, ctx.propsObjectName);
+    const markupSlotIds = new Set(ctx.dynamicElements.map((e) => e.slotId));
+    const templateHtml = irToComponentTemplate(_ir.root, inlinableConstants, restSpreadNames, ctx.propsObjectName, markupSlotIds);
     if (templateHtml) {
       defParts.push(buildTemplateDefPart(ctx, templateHtml));
     }
@@ -19638,9 +19709,8 @@ function stringifyBranchInnerLoops(lines, plan, indent, pc) {
       lines.push(`${indent}  ${inner.paramUnwrap}`);
     }
     {
-      const isSvg = templateRootIsSvg(inner.wrappedTemplate);
-      const innerHtml = isSvg ? `<svg>${inner.wrappedTemplate}</svg>` : inner.wrappedTemplate;
-      const childPath = isSvg ? ".firstElementChild.firstElementChild" : ".firstElementChild";
+      const { wrapTag, childPath } = namespaceWrapForTemplate(inner.wrappedTemplate);
+      const innerHtml = wrapTag ? `<${wrapTag}>${inner.wrappedTemplate}</${wrapTag}>` : inner.wrappedTemplate;
       lines.push(`${indent}  let __bel${uid} = __existing ?? (() => { const __t = document.createElement('template'); __t.innerHTML = \`${innerHtml}\`; return __t.content${childPath}.cloneNode(true) })()`);
     }
     if (inner.wrappedKey) {
@@ -20381,14 +20451,14 @@ function stringifyStaticLoop(lines, plan) {
   lines.push(`      let __iterEl = ${containerVar}.children[${childIndexExpr}]`);
   if (csrMaterialize) {
     lines.push(`      if (!__iterEl) {`);
-    const isSvg = csrMaterialize.bodyIsMultiRoot ? multiRootTemplateNeedsSvgWrap(csrMaterialize.itemTemplate) : templateRootIsSvg(csrMaterialize.itemTemplate);
-    const itemHtml = isSvg ? `<svg>${csrMaterialize.itemTemplate}</svg>` : csrMaterialize.itemTemplate;
+    const { wrapTag, childPath } = csrMaterialize.bodyIsMultiRoot ? multiRootNamespaceWrapForTemplate(csrMaterialize.itemTemplate) : namespaceWrapForTemplate(csrMaterialize.itemTemplate);
+    const itemHtml = wrapHtmlForNamespace(csrMaterialize.itemTemplate, wrapTag);
     if (csrMaterialize.bodyIsMultiRoot) {
       lines.push(`        const __mtpl = document.createElement('template')`);
       lines.push(`        __mtpl.innerHTML = \`${itemHtml}\``);
       lines.push(`        const __anchor = ${containerVar}.children[${childIndexExpr}] ?? null`);
       lines.push(`        let __first = null`);
-      lines.push(`        let __sib = __mtpl.content${isSvg ? ".firstElementChild" : ""}.firstElementChild`);
+      lines.push(`        let __sib = __mtpl.content${childPath}.firstElementChild`);
       lines.push(`        while (__sib) {`);
       lines.push(`          const __next = __sib.nextElementSibling`);
       lines.push(`          const __cloned = __sib.cloneNode(true)`);
@@ -20400,7 +20470,7 @@ function stringifyStaticLoop(lines, plan) {
     } else {
       lines.push(`        const __tpl = document.createElement('template')`);
       lines.push(`        __tpl.innerHTML = \`${itemHtml}\``);
-      lines.push(`        const __cloned = __tpl.content${isSvg ? ".firstElementChild" : ""}.firstElementChild`);
+      lines.push(`        const __cloned = __tpl.content${childPath}`);
       lines.push(`        if (__cloned) {`);
       lines.push(`          const __anchor = ${containerVar}.children[${childIndexExpr}] ?? null`);
       lines.push(`          ${containerVar}.insertBefore(__cloned, __anchor)`);
@@ -20470,9 +20540,8 @@ function emitReactive(lines, inner, indent, pc) {
     lines.push(`${innerIndent}  __innerEl${uid}.__bfExtras = __innerExtras${uid}`);
     lines.push(`${indent}  }`);
   } else {
-    const isSvg = templateRootIsSvg(emit.wrappedTemplate);
-    const innerHtml = isSvg ? `<svg>${emit.wrappedTemplate}</svg>` : emit.wrappedTemplate;
-    const childPath = isSvg ? ".firstElementChild.firstElementChild" : ".firstElementChild";
+    const { wrapTag, childPath } = namespaceWrapForTemplate(emit.wrappedTemplate);
+    const innerHtml = wrapTag ? `<${wrapTag}>${emit.wrappedTemplate}</${wrapTag}>` : emit.wrappedTemplate;
     lines.push(`${indent}  let __innerEl${uid} = __existing ?? (() => { const __t = document.createElement('template'); __t.innerHTML = \`${innerHtml}\`; return __t.content${childPath}.cloneNode(true) })()`);
   }
   if (emit.wrappedKey) {
@@ -21798,7 +21867,8 @@ function generateTemplateOnlyMount(ir, ctx) {
     restSpreadNames.add(ctx.propsObjectName);
   let templateHtml;
   if (canGenerateStaticTemplate(ir.root, propNamesForStaticCheck, inlinableConstants, unsafeLocalNames)) {
-    templateHtml = irToComponentTemplate(ir.root, inlinableConstants, restSpreadNames, ctx.propsObjectName);
+    const markupSlotIds = new Set(ctx.dynamicElements.map((e) => e.slotId));
+    templateHtml = irToComponentTemplate(ir.root, inlinableConstants, restSpreadNames, ctx.propsObjectName, markupSlotIds);
   }
   if (!templateHtml) {
     const csrInlinableConstants = csrInlinableConstantsFromCtx(ctx);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@barefootjs/vite",
-  "version": "0.31.8",
+  "version": "0.31.9",
   "description": "Vite plugin for BarefootJS: Vite/Rollup owns bundling, hashing, chunking, tree-shaking and minification of client assets, BarefootJS keeps only the JSX to (template, client JS) compile",
   "type": "module",
   "main": "./dist/index.js",
@@ -38,17 +38,17 @@
     "directory": "packages/vite"
   },
   "dependencies": {
-    "@barefootjs/shared": "0.31.8"
+    "@barefootjs/shared": "0.31.9"
   },
   "peerDependencies": {
     "@barefootjs/jsx": ">=0.2.0",
     "vite": "^6.0.0"
   },
   "devDependencies": {
-    "@barefootjs/client": "0.31.8",
-    "@barefootjs/go-template": "0.31.8",
-    "@barefootjs/hono": "0.31.8",
-    "@barefootjs/jsx": "0.31.8",
+    "@barefootjs/client": "0.31.9",
+    "@barefootjs/go-template": "0.31.9",
+    "@barefootjs/hono": "0.31.9",
+    "@barefootjs/jsx": "0.31.9",
     "typescript": "^5.0.0",
     "vite": "^6.0.0"
   }