@netrojs/fnetro 0.2.21 → 0.3.0

package/dist/client.js

@@ -1,21 +1,71 @@
 // client.ts
-import { createSignal, createComponent } from "solid-js";
-import { hydrate } from "solid-js/web";
-import { Router, Route } from "@solidjs/router";
+import {
+  createSSRApp,
+  defineAsyncComponent,
+  defineComponent,
+  h,
+  inject,
+  reactive,
+  readonly
+} from "vue";
+import {
+  createRouter,
+  createWebHistory,
+  RouterView
+} from "vue-router";
+
+// types.ts
+var SPA_HEADER = "x-fnetro-spa";
+var STATE_KEY = "__FNETRO_STATE__";
+var PARAMS_KEY = "__FNETRO_PARAMS__";
+var SEO_KEY = "__FNETRO_SEO__";
+var DATA_KEY = /* @__PURE__ */ Symbol.for("fnetro:data");
 
 // core.ts
+var VUE_BRANDS = ["__name", "__file", "__vccOpts", "setup", "render", "data", "components"];
+function isAsyncLoader(c) {
+  if (typeof c !== "function") return false;
+  const f = c;
+  for (const brand of VUE_BRANDS) {
+    if (brand in f) return false;
+  }
+  return true;
+}
 function definePage(def) {
   return { __type: "page", ...def };
 }
 function defineGroup(def) {
   return { __type: "group", ...def };
 }
-function defineLayout(Component) {
-  return { __type: "layout", Component };
+function defineLayout(component) {
+  return { __type: "layout", component };
 }
 function defineApiRoute(path, register) {
   return { __type: "api", path, register };
 }
+function compilePath(path) {
+  const keys = [];
+  const src = path.replace(/\[\.\.\.([^\]]+)\]/g, (_, k) => {
+    keys.push(k);
+    return "(.*)";
+  }).replace(/\[([^\]]+)\]/g, (_, k) => {
+    keys.push(k);
+    return "([^/]+)";
+  }).replace(/\*/g, "(.*)");
+  return { re: new RegExp(`^${src}$`), keys };
+}
+function matchPath(cp, pathname) {
+  const m = pathname.match(cp.re);
+  if (!m) return null;
+  const params = {};
+  cp.keys.forEach((k, i) => {
+    params[k] = decodeURIComponent(m[i + 1] ?? "");
+  });
+  return params;
+}
+function toVueRouterPath(fnetroPath) {
+  return fnetroPath.replace(/\[\.\.\.([^\]]+)\]/g, ":$1(.*)*").replace(/\[([^\]]+)\]/g, ":$1");
+}
 function resolveRoutes(routes, options = {}) {
   const pages = [];
   const apis = [];
@@ -26,7 +76,11 @@ function resolveRoutes(routes, options = {}) {
       const prefix = (options.prefix ?? "") + route.prefix;
       const mw = [...options.middleware ?? [], ...route.middleware ?? []];
       const layout = route.layout !== void 0 ? route.layout : options.layout;
-      const sub = resolveRoutes(route.routes, { prefix, middleware: mw, layout });
+      const sub = resolveRoutes(route.routes, {
+        prefix,
+        middleware: mw,
+        ...layout !== void 0 && { layout }
+      });
       pages.push(...sub.pages);
       apis.push(...sub.apis);
     } else {
@@ -40,58 +94,14 @@ function resolveRoutes(routes, options = {}) {
   }
   return { pages, apis };
 }
-function compilePath(path) {
-  const keys = [];
-  const src = path.replace(/\[\.\.\.([^\]]+)\]/g, (_, k) => {
-    keys.push(k);
-    return "(.*)";
-  }).replace(/\[([^\]]+)\]/g, (_, k) => {
-    keys.push(k);
-    return "([^/]+)";
-  }).replace(/\*/g, "(.*)");
-  return { re: new RegExp(`^${src}$`), keys };
-}
-function matchPath(compiled, pathname) {
-  const m = pathname.match(compiled.re);
-  if (!m) return null;
-  const params = {};
-  compiled.keys.forEach((k, i) => {
-    params[k] = decodeURIComponent(m[i + 1] ?? "");
-  });
-  return params;
-}
-var SPA_HEADER = "x-fnetro-spa";
-var STATE_KEY = "__FNETRO_STATE__";
-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) {
-  for (const { route, cp } of _routes) {
-    const params = matchPath(cp, pathname);
-    if (params !== null) return { route, params };
-  }
-  return null;
-}
-var _mw = [];
-function useClientMiddleware(mw) {
-  _mw.push(mw);
-}
-async function runMiddleware(url, done) {
-  const chain = [..._mw, async (_u, next) => {
-    await done();
-    await next();
-  }];
-  let i = 0;
-  const run = async () => {
-    const fn = chain[i++];
-    if (fn) await fn(url, run);
-  };
-  await run();
-}
+import {
+  useRoute,
+  useRouter,
+  RouterLink,
+  RouterView as RouterView2
+} from "vue-router";
 function setMeta(selector, attr, val) {
   if (!val) {
     document.querySelector(selector)?.remove();
@@ -100,8 +110,8 @@ function setMeta(selector, attr, val) {
   let el = document.querySelector(selector);
   if (!el) {
     el = document.createElement("meta");
-    const m = /\[(\w+[:-]?\w*)="([^"]+)"\]/.exec(selector);
-    if (m) el.setAttribute(m[1], m[2]);
+    const [, attrName = "", attrVal = ""] = /\[([^=]+)="([^"]+)"\]/.exec(selector) ?? [];
+    if (attrName) el.setAttribute(attrName, attrVal);
     document.head.appendChild(el);
   }
   el.setAttribute(attr, val);
@@ -121,156 +131,140 @@ function syncSEO(seo) {
   setMeta('[name="twitter:title"]', "content", seo.twitterTitle);
   setMeta('[name="twitter:description"]', "content", seo.twitterDescription);
   setMeta('[name="twitter:image"]', "content", seo.twitterImage);
-  const canon = seo.canonical;
-  let linkEl = document.querySelector('link[rel="canonical"]');
-  if (canon) {
-    if (!linkEl) {
-      linkEl = document.createElement("link");
-      linkEl.rel = "canonical";
-      document.head.appendChild(linkEl);
+  let link = document.querySelector('link[rel="canonical"]');
+  if (seo.canonical) {
+    if (!link) {
+      link = document.createElement("link");
+      link.rel = "canonical";
+      document.head.appendChild(link);
     }
-    linkEl.href = canon;
+    link.href = seo.canonical;
   } else {
-    linkEl?.remove();
+    link?.remove();
   }
 }
-var _cache = /* @__PURE__ */ new Map();
-function fetchPayload(href) {
-  if (!_cache.has(href)) {
-    _cache.set(
+var _fetchCache = /* @__PURE__ */ new Map();
+function fetchSPA(href) {
+  if (!_fetchCache.has(href)) {
+    _fetchCache.set(
       href,
       fetch(href, { headers: { [SPA_HEADER]: "1" } }).then((r) => {
-        if (!r.ok) throw new Error(`${r.status} ${r.statusText}`);
+        if (!r.ok) throw new Error(`[fnetro] ${r.status} ${r.statusText} \u2014 ${href}`);
         return r.json();
       })
     );
   }
-  return _cache.get(href);
+  return _fetchCache.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());
+    if (u.origin === location.origin) fetchSPA(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);
+var _mw = [];
+function useClientMiddleware(mw) {
+  _mw.push(mw);
+}
+async function runMw(url, done) {
+  const chain = [
+    ..._mw,
+    async (_, next) => {
+      await done();
+      await next();
     }
-    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();
-      }
-    });
+  ];
+  let i = 0;
+  const run = async () => {
+    const fn = chain[i++];
+    if (fn) await fn(url, run);
   };
+  await run();
 }
-async function navigate(to, opts = {}) {
-  const u = new URL(to, location.origin);
-  if (u.origin !== location.origin) {
-    location.href = to;
-    return;
+var _pageData = reactive({});
+function updatePageData(newData) {
+  for (const k of Object.keys(_pageData)) {
+    if (!(k in newData)) delete _pageData[k];
   }
-  if (!findRoute(u.pathname)) {
-    location.href = to;
-    return;
+  Object.assign(_pageData, newData);
+}
+function usePageData() {
+  const data = inject(DATA_KEY);
+  if (data === void 0) {
+    throw new Error("[fnetro] usePageData() must be called inside a component setup().");
   }
-  await runMiddleware(u.pathname, async () => {
-    try {
-      const payload = await fetchPayload(u.toString());
-      history[opts.replace ? "replaceState" : "pushState"](
-        { url: u.pathname },
-        "",
-        u.pathname
-      );
-      if (opts.scroll !== false) window.scrollTo(0, 0);
-      syncSEO(payload.seo ?? {});
-      window.dispatchEvent(new PopStateEvent("popstate", { state: history.state }));
-    } catch (err) {
-      console.error("[fnetro] Navigation error:", err);
-      location.href = to;
-    }
-  });
+  return data;
 }
 async function boot(options) {
+  const container = document.getElementById("fnetro-app");
+  if (!container) {
+    console.error("[fnetro] #fnetro-app not found \u2014 aborting hydration.");
+    return;
+  }
   const { pages } = resolveRoutes(options.routes, {
-    layout: options.layout,
+    ...options.layout !== void 0 && { layout: options.layout },
     middleware: []
   });
-  _routes = pages.map((r) => ({ route: r, cp: compilePath(r.fullPath) }));
-  _appLayout = options.layout;
-  const pathname = location.pathname;
-  if (!findRoute(pathname)) {
-    console.warn(`[fnetro] No route matched "${pathname}" \u2014 skipping hydration`);
-    return;
-  }
   const stateMap = window[STATE_KEY] ?? {};
-  const paramsMap = window[PARAMS_KEY] ?? {};
   const seoData = window[SEO_KEY] ?? {};
-  const container = document.getElementById("fnetro-app");
-  if (!container) {
-    console.error("[fnetro] #fnetro-app not found \u2014 aborting hydration");
-    return;
+  const pathname = location.pathname;
+  updatePageData(stateMap[pathname] ?? {});
+  syncSEO(seoData);
+  const vueRoutes = pages.map((r) => {
+    const layout = r.layout !== void 0 ? r.layout : options.layout;
+    const comp = r.page.component;
+    const PageComp = isAsyncLoader(comp) ? defineAsyncComponent(comp) : comp;
+    const routeComp = layout ? defineComponent({
+      name: "FNetroRoute",
+      setup: () => () => h(layout.component, null, {
+        default: () => h(PageComp)
+      })
+    }) : PageComp;
+    return { path: toVueRouterPath(r.fullPath), component: routeComp };
+  });
+  const currentRoute = pages.find((r) => matchPath(compilePath(r.fullPath), pathname) !== null);
+  if (currentRoute && isAsyncLoader(currentRoute.page.component)) {
+    await currentRoute.page.component();
   }
-  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(Router, {
-      get children() {
-        return routeElements;
-      }
-    }),
-    container
-  );
-  if (prefetchOnHover) {
+  const app = createSSRApp({ name: "FNetroApp", render: () => h(RouterView) });
+  app.provide(DATA_KEY, readonly(_pageData));
+  const router = createRouter({ history: createWebHistory(), routes: vueRoutes });
+  let isInitialNav = true;
+  router.beforeEach(async (to, _from, next) => {
+    if (isInitialNav) {
+      isInitialNav = false;
+      return next();
+    }
+    const href = new URL(to.fullPath, location.origin).toString();
+    try {
+      await runMw(to.fullPath, async () => {
+        const payload = await fetchSPA(href);
+        updatePageData(payload.state ?? {});
+        syncSEO(payload.seo ?? {});
+        window.scrollTo(0, 0);
+      });
+      next();
+    } catch (err) {
+      console.error("[fnetro] Navigation error:", err);
+      location.href = to.fullPath;
+    }
+  });
+  app.use(router);
+  await router.isReady();
+  app.mount(container);
+  if (options.prefetchOnHover !== false) {
     document.addEventListener("mouseover", (e) => {
-      const a = e.composedPath().find(
-        (el) => el instanceof HTMLAnchorElement
-      );
+      const a = e.composedPath().find((el) => el instanceof HTMLAnchorElement);
       if (a?.href) prefetch(a.href);
     });
   }
 }
 export {
-  A,
+  DATA_KEY,
   PARAMS_KEY,
+  RouterLink,
+  RouterView2 as RouterView,
   SEO_KEY,
   SPA_HEADER,
   STATE_KEY,
@@ -280,15 +274,14 @@ export {
   defineGroup,
   defineLayout,
   definePage,
-  fetchPayload,
+  isAsyncLoader,
   matchPath,
-  navigate,
   prefetch,
   resolveRoutes,
   syncSEO,
+  toVueRouterPath,
   useClientMiddleware,
-  useLocation,
-  useNavigate,
-  useParams,
-  useSearchParams
+  usePageData,
+  useRoute,
+  useRouter
 };

package/dist/core.d.ts

@@ -1,5 +1,5 @@
+import { Component } from 'vue';
 import { Hono, MiddlewareHandler, Context } from 'hono';
-import { Component, JSX } from 'solid-js';
 
 type HonoMiddleware = MiddlewareHandler;
 type LoaderCtx = Context;
@@ -15,44 +15,33 @@ interface SEOMeta {
     ogDescription?: string;
     ogImage?: string;
     ogImageAlt?: string;
-    ogImageWidth?: string;
-    ogImageHeight?: string;
     ogUrl?: string;
     ogType?: string;
     ogSiteName?: string;
-    ogLocale?: string;
     twitterCard?: 'summary' | 'summary_large_image' | 'app' | 'player';
     twitterSite?: string;
-    twitterCreator?: string;
     twitterTitle?: string;
     twitterDescription?: string;
     twitterImage?: string;
-    twitterImageAlt?: string;
+    /** Structured data injected as <script type="application/ld+json">. */
     jsonLd?: Record<string, unknown> | Record<string, unknown>[];
-    extra?: Array<{
-        name?: string;
-        property?: string;
-        httpEquiv?: string;
-        content: string;
-    }>;
 }
-type PageProps<TData extends object = {}> = TData & {
-    url: string;
-    params: Record<string, string>;
-};
-interface LayoutProps {
-    children: JSX.Element;
-    url: string;
-    params: Record<string, string>;
-}
-interface PageDef<TData extends object = {}> {
+type AsyncLoader = () => Promise<{
+    default: Component;
+} | Component>;
+interface PageDef<TData extends object = Record<string, never>> {
     readonly __type: 'page';
     path: string;
     middleware?: HonoMiddleware[];
     loader?: (c: LoaderCtx) => TData | Promise<TData>;
     seo?: SEOMeta | ((data: TData, params: Record<string, string>) => SEOMeta);
+    /** Override or disable the app-level layout for this route. */
     layout?: LayoutDef | false;
-    Page: Component<PageProps<TData>>;
+    /**
+     * The Vue component to render for this route.
+     * Use () => import('./Page.vue') for automatic code splitting.
+     */
+    component: Component | AsyncLoader;
 }
 interface GroupDef {
     readonly __type: 'group';
@@ -63,7 +52,8 @@ interface GroupDef {
 }
 interface LayoutDef {
     readonly __type: 'layout';
-    Component: Component<LayoutProps>;
+    /** Vue layout component — must contain <slot /> for page content. */
+    component: Component;
 }
 interface ApiRouteDef {
     readonly __type: 'api';
@@ -78,36 +68,63 @@ interface AppConfig {
     routes: Route[];
     notFound?: Component;
     htmlAttrs?: Record<string, string>;
+    /** Extra HTML injected into <head> (e.g. font preloads). */
     head?: string;
 }
-type ClientMiddleware = (url: string, next: () => Promise<void>) => Promise<void>;
-declare function definePage<TData extends object = {}>(def: Omit<PageDef<TData>, '__type'>): PageDef<TData>;
-declare function defineGroup(def: Omit<GroupDef, '__type'>): GroupDef;
-declare function defineLayout(Component: Component<LayoutProps>): LayoutDef;
-declare function defineApiRoute(path: string, register: ApiRouteDef['register']): ApiRouteDef;
 interface ResolvedRoute {
     fullPath: string;
     page: PageDef<any>;
     layout: LayoutDef | false | undefined;
     middleware: HonoMiddleware[];
 }
-declare function resolveRoutes(routes: Route[], options?: {
-    prefix?: string;
-    middleware?: HonoMiddleware[];
-    layout?: LayoutDef | false;
-}): {
-    pages: ResolvedRoute[];
-    apis: ApiRouteDef[];
-};
 interface CompiledPath {
     re: RegExp;
     keys: string[];
 }
-declare function compilePath(path: string): CompiledPath;
-declare function matchPath(compiled: CompiledPath, pathname: string): Record<string, string> | null;
+type ClientMiddleware = (url: string, next: () => Promise<void>) => Promise<void>;
+/** Custom request header that identifies an SPA navigation (JSON payload). */
 declare const SPA_HEADER = "x-fnetro-spa";
+/** window key for SSR-injected per-page loader data. */
 declare const STATE_KEY = "__FNETRO_STATE__";
+/** window key for SSR-injected URL params. */
 declare const PARAMS_KEY = "__FNETRO_PARAMS__";
+/** window key for SSR-injected SEO meta. */
 declare const SEO_KEY = "__FNETRO_SEO__";
+/**
+ * Vue provide/inject key for the reactive page-data object.
+ * Symbol.for() ensures the same reference across module instances (SSR safe).
+ */
+declare const DATA_KEY: unique symbol;
+
+/**
+ * Returns true when `c` is an async factory function (i.e. `() => import(...)`)
+ * rather than a resolved Vue component object.
+ *
+ * Used by both server.ts (to resolve the import before SSR) and client.ts
+ * (to wrap with defineAsyncComponent for lazy hydration).
+ */
+declare function isAsyncLoader(c: unknown): c is AsyncLoader;
+declare function definePage<TData extends object = Record<string, never>>(def: Omit<PageDef<TData>, '__type'>): PageDef<TData>;
+declare function defineGroup(def: Omit<GroupDef, '__type'>): GroupDef;
+/** Wrap a Vue layout component (must render <slot />) as a FNetro layout. */
+declare function defineLayout(component: Component): LayoutDef;
+declare function defineApiRoute(path: string, register: ApiRouteDef['register']): ApiRouteDef;
+declare function compilePath(path: string): CompiledPath;
+declare function matchPath(cp: CompiledPath, pathname: string): Record<string, string> | null;
+/**
+ * Convert FNetro `[param]` syntax to Vue Router `:param` syntax.
+ *
+ * `/posts/[slug]`    → `/posts/:slug`
+ * `/files/[...path]` → `/files/:path(.*)*`
+ */
+declare function toVueRouterPath(fnetroPath: string): string;
+declare function resolveRoutes(routes: Route[], options?: {
+    prefix?: string;
+    middleware?: HonoMiddleware[];
+    layout?: LayoutDef | false;
+}): {
+    pages: ResolvedRoute[];
+    apis: ApiRouteDef[];
+};
 
-export { type ApiRouteDef, type AppConfig, type ClientMiddleware, type CompiledPath, type GroupDef, type HonoMiddleware, type LayoutDef, type LayoutProps, type LoaderCtx, PARAMS_KEY, type PageDef, type PageProps, type ResolvedRoute, type Route, type SEOMeta, SEO_KEY, SPA_HEADER, STATE_KEY, compilePath, defineApiRoute, defineGroup, defineLayout, definePage, matchPath, resolveRoutes };
+export { type ApiRouteDef, type AppConfig, type AsyncLoader, type ClientMiddleware, type CompiledPath, DATA_KEY, type GroupDef, type HonoMiddleware, type LayoutDef, type LoaderCtx, PARAMS_KEY, type PageDef, type ResolvedRoute, type Route, type SEOMeta, SEO_KEY, SPA_HEADER, STATE_KEY, compilePath, defineApiRoute, defineGroup, defineLayout, definePage, isAsyncLoader, matchPath, resolveRoutes, toVueRouterPath };