vite-plugin-vanjs 0.1.4 → 0.1.6

package/README.md

@@ -8,7 +8,7 @@
 [![vanjs-core version](https://img.shields.io/badge/vanjs--core-1.5.5-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.1.2-brightgreen)](https://www.vitest.dev/)
-[![vite version](https://img.shields.io/badge/vite-6.3.3-brightgreen)](https://vite.dev)
+[![vite version](https://img.shields.io/badge/vite-6.3.4-brightgreen)](https://vite.dev)
 
 A mini meta-framework for [VanJS](https://vanjs.org/) developed around the awesome [vite](https://vite.dev) and tested with [vitest](https://vitest.dev). The plugin comes with a set of modules to streamline 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;

package/client/index.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();
@@ -106,13 +116,18 @@ function createHydrationContext() {
     return parent;
   }
 
-  /** @type {(oldDom: HTMLElement, newDom: HTMLElement) => HTMLElement} */
+  /** @type {(oldDom: HTMLElement, newDom: HTMLElement | HTMLElement[]) => HTMLElement} */
   function diffAndHydrate(oldDom, newDom) {
     // SPA mode
     // istanbul ignore else
     if (!oldDom.children.length && !elementsMatch(oldDom, newDom)) {
       return oldDom.replaceChildren(...unwrap(newDom).children);
     }
+    // istanbul ignore else
+    if (newDom instanceof Array) {
+      oldDom.replaceChildren(...unwrap(newDom).children);
+      return;
+    }
 
     // SSR Mode
     /** @type {Set<HTMLElement>} */
@@ -175,12 +190,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", "");
@@ -188,14 +199,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]),
     );
 
@@ -219,29 +234,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");
@@ -253,9 +268,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.4",
+  "version": "0.1.6",
   "author": "thednp",
   "license": "MIT",
   "description": "A mini meta-framework for VanJS powered by Vite",
@@ -93,7 +93,7 @@
     "@vitest/ui": "^3.1.2",
     "happy-dom": "^16.8.1",
     "typescript": "5.6.2",
-    "vite": "^6.3.3",
+    "vite": "^6.3.4",
     "vitest": "^3.1.2"
   },
   "packageManager": "pnpm@8.6.12",

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/setup/vanX-ssr.mjs

@@ -1,12 +1,30 @@
 import { dummyVanX, registerEnv } from "mini-van-plate/shared";
 
+const {
+  calc,
+  compact,
+  list,
+  noreactive,
+  raw,
+  reactive,
+  replace,
+  stateFields,
+} = dummyVanX;
+
 const vanX = {
-  ...dummyVanX,
-  get default() {
-    return dummyVanX;
-  },
+  calc,
+  compact,
+  list,
+  noreactive,
+  raw,
+  reactive,
+  replace,
+  stateFields,
 };
 
 registerEnv({ vanX });
 
-export default vanX;
+export { calc, compact, list, noreactive, raw, reactive, replace, stateFields };
+
+export { vanX as default };
+export {};

package/setup/vanX.mjs

@@ -20,14 +20,11 @@ const vanX = {
   list,
   replace,
   compact,
-  // Define default as part of the initial object
-  get default() {
-    return vanX;
-  },
 };
 
 // Export named exports
 export { calc, compact, list, noreactive, raw, reactive, replace, stateFields };
 
 // Export as default
-export default vanX;
+export { vanX as default };
+export {};