@netrojs/vono 0.0.1

package/dist/client.js

@@ -0,0 +1,287 @@
+// client.ts
+import {
+  createSSRApp,
+  defineAsyncComponent,
+  defineComponent,
+  h,
+  inject,
+  reactive,
+  readonly
+} from "vue";
+import {
+  createRouter,
+  createWebHistory,
+  RouterView
+} from "vue-router";
+
+// types.ts
+var SPA_HEADER = "x-vono-spa";
+var STATE_KEY = "__VONO_STATE__";
+var PARAMS_KEY = "__VONO_PARAMS__";
+var SEO_KEY = "__VONO_SEO__";
+var DATA_KEY = /* @__PURE__ */ Symbol.for("vono: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 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(vonoPath) {
+  return vonoPath.replace(/\[\.\.\.([^\]]+)\]/g, ":$1(.*)*").replace(/\[([^\]]+)\]/g, ":$1");
+}
+function resolveRoutes(routes, options = {}) {
+  const pages = [];
+  const apis = [];
+  for (const route of routes) {
+    if (route.__type === "api") {
+      apis.push({ ...route, path: (options.prefix ?? "") + route.path });
+    } else if (route.__type === "group") {
+      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 !== void 0 && { layout }
+      });
+      pages.push(...sub.pages);
+      apis.push(...sub.apis);
+    } else {
+      pages.push({
+        fullPath: (options.prefix ?? "") + route.path,
+        page: route,
+        layout: route.layout !== void 0 ? route.layout : options.layout,
+        middleware: [...options.middleware ?? [], ...route.middleware ?? []]
+      });
+    }
+  }
+  return { pages, apis };
+}
+
+// client.ts
+import {
+  useRoute,
+  useRouter,
+  RouterLink,
+  RouterView as RouterView2
+} from "vue-router";
+function setMeta(selector, attr, val) {
+  if (!val) {
+    document.querySelector(selector)?.remove();
+    return;
+  }
+  let el = document.querySelector(selector);
+  if (!el) {
+    el = document.createElement("meta");
+    const [, attrName = "", attrVal = ""] = /\[([^=]+)="([^"]+)"\]/.exec(selector) ?? [];
+    if (attrName) el.setAttribute(attrName, attrVal);
+    document.head.appendChild(el);
+  }
+  el.setAttribute(attr, val);
+}
+function syncSEO(seo) {
+  if (seo.title) document.title = seo.title;
+  setMeta('[name="description"]', "content", seo.description);
+  setMeta('[name="keywords"]', "content", seo.keywords);
+  setMeta('[name="robots"]', "content", seo.robots);
+  setMeta('[name="theme-color"]', "content", seo.themeColor);
+  setMeta('[property="og:title"]', "content", seo.ogTitle);
+  setMeta('[property="og:description"]', "content", seo.ogDescription);
+  setMeta('[property="og:image"]', "content", seo.ogImage);
+  setMeta('[property="og:url"]', "content", seo.ogUrl);
+  setMeta('[property="og:type"]', "content", seo.ogType);
+  setMeta('[name="twitter:card"]', "content", seo.twitterCard);
+  setMeta('[name="twitter:title"]', "content", seo.twitterTitle);
+  setMeta('[name="twitter:description"]', "content", seo.twitterDescription);
+  setMeta('[name="twitter:image"]', "content", seo.twitterImage);
+  let link = document.querySelector('link[rel="canonical"]');
+  if (seo.canonical) {
+    if (!link) {
+      link = document.createElement("link");
+      link.rel = "canonical";
+      document.head.appendChild(link);
+    }
+    link.href = seo.canonical;
+  } else {
+    link?.remove();
+  }
+}
+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(`[vono] ${r.status} ${r.statusText} \u2014 ${href}`);
+        return r.json();
+      })
+    );
+  }
+  return _fetchCache.get(href);
+}
+function prefetch(url) {
+  try {
+    const u = new URL(url, location.origin);
+    if (u.origin === location.origin) fetchSPA(u.toString());
+  } catch {
+  }
+}
+var _mw = [];
+function useClientMiddleware(mw) {
+  _mw.push(mw);
+}
+async function runMw(url, done) {
+  const chain = [
+    ..._mw,
+    async (_, next) => {
+      await done();
+      await next();
+    }
+  ];
+  let i = 0;
+  const run = async () => {
+    const fn = chain[i++];
+    if (fn) await fn(url, run);
+  };
+  await run();
+}
+var _pageData = reactive({});
+function updatePageData(newData) {
+  for (const k of Object.keys(_pageData)) {
+    if (!(k in newData)) delete _pageData[k];
+  }
+  Object.assign(_pageData, newData);
+}
+function usePageData() {
+  const data = inject(DATA_KEY);
+  if (data === void 0) {
+    throw new Error("[vono] usePageData() must be called inside a component setup().");
+  }
+  return data;
+}
+async function boot(options) {
+  const container = document.getElementById("vono-app");
+  if (!container) {
+    console.error("[vono] #vono-app not found \u2014 aborting hydration.");
+    return;
+  }
+  const { pages } = resolveRoutes(options.routes, {
+    ...options.layout !== void 0 && { layout: options.layout },
+    middleware: []
+  });
+  const stateMap = window[STATE_KEY] ?? {};
+  const seoData = window[SEO_KEY] ?? {};
+  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: "VonoRoute",
+      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 app = createSSRApp({ name: "VonoApp", 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("[vono] 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);
+      if (a?.href) prefetch(a.href);
+    });
+  }
+}
+export {
+  DATA_KEY,
+  PARAMS_KEY,
+  RouterLink,
+  RouterView2 as RouterView,
+  SEO_KEY,
+  SPA_HEADER,
+  STATE_KEY,
+  boot,
+  compilePath,
+  defineApiRoute,
+  defineGroup,
+  defineLayout,
+  definePage,
+  isAsyncLoader,
+  matchPath,
+  prefetch,
+  resolveRoutes,
+  syncSEO,
+  toVueRouterPath,
+  useClientMiddleware,
+  usePageData,
+  useRoute,
+  useRouter
+};

package/dist/core.d.ts

@@ -0,0 +1,167 @@
+import { Component } from 'vue';
+import { Hono, MiddlewareHandler, Context } from 'hono';
+
+type HonoMiddleware = MiddlewareHandler;
+type LoaderCtx = Context;
+interface SEOMeta {
+    title?: string;
+    description?: string;
+    keywords?: string;
+    author?: string;
+    robots?: string;
+    canonical?: string;
+    themeColor?: string;
+    ogTitle?: string;
+    ogDescription?: string;
+    ogImage?: string;
+    ogImageAlt?: string;
+    ogUrl?: string;
+    ogType?: string;
+    ogSiteName?: string;
+    twitterCard?: 'summary' | 'summary_large_image' | 'app' | 'player';
+    twitterSite?: string;
+    twitterTitle?: string;
+    twitterDescription?: string;
+    twitterImage?: string;
+    /** Structured data injected as <script type="application/ld+json">. */
+    jsonLd?: Record<string, unknown> | Record<string, unknown>[];
+}
+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;
+    /**
+     * The Vue component to render for this route.
+     * Use () => import('./Page.vue') for automatic code splitting.
+     */
+    component: Component | AsyncLoader;
+}
+interface GroupDef {
+    readonly __type: 'group';
+    prefix: string;
+    layout?: LayoutDef | false;
+    middleware?: HonoMiddleware[];
+    routes: Route[];
+}
+interface LayoutDef {
+    readonly __type: 'layout';
+    /** Vue layout component — must contain <slot /> for page content. */
+    component: Component;
+}
+interface ApiRouteDef {
+    readonly __type: 'api';
+    path: string;
+    register: (app: Hono, globalMiddleware: HonoMiddleware[]) => void;
+}
+type Route = PageDef<any> | GroupDef | ApiRouteDef;
+interface AppConfig {
+    layout?: LayoutDef;
+    seo?: SEOMeta;
+    middleware?: HonoMiddleware[];
+    routes: Route[];
+    notFound?: Component;
+    htmlAttrs?: Record<string, string>;
+    /** Extra HTML injected into <head> (e.g. font preloads). */
+    head?: string;
+}
+interface ResolvedRoute {
+    fullPath: string;
+    page: PageDef<any>;
+    layout: LayoutDef | false | undefined;
+    middleware: HonoMiddleware[];
+}
+interface CompiledPath {
+    re: RegExp;
+    keys: string[];
+}
+type ClientMiddleware = (url: string, next: () => Promise<void>) => Promise<void>;
+/** Custom request header that identifies an SPA navigation (JSON payload). */
+declare const SPA_HEADER = "x-vono-spa";
+/** window key for SSR-injected per-page loader data. */
+declare const STATE_KEY = "__VONO_STATE__";
+/** window key for SSR-injected URL params. */
+declare const PARAMS_KEY = "__VONO_PARAMS__";
+/** window key for SSR-injected SEO meta. */
+declare const SEO_KEY = "__VONO_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;
+/**
+ * Extract the loader data type from a `PageDef` returned by `definePage()`.
+ *
+ * This enables you to define the data type exactly once — inferred from the
+ * loader — and import it into page components for `usePageData<T>()`.
+ *
+ * @example
+ * // app/routes.ts
+ * export const homePage = definePage({
+ *   path: '/',
+ *   loader: async () => ({ title: 'Hello', count: 42 }),
+ *   component: () => import('./pages/home.vue'),
+ * })
+ * export type HomeData = InferPageData<typeof homePage>
+ * // HomeData = { title: string; count: number }
+ *
+ * // app/pages/home.vue
+ * import type { HomeData } from '../routes'
+ * const data = usePageData<HomeData>()
+ */
+type InferPageData<T> = T extends PageDef<infer D> ? D : never;
+
+/**
+ * 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;
+/**
+ * Define a page route with full type inference.
+ *
+ * TypeScript infers `TData` automatically from the `loader` return type, so
+ * you rarely need to supply the generic manually.  Export the page constant and
+ * use `InferPageData<typeof myPage>` in your component for a single source of
+ * truth.
+ *
+ * @example
+ * export const postPage = definePage({
+ *   path:      '/post/[slug]',
+ *   loader:    async (c) => fetchPost(c.req.param('slug')),
+ *   component: () => import('./pages/post.vue'),
+ * })
+ * export type PostData = InferPageData<typeof postPage>
+ */
+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 Vono 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 Vono `[param]` syntax to Vue Router `:param` syntax.
+ *
+ * `/posts/[slug]`    → `/posts/:slug`
+ * `/files/[...path]` → `/files/:path(.*)*`
+ */
+declare function toVueRouterPath(vonoPath: 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 AsyncLoader, type ClientMiddleware, type CompiledPath, DATA_KEY, type GroupDef, type HonoMiddleware, type InferPageData, 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 };

package/dist/core.js

@@ -0,0 +1,96 @@
+// types.ts
+var SPA_HEADER = "x-vono-spa";
+var STATE_KEY = "__VONO_STATE__";
+var PARAMS_KEY = "__VONO_PARAMS__";
+var SEO_KEY = "__VONO_SEO__";
+var DATA_KEY = /* @__PURE__ */ Symbol.for("vono: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 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(vonoPath) {
+  return vonoPath.replace(/\[\.\.\.([^\]]+)\]/g, ":$1(.*)*").replace(/\[([^\]]+)\]/g, ":$1");
+}
+function resolveRoutes(routes, options = {}) {
+  const pages = [];
+  const apis = [];
+  for (const route of routes) {
+    if (route.__type === "api") {
+      apis.push({ ...route, path: (options.prefix ?? "") + route.path });
+    } else if (route.__type === "group") {
+      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 !== void 0 && { layout }
+      });
+      pages.push(...sub.pages);
+      apis.push(...sub.apis);
+    } else {
+      pages.push({
+        fullPath: (options.prefix ?? "") + route.path,
+        page: route,
+        layout: route.layout !== void 0 ? route.layout : options.layout,
+        middleware: [...options.middleware ?? [], ...route.middleware ?? []]
+      });
+    }
+  }
+  return { pages, apis };
+}
+export {
+  DATA_KEY,
+  PARAMS_KEY,
+  SEO_KEY,
+  SPA_HEADER,
+  STATE_KEY,
+  compilePath,
+  defineApiRoute,
+  defineGroup,
+  defineLayout,
+  definePage,
+  isAsyncLoader,
+  matchPath,
+  resolveRoutes,
+  toVueRouterPath
+};