@volpe/astro-svelte-spa 0.1.1 → 0.1.3

package/index.d.ts

@@ -1,4 +1,5 @@
 import type { Plugin } from "vite";
+import type { Component } from "svelte";
 
 export interface PluginOptions {
   /**
@@ -35,3 +36,33 @@ export interface PluginOptions {
 export function plugin(options?: PluginOptions): Plugin;
 
 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,15 @@ 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 = "virtual:svelte-spa-app";
+const RESOLVED_VIRTUAL_APP_ID = "\0" + VIRTUAL_APP_ID;
+
+const VIRTUAL_LINK_ID = "virtual:svelte-spa-link";
+const RESOLVED_VIRTUAL_LINK_ID = "\0" + VIRTUAL_LINK_ID;
+
 /**
  * @typedef {Object} RouteNode
  * @property {string} path
@@ -101,15 +110,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 +124,6 @@ function generateRoutes(node, imports) {
     ]
   }`);
     } else {
-      // No layout - simple route with async loading
       routes.push(`{
     path: "${routePath}",
     component: async () => import("${node.page}")
@@ -126,7 +131,6 @@ function generateRoutes(node, imports) {
     }
   }
 
-  // Add children routes
   for (const child of node.children) {
     routes.push(...generateRoutes(child, imports));
   }
@@ -144,16 +148,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
@@ -222,11 +223,10 @@ function generatePageFiles(pagesDir) {
     fs.mkdirSync(pagesDir, { recursive: true });
   }
 
-  // Generate [...path].astro if it doesn't exist
   const catchAllPath = path.resolve(pagesDir, "[...path].astro");
   if (!fs.existsSync(catchAllPath)) {
     const catchAllContent = `---
-import App from "@volpe/astro-svelte-spa/App.svelte"
+import { App } from "@volpe/astro-svelte-spa"
 ---
 
 <App client:only="svelte" />
@@ -234,7 +234,6 @@ import App from "@volpe/astro-svelte-spa/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>
@@ -242,7 +241,6 @@ import App from "@volpe/astro-svelte-spa/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>
@@ -283,6 +281,46 @@ import App from "@volpe/astro-svelte-spa/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
@@ -290,9 +328,7 @@ import App from "@volpe/astro-svelte-spa/App.svelte"
  * @returns {import('vite').Plugin}
  */
 export function plugin(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();
@@ -344,12 +380,37 @@ export function plugin(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) {
+        return RESOLVED_VIRTUAL_APP_ID;
+      }
+      if (id === VIRTUAL_LINK_ID) {
+        return RESOLVED_VIRTUAL_LINK_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 === RESOLVED_VIRTUAL_APP_ID) {
+        return generateAppComponent();
+      }
+      if (id === RESOLVED_VIRTUAL_LINK_ID) {
+        return generateLinkComponent();
+      }
     },
 
     handleHotUpdate() {

package/package.json

@@ -1,35 +1,23 @@
 {
   "name": "@volpe/astro-svelte-spa",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "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"
+    "./plugin": {
+      "types": "./index.d.ts",
+      "default": "./index.js"
     }
   },
   "files": [
     "index.js",
-    "index.d.ts",
-    "App.svelte",
-    "App.svelte.d.ts",
-    "Link.svelte",
-    "Link.svelte.d.ts"
+    "index.d.ts"
   ],
   "keywords": [
     "vite",

package/App.svelte

@@ -1,40 +0,0 @@
-<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

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

package/Link.svelte

@@ -1,32 +0,0 @@
-<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

@@ -1,12 +0,0 @@
-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