vite-plugin-vanjs 0.0.9 → 0.1.0

package/README.md

@@ -7,258 +7,52 @@
 [![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.2-brightgreen)](https://www.vitest.dev/)
+[![vite version](https://img.shields.io/badge/vite-6.3.3-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:
+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;
 * ***@vanjs/meta*** - allows you to create metadata for your pages as well as load additional assets with ease;
 * ***@vanjs/jsx*** - enables JSX transformation;
 * ***@vanjs/setup*** - enables loading VanJS modules isomorphically;
-* ***@vanjs/server*** - provides various tools for Server Side Rendering;
-* ***@vanjs/client*** - provides various tools for Client Side Rendering.
-
-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.
-
-* Kickstart your VanJS project with `npm create vanjs@latest`. Some starter templates feature this plugin and most essential tools.
+* ***@vanjs/server*** - provides various tools for Server Side Rendering (SSR);
+* ***@vanjs/client*** - provides various tools for Client Side Rendering (CSR).
 
 
 ### Install
-
-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
-```
-
-
-2) To add Typescript support, edit your `src/vite-env.d.ts` (or any global types you have set in your app) as follows:
-
-```ts
-/// <reference types="vite/client" />
-/// <reference types="vite-plugin-vanjs" />
-```
-
-
-### Usage
-
-Update your `vite.config.ts` file:
-```ts
-// vite.config.mts
-import { defineConfig } from 'vite';
-import vanjs from 'vite-plugin-vanjs';
-
-export default defineConfig({
-  plugins: [vanjs()],
-});
-```
-
-
-**Example**:
-
-While the plugin will resolve the appropriate modules automatically depending on the environment, for your convenience, you can also import the `@vanjs/van` and `@vanjs/vanX` virtual modules, so the plugin makes sure to load the right modules where needed.
-
-```ts
-// my-component.ts
-import van from '@vanjs/van';
-
-// use van as usual
-const MyComponent = () => {
-  return van.tags.div("Hello from VanJS!");
-};
-```
-Using `vanX` in your code:
-
-```ts
-// my-list.ts
-import van from '@vanjs/van';
-import vanX from '@vanjs/vanX';
-
-type ListItem = { text: string, done: boolean };
-
-// use VanJS as usual
-const MyList = () => {
-  const items = vanX.reactive<ListItem[]>([]);
-  const { div, button, span, a, input, del } = van.tags;
-  const inputDom = input({ type: "text", placeholder: "your new item" });
-  return div(
-    inputDom,
-    button({onclick: () => items.push({text: inputDom.value, done: false})}, "Add"),
-    vanX.list(div, items, ({val: v}, deleter) => div(
-      input({type: "checkbox", checked: () => v.done, onclick: (e) => v.done = e.target.checked}),
-      () => (v.done ? del : span)(v.text),
-      button({ onclick: deleter }, "Remove"),
-    )),
-  )
-};
-```
-**Note**: Anywhere you have **vite-plugin-vanjs** enabled in your Vite apps, all imports from `"vanjs-core"` or `"vanjs-ext"` will be replaced with `"@vanjs/van"` and `"@vanjs/vanX"` respectivelly. In addition you have the `isServer` getter in the `@vanjs/setup` module, something you can use to exclude code execution in server/client environment.
-
-
-### Router
-The **vite-plugin-vanjs** plugin provides a router with load and preload capability, code splitting and lazy loading, all via the exported `@vanjs/router` module. This functionality is still in early stages, but it manages to work with both Server Side Rendering (SSR) when using an appropriate starter template, as well as Client Side Rendering (CSR/SPA - your classic VanJS app), as we'll see in the example below.
-
-Here's a basic example, let's start with the `app.ts`:
-
-```ts
-// src/app.ts
-import van from "vanjs-core";
-import { Router, Route } from "@vanjs/router";
-
-// define routes
-Route({ path: '/', component: () => van.tags.div('Hello VanJS') });
-Route({ path: '/about', component: lazy(() => import('./pages/about'))});
-Route({ path: '*', component: () => van.tags.div('404 - Page Not Found') });
-
-function App() {
-  // the Router is only an outlet
-  export default Route();
-}
-
-// render or hydrate the app
-van.add(document.body, App());
-```
-
-Here's how a page should look like, pay attention to the comments:
-```ts
-// src/pages/about.ts
-import van from "vanjs-core";
-import { A, navigate } from "@vanjs/router";
-
-// define routes
-export const route = {
-  preload: async () => {
-    // in most cases you may want to enforce user access control
-    console.log('About preload triggered');
-  },
-  load: async () => {
-    // Load data if needed
-    // you might want to cache this data
-    console.log('About load triggered');
-  }
-}
-
-// you must export your page component as either
-// a named export "Page" or a default export
-export function Page() {
-  const { div, h1, p, button } = van.tags;
-  return div(
-    h1('About'),
-    p('This is the about page'),
-    A({ href: "/" }, "Back to Home"),
-    button({ onclick: () => navigate('/about-details') }, "Learn more..")
-  )
-}
-```
-**Notes**
-- when hovering the `A` component, if it links to a lazy component it will trigger that page component preload, but not preload any data;
-- if you use the regular `a` from `van.tags` instead of the `A` component, your application will work just like a classic Multi-Page App (MPA);
-- the `navigate` tool is used by the `A` component and you can also use it to navigate to different routes, something you can use with your API/logic.
-
-
-### Metadata
-The **vite-plugin-vanjs** plugin provides metadata management via the exported `@vanjs/meta` module. This module works with both SSR and CSR, and makes it easy to work with.
-
-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.
-
-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'
-
-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");
-  Meta({ name: "description", content: "Sample app description" });
-  Meta({ property: "og:description", content: "Some open graph description for your app" });
-  Link({ href: 'path-to/your-style.css', rel: "stylesheet" });
-  Script({ src: 'path-to/your-script.js' });
-  Style({ id: "app-style" },
-    `p { margin-bottom: 1rem }`
-  );
-
-  return div(
-    h1('Hello VanJS!'),
-    p('Sample paragraph.')
-  );
-}
-
-// render or hydrate the app
-van.add(document.body, App());
+bun add vite-plugin-vanjs@latest
 ```
-**Note**
-- the `Style` component doesn't have any unique attribute so we must use a unique ID to prevent duplicates;
-- all provided metadata components don't return any markup, their function is to register new tags or update existing ones.
 
+### Wiki
 
-### JSX Transformation
-To enable JSX transformation, you don't need to do anything except to add Typescript support if you need to. So edit your `tsconfig.json` as follows:
-
-```json
-{
-  "compilerOptions": {
-    /** other compilerOptions */
-    "jsx": "preserve",
-    "jsxImportSource": "@vanjs/jsx"
-  }
-}
-```
+For a complete guide on how to use the plugin, be sure to check the wiki:
+* [Quick Start](https://github.com/thednp/vite-plugin-vanjs/wiki/Quick-Start): the right place to get started;
+* [Routing](https://github.com/thednp/vite-plugin-vanjs/wiki/Routing): a complete guide on how to configure routing;
+* [Metadata](https://github.com/thednp/vite-plugin-vanjs/wiki/Metadata): the quick guide to help you manage your app meta tags;
+* [JSX](https://github.com/thednp/vite-plugin-vanjs/wiki/JSX): a complete guide on how to use JSX transformation;
+* [Isomorphic](https://github.com/thednp/vite-plugin-vanjs/wiki/Isomorphic): a quick guide on isomorphism in VanJS;
+* [Hydration](https://github.com/thednp/vite-plugin-vanjs/wiki/Hydration): a quick note on how the plugin handles hydration;
+* [About](https://github.com/thednp/vite-plugin-vanjs/wiki/About): some note on the project.
 
-**Example**:
-```tsx
-// App.tsx
-import van from '@vanjs/van';
 
-const App = () => {
-  const count = van.state(0);
-  const btnRef = van.state<{ current: HTMLElement }>();
-
-  return (
-    <button ref={btnRef} onClick={() => count.val++}>{count}</button>
-  );
-}
-
-const root = document.getElementById("app") as HTMLElement;
-
-van.add(root, <App /> as HTMLElement);
-```
-
-**Notes**:
-* in cases like this one, enforcing a certain typescript type via `as` might be in good order depending on who renders your component;
-* you can use `ref` as a `van.state`, `class` attribute instead of `className`, `for` attribute instead of `htmlFor`;
-* you can use style as both an object and a string;
-* for a JSX starter template, check out the [vite-starter-vanjs-ssr-jsx](https://github.com/thednp/vite-starter-vanjs-ssr-jsx).
-* for a pure vanilla starter template, check out the [vite-starter-vanjs-ssr](https://github.com/thednp/vite-starter-vanjs-ssr).
+### Notes
+* 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 `mini-van-plate/van-plate` on the server.
+* Also in _development_ mode, the plugin will load the `van.debug.js` module to help you better troubleshoot your VanJS application. However JSX transformation is not compatible with the `van.debug.js` module.
+* The plugin uses `van-ext` along with `mini-van-plate` so you can have everything ready from the start.
+* Kickstart your VanJS project with `npm create vanjs@latest`. Some starter templates feature this plugin and most essential tools.
 
 
 ### Credits

package/client/global.d.ts

@@ -34,12 +34,12 @@ declare module "@vanjs/client" {
    * @param target the target element
    * @param content the element(s) to hydrate
    */
-  export const hydrate: (
-    target: HTMLElement,
+  export const hydrate: <T = HTMLElement>(
+    target: T,
     content:
       | ChildElement
       | ChildElement[]
       | JSX.Element
       | Promise<ChildElement | ChildElement[] | JSX.Element>,
-  ) => HTMLElement;
+  ) => T;
 }

package/client/index.mjs

@@ -36,6 +36,121 @@ export const styleToString = (style) => {
     : /* istanbul ignore next */ "";
 };
 
+/** @type {(el1: HTMLElement, el2: HTMLElement | HTMLElement[]) => boolean} */
+export function elementsMatch(el1, el2) {
+  // Quick initial checks before recursing
+  // istanbul ignore else
+  if (
+    !(el2 instanceof HTMLElement) ||
+    el1.tagName !== el2.tagName ||
+    el1.id !== el2.id ||
+    el1.className !== el2.className
+  ) {
+    return false;
+  }
+
+  const childNodes1 = Array.from(el1.childNodes);
+  const childNodes2 = Array.from(el2.childNodes);
+
+  // istanbul ignore else
+  if (childNodes1.length !== childNodes2.length) {
+    return false;
+  }
+
+  // Only recurse if necessary (has childNodes with data-hk)
+  const hasHydratedChildren = childNodes1.some((child) =>
+    child instanceof HTMLElement && (child.hasAttribute("data-hk") ||
+      child.querySelector("[data-hk]"))
+  );
+
+  if (!hasHydratedChildren) {
+    return true; // If no hydrated children, elements match based on initial checks
+  }
+
+  return childNodes1.every((child, idx) =>
+    elementsMatch(child, childNodes2[idx])
+  );
+}
+
+function createHydrationContext() {
+  /** @type {WeakMap<Element, Element>} */
+  const parentCache = new WeakMap();
+
+  /** @type {(element: HTMLElement, root: HTMLElement) => HTMLElement | null} */
+  function getParent(element, root) {
+    const cacheKey = element;
+    // istanbul ignore if - must be connected to a read DOM
+    if (parentCache.has(cacheKey)) {
+      const cached = parentCache.get(cacheKey);
+      // Verify the cached parent is still valid for this root
+      if (cached && cached.isConnected && root.contains(cached)) {
+        return cached;
+      }
+      // If not valid, remove from cache
+      parentCache.delete(cacheKey);
+    }
+
+    const chain = [];
+    let current = element;
+
+    while (current !== root && current) {
+      chain.push(current);
+      current = current.parentElement;
+    }
+
+    const parent = chain.slice(-1)[0];
+    // istanbul ignore else
+    if (parent) {
+      parentCache.set(cacheKey, parent);
+    }
+    return parent;
+  }
+
+  /** @type {(oldDom: HTMLElement, newDom: HTMLElement) => HTMLElement} */
+  function diffAndHydrate(oldDom, newDom) {
+    // SPA mode
+    // istanbul ignore else
+    if (!oldDom.children.length && !elementsMatch(oldDom, newDom)) {
+      return oldDom.replaceChildren(...unwrap(newDom).children);
+    }
+
+    // SSR Mode
+    /** @type {Set<HTMLElement>} */
+    const oldSet = new Set();
+    /** @type {Set<HTMLElement>} */
+    const newSet = new Set();
+
+    const processElements = (root, set) => {
+      const elements = root.querySelectorAll("[data-hk]");
+      let lastParent = null;
+
+      elements.forEach((el) => {
+        const parent = getParent(el, root);
+        if (parent && parent !== lastParent) {
+          set.add(parent);
+          lastParent = parent;
+        }
+      });
+    };
+
+    processElements(oldDom, oldSet);
+    processElements(newDom, newSet);
+
+    // istanbul ignore else
+    if (newSet.size > 0) {
+      const newArray = Array.from(newSet);
+      oldSet.forEach((el) => {
+        const match = newArray.find((m) => elementsMatch(m, el));
+        // istanbul ignore else
+        if (match) {
+          el.replaceWith(match);
+        }
+      });
+    }
+  }
+
+  return { diffAndHydrate };
+}
 /**
  * @param {Element} target the root element
  * @param {Element | Element[] | Promise<Element | Element[]>} content the element(s) to hydrate
@@ -43,10 +158,16 @@ export const styleToString = (style) => {
 export const hydrate = (target, content) => {
   if (content instanceof Promise) {
     content.then((res) => {
-      const wrapper = unwrap(res);
-      target.replaceChildren(
-        ...(Array.from(wrapper.children)),
-      );
+      if (!target.hasAttribute("data-h")) {
+        const { diffAndHydrate } = createHydrationContext();
+        diffAndHydrate(target, res);
+        target.setAttribute("data-h", "");
+      } else {
+        const wrapper = unwrap(res);
+        target.replaceChildren(
+          ...(Array.from(wrapper.children)),
+        );
+      }
     });
     return target;
   }
@@ -60,6 +181,12 @@ export const hydrate = (target, content) => {
   const isLink = (tag) => tag instanceof HTMLLinkElement;
 
   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) => !isStyleLink(child));
 
@@ -106,6 +233,7 @@ export const hydrate = (target, content) => {
       }
 
       // For link tags, add with disabled state first
+      /* istanbul ignore else - try again later */
       if (isLink(newChild)) {
         const temp = newChild.cloneNode();
         temp.disabled = true;
@@ -125,17 +253,23 @@ export const hydrate = (target, content) => {
 
         target.appendChild(temp);
       } // For style tags, add new one first
-      /* istanbul ignore if - try again later */ else if (isStyle(newChild)) {
+      else if (isStyle(newChild)) {
         target.appendChild(newChild);
         /* istanbul ignore next - try again later */
         if (existing && existing.parentNode === target) {
           // Remove old one in next frame
-          requestAnimationFrame(() => existing.remove());
+          existing.remove();
         }
       }
     });
   } else {
-    target.replaceChildren(...newChildren);
+    if (!target.hasAttribute("data-h")) {
+      const { diffAndHydrate } = createHydrationContext();
+      diffAndHydrate(target, content);
+      target.setAttribute("data-h", "");
+    } else {
+      target.replaceChildren(...newChildren);
+    }
   }
 
   return target;

package/client/types.d.ts

@@ -28,11 +28,11 @@ export const styleToString: (source: string | CSS.Properties) => string;
  * @param target the root element
  * @param content the element(s) to hydrate
  */
-export const hydrate: (
-  target: HTMLElement,
+export const hydrate: <T = HTMLElement>(
+  target: T,
   content:
     | HTMLElement
     | HTMLElement[]
     | JSX.Element
     | Promise<HTMLElement | HTMLElement[] | JSX.Element>,
-) => HTMLElement;
+) => T;

package/jsx/jsx.d.ts

@@ -752,6 +752,8 @@ declare namespace JSX {
     draggable?: FunctionMaybe<boolean>;
     hidden?: FunctionMaybe<boolean>;
     id?: FunctionMaybe<string>;
+    is?: FunctionMaybe<string>;
+    inert?: FunctionMaybe<boolean>;
     lang?: FunctionMaybe<string>;
     spellcheck?: FunctionMaybe<boolean>;
     style?: FunctionMaybe<CSSProperties | string>;

package/jsx/jsx.mjs

@@ -1,5 +1,5 @@
-import van from "../setup/van.mjs";
-import setup from "../setup/index.mjs";
+import van from "vanjs-core";
+import isServer from "../setup/isServer.mjs";
 import { setAttribute, styleToString } from "../client/index.mjs";
 
 export const jsx = (jsxTag, { children, ref, style, ...rest }) => {
@@ -17,7 +17,7 @@ export const jsx = (jsxTag, { children, ref, style, ...rest }) => {
         const styleProp = typeof style === "function" ? style() : style;
         const styleValue = styleToString(styleProp);
 
-        if (setup.isServer) {
+        if (isServer) {
           newElement.propsStr += ` style="${styleValue}"`;
         } else {
           newElement.style.cssText = styleValue;
@@ -26,7 +26,7 @@ export const jsx = (jsxTag, { children, ref, style, ...rest }) => {
     });
 
     // on server it's good enough to return here
-    if (setup.isServer) return newElement;
+    if (isServer) return newElement;
 
     // on the client, we sure do need to set the attributes
     for (const [k, value] of Object.entries(props)) {

package/meta/Head.mjs

@@ -1,4 +1,4 @@
-import setup from "../setup/index.mjs";
+import isServer from "../setup/isServer.mjs";
 import { getTagKey } from "./helpers.mjs";
 
 /** @typedef {typeof import("./types.d.ts").getHeadTags} GetTags */
@@ -20,7 +20,7 @@ const createHeadTags = () => new Map();
  * @type {GetTags}
  */
 const getHeadTags = (() => {
-  if (setup.isServer) {
+  if (isServer) {
     // On server, create one Map per request scope
     let serverHeadTags;
     return () => {
@@ -51,7 +51,7 @@ export const resetHeadTags = () => {
 export const initializeHeadTags = () => {
   const tags = getHeadTags();
   /* istanbul ignore else */
-  if (!tags.size && !setup.isServer) {
+  if (!tags.size && !isServer) {
     Array.from(document.head.children).forEach((tag) => {
       tags.set(getTagKey(tag), tag);
     });

package/meta/helpers.mjs

@@ -1,5 +1,4 @@
-import setup from "../setup/index.mjs";
-// import { getAttributes } from "@thednp/domparser/parser";
+import isServer from "../setup/isServer.mjs";
 
 /** @type {typeof import('./types.d.ts').parseAttributes} */
 export const parseAttributes = (attributeString) => {
@@ -33,7 +32,7 @@ const getTagAttribute = (tag) => {
   ];
 
   for (const attr of attributes) {
-    const value = setup.isServer ? tag[attr] : tag.getAttribute(attr);
+    const value = isServer ? tag[attr] : tag.getAttribute(attr);
 
     if (value) return value;
   }
@@ -42,9 +41,8 @@ const getTagAttribute = (tag) => {
 
 /** @type {typeof import('./types.d.ts').getTagKey} */
 export const getTagKey = (tag) => {
-  const normalizedTag = setup.isServer
+  const normalizedTag = isServer
     ? { tagName: tag.name.toUpperCase(), ...parseAttributes(tag.propsStr) }
-    // ? { tagName: tag.name.toUpperCase(), ...getAttributes(tag.propsStr) }
     : tag;
 
   return normalizedTag.tagName +

package/package.json

@@ -1,17 +1,17 @@
 {
   "name": "vite-plugin-vanjs",
-  "version": "0.0.9",
+  "version": "0.1.0",
   "author": "thednp",
   "license": "MIT",
   "description": "A mini meta-framework for VanJS powered by Vite",
   "repository": "https://github.com/thednp/vite-plugin-vanjs",
   "type": "module",
   "sideEffects": false,
-  "main": "./src/index.mjs",
-  "module": "./src/index.mjs",
-  "types": "./src/types.d.ts",
+  "main": "./plugin/index.mjs",
+  "module": "./plugin/index.mjs",
+  "types": "./plugin/types.d.ts",
   "files": [
-    "src",
+    "plugin",
     "setup",
     "router",
     "meta",
@@ -37,9 +37,9 @@
   ],
   "exports": {
     ".": {
-      "types": "./src/types.d.ts",
-      "import": "./src/index.mjs",
-      "default": "./src/index.mjs"
+      "types": "./plugin/types.d.ts",
+      "import": "./plugin/index.mjs",
+      "default": "./plugin/index.mjs"
     },
     "./setup": {
       "types": "./setup/types.d.ts",
@@ -87,27 +87,28 @@
     "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.15.2",
+    "@vitest/browser": "^3.1.2",
+    "@vitest/coverage-istanbul": "^3.1.2",
+    "@vitest/ui": "^3.1.2",
     "happy-dom": "^16.8.1",
     "typescript": "5.6.2",
-    "vite": "^6.2.2",
-    "vitest": "^3.0.9"
+    "vite": "^6.3.3",
+    "vitest": "^3.1.2"
   },
+  "packageManager": "pnpm@8.6.12",
   "engines": {
     "node": ">=20",
     "pnpm": ">=8.6.0"
   },
   "scripts": {
-    "test": "vitest --config vitest.config.mts",
-    "test-ui": "vitest --config vitest.config.mts --ui=true",
+    "test": "vitest --config vitest.config.ts",
+    "test-ui": "vitest --config vitest.config.ts --ui=true",
     "badges": "npx -p dependency-version-badge update-badge vanjs-core mini-van-plate typescript vitest vite",
-    "format": "deno fmt src meta router setup client server jsx",
+    "format": "deno fmt plugin meta router setup client server jsx",
     "lint": "pnpm lint:ts && pnpm check:ts",
-    "lint:ts": "deno lint src meta router setup client server jsx",
-    "fix:ts": "deno lint src meta router setup client server jsx --fix",
+    "lint:ts": "deno lint plugin meta router setup client server jsx",
+    "fix:ts": "deno lint plugin meta router setup client server jsx --fix",
     "check:ts": "tsc -noEmit"
   }
 }