vite-plugin-vanjs 0.1.15 → 0.1.17

package/router/helpers.mjs

@@ -1,22 +1,41 @@
 import isServer from "../setup/isServer.mjs";
 import { routerState, setRouterState } from "./state.mjs";
 import { matchRoute } from "./matchRoute.mjs";
+import * as dataCache from "./dataCache.mjs";
 
 /** @typedef {typeof import("./types.d.ts").navigate} Navigate */
 /** @typedef {import("./types.d.ts").Route} Route */
 /** @typedef {import("./types.d.ts").VanNode} VanNode */
 /** @typedef {import("./types.d.ts").ComponentModule} ComponentModule */
-/** @typedef {import("./types.d.ts").DynamicModule} DynamicModule */
 /** @typedef {import("./types.d.ts").ComponentFn} ComponentFn */
 /** @typedef {import("./types.d.ts").LazyComponent} LazyComponent */
 
+/**
+ * Returns the HREF string value
+ * @param {unknown} v
+ * @returns {string}
+ */
+export const getValue = (v) => {
+  return typeof v === "function" ? v() : v.rawVal ? v.val : v;
+};
+
 /**
  * Check if selected page is the current page;
  * @param {string} pageName
  * @returns {boolean}
  */
 export const isCurrentPage = (pageName) => {
-  return routerState.pathname.val === pageName;
+  return routerState.pathname === getValue(pageName);
+};
+
+/**
+ * Check if selected page is related to the current page;
+ * @param {string} pageName
+ * @returns {boolean}
+ */
+export const isCurrentLocation = (pageName) => {
+  const pathName = routerState.pathname;
+  return pathName !== "/" && pathName.includes(getValue(pageName));
 };
 
 /**
@@ -25,28 +44,46 @@ export const isCurrentPage = (pageName) => {
  * @returns {component is (() => LazyComponent)}
  */
 export const isLazyComponent = (component) => {
-  // Server: Check if it's an async function
-  if (isServer && typeof component === "function") {
-    return component.constructor.name.includes("AsyncFunction");
-  }
-
-  // Client: Check if it's designated as lazy
+  if (typeof component !== "function") return false;
   // @ts-expect-error - this property is optional and on purpose
-  return component?.isLazy === true;
+  return component?.isLazy === true ||
+    component.constructor.name.includes("AsyncFunction");
 };
 
 /**
  * Execute lifecycle methods preload and / or load
- * @param {ComponentModule} param0
+ * @param {import("./types.d.ts").RouteEntry} route
  * @param {Record<string, string> | undefined} params
  * @returns {Promise<boolean>}
  */
-export const executeLifecycle = async ({ route }, params) => {
+export const executeLifecycle = async (route, params) => {
   // istanbul ignore next
-  if (!route) return true;
   try {
-    if (route?.preload) await route.preload(params);
-    if (route?.load) await route.load(params);
+    if (!route) return true;
+
+    let data;
+    const preload = route.preload;
+    const load = route.load;
+
+    if (preload) await preload(params);
+    if (!data && load) data = await load(params);
+    if (data) {
+      // initialLoaded = true;
+      const pathname = routerState.pathname;
+      const cacheKey = Object.keys(params || {}).length === 0
+        ? ""
+        : JSON.stringify(params);
+      dataCache.set(pathname, cacheKey, {
+        data,
+        error: null,
+        status: "success",
+        timestamp: Date.now(),
+      });
+      if (!isServer) {
+        dataCache.touch(pathname);
+      }
+    }
+
     return true;
   } catch (error) {
     // istanbul ignore next
@@ -56,6 +93,16 @@ export const executeLifecycle = async ({ route }, params) => {
   }
 };
 
+/**
+ * Convenience hook to get the current route's cached data.
+ * @returns {any | undefined}
+ */
+export const useRouteData = () => {
+  const params = routerState.params;
+  const key = Object.keys(params).length === 0 ? "" : JSON.stringify(params);
+  return dataCache.get(routerState.pathname, key)?.data;
+};
+
 /**
  * Client only navigation utility.
  * @type {Navigate}

package/router/index.mjs

@@ -5,6 +5,7 @@ export * from "./a.mjs";
 export * from "./state.mjs";
 export * from "./lazy.mjs";
 export * from "./helpers.mjs";
-export * from "./cache.mjs";
+export * from "./routeCache.mjs";
+export * as dataCache from "./dataCache.mjs";
 export * from "./unwrap.mjs";
 export * from "./extractParams.mjs";

package/router/lazy.mjs

@@ -1,7 +1,5 @@
 // router/lazy.mjs
-import van from "vanjs-core";
-import isServer from "../setup/isServer.mjs";
-import { cache, getCached } from "./cache.mjs";
+import { cacheRoute, getCachedRoute } from "./routeCache.mjs";
 
 /** @typedef {import('./types').VanNode} VanNode */
 /** @typedef {import('./types').DynamicModule} DynamicModule */
@@ -10,63 +8,27 @@ import { cache, getCached } from "./cache.mjs";
 
 /**
  * Registers a lazy component.
+ * Both server and client return an async function that resolves the module.
  * @type {typeof import("./types").lazy}
  */
 export const lazy = (importFn) => {
-  if (isServer) {
-    return async () => {
-      const cached = getCached(importFn);
-      /* istanbul ignore next */
-      if (cached) {
-        return cached;
-      }
-
-      const module = await importFn();
-      /** @type {ComponentFn} */
-      const component = module?.default || module.Page;
-      /** @type {ComponentModule} */
-      const result = { component, route: module.route };
-
-      cache(importFn, result);
-      return result;
-    };
-  }
-
-  let initialized = false;
-  /** @type {import("vanjs-core").State<(ComponentModule["component"] | (() => string))>} */
-  const component = van.state(() => "Loading..");
-  /** @type {import("vanjs-core").State<ComponentModule["route"]>} */
-  const route = van.state({});
-
-  const load = () => {
-    if (initialized) return;
-
-    const cached = getCached(importFn);
+  const resolveModule = async () => {
+    const cached = getCachedRoute(importFn);
     /* istanbul ignore next */
     if (cached) {
-      component.val = cached.component;
-      route.val = cached.route;
-      return;
+      return cached;
     }
 
-    initialized = true;
-    importFn().then(
-      /** @param {DynamicModule} module */
-      (module) => {
-        /** @type {ComponentModule["component"]} */
-        const pageComponent = module?.default || module.Page;
-        cache(importFn, { component: pageComponent, route: module.route });
-        component.val = pageComponent;
-        route.val = module.route;
-      },
-    );
-  };
+    const module = await importFn();
+    /** @type {ComponentFn} */
+    const component = module?.default || module.Page;
+    /** @type {ComponentModule} */
+    const result = { component, route: module.route };
 
-  const lazyComponent = () => {
-    load();
-    return { component: component.val(), route: route.val };
+    cacheRoute(importFn, result);
+    return result;
   };
-  lazyComponent.isLazy = true;
-  // @ts-expect-error - typescript cannot handle this isomorphically
-  return lazyComponent;
+
+  resolveModule.isLazy = true;
+  return resolveModule;
 };

package/router/route.mjs

@@ -1,7 +1,8 @@
-// router/routes.mjs
+// router/route.mjs
 import { isLazyComponent } from "./helpers.mjs";
 import { routes } from "./routes.mjs";
 import { lazy } from "./lazy.mjs";
+
 /** @typedef {import("./types.d.ts").RouteProps} RouteProps */
 /** @typedef {import("./types.d.ts").ComponentModule} ComponentModule */
 
@@ -17,7 +18,7 @@ export const Route = (routeProps) => {
     return;
   }
 
-  // If component isn't lazy, make it lazy
+  // If component isn't lazy, wrap it with preload/load
   if (!isLazyComponent(component)) {
     /** @type {() => Promise<ComponentModule>} */
     const wrappedComponent = lazy(() =>
@@ -26,11 +27,10 @@ export const Route = (routeProps) => {
         route: { preload, load },
       })
     );
-    routes.push({ ...rest, path, component: wrappedComponent });
+    routes.push({ ...rest, path, preload, load, component: wrappedComponent });
     return;
   }
 
-  // Otherwise keep original component
-  // @ts-expect-error - RouteProps and RouteEntry are now equivalent
-  routes.push(routeProps);
+  // Lazy component — same async function on server and client
+  routes.push({ ...rest, path, component, preload, load });
 };

package/router/{cache.mjs → routeCache.mjs}

@@ -7,9 +7,9 @@
 const routeCache = new Map();
 
 /** @type {GetCachedRoute} */
-export const getCached = (key) => routeCache.get(key);
+export const getCachedRoute = (key) => routeCache.get(key);
 
 /** @type {CacheRoute} */
-export const cache = (key, value) => {
+export const cacheRoute = (key, value) => {
   routeCache.set(key, value);
 };

package/router/router.mjs

@@ -6,7 +6,7 @@ import { executeLifecycle } from "./helpers.mjs";
 import { unwrap } from "./unwrap.mjs";
 import { hydrate } from "../client/index.mjs";
 import { Head, initializeHeadTags } from "../meta/index.mjs";
-
+import * as dataCache from "./dataCache.mjs";
 import "virtual:@vanjs/routes";
 
 /** @typedef {import("./types.d.ts").ComponentModule} ComponentModule */
@@ -34,7 +34,7 @@ const resolveChildren = (module) => {
 const updateHead = () => {
   // istanbul ignore else
   if (document.head) {
-    van.hydrate(document.head, (head) => hydrate(head, Head()));
+    hydrate(document.head, Head());
   }
 };
 
@@ -52,7 +52,7 @@ const initClient = () => {
     /** @param {Event & {target: globalThis}} e */
     (e) => {
       const location = e.target.location;
-      const oldPath = routerState.pathname._oldVal;
+      const oldPath = routerState.pathname;
       // istanbul ignore next - cannot test
       if (location.pathname !== oldPath) {
         setRouterState(location.pathname, location.search);
@@ -64,27 +64,28 @@ const initClient = () => {
 
 export const Router = (initialProps = /* istanbul ignore next */ {}) => {
   const { div, main } = van.tags;
-
   const props = Object.fromEntries(
     Object.entries(initialProps).filter(([_, val]) => val !== undefined),
   );
-  const wrapper = main({ ...props, "data-root": true });
-
-  // Initialize Head BEFORE any route matching or lifecycle execution
-  if (!isServer) initClient();
+  const wrapper = main({ ...props, "data-root": "" });
+  const route = matchRoute(routerState.pathname);
 
-  const route = matchRoute(routerState.pathname.val);
   /* istanbul ignore else */
   if (!route) return van.add(wrapper, div("No Route Found"));
 
-  routerState.params.val = route.params || {};
+  Object.assign(routerState.params, route.params || {});
 
   // Server-side rendering
   if (isServer) {
-    return (async () => {
+    return async () => {
       try {
+        // 1. Resolve the module first (to get route lifecycle hooks)
         const module = await route.component();
-        await executeLifecycle(module, route.params);
+
+        // 2. Execute lifecycle
+        await executeLifecycle(module.route, route.params);
+
+        // 3. Render the component (data is now in dataCache)
         return van.add(wrapper, ...resolveChildren(module));
       } catch (error) {
         /* istanbul ignore next */
@@ -92,34 +93,46 @@ export const Router = (initialProps = /* istanbul ignore next */ {}) => {
         /* istanbul ignore next */
         return van.add(wrapper, div("Error loading page"));
       }
-    })();
+    };
   }
 
-  // Client-side: check if hydrating SSR content or SPA
+  // Init client here
+  if (!isServer) initClient();
+
+  // Client-side: hydrate data cache from SSR output
+  // This must happen BEFORE any component renders so useRouteData() works
+  if (globalThis.__DATA_CACHE) {
+    dataCache.hydrateFromJSON(globalThis.__DATA_CACHE);
+  }
+
+  // Client-side: check if hydrating SSR content or pure SPA
   const root = document.querySelector("[data-root]");
 
   if (root) {
-    // Hydration path - root exists from SSR
-    const module = route.component();
-    executeLifecycle(module, route.params);
-    updateHead();
-    return van.add(wrapper, ...resolveChildren(module));
+    return async () => {
+      const module = await route.component();
+
+      await executeLifecycle(module.route, route.params);
+      updateHead();
+      return van.add(wrapper, ...resolveChildren(module));
+    };
   }
 
-  // SPA path - reactive routing
+  // Pure SPA path - reactive routing
   van.derive(() => {
-    const r = matchRoute(routerState.pathname.val);
-    if (!r) {
+    const matchedRoute = matchRoute(routerState.pathname);
+    if (!matchedRoute) {
       wrapper.replaceChildren(div("No Route Found"));
       return;
     }
 
-    const module = r.component();
-    executeLifecycle(module, r.params);
-    const children = resolveChildren(module);
-
-    wrapper.replaceChildren(...children);
-    updateHead();
+    (async () => {
+      const module = await matchedRoute.component();
+      await executeLifecycle(module.route, matchedRoute.params);
+      const children = resolveChildren(module);
+      wrapper.replaceChildren(...children);
+      updateHead();
+    })();
   });
 
   return wrapper;

package/router/state.mjs

@@ -18,23 +18,92 @@ export const fixRouteUrl = (url) => {
 const initialPath = !isServer ? globalThis.location.pathname : "/";
 const initialSearch = !isServer ? globalThis.location.search : "";
 
+const STATE_PROXY = "_proxy";
+const proxyProps = {
+  value: 1,
+  enumerable: false,
+  configurable: false,
+  writable: false,
+};
+
 /**
- * @type {typeof import("./types.d.ts").routerState}
+ * @param {number | Omit<keyof T, "symbol">} key
+ * @param {T[keyof T]} value
+ * @param {Record<string, string | number>} target
+ * @returns {T}
  */
-export const routerState = {
-  pathname: van.state(initialPath),
-  searchParams: van.state(new URLSearchParams(initialSearch)),
-  params: van.state({}),
+const defineProxy = (key, value, target) => {
+  const stateObj = van.state(value);
+
+  const getter = () => stateObj.val;
+  const setter = (newVal) => {
+    stateObj.val = newVal;
+  };
+  stateObj.val = value;
+
+  Object.defineProperties(target, {
+    [STATE_PROXY]: proxyProps,
+    [key]: {
+      get: getter,
+      set: setter,
+      enumerable: true,
+    },
+  });
+
+  return stateObj;
 };
 
+/** @typedef  */
+
+/**
+ * @template {Record<string, unknown>} T
+ * @param {T} init
+ * @returns {T}
+ */
+export function microStore(init) {
+  /** @type {T} */
+  const target = {};
+  for (const [prop, value] of Object.entries(init)) {
+    const isPlainObject = value && typeof value === "object" &&
+      !Array.isArray(value) && Object.getPrototypeOf(value) === Object;
+
+    if (isPlainObject && Object.keys(value).length > 0) {
+      for (const [sp, sv] of Object.entries(value)) {
+        target[prop] = defineProxy(sp, sv, {});
+      }
+    } else if (isPlainObject) {
+      target[prop] = value;
+    } else if (!Array.isArray(value) && value != null) {
+      defineProxy(prop, value, target);
+    } else {
+      console.warn(typeof value + " is not supported.");
+    }
+  }
+  return target;
+}
+
+/**
+ * @type {typeof import("./types.d.ts").routerState}
+ */
+const initialStatus = isServer
+  ? "success"
+  : (globalThis.__DATA_CACHE ? "success" : "idle");
+
+export const routerState = microStore({
+  pathname: initialPath,
+  searchParams: new URLSearchParams(initialSearch),
+  params: {},
+  status: initialStatus,
+});
+
 /**
  * @type {typeof import("./types.d.ts").setRouterState}
  */
-export const setRouterState = (path, search = undefined, params) => {
+export const setRouterState = (path, search = undefined, params = {}) => {
   const [pathname, searchParams] = fixRouteUrl(path).split("?");
-  routerState.pathname.val = pathname;
-  routerState.searchParams.val = new URLSearchParams(
+  routerState.pathname = pathname;
+  routerState.searchParams = new URLSearchParams(
     search || searchParams || "",
   );
-  routerState.params.val = params || {};
+  Object.assign(routerState.params, params);
 };