@vuecast/astro-module 1.0.1 → 1.0.4

package/README.md

@@ -1,86 +1,93 @@
-# @vuecast/astro-module
+# `@vuecast/astro-module` (for Vue-SFC lovers)
 
-Write Vue Single File Components (`.vue` files) in your Astro projects.
+Write Vue-template syntax inside `.astro` files in your Astro projects instead of Astro's JSX syntax.
 
 ## Features
 
-- Use `.vue` files as pages in your Astro project
-- Full Vue SFC support with all Vue features
+- Use Vue-template syntax inside `.astro` files
+- Supports common Vue template features like `v-if`, `v-for`, `:bind`, and `{{ ... }}`
 - Seamless integration with Astro's build system
-- Ensures proper head rendering support
+- Keeps Astro frontmatter intact
 
 ## Prerequisites
 
 First, scaffold a new Astro project:
 
 ```bash
-npm create astro@latest
+npm create astro@latest # or pnpm, bun
 ```
 
-Install the official Astro Vue integration:
-
-```bash
-npx astro add vue
-```
+You do not need the Astro Vue integration unless you plan to use Vue components or `.vue` files in your project. See the [Astro Vue integration guide](https://docs.astro.build/en/guides/integrations-guide/vue/).
 
 ## Installation
 
 ```bash
-pnpm add @vuecast/astro-module
-# or
 npm install @vuecast/astro-module
-# or
-yarn add @vuecast/astro-module
+# or pnpm add @vuecast/astro-module
+# or bun add @vuecast/astro-module
 ```
 
 ## Usage
 
-1. Add the integration to your `astro.config.mjs`. Note that `@vuecast/astro-module` must be added after the Vue integration:
+1. Add the integration to your `astro.config.mjs`:
 
 ```js
 import { defineConfig } from "astro/config";
-import vue from "@astrojs/vue";
 import vuecast from "@vuecast/astro-module";
 
 export default defineConfig({
-  integrations: [
-    vue(), // Vue integration must come first
-    vuecast(), // Then add VueCast
-  ],
+  integrations: [vuecast()],
 });
 ```
 
-2. Create `.vue` files in your `src/pages` directory:
+2. Create `.astro` files in your `src/pages` directory and use Vue-template syntax below the frontmatter:
 
-```vue
-<!-- src/pages/index.vue -->
-<script setup lang="ts">
+```astro
+<!-- src/pages/index.astro -->
+---
+const isLoggedIn = true;
 const fruits = ["apples", "oranges", "bananas", "cherries", "grapes"];
-</script>
-
-<template>
-  <div>
-    <h1>Hello from VueCast!</h1>
-    <ul>
-      <li v-for="(fruit, index) in fruits" :key="index">
-        {{ index + 1 }}: {{ fruit }}
-      </li>
-    </ul>
-  </div>
-</template>
+---
+
+<div>
+  <p v-if="isLoggedIn">Welcome back!</p>
+  <h1>Hello from VueCast!</h1>
+  <ul>
+    <li v-for="(fruit, index) in fruits" :key="index" :data-name="fruit">
+      {{ index + 1 }}: {{ fruit }}
+    </li>
+  </ul>
+</div>
+```
 
-<style scoped>
-/* Your component styles here */
-</style>
+Transformed output (Astro JSX-style):
+
+```astro
+<div>
+  {isLoggedIn ? (<p>Welcome back!</p>) : null}
+  <h1>Hello from VueCast!</h1>
+  <ul>
+    {fruits.map((fruit, index) => (
+      <li key={index} data-name={fruit}>
+        {index + 1}: {fruit}
+      </li>
+    ))}
+  </ul>
+</div>
 ```
 
+Notes:
+
+- Supported directives: `v-if`, `v-for`, `:bind`, and `{{ ... }}` interpolation.
+- `@click` (and other event handlers) are not executed in plain Astro HTML. They only work inside hydrated islands; the transform preserves them as data attributes (e.g. `data-on-click`) for later use.
+
 ## How it Works
 
 The integration:
 
-1. Registers `.vue` as a valid page extension in Astro
-2. Sets up the Vue renderer for processing `.vue` files
-3. Ensures proper head rendering support for Vue components
+1. Detects Vue-template syntax inside `.astro` files
+2. Converts Vue template syntax to Astro/JSX-compatible syntax
+3. Keeps frontmatter unchanged
 4. Integrates with Astro's build system through Vite
 
 ## License

package/dist/index.d.mts

@@ -1,8 +1,11 @@
-import { AstroIntegration } from 'astro';
+import { HookParameters } from 'astro';
 
-interface VuecastAstroPluginOptions {
-}
+type SetupHookParams = HookParameters<"astro:config:setup">;
+declare function VuecastAstro(): {
+    name: string;
+    hooks: {
+        "astro:config:setup": (params: SetupHookParams) => Promise<void>;
+    };
+};
 
-declare function vuecastAstroIntegration(options: VuecastAstroPluginOptions): AstroIntegration;
-
-export { vuecastAstroIntegration as VuecastAstro, vuecastAstroIntegration as default };
+export { VuecastAstro, VuecastAstro as default };

package/dist/index.d.ts

@@ -1,8 +1,11 @@
-import { AstroIntegration } from 'astro';
+import { HookParameters } from 'astro';
 
-interface VuecastAstroPluginOptions {
-}
+type SetupHookParams = HookParameters<"astro:config:setup">;
+declare function VuecastAstro(): {
+    name: string;
+    hooks: {
+        "astro:config:setup": (params: SetupHookParams) => Promise<void>;
+    };
+};
 
-declare function vuecastAstroIntegration(options: VuecastAstroPluginOptions): AstroIntegration;
-
-export { vuecastAstroIntegration as VuecastAstro, vuecastAstroIntegration as default };
+export { VuecastAstro, VuecastAstro as default };

package/dist/index.mjs

@@ -1,27 +1,179 @@
-function vuecastAstroIntegration(options) {
+import { baseParse, NodeTypes } from '@vue/compiler-dom';
+
+function vueTemplateAstroTransform(code, id = "Component.astro") {
+  const split = splitAstroFrontmatter(code);
+  if (!split)
+    return null;
+  const { frontmatterBlock, templatePart } = split;
+  if (!isVueTemplate(templatePart))
+    return null;
+  const vueAst = baseParse(templatePart, { comments: true });
+  const astroTemplate = genChildren(vueAst.children).trimEnd();
   return {
-    name: "@vuecast/astro",
+    code: `${frontmatterBlock}
+${astroTemplate}
+`
+  };
+}
+function splitAstroFrontmatter(code) {
+  if (!code.startsWith("---"))
+    return null;
+  const fence = "\n---";
+  const end = code.indexOf(fence, 3);
+  if (end === -1)
+    return null;
+  const frontmatterBlock = code.slice(0, end + fence.length);
+  const templatePart = code.slice(end + fence.length).replace(/^\r?\n/, "");
+  return { frontmatterBlock, templatePart };
+}
+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))
+    return true;
+  if (/(?:\s|<)[:@][a-zA-Z]/.test(template))
+    return true;
+  return false;
+}
+function genChildren(children) {
+  return children.map(genNode).join("");
+}
+function genNode(node) {
+  switch (node.type) {
+    case NodeTypes.TEXT:
+      return node.content;
+    case NodeTypes.INTERPOLATION:
+      return `{${node.content.content}}`;
+    case NodeTypes.ELEMENT:
+      return genElement(node);
+    case NodeTypes.COMMENT:
+      return `<!--${node.content}-->`;
+    default:
+      return "";
+  }
+}
+function genElement(el) {
+  const tag = el.tag;
+  const { attrs, vIf, vElseIf, vElse, vFor } = splitDirectives(el.props);
+  if (vFor) {
+    const { source, value, index } = parseVFor(vFor.exp?.content ?? "");
+    const inner = genPlainElement(tag, attrs, el.children);
+    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);
+    return `{${cond} ? (${thenBranch}) : null}`;
+  }
+  if (vElseIf || vElse) {
+    return genPlainElement(tag, attrs, el.children);
+  }
+  return genPlainElement(tag, attrs, el.children);
+}
+function genPlainElement(tag, props, children) {
+  const attrStr = props.map(genAttr).join("");
+  const inner = genChildren(children);
+  return `<${tag}${attrStr}>${inner}</${tag}>`;
+}
+function genAttr(p) {
+  if (p.type === NodeTypes.ATTRIBUTE) {
+    if (!p.value)
+      return ` ${p.name}`;
+    return ` ${p.name}="${escapeAttr(p.value.content)}"`;
+  }
+  if (p.type === NodeTypes.DIRECTIVE && p.name === "bind") {
+    const name = p.arg?.content;
+    if (!name)
+      return "";
+    const expr = p.exp?.content ?? "true";
+    return ` ${name}={${expr}}`;
+  }
+  if (p.type === NodeTypes.DIRECTIVE && p.name === "on") {
+    const evt = p.arg?.content ?? "event";
+    const expr = p.exp?.content ?? "";
+    return ` data-on-${evt}="${escapeAttr(expr)}"`;
+  }
+  return "";
+}
+function splitDirectives(props) {
+  const attrs = [];
+  let vIf = null;
+  let vElseIf = null;
+  let vElse = null;
+  let vFor = null;
+  for (const p of props) {
+    if (p.type === NodeTypes.DIRECTIVE) {
+      if (p.name === "if")
+        vIf = p;
+      else if (p.name === "else-if")
+        vElseIf = p;
+      else if (p.name === "else")
+        vElse = p;
+      else if (p.name === "for")
+        vFor = p;
+      else
+        attrs.push(p);
+    } else {
+      attrs.push(p);
+    }
+  }
+  return { attrs, vIf, vElseIf, vElse, vFor };
+}
+function parseVFor(exp) {
+  const m = exp.match(/^\s*(.+?)\s+in\s+(.+)\s*$/);
+  if (!m)
+    return { source: exp, value: "item", index: null };
+  const lhs = m[1].trim();
+  const source = m[2].trim();
+  if (lhs.startsWith("(") && lhs.endsWith(")")) {
+    const parts = lhs.slice(1, -1).split(",").map((s) => s.trim());
+    return {
+      source,
+      value: parts[0] || "item",
+      index: parts[1] || null
+    };
+  }
+  return { source, value: lhs || "item", index: null };
+}
+function escapeAttr(s) {
+  return String(s).replace(/&/g, "&amp;").replace(/"/g, "&quot;");
+}
+
+function vueTemplatePreAstroPlugin() {
+  return {
+    name: "vuecast-vue-template-pre-astro",
+    enforce: "pre",
+    configResolved(config) {
+      const plugins = config.plugins;
+      const idx = plugins.findIndex(
+        (p) => p && typeof p === "object" && "name" in p && p.name === "vuecast-vue-template-pre-astro"
+      );
+      if (idx > 0) {
+        const [self] = plugins.splice(idx, 1);
+        plugins.unshift(self);
+      }
+    },
+    async transform(code, id) {
+      const [filepath] = id.split("?");
+      if (!filepath.endsWith(".astro"))
+        return null;
+      const res = vueTemplateAstroTransform(code, filepath);
+      return res ? res.code : null;
+    }
+  };
+}
+
+function VuecastAstro() {
+  return {
+    name: "@vuecast/astro-vue-template",
     hooks: {
       "astro:config:setup": async (params) => {
-        const { updateConfig, addPageExtension, addRenderer } = params;
-        addRenderer({
-          name: "vuecast:astro",
-          serverEntrypoint: "./node_modules/@astrojs/vue/dist/server.js"
-        });
-        addPageExtension(".vue");
-        updateConfig({
+        const existingPlugins = params.config.vite?.plugins;
+        const normalizedPlugins = Array.isArray(existingPlugins) ? existingPlugins : existingPlugins ? [existingPlugins] : [];
+        params.updateConfig({
           vite: {
-            plugins: [{
-              name: "vuecast-post",
-              async transform(code, id) {
-                if (!id.endsWith(".vue"))
-                  return;
-                const regex = /(\]\))(;?\n?)$/;
-                const replacement = ",[Symbol.for('astro.needsHeadRendering'),true]$1";
-                code = code.replace(regex, replacement);
-                return code;
-              }
-            }]
+            plugins: [vueTemplatePreAstroPlugin(), ...normalizedPlugins]
           }
         });
       }
@@ -29,4 +181,4 @@ function vuecastAstroIntegration(options) {
   };
 }
 
-export { vuecastAstroIntegration as VuecastAstro, vuecastAstroIntegration as default };
+export { VuecastAstro, VuecastAstro as default };

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@vuecast/astro-module",
-  "version": "1.0.1",
+  "version": "1.0.4",
   "type": "module",
-  "description": "Astro integration for Vue SFC pages",
+  "description": "Astro integration for Vue template syntax in .astro pages",
   "main": "./dist/index.mjs",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
@@ -33,5 +33,8 @@
   "license": "MIT",
   "devDependencies": {
     "unbuild": "^2.0.0"
+  },
+  "dependencies": {
+    "@vue/compiler-dom": "^3.5.27"
   }
 }