vite-plugin-vanjs 0.1.6 → 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";
 
 /**
@@ -118,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)) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vite-plugin-vanjs",
-  "version": "0.1.6",
+  "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/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;