vite-plugin-vanjs 0.1.16 → 0.1.17

package/router/types.d.ts

@@ -4,7 +4,6 @@ import type {
   Element as VElement,
   TagFunc as IsoTagFunc,
 } from "mini-van-plate/van-plate";
-// import van from "vanjs-core";
 import type {
   ChildDom,
   Primitive,
@@ -13,10 +12,8 @@ import type {
   PropValueOrDerived,
   State,
 } from "vanjs-core";
-import { LayoutFile } from "../plugin/types.d.ts";
+import type { LayoutFile } from "../plugin/types.d.ts";
 
-// type VanElement = VElement | Exclude<Primitive, boolean | undefined>;
-// type DOMElement = globalThis.Element;
 type PrimitiveChild = Primitive | State<Primitive | undefined | null>;
 
 type DOMElement<T extends keyof HTMLElementTagNameMap = "div"> =
@@ -36,9 +33,7 @@ export type VanNode =
   | null
   | undefined;
 
-type ComponentProps1<T> =
-  & Props
-  & PropsWithKnownKeys<T>;
+type ComponentProps1<T> = Props & PropsWithKnownKeys<T>;
 
 type ComponentProps<K extends keyof HTMLElementTagNameMap> =
   & Props
@@ -56,22 +51,6 @@ export type VanComponent<
 };
 
 // router.mjs
-/**
- * A virtual component that renders the current route
- * in your VanJS application. It must be used in your main component.
- *
- * @example
- * import { Router } from '@vanjs/router';
- *
- * export const App = () => {
- *   return Router(); // or <Router /> for JSX
- * }
- */
-// export const Router: JSX.Component<HTMLElement> & VanComponent<HTMLElement>;
-// export function Router(props?: ComponentProps<HTMLElement>): HTMLElement;
-// export function Router(
-//   props?: JSX.IntrinsicElements["main"] & { children: null },
-// ): HTMLElement;
 export const Router:
   & VanComponent<"main">
   & JSX.Component<"main">;
@@ -80,58 +59,50 @@ export const FileSystemRouter:
   & JSX.Component<"main">;
 
 // a.mjs
-/**
- * A virtual component that creates an anchor element
- * that navigates to the specified href when clicked.
- *
- * @example
- * import { A } from '@vanjs/router';
- * import van from 'vanjs-core';
- *
- * export const Navigation = () => {
- *   const { nav } = van.tags
- *   return nav(
- *     A({ href="/" }, "Home"), // or <A href="/">Home</A> with JSX
- *     A({ href="/about" }, "About"), // or <A href="/about">About</A> with JSX
- *     // ...other children
- *   );
- * }
- */
 export const A:
   & VanComponent<"a">
   & JSX.Component<"a">;
 
 // helpers.mjs
-/**
- * Navigates to the specified href in the client and sets the router state.
- * Keep in mind that the router handles the search params and hash.
- *
- * @param href the URL to navigate to
- * @param options when true, will replace the current history entry
- */
 export const navigate: (
   href: string,
   options?: { replace?: boolean },
 ) => void;
 
-/**
- * A client only helper function that reloads the current page.
- */
 export const reload: () => void;
 
-/**
- * A helper function that redirects the user to the specified href.
- * When called in the server, it will return a function that will redirect the user
- * to the specified href when called.
- * @param {string | undefined} href the URL to redirect to
- */
 export const redirect: (href?: string) => void | (() => void);
 
+export const getValue: (v: unknown) => string;
+
+export const isCurrentPage: (pageName: string) => boolean;
+
+export const isCurrentLocation: (pageName: string) => boolean;
+
+export const isLazyComponent: (component: unknown) => boolean;
+
+export const executeLifecycle: (
+  route: RouteEntry | {
+    preload?: (params?: Record<string, string>) => unknown;
+    load?: (params?: Record<string, string>) => unknown;
+  } | null,
+  params: Record<string, string> | undefined,
+) => Promise<boolean>;
+
+export const useRouteData: <T>() => T | undefined;
+
+export const matchRoute: (path: string) => RouteEntry | null;
+
+// extractParams.mjs
+export const extractParams: (
+  pattern: string,
+  path: string,
+) => Record<string, string> | null;
+
 // routes.mjs
 export type RouteEntry = {
   path: string;
   component: () => Promise<ComponentModule>;
-  // component: () => Promise<DynamicModule>;
   params?: Record<string, string>;
   preload?: (
     params?: Record<string, string>,
@@ -143,24 +114,16 @@ export type RouteEntry = {
 
 export type ImportFn = () => LazyComponent;
 
-/**
- * Registers a lazy component.
- * @param importFn
- */
 export const lazy: (importFn: ImportFn) => () => Promise<ComponentModule>;
 
 export type RouteProps = {
   path: string;
   params?: Record<string, string>;
   component:
-    // | (() => HTMLElementTagNameMap[unknown] | HTMLElementTagNameMap[unknown][])
-    // | VanNode
     | (() => DOMElement)
     | VanComponent
     | ComponentFn
-    | (() => Promise<DynamicModule>);
-  //   | ComponentModule["component"];
-  // component: ComponentFn | (() => Promise<ComponentModule>);
+    | (() => Promise<ComponentModule>);
   preload?: (
     params?: Record<string, string>,
   ) => boolean | void | Promise<boolean | void>;
@@ -177,19 +140,6 @@ export type RouteConfig = {
 
 export const routes: RouteEntry[];
 
-/**
- * Registers a new route in the router state.
- * @param route the route to register
- *
- * @example
- * import { Route, lazy } from '@vanjs/router';
- * import Home from './pages/Home';
- * import NotFound from './pages/NotFound';
- *
- * Route({ path: '/', component: Home });
- * Route({ path: '/about', component: lazy(() => import("./pages/About.ts")) });
- * Route({ path: '*', component: NotFound });
- */
 export const Route: (route: RouteProps) => void;
 
 // state.mjs
@@ -197,39 +147,33 @@ export type RouterState = {
   pathname: string;
   searchParams: URLSearchParams;
   params: Record<string, string>;
+  status: "idle" | "pending" | "success" | "error";
 };
-/**
- * A reactive object that holds the current router state.
- * This state is maintained by both server and client.
- */
+
 export const routerState: {
   pathname: RouterState["pathname"];
   searchParams: RouterState["searchParams"];
   params?: RouterState["params"];
+  status: RouterState["status"];
 };
 
-/**
- * Sets the router state to the specified href.
- * @param href the URL to navigate to
- * @param search the search string
- * @param params the route params object
- */
 export const setRouterState: (
   href: string,
   search?: string,
   params?: Record<string, string>,
 ) => void;
 
-export type UnwrapResult = {
-  children: VanNode[];
-};
+export const microStore: <T extends Record<string, unknown>>(init: T) => T;
 
-/**
- * Merge the children of an Element or an array of elements with an optional array of children
- * into the childen prperty of a simple object.
- * @param source
- * @param children
- */
+// routeCache.mjs
+export const cacheRoute: (key: ImportFn, value: ComponentModule) => void;
+
+export const getCachedRoute: (key: ImportFn) => ComponentModule | undefined;
+
+export const fixRouteUrl: (url: string) => string;
+
+// unwrap.mjs
+export type UnwrapResult = { children: VanNode[] };
 
 export const unwrap: (
   source:
@@ -257,42 +201,29 @@ export type ComponentModule = {
   route?: Pick<RouteEntry, "load" | "preload">;
 };
 
-export type DynamicModule = {
-  Page: ComponentFn;
+export type LazyComponent = Promise<{
   default?: ComponentFn;
+  Page?: ComponentFn;
   route?: Pick<RouteEntry, "load" | "preload">;
-};
-
-export type LazyComponent = Promise<DynamicModule>;
-
-/**
- * Fixes the URL of a route.
- * @param url
- */
-export const fixRouteUrl: (url: string) => string;
+}>;
 
-/**
- * Cache a route.
- * @param key the cache route key
- * @param value the cache route
- */
-export const cache: (key: ImportFn, value: ComponentModule) => void;
-
-/**
- * Return a route cache.
- * @param key the cache route key
- */
-export const getCached: (key: typeof importFn) => ComponentModule | undefined;
-
-/**
- * Execute lifecycle methods preload and / or load
- */
-export const executeLifecycle: (
-  { route }: ComponentModule,
-  params: Record<string, string> | undefined,
-) => Promise<boolean>;
+// dataCache.mjs
+export type CacheEntry<T = unknown> = {
+  data: T;
+  error: Error | null;
+  timestamp: number;
+};
 
-/**
- * Find a registered route that matches the given path
- */
-export const matchRoute: (path: string) => RouteEntry | null;
+export const dataCache: {
+  get<T>(pathname: string, key: string): CacheEntry<T> | undefined;
+  set<T>(pathname: string, key: string, entry: Partial<CacheEntry<T>>): void;
+  has(pathname: string, key?: string): boolean;
+  getRoute(pathname: string): Record<string, CacheEntry> | undefined;
+  del(pathname: string, key?: string): boolean;
+  clear(): void;
+  touch(pathname: string): void;
+  toJSON(): Record<string, Record<string, CacheEntry>>;
+  hydrateFromJSON(json: Record<string, Record<string, CacheEntry>>): void;
+  size(): number;
+  setMaxRoutes(n: number): void;
+};

package/server/global.d.ts

@@ -47,4 +47,26 @@ declare module "@vanjs/server" {
    * @returns HTML string
    */
   export const renderToString: (source: Source) => Promise<string>;
+
+  /**
+   * A function that generates a <script> for initial hydration data.
+   * Serializes the full path-keyed data cache into window.__DATA_CACHE
+   * @returns HTML string
+   */
+  export const getDataPreload: () => string;
+}
+
+interface Window {
+  __DATA_CACHE?: Record<
+    string,
+    Record<
+      string,
+      {
+        data: unknown;
+        status: string;
+        timestamp: number;
+        error: { message: string } | null;
+      }
+    >
+  >;
 }

package/server/index.mjs

@@ -1,4 +1,6 @@
 import { basename } from "node:path";
+// import { routerState } from "../router/index.mjs";
+import * as dataCache from "../router/dataCache.mjs";
 export * from "../plugin/helpers.mjs";
 
 /**
@@ -8,6 +10,7 @@ export const renderToString = async (inputSource) => {
   const source = typeof inputSource === "function"
     ? inputSource()
     : inputSource;
+
   if (typeof source === "number") {
     return String(source);
   }
@@ -31,8 +34,8 @@ export const renderToString = async (inputSource) => {
     }
     return elements.join("");
   }
-  // return String(source)
 
+  // return String(source)
   // no source provided
   // @ts-ignore - this is server side code
   console.warn("Render error! Source not recognized: " + source);
@@ -49,17 +52,17 @@ function renderPreloadLink(file) {
   } else if (file.endsWith(".css")) {
     return `<link rel="preload" href="${file}" as="style" crossorigin>`;
   } else if (file.endsWith(".woff")) {
-    return ` <link rel="preload" href="${file}" as="font" type="font/woff" crossorigin>`;
+    return `  <link rel="preload" href="${file}" as="font" type="font/woff" crossorigin>`;
   } else if (file.endsWith(".woff2")) {
-    return ` <link rel="preload" href="${file}" as="font" type="font/woff2" crossorigin>`;
+    return `  <link rel="preload" href="${file}" as="font" type="font/woff2" crossorigin>`;
   } else if (file.endsWith(".gif")) {
-    return ` <link rel="preload" href="${file}" as="image" type="image/gif">`;
+    return `<link rel="preload" href="${file}" as="image" type="image/gif">`;
   } else if (file.endsWith(".jpg") || file.endsWith(".jpeg")) {
-    return ` <link rel="preload" href="${file}" as="image" type="image/jpeg">`;
+    return `<link rel="preload" href="${file}" as="image" type="image/jpeg">`;
   } else if (file.endsWith(".png")) {
-    return ` <link rel="preload" href="${file}" as="image" type="image/png">`;
+    return `<link rel="preload" href="${file}" as="image" type="image/png">`;
   } else if (file.endsWith(".webp")) {
-    return ` <link rel="preload" href="${file}" as="image" type="image/webp">`;
+    return `<link rel="preload" href="${file}" as="image" type="image/webp">`;
   } else {
     // @ts-ignore - this is server side code
     console.warn("Render error! File format not recognized: " + file);
@@ -90,13 +93,11 @@ export function renderPreloadLinks(modules, manifest) {
   // Second pass: generate preload links
   modules.forEach((id) => {
     const files = manifest[id];
-
     // istanbul ignore else
     if (files?.length) {
       files.forEach((file) => {
         // Skip if we've seen this file or if it's an asset from an ignored path
         if (seen.has(file) || ignoredAssets.has(file)) return;
-
         seen.add(file);
         const filename = basename(file);
 
@@ -111,7 +112,6 @@ export function renderPreloadLinks(modules, manifest) {
             }
           }
         }
-
         links += renderPreloadLink(file);
       });
     }
@@ -119,3 +119,19 @@ export function renderPreloadLinks(modules, manifest) {
 
   return links;
 }
+
+/**
+ * Serialize route data for client hydration.
+ * Uses the new __DATA_CACHE format with path-keyed cache entries.
+ * @returns {string}
+ */
+export const getDataPreload = () => {
+  const cacheJSON = dataCache.toJSON();
+  const cacheEntries = Object.keys(cacheJSON);
+
+  if (cacheEntries.length > 0) {
+    const json = JSON.stringify(cacheJSON);
+    return `<script id="data-cache">window.__DATA_CACHE=${json}</script>`;
+  }
+  return "";
+};

package/tsconfig.json

@@ -27,8 +27,6 @@
     "jsxImportSource": "@vanjs/jsx"
   },
   "include": [
-    "./tests/*.ts",
-    "./tests/*.tsx",
     "./plugin/*.ts",
     "./jsx/*.ts",
     "./setup/*.ts",
@@ -36,7 +34,6 @@
     "./meta/*.ts",
     "./server/*.ts",
     "./client/*.ts",
-    "./tests/vite-env.d.ts"
   ],
   "exclude": ["node_modules", "experiments", "coverage"],
 }