@volpe/astro-svelte-spa 0.1.0 → 0.1.1

package/App.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+  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: HTMLAnchorElement) {
+    const href = node.getAttribute("href")
+
+    function preload() {
+      // Convert full path to relative path for matching
+      const relativePath = href === basePath ? "/" : href?.replace(basePath, "") || "/"
+      const r = routes.find(r => r.path === relativePath)
+      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} />

package/App.svelte.d.ts

@@ -0,0 +1,5 @@
+import { SvelteComponent } from "svelte"
+
+declare const App: typeof SvelteComponent
+export default App
+export declare function link(node: HTMLAnchorElement): { destroy(): void }

package/Link.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+  import { route } from "@mateothegreat/svelte5-router"
+  import routes, { basePath, type SvelteAppRoutes } from "virtual:svelte-routes"
+  import type { Snippet } from "svelte"
+  import type { HTMLAnchorAttributes } from "svelte/elements"
+
+  type Props = Omit<HTMLAnchorAttributes, "href"> & {
+    href: SvelteAppRoutes
+    children: Snippet
+  }
+
+  let { href, children, ...rest }: Props = $props()
+
+  function preload() {
+    // Convert full path to relative path for matching
+    const relativePath = href === basePath ? "/" : href.replace(basePath, "")
+    const r = routes.find(r => r.path === relativePath)
+    if (r?.component && typeof r.component === "function") {
+      r.component()
+    }
+  }
+</script>
+
+<a
+  {href}
+  use:route
+  onmouseenter={preload}
+  ontouchstart={preload}
+  {...rest}
+>
+  {@render children()}
+</a>

package/Link.svelte.d.ts

@@ -0,0 +1,12 @@
+import { SvelteComponent } from "svelte"
+import type { SvelteAppRoutes } from "virtual:svelte-routes"
+import type { Snippet } from "svelte"
+import type { HTMLAnchorAttributes } from "svelte/elements"
+
+type Props = Omit<HTMLAnchorAttributes, "href"> & {
+  href: SvelteAppRoutes
+  children: Snippet
+}
+
+declare const Link: typeof SvelteComponent<Props>
+export default Link

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,6 @@
 import type { Plugin } from "vite";
 
-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 +14,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 +23,15 @@ 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;

package/index.js

@@ -215,101 +215,18 @@ 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.svelte"
 ---
 
 <App client:only="svelte" />
@@ -372,7 +289,7 @@ import App from "~/components/App.svelte"
  * @param {string} [options.basePath] - Base path for all routes (defaults to "/svelte-app")
  * @returns {import('vite').Plugin}
  */
-export function astroSvelteSpa(options = {}) {
+export function plugin(options = {}) {
   // Normalize basePath, defaults to "/svelte-app"
   const basePath = options.basePath?.replace(/\/$/, "") || "/svelte-app";
   // Directory suffix: "/svelte-app" -> "svelte-app"
@@ -382,7 +299,7 @@ export function astroSvelteSpa(options = {}) {
   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",
@@ -441,4 +358,4 @@ export function astroSvelteSpa(options = {}) {
   };
 }
 
-export default astroSvelteSpa;
+export default plugin;

package/package.json

@@ -1,16 +1,36 @@
 {
   "name": "@volpe/astro-svelte-spa",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Vite plugin for file-based routing with svelte5-router in Astro",
   "type": "module",
   "main": "index.js",
   "types": "index.d.ts",
+  "svelte": "./index.js",
   "exports": {
     ".": {
       "types": "./index.d.ts",
+      "svelte": "./index.js",
       "default": "./index.js"
+    },
+    "./App.svelte": {
+      "types": "./App.svelte.d.ts",
+      "svelte": "./App.svelte",
+      "default": "./App.svelte"
+    },
+    "./Link.svelte": {
+      "types": "./Link.svelte.d.ts",
+      "svelte": "./Link.svelte",
+      "default": "./Link.svelte"
     }
   },
+  "files": [
+    "index.js",
+    "index.d.ts",
+    "App.svelte",
+    "App.svelte.d.ts",
+    "Link.svelte",
+    "Link.svelte.d.ts"
+  ],
   "keywords": [
     "vite",
     "vite-plugin",
@@ -23,7 +43,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"