vite-plugin-vanjs 0.1.14 → 0.1.16

package/client/index.mjs

@@ -133,13 +133,6 @@ export function elementsMatch(el1, el2, deep) {
     : true;
 }
 
-/** @type {<E extends Element = Element, T extends keyof HTMLElementTagNameMap>(target: E, ...tagNames: T[]) => boolean} */
-const isTag = (target, ...tagNames) => {
-  return tagNames.some((tag) =>
-    target.tagName.toLowerCase() === tag.toLowerCase()
-  );
-};
-
 function createHydrationContext() {
   /** @type {WeakMap<Element, Element>} */
   const parentCache = new WeakMap();
@@ -250,31 +243,15 @@ export const hydrate = (target, content) => {
   const currentChildren = Array.from(target.children);
   const newChildren = Array.from(wrapper.children);
 
-  if (isTag(target, "head")) {
+  if (target.tagName.toLowerCase() === "head") {
     // Keep current tags on first hydration
     if (!target.hasAttribute("data-h")) {
       target.setAttribute("data-h", "");
       return target;
     }
 
-    // Handle non-style/link tags first
-    const regularTags = newChildren.filter((child) =>
-      !isTag(child, "style", "link")
-    );
-
-    // Handle style/link tags separately
-    const styleTags = newChildren.filter((child) =>
-      isTag(child, "style", "link")
-    );
-
-    // Create maps for existing tags
-    const existingStyles = new Map(
-      currentChildren.filter((child) => isTag(child, "style", "link"))
-        .map((child) => [getTagKey(child), child]),
-    );
-
-    // Process regular tags normally
-    regularTags.forEach((newChild) => {
+    // Replace all tags uniformly - styles/scripts are handled via imports
+    newChildren.forEach((newChild) => {
       const key = getTagKey(newChild);
       const existing = currentChildren.find((child) =>
         getTagKey(child) === key
@@ -285,57 +262,6 @@ export const hydrate = (target, content) => {
         target.appendChild(newChild);
       }
     });
-
-    // Process style tags with special handling
-    styleTags.forEach((newChild) => {
-      const key = getTagKey(newChild);
-      const existing = existingStyles.get(key);
-
-      // Skip if tag already exists with same content+id/href
-      if (existing) {
-        // istanbul ignore next - try again later
-        if (isTag(existing, "style") && isTag(newChild, "style")) {
-          if (
-            existing.textContent === newChild.textContent &&
-            existing.id === newChild.id
-          ) return;
-        }
-        // istanbul ignore next - try again later
-        if (isTag(existing, "link") && isTag(newChild, "link")) {
-          if (existing.href === newChild.href) return;
-        }
-      }
-
-      // For link tags, add with disabled state first
-      // istanbul ignore else - try again later
-      if (isTag(newChild, "link")) {
-        const temp = newChild.cloneNode();
-        temp.disabled = true;
-
-        const originalRel = temp.rel;
-        temp.rel = "preload";
-        temp.as = "style";
-        // istanbul ignore next
-        temp.onload = () => {
-          temp.rel = originalRel;
-          temp.removeAttribute("as");
-          temp.disabled = false;
-          if (existing && existing.parentNode === target) {
-            existing.remove();
-          }
-        };
-
-        target.appendChild(temp);
-      } // For style tags, add new one first
-      else if (isTag(newChild, "style")) {
-        target.appendChild(newChild);
-        // istanbul ignore next - try again later
-        if (existing && existing.parentNode === target) {
-          // Remove old one in next frame
-          existing.remove();
-        }
-      }
-    });
   } else {
     if (!target.hasAttribute("data-h")) {
       const { diffAndHydrate } = createHydrationContext();

package/meta/helpers.mjs

@@ -36,6 +36,7 @@ const getTagAttribute = (tag) => {
 
     if (value) return value;
   }
+  // istanbul ignore next - a value must be provided
   return "";
 };
 

package/meta/tags.mjs

@@ -25,31 +25,15 @@ export const Meta = (props) => {
 };
 
 /**
- * Add a new `<link>` tag
+ * Add a new `<link>` tag, not to be used for stylesheets
  * @type {(props: PropsWithKnownKeys<HTMLLinkElement>) => null}
  */
 export const Link = (props) => {
   const { link } = van.tags;
-  addMeta(link(props));
-  return null;
-};
-
-/**
- * Add a new `<script>` tag
- * @type {(props: PropsWithKnownKeys<HTMLScriptElement>, content?: string) => null}
- */
-export const Script = (props, content) => {
-  const { script } = van.tags;
-  addMeta(script(props, content));
-  return null;
-};
-
-/**
- * Add a new `<style>` tag
- * @type {(props: PropsWithKnownKeys<HTMLStyleElement>, content: string) => null}
- */
-export const Style = (props, content) => {
-  const { style } = van.tags;
-  addMeta(style(props, content));
+  if (props.rel === "stylesheet") {
+    console.warn("Link doesn't support stylesheets.");
+  } else {
+    addMeta(link(props));
+  }
   return null;
 };

package/meta/types.d.ts

@@ -13,6 +13,11 @@ export const resetHeadTags: () => void;
 export const initializeHeadTags: () => void | (() => Promise<void>);
 
 export type SupportedTags =
+  | HTMLTitleElement
+  | HTMLLinkElement
+  | HTMLMetaElement;
+
+export type AllHeadTags =
   | HTMLTitleElement
   | HTMLMetaElement
   | HTMLScriptElement
@@ -21,7 +26,7 @@ export type SupportedTags =
 
 export type TagProps = SupportedTags | PropsWithKnownKeys<SupportedTags>;
 
-export type HeadTags = SupportedTags[] | TagFunc[];
+export type HeadTags = AllHeadTags[] | TagFunc[];
 
 export const addMeta = (_tag: string | TagProps) => null;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vite-plugin-vanjs",
-  "version": "0.1.14",
+  "version": "0.1.16",
   "author": "thednp",
   "license": "MIT",
   "description": "A mini meta-framework for VanJS powered by Vite",
@@ -87,14 +87,14 @@
     "vanjs-ext": "^0.6.3"
   },
   "devDependencies": {
-    "@types/node": "^25.5.0",
-    "@vitest/browser": "^4.1.2",
-    "@vitest/coverage-istanbul": "^4.1.2",
-    "@vitest/ui": "^4.1.2",
-    "happy-dom": "^20.8.9",
-    "typescript": "6.0.2",
-    "vite": "^8.0.3",
-    "vitest": "^4.1.2"
+    "@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",
+    "typescript": "6.0.3",
+    "vite": "^8.0.9",
+    "vitest": "^4.1.5"
   },
   "engines": {
     "node": ">=20",

package/plugin/helpers.mjs

@@ -48,6 +48,7 @@ export const globFiles = async (dir, extensions) => {
       return;
     }
     const entries = await readdir(directory, { withFileTypes: true });
+    // istanbul ignore if
     if (!entries.length) {
       // console.warn('🍦 @vanjs/router: the "routes" folder is empty.');
       return;

package/router/global.d.ts

@@ -185,10 +185,15 @@ declare module "@vanjs/router" {
    * A reactive object that holds the current router state.
    * This state is maintained by both server and client.
    */
+  // export const routerState: {
+  //   pathname:  State<RouterState.pathname>;
+  //   searchParams: State<RouterState.searchParams>;
+  //   params?: State<RouterState.params>;
+  // };
   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"];
   };
 
   /**

package/router/helpers.mjs

@@ -16,7 +16,7 @@ import { matchRoute } from "./matchRoute.mjs";
  * @returns {boolean}
  */
 export const isCurrentPage = (pageName) => {
-  return routerState.pathname.val === pageName;
+  return routerState.pathname === pageName;
 };
 
 /**

package/router/router.mjs

@@ -9,136 +9,118 @@ import { Head, initializeHeadTags } from "../meta/index.mjs";
 
 import "virtual:@vanjs/routes";
 
-let isConnected = false;
+/** @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) {
+    van.hydrate(document.head, (head) => hydrate(head, Head()));
+  }
+};
+
+/**
+ * Initialize client-side router (Head + popstate listener)
+ */
+let _initialized = false;
+const initClient = () => {
+  // istanbul ignore if - already initialized
+  if (_initialized) return;
+
+  initializeHeadTags();
+  globalThis.addEventListener(
+    "popstate",
+    /** @param {Event & {target: globalThis}} e */
+    (e) => {
+      const location = e.target.location;
+      const oldPath = routerState.pathname;
+      // istanbul ignore next - cannot test
+      if (location.pathname !== oldPath) {
+        setRouterState(location.pathname, location.search);
+      }
+    },
+  );
+  _initialized = true;
+};
 
 export const Router = (initialProps = /* istanbul ignore next */ {}) => {
   const { div, main } = van.tags;
 
-  /* istanbul ignore next - try again later */
   const props = Object.fromEntries(
     Object.entries(initialProps).filter(([_, val]) => val !== undefined),
   );
   const wrapper = main({ ...props, "data-root": true });
-  const mainLayout = () => {
-    const route = matchRoute(routerState.pathname.val);
-    /* istanbul ignore else */
-    if (!route) return van.add(wrapper, div("No Route Found"));
-
-    routerState.params.val = route.params || {};
-    // Server-side or async component: use renderComponent
-    if (isServer) {
-      const renderComponent = async () => {
-        try {
-          const module = await route.component();
-          const component = typeof module.component === "function"
-            ? module.component()
-            : /* istanbul ignore next */ module.component;
-
-          await executeLifecycle(module, route.params);
-          return van.add(wrapper, unwrap(component).children);
-        } catch (error) {
-          /* istanbul ignore next */
-          console.error("Router error:", error);
-          /* istanbul ignore next */
-          return van.add(wrapper, div("Error loading page"));
-        }
-      };
-
-      return renderComponent();
-    }
 
-    const root = document.querySelector("[data-root]");
-    // istanbul ignore else - cannot test unmount
-    if (!isConnected || !root) {
-      initializeHeadTags();
-      globalThis.addEventListener(
-        "popstate",
-        /** @param {Event & {target: globalThis}} e */
-        // istanbul ignore next - cannot test
-        (e) => {
-          const location = e.target.location;
-          const oldPath = routerState.pathname._oldVal;
-          // istanbul ignore next - cannot test
-          if (location.pathname !== oldPath) {
-            setRouterState(location.pathname, location.search);
-          }
-        },
-      );
-    }
+  // Initialize Head BEFORE any route matching or lifecycle execution
+  if (!isServer) initClient();
+
+  const route = matchRoute(routerState.pathname);
+  /* istanbul ignore else */
+  if (!route) return van.add(wrapper, div("No Route Found"));
+
+  Object.assign(routerState.params, route.params || {});
+
+  // Server-side rendering
+  if (isServer) {
+    return (async () => {
+      try {
+        const module = await route.component();
+        await executeLifecycle(module, route.params);
+        return van.add(wrapper, ...resolveChildren(module));
+      } catch (error) {
+        /* istanbul ignore next */
+        console.error("Router error:", error);
+        /* istanbul ignore next */
+        return van.add(wrapper, div("Error loading page"));
+      }
+    })();
+  }
+
+  // Client-side: check if hydrating SSR content or SPA
+  const root = document.querySelector("[data-root]");
 
-    // Client-side lazy component, lifeCycle is already executed on the server
-    // or when A component has been clicked in the client
-    if (root) {
-      // this case is when root is server side rendered
-      const children = () => {
-        const module = route.component();
-        executeLifecycle(module, route.params);
-        // istanbul ignore next - cannot test
-        const cp = (Array.isArray(module) || module instanceof Element)
-          ? module
-          : typeof module.component === "function"
-          ? module.component()
-          : module.component;
-        // istanbul ignore next - cannot test
-        const kids = () => cp ? Array.from(unwrap(cp).children) : [];
-        const kudos = kids();
-
-        isConnected = true;
-        // istanbul ignore else
-        if (document.head) {
-          van.hydrate(document.head, (head) => hydrate(head, Head()));
-        }
-
-        return kudos;
-      };
-
-      return van.add(wrapper, ...children());
+  if (root) {
+    // Hydration path - root exists from SSR
+    const module = route.component();
+    executeLifecycle(module, route.params);
+    updateHead();
+    return van.add(wrapper, ...resolveChildren(module));
+  }
+
+  // SPA path - reactive routing
+  van.derive(() => {
+    const r = matchRoute(routerState.pathname);
+    if (!r) {
+      wrapper.replaceChildren(div("No Route Found"));
+      return;
     }
-    // this case is when root is for SPA apps
-    const csrRoute = van.derive(() => {
-      const p = routerState.pathname.val;
-      return matchRoute(p);
-    });
-
-    const children = van.derive(() => {
-      const route = csrRoute.val;
-      // istanbul ignore if - can only be tested in client
-      if (!route) return [div("No Route Found")];
-      const md = route.component();
-      executeLifecycle(md, route.params);
-      // istanbul ignore next - cannot test all cases
-      const cp = (Array.isArray(md) || md instanceof Element)
-        ? md
-        : typeof md.component === "function"
-        ? md.component()
-        : md.component;
-      return cp
-        ? Array.from(unwrap(cp).children)
-        : /* istanbul ignore next */ [];
-    });
-
-    const component = () => {
-      const kids = () => children.val;
-      const result = () => {
-        return van.derive(() =>
-          van.hydrate(wrapper, (el) => {
-            const kudos = kids();
-            isConnected = true;
-            // istanbul ignore else
-            if (document.head) {
-              van.hydrate(document.head, (head) => hydrate(head, Head()));
-            }
-            return hydrate(el, kudos);
-          })
-        ).val;
-      };
-      return result();
-    };
-    const finalResult = component();
-    return finalResult
-      ? /* istanbul ignore next*/ van.add(wrapper, finalResult)
-      : wrapper;
-  };
-
-  return mainLayout();
+
+    const module = r.component();
+    executeLifecycle(module, r.params);
+    const children = resolveChildren(module);
+
+    wrapper.replaceChildren(...children);
+    updateHead();
+  });
+
+  return wrapper;
 };

package/router/state.mjs

@@ -18,23 +18,86 @@ 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;
 };
 
+/**
+ * @param {T extends Record<string, unknown>} init
+ * @returns {T}
+ */
+export function miniStore(init) {
+  const target = {};
+  for (const [prop, value] of Object.entries(init)) {
+    if (
+      value && typeof value === "object" &&
+      Object.getPrototypeOf(value) === Object
+    ) {
+      for (const [sp, sv] of Object.entries(value)) {
+        target[prop] = defineProxy(sp, sv, {});
+      }
+    } else if (!Array.isArray(value)) {
+      defineProxy(prop, value, target);
+    } else {
+      console.warn(typeof value + " is not supported.");
+    }
+  }
+  return target;
+}
+
+/**
+ * @type {typeof import("./types.d.ts").routerState}
+ */
+// export const routerState = {
+//   pathname: van.state(initialPath),
+//   searchParams: van.state(new URLSearchParams(initialSearch)),
+//   params: van.state({}),
+// };
+export const routerState = miniStore({
+  pathname: initialPath,
+  searchParams: new URLSearchParams(initialSearch),
+  params: {},
+});
+
 /**
  * @type {typeof import("./types.d.ts").setRouterState}
  */
 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 || {});
 };

package/router/types.d.ts

@@ -1,9 +1,10 @@
 /// <reference path="global.d.ts" />
+
 import type {
   Element as VElement,
   TagFunc as IsoTagFunc,
 } from "mini-van-plate/van-plate";
-import van from "vanjs-core";
+// import van from "vanjs-core";
 import type {
   ChildDom,
   Primitive,
@@ -202,9 +203,9 @@ export type RouterState = {
  * 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"];
 };
 
 /**