@volpe/astro-svelte-spa 0.1.0

package/README.md

@@ -0,0 +1,61 @@
+# @volpe/astro-svelte-spa
+
+Vite plugin for file-based routing with svelte5-router in Astro.
+
+## Features
+
+- File-based routing with `page.svelte` and `layout.svelte`
+- Auto-generates `App.svelte`, `Link.svelte`, `[...path].astro`, `page.svelte`, and `404.svelte`
+- Virtual module `virtual:svelte-routes` with typed routes
+- `SvelteAppRoutes` type for autocomplete
+- 404 handling with `StatusCode.NotFound`
+- HMR support with full reload on changes
+
+## Installation
+
+```bash
+npm install @volpe/astro-svelte-spa @mateothegreat/svelte5-router
+```
+
+## Usage
+
+```js
+// astro.config.mjs
+import { defineConfig } from "astro/config"
+import svelte from "@astrojs/svelte"
+import { astroSvelteSpa } from "@volpe/astro-svelte-spa"
+
+export default defineConfig({
+  integrations: [svelte()],
+  vite: {
+    plugins: [astroSvelteSpa({ basePath: "/app" })]
+  }
+})
+```
+
+## File Structure
+
+```
+src/
+  pages/
+    svelte-app/           # or your custom basePath
+      page.svelte         # -> /svelte-app
+      404.svelte          # -> catch-all 404
+      [...path].astro     # Astro catch-all
+      about/
+        page.svelte       # -> /svelte-app/about
+      settings/
+        page.svelte       # -> /svelte-app/settings
+        layout.svelte     # wraps settings pages
+  components/
+    App.svelte            # auto-generated
+    Link.svelte           # auto-generated
+```
+
+## Options
+
+- `basePath` (string, default: `"/svelte-app"`): Base path for all routes
+
+## License
+
+MIT

package/index.d.ts

@@ -0,0 +1,37 @@
+import type { Plugin } from "vite";
+
+export interface AstroSvelteSpaOptions {
+  /**
+   * Base path for all routes.
+   * When set to "/app", the plugin scans `src/pages/app/` and routes start with "/app".
+   * @default "/svelte-app"
+   */
+  basePath?: string;
+}
+
+/**
+ * Vite plugin for file-based routing with svelte5-router in Astro.
+ *
+ * Features:
+ * - File-based routing with `page.svelte` and `layout.svelte`
+ * - Auto-generates `App.svelte`, `Link.svelte`, `[...path].astro`, `page.svelte`, and `404.svelte`
+ * - Virtual module `virtual:svelte-routes` with typed routes
+ * - `SvelteAppRoutes` type for autocomplete
+ * - 404 handling with StatusCode.NotFound
+ * - HMR support with full reload on changes
+ *
+ * @example
+ * ```js
+ * // astro.config.mjs
+ * import { astroSvelteSpa } from "@volpe/astro-svelte-spa"
+ *
+ * export default defineConfig({
+ *   vite: {
+ *     plugins: [astroSvelteSpa({ basePath: "/app" })]
+ *   }
+ * })
+ * ```
+ */
+export function astroSvelteSpa(options?: AstroSvelteSpaOptions): Plugin;
+
+export default astroSvelteSpa;

package/index.js

@@ -0,0 +1,444 @@
+import fs from "node:fs";
+import path from "node:path";
+
+const VIRTUAL_MODULE_ID = "virtual:svelte-routes";
+const RESOLVED_VIRTUAL_MODULE_ID = "\0" + VIRTUAL_MODULE_ID;
+
+/**
+ * @typedef {Object} RouteNode
+ * @property {string} path
+ * @property {string} [page]
+ * @property {string} [layout]
+ * @property {RouteNode[]} children
+ */
+
+/**
+ * @param {string} dir
+ * @param {string} basePath
+ * @returns {RouteNode}
+ */
+function scanPages(dir, basePath = "") {
+  const node = {
+    path: basePath || "/",
+    children: [],
+  };
+
+  if (!fs.existsSync(dir)) return node;
+
+  const entries = fs.readdirSync(dir, { withFileTypes: true });
+
+  for (const entry of entries) {
+    const fullPath = path.join(dir, entry.name);
+
+    if (entry.isFile()) {
+      if (entry.name === "page.svelte") {
+        node.page = fullPath;
+      } else if (entry.name === "layout.svelte") {
+        node.layout = fullPath;
+      }
+    } else if (entry.isDirectory() && !entry.name.startsWith("[") && !entry.name.startsWith("_")) {
+      const childPath = basePath ? `${basePath}/${entry.name}` : `/${entry.name}`;
+      const childNode = scanPages(fullPath, childPath);
+      if (childNode.page || childNode.layout || childNode.children.length > 0) {
+        node.children.push(childNode);
+      }
+    }
+  }
+
+  return node;
+}
+
+/**
+ * @param {RouteNode} node
+ * @param {string[]} paths
+ * @returns {string[]}
+ */
+function collectPaths(node, paths = []) {
+  if (node.page) {
+    paths.push(node.path);
+  }
+  for (const child of node.children) {
+    collectPaths(child, paths);
+  }
+  return paths;
+}
+
+/**
+ * @param {RouteNode} node
+ * @param {Map<string, string>} imports
+ * @param {{ value: number }} counter
+ */
+function generateImports(node, imports, counter = { value: 0 }) {
+  if (node.layout) {
+    const name = `Layout${counter.value++}`;
+    imports.set(node.layout, name);
+  }
+  if (node.page) {
+    const name = `Page${counter.value++}`;
+    imports.set(node.page, name);
+  }
+  for (const child of node.children) {
+    generateImports(child, imports, counter);
+  }
+}
+
+/**
+ * @param {string} routePath
+ * @param {string} basePath
+ * @returns {string}
+ */
+function applyBasePath(routePath, basePath) {
+  if (!basePath) return routePath;
+  if (routePath === "/") return basePath;
+  return basePath + routePath;
+}
+
+/**
+ * @param {RouteNode} node
+ * @param {Map<string, string>} imports
+ * @returns {string[]}
+ */
+function generateRoutes(node, imports) {
+  const routes = [];
+
+  // Use relative paths (basePath is handled by Router component)
+  const routePath = node.path;
+  const layoutName = node.layout ? imports.get(node.layout) : null;
+  const pageName = node.page ? imports.get(node.page) : null;
+
+  // Add page route
+  if (pageName) {
+    if (layoutName) {
+      // With layout - use children
+      routes.push(`{
+    path: "${routePath}",
+    component: ${layoutName},
+    children: [
+      { path: "${routePath}", component: async () => import("${node.page}") }
+    ]
+  }`);
+    } else {
+      // No layout - simple route with async loading
+      routes.push(`{
+    path: "${routePath}",
+    component: async () => import("${node.page}")
+  }`);
+    }
+  }
+
+  // Add children routes
+  for (const child of node.children) {
+    routes.push(...generateRoutes(child, imports));
+  }
+
+  return routes;
+}
+
+/**
+ * @param {string} pagesDir
+ * @param {string} basePath
+ * @returns {string}
+ */
+function generateRoutesModule(pagesDir, basePath) {
+  const tree = scanPages(pagesDir);
+  const imports = new Map();
+  generateImports(tree, imports);
+
+  // Import layouts (pages are loaded async)
+  const layoutImports = Array.from(imports.entries())
+    .filter(([filePath]) => filePath.includes("layout.svelte"))
+    .map(([filePath, name]) => `import ${name} from "${filePath}"`)
+    .join("\n");
+
+  // Routes use relative paths - basePath is handled by Router component
+  const routes = generateRoutes(tree, imports);
+
+  // Check for 404.svelte for statuses
+  const notFoundPath = path.join(pagesDir, "404.svelte");
+  const hasNotFound = fs.existsSync(notFoundPath);
+  const notFoundImportStatement = hasNotFound
+    ? `import NotFoundComponent from "${notFoundPath.replace(/\\/g, "/")}"`
+    : "";
+  const notFoundExport = hasNotFound
+    ? `export const notFoundComponent = NotFoundComponent`
+    : `export const notFoundComponent = null`;
+
+  const allImports = [layoutImports, notFoundImportStatement].filter(Boolean).join("\n");
+
+  return `${allImports}
+
+export const basePath = "${basePath}"
+
+export const routes = [
+  ${routes.join(",\n  ")}
+]
+
+${notFoundExport}
+
+export default routes
+`;
+}
+
+/**
+ * @param {string} pagesDir
+ * @param {string} outputPath
+ * @param {string} basePath
+ */
+function generateTypesFile(pagesDir, outputPath, basePath) {
+  const tree = scanPages(pagesDir);
+  const paths = collectPaths(tree).map((p) => applyBasePath(p, basePath));
+
+  const pathsUnion = paths.map((p) => `"${p}"`).join(" | ") || "string";
+
+  const content = `// Auto-generated by @volpe/astro-svelte-spa
+// Do not edit manually
+
+declare module "virtual:svelte-routes" {
+  import type { Component } from "svelte"
+
+  export type SvelteAppRoutes = ${pathsUnion}
+  export const basePath: string
+  export const routes: Array<{
+    path: string
+    component: any
+    children?: Array<{ path: string; component: any }>
+  }>
+  export const notFoundComponent: Component<any> | null
+  export default routes
+}
+`;
+
+  const currentContent = fs.existsSync(outputPath) ? fs.readFileSync(outputPath, "utf-8") : "";
+  if (currentContent !== content) {
+    fs.writeFileSync(outputPath, content);
+  }
+}
+
+/**
+ * @param {string} rootDir
+ * @param {string} pagesDir
+ * @param {string} basePath
+ */
+function generateComponentFiles(rootDir, pagesDir, basePath) {
+  const componentsDir = path.resolve(rootDir, "src/components");
+
+  if (!fs.existsSync(componentsDir)) {
+    fs.mkdirSync(componentsDir, { recursive: true });
+  }
+
+  if (!fs.existsSync(pagesDir)) {
+    fs.mkdirSync(pagesDir, { recursive: true });
+  }
+
+  // Generate App.svelte if it doesn't exist
+  const appPath = path.resolve(componentsDir, "App.svelte");
+  if (!fs.existsSync(appPath)) {
+    const appContent = `<script>
+  import { Router, route, StatusCode } from "@mateothegreat/svelte5-router"
+  import routes, { basePath, notFoundComponent } from "virtual:svelte-routes"
+
+  // Build statuses config for 404 handling
+  const statuses = notFoundComponent ? {
+    [StatusCode.NotFound]: { component: notFoundComponent }
+  } : undefined
+
+  // Action that combines route + prefetch on hover
+  function link(node) {
+    const href = node.getAttribute("href")
+
+    function preload() {
+      const r = routes.find(r => r.path === href)
+      if (r?.component && typeof r.component === "function") {
+        r.component()
+      }
+    }
+
+    node.addEventListener("mouseenter", preload)
+    node.addEventListener("touchstart", preload, { passive: true })
+
+    const routeAction = route(node)
+
+    return {
+      destroy() {
+        node.removeEventListener("mouseenter", preload)
+        node.removeEventListener("touchstart", preload)
+        routeAction?.destroy?.()
+      }
+    }
+  }
+
+  export { link }
+</script>
+
+<Router {routes} {basePath} {statuses} />
+`;
+    fs.writeFileSync(appPath, appContent);
+  }
+
+  // Generate Link.svelte if it doesn't exist
+  const linkPath = path.resolve(componentsDir, "Link.svelte");
+  if (!fs.existsSync(linkPath)) {
+    const linkContent = `<script>
+  import { route } from "@mateothegreat/svelte5-router"
+  import routes from "virtual:svelte-routes"
+
+  let { href, children, ...rest } = $props()
+
+  function preload() {
+    const r = routes.find(r => r.path === href)
+    if (r?.component && typeof r.component === "function") {
+      r.component()
+    }
+  }
+</script>
+
+<a
+  {href}
+  use:route
+  onmouseenter={preload}
+  ontouchstart={preload}
+  {...rest}
+>
+  {@render children()}
+</a>
+`;
+    fs.writeFileSync(linkPath, linkContent);
+  }
+
+  // Generate [...path].astro if it doesn't exist
+  const catchAllPath = path.resolve(pagesDir, "[...path].astro");
+  if (!fs.existsSync(catchAllPath)) {
+    const catchAllContent = `---
+import App from "~/components/App.svelte"
+---
+
+<App client:only="svelte" />
+`;
+    fs.writeFileSync(catchAllPath, catchAllContent);
+  }
+
+  // Generate page.svelte if it doesn't exist
+  const pagePath = path.resolve(pagesDir, "page.svelte");
+  if (!fs.existsSync(pagePath)) {
+    const pageContent = `<h1>Edit me :)</h1>
+`;
+    fs.writeFileSync(pagePath, pageContent);
+  }
+
+  // Generate 404.svelte if it doesn't exist
+  const notFoundPagePath = path.resolve(pagesDir, "404.svelte");
+  if (!fs.existsSync(notFoundPagePath)) {
+    const notFoundContent = `<script>
+  import { goto } from "@mateothegreat/svelte5-router"
+  import { basePath } from "virtual:svelte-routes"
+</script>
+
+<div class="not-found">
+  <h1>404</h1>
+  <p>Page not found</p>
+  <button onclick={() => goto(basePath)}>Go Home</button>
+</div>
+
+<style>
+  .not-found {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    min-height: 50vh;
+    text-align: center;
+  }
+  h1 {
+    font-size: 4rem;
+    margin: 0;
+  }
+  p {
+    color: #666;
+    margin: 1rem 0;
+  }
+  button {
+    padding: 0.5rem 1rem;
+    cursor: pointer;
+  }
+</style>
+`;
+    fs.writeFileSync(notFoundPagePath, notFoundContent);
+  }
+}
+
+/**
+ * Vite plugin for file-based routing with svelte5-router in Astro
+ * @param {Object} options - Plugin options
+ * @param {string} [options.basePath] - Base path for all routes (defaults to "/svelte-app")
+ * @returns {import('vite').Plugin}
+ */
+export function astroSvelteSpa(options = {}) {
+  // Normalize basePath, defaults to "/svelte-app"
+  const basePath = options.basePath?.replace(/\/$/, "") || "/svelte-app";
+  // Directory suffix: "/svelte-app" -> "svelte-app"
+  const dirSuffix = basePath.replace(/^\//, "");
+
+  const rootDir = process.cwd();
+  const pagesDir = path.resolve(rootDir, "src/pages", dirSuffix);
+  const typesPath = path.resolve(rootDir, "src/svelte-routes.d.ts");
+
+  generateComponentFiles(rootDir, pagesDir, basePath);
+
+  return {
+    name: "vite-plugin-astro-svelte-spa",
+    enforce: "pre",
+
+    buildStart() {
+      generateTypesFile(pagesDir, typesPath, basePath);
+    },
+
+    configureServer(server) {
+      generateTypesFile(pagesDir, typesPath, basePath);
+
+      const watchPath = `/src/pages/${dirSuffix}/`;
+      server.watcher.on("all", (event, filePath) => {
+        if (
+          filePath.includes(watchPath) &&
+          (filePath.endsWith("page.svelte") || filePath.endsWith("layout.svelte") || filePath.endsWith("404.svelte"))
+        ) {
+          generateTypesFile(pagesDir, typesPath, basePath);
+
+          const mod = server.moduleGraph.getModuleById(RESOLVED_VIRTUAL_MODULE_ID);
+          if (mod) {
+            server.moduleGraph.invalidateModule(mod);
+          }
+
+          if (event === "add" || event === "unlink") {
+            server.ws.send({ type: "full-reload" });
+          }
+        }
+
+        if (
+          event === "change" &&
+          filePath.endsWith(".svelte") &&
+          (filePath.includes("/src/components/") || filePath.includes(watchPath))
+        ) {
+          server.ws.send({ type: "full-reload" });
+        }
+      });
+    },
+
+    resolveId(id) {
+      if (id === VIRTUAL_MODULE_ID) {
+        return RESOLVED_VIRTUAL_MODULE_ID;
+      }
+    },
+
+    load(id) {
+      if (id === RESOLVED_VIRTUAL_MODULE_ID) {
+        return generateRoutesModule(pagesDir, basePath);
+      }
+    },
+
+    handleHotUpdate() {
+      return [];
+    },
+  };
+}
+
+export default astroSvelteSpa;

package/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "@volpe/astro-svelte-spa",
+  "version": "0.1.0",
+  "description": "Vite plugin for file-based routing with svelte5-router in Astro",
+  "type": "module",
+  "main": "index.js",
+  "types": "index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./index.d.ts",
+      "default": "./index.js"
+    }
+  },
+  "keywords": [
+    "vite",
+    "vite-plugin",
+    "astro",
+    "svelte",
+    "svelte5-router",
+    "spa",
+    "file-based-routing"
+  ],
+  "author": "",
+  "license": "MIT",
+  "peerDependencies": {
+    "vite": "^5.0.0 || ^6.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}