vite-plugin-vanjs 0.1.22 → 0.1.24

package/meta/Head.mjs

@@ -6,6 +6,7 @@ import { getTagKey } from "./helpers.mjs";
 /** @typedef {typeof import("./types.d.ts").resetHeadTags} ResetTags */
 /** @typedef {typeof import("./types.d.ts").initializeHeadTags} InitializeTags */
 /** @typedef {typeof import("./types.d.ts").addMeta} AddMeta */
+/** @typedef {typeof import("./types.d.ts").removeMeta} RemoveMeta */
 /** @typedef {typeof import("./types.d.ts").Head} HeadComp */
 
 /**
@@ -69,6 +70,25 @@ export const addMeta = (tag) => {
   tags.set(key, tag);
 };
 
+/**
+ * Remove a new meta tag `van.tags.script({ id })`
+ * or TAGNAME.id key.
+ * Only client side.
+ * @type {RemoveMeta}
+ */
+export const removeMeta = (tagOrId) => {
+  if (!tagOrId || isServer) return;
+  const tags = getHeadTags();
+  const tagIsString = typeof tagOrId === "string";
+  const key = tagIsString ? tagOrId : getTagKey(tagOrId);
+  const id = tagIsString ? tagOrId.split(".")[1] : tagOrId.id;
+  // istanbul ignore else
+  if (id) {
+    document.getElementById(id)?.remove();
+    tags.delete(key);
+  }
+};
+
 /**
  * Get the head tags
  * @type {HeadComp}

package/meta/global.d.ts

@@ -29,7 +29,8 @@ declare module "@vanjs/meta" {
 
   export type HeadTags = SupportedTags[] | TagFunc[];
 
-  export const addMeta: (tag?: TagProps) => void;
+  export const addMeta: (tag?: Partial<SupportedTags>) => void;
+  export const removeMeta = (_tag: string | Partial<SupportedTags>) => null;
 
   export const Head: () => HeadTags;
 

package/meta/helpers.mjs

@@ -19,6 +19,7 @@ export const parseAttributes = (attributeString) => {
 /** @type {typeof import('./types.d.ts').getTagAttribute} */
 const getTagAttribute = (tag) => {
   const attributes = [
+    "id",
     "name",
     "property",
     "charset",
@@ -28,7 +29,6 @@ const getTagAttribute = (tag) => {
     "rel",
     "src",
     "href",
-    "id",
   ];
 
   for (const attr of attributes) {

package/meta/types.d.ts

@@ -29,7 +29,8 @@ export type TagProps = SupportedTags | PropsWithKnownKeys<SupportedTags>;
 
 export type HeadTags = AllHeadTags[] | TagFunc[];
 
-export const addMeta = (_tag: string | TagProps) => null;
+export const addMeta = (_tag: string | Partial<SupportedTags>) => null;
+export const removeMeta = (_tag: string | Partial<SupportedTags>) => null;
 
 export const Head: () => HeadTags;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vite-plugin-vanjs",
-  "version": "0.1.22",
+  "version": "0.1.24",
   "author": "thednp",
   "license": "MIT",
   "description": "An async first mini meta-framework for VanJS powered by Vite",
@@ -88,13 +88,13 @@
     "vanjs-ext": "^0.6.3"
   },
   "devDependencies": {
-    "@types/node": "^25.6.0",
+    "@types/node": "^25.6.2",
     "@vitest/browser": "^4.1.5",
     "@vitest/coverage-istanbul": "^4.1.5",
     "@vitest/ui": "^4.1.5",
     "happy-dom": "^20.9.0",
     "typescript": "6.0.3",
-    "vite": "^8.0.10",
+    "vite": "^8.0.12",
     "vitest": "^4.1.5"
   },
   "engines": {

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 (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) => {
-    let _data;
-    ${
+  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  ")
-  }
-    if (${moduleName}?.route?.load) _data = await ${moduleName}?.route?.load(params);
-    return _data;
+    ).join("\n ")
   }
+  if (${moduleName}?.route?.load) _data = await ${moduleName}?.route?.load(params);
+  return _data;
+}
 }`;
 };
 

package/plugin/types.d.ts

@@ -14,8 +14,8 @@ export type VanJSPluginOptions = {
   excludeRoutesProd?: string[]; // NEW — excluded in production only
 };
 
-export declare const VitePluginVanJS: (
+const VitePluginVanJS: (
   config?: VanJSPluginOptions,
-) => Plugin;
+) => Plugin<VanJSPluginOptions>;
 
 export default VitePluginVanJS;

package/router/a.mjs

@@ -29,8 +29,8 @@ export const A = (
     href,
     ...props,
     onclick: async (e) => {
-      const HREF = getValue(href);
       e.preventDefault();
+      const HREF = getValue(href);
       /* istanbul ignore next */
       if (isCurrentPage(HREF)) return;
 
@@ -60,7 +60,7 @@ export const A = (
   newProps["aria-current"] = van.derive(() => {
     const isPage = isCurrentPage(href);
     const isLocation = isCurrentLocation(href);
-    return isPage ? "page" : isLocation ? "location" : null;
+    return isPage ? "page" : isLocation ? "location" : "";
   });
 
   return van.tags.a(newProps, children || otherChildren);

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?: (params?: Record<string, string>) => unknown;
+    load?: (params?: Record<string, string>) => Promise<unknown>;
   };
 
   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?: (params?: Record<string, string>) => unknown;
+    load?: (params?: Record<string, string>) => Promise<unknown>;
   };
 
   export type RouteConfig = {
@@ -191,9 +183,9 @@ declare module "@vanjs/router" {
   // state.mjs
   export type RouterState = {
     pathname: string;
-    searchParams: URLSearchParams;
+    searchParams: string;
     params: Record<string, string>;
-    status: "idle" | "pending" | "success" | "error";
+    loading: boolean;
   };
 
   /**
@@ -204,7 +196,7 @@ declare module "@vanjs/router" {
     pathname: RouterState["pathname"];
     searchParams: RouterState["searchParams"];
     params?: RouterState["params"];
-    status: RouterState["status"];
+    loading: RouterState["loading"];
   };
 
   /**
@@ -294,9 +286,8 @@ declare module "@vanjs/router" {
   export const executeLifecycle: (
     route: RouteEntry | {
       preload?: (params?: Record<string, string>) => unknown;
-      load?: (params?: Record<string, string>) => unknown;
+      load?: (params?: Record<string, string>) => Promise<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,46 @@
+import van from "vanjs-core";
 import isServer from "../setup/isServer.mjs";
 import { routerState, setRouterState } from "./state.mjs";
 import { matchRoute } from "./matchRoute.mjs";
+import { unwrap } from "./unwrap.mjs";
+import { hydrate } from "../client/index.mjs";
+import { Head } from "../meta/index.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 */
 
+/**
+ * Update head tags
+ */
+const updateHead = () => {
+  // istanbul ignore else
+  if (document.head) {
+    hydrate(document.head, Head());
+  }
+};
+
+/**
+ * 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 +50,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);
+  const url = new URL(href, "http://localhost:5173");
+  // console.log({ href }, routerState.searchParams, url.searchParams.toString())
+  return routerState.pathname === url.pathname &&
+    routerState.searchParams === url.searchParams.toString();
 };
 
 /**
@@ -34,8 +77,12 @@ export const isCurrentPage = (pageName) => {
  * @returns {boolean}
  */
 export const isCurrentLocation = (pageName) => {
-  const pathName = routerState.pathname;
-  return pathName !== "/" && pathName.includes(getValue(pageName));
+  const href = getValue(pageName);
+  const searchParams = new URLSearchParams(routerState.searchParams);
+  const pathname = routerState.pathname;
+  const url = new URL(href, "http://localhost:5173");
+  return url.pathname !== "/" && pathname.includes(url.pathname) ||
+    pathname === url.pathname && searchParams.size > 0;
 };
 
 /**
@@ -53,10 +100,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 +112,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(route.params);
     if (!data && load && !dataCache.has(pathname, cacheKey)) {
-      data = await load(params);
+      data = await load(route.params);
     } else if (load && dataCache.has(pathname, cacheKey)) {
       dataCache.touch(pathname);
     }
@@ -97,13 +141,37 @@ export const executeLifecycle = async (route, params) => {
   }
 };
 
+/**
+ * @param {RouteEntry} route
+ * @param {HTMLElement} wrapper
+ * @param {boolean} ssr
+ * @returns
+ */
+export const executeModule = async (route, wrapper, ssr) => {
+  if (routerState.loading === true) return;
+  // 0. Set Loading State
+  routerState.loading = true;
+  // 1. Resolve the module first (to get route lifecycle hooks)
+  const module = await route.component();
+  // 2. Execute lifecycle (a complete route includes all props)
+  await executeLifecycle(Object.assign(route, module.route));
+  // 3. Resolve children
+  const children = resolveChildren(module);
+  // 4. Update <head> in the client
+  if (!isServer) updateHead();
+  // 5. Set Loading State
+  routerState.loading = false;
+  // 6. Update / replace children in wrapper
+  if (ssr) return van.add(wrapper, ...children);
+  else wrapper.replaceChildren(...children);
+};
+
 /**
  * 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);
+  const key = getCacheKey();
   return dataCache.get(routerState.pathname, key)?.data;
 };
 

package/router/router.mjs

@@ -1,43 +1,19 @@
 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 { hydrate } from "../client/index.mjs";
-import { Head, initializeHeadTags } from "../meta/index.mjs";
+import { executeModule } from "./helpers.mjs";
+import { 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
- */
-const updateHead = () => {
-  // istanbul ignore else
-  if (document.head) {
-    hydrate(document.head, Head());
-  }
-};
-
 /**
  * Initialize client-side router (Head + popstate listener)
  */
@@ -53,8 +29,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 +47,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"));
-
-  Object.assign(routerState.params, route.params || {});
+  // 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 +69,13 @@ 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) {
+  // Skip in dev mode: we manually clear dataCache on mutations for instant updates
+  if (globalThis.__DATA_CACHE && !isDev) {
     dataCache.hydrateFromJSON(globalThis.__DATA_CACHE);
   }
 
@@ -110,13 +83,22 @@ export const Router = (initialProps = /* istanbul ignore next */ {}) => {
   const root = document.querySelector("[data-root]");
 
   if (root) {
+    van.derive(() => {
+      if (!initialized) return;
+      const matchedRoute = matchRoute(routerState.pathname);
+      if (!matchedRoute) {
+        wrapper.replaceChildren(div("No Route Found"));
+        return;
+      }
+      (async () => {
+        _searchParams = routerState.searchParams;
+        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);
+      const result = await executeModule(route, wrapper, true);
+      initialized = true;
+      return result;
     };
   }
 
@@ -129,11 +111,8 @@ export const Router = (initialProps = /* istanbul ignore next */ {}) => {
     }
 
     (async () => {
-      const module = await matchedRoute.component();
-      await executeLifecycle(module.route, matchedRoute.params);
-      const children = resolveChildren(module);
-      wrapper.replaceChildren(...children);
-      updateHead();
+      _searchParams = routerState.searchParams;
+      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 {
@@ -82,29 +92,20 @@ export function microStore(init) {
   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),
+  searchParams: normalizeSearch(initialSearch),
   params: {},
-  status: initialStatus,
+  loading: false,
 });
 
 /**
  * @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?: (params?: Record<string, unknown>) => unknown;
+    load?: (params?: Record<string, string>) => Promise<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?: (params?: Record<string, string>) => unknown;
+  load?: (params?: Record<string, string>) => Promise<unknown>;
 };
 
 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?: (params?: Record<string, string>) => unknown;
+  load?: (params?: Record<string, string>) => Promise<unknown>;
 };
 
 export type RouteConfig = {
@@ -145,16 +136,16 @@ 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";
+  loading: boolean;
 };
 
 export const routerState: {
   pathname: RouterState["pathname"];
   searchParams: RouterState["searchParams"];
   params?: RouterState["params"];
-  status: RouterState["status"];
+  loading: RouterState["loading"];
 };
 
 export const setRouterState: (