vite-plugin-vanjs 0.0.1

package/jsx/jsx.mjs

@@ -0,0 +1,46 @@
+import van from "@vanjs/van";
+import setup from "@vanjs/van";
+import { setAttribute, styleToString } from "./utils.mjs";
+
+export const jsx = (jsxTag, { children, ref, style, ...props }) => {
+  if (typeof jsxTag === "string") {
+    const newElement = van.tags[jsxTag](props, children);
+
+    // on server it's good enough to return here
+    if (setup.isServer) return newElement;
+
+    // on the client, we sure do need to set the attributes
+    for (const [k, value] of Object.entries(props)) {
+      if (typeof value === "function" && !k.startsWith("on")) {
+        van.derive(() => setAttribute(newElement, k, value()));
+        continue;
+      }
+
+      if (typeof value === "function" && k.startsWith("on")) {
+        newElement.addEventListener(k.slice(2).toLowerCase(), value);
+        continue;
+      }
+
+      if (typeof value === "object" && "val" in value) {
+        van.derive(() => setAttribute(newElement, k, value.val));
+        continue;
+      }
+
+      setAttribute(newElement, k, value);
+    }
+    if (style) {
+      if (typeof style === "function") {
+        van.derive(() => newElement.style.cssText = styleToString(style()));
+      } else {
+        newElement.style.cssText = styleToString(style);
+      }
+    }
+
+    if (ref) ref.val = newElement;
+    return newElement;
+  }
+
+  return typeof jsxTag === "function"
+    ? jsxTag({ children, ref, style, ...props })
+    : null;
+};

package/jsx/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "jsx",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./index.d.ts",
+      "import": "./index.mjs"
+    },
+    "./jsx-runtime": {
+      "types": "./jsx-runtime.d.ts",
+      "import": "./jsx-runtime.mjs"
+    },
+    "./jsx-dev-runtime": {
+      "types": "./jsx-dev-runtime.d.ts",
+      "import": "./jsx-dev-runtime.mjs"
+    }
+  },
+  "peerDependencies": {
+    "vite-plugin-vanjs": "*",
+    "csstype": "*",
+    "mini-van-plate": "*",
+    "vanjs-core": "*",
+    "vanjs-ext": "*"
+  },
+  "sideEffects": false
+}

package/jsx/utils.mjs

@@ -0,0 +1,24 @@
+export const setAttribute = (element, key, value) => {
+  if (value == null || value === false || value === "") {
+    element.removeAttribute(key);
+  } else {
+    const attr = value === true ? "" : String(value);
+    element.setAttribute(key, attr);
+  }
+};
+
+export const styleToString = (style) => {
+  return typeof style === "string"
+    ? style
+    : typeof style === "object"
+    ? Object.entries(style).reduce((acc, key) =>
+      acc +
+      key[0]
+        .split(/(?=[A-Z])/)
+        .join("-")
+        .toLowerCase() +
+      ":" +
+      key[1] +
+      ";", "")
+    : "";
+};

package/jsx-dev-runtime.d.ts

@@ -0,0 +1 @@
+export * from "./jsx/jsx-dev-runtime";

package/jsx-runtime.d.ts

@@ -0,0 +1 @@
+export * from "./jsx/jsx-runtime";

package/package.json

@@ -0,0 +1,80 @@
+{
+  "name": "vite-plugin-vanjs",
+  "version": "0.0.1",
+  "author": "thednp",
+  "license": "MIT",
+  "description": "A Vite plugin for VanJS to enable JSX transformation and simplify aplication development.",
+  "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",
+  "files": [
+    "src",
+    "setup",
+    "jsx",
+    "tsconfig.json",
+    "package.json",
+    "jsx-runtime.d.ts",
+    "jsx-dev-runtime.d.ts",
+    "README.md",
+    "LICENSE"
+  ],
+  "keywords": [
+    "vanjs",
+    "vite",
+    "plugin",
+    "ssr",
+    "ssg",
+    "jsx"
+  ],
+  "exports": {
+    ".": {
+      "types": "./src/types.d.ts",
+      "import": "./src/index.mjs",
+      "default": "./src/index.mjs"
+    },
+    "./setup": {
+      "types": "./setup/index.d.ts",
+      "import": "./setup/index.mjs",
+      "require": "./setup/index.cjs"
+    },
+    "./jsx": {
+      "types": "./jsx/index.d.ts",
+      "import": "./jsx/index.mjs"
+    },
+    "./jsx-runtime": {
+      "types": "./jsx/jsx-runtime.d.ts",
+      "import": "./jsx/jsx-runtime.mjs"
+    },
+    "./jsx-dev-runtime": {
+      "types": "./jsx/jsx-dev-runtime.d.ts",
+      "import": "./jsx/jsx-dev-runtime.mjs"
+    }
+  },
+  "peerDependencies": {
+    "csstype": "*",
+    "mini-van-plate": "*",
+    "vanjs-core": "*",
+    "vanjs-ext": "*"
+  },
+  "dependencies": {
+    "csstype": "^3.1.3",
+    "mini-van-plate": "^0.6.1",
+    "vanjs-core": "^1.5.2",
+    "vanjs-ext": "^0.6.2"
+  },
+  "devDependencies": {
+    "typescript": "5.6.2",
+    "vite": "^6.0.5"
+  },
+  "scripts": {
+    "badges": "npx -p dependency-version-badge update-badge vanjs-core mini-van-plate typescript vite",
+    "format": "deno fmt src setup jsx",
+    "lint": "pnpm lint:ts && pnpm check:ts",
+    "lint:ts": "deno lint src",
+    "fix:ts": "deno lint src --fix",
+    "check:ts": "tsc -noEmit"
+  }
+}

package/setup/global.d.ts

@@ -0,0 +1,24 @@
+declare module "@vanjs/van" {
+  import type { Van } from "vanjs-core";
+  const van: Van;
+  export default van;
+}
+
+declare module "@vanjs/vanX" {
+  import * as VanX from "vanjs-ext";
+  const vanX: typeof VanX;
+  export default vanX;
+}
+
+declare module "@vanjs/setup" {
+  import type { Van } from "vanjs-core";
+  import * as VanX from "vanjs-ext";
+
+  interface Setup {
+    isServer: boolean;
+    van: Van;
+    vanX: typeof VanX;
+  }
+  const setup: Setup;
+  export default setup;
+}

package/setup/index.d.ts

@@ -0,0 +1,14 @@
+/// <reference path="global.d.ts" />
+
+import { dummyVanX } from "mini-van-plate/shared";
+import vanPlate from "mini-van-plate/van-plate";
+import vanCore from "vanjs-core";
+import * as vanX from "vanjs-ext";
+
+type VansSetup = {
+  isServer: boolean;
+  van: typeof vanPlate & typeof vanCore;
+  vanX: typeof dummyVanX | typeof vanX;
+};
+
+export default VansSetup;

package/setup/index.mjs

@@ -0,0 +1,18 @@
+import { dummyVanX, registerEnv } from "mini-van-plate/shared";
+import vanPlate from "mini-van-plate/van-plate";
+import vanCore from "vanjs-core";
+import * as vanX from "vanjs-ext";
+
+const setup = {
+  isServer: typeof window === "undefined",
+  get van() {
+    return this.isServer ? vanPlate : vanCore;
+  },
+  get vanX() {
+    return this.isServer ? dummyVanX : vanX;
+  },
+};
+
+registerEnv(setup);
+
+export default setup;

package/setup/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "setup",
+  "main": "./index.mjs",
+  "module": "./index.mjs",
+  "types": "./index.d.ts",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./index.d.ts",
+      "import": "./index.mjs"
+    },
+    "./van": {
+      "types": "./van.d.ts",
+      "import": "./van.mjs"
+    },
+    "./vanX": {
+      "types": "./vanX.d.ts",
+      "import": "./vanX.mjs"
+    }
+  },
+  "peerDependencies": {
+    "vite-plugin-vanjs": "*",
+    "csstype": "*",
+    "mini-van-plate": "*",
+    "vanjs-core": "*",
+    "vanjs-ext": "*"
+  },
+  "sideEffects": false
+}

package/setup/van.mjs

@@ -0,0 +1,2 @@
+import setup from "./index.mjs";
+export default setup.van;

package/setup/vanX.mjs

@@ -0,0 +1,2 @@
+import setup from "./index.mjs";
+export default setup.vanX;

package/src/index.mjs

@@ -0,0 +1,32 @@
+import { fileURLToPath } from "node:url";
+import { dirname, resolve } from "node:path";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+export default function VitePluginVanJS() {
+  return {
+    name: "vanjs",
+    enforce: "pre",
+    config() {
+      return {
+        resolve: {
+          alias: {
+            "@vanjs/jsx": resolve(__dirname, "../jsx"),
+            "@vanjs/setup": resolve(__dirname, "../setup"),
+            "@vanjs/van": resolve(__dirname, "../setup/van"),
+            "@vanjs/vanX": resolve(__dirname, "../setup/vanX"),
+          },
+        },
+        optimizeDeps: {
+          include: ["vanjs-core", "mini-van-plate", "vanjs-ext"],
+        },
+        esbuild: {
+          jsx: "automatic",
+          jsxFactory: "jsx",
+          jsxFragment: "Fragment",
+        },
+      };
+    },
+  };
+}

package/src/types.d.ts

@@ -0,0 +1,4 @@
+import type { Plugin } from "vite";
+export * from "../jsx";
+export * from "../setup";
+export default function VitePluginVanJS(): Plugin;

package/tsconfig.json

@@ -0,0 +1,33 @@
+{
+   // https://janessagarrow.com/blog/typescript-and-esbuild/
+  "compilerOptions": {
+    "lib": ["DOM", "ESNext", "DOM.Iterable"],
+    "rootDir": "./",
+    "baseUrl": "./",
+    "module": "ESNext",
+    "target": "ESNext",
+    "moduleResolution": "Bundler",
+    "allowJs": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolvePackageJsonImports": true,
+    "useDefineForClassFields": true,
+    "strict": true,
+    "sourceMap": true,
+    "resolveJsonModule": true,
+    "esModuleInterop": true,
+    "isolatedModules": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noImplicitReturns": true,
+    "removeComments": false,
+    "allowSyntheticDefaultImports": true,
+    "allowImportingTsExtensions": true,
+    "skipLibCheck": true,
+    "noEmit": true,
+    "checkJs": true,
+    "jsx": "preserve",
+    "jsxImportSource": "vite-plugin-vanjs",
+  },
+  "include": ["./src/**/*", "./jsx/**/*.d.ts", "setup/**/*"],
+  "exclude": ["node_modules", "experiments", "coverage"],
+}