vite-plugin-vanjs 0.0.8 → 0.0.10

package/README.md

@@ -7,8 +7,8 @@
 [![typescript version](https://img.shields.io/badge/typescript-5.6.2-brightgreen)](https://www.typescriptlang.org/)
 [![vanjs-core version](https://img.shields.io/badge/vanjs--core-1.5.3-brightgreen)](https://github.com/vanjs-org/van)
 [![mini-van-plate version](https://img.shields.io/badge/mini--van--plate-0.6.3-brightgreen)](https://github.com/vanjs-org/mini-van-plate)
-[![vitest version](https://img.shields.io/badge/vitest-3.0.9-brightgreen)](https://www.vitest.dev/)
-[![vite version](https://img.shields.io/badge/vite-6.2.2-brightgreen)](https://vite.dev)
+[![vitest version](https://img.shields.io/badge/vitest-3.1.1-brightgreen)](https://www.vitest.dev/)
+[![vite version](https://img.shields.io/badge/vite-6.2.5-brightgreen)](https://vite.dev)
 
 A mini meta-framework for [VanJS](https://vanjs.org/) developed around the awesome [Vite](https://vite.dev). The plugin comes with a set of modules to simplify your workflow:
 * ***@vanjs/router*** - one of the most important part of an application which allows you to split code and lazy load page like components with ease, handles both Client Side Rendering (SSR) and Server Side Rendering (CSR) and makes it really easy to work with;
@@ -20,6 +20,9 @@ A mini meta-framework for [VanJS](https://vanjs.org/) developed around the aweso
 
 The plugin will automatically load the appropriate Van or VanX objects depending on the client/server environment with zero configuration needed. It uses the `mini-van-plate/shared` module to register the required objects in an isomorphic enviroment.
 
+Also in _development_ mode, the plugin will load the `van.debug.js` module to help you better troubleshoot your VanJS application.
+
+
 ### Notes 
 * The plugin uses `van-ext` along with `mini-van-plate` so you can have everything ready from the start.
 
@@ -31,19 +34,19 @@ The plugin will automatically load the appropriate Van or VanX objects depending
 1) Install the plugin:
 
 ```bash
-npm install vite-plugin-vanjs
+npm install vite-plugin-vanjs@latest
 ```
 
 ```bash
-pnpm add vite-plugin-vanjs
+pnpm add vite-plugin-vanjs@latest
 ```
 
 ```bash
-deno add npm:vite-plugin-vanjs
+deno add npm:vite-plugin-vanjs@latest
 ```
 
 ```bash
-bun install vite-plugin-vanjs
+bun add vite-plugin-vanjs@latest
 ```
 
 
@@ -127,12 +130,14 @@ Route({ path: '*', component: () => van.tags.div('404 - Page Not Found') });
 
 function App() {
   // the Router is only an outlet
-  export default Route();
+  return Router();
 }
 
-// render or hydrate the app
+// render the app
 van.add(document.body, App());
 ```
+**IMPORTANT** - using lazy components for the main route (`"/"`) is not allowed. This is to prevent hydration waterfalls, especially for SSR apps.
+
 
 Here's how a page should look like, pay attention to the comments:
 ```ts
@@ -176,23 +181,17 @@ The **vite-plugin-vanjs** plugin provides metadata management via the exported `
 
 Depending on the type of application, it's generally very easy to setup the system to work properly, we only need to make sure that we execute functions in a specific order:
 
-* first we call the `initializeHeadTags` which allows the module to store the current tags that come from either a Vite starter template `index.html` or the server (SSR); if we don't call this function, the existing tags will be removed and some of them are very important (especially `charset` and `viewport`);
-* then we define a set of default tags to be used by both client and server (if using an SSR template) on all pages that don't come with any metadata tags;
-* lastly, on other pages, we define tags that override both the existing and the default tags.
+* first we define a set of default tags to be used by both client and server (if using an SSR template) on all pages that don't come with any metadata tags;
+* next, on other pages, we define tags that override both the existing and the default tags.
 
 Here's a quick example, first let's start again with the `app.ts`:
 ```ts
 import van from 'vanjs-core'
-import { Style, Title, Meta, initializeHeadTags } from '@vanjs/meta'
+import { Style, Title, Link, Meta } from '@vanjs/meta'
 
 function App() {
   const { div, h1, p } van.tags;
 
-  // when app is first time executed
-  // we need to register tags coming
-  // from the index.html template
-  initializeHeadTags();
-
   // a good practice is to define some default tags
   // they are used on pages where no tags are set
   Title("VanJS + Vite App");

package/jsx/jsx.mjs

@@ -2,7 +2,12 @@ import van from "../setup/van.mjs";
 import setup from "../setup/index.mjs";
 import { setAttribute, styleToString } from "../client/index.mjs";
 
-export const jsx = (jsxTag, { children, ref, style, ...props }) => {
+export const jsx = (jsxTag, { children, ref, style, ...rest }) => {
+  // filter props with undefined values
+  const props = Object.fromEntries(
+    Object.entries(rest).filter(([_, val]) => val !== undefined),
+  );
+
   if (typeof jsxTag === "string") {
     const newElement = van.tags[jsxTag](props, children);
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vite-plugin-vanjs",
-  "version": "0.0.8",
+  "version": "0.0.10",
   "author": "thednp",
   "license": "MIT",
   "description": "A mini meta-framework for VanJS powered by Vite",
@@ -87,15 +87,16 @@
     "vanjs-ext": "^0.6.2"
   },
   "devDependencies": {
-    "@types/node": "^22.13.10",
-    "@vitest/browser": "^3.0.9",
-    "@vitest/coverage-istanbul": "^3.0.9",
-    "@vitest/ui": "^3.0.9",
+    "@types/node": "^22.14.0",
+    "@vitest/browser": "^3.1.1",
+    "@vitest/coverage-istanbul": "^3.1.1",
+    "@vitest/ui": "^3.1.1",
     "happy-dom": "^16.8.1",
     "typescript": "5.6.2",
-    "vite": "^6.2.2",
-    "vitest": "^3.0.9"
+    "vite": "^6.2.5",
+    "vitest": "^3.1.1"
   },
+  "packageManager": "pnpm@8.6.12",
   "engines": {
     "node": ">=20",
     "pnpm": ">=8.6.0"

package/router/a.mjs

@@ -15,7 +15,7 @@ export const A = (
 ) => {
   /* istanbul ignore next - try again later */
   const props = Object.fromEntries(
-    Object.entries(rest || {}).filter(([_, val]) => val),
+    Object.entries(rest || {}).filter(([_, val]) => val !== undefined),
   );
   const newProps = {
     href,

package/router/global.d.ts

@@ -129,7 +129,12 @@ declare module "@vanjs/router" {
 
   export type RouteProps = {
     path: string;
-    component: VanComponent | (() => ComponentModule);
+    component:
+      | (() =>
+        | HTMLElementTagNameMap[unknown]
+        | HTMLElementTagNameMap[unknown][])
+      | VanComponent
+      | (() => ComponentModule);
     preload?: (params?: Record<string, string>) => void;
     load?: (params?: Record<string, string>) => void;
   };

package/router/lazy.mjs

@@ -28,7 +28,7 @@ export const lazy = (importFn) => {
   }
 
   let initialized = false;
-  const component = van.state(() => "");
+  const component = van.state(() => "Loading..");
   const route = van.state({});
 
   const load = () => {

package/router/router.mjs

@@ -1,16 +1,31 @@
 import van from "vanjs-core";
 import setup from "../setup/index.mjs";
-import { routerState } from "./state.mjs";
+import { routerState, setRouterState } from "./state.mjs";
 import { matchRoute } from "./routes.mjs";
 import { executeLifecycle, unwrap } from "./helpers.mjs";
+import { hydrate } from "../client/index.mjs";
+import { Head, initializeHeadTags } from "@vanjs/meta";
+
+let isConnected = false;
+/** @param {Event & {target: globalThis}} e */
+// istanbul ignore next - cannot test
+const popHandler = (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);
+  }
+};
 
 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),
+    Object.entries(initialProps).filter(([_, val]) => val !== undefined),
   );
-  const wrapper = main(props);
+  const wrapper = main({ ...props, "data-root": true });
   const mainLayout = () => {
     const route = matchRoute(routerState.pathname.val);
     /* istanbul ignore else */
@@ -22,7 +37,9 @@ export const Router = (initialProps = /* istanbul ignore next */ {}) => {
       const renderComponent = async () => {
         try {
           const module = await route.component();
-          const component = module.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);
@@ -37,13 +54,82 @@ export const Router = (initialProps = /* istanbul ignore next */ {}) => {
       return renderComponent();
     }
 
+    const root = document.querySelector("[data-root]");
+    // istanbul ignore else - cannot test unmount
+    if (isConnected || !root) {
+      initializeHeadTags();
+      globalThis.addEventListener("popstate", popHandler);
+    } else {
+      globalThis.removeEventListener("popstate", popHandler);
+    }
+
     // Client-side lazy component, lifeCycle is already executed on the server
     // or when A component has been clicked in the client
-    const module = route.component();
-    const children = module.component
-      ? Array.from(unwrap(module.component).children)
-      : [];
-    return children.length ? van.add(wrapper, ...children) : wrapper;
+    if (root) {
+      // this case is when root is server side rendered
+      const module = route.component();
+      const children = () => {
+        // 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();
+
+        // istanbul ignore else
+        if (document.head) {
+          isConnected = true;
+          van.hydrate(document.head, (head) => hydrate(head, Head()));
+        }
+
+        return kudos;
+      };
+
+      return van.add(wrapper, ...children());
+    }
+    // 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 md = csrRoute.val.component();
+      // 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();

package/router/routes.mjs

@@ -12,17 +12,22 @@ export const routes = [];
  * @param {RouteProps} routeProps
  */
 export const Route = (routeProps) => {
-  const { component, preload, load, ...rest } = routeProps;
+  const { path, component, preload, load, ...rest } = routeProps;
+
+  // istanbul ignore next - no point testing this error
+  if (path === "/" && isLazyComponent(component)) {
+    throw new Error("Home component must not be a lazy component");
+  }
 
   // If component has lifecycle methods but isn't lazy, make it lazy
-  if (!isLazyComponent(component)) {
+  if (!isLazyComponent(component) && path !== "/") {
     const wrappedComponent = lazy(() =>
       Promise.resolve({
         default: component,
         route: { preload, load },
       })
     );
-    routes.push({ ...rest, component: wrappedComponent });
+    routes.push({ ...rest, path, component: wrappedComponent });
     return;
   }
 

package/router/types.d.ts

@@ -129,7 +129,10 @@ export type RouteEntry = {
 
 export type RouteProps = {
   path: string;
-  component: VanComponent | (() => ComponentModule);
+  component:
+    | (() => HTMLElementTagNameMap[unknown] | HTMLElementTagNameMap[unknown][])
+    | VanComponent
+    | (() => ComponentModule);
   preload?: (params?: Record<string, string>) => void;
   load?: (params?: Record<string, string>) => void;
 };