Vite 7 [publish]

Author: ArnaudBarre

.vscode/settings.json

@@ -1,3 +1,6 @@
 {
-  "typescript.tsdk": "node_modules/typescript/lib"
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "terminal.integrated.env.osx": {
+    "PATH": "./node_modules/.bin:${env:PATH}"
+  }
 }

CHANGELOG.md

@@ -1,9 +1,13 @@
 # Changelog
 
+## 4.0.0
+
+- Align with Vite 7: ESM only, node 20.19+
+
 ## 3.1.1
 
 - Correctly display component using forwardRef
-- Fix menu position when div is taller than viewport
+- Fix menu position when the target is taller than viewport
 - Use dynamic z-index to always be on top of the targeted element (like MUI dialog) (fixes #9)
 
 ## 3.1.0

bun.lock

@@ -1,34 +1,37 @@
 {
   "name": "vite-plugin-react-click-to-component",
   "type": "module",
-  "version": "3.1.1",
+  "version": "4.0.0",
+  "private": true,
   "license": "MIT",
   "scripts": {
     "postinstall": "cd playground && bun i",
     "dev": "scripts/bundle.ts --dev",
     "build": "scripts/bundle.ts",
-    "tsc": "tsc",
+    "tsc": "tsl",
     "lint": "bun lint-ci --fix --cache",
     "lint-ci": "eslint --max-warnings 0",
     "prettier": "bun prettier-ci --write",
     "prettier-ci": "prettier --ignore-path=.gitignore --check '**/*.{ts,tsx,html,css,json,md,yml}'",
-    "ci": "tsc && bun run build && bun lint-ci && bun prettier-ci && cd playground && tsc && bun lint-ci && cd ../dist && bun publint"
+    "ci": "tsl && bun run build && bun lint-ci && bun prettier-ci && cd playground && tsc && bun lint-ci && cd ../dist && bun publint"
   },
   "prettier": {
     "trailingComma": "all"
   },
   "peerDependencies": {
     "react": "^18.3.1 || ^19.0.0",
-    "vite": "^4 || ^5 || ^6"
+    "vite": "^7"
   },
   "devDependencies": {
-    "@arnaud-barre/eslint-config": "^5.2.0",
-    "@arnaud-barre/tnode": "^0.24.0",
+    "@arnaud-barre/eslint-config": "6.0.0",
+    "@arnaud-barre/tsl-config": "^0.1.0",
+    "@arnaud-barre/tnode": "^0.25.0",
     "@types/node": "^20.17.8",
-    "eslint": "^9.15.0",
+    "eslint": "^9.29.0",
     "prettier": "3.0.3",
-    "publint": "^0.2.12",
-    "typescript": "~5.7.2",
-    "vite": "^6.0.0"
+    "publint": "^0.3.12",
+    "tsl": "^1.0.17",
+    "typescript": "~5.8.3",
+    "vite": "^7.0.0"
   }
 }

package.json

@@ -1,13 +1,13 @@
 import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react-swc";
-import { reactClickToComponent } from "../dist/index.mjs";
+import { reactClickToComponent } from "../dist/index.js";
 import restart from "vite-plugin-restart";
 
 export default defineConfig({
   plugins: [
     react(),
     reactClickToComponent(),
-    restart({ restart: ["../dist/client.js", "../dist/index.mjs"] }),
+    restart({ restart: ["../dist/client.js", "../dist/index.js"] }),
   ],
   server: { open: true },
 });

playground/vite.config.ts

@@ -10,7 +10,7 @@ const dev = process.argv.includes("--dev");
 rmSync("dist", { force: true, recursive: true });
 
 const buildOrWatch = async (options: BuildOptions) => {
-  if (!dev) return build(options);
+  if (!dev) return await build(options);
   const ctx = await context(options);
   await ctx.watch();
   await ctx.rebuild();
@@ -19,10 +19,10 @@ const buildOrWatch = async (options: BuildOptions) => {
 await Promise.all([
   buildOrWatch({
     bundle: true,
-    entryPoints: ["src/index.mts"],
-    outfile: "dist/index.mjs",
+    entryPoints: ["src/index.ts"],
+    outfile: "dist/index.js",
     platform: "node",
-    target: "node18",
+    target: "node20",
     format: "esm",
     legalComments: "inline",
     external: Object.keys(packageJSON.peerDependencies),
@@ -33,14 +33,14 @@ await Promise.all([
     outfile: "dist/client.js",
     platform: "browser",
     format: "esm",
-    target: "safari14",
+    target: "safari16",
     legalComments: "inline",
   }),
 ]).then(() => {
-  execSync("cp LICENSE README.md src/index.cjs dist/");
+  execSync("cp LICENSE README.md dist/");
 
   writeFileSync(
-    "dist/index.d.mts",
+    "dist/index.d.ts",
     `import { PluginOption } from "vite";
 export declare const reactClickToComponent: () => PluginOption;
 `,
@@ -58,15 +58,8 @@ export declare const reactClickToComponent: () => PluginOption;
         license: packageJSON.license,
         repository: "github:ArnaudBarre/vite-plugin-react-click-to-component",
         type: "module",
-        main: "index.cjs",
-        types: "index.d.mts",
-        module: "index.mjs",
         exports: {
-          ".": {
-            types: "./index.d.mts",
-            require: "./index.cjs",
-            import: "./index.mjs",
-          },
+          ".": "./index.js",
         },
         keywords: [
           "vite",

scripts/bundle.ts

@@ -208,6 +208,7 @@ const getReactInstanceForElement = (element: Element): Fiber | undefined => {
     for (const renderer of renderers.values()) {
       try {
         const fiber = renderer.findFiberByHostInstance(element);
+        // tsl-ignore core/strictBooleanExpressions
         if (fiber) return fiber;
       } catch {
         // If React is mid-render, references to previous nodes may disappear during the click events

src/client.ts

@@ -1,6 +1,5 @@
 import { readFileSync } from "node:fs";
-import { join, dirname } from "node:path";
-import { fileURLToPath } from "node:url";
+import { join } from "node:path";
 import type { PluginOption } from "vite";
 
 let root = "";
@@ -16,7 +15,7 @@ export const reactClickToComponent = (): PluginOption => ({
       tag: "script",
       attrs: { type: "module" },
       children: readFileSync(
-        join(dirname(fileURLToPath(import.meta.url)), "client.js"),
+        join(import.meta.dirname, "client.js"),
         "utf-8",
       ).replace("__ROOT__", root),
     },

src/index.cjs

@@ -1,26 +1,30 @@
 {
   "include": ["src", "scripts"],
   "compilerOptions": {
-    /* Target node 18 / Safari 14 */
-    "target": "ES2021",
-    "jsx": "react-jsx",
+    /* Target node 20 / Safari 16 */
+    "target": "ES2022",
     "module": "ESNext",
-    "lib": ["ES2021", "DOM", "DOM.Iterable"],
+    "moduleDetection": "force",
+    "lib": ["ES2023", "DOM", "DOM.Iterable"],
+    "types": ["node", "tsl/patches"],
+    "skipLibCheck": true,
 
     /* Bundler mode */
     "moduleResolution": "bundler",
     "allowImportingTsExtensions": true,
     "verbatimModuleSyntax": true,
+    "erasableSyntaxOnly": true,
     "noEmit": true,
 
     /* Linting */
-    "skipLibCheck": true,
     "strict": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true,
     "useUnknownInCatchVariables": true,
     "noUncheckedSideEffectImports": true,
-    "noPropertyAccessFromIndexSignature": true
+    "noPropertyAccessFromIndexSignature": true,
+
+    "plugins": [{ "name": "tsl/plugin" }]
   }
 }