npm - @netrojs/fnetro - Versions diffs - 0.2.20 → 0.2.21 - Mend

@netrojs/fnetro 0.2.20 → 0.2.21

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/client.ts CHANGED Viewed

@@ -1,10 +1,11 @@
 // ─────────────────────────────────────────────────────────────────────────────
 //  FNetro · client.ts
-//  SolidJS hydration · SPA routing · client middleware · SEO sync · prefetch
+//  SolidJS hydration · @solidjs/router SPA routing · client middleware · SEO
 // ─────────────────────────────────────────────────────────────────────────────
-import { createSignal, createMemo, createComponent } from 'solid-js'
+import { createSignal, createComponent, lazy, Suspense } from 'solid-js'
 import { hydrate } from 'solid-js/web'
+import { Router, Route } from '@solidjs/router'
 import {
   resolveRoutes, compilePath, matchPath,
   SPA_HEADER, STATE_KEY, PARAMS_KEY, SEO_KEY,
@@ -30,20 +31,7 @@ function findRoute(pathname: string) {
 }
 // ══════════════════════════════════════════════════════════════════════════════
-//  § 2  Navigation state signal
-// ══════════════════════════════════════════════════════════════════════════════
-interface NavState {
-  path:   string
-  data:   Record<string, unknown>
-  params: Record<string, string>
-}
-// Populated by createAppRoot(); exposed so navigate() can update it.
-let _setNav: ((s: NavState) => void) | null = null
-// ══════════════════════════════════════════════════════════════════════════════
-//  § 3  Client middleware
+//  § 2  Client middleware
 // ══════════════════════════════════════════════════════════════════════════════
 const _mw: ClientMiddleware[] = []
@@ -76,7 +64,7 @@ async function runMiddleware(url: string, done: () => Promise<void>): Promise<vo
 }
 // ══════════════════════════════════════════════════════════════════════════════
-//  § 4  SEO — client-side <head> sync
+//  § 3  SEO — client-side <head> sync
 // ══════════════════════════════════════════════════════════════════════════════
 function setMeta(selector: string, attr: string, val: string | undefined): void {
@@ -91,7 +79,7 @@ function setMeta(selector: string, attr: string, val: string | undefined): void
   el.setAttribute(attr, val)
 }
-function syncSEO(seo: SEOMeta): void {
+export function syncSEO(seo: SEOMeta): void {
   if (seo.title) document.title = seo.title
   setMeta('[name="description"]',        'content', seo.description)
@@ -124,7 +112,7 @@ function syncSEO(seo: SEOMeta): void {
 }
 // ══════════════════════════════════════════════════════════════════════════════
-//  § 5  Prefetch cache
+//  § 4  Prefetch cache + SPA data fetching
 // ══════════════════════════════════════════════════════════════════════════════
 interface NavPayload {
@@ -136,7 +124,7 @@ interface NavPayload {
 const _cache = new Map<string, Promise<NavPayload>>()
-function fetchPayload(href: string): Promise<NavPayload> {
+export function fetchPayload(href: string): Promise<NavPayload> {
   if (!_cache.has(href)) {
     _cache.set(
       href,
@@ -150,8 +138,81 @@ function fetchPayload(href: string): Promise<NavPayload> {
   return _cache.get(href)!
 }
+/** Warm the prefetch cache for a URL on hover/focus/etc. */
+export function prefetch(url: string): void {
+  try {
+    const u = new URL(url, location.origin)
+    if (u.origin !== location.origin || !findRoute(u.pathname)) return
+    fetchPayload(u.toString())
+  } catch { /* ignore invalid URLs */ }
+}
+// ══════════════════════════════════════════════════════════════════════════════
+//  § 5  Route components with data loading for @solidjs/router
+// ══════════════════════════════════════════════════════════════════════════════
+/**
+ * Creates a solid-router-compatible route component that:
+ * 1. On first render: uses server-injected state (no network request)
+ * 2. On SPA navigation: fetches data from the FNetro server handler
+ */
+function makeRouteComponent(
+  route: ResolvedRoute,
+  appLayout: LayoutDef | undefined,
+  initialState: Record<string, unknown>,
+  initialParams: Record<string, string>,
+  initialSeo: SEOMeta,
+  prefetchOnHover: boolean,
+) {
+  // The component returned here is used as @solidjs/router's <Route component>
+  return function FNetroRouteComponent(routerProps: any) {
+    // routerProps.params comes from @solidjs/router's URL matching
+    const routeParams: Record<string, string> = routerProps.params ?? {}
+    const pathname: string = routerProps.location?.pathname ?? location.pathname
+    // Determine the data source:
+    // - If this matches the server's initial state key, use it directly (no fetch needed on first load)
+    // - Otherwise fetch from the server via the SPA JSON endpoint
+    const serverData = initialState[pathname] as Record<string, unknown> | undefined
+    const [data, setData] = createSignal<Record<string, unknown>>(serverData ?? {})
+    const [params, setParams] = createSignal<Record<string, string>>(serverData ? initialParams : routeParams)
+    // Load data if we don't have it yet from the server
+    if (!serverData) {
+      const url = new URL(pathname, location.origin).toString()
+      fetchPayload(url).then(payload => {
+        setData(payload.state ?? {})
+        setParams(payload.params ?? {})
+        syncSEO(payload.seo ?? {})
+      }).catch(err => {
+        console.error('[fnetro] Failed to load route data:', err)
+      })
+    } else {
+      // Sync SEO for the initial page from server-injected data
+      syncSEO(initialSeo)
+    }
+    // Render the page (and optional layout wrapper)
+    const layout = route.layout !== undefined ? route.layout : appLayout
+    const pageEl = () => createComponent(route.page.Page as any, {
+      ...data(),
+      url: pathname,
+      params: params(),
+    })
+    if (!layout) return pageEl()
+    return createComponent(layout.Component as any, {
+      url: pathname,
+      params: params(),
+      get children() { return pageEl() },
+    })
+  }
+}
 // ══════════════════════════════════════════════════════════════════════════════
-//  § 6  navigate / prefetch
+//  § 6  navigate / prefetch (convenience exports, wraps solid-router navigate)
 // ══════════════════════════════════════════════════════════════════════════════
 export interface NavigateOptions {
@@ -159,6 +220,10 @@ export interface NavigateOptions {
   scroll?:  boolean
 }
+/**
+ * Programmatic navigation — delegates to history API and triggers
+ * @solidjs/router's reactive location update.
+ */
 export async function navigate(to: string, opts: NavigateOptions = {}): Promise<void> {
   const u = new URL(to, location.origin)
   if (u.origin !== location.origin) { location.href = to; return }
@@ -166,14 +231,15 @@ export async function navigate(to: string, opts: NavigateOptions = {}): Promise<
   await runMiddleware(u.pathname, async () => {
     try {
+      // Prefetch/cache the payload so the route component can use it
       const payload = await fetchPayload(u.toString())
       history[opts.replace ? 'replaceState' : 'pushState'](
         { url: u.pathname }, '', u.pathname,
       )
       if (opts.scroll !== false) window.scrollTo(0, 0)
-      _setNav?.({ path: u.pathname, data: payload.state ?? {}, params: payload.params ?? {} })
       syncSEO(payload.seo ?? {})
+      // Dispatch a popstate-like event so @solidjs/router's location signal updates
+      window.dispatchEvent(new PopStateEvent('popstate', { state: history.state }))
     } catch (err) {
       console.error('[fnetro] Navigation error:', err)
       location.href = to
@@ -181,79 +247,8 @@ export async function navigate(to: string, opts: NavigateOptions = {}): Promise<
   })
 }
-/** Warm the prefetch cache for a URL on hover/focus/etc. */
-export function prefetch(url: string): void {
-  try {
-    const u = new URL(url, location.origin)
-    if (u.origin !== location.origin || !findRoute(u.pathname)) return
-    fetchPayload(u.toString())
-  } catch { /* ignore invalid URLs */ }
-}
-// ══════════════════════════════════════════════════════════════════════════════
-//  § 7  DOM event intercepts
-// ══════════════════════════════════════════════════════════════════════════════
-function onLinkClick(e: MouseEvent): void {
-  if (e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return
-  const a = e.composedPath().find(
-    (el): el is HTMLAnchorElement => el instanceof HTMLAnchorElement,
-  )
-  if (!a?.href) return
-  if (a.target && a.target !== '_self') return
-  if (a.hasAttribute('data-no-spa') || a.rel?.includes('external')) return
-  const u = new URL(a.href)
-  if (u.origin !== location.origin) return
-  e.preventDefault()
-  navigate(a.href)
-}
-function onLinkHover(e: MouseEvent): void {
-  const a = e.composedPath().find(
-    (el): el is HTMLAnchorElement => el instanceof HTMLAnchorElement,
-  )
-  if (a?.href) prefetch(a.href)
-}
-function onPopState(): void {
-  navigate(location.href, { replace: true, scroll: false })
-}
-// ══════════════════════════════════════════════════════════════════════════════
-//  § 8  App root component (created inside hydrate's reactive owner)
-// ══════════════════════════════════════════════════════════════════════════════
-function AppRoot(props: { initial: NavState; appLayout: LayoutDef | undefined }): any {
-  const [nav, setNav] = createSignal<NavState>(props.initial)
-  // Expose setter so navigate() can trigger re-renders
-  _setNav = setNav
-  const view = createMemo(() => {
-    const { path, data, params } = nav()
-    const m = findRoute(path)
-    if (!m) {
-      // No match client-side — shouldn't happen but handle gracefully
-      return null as any
-    }
-    const layout = m.route.layout !== undefined ? m.route.layout : props.appLayout
-    const pageEl = createComponent(m.route.page.Page as any, { ...data, url: path, params })
-    if (!layout) return pageEl
-    return createComponent(layout.Component as any, {
-      url: path,
-      params,
-      get children() { return pageEl },
-    })
-  })
-  return view
-}
 // ══════════════════════════════════════════════════════════════════════════════
-//  § 9  boot()
+//  § 7  boot()
 // ══════════════════════════════════════════════════════════════════════════════
 export interface BootOptions extends AppConfig {
@@ -281,37 +276,50 @@ export async function boot(options: BootOptions): Promise<void> {
   const paramsMap = (window as any)[PARAMS_KEY] as Record<string, string>                  ?? {}
   const seoData   = (window as any)[SEO_KEY]    as SEOMeta                                 ?? {}
-  const initial: NavState = {
-    path:   pathname,
-    data:   stateMap[pathname] ?? {},
-    params: paramsMap,
-  }
   const container = document.getElementById('fnetro-app')
   if (!container) {
     console.error('[fnetro] #fnetro-app not found — aborting hydration')
     return
   }
-  // Sync initial SEO (document.title etc.)
-  syncSEO(seoData)
+  const prefetchOnHover = options.prefetchOnHover !== false
+  // Build @solidjs/router <Route> elements for each resolved page
+  const routeElements = pages.map(route =>
+    createComponent(Route, {
+      path: route.fullPath,
+      component: makeRouteComponent(
+        route,
+        _appLayout,
+        stateMap,
+        paramsMap,
+        seoData,
+        prefetchOnHover,
+      ),
+    }) as any
+  )
-  // Hydrate the server-rendered HTML with SolidJS
+  // Hydrate with @solidjs/router wrapping all routes
   hydrate(
-    () => createComponent(AppRoot as any, { initial, appLayout: _appLayout }) as any,
+    () => createComponent(Router as any, {
+      get children() { return routeElements },
+    }) as any,
     container,
   )
-  // Wire up SPA navigation
-  document.addEventListener('click', onLinkClick)
-  if (options.prefetchOnHover !== false) {
-    document.addEventListener('mouseover', onLinkHover)
+  // Hover prefetch
+  if (prefetchOnHover) {
+    document.addEventListener('mouseover', (e: MouseEvent) => {
+      const a = e.composedPath().find(
+        (el): el is HTMLAnchorElement => el instanceof HTMLAnchorElement,
+      )
+      if (a?.href) prefetch(a.href)
+    })
   }
-  window.addEventListener('popstate', onPopState)
 }
 // ══════════════════════════════════════════════════════════════════════════════
-//  § 10  Re-exports
+//  § 8  Re-exports
 // ══════════════════════════════════════════════════════════════════════════════
 export {
@@ -325,3 +333,6 @@ export type {
   PageProps, LayoutProps, SEOMeta, HonoMiddleware, LoaderCtx,
   ResolvedRoute, CompiledPath, ClientMiddleware,
 } from './core'
+// Re-export solid-router primitives for convenience
+export { useNavigate, useParams, useLocation, A, useSearchParams } from '@solidjs/router'

package/dist/client.d.ts CHANGED Viewed

@@ -1,5 +1,6 @@
 import { Hono, MiddlewareHandler, Context } from 'hono';
 import { Component, JSX } from 'solid-js';
+export { A, useLocation, useNavigate, useParams, useSearchParams } from '@solidjs/router';
 type HonoMiddleware = MiddlewareHandler;
 type LoaderCtx = Context;
@@ -124,17 +125,29 @@ declare const SEO_KEY = "__FNETRO_SEO__";
  * })
  */
 declare function useClientMiddleware(mw: ClientMiddleware): void;
+declare function syncSEO(seo: SEOMeta): void;
+interface NavPayload {
+    state: Record<string, unknown>;
+    params: Record<string, string>;
+    seo: SEOMeta;
+    url: string;
+}
+declare function fetchPayload(href: string): Promise<NavPayload>;
+/** Warm the prefetch cache for a URL on hover/focus/etc. */
+declare function prefetch(url: string): void;
 interface NavigateOptions {
     replace?: boolean;
     scroll?: boolean;
 }
+/**
+ * Programmatic navigation — delegates to history API and triggers
+ * @solidjs/router's reactive location update.
+ */
 declare function navigate(to: string, opts?: NavigateOptions): Promise<void>;
-/** Warm the prefetch cache for a URL on hover/focus/etc. */
-declare function prefetch(url: string): void;
 interface BootOptions extends AppConfig {
     /** Enable hover-based prefetching.  @default true */
     prefetchOnHover?: boolean;
 }
 declare function boot(options: BootOptions): Promise<void>;
-export { type ApiRouteDef, type AppConfig, type BootOptions, type ClientMiddleware, type CompiledPath, type GroupDef, type HonoMiddleware, type LayoutDef, type LayoutProps, type LoaderCtx, type NavigateOptions, PARAMS_KEY, type PageDef, type PageProps, type ResolvedRoute, type Route, type SEOMeta, SEO_KEY, SPA_HEADER, STATE_KEY, boot, compilePath, defineApiRoute, defineGroup, defineLayout, definePage, matchPath, navigate, prefetch, resolveRoutes, useClientMiddleware };
+export { type ApiRouteDef, type AppConfig, type BootOptions, type ClientMiddleware, type CompiledPath, type GroupDef, type HonoMiddleware, type LayoutDef, type LayoutProps, type LoaderCtx, type NavigateOptions, PARAMS_KEY, type PageDef, type PageProps, type ResolvedRoute, type Route, type SEOMeta, SEO_KEY, SPA_HEADER, STATE_KEY, boot, compilePath, defineApiRoute, defineGroup, defineLayout, definePage, fetchPayload, matchPath, navigate, prefetch, resolveRoutes, syncSEO, useClientMiddleware };

package/dist/client.js CHANGED Viewed

@@ -1,6 +1,7 @@
 // client.ts
-import { createSignal, createMemo, createComponent } from "solid-js";
+import { createSignal, createComponent } from "solid-js";
 import { hydrate } from "solid-js/web";
+import { Router, Route } from "@solidjs/router";
 // core.ts
 function definePage(def) {
@@ -65,6 +66,7 @@ var PARAMS_KEY = "__FNETRO_PARAMS__";
 var SEO_KEY = "__FNETRO_SEO__";
 // client.ts
+import { useNavigate, useParams, useLocation, A, useSearchParams } from "@solidjs/router";
 var _routes = [];
 var _appLayout;
 function findRoute(pathname) {
@@ -74,7 +76,6 @@ function findRoute(pathname) {
   }
   return null;
 }
-var _setNav = null;
 var _mw = [];
 function useClientMiddleware(mw) {
   _mw.push(mw);
@@ -146,6 +147,49 @@ function fetchPayload(href) {
   }
   return _cache.get(href);
 }
+function prefetch(url) {
+  try {
+    const u = new URL(url, location.origin);
+    if (u.origin !== location.origin || !findRoute(u.pathname)) return;
+    fetchPayload(u.toString());
+  } catch {
+  }
+}
+function makeRouteComponent(route, appLayout, initialState, initialParams, initialSeo, prefetchOnHover) {
+  return function FNetroRouteComponent(routerProps) {
+    const routeParams = routerProps.params ?? {};
+    const pathname = routerProps.location?.pathname ?? location.pathname;
+    const serverData = initialState[pathname];
+    const [data, setData] = createSignal(serverData ?? {});
+    const [params, setParams] = createSignal(serverData ? initialParams : routeParams);
+    if (!serverData) {
+      const url = new URL(pathname, location.origin).toString();
+      fetchPayload(url).then((payload) => {
+        setData(payload.state ?? {});
+        setParams(payload.params ?? {});
+        syncSEO(payload.seo ?? {});
+      }).catch((err) => {
+        console.error("[fnetro] Failed to load route data:", err);
+      });
+    } else {
+      syncSEO(initialSeo);
+    }
+    const layout = route.layout !== void 0 ? route.layout : appLayout;
+    const pageEl = () => createComponent(route.page.Page, {
+      ...data(),
+      url: pathname,
+      params: params()
+    });
+    if (!layout) return pageEl();
+    return createComponent(layout.Component, {
+      url: pathname,
+      params: params(),
+      get children() {
+        return pageEl();
+      }
+    });
+  };
+}
 async function navigate(to, opts = {}) {
   const u = new URL(to, location.origin);
   if (u.origin !== location.origin) {
@@ -165,66 +209,14 @@ async function navigate(to, opts = {}) {
         u.pathname
       );
       if (opts.scroll !== false) window.scrollTo(0, 0);
-      _setNav?.({ path: u.pathname, data: payload.state ?? {}, params: payload.params ?? {} });
       syncSEO(payload.seo ?? {});
+      window.dispatchEvent(new PopStateEvent("popstate", { state: history.state }));
     } catch (err) {
       console.error("[fnetro] Navigation error:", err);
       location.href = to;
     }
   });
 }
-function prefetch(url) {
-  try {
-    const u = new URL(url, location.origin);
-    if (u.origin !== location.origin || !findRoute(u.pathname)) return;
-    fetchPayload(u.toString());
-  } catch {
-  }
-}
-function onLinkClick(e) {
-  if (e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return;
-  const a = e.composedPath().find(
-    (el) => el instanceof HTMLAnchorElement
-  );
-  if (!a?.href) return;
-  if (a.target && a.target !== "_self") return;
-  if (a.hasAttribute("data-no-spa") || a.rel?.includes("external")) return;
-  const u = new URL(a.href);
-  if (u.origin !== location.origin) return;
-  e.preventDefault();
-  navigate(a.href);
-}
-function onLinkHover(e) {
-  const a = e.composedPath().find(
-    (el) => el instanceof HTMLAnchorElement
-  );
-  if (a?.href) prefetch(a.href);
-}
-function onPopState() {
-  navigate(location.href, { replace: true, scroll: false });
-}
-function AppRoot(props) {
-  const [nav, setNav] = createSignal(props.initial);
-  _setNav = setNav;
-  const view = createMemo(() => {
-    const { path, data, params } = nav();
-    const m = findRoute(path);
-    if (!m) {
-      return null;
-    }
-    const layout = m.route.layout !== void 0 ? m.route.layout : props.appLayout;
-    const pageEl = createComponent(m.route.page.Page, { ...data, url: path, params });
-    if (!layout) return pageEl;
-    return createComponent(layout.Component, {
-      url: path,
-      params,
-      get children() {
-        return pageEl;
-      }
-    });
-  });
-  return view;
-}
 async function boot(options) {
   const { pages } = resolveRoutes(options.routes, {
     layout: options.layout,
@@ -240,28 +232,44 @@ async function boot(options) {
   const stateMap = window[STATE_KEY] ?? {};
   const paramsMap = window[PARAMS_KEY] ?? {};
   const seoData = window[SEO_KEY] ?? {};
-  const initial = {
-    path: pathname,
-    data: stateMap[pathname] ?? {},
-    params: paramsMap
-  };
   const container = document.getElementById("fnetro-app");
   if (!container) {
     console.error("[fnetro] #fnetro-app not found \u2014 aborting hydration");
     return;
   }
-  syncSEO(seoData);
+  const prefetchOnHover = options.prefetchOnHover !== false;
+  const routeElements = pages.map(
+    (route) => createComponent(Route, {
+      path: route.fullPath,
+      component: makeRouteComponent(
+        route,
+        _appLayout,
+        stateMap,
+        paramsMap,
+        seoData,
+        prefetchOnHover
+      )
+    })
+  );
   hydrate(
-    () => createComponent(AppRoot, { initial, appLayout: _appLayout }),
+    () => createComponent(Router, {
+      get children() {
+        return routeElements;
+      }
+    }),
     container
   );
-  document.addEventListener("click", onLinkClick);
-  if (options.prefetchOnHover !== false) {
-    document.addEventListener("mouseover", onLinkHover);
+  if (prefetchOnHover) {
+    document.addEventListener("mouseover", (e) => {
+      const a = e.composedPath().find(
+        (el) => el instanceof HTMLAnchorElement
+      );
+      if (a?.href) prefetch(a.href);
+    });
   }
-  window.addEventListener("popstate", onPopState);
 }
 export {
+  A,
   PARAMS_KEY,
   SEO_KEY,
   SPA_HEADER,
@@ -272,9 +280,15 @@ export {
   defineGroup,
   defineLayout,
   definePage,
+  fetchPayload,
   matchPath,
   navigate,
   prefetch,
   resolveRoutes,
-  useClientMiddleware
+  syncSEO,
+  useClientMiddleware,
+  useLocation,
+  useNavigate,
+  useParams,
+  useSearchParams
 };

package/dist/server.js CHANGED Viewed

@@ -2,6 +2,7 @@
 import { Hono } from "hono";
 import { createComponent } from "solid-js";
 import { renderToStringAsync, generateHydrationScript } from "solid-js/web";
+import { Router } from "@solidjs/router";
 // core.ts
 function definePage(def) {
@@ -179,13 +180,18 @@ async function renderPage(route, data, url, params, appLayout) {
   const layout = route.layout !== void 0 ? route.layout : appLayout;
   return renderToStringAsync(() => {
     const pageEl = createComponent(route.page.Page, { ...data, url, params });
-    if (!layout) return pageEl;
-    return createComponent(layout.Component, {
+    const content = layout ? createComponent(layout.Component, {
       url,
       params,
       get children() {
         return pageEl;
       }
+    }) : pageEl;
+    return createComponent(Router, {
+      url,
+      get children() {
+        return content;
+      }
     });
   });
 }
@@ -350,9 +356,10 @@ function fnetroVitePlugin(opts = {}) {
     name: "fnetro:jsx",
     enforce: "pre",
     // Sync config hook — must return Omit<UserConfig, 'plugins'> | null
-    config(_cfg, _env) {
+    // Note: Vite 6+ deprecated `esbuild.jsx`; Vite 8 uses `oxc` instead.
+    config(_cfg, env) {
       return {
-        esbuild: {
+        oxc: {
           jsx: "automatic",
           jsxImportSource: "solid-js"
         }
@@ -406,7 +413,7 @@ function fnetroVitePlugin(opts = {}) {
               format: "es",
               entryFileNames: "server.js"
             },
-            external: (id) => NODE_BUILTINS.test(id) || id === "@hono/node-server" || id === "@hono/node-server/serve-static" || serverExternal.includes(id)
+            external: (id) => NODE_BUILTINS.test(id) || id === "@hono/node-server" || id === "@hono/node-server/serve-static" || id === "@solidjs/router" || id.startsWith("@solidjs/router/") || serverExternal.includes(id)
           }
         }
       };

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@netrojs/fnetro",
-  "version": "0.2.20",
+  "version": "0.2.21",
   "description": "Full-stack Hono framework — SolidJS SSR/SPA, SEO, middleware, route groups, API routes",
   "type": "module",
   "license": "MIT",
@@ -74,6 +74,7 @@
   },
   "peerDependencies": {
     "solid-js": ">=1.9.11",
+    "@solidjs/router": ">=0.15.0",
     "hono": ">=4.0.0",
     "vite": ">=5.0.0",
     "vite-plugin-solid": ">=2.11.11"
@@ -88,6 +89,7 @@
   },
   "devDependencies": {
     "@hono/node-server": "^1.19.11",
+    "@solidjs/router": "^0.16.1",
     "@types/node": "^22.0.0",
     "hono": "^4.12.8",
     "rimraf": "^6.1.3",

package/server.ts CHANGED Viewed

@@ -6,6 +6,7 @@
 import { Hono } from 'hono'
 import { createComponent } from 'solid-js'
 import { renderToStringAsync, generateHydrationScript } from 'solid-js/web'
+import { Router } from '@solidjs/router'
 import {
   resolveRoutes, compilePath, matchPath,
   SPA_HEADER, STATE_KEY, PARAMS_KEY, SEO_KEY,
@@ -237,13 +238,20 @@ async function renderPage(
   return renderToStringAsync(() => {
     const pageEl = createComponent(route.page.Page as AnyComponent, { ...data, url, params })
-    if (!layout) return pageEl as any
-    return createComponent(layout.Component as AnyComponent, {
+    const content = layout
+      ? createComponent(layout.Component as AnyComponent, {
+          url,
+          params,
+          get children() { return pageEl },
+        })
+      : pageEl
+    // Wrap in Router so hydration keys match the client-side <Router>
+    return createComponent(Router as AnyComponent, {
       url,
-      params,
-      get children() { return pageEl },
-    }) as any
+      get children() { return content },
+    })
   })
 }
@@ -256,7 +264,7 @@ async function renderFullPage(
   assets:  ResolvedAssets,
 ): Promise<string> {
   const pageSEO = typeof route.page.seo === 'function'
-    ? route.page.seo(data as any, params)
+    ? route.page.seo(data, params)
     : route.page.seo
   const seo   = mergeSEO(config.seo, pageSEO)
   const title = seo.title ?? 'FNetro'
@@ -519,13 +527,15 @@ export function fnetroVitePlugin(opts: FNetroPluginOptions = {}): Plugin[] {
     enforce: 'pre',
     // Sync config hook — must return Omit<UserConfig, 'plugins'> | null
-    config(_cfg: UserConfig, _env: ConfigEnv): Omit<UserConfig, 'plugins'> | null {
+    // Note: Vite 6+ deprecated `esbuild.jsx`; Vite 8 uses `oxc` instead.
+    config(_cfg: UserConfig, env: ConfigEnv): Omit<UserConfig, 'plugins'> | null {
+      // oxc is the new JSX transform pipeline in Vite 8+
       return {
-        esbuild: {
+        oxc: {
           jsx:             'automatic',
           jsxImportSource: 'solid-js',
         },
-      }
+      } as any
     },
     async buildStart() {
@@ -589,6 +599,8 @@ export function fnetroVitePlugin(opts: FNetroPluginOptions = {}): Plugin[] {
               NODE_BUILTINS.test(id) ||
               id === '@hono/node-server' ||
               id === '@hono/node-server/serve-static' ||
+              id === '@solidjs/router' ||
+              id.startsWith('@solidjs/router/') ||
               serverExternal.includes(id),
           },
         },