@vuecast/astro-module 1.0.4 → 1.0.5

package/dist/index.mjs

@@ -29,14 +29,43 @@ function splitAstroFrontmatter(code) {
 function isVueTemplate(template) {
   if (/\{\{\s*[^}]+?\s*\}\}/.test(template))
     return true;
-  if (/\sv-(if|else-if|else|for|show|model|bind|on|slot)\b/.test(template))
+  if (/\sv-(if|else-if|else|for|show|model|bind|on|slot|html|text)\b/.test(template))
     return true;
   if (/(?:\s|<)[:@][a-zA-Z]/.test(template))
     return true;
   return false;
 }
 function genChildren(children) {
-  return children.map(genNode).join("");
+  let out = "";
+  for (let i = 0; i < children.length; i++) {
+    const node = children[i];
+    if (node.type === NodeTypes.ELEMENT && hasDirective(node, "if")) {
+      const chain = [
+        { node, type: "if" }
+      ];
+      let j = i + 1;
+      for (; j < children.length; j++) {
+        const sib = children[j];
+        if (sib.type !== NodeTypes.ELEMENT)
+          break;
+        if (hasDirective(sib, "else-if")) {
+          chain.push({ node: sib, type: "else-if" });
+          continue;
+        }
+        if (hasDirective(sib, "else")) {
+          chain.push({ node: sib, type: "else" });
+          j++;
+          break;
+        }
+        break;
+      }
+      out += genIfChain(chain);
+      i = j - 1;
+      continue;
+    }
+    out += genNode(node);
+  }
+  return out;
 }
 function genNode(node) {
   switch (node.type) {
@@ -54,25 +83,37 @@ function genNode(node) {
 }
 function genElement(el) {
   const tag = el.tag;
-  const { attrs, vIf, vElseIf, vElse, vFor } = splitDirectives(el.props);
+  const { attrs, vIf, vElseIf, vElse, vFor, vShow, vText, vHtml } = splitDirectives(el.props);
   if (vFor) {
     const { source, value, index } = parseVFor(vFor.exp?.content ?? "");
-    const inner = genPlainElement(tag, attrs, el.children);
+    const inner = genPlainElement(tag, attrs, el.children, { vShow, vText, vHtml });
     const args = index ? `${value}, ${index}` : value;
     return `{${source}.map((${args}) => (${inner}))}`;
   }
   if (vIf) {
     const cond = vIf.exp?.content ?? "false";
-    const thenBranch = genPlainElement(tag, attrs, el.children);
+    const thenBranch = genPlainElement(tag, attrs, el.children, { vShow, vText, vHtml });
     return `{${cond} ? (${thenBranch}) : null}`;
   }
   if (vElseIf || vElse) {
-    return genPlainElement(tag, attrs, el.children);
+    return genPlainElement(tag, attrs, el.children, { vShow, vText, vHtml });
   }
-  return genPlainElement(tag, attrs, el.children);
+  return genPlainElement(tag, attrs, el.children, { vShow, vText, vHtml });
 }
-function genPlainElement(tag, props, children) {
-  const attrStr = props.map(genAttr).join("");
+function genPlainElement(tag, props, children, extras) {
+  let attrs = props;
+  if (extras?.vShow)
+    attrs = applyVShow(attrs, extras.vShow);
+  let attrStr = attrs.map(genAttr).join("");
+  if (extras?.vHtml) {
+    const expr = extras.vHtml.exp?.content ?? "''";
+    attrStr += ` set:html={${expr}}`;
+    children = [];
+  } else if (extras?.vText) {
+    const expr = extras.vText.exp?.content ?? "''";
+    attrStr += ` set:text={${expr}}`;
+    children = [];
+  }
   const inner = genChildren(children);
   return `<${tag}${attrStr}>${inner}</${tag}>`;
 }
@@ -80,12 +121,20 @@ function genAttr(p) {
   if (p.type === NodeTypes.ATTRIBUTE) {
     if (!p.value)
       return ` ${p.name}`;
-    return ` ${p.name}="${escapeAttr(p.value.content)}"`;
+    const raw = p.value.content ?? "";
+    if (/\$\{[^}]+?\}/.test(raw)) {
+      const trimmed = raw.startsWith("`") && raw.endsWith("`") ? raw.slice(1, -1) : raw;
+      const safe = trimmed.replace(/`/g, "\\`");
+      return ` ${p.name}={\`${safe}\`}`;
+    }
+    return ` ${p.name}="${escapeAttr(raw)}"`;
   }
   if (p.type === NodeTypes.DIRECTIVE && p.name === "bind") {
     const name = p.arg?.content;
-    if (!name)
-      return "";
+    if (!name) {
+      const expr2 = p.exp?.content ?? "{}";
+      return ` {...${expr2}}`;
+    }
     const expr = p.exp?.content ?? "true";
     return ` ${name}={${expr}}`;
   }
@@ -102,6 +151,9 @@ function splitDirectives(props) {
   let vElseIf = null;
   let vElse = null;
   let vFor = null;
+  let vShow = null;
+  let vText = null;
+  let vHtml = null;
   for (const p of props) {
     if (p.type === NodeTypes.DIRECTIVE) {
       if (p.name === "if")
@@ -112,13 +164,19 @@ function splitDirectives(props) {
         vElse = p;
       else if (p.name === "for")
         vFor = p;
+      else if (p.name === "show")
+        vShow = p;
+      else if (p.name === "text")
+        vText = p;
+      else if (p.name === "html")
+        vHtml = p;
       else
         attrs.push(p);
     } else {
       attrs.push(p);
     }
   }
-  return { attrs, vIf, vElseIf, vElse, vFor };
+  return { attrs, vIf, vElseIf, vElse, vFor, vShow, vText, vHtml };
 }
 function parseVFor(exp) {
   const m = exp.match(/^\s*(.+?)\s+in\s+(.+)\s*$/);
@@ -139,6 +197,95 @@ function parseVFor(exp) {
 function escapeAttr(s) {
   return String(s).replace(/&/g, "&amp;").replace(/"/g, "&quot;");
 }
+function hasDirective(node, name) {
+  return !!node.props?.some(
+    (p) => p.type === NodeTypes.DIRECTIVE && p.name === name
+  );
+}
+function genIfChain(chain) {
+  const parts = chain.map((item) => {
+    const split = splitDirectives(item.node.props);
+    const branch = genElementFromSplit(item.node, split, { ignoreIf: true });
+    const cond = item.type === "else" ? null : item.type === "if" ? split.vIf?.exp?.content ?? "false" : split.vElseIf?.exp?.content ?? "false";
+    return { cond, branch };
+  });
+  let expr = "";
+  for (let i = 0; i < parts.length; i++) {
+    const { cond, branch } = parts[i];
+    if (i === 0) {
+      expr = `${cond} ? (${branch}) : `;
+    } else if (cond) {
+      expr += `${cond} ? (${branch}) : `;
+    } else {
+      expr += `(${branch})`;
+    }
+  }
+  if (!parts.some((p) => p.cond === null))
+    expr += "null";
+  return `{${expr}}`;
+}
+function genElementFromSplit(el, split, opts) {
+  const tag = el.tag;
+  const { attrs, vIf, vElseIf, vElse, vFor, vShow, vText, vHtml } = split;
+  if (vFor) {
+    const { source, value, index } = parseVFor(vFor.exp?.content ?? "");
+    const inner = genPlainElement(tag, attrs, el.children, { vShow, vText, vHtml });
+    const args = index ? `${value}, ${index}` : value;
+    return `{${source}.map((${args}) => (${inner}))}`;
+  }
+  if (!opts?.ignoreIf && vIf) {
+    const cond = vIf.exp?.content ?? "false";
+    const thenBranch = genPlainElement(tag, attrs, el.children, {
+      vShow,
+      vText,
+      vHtml
+    });
+    return `{${cond} ? (${thenBranch}) : null}`;
+  }
+  if (!opts?.ignoreIf && (vElseIf || vElse)) {
+    return genPlainElement(tag, attrs, el.children, { vShow, vText, vHtml });
+  }
+  return genPlainElement(tag, attrs, el.children, { vShow, vText, vHtml });
+}
+function applyVShow(attrs, vShow) {
+  const showExpr = vShow.exp?.content ?? "false";
+  const showStyleExpr = `(${showExpr}) ? '' : 'display: none;'`;
+  const next = [...attrs];
+  const styleIdx = next.findIndex((p) => {
+    if (p.type === NodeTypes.ATTRIBUTE)
+      return p.name === "style";
+    return p.type === NodeTypes.DIRECTIVE && p.name === "bind" && p.arg?.content === "style";
+  });
+  if (styleIdx === -1) {
+    next.push({
+      type: NodeTypes.DIRECTIVE,
+      name: "bind",
+      arg: { content: "style" },
+      exp: { content: showStyleExpr }
+    });
+    return next;
+  }
+  const styleProp = next[styleIdx];
+  if (styleProp.type === NodeTypes.ATTRIBUTE) {
+    const base = styleProp.value?.content ?? "";
+    const sep = base && !/;\s*$/.test(base) ? ";" : "";
+    const safe = base.replace(/`/g, "\\`");
+    const merged = `\`${safe}${sep}\${${showExpr} ? '' : 'display: none;'}\``;
+    next[styleIdx] = {
+      type: NodeTypes.DIRECTIVE,
+      name: "bind",
+      arg: { content: "style" },
+      exp: { content: merged }
+    };
+    return next;
+  }
+  const baseExpr = styleProp.exp?.content ?? "''";
+  styleProp.exp = {
+    content: `(${baseExpr} ?? '') + (${showStyleExpr})`
+  };
+  next[styleIdx] = styleProp;
+  return next;
+}
 
 function vueTemplatePreAstroPlugin() {
   return {
@@ -166,7 +313,7 @@ function vueTemplatePreAstroPlugin() {
 
 function VuecastAstro() {
   return {
-    name: "@vuecast/astro-vue-template",
+    name: "@vuecast/astro-module",
     hooks: {
       "astro:config:setup": async (params) => {
         const existingPlugins = params.config.vite?.plugins;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vuecast/astro-module",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "type": "module",
   "description": "Astro integration for Vue template syntax in .astro pages",
   "main": "./dist/index.mjs",
@@ -18,6 +18,8 @@
   ],
   "scripts": {
     "build": "unbuild",
+    "test": "vitest run",
+    "test:watch": "vitest",
     "publish-beta": "npm run build && npm run increment-beta-version && npm publish --tag beta",
     "increment-beta-version": "npm version prerelease --preid=beta",
     "publish-patch": "npm run build && npm run increment-version && npm publish",
@@ -32,6 +34,7 @@
   "author": "",
   "license": "MIT",
   "devDependencies": {
+    "vitest": "^1.3.1",
     "unbuild": "^2.0.0"
   },
   "dependencies": {