vite-plugin-vanjs 0.1.13 → 0.1.15

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.13",
+  "version": "0.1.15",
   "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/plugin/index.mjs

@@ -63,9 +63,6 @@ export default function VitePluginVanJS(options = {}) {
   let config;
   /** @type {RouteFile[] | null} */
   let routeCache = null;
-  /** @type {PluginContext} */
-  let context;
-  let viteVersion = "8.0.0";
   let isOxc = true;
 
   const virtualModuleId = "virtual:@vanjs/routes";
@@ -75,9 +72,8 @@ export default function VitePluginVanJS(options = {}) {
     name: "vanjs",
     enforce: "pre",
     buildStart() {
-      context = this;
-      viteVersion = context.meta?.viteVersion[0];
-      isOxc = Number(viteVersion) >= 8;
+      const viteVersion = this.meta?.viteVersion;
+      isOxc = Number(viteVersion[0]) >= 8;
     },
     // @ts-expect-error - this is temporary esbuild will be
     config() {
@@ -239,9 +235,8 @@ routes.length = 0;
 // Register routes
 ${currentRoutes.map(generateRoute).join("\n")}
 ${
-          (ops && ops.ssr && currentRoutes.length)
-            ? `console.log(\`🍦 @vanjs/router registered ${currentRoutes.length} routes.\`)`
-            : /* istanbul ignore next @preserve */ ""
+          (ops && ops.ssr && currentRoutes.length) &&
+          `console.log(\`🍦 @vanjs/router registered ${currentRoutes.length} routes.\`)`
         }
 `;
 

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._oldVal;
+      // 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.val);
+  /* istanbul ignore else */
+  if (!route) return van.add(wrapper, div("No Route Found"));
+
+  routerState.params.val = 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.val);
+    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/types.d.ts

@@ -1,4 +1,5 @@
 /// <reference path="global.d.ts" />
+
 import type {
   Element as VElement,
   TagFunc as IsoTagFunc,