vite-plugin-vanjs 0.1.15 → 0.1.17

package/client/index.mjs

@@ -1,3 +1,4 @@
+import van from "vanjs-core";
 import { unwrap } from "../router/unwrap.mjs";
 import { getTagKey } from "../meta/helpers.mjs";
 
@@ -225,20 +226,16 @@ function createHydrationContext() {
 export const hydrate = (target, content) => {
   if (content instanceof Promise) {
     content.then((res) => {
-      if (!target.hasAttribute("data-h")) {
-        const { diffAndHydrate } = createHydrationContext();
-        diffAndHydrate(target, res);
-        target.setAttribute("data-h", "");
-      } else {
-        const wrapper = unwrap(res);
-        target.replaceChildren(
-          ...(Array.from(wrapper.children)),
-        );
-      }
+      hydrate(target, res);
+    });
+    return target;
+  }
+  if (typeof content === "function") {
+    van.derive(() => {
+      hydrate(target, content());
     });
     return target;
   }
-
   const wrapper = unwrap(content);
   const currentChildren = Array.from(target.children);
   const newChildren = Array.from(wrapper.children);
@@ -257,7 +254,9 @@ export const hydrate = (target, content) => {
         getTagKey(child) === key
       );
       if (existing) {
-        existing.replaceWith(newChild);
+        if (existing.outerHTML !== newChild.outerHTML) {
+          existing.replaceWith(newChild);
+        }
       } else {
         target.appendChild(newChild);
       }
@@ -268,9 +267,16 @@ export const hydrate = (target, content) => {
       diffAndHydrate(target, content);
       target.setAttribute("data-h", "");
     } else {
-      target.replaceChildren(...newChildren);
+      // target.replaceChildren(...newChildren);
+      const parsed = [];
+      for (const child of newChildren) {
+        parsed.push(
+          child instanceof Element
+            ? child
+            : /* istanbul ignore next */ String(child),
+        );
+      }
+      target.replaceChildren(...parsed);
     }
   }
-
-  return target;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vite-plugin-vanjs",
-  "version": "0.1.15",
+  "version": "0.1.17",
   "author": "thednp",
   "license": "MIT",
   "description": "A mini meta-framework for VanJS powered by Vite",
@@ -15,6 +15,7 @@
     "setup",
     "router",
     "meta",
+    "data",
     "client",
     "server",
     "jsx",
@@ -93,7 +94,7 @@
     "@vitest/ui": "^4.1.5",
     "happy-dom": "^20.9.0",
     "typescript": "6.0.3",
-    "vite": "^8.0.9",
+    "vite": "^8.0.10",
     "vitest": "^4.1.5"
   },
   "engines": {

package/plugin/helpers.mjs

@@ -206,27 +206,29 @@ export const generateRouteProloaders = (route) => {
   const layoutName = "Module";
 
   return `{
-    preload: async (params) => {
-      ${
+  preload: async (params) => {
+    ${
     route.layouts.map((layout) =>
       `if (${layout.id + layoutName}?.route?.preload) await ${
         layout.id + layoutName
       }?.route?.preload(params);`
-    ).join("\n      ")
+    ).join("\n  ")
   }
-      if (${moduleName}?.route?.preload) await ${moduleName}?.route?.preload(params);
-    },
-    load: async (params) => {
-      ${
+    if (${moduleName}?.route?.preload) await ${moduleName}?.route?.preload(params);
+  },
+  load: async (params) => {
+    let _data;
+    ${
     route.layouts.map((layout) =>
       `if (${layout.id + layoutName}?.route?.load) await ${
         layout.id + layoutName
       }?.route?.load(params);`
-    ).join("\n      ")
+    ).join("\n  ")
   }
-      if (${moduleName}?.route?.load) await ${moduleName}?.route?.load(params);
-    }
-  }`;
+    if (${moduleName}?.route?.load) _data = await ${moduleName}?.route?.load(params);
+    return _data;
+  }
+}`;
 };
 
 /** @type {(route: RouteFile) => string} */

package/plugin/index.mjs

@@ -87,6 +87,7 @@ export default function VitePluginVanJS(options = {}) {
           ],
         },
         ssr: {
+          // external: ["virtual:@vanjs/routes"],
           noExternal: ["vanjs-*", "*-vanjs", "@vanjs/*"],
         },
         resolve: {
@@ -235,8 +236,9 @@ routes.length = 0;
 // Register routes
 ${currentRoutes.map(generateRoute).join("\n")}
 ${
-          (ops && ops.ssr && currentRoutes.length) &&
-          `console.log(\`🍦 @vanjs/router registered ${currentRoutes.length} routes.\`)`
+          (ops?.ssr && currentRoutes.length)
+            ? `console.log(\`🍦 @vanjs/router registered ${currentRoutes.length} routes.\`)`
+            : /* istanbul ignore next */ ""
         }
 `;
 

package/plugin/types.d.ts

@@ -14,6 +14,6 @@ export type VanJSPluginOptions = {
 
 export declare const VitePluginVanJS: (
   config?: VanJSPluginOptions,
-) => Plugin<VanJSPluginOptions>;
+) => Plugin;
 
 export default VitePluginVanJS;

package/router/a.mjs

@@ -1,7 +1,12 @@
 // router/a.mjs
 import van from "vanjs-core";
 import { matchRoute } from "./matchRoute.mjs";
-import { executeLifecycle, isCurrentPage, navigate } from "./helpers.mjs";
+import {
+  getValue,
+  isCurrentLocation,
+  isCurrentPage,
+  navigate,
+} from "./helpers.mjs";
 
 /** @typedef {typeof import("./types").A} A */
 
@@ -9,46 +14,53 @@ import { executeLifecycle, isCurrentPage, navigate } from "./helpers.mjs";
  * @type {A}
  */
 export const A = (
-  /* istanbul ignore next */ { href, children, ...rest } = {},
+  /* istanbul ignore next */
+  { href, children, ...rest } = {},
   ...otherChildren
 ) => {
   /* istanbul ignore next - try again later */
   const props = Object.fromEntries(
     Object.entries(rest || {}).filter(([_, val]) => val !== undefined),
   );
+
+  const preloaded = van.state(false);
+
   const newProps = {
     href,
     ...props,
     onclick: async (e) => {
+      const HREF = getValue(href);
       e.preventDefault();
       /* istanbul ignore next */
-      if (isCurrentPage(href)) return;
+      if (isCurrentPage(HREF)) return;
 
       // istanbul ignore else
-      if (props.onclick) {
+      if (typeof props.onclick === "function") {
         await props.onclick(e);
       }
 
-      const route = matchRoute(href);
-      const module = await route.component();
-      await executeLifecycle(module, route.params);
-
-      navigate(href);
+      navigate(HREF);
     },
-    onmouseenter: () => {
-      const route = matchRoute(href);
+    onmouseenter: async () => {
+      const HREF = getValue(href);
+      const route = matchRoute(HREF);
 
+      // istanbul ignore else
+      if (typeof props.onmouseenter === "function") {
+        await props.onmouseenter(e);
+      }
       /* istanbul ignore else */
-      if (route?.component) {
+      if (route?.component && !preloaded.val) {
         route.component();
+        preloaded.val = true;
       }
     },
   };
 
-  van.derive(() => {
-    if (isCurrentPage(href)) {
-      newProps["aria-current"] = "page";
-    }
+  newProps["aria-current"] = van.derive(() => {
+    const isPage = isCurrentPage(href);
+    const isLocation = isCurrentLocation(href);
+    return isPage ? "page" : isLocation ? "location" : null;
   });
 
   return van.tags.a(newProps, children || otherChildren);

package/router/dataCache.mjs

@@ -0,0 +1,168 @@
+/** @typedef {{ data: unknown; error: Error | null; status: "idle" | "pending" | "success" | "error"; timestamp: number }} CacheEntry */
+/** @typedef {CacheEntry["status"]} DataStatus */
+
+/**
+ * @param {string} pathname
+ * @returns {string}
+ */
+export const normalizePath = (pathname) => {
+  if (!pathname || pathname === "/") return "/";
+  return pathname.endsWith("/") ? pathname.slice(0, -1) : pathname;
+};
+
+/** @type {Map<string, Map<string, CacheEntry>>} */
+const dataCacheMap = new Map();
+
+const DEFAULT_MAX_ROUTES = 20;
+let maxRoutes = DEFAULT_MAX_ROUTES;
+
+/**
+ * @param {number} n
+ */
+export const setMaxRoutes = (n) => {
+  maxRoutes = n;
+};
+
+const evictIfNeeded = () => {
+  if (maxRoutes <= 0) return;
+  while (dataCacheMap.size > maxRoutes) {
+    const firstKey = dataCacheMap.keys().next().value;
+    if (firstKey !== undefined) {
+      dataCacheMap.delete(firstKey);
+    }
+  }
+};
+
+/**
+ * @param {string} pathname
+ * @param {string} key
+ * @returns {CacheEntry | undefined}
+ */
+export const get = (pathname, key) => {
+  const path = normalizePath(pathname);
+  const routeMap = dataCacheMap.get(path);
+  if (!routeMap) return undefined;
+  return routeMap.get(key);
+};
+
+/**
+ * @param {string} pathname
+ * @param {string} key
+ * @param {Partial<CacheEntry>} entry
+ */
+export const set = (pathname, key, entry) => {
+  const path = normalizePath(pathname);
+  let routeMap = dataCacheMap.get(path);
+  if (!routeMap) {
+    routeMap = new Map();
+    dataCacheMap.set(path, routeMap);
+    evictIfNeeded();
+  }
+  routeMap.set(key, {
+    ...entry,
+    timestamp: entry?.timestamp || Date.now(),
+  });
+};
+
+/**
+ * @param {string} pathname
+ * @param {string} [key]
+ * @returns {boolean}
+ */
+export const has = (pathname, key) => {
+  const path = normalizePath(pathname);
+  const routeMap = dataCacheMap.get(path);
+  if (!routeMap) return false;
+  if (key === undefined) return routeMap.size > 0;
+  return routeMap.has(key);
+};
+
+/**
+ * @param {string} pathname
+ * @returns {Record<string, CacheEntry> | undefined}
+ */
+export const getRoute = (pathname) => {
+  const path = normalizePath(pathname);
+  const routeMap = dataCacheMap.get(path);
+  if (!routeMap) return undefined;
+  return Object.fromEntries(routeMap.entries());
+};
+
+/**
+ * @param {string} pathname
+ * @param {string} [key]
+ * @returns {boolean}
+ */
+export const del = (pathname, key) => {
+  const path = normalizePath(pathname);
+  if (key === undefined) {
+    const deleted = dataCacheMap.delete(path);
+    return deleted;
+  }
+  const routeMap = dataCacheMap.get(path);
+  if (!routeMap) return false;
+  const deleted = routeMap.delete(key);
+  if (routeMap.size === 0) {
+    dataCacheMap.delete(path);
+  }
+  return deleted;
+};
+
+export const clear = () => {
+  dataCacheMap.clear();
+};
+
+/**
+ * @param {string} pathname
+ */
+export const touch = (pathname) => {
+  const path = normalizePath(pathname);
+  const routeMap = dataCacheMap.get(path);
+  if (!routeMap) return;
+  dataCacheMap.delete(path);
+  dataCacheMap.set(path, routeMap);
+};
+
+/**
+ * @returns {Record<string, Record<string, { data: unknown; status: string; timestamp: number; error: { message: string } | null }>>}
+ */
+export const toJSON = () => {
+  /** @type {Record<string, Record<string, { data: unknown; status: string; timestamp: number; error: { message: string } | null }>>} */
+  const result = {};
+  for (const [path, routeMap] of dataCacheMap.entries()) {
+    result[path] = {};
+    for (const [key, entry] of routeMap.entries()) {
+      result[path][key] = {
+        data: entry.data,
+        timestamp: entry.timestamp,
+        error: entry.error ? { message: entry.error.message } : null,
+      };
+    }
+  }
+  return result;
+};
+
+/**
+ * @param {Record<string, Record<string, { data: unknown; status?: string; timestamp?: number; error?: { message: string } | null }>>} json
+ */
+export const hydrateFromJSON = (json) => {
+  if (!json || typeof json !== "object") return;
+  for (const [path, routeEntries] of Object.entries(json)) {
+    const normalized = normalizePath(path);
+    let routeMap = dataCacheMap.get(normalized);
+    if (!routeMap) {
+      routeMap = new Map();
+      dataCacheMap.set(normalized, routeMap);
+    }
+    for (const [key, entry] of Object.entries(routeEntries)) {
+      routeMap.set(key, {
+        data: entry.data,
+        timestamp: entry.timestamp || Date.now(),
+        error: entry.error ? new Error(entry.error.message) : null,
+      });
+    }
+  }
+};
+
+/** @returns {number} */
+export const size = () => dataCacheMap.size;

package/router/global.d.ts

@@ -12,9 +12,8 @@ declare module "@vanjs/router" {
     PropValueOrDerived,
     State,
   } from "vanjs-core";
+  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"> =
@@ -27,13 +26,6 @@ declare module "@vanjs/router" {
     | DOMElement
     | VElement
     | PrimitiveChild;
-  // type VanElement =
-  //   | SVGElement
-  //   | HTMLElement
-  //   | DOMElement
-  //   | Node
-  //   | VElement
-  //   | PrimitiveChild;
   export type VanNode =
     | VanElement
     | VanElement[]
@@ -41,9 +33,7 @@ declare module "@vanjs/router" {
     | null
     | undefined;
 
-  type ComponentProps1<T> =
-    & Props
-    & PropsWithKnownKeys<T>;
+  type ComponentProps1<T> = Props & PropsWithKnownKeys<T>;
 
   type ComponentProps<K extends keyof HTMLElementTagNameMap> =
     & Props
@@ -69,7 +59,7 @@ declare module "@vanjs/router" {
    * import { Router } from '@vanjs/router';
    *
    * export const App = () => {
-   *   return Router(); // or <Router /> for JSX
+   * return Router(); // or <Router /> for JSX
    * }
    */
   export const Router:
@@ -89,12 +79,11 @@ declare module "@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
-   *   );
+   * const { nav } = van.tags
+   * return nav(
+   * A({ href="/" }, "Home"),
+   * A({ href="/about" }, "About"),
+   * );
    * }
    */
   export const A:
@@ -114,23 +103,41 @@ declare module "@vanjs/router" {
     options?: { replace?: boolean },
   ) => void;
 
-  /**
-   * A client only helper function that reloads the current page.
-   */
+  /** 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
+   * @param href the URL to redirect to
    */
   export const redirect: (href?: string) => void | (() => void);
 
+  /**
+   * Returns the string value of a State or primitive
+   */
+  export const getValue: (v: unknown) => string;
+
+  /**
+   * Check if selected page is the current page
+   */
+  export const isCurrentPage: (pageName: string) => boolean;
+
+  /**
+   * Check if selected page is related to the current page
+   */
+  export const isCurrentLocation: (pageName: string) => boolean;
+
+  /**
+   * Check if component is a lazy component
+   */
+  export const isLazyComponent: (component: unknown) => boolean;
+
   // routes.mjs
   export type RouteEntry = {
     path: string;
-    component: Promise<ComponentModule>;
+    component: () => Promise<ComponentModule>;
     params?: Record<string, string>;
     preload?: (
       params?: Record<string, string>,
@@ -140,17 +147,16 @@ declare module "@vanjs/router" {
     ) => boolean | void | Promise<boolean | void>;
   };
 
+  export type ImportFn = () => LazyComponent;
+
   export type RouteProps = {
     path: string;
+    params?: Record<string, string>;
     component:
-      | (() =>
-        | HTMLElementTagNameMap[unknown]
-        | HTMLElementTagNameMap[unknown][])
+      | (() => DOMElement)
       | VanComponent
       | ComponentFn
-      | (() => Promise<DynamicModule>);
-    //   | ComponentModule["component"];
-    // component: ComponentFn | (() => Promise<ComponentModule>);
+      | (() => Promise<ComponentModule>);
     preload?: (
       params?: Record<string, string>,
     ) => boolean | void | Promise<boolean | void>;
@@ -158,6 +164,13 @@ declare module "@vanjs/router" {
       params?: Record<string, string>,
     ) => boolean | void | Promise<boolean | void>;
   };
+
+  export type RouteConfig = {
+    routePath: string;
+    path: string;
+    layouts?: LayoutFile[];
+  };
+
   export const routes: RouteEntry[];
 
   /**
@@ -180,15 +193,18 @@ declare module "@vanjs/router" {
     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: van.state<RouterState.pathname>;
-    searchParams: van.state<RouterState.searchParams>;
-    params?: van.state<RouterState.params>;
+    pathname: RouterState["pathname"];
+    searchParams: RouterState["searchParams"];
+    params?: RouterState["params"];
+    status: RouterState["status"];
   };
 
   /**
@@ -203,12 +219,24 @@ declare module "@vanjs/router" {
     params?: Record<string, string>,
   ) => void;
 
+  /**
+   * Creates a reactive micro store from an initial object
+   */
+  export const microStore: <T extends Record<string, unknown>>(init: T) => T;
+
+  /**
+   * Fixes the URL of a route.
+   * @param url
+   */
+  export const fixRouteUrl: (url: string) => string;
+
+  // unwrap.mjs
   /**
    * 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
+   * into the children property of a simple object.
    */
+  export type UnwrapResult = { children: VanNode[] };
+
   export const unwrap: (
     source:
       | VanNode
@@ -223,8 +251,8 @@ declare module "@vanjs/router" {
         | ReturnType<IsoTagFunc>[]
         | VanNode
         | VanNode[]),
-    ...children: ChildDom[]
-  ) => { children: ChildDom[] };
+    ...children: VanNode[]
+  ) => UnwrapResult;
 
   export type JSXComponentFn = () => JSX.Element;
   export type FragmentFn = () => ChildDom | ChildDom[];
@@ -235,15 +263,11 @@ declare module "@vanjs/router" {
     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>;
-
-  export type ImportFn = () => LazyComponent;
+  }>;
 
   /**
    * Registers a lazy component.
@@ -252,21 +276,57 @@ declare module "@vanjs/router" {
   export const lazy: (importFn: ImportFn) => () => Promise<ComponentModule>;
 
   /**
-   * Fixes the URL of a route.
-   * @param url
+   * Cache a route.
+   * @param key the cache route key
+   * @param value the cache route
    */
-  export const fixRouteUrl: (url: string) => string;
+  export const cacheRoute: (key: ImportFn, value: ComponentModule) => void;
+
+  /**
+   * Return a route cache.
+   * @param key the cache route key
+   */
+  export const getCachedRoute: (key: ImportFn) => ComponentModule | undefined;
 
   /**
    * Execute lifecycle methods preload and / or load
    */
   export const executeLifecycle: (
-    { route }: ComponentModule,
-    params?: Record<string, string> | undefined,
-  ) => Promise<boolean | void>;
+    route: RouteEntry | {
+      preload?: (params?: Record<string, string>) => unknown;
+      load?: (params?: Record<string, string>) => unknown;
+    } | null,
+    params: Record<string, string> | undefined,
+  ) => Promise<boolean>;
 
   /**
    * Find a registered route that matches the given path
    */
   export const matchRoute: (path: string) => RouteEntry | null;
+
+  /**
+   * Convenience hook to get the current route's cached data.
+   */
+  export const useRouteData: <T>() => T | undefined;
+
+  // dataCache.mjs
+  export type CacheEntry<T = unknown> = {
+    data: T;
+    error: Error | null;
+    timestamp: number;
+  };
+
+  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;
+  };
 }