vite-plugin-vanjs 0.0.1 → 0.0.3

package/README.md

@@ -5,15 +5,14 @@
 [![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.2-brightgreen)](https://github.com/vanjs-org/van)
 [![mini-van-plate version](https://img.shields.io/badge/mini--van--plate-0.6.1-brightgreen)](https://github.com/vanjs-org/mini-van-plate)
-[![vite version](https://img.shields.io/badge/vite-6.0.5-brightgreen)](https://github.com/vitejs)
+[![vite version](https://img.shields.io/badge/vite-6.0.6-brightgreen)](https://github.com/vitejs)
 
-A Vite plugin for VanJS to enable JSX transformation and simplify application development.
+A Vite plugin for VanJS to enable JSX transformation and simplify application development and enables you to create SSR applications or SSG (static) pages. It 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.
 
-This plugin uses and requires the `mini-van-plate` package in order to register the Van and VanX objects in an isomorphic server/client enviroment. If you're planning to do SSR apps, the `van-ext` is also required.
+The plugin uses `van-ext` along with `mini-van-plate` so you can have everything ready from start. It also enables JSX transformation with minimal setup so you can write your code faster.
 
-The recommended templates for you to use are the [vite-starter-vanjs-ssr](https://github.com/thednp/vite-starter-vanjs-ssr) and [vite-starter-vanjs-ssr-jsx](https://github.com/thednp/vite-starter-vanjs-ssr-jsx) which already feature this plugin.
+The recommended starter templates for you are the [vite-starter-vanjs-ssr](https://github.com/thednp/vite-starter-vanjs-ssr) and [vite-starter-vanjs-ssr-jsx](https://github.com/thednp/vite-starter-vanjs-ssr-jsx) which already include this plugin.
 
-If you don't need an SSR/SSG application, you simply make use of the JSX transformation capability.
 
 ### Install
 
@@ -55,7 +54,7 @@ export default defineConfig({
 
 **Example**:
 
-For your convenience and for your SSR applications/extensions expecially, you need to import from `@vanjs/van` virtual module, so **vite-plugin-vanjs** makes sure to load the right modules where needed.
+While the plugin will resolve the appropriate modules 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
@@ -84,7 +83,7 @@ const MyList = () => {
     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: TodoClickEvent) => v.done = e.target.checked}),
+      input({type: "checkbox", checked: () => v.done, onclick: (e) => v.done = e.target.checked}),
       () => (v.done ? del : span)(v.text),
       button({ onclick: deleter }, "Remove"),
     )),
@@ -100,7 +99,6 @@ To enable JSX transformation, you have to edit your `tsconfig.json` as follows:
 ```json
 {
   "compilerOptions": {
-    /* {... your other compiler options } */
     "jsx": "preserve",
     "jsxImportSource": "@vanjs/jsx"
   }
@@ -129,8 +127,8 @@ van.add(document.getElementById("app")!, <App /> as ChildDom);
 * in some 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` instead of `className`, `for` instead of `htmlFor`;
 * you can use style as both an object and a string;
-* for a JSX started template, check out the [vite-starter-vanjs-ssr-jsx](https://github.com/thednp/vite-starter-vanjs-ssr-jsx).
-* for a pure started template, check out the [vite-starter-vanjs-ssr](https://github.com/thednp/vite-starter-vanjs-ssr).
+* 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).
 
 
 
@@ -142,4 +140,4 @@ van.add(document.getElementById("app")!, <App /> as ChildDom);
 
 
 ### License
-Released under [MIT](LICENSE).
+Released under [MIT](LICENSE).

package/jsx/fragment.d.ts

@@ -1,4 +1,3 @@
-import type { ChildDom } from "vanjs-core";
 import type { JSX } from "./jsx";
 
 export type FragmentProps = {

package/jsx/jsx.mjs

@@ -1,5 +1,5 @@
 import van from "@vanjs/van";
-import setup from "@vanjs/van";
+import setup from "@vanjs/setup";
 import { setAttribute, styleToString } from "./utils.mjs";
 
 export const jsx = (jsxTag, { children, ref, style, ...props }) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vite-plugin-vanjs",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "author": "thednp",
   "license": "MIT",
   "description": "A Vite plugin for VanJS to enable JSX transformation and simplify aplication development.",
@@ -67,7 +67,7 @@
   },
   "devDependencies": {
     "typescript": "5.6.2",
-    "vite": "^6.0.5"
+    "vite": "^6.0.6"
   },
   "scripts": {
     "badges": "npx -p dependency-version-badge update-badge vanjs-core mini-van-plate typescript vite",

package/setup/global.d.ts

@@ -5,19 +5,48 @@ declare module "@vanjs/van" {
 }
 
 declare module "@vanjs/vanX" {
-  import * as VanX from "vanjs-ext";
-  const vanX: typeof VanX;
+  import {
+    calc,
+    compact,
+    list,
+    noreactive,
+    raw,
+    reactive,
+    replace,
+    stateFields,
+  } from "vanjs-ext";
+  const vanX: {
+    calc: typeof calc;
+    reactive: typeof reactive;
+    noreactive: typeof noreactive;
+    stateFields: typeof stateFields;
+    raw: typeof raw;
+    list: typeof list;
+    replace: typeof replace;
+    compact: typeof compact;
+  };
   export default vanX;
+  export {
+    calc,
+    compact,
+    list,
+    noreactive,
+    raw,
+    reactive,
+    replace,
+    stateFields,
+  };
 }
 
 declare module "@vanjs/setup" {
   import type { Van } from "vanjs-core";
-  import * as VanX from "vanjs-ext";
+  import type * as vanX from "vanjs-ext";
+  import type { dummyVanX } from "mini-van-plate/shared";
 
   interface Setup {
     isServer: boolean;
     van: Van;
-    vanX: typeof VanX;
+    vanX: typeof vanX | typeof dummyVanX;
   }
   const setup: Setup;
   export default setup;

package/setup/index.mjs

@@ -3,13 +3,16 @@ import vanPlate from "mini-van-plate/van-plate";
 import vanCore from "vanjs-core";
 import * as vanX from "vanjs-ext";
 
+const vanXObject = { ...vanX, default: vanX };
+const dummyObject = { ...dummyVanX, default: dummyVanX };
+
 const setup = {
   isServer: typeof window === "undefined",
   get van() {
     return this.isServer ? vanPlate : vanCore;
   },
   get vanX() {
-    return this.isServer ? dummyVanX : vanX;
+    return this.isServer ? dummyObject : vanXObject;
   },
 };
 

package/setup/vanX.mjs

@@ -1,2 +1,14 @@
 import setup from "./index.mjs";
-export default setup.vanX;
+const vanX = setup.vanX;
+
+export const {
+  calc,
+  reactive,
+  noreactive,
+  stateFields,
+  raw,
+  list,
+  replace,
+  compact,
+} = "default" in vanX ? vanX.default : vanX;
+export default vanX;

package/src/index.mjs

@@ -10,6 +10,12 @@ export default function VitePluginVanJS() {
     enforce: "pre",
     config() {
       return {
+        build: {
+          optimizeDeps: {
+            include: ["vanjs-core", "vanjs-ext", "mini-van-plate"],
+          },
+          dedupe: ["vanjs-core", "vanjs-ext", "mini-van-plate"],
+        },
         resolve: {
           alias: {
             "@vanjs/jsx": resolve(__dirname, "../jsx"),
@@ -18,9 +24,6 @@ export default function VitePluginVanJS() {
             "@vanjs/vanX": resolve(__dirname, "../setup/vanX"),
           },
         },
-        optimizeDeps: {
-          include: ["vanjs-core", "mini-van-plate", "vanjs-ext"],
-        },
         esbuild: {
           jsx: "automatic",
           jsxFactory: "jsx",
@@ -28,5 +31,33 @@ export default function VitePluginVanJS() {
         },
       };
     },
+    transform(code, id) {
+      let newCode = code;
+
+      const vanCoreReg = /import\s*.*\s*from\s*['"]vanjs-core['"]/g;
+      const vanExtReg = /import\s*.*\s*from\s*['"]vanjs-ext['"]/g;
+      const isSetupFile = /vite-plugin-vanjs[\\/]setup/.test(id);
+      const isVanXFile = /vanjs-ext[\\/]src[\\/]van-x/.test(id);
+
+      if (!isSetupFile && !isVanXFile) {
+        if (vanCoreReg.test(newCode)) {
+          newCode = newCode.replace(
+            vanCoreReg,
+            (match) => match.replace("vanjs-core", "@vanjs/van"),
+          );
+        }
+        if (vanExtReg.test(newCode)) {
+          newCode = newCode.replace(
+            vanExtReg,
+            (match) => match.replace("vanjs-ext", "@vanjs/vanX"),
+          );
+        }
+      }
+
+      return {
+        code: newCode,
+        map: null,
+      };
+    },
   };
 }

package/tsconfig.json

@@ -28,6 +28,6 @@
     "jsx": "preserve",
     "jsxImportSource": "vite-plugin-vanjs",
   },
-  "include": ["./src/**/*", "./jsx/**/*.d.ts", "setup/**/*"],
+  "include": ["./src/**/*.ts", "./jsx/*.d.ts", "setup/**/*"],
   "exclude": ["node_modules", "experiments", "coverage"],
 }