vite-plugin-vanjs 0.1.23 → 0.1.25

package/client/index.mjs

@@ -108,18 +108,24 @@ export function elementsMatch(el1, el2, deep) {
     return false;
   }
 
-  const childNodes1 = Array.from(el1.childNodes);
-  const childNodes2 = Array.from(el2.childNodes);
+  // Filter empty text nodes — SSR omits them, client creates Text("")
+  // from function children returning ""
+  const cn1 = Array.from(el1.childNodes).filter((n) =>
+    n.nodeType !== 3 || /* istanbul ignore next */ n.textContent !== ""
+  );
+  const cn2 = Array.from(el2.childNodes).filter((n) =>
+    n.nodeType !== 3 || /* istanbul ignore next */ n.textContent !== ""
+  );
 
   // istanbul ignore else
-  if (childNodes1.length !== childNodes2.length) {
+  if (cn1.length !== cn2.length) {
     return false;
   }
 
   // Only recurse if necessary (has childNodes with data-hk)
-  const hasHydratedChildren = childNodes1.some((child) =>
-    child instanceof HTMLElement && (child.hasAttribute("data-hk") ||
-      child.querySelector("[data-hk]"))
+  const hasHydratedChildren = cn1.some((child) =>
+    child instanceof HTMLElement &&
+    (child.hasAttribute("data-hk") || child.querySelector("[data-hk]"))
   );
 
   // istanbul ignore next
@@ -130,7 +136,7 @@ export function elementsMatch(el1, el2, deep) {
   // Only recurse if opted in
   // istanbul ignore next
   return deep
-    ? childNodes1.every((child, idx) => elementsMatch(child, childNodes2[idx]))
+    ? cn1.every((child, idx) => elementsMatch(child, cn2[idx]))
     : true;
 }
 
@@ -279,4 +285,5 @@ export const hydrate = (target, content) => {
       target.replaceChildren(...parsed);
     }
   }
+  return target;
 };

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;
 
@@ -39,7 +40,10 @@ declare module "@vanjs/meta" {
   ) => null;
 
   export const Meta: (
-    props: PropsWithKnownKeys<HTMLMetaElement> & { charset?: string & "utf-8" },
+    props: PropsWithKnownKeys<HTMLMetaElement> & {
+      charset?: string & "utf-8";
+      property?: string;
+    },
   ) => null;
 
   export const Style: (

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.23",
+  "version": "0.1.25",
   "author": "thednp",
   "license": "MIT",
   "description": "An async first mini meta-framework for VanJS powered by Vite",
@@ -88,14 +88,14 @@
     "vanjs-ext": "^0.6.3"
   },
   "devDependencies": {
-    "@types/node": "^25.6.0",
-    "@vitest/browser": "^4.1.5",
-    "@vitest/coverage-istanbul": "^4.1.5",
-    "@vitest/ui": "^4.1.5",
-    "happy-dom": "^20.9.0",
+    "@types/node": "^25.9.3",
+    "@vitest/browser": "^4.1.8",
+    "@vitest/coverage-istanbul": "^4.1.8",
+    "@vitest/ui": "^4.1.8",
+    "happy-dom": "^20.10.3",
     "typescript": "6.0.3",
-    "vite": "^8.0.10",
-    "vitest": "^4.1.5"
+    "vite": "^8.0.16",
+    "vitest": "^4.1.8"
   },
   "engines": {
     "node": ">=20",

package/plugin/helpers.mjs

@@ -218,26 +218,26 @@ export const generateRouteProloaders = (route) => {
   const layoutName = "Module";
 
   return `{
-preload: async () => {
+preload: async (params) => {
   ${
     route.layouts.map((layout) =>
       `if (${layout.id + layoutName}?.route?.preload) await ${
         layout.id + layoutName
-      }?.route?.preload();`
+      }?.route?.preload(params);`
     ).join("\n ")
   }
-  if (${moduleName}?.route?.preload) await ${moduleName}?.route?.preload();
+  if (${moduleName}?.route?.preload) await ${moduleName}?.route?.preload(params);
 },
-load: async () => {
+load: async (params) => {
   let _data;
   ${
     route.layouts.map((layout) =>
       `if (${layout.id + layoutName}?.route?.load) await ${
         layout.id + layoutName
-      }?.route?.load();`
+      }?.route?.load(params);`
     ).join("\n ")
   }
-  if (${moduleName}?.route?.load) _data = await ${moduleName}?.route?.load();
+  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,8 +139,8 @@ declare module "@vanjs/router" {
     path: string;
     component: () => Promise<ComponentModule>;
     params?: Record<string, string>;
-    preload?: () => boolean | void | Promise<boolean | void>;
-    load?: () => boolean | void | Promise<boolean | void>;
+    preload?: (params?: Record<string, string>) => unknown;
+    load?: (params?: Record<string, string>) => Promise<unknown>;
   };
 
   export type ImportFn = () => LazyComponent;
@@ -153,8 +153,8 @@ declare module "@vanjs/router" {
       | VanComponent
       | ComponentFn
       | (() => Promise<ComponentModule>);
-    preload?: () => boolean | void | Promise<boolean | void>;
-    load?: () => boolean | void | Promise<boolean | void>;
+    preload?: (params?: Record<string, string>) => unknown;
+    load?: (params?: Record<string, string>) => Promise<unknown>;
   };
 
   export type RouteConfig = {
@@ -185,7 +185,7 @@ declare module "@vanjs/router" {
     pathname: string;
     searchParams: string;
     params: Record<string, string>;
-    status: "idle" | "pending" | "success" | "error";
+    loading: boolean;
   };
 
   /**
@@ -196,7 +196,7 @@ declare module "@vanjs/router" {
     pathname: RouterState["pathname"];
     searchParams: RouterState["searchParams"];
     params?: RouterState["params"];
-    status: RouterState["status"];
+    loading: RouterState["loading"];
   };
 
   /**
@@ -285,8 +285,8 @@ declare module "@vanjs/router" {
    */
   export const executeLifecycle: (
     route: RouteEntry | {
-      preload?: () => unknown;
-      load?: () => unknown;
+      preload?: (params?: Record<string, string>) => unknown;
+      load?: (params?: Record<string, string>) => Promise<unknown>;
     } | null,
   ) => Promise<boolean>;
 

package/router/helpers.mjs

@@ -1,7 +1,11 @@
+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 */
@@ -12,6 +16,16 @@ import * as dataCache from "./dataCache.mjs";
 /** @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
@@ -51,8 +65,8 @@ export const getCacheKey = () => {
  */
 export const isCurrentPage = (pageName) => {
   const href = getValue(pageName);
-  if (isServer) return routerState.pathname === href;
-  const url = new URL(href, globalThis.location.origin);
+  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();
 };
@@ -63,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;
 };
 
 /**
@@ -96,9 +114,9 @@ export const executeLifecycle = async (route) => {
     const pathname = routerState.pathname;
     const cacheKey = getCacheKey();
 
-    if (preload) await preload();
+    if (preload) await preload(route.params);
     if (!data && load && !dataCache.has(pathname, cacheKey)) {
-      data = await load();
+      data = await load(route.params);
     } else if (load && dataCache.has(pathname, cacheKey)) {
       dataCache.touch(pathname);
     }
@@ -123,6 +141,34 @@ export const executeLifecycle = async (route) => {
   }
 };
 
+/**
+ * @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;
+  try {
+    // 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();
+    // 6. Update / replace children in wrapper
+    if (ssr) return van.add(wrapper, ...children);
+    else wrapper.replaceChildren(...children);
+  } finally {
+    // 5. Set Loading State
+    routerState.loading = false;
+  }
+};
+
 /**
  * Convenience hook to get the current route's cached data.
  * @returns {any | undefined}

package/router/router.mjs

@@ -3,9 +3,8 @@ 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, resolveChildren } from "./helpers.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";
 
@@ -15,36 +14,6 @@ const isDev = MODE === "development";
 /** @typedef {import("./types.d.ts").RouteEntry} RouteEntry */
 /** @typedef {import("./types.d.ts").VanNode} VanNode */
 
-/**
- * Update head tags
- */
-const updateHead = () => {
-  // istanbul ignore else
-  if (document.head) {
-    hydrate(document.head, Head());
-  }
-};
-
-/**
- * @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)
  */
@@ -83,7 +52,7 @@ export const Router = (initialProps = /* istanbul ignore next */ {}) => {
   /* 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 || {});
+  Object.assign(routerState.params, route.params);
 
   // Server-side rendering
   if (isServer) {
@@ -105,6 +74,7 @@ export const Router = (initialProps = /* istanbul ignore next */ {}) => {
 
   // Client-side: hydrate data cache from SSR output
   // This must happen BEFORE any component renders so useRouteData() works
+  // Skip in dev mode: we manually clear dataCache on mutations for instant updates
   if (globalThis.__DATA_CACHE && !isDev) {
     dataCache.hydrateFromJSON(globalThis.__DATA_CACHE);
   }
@@ -114,7 +84,6 @@ export const Router = (initialProps = /* istanbul ignore next */ {}) => {
 
   if (root) {
     van.derive(() => {
-      _searchParams = routerState.searchParams;
       if (!initialized) return;
       const matchedRoute = matchRoute(routerState.pathname);
       if (!matchedRoute) {
@@ -122,26 +91,27 @@ export const Router = (initialProps = /* istanbul ignore next */ {}) => {
         return;
       }
       (async () => {
-        initialized = true;
+        _searchParams = routerState.searchParams;
         await executeModule(matchedRoute, wrapper);
       })();
     });
     return async () => {
-      return await executeModule(route, wrapper, true);
+      const result = await executeModule(route, wrapper, true);
+      initialized = true;
+      return result;
     };
   }
 
   // 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 () => {
+      _searchParams = routerState.searchParams;
       await executeModule(matchedRoute, wrapper);
     })();
   });

package/router/state.mjs

@@ -92,18 +92,11 @@ 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: normalizeSearch(initialSearch),
   params: {},
-  status: initialStatus,
+  loading: false,
 });
 
 /**

package/router/types.d.ts

@@ -83,8 +83,8 @@ export const isLazyComponent: (component: unknown) => boolean;
 
 export const executeLifecycle: (
   route: RouteEntry | {
-    preload?: () => unknown;
-    load?: () => unknown;
+    preload?: (params?: Record<string, unknown>) => unknown;
+    load?: (params?: Record<string, string>) => Promise<unknown>;
   } | null,
 ) => Promise<boolean>;
 
@@ -103,8 +103,8 @@ export type RouteEntry = {
   path: string;
   component: () => Promise<ComponentModule>;
   params?: Record<string, string>;
-  preload?: () => boolean | void | Promise<boolean | void>;
-  load?: () => boolean | void | Promise<boolean | void>;
+  preload?: (params?: Record<string, string>) => unknown;
+  load?: (params?: Record<string, string>) => Promise<unknown>;
 };
 
 export type ImportFn = () => LazyComponent;
@@ -119,8 +119,8 @@ export type RouteProps = {
     | VanComponent
     | ComponentFn
     | (() => Promise<ComponentModule>);
-  preload?: () => boolean | void | Promise<boolean | void>;
-  load?: () => boolean | void | Promise<boolean | void>;
+  preload?: (params?: Record<string, string>) => unknown;
+  load?: (params?: Record<string, string>) => Promise<unknown>;
 };
 
 export type RouteConfig = {
@@ -138,14 +138,14 @@ export type RouterState = {
   pathname: string;
   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: (