vite-plugin-vanjs 0.1.22 → 0.1.23

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vite-plugin-vanjs",
-  "version": "0.1.22",
+  "version": "0.1.23",
   "author": "thednp",
   "license": "MIT",
   "description": "An async first mini meta-framework for VanJS powered by Vite",

package/plugin/const.mjs

@@ -0,0 +1,8 @@
+const ENV = import.meta.env;
+const SSR = ENV.SSR;
+const DEV = ENV.DEV;
+const PROD = ENV.PROD;
+const MODE = ENV.MODE;
+const BASE_URL = ENV.BASE_URL;
+
+export { BASE_URL, DEV, MODE, PROD, SSR };

package/plugin/helpers.mjs

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

package/router/global.d.ts

@@ -139,12 +139,8 @@ declare module "@vanjs/router" {
     path: string;
     component: () => Promise<ComponentModule>;
     params?: Record<string, string>;
-    preload?: (
-      params?: Record<string, string>,
-    ) => boolean | void | Promise<boolean | void>;
-    load?: (
-      params?: Record<string, string>,
-    ) => boolean | void | Promise<boolean | void>;
+    preload?: () => boolean | void | Promise<boolean | void>;
+    load?: () => boolean | void | Promise<boolean | void>;
   };
 
   export type ImportFn = () => LazyComponent;
@@ -157,12 +153,8 @@ declare module "@vanjs/router" {
       | VanComponent
       | ComponentFn
       | (() => Promise<ComponentModule>);
-    preload?: (
-      params?: Record<string, string>,
-    ) => boolean | void | Promise<boolean | void>;
-    load?: (
-      params?: Record<string, string>,
-    ) => boolean | void | Promise<boolean | void>;
+    preload?: () => boolean | void | Promise<boolean | void>;
+    load?: () => boolean | void | Promise<boolean | void>;
   };
 
   export type RouteConfig = {
@@ -191,7 +183,7 @@ declare module "@vanjs/router" {
   // state.mjs
   export type RouterState = {
     pathname: string;
-    searchParams: URLSearchParams;
+    searchParams: string;
     params: Record<string, string>;
     status: "idle" | "pending" | "success" | "error";
   };
@@ -293,10 +285,9 @@ declare module "@vanjs/router" {
    */
   export const executeLifecycle: (
     route: RouteEntry | {
-      preload?: (params?: Record<string, string>) => unknown;
-      load?: (params?: Record<string, string>) => unknown;
+      preload?: () => unknown;
+      load?: () => unknown;
     } | null,
-    params: Record<string, string> | undefined,
   ) => Promise<boolean>;
 
   /**
@@ -304,8 +295,7 @@ declare module "@vanjs/router" {
    */
   export const matchRoute: (path: string) => RouteEntry | null;
 
-  /**
-   * Convenience hook to get the current route's cached data.
+  /**  * Convenience hook to get the current route's cached data.
    */
   export const useRouteData: <T>() => T | undefined;
 

package/router/helpers.mjs

@@ -1,15 +1,32 @@
 import isServer from "../setup/isServer.mjs";
 import { routerState, setRouterState } from "./state.mjs";
 import { matchRoute } from "./matchRoute.mjs";
+import { unwrap } from "./unwrap.mjs";
 import * as dataCache from "./dataCache.mjs";
 
 /** @typedef {typeof import("./types.d.ts").navigate} Navigate */
+/** @typedef {import("./types.d.ts").SearchParamDef} SearchParamDef */
 /** @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").ComponentFn} ComponentFn */
 /** @typedef {import("./types.d.ts").LazyComponent} LazyComponent */
 
+/**
+ * Resolve component children from a module
+ * @param {ComponentModule | Element | Element[] | any} module
+ * @returns {VanNode[]}
+ */
+export const resolveChildren = (module) => {
+  const isElement = typeof Element !== "undefined" && module instanceof Element;
+  const cp = (Array.isArray(module) || isElement)
+    ? module
+    : typeof module.component === "function"
+    ? module.component()
+    : module.component;
+  return cp ? Array.from(unwrap(cp).children) : /* istanbul ignore next */ [];
+};
+
 /**
  * Returns the HREF string value
  * @param {unknown} v
@@ -19,13 +36,25 @@ export const getValue = (v) => {
   return typeof v === "function" ? v() : v.rawVal ? v.val : v;
 };
 
+export const getCacheKey = () => {
+  const params = routerState.params;
+  const search = routerState.searchParams;
+  return Object.keys(params).length === 0
+    ? search || ""
+    : JSON.stringify(params) + (search ? `&${search}` : "");
+};
+
 /**
  * Check if selected page is the current page;
  * @param {string} pageName
  * @returns {boolean}
  */
 export const isCurrentPage = (pageName) => {
-  return routerState.pathname === getValue(pageName);
+  const href = getValue(pageName);
+  if (isServer) return routerState.pathname === href;
+  const url = new URL(href, globalThis.location.origin);
+  return routerState.pathname === url.pathname &&
+    routerState.searchParams === url.searchParams.toString();
 };
 
 /**
@@ -53,10 +82,9 @@ export const isLazyComponent = (component) => {
 /**
  * Execute lifecycle methods preload and / or load
  * @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) => {
   // istanbul ignore next
   try {
     if (!route) return true;
@@ -66,13 +94,11 @@ export const executeLifecycle = async (route, params) => {
     const load = route.load;
 
     const pathname = routerState.pathname;
-    const cacheKey = Object.keys(params || {}).length === 0
-      ? ""
-      : JSON.stringify(params);
+    const cacheKey = getCacheKey();
 
-    if (preload) await preload(params);
+    if (preload) await preload();
     if (!data && load && !dataCache.has(pathname, cacheKey)) {
-      data = await load(params);
+      data = await load();
     } else if (load && dataCache.has(pathname, cacheKey)) {
       dataCache.touch(pathname);
     }
@@ -102,8 +128,7 @@ export const executeLifecycle = async (route, params) => {
  * @returns {any | undefined}
  */
 export const useRouteData = () => {
-  const params = routerState.params;
-  const key = Object.keys(params).length === 0 ? "" : JSON.stringify(params);
+  const key = getCacheKey();
   return dataCache.get(routerState.pathname, key)?.data;
 };
 

package/router/router.mjs

@@ -1,33 +1,20 @@
 import van from "vanjs-core";
 import isServer from "../setup/isServer.mjs";
+import { MODE } from "../plugin/const.mjs";
 import { routerState, setRouterState } from "./state.mjs";
 import { matchRoute } from "./matchRoute.mjs";
-import { executeLifecycle } from "./helpers.mjs";
-import { unwrap } from "./unwrap.mjs";
+import { executeLifecycle, resolveChildren } from "./helpers.mjs";
 import { hydrate } from "../client/index.mjs";
 import { Head, initializeHeadTags } from "../meta/index.mjs";
 import * as dataCache from "./dataCache.mjs";
 import "virtual:@vanjs/routes";
 
+const isDev = MODE === "development";
+
 /** @typedef {import("./types.d.ts").ComponentModule} ComponentModule */
 /** @typedef {import("./types.d.ts").RouteEntry} RouteEntry */
 /** @typedef {import("./types.d.ts").VanNode} VanNode */
 
-/**
- * Resolve component children from a module
- * @param {ComponentModule | Element | Element[] | any} module
- * @returns {VanNode[]}
- */
-const resolveChildren = (module) => {
-  const isElement = typeof Element !== "undefined" && module instanceof Element;
-  const cp = (Array.isArray(module) || isElement)
-    ? module
-    : typeof module.component === "function"
-    ? module.component()
-    : module.component;
-  return cp ? Array.from(unwrap(cp).children) : /* istanbul ignore next */ [];
-};
-
 /**
  * Update head tags
  */
@@ -38,6 +25,26 @@ const updateHead = () => {
   }
 };
 
+/**
+ * @param {RouteEntry} route
+ * @param {HTMLElement} wrapper
+ * @param {boolean} ssr
+ * @returns
+ */
+const executeModule = async (route, wrapper, ssr) => {
+  // 1. Resolve the module first (to get route lifecycle hooks)
+  const module = await route.component();
+  // 2. Execute lifecycle
+  await executeLifecycle(module.route);
+  // 3. Resolve children
+  const children = resolveChildren(module);
+  // 4. Update <head> in the client
+  if (!isServer) updateHead();
+  // 5. Update / replace children in wrapper
+  if (ssr) return van.add(wrapper, ...children);
+  else wrapper.replaceChildren(...children);
+};
+
 /**
  * Initialize client-side router (Head + popstate listener)
  */
@@ -53,8 +60,10 @@ const initClient = () => {
     (e) => {
       const location = e.target.location;
       const oldPath = routerState.pathname;
+      const oldSearch = routerState.searchParams;
+      const newSearch = new URLSearchParams(location.search).toString();
       // istanbul ignore next - cannot test
-      if (location.pathname !== oldPath) {
+      if (location.pathname !== oldPath || newSearch !== oldSearch) {
         setRouterState(location.pathname, location.search);
       }
     },
@@ -69,25 +78,18 @@ export const Router = (initialProps = /* istanbul ignore next */ {}) => {
   );
   const wrapper = main({ ...props, "data-root": "" });
   const route = matchRoute(routerState.pathname);
+  let _searchParams = routerState.searchParams;
 
   /* istanbul ignore else */
   if (!route) return van.add(wrapper, div("No Route Found"));
-
+  // It's important to READ the params
   Object.assign(routerState.params, route.params || {});
 
   // Server-side rendering
   if (isServer) {
     return async () => {
       try {
-        // 1. Resolve the module first (to get route lifecycle hooks)
-        const module = await route.component();
-
-        // 2. Execute lifecycle
-        await executeLifecycle(module.route, route.params);
-        const children = resolveChildren(module);
-
-        // 3. Render the component (data is now in dataCache)
-        return van.add(wrapper, ...children);
+        return await executeModule(route, wrapper, true);
       } catch (error) {
         /* istanbul ignore next */
         console.error("Router error:", error);
@@ -98,11 +100,12 @@ export const Router = (initialProps = /* istanbul ignore next */ {}) => {
   }
 
   // Init client here
-  if (!isServer) initClient();
+  initClient();
+  let initialized = false;
 
   // Client-side: hydrate data cache from SSR output
   // This must happen BEFORE any component renders so useRouteData() works
-  if (globalThis.__DATA_CACHE) {
+  if (globalThis.__DATA_CACHE && !isDev) {
     dataCache.hydrateFromJSON(globalThis.__DATA_CACHE);
   }
 
@@ -110,30 +113,36 @@ export const Router = (initialProps = /* istanbul ignore next */ {}) => {
   const root = document.querySelector("[data-root]");
 
   if (root) {
+    van.derive(() => {
+      _searchParams = routerState.searchParams;
+      if (!initialized) return;
+      const matchedRoute = matchRoute(routerState.pathname);
+      if (!matchedRoute) {
+        wrapper.replaceChildren(div("No Route Found"));
+        return;
+      }
+      (async () => {
+        initialized = true;
+        await executeModule(matchedRoute, wrapper);
+      })();
+    });
     return async () => {
-      const module = await route.component();
-
-      await executeLifecycle(module.route, route.params);
-      const children = resolveChildren(module);
-      updateHead();
-      return van.add(wrapper, ...children);
+      return await executeModule(route, wrapper, true);
     };
   }
 
   // Pure SPA path - reactive routing
   van.derive(() => {
     const matchedRoute = matchRoute(routerState.pathname);
+    _searchParams = routerState.searchParams;
+    // routerState.searchParams;
     if (!matchedRoute) {
       wrapper.replaceChildren(div("No Route Found"));
       return;
     }
 
     (async () => {
-      const module = await matchedRoute.component();
-      await executeLifecycle(module.route, matchedRoute.params);
-      const children = resolveChildren(module);
-      wrapper.replaceChildren(...children);
-      updateHead();
+      await executeModule(matchedRoute, wrapper);
     })();
   });
 

package/router/state.mjs

@@ -18,6 +18,16 @@ export const fixRouteUrl = (url) => {
 const initialPath = !isServer ? globalThis.location.pathname : "/";
 const initialSearch = !isServer ? globalThis.location.search : "";
 
+/**
+ * Normalize a search string to a plain string (strip leading "?")
+ * @param {string} search
+ * @returns {string}
+ */
+const normalizeSearch = (search) => {
+  if (!search) return "";
+  return search.startsWith("?") ? search.slice(1) : search;
+};
+
 const STATE_PROXY = "_proxy";
 const proxyProps = {
   value: 1,
@@ -72,7 +82,7 @@ export function microStore(init) {
         target[prop] = defineProxy(sp, sv, {});
       }
     } else if (isPlainObject) {
-      target[prop] = value;
+      defineProxy(prop, value, target);
     } else if (!Array.isArray(value) && value != null) {
       defineProxy(prop, value, target);
     } else {
@@ -91,7 +101,7 @@ const initialStatus = isServer
 
 export const routerState = microStore({
   pathname: initialPath,
-  searchParams: new URLSearchParams(initialSearch),
+  searchParams: normalizeSearch(initialSearch),
   params: {},
   status: initialStatus,
 });
@@ -100,11 +110,9 @@ export const routerState = microStore({
  * @type {typeof import("./types.d.ts").setRouterState}
  */
 export const setRouterState = (path, search = undefined, params = {}) => {
-  const [pathname, searchParams] = fixRouteUrl(path).split("?");
+  const [pathname, searchPart] = fixRouteUrl(path).split("?");
   routerState.pathname = pathname;
-  routerState.searchParams = new URLSearchParams(
-    search || searchParams || "",
-  );
+  routerState.searchParams = normalizeSearch(search || searchPart || "");
   Object.keys(routerState.params).forEach((key) =>
     delete routerState.params[key]
   );

package/router/types.d.ts

@@ -83,10 +83,9 @@ export const isLazyComponent: (component: unknown) => boolean;
 
 export const executeLifecycle: (
   route: RouteEntry | {
-    preload?: (params?: Record<string, string>) => unknown;
-    load?: (params?: Record<string, string>) => unknown;
+    preload?: () => unknown;
+    load?: () => unknown;
   } | null,
-  params: Record<string, string> | undefined,
 ) => Promise<boolean>;
 
 export const useRouteData: <T>() => T | undefined;
@@ -104,12 +103,8 @@ export type RouteEntry = {
   path: string;
   component: () => Promise<ComponentModule>;
   params?: Record<string, string>;
-  preload?: (
-    params?: Record<string, string>,
-  ) => boolean | void | Promise<boolean | void>;
-  load?: (
-    params?: Record<string, string>,
-  ) => boolean | void | Promise<boolean | void>;
+  preload?: () => boolean | void | Promise<boolean | void>;
+  load?: () => boolean | void | Promise<boolean | void>;
 };
 
 export type ImportFn = () => LazyComponent;
@@ -124,12 +119,8 @@ export type RouteProps = {
     | VanComponent
     | ComponentFn
     | (() => Promise<ComponentModule>);
-  preload?: (
-    params?: Record<string, string>,
-  ) => boolean | void | Promise<boolean | void>;
-  load?: (
-    params?: Record<string, string>,
-  ) => boolean | void | Promise<boolean | void>;
+  preload?: () => boolean | void | Promise<boolean | void>;
+  load?: () => boolean | void | Promise<boolean | void>;
 };
 
 export type RouteConfig = {
@@ -145,7 +136,7 @@ export const Route: (route: RouteProps) => void;
 // state.mjs
 export type RouterState = {
   pathname: string;
-  searchParams: URLSearchParams;
+  searchParams: string;
   params: Record<string, string>;
   status: "idle" | "pending" | "success" | "error";
 };