@volpe/astro-svelte-spa 0.1.0 → 0.1.2

package/README.md

@@ -5,9 +5,10 @@ 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`
+- Pre-built `App.svelte` and `Link.svelte` components
+- Auto-generates `[...path].astro`, `page.svelte`, and `404.svelte`
 - Virtual module `virtual:svelte-routes` with typed routes
-- `SvelteAppRoutes` type for autocomplete
+- `SvelteAppRoutes` type for autocomplete in `<Link>`
 - 404 handling with `StatusCode.NotFound`
 - HMR support with full reload on changes
 
@@ -23,16 +24,38 @@ npm install @volpe/astro-svelte-spa @mateothegreat/svelte5-router
 // astro.config.mjs
 import { defineConfig } from "astro/config"
 import svelte from "@astrojs/svelte"
-import { astroSvelteSpa } from "@volpe/astro-svelte-spa"
+import { plugin } from "@volpe/astro-svelte-spa"
 
 export default defineConfig({
   integrations: [svelte()],
   vite: {
-    plugins: [astroSvelteSpa({ basePath: "/app" })]
+    plugins: [plugin({ basePath: "/app" })]
   }
 })
 ```
 
+## Components
+
+Import the pre-built components:
+
+```svelte
+<!-- src/pages/svelte-app/[...path].astro -->
+---
+import App from "@volpe/astro-svelte-spa/App.svelte"
+---
+
+<App client:only="svelte" />
+```
+
+```svelte
+<!-- In your Svelte pages -->
+<script>
+  import Link from "@volpe/astro-svelte-spa/Link.svelte"
+</script>
+
+<Link href="/svelte-app/about">About</Link>
+```
+
 ## File Structure
 
 ```
@@ -41,15 +64,12 @@ src/
     svelte-app/           # or your custom basePath
       page.svelte         # -> /svelte-app
       404.svelte          # -> catch-all 404
-      [...path].astro     # Astro catch-all
+      [...path].astro     # Astro catch-all (auto-generated)
       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

package/index.d.ts

@@ -1,6 +1,7 @@
 import type { Plugin } from "vite";
+import type { Component } from "svelte";
 
-export interface AstroSvelteSpaOptions {
+export interface PluginOptions {
   /**
    * Base path for all routes.
    * When set to "/app", the plugin scans `src/pages/app/` and routes start with "/app".
@@ -14,7 +15,7 @@ export interface AstroSvelteSpaOptions {
  *
  * Features:
  * - File-based routing with `page.svelte` and `layout.svelte`
- * - Auto-generates `App.svelte`, `Link.svelte`, `[...path].astro`, `page.svelte`, and `404.svelte`
+ * - Auto-generates `[...path].astro`, `page.svelte`, and `404.svelte`
  * - Virtual module `virtual:svelte-routes` with typed routes
  * - `SvelteAppRoutes` type for autocomplete
  * - 404 handling with StatusCode.NotFound
@@ -23,15 +24,45 @@ export interface AstroSvelteSpaOptions {
  * @example
  * ```js
  * // astro.config.mjs
- * import { astroSvelteSpa } from "@volpe/astro-svelte-spa"
+ * import { plugin } from "@volpe/astro-svelte-spa"
  *
  * export default defineConfig({
  *   vite: {
- *     plugins: [astroSvelteSpa({ basePath: "/app" })]
+ *     plugins: [plugin({ basePath: "/app" })]
  *   }
  * })
  * ```
  */
-export function astroSvelteSpa(options?: AstroSvelteSpaOptions): Plugin;
+export function plugin(options?: PluginOptions): Plugin;
 
-export default astroSvelteSpa;
+export default plugin;
+
+/**
+ * The main App component that renders the router.
+ * Use with `client:only="svelte"` in Astro.
+ *
+ * @example
+ * ```astro
+ * ---
+ * import { App } from "@volpe/astro-svelte-spa"
+ * ---
+ * <App client:only="svelte" />
+ * ```
+ */
+export const App: Component<{}>;
+
+/**
+ * Link component for client-side navigation.
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import { Link } from "@volpe/astro-svelte-spa"
+ * </script>
+ * <Link href="/about">About</Link>
+ * ```
+ */
+export const Link: Component<{
+  href: string;
+  [key: string]: any;
+}>;

package/index.js

@@ -4,6 +4,11 @@ import path from "node:path";
 const VIRTUAL_MODULE_ID = "virtual:svelte-routes";
 const RESOLVED_VIRTUAL_MODULE_ID = "\0" + VIRTUAL_MODULE_ID;
 
+const PACKAGE_ID = "@volpe/astro-svelte-spa";
+const RESOLVED_PACKAGE_ID = "\0" + PACKAGE_ID;
+const VIRTUAL_APP_ID = "\0svelte-spa-app.svelte";
+const VIRTUAL_LINK_ID = "\0svelte-spa-link.svelte";
+
 /**
  * @typedef {Object} RouteNode
  * @property {string} path
@@ -101,15 +106,12 @@ function applyBasePath(routePath, basePath) {
 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},
@@ -118,7 +120,6 @@ function generateRoutes(node, imports) {
     ]
   }`);
     } else {
-      // No layout - simple route with async loading
       routes.push(`{
     path: "${routePath}",
     component: async () => import("${node.page}")
@@ -126,7 +127,6 @@ function generateRoutes(node, imports) {
     }
   }
 
-  // Add children routes
   for (const child of node.children) {
     routes.push(...generateRoutes(child, imports));
   }
@@ -144,16 +144,13 @@ function generateRoutesModule(pagesDir, basePath) {
   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
@@ -215,101 +212,17 @@ declare module "virtual:svelte-routes" {
 }
 
 /**
- * @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 });
-  }
-
+function generatePageFiles(pagesDir) {
   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"
+import { App } from "@volpe/astro-svelte-spa"
 ---
 
 <App client:only="svelte" />
@@ -317,7 +230,6 @@ import App from "~/components/App.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>
@@ -325,7 +237,6 @@ import App from "~/components/App.svelte"
     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>
@@ -366,23 +277,61 @@ import App from "~/components/App.svelte"
   }
 }
 
+/**
+ * Generates the virtual App component code
+ * @returns {string}
+ */
+function generateAppComponent() {
+  return `<script>
+  import { Router, StatusCode } from "@mateothegreat/svelte5-router"
+  import routes, { basePath, notFoundComponent } from "virtual:svelte-routes"
+
+  const statuses = notFoundComponent ? {
+    [StatusCode.NotFound]: { component: notFoundComponent }
+  } : undefined
+</script>
+
+<Router {routes} {basePath} {statuses} />
+`;
+}
+
+/**
+ * Generates the virtual Link component code
+ * @returns {string}
+ */
+function generateLinkComponent() {
+  return `<script>
+  import { route, goto } from "@mateothegreat/svelte5-router"
+
+  let { href, children, ...rest } = $props()
+
+  const handleClick = (e) => {
+    e.preventDefault()
+    goto(href)
+  }
+</script>
+
+<a {href} onclick={handleClick} class:active={$route.path === href} {...rest}>
+  {@render children?.()}
+</a>
+`;
+}
+
 /**
  * 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"
+export function plugin(options = {}) {
   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);
+  generatePageFiles(pagesDir);
 
   return {
     name: "vite-plugin-astro-svelte-spa",
@@ -427,12 +376,34 @@ export function astroSvelteSpa(options = {}) {
       if (id === VIRTUAL_MODULE_ID) {
         return RESOLVED_VIRTUAL_MODULE_ID;
       }
+      // Intercept main package import (but not /plugin subpath)
+      if (id === PACKAGE_ID) {
+        return RESOLVED_PACKAGE_ID;
+      }
+      // Handle virtual component IDs
+      if (id === VIRTUAL_APP_ID || id === VIRTUAL_LINK_ID) {
+        return id;
+      }
     },
 
     load(id) {
       if (id === RESOLVED_VIRTUAL_MODULE_ID) {
         return generateRoutesModule(pagesDir, basePath);
       }
+      // Virtual package module - exports App, Link, and re-exports plugin
+      if (id === RESOLVED_PACKAGE_ID) {
+        return `
+export { default as App } from "${VIRTUAL_APP_ID}";
+export { default as Link } from "${VIRTUAL_LINK_ID}";
+export { plugin, default } from "@volpe/astro-svelte-spa/plugin";
+`;
+      }
+      if (id === VIRTUAL_APP_ID) {
+        return generateAppComponent();
+      }
+      if (id === VIRTUAL_LINK_ID) {
+        return generateLinkComponent();
+      }
     },
 
     handleHotUpdate() {
@@ -441,4 +412,4 @@ export function astroSvelteSpa(options = {}) {
   };
 }
 
-export default astroSvelteSpa;
+export default plugin;

package/package.json

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