vite-plugin-vanjs 0.1.5 → 0.1.7

package/client/index.mjs

@@ -1,4 +1,4 @@
-import { unwrap } from "../router/index.mjs";
+import { unwrap } from "../router/unwrap.mjs";
 import { getTagKey } from "../meta/helpers.mjs";
 
 /**
@@ -36,8 +36,8 @@ export const styleToString = (style) => {
     : /* istanbul ignore next */ "";
 };
 
-/** @type {(el1: HTMLElement, el2: HTMLElement | HTMLElement[]) => boolean} */
-export function elementsMatch(el1, el2) {
+/** @type {(el1: HTMLElement, el2: HTMLElement | HTMLElement[], deep?: boolean) => boolean} */
+export function elementsMatch(el1, el2, deep) {
   // Quick initial checks before recursing
   // istanbul ignore else
   if (
@@ -63,15 +63,25 @@ export function elementsMatch(el1, el2) {
       child.querySelector("[data-hk]"))
   );
 
+  // istanbul ignore next
   if (!hasHydratedChildren) {
     return true; // If no hydrated children, elements match based on initial checks
   }
 
-  return childNodes1.every((child, idx) =>
-    elementsMatch(child, childNodes2[idx])
-  );
+  // Only recurse if opted in
+  // istanbul ignore next
+  return deep
+    ? childNodes1.every((child, idx) => elementsMatch(child, childNodes2[idx]))
+    : 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();
@@ -108,6 +118,7 @@ function createHydrationContext() {
 
   /** @type {(oldDom: HTMLElement, newDom: HTMLElement | HTMLElement[]) => HTMLElement} */
   function diffAndHydrate(oldDom, newDom) {
+    if (!oldDom || !newDom) return;
     // SPA mode
     // istanbul ignore else
     if (!oldDom.children.length && !elementsMatch(oldDom, newDom)) {
@@ -180,12 +191,8 @@ export const hydrate = (target, content) => {
   const wrapper = unwrap(content);
   const currentChildren = Array.from(target.children);
   const newChildren = Array.from(wrapper.children);
-  const isStyleLink = (tag) =>
-    [HTMLStyleElement, HTMLLinkElement].some((e) => tag instanceof e);
-  const isStyle = (tag) => tag instanceof HTMLStyleElement;
-  const isLink = (tag) => tag instanceof HTMLLinkElement;
 
-  if (target.tagName.toLowerCase() === "head") {
+  if (isTag(target, "head")) {
     // Keep current tags on first hydration
     if (!target.hasAttribute("data-h")) {
       target.setAttribute("data-h", "");
@@ -193,14 +200,18 @@ export const hydrate = (target, content) => {
     }
 
     // Handle non-style/link tags first
-    const regularTags = newChildren.filter((child) => !isStyleLink(child));
+    const regularTags = newChildren.filter((child) =>
+      !isTag(child, "style", "link")
+    );
 
     // Handle style/link tags separately
-    const styleTags = newChildren.filter((child) => isStyleLink(child));
+    const styleTags = newChildren.filter((child) =>
+      isTag(child, "style", "link")
+    );
 
     // Create maps for existing tags
     const existingStyles = new Map(
-      currentChildren.filter(isStyleLink)
+      currentChildren.filter((child) => isTag(child, "style", "link"))
         .map((child) => [getTagKey(child), child]),
     );
 
@@ -224,29 +235,29 @@ export const hydrate = (target, content) => {
 
       // Skip if tag already exists with same content+id/href
       if (existing) {
-        /* istanbul ignore next - try again later */
-        if (isStyle(existing) && isStyle(newChild)) {
+        // 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 (isLink(existing) && isLink(newChild)) {
+        // 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 (isLink(newChild)) {
+      // 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 */
+        // istanbul ignore next
         temp.onload = () => {
           temp.rel = originalRel;
           temp.removeAttribute("as");
@@ -258,9 +269,9 @@ export const hydrate = (target, content) => {
 
         target.appendChild(temp);
       } // For style tags, add new one first
-      else if (isStyle(newChild)) {
+      else if (isTag(newChild, "style")) {
         target.appendChild(newChild);
-        /* istanbul ignore next - try again later */
+        // istanbul ignore next - try again later
         if (existing && existing.parentNode === target) {
           // Remove old one in next frame
           existing.remove();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vite-plugin-vanjs",
-  "version": "0.1.5",
+  "version": "0.1.7",
   "author": "thednp",
   "license": "MIT",
   "description": "A mini meta-framework for VanJS powered by Vite",

package/plugin/index.mjs

@@ -203,7 +203,8 @@ export default function VitePluginVanJS(options = {}) {
         }
 
         const routesScript = `
-import { Route, routes } from "@vanjs/router/routes.mjs";
+import { Route } from "@vanjs/router/route.mjs";
+import { routes } from "@vanjs/router/routes.mjs";
 import { lazy } from "@vanjs/router/lazy.mjs";
 
 // Reset current routes

package/plugin/types.d.ts

@@ -6,18 +6,15 @@ export * from "../meta/types";
 export * from "../server/types";
 export * from "../client/types";
 export * from "../parser/types";
-import type { Plugin } from "vite";
+import type { PluginOption } from "vite";
 
 export type VanJSPluginOptions = {
   routesDir: string;
   extensions: string[];
 };
 
-export type VanJSPlugin = (
-  options?: Partial<VanJSPluginOptions>,
-) => Plugin;
-
-// This is what your plugin actually returns, so declare it as a Plugin type
-declare const VitePluginVanJS: VanJSPlugin;
+export declare const VitePluginVanJS: (
+  config?: VitePluginVanJS,
+) => PluginOption<VanJSPluginOptions>;
 
 export default VitePluginVanJS;

package/router/a.mjs

@@ -1,6 +1,6 @@
 // router/a.mjs
 import van from "vanjs-core";
-import { matchRoute } from "./routes.mjs";
+import { matchRoute } from "./matchRoute.mjs";
 import { executeLifecycle, isCurrentPage, navigate } from "./helpers.mjs";
 
 /** @typedef {typeof import("./types").A} A */

package/router/extractParams.mjs

@@ -0,0 +1,27 @@
+/**
+ * Extract route params
+ * @param {string} pattern
+ * @param {string} path
+ * @returns {Record<string, string> | null}
+ */
+export const extractParams = (pattern, path) => {
+  /** @type {Record<string, string>} */
+  const params = {};
+  const patternParts = pattern.split("/");
+  const pathParts = path.split("/");
+
+  if (patternParts.length !== pathParts.length) return null;
+
+  for (let i = 0; i < patternParts.length; i++) {
+    const patternPart = patternParts[i];
+    const pathPart = pathParts[i];
+
+    if (patternPart.startsWith(":")) {
+      params[patternPart.slice(1)] = pathPart;
+    } else if (patternPart !== pathPart) {
+      return null;
+    }
+  }
+
+  return params;
+};

package/router/helpers.mjs

@@ -1,9 +1,7 @@
-// import van from "vanjs-core";
 import isServer from "../setup/isServer.mjs";
 import { routerState, setRouterState } from "./state.mjs";
-import { matchRoute } from "./routes.mjs";
+import { matchRoute } from "./matchRoute.mjs";
 
-/** @typedef {typeof import("./types.d.ts").unwrap} Unwrap */
 /** @typedef {typeof import("./types.d.ts").navigate} Navigate */
 /** @typedef {import("./types.d.ts").Route} Route */
 /** @typedef {import("./types.d.ts").VanNode} VanNode */
@@ -21,41 +19,6 @@ export const isCurrentPage = (pageName) => {
   return routerState.pathname.val === pageName;
 };
 
-/**
- * Merge the children of an Element or an array of elements with an optional array of children
- * into the childen prperty of a simple object.
- * @type {Unwrap}
- */
-export const unwrap = (source, ...children) => {
-  const layout = () => {
-    /** @type {VanNode[]} */
-    const pageChildren =
-      source && typeof source === "object" && "children" in source &&
-        Array.isArray(source?.children)
-        ? source.children
-        : typeof source === "function"
-        // @ts-expect-error - this case is specific to VanJS components in SSR
-        ? [...source()?.children || source()]
-        : typeof HTMLElement !== "undefined" && source instanceof HTMLElement
-        ? [...source.children]
-        : /* istanbul ignore next */ Array.isArray(source)
-        ? source
-        : [source];
-
-    // return van.tags.fragment(
-    // ...(children || /* istanbul ignore next */ []),
-    // ...pageChildren,
-    // );
-    return {
-      children: [
-        ...(children || /* istanbul ignore next */ []),
-        ...pageChildren,
-      ],
-    };
-  };
-  return layout();
-};
-
 /**
  * Check if component is a lazy component
  * @param {ComponentFn | (() => LazyComponent)} component
@@ -121,47 +84,6 @@ export const navigate = (path, options = {}) => {
   }
 };
 
-/**
- * Extract route params
- * @param {string} pattern
- * @param {string} path
- * @returns {Record<string, string> | null}
- */
-export const extractParams = (pattern, path) => {
-  /** @type {Record<string, string>} */
-  const params = {};
-  const patternParts = pattern.split("/");
-  const pathParts = path.split("/");
-
-  if (patternParts.length !== pathParts.length) return null;
-
-  for (let i = 0; i < patternParts.length; i++) {
-    const patternPart = patternParts[i];
-    const pathPart = pathParts[i];
-
-    if (patternPart.startsWith(":")) {
-      params[patternPart.slice(1)] = pathPart;
-    } else if (patternPart !== pathPart) {
-      return null;
-    }
-  }
-
-  return params;
-};
-
-/**
- * Fix the URL of a route
- * @param {string=} url
- * @returns
- */
-export const fixRouteUrl = (url) => {
-  if (!url) return "/";
-  if (url.startsWith("/")) {
-    return url;
-  }
-  return `/${url}`;
-};
-
 /**
  * Client only reload utility
  * WORK IN PROGRESS

package/router/index.mjs

@@ -1,7 +1,10 @@
 export * from "./router.mjs";
 export * from "./routes.mjs";
+export * from "./route.mjs";
 export * from "./a.mjs";
 export * from "./state.mjs";
 export * from "./lazy.mjs";
 export * from "./helpers.mjs";
 export * from "./cache.mjs";
+export * from "./unwrap.mjs";
+export * from "./extractParams.mjs";

package/router/lazy.mjs

@@ -1,5 +1,6 @@
-import isServer from "../setup/isServer.mjs";
+// router/lazy.mjs
 import van from "vanjs-core";
+import isServer from "../setup/isServer.mjs";
 import { cache, getCached } from "./cache.mjs";
 
 /** @typedef {import('./types').VanNode} VanNode */

package/router/matchRoute.mjs

@@ -0,0 +1,49 @@
+// router/matchRoute.mjs
+import { extractParams } from "./extractParams.mjs";
+import { routes } from "./routes.mjs";
+
+/** @typedef {import("./types.d.ts").RouteEntry} RouteEntry */
+
+/**
+ * Find a registered route that matches the given path
+ * @param {string} initialPath
+ * @returns {RouteEntry | null}
+ */
+export const matchRoute = (initialPath) => {
+  const path = initialPath !== "/" && initialPath.endsWith("/")
+    ? initialPath.slice(0, -1)
+    : initialPath;
+
+  // First try exact match (excluding wildcards)
+  let foundMatch = routes.find((r) => r.path === path && !r.path.includes("*"));
+
+  // Then try nested wildcard match if no exact match found
+  if (!foundMatch) {
+    // Build the path for potential nested wildcard, e.g. /admin/* for /admin/articles
+    const nestedPath = path.split("/").slice(0, -1).join("/") + "/*";
+    foundMatch = routes.find((r) => r.path === nestedPath);
+  }
+
+  // If we found either an exact or nested wildcard match, return it with params
+  if (foundMatch) {
+    return {
+      ...foundMatch,
+      params: extractParams(foundMatch.path, path) ?? /* istanbul ignore next */
+        undefined,
+    };
+  }
+
+  // Try parameterized routes (like /users/:id)
+  for (const route of routes) {
+    // Skip the global catch-all
+    if (route.path === "*") continue;
+    const params = extractParams(route.path, path);
+
+    if (params) {
+      return { ...route, params };
+    }
+  }
+
+  // Finally, fallback to global catch-all route
+  return routes.find((r) => r.path === "*") || null;
+};

package/router/route.mjs

@@ -0,0 +1,36 @@
+// router/routes.mjs
+import { isLazyComponent } from "./helpers.mjs";
+import { routes } from "./routes.mjs";
+import { lazy } from "./lazy.mjs";
+/** @typedef {import("./types.d.ts").RouteProps} RouteProps */
+/** @typedef {import("./types.d.ts").ComponentModule} ComponentModule */
+
+/**
+ * @param {RouteProps} routeProps
+ */
+export const Route = (routeProps) => {
+  const { path, component, preload, load, ...rest } = routeProps;
+
+  // istanbul ignore next - no point testing this error
+  if (routes.some((r) => r.path === path)) {
+    console.error(`🍦 @vanjs/router: duplicated route for "${path}".`);
+    return;
+  }
+
+  // If component isn't lazy, make it lazy
+  if (!isLazyComponent(component)) {
+    /** @type {() => Promise<ComponentModule>} */
+    const wrappedComponent = lazy(() =>
+      Promise.resolve({
+        Page: component,
+        route: { preload, load },
+      })
+    );
+    routes.push({ ...rest, path, component: wrappedComponent });
+    return;
+  }
+
+  // Otherwise keep original component
+  // @ts-expect-error - RouteProps and RouteEntry are now equivalent
+  routes.push(routeProps);
+};

package/router/router.mjs

@@ -1,8 +1,9 @@
 import van from "vanjs-core";
 import isServer from "../setup/isServer.mjs";
 import { routerState, setRouterState } from "./state.mjs";
-import { matchRoute } from "./routes.mjs";
-import { executeLifecycle, unwrap } from "./helpers.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";
 

package/router/routes.mjs

@@ -1,85 +1,4 @@
 // router/routes.mjs
-import { extractParams, isLazyComponent } from "./helpers.mjs";
-import { lazy } from "./lazy.mjs";
-
 /** @typedef {import("./types.d.ts").RouteEntry} RouteEntry */
-/** @typedef {import("./types.d.ts").RouteProps} RouteProps */
-/** @typedef {import("./types.d.ts").DynamicModule} DynamicModule */
-/** @typedef {import("./types.d.ts").ComponentModule} ComponentModule */
-
 /** @type {RouteEntry[]} */
 export const routes = [];
-
-/**
- * @param {RouteProps} routeProps
- */
-export const Route = (routeProps) => {
-  const { path, component, preload, load, ...rest } = routeProps;
-
-  // istanbul ignore next - no point testing this error
-  if (routes.some((r) => r.path === path)) {
-    console.error(`🍦 @vanjs/router: duplicated route for "${path}".`);
-    return;
-  }
-
-  // If component isn't lazy, make it lazy
-  if (!isLazyComponent(component)) {
-    /** @type {() => Promise<ComponentModule>} */
-    const wrappedComponent = lazy(() =>
-      Promise.resolve({
-        Page: component,
-        route: { preload, load },
-      })
-    );
-    routes.push({ ...rest, path, component: wrappedComponent });
-    return;
-  }
-
-  // Otherwise keep original component
-  // @ts-expect-error - RouteProps and RouteEntry are now equivalent
-  routes.push(routeProps);
-};
-
-/**
- * Find a registered route that matches the given path
- * @param {string} initialPath
- * @returns {RouteEntry | null}
- */
-export const matchRoute = (initialPath) => {
-  const path = initialPath !== "/" && initialPath.endsWith("/")
-    ? initialPath.slice(0, -1)
-    : initialPath;
-
-  // First try exact match (excluding wildcards)
-  let foundMatch = routes.find((r) => r.path === path && !r.path.includes("*"));
-
-  // Then try nested wildcard match if no exact match found
-  if (!foundMatch) {
-    // Build the path for potential nested wildcard, e.g. /admin/* for /admin/articles
-    const nestedPath = path.split("/").slice(0, -1).join("/") + "/*";
-    foundMatch = routes.find((r) => r.path === nestedPath);
-  }
-
-  // If we found either an exact or nested wildcard match, return it with params
-  if (foundMatch) {
-    return {
-      ...foundMatch,
-      params: extractParams(foundMatch.path, path) ?? /* istanbul ignore next */
-        undefined,
-    };
-  }
-
-  // Try parameterized routes (like /users/:id)
-  for (const route of routes) {
-    // Skip the global catch-all
-    if (route.path === "*") continue;
-    const params = extractParams(route.path, path);
-
-    if (params) {
-      return { ...route, params };
-    }
-  }
-
-  // Finally, fallback to global catch-all route
-  return routes.find((r) => r.path === "*") || null;
-};

package/router/state.mjs

@@ -1,7 +1,19 @@
 // router/state.js
 import van from "vanjs-core";
 import isServer from "../setup/isServer.mjs";
-import { fixRouteUrl } from "./helpers.mjs";
+
+/**
+ * Fix the URL of a route
+ * @param {string=} url
+ * @returns
+ */
+export const fixRouteUrl = (url) => {
+  if (!url) return "/";
+  if (url.startsWith("/")) {
+    return url;
+  }
+  return `/${url}`;
+};
 
 const initialPath = !isServer ? globalThis.location.pathname : "/";
 const initialSearch = !isServer ? globalThis.location.search : "";

package/router/unwrap.mjs

@@ -0,0 +1,33 @@
+/** @typedef {typeof import("./types.d.ts").unwrap} Unwrap */
+/** @typedef {import("./types.d.ts").VanNode} VanNode */
+
+/**
+ * Merge the children of an Element or an array of elements with an optional array of children
+ * into the childen prperty of a simple object.
+ * @type {Unwrap}
+ */
+export const unwrap = (source, ...children) => {
+  const layout = () => {
+    /** @type {VanNode[]} */
+    const pageChildren =
+      source && typeof source === "object" && "children" in source &&
+        Array.isArray(source?.children)
+        ? source.children
+        : typeof source === "function"
+        // @ts-expect-error - this case is specific to VanJS components in SSR
+        ? [...source()?.children || source()]
+        : typeof HTMLElement !== "undefined" && source instanceof HTMLElement
+        ? [...source.children]
+        : /* istanbul ignore next */ Array.isArray(source)
+        ? source
+        : [source];
+
+    return {
+      children: [
+        ...(children || /* istanbul ignore next */ []),
+        ...pageChildren,
+      ],
+    };
+  };
+  return layout();
+};

package/server/index.mjs

@@ -67,9 +67,6 @@ function renderPreloadLink(file) {
   }
 }
 
-/**
- * @type {typeof import("./types.d.ts").renderPreloadLinks}
- */
 /**
  * @type {typeof import("./types.d.ts").renderPreloadLinks}
  */
@@ -82,7 +79,7 @@ export function renderPreloadLinks(modules, manifest) {
   Object.entries(manifest).forEach(([id, files]) => {
     // istanbul ignore else - don't pre-render routes, layouts and JSX stuff
     if (
-      ["src/pages", "src/routes", "vite-plugin-vanjs/jsx"].some((l) =>
+      ["src/pages", "src/routes", "vite-plugin-vanjs/"].some((l) =>
         id.includes(l)
       )
     ) {

package/server/types.d.ts

@@ -21,11 +21,11 @@ type ValidVanNode =
   | VanElement
   | TagFunc;
 
-type VanComponent = () => HTMLElement | ValidVanNode | ValidVanNode[];
+type VComponent = () => HTMLElement | ValidVanNode | ValidVanNode[];
 export type Source =
   | Promise<ValidVanNode>
-  | VanComponent
-  | (() => VanComponent)
+  | VComponent
+  | (() => VComponent)
   | ValidVanNode
   | ValidVanNode[]
   | undefined;