Add plugin to fix fast refresh with vite 7

Author: fhammerschmidt

package-lock.json

@@ -6,7 +6,7 @@
   "scripts": {
     "start": "node src/Main.res.mjs",
     "prepack": "rescript && rollup -c",
-    "test": "rescript && node --test test/*Test.res.mjs",
+    "test": "rescript && node --test test/*Test.res.mjs test/templates/*/*Test.res.mjs",
     "format": "rescript format",
     "dev": "rescript -w"
   },
@@ -42,6 +42,7 @@
     "@rollup/plugin-node-resolve": "^16.0.3",
     "@rollup/plugin-terser": "^0.4.4",
     "compare-versions": "^6.1.0",
+    "prettier": "^3.8.3",
     "rescript": "^12.0.0",
     "rollup": "^4.53.3"
   }

package.json

@@ -5,6 +5,10 @@
       "dir": "src",
       "subdirs": true
     },
+    {
+      "dir": "src-fast-refresh-plugin",
+      "subdirs": true
+    },
     {
       "dir": "test",
       "subdirs": true,

rescript.json

@@ -1,13 +1,48 @@
 import { nodeResolve } from "@rollup/plugin-node-resolve";
 import commonjs from "@rollup/plugin-commonjs";
 import terser from "@rollup/plugin-terser";
+import prettier from "prettier";
 
-export default {
-  input: `src/Main.res.mjs`,
-  output: {
-    file: `out/create-rescript-app.cjs`,
-    format: "cjs",
-    banner: "#!/usr/bin/env node",
+function formatViteTemplateConfig() {
+  return {
+    name: "format-vite-template-config",
+    async renderChunk(code, chunk) {
+      if (chunk.fileName !== "vite.config.js") {
+        return null;
+      }
+
+      let formatted = code
+        .replace(/\/\/ Generated by ReScript, PLEASE EDIT WITH CARE\n\s*/g, "")
+        .replace(/\n\/\* No side effect \*\/\n/g, "\n")
+        .replace(/\nvar ViteConfig = defineConfig\(/, "\nexport default defineConfig(")
+        .replace(/\n\nexport \{ ViteConfig as default \};\s*$/, "\n")
+        .replace(/from '([^']+)';/g, 'from "$1";');
+
+      return await prettier.format(formatted, {
+        parser: "babel",
+        printWidth: 100,
+      });
+    },
+  };
+}
+
+export default [
+  {
+    input: `src/Main.res.mjs`,
+    output: {
+      file: `out/create-rescript-app.cjs`,
+      format: "cjs",
+      banner: "#!/usr/bin/env node",
+    },
+    plugins: [terser(), nodeResolve({ preferBuiltins: true }), commonjs()],
+  },
+  {
+    input: `src-fast-refresh-plugin/ViteConfig.mjs`,
+    output: {
+      file: `templates/rescript-template-vite/vite.config.js`,
+      format: "esm",
+    },
+    external: ["vite", "@vitejs/plugin-react", "@tailwindcss/vite"],
+    plugins: [nodeResolve(), commonjs(), formatViteTemplateConfig()],
   },
-  plugins: [terser(), nodeResolve({ preferBuiltins: true }), commonjs()],
-};
+];

rollup.config.mjs

@@ -0,0 +1,111 @@
+// This module is bundled into the Vite template config, so keep the generated JavaScript
+// as close to runtime-free as practical.
+type transformResult = {
+  code: string,
+  map: Null.t<unit>,
+}
+
+type hotUpdateContext = {
+  file: string,
+  read: unit => promise<string>,
+}
+
+type plugin = {
+  name: string,
+  enforce: string,
+  handleHotUpdate: hotUpdateContext => promise<Nullable.t<array<string>>>,
+  transform: (string, string) => Nullable.t<transformResult>,
+}
+
+module JsArray = {
+  @get external length: array<'a> => int = "length"
+  @get_index external unsafeGet: (array<'a>, int) => 'a = ""
+  @send external filter: (array<'a>, 'a => bool) => array<'a> = "filter"
+  @send external map: (array<'a>, 'a => 'b) => array<'b> = "map"
+  @send external join: (array<string>, string) => string = "join"
+}
+
+@send external splitByRegExp: (string, RegExp.t) => array<string> = "split"
+
+let rescriptReactFastRefresh = () => {
+  let previousCode = Dict.make()
+
+  let componentName = id => {
+    let pathParts = id->String.split("/")
+
+    if pathParts->JsArray.length === 0 {
+      Nullable.undefined
+    } else {
+      let fileName = pathParts->JsArray.unsafeGet(pathParts->JsArray.length - 1)
+      let fileName = fileName->String.replaceRegExp(/\.res\.mjs$/, "")
+
+      if fileName->String.length === 0 {
+        Nullable.undefined
+      } else {
+        let name =
+          fileName
+          ->splitByRegExp(/[^A-Za-z0-9_$]+/)
+          ->JsArray.filter(part => part->String.length > 0)
+          ->JsArray.map(part =>
+            part->String.charAt(0)->String.toUpperCase ++ part->String.slice(~start=1)
+          )
+          ->JsArray.join("")
+
+        Nullable.make(/^[A-Za-z_$]/->RegExp.test(name) ? name : `ReScript${name}`)
+      }
+    }
+  }
+
+  {
+    name: "rescript-react-fast-refresh",
+    enforce: "pre",
+    handleHotUpdate: async ({file, read}) => {
+      if file->String.endsWith(".res") || file->String.endsWith(".resi") {
+        Nullable.make([])
+      } else if !(file->String.endsWith(".res.mjs")) {
+        Nullable.undefined
+      } else {
+        let code = await read()
+        let previous = previousCode->Dict.get(file)
+        previousCode->Dict.set(file, code)
+
+        switch previous {
+        | Some(previous) if previous === code => Nullable.make([])
+        | _ => Nullable.undefined
+        }
+      }
+    },
+    transform: (code, id) => {
+      let idParts = id->String.split("?")
+      let file = idParts->JsArray.unsafeGet(0)
+
+      if !(file->String.endsWith(".res.mjs")) {
+        Nullable.undefined
+      } else {
+        previousCode->Dict.set(file, code)
+
+        if (
+          !(
+            code->String.includes("react/jsx-runtime") &&
+            !(code->String.includes("react-dom/client")) &&
+            /\bfunction\s+make\s*\(/->RegExp.test(code) &&
+            /\bexport\s*\{[\s\S]*\bmake\b[\s\S]*\}/m->RegExp.test(code)
+          )
+        ) {
+          Nullable.undefined
+        } else {
+          switch componentName(file) {
+          | Null | Undefined | Value("Main") => Nullable.undefined
+          | Value(name) =>
+            Nullable.make({
+              code: code
+              ->String.replaceRegExp(/\bfunction\s+make\s*\(/, `function ${name}(`)
+              ->String.replaceRegExp(/\nexport\s*\{/, `\nlet make = ${name};\n\nexport {`),
+              map: Null.null,
+            })
+          }
+        }
+      }
+    },
+  }
+}

src-fast-refresh-plugin/RescriptReactFastRefresh.res

@@ -0,0 +1,18 @@
+type transformResult = {
+  code: string,
+  map: Null.t<unit>,
+}
+
+type hotUpdateContext = {
+  file: string,
+  read: unit => promise<string>,
+}
+
+type plugin = {
+  name: string,
+  enforce: string,
+  handleHotUpdate: hotUpdateContext => promise<Nullable.t<array<string>>>,
+  transform: (string, string) => Nullable.t<transformResult>,
+}
+
+let rescriptReactFastRefresh: unit => plugin

src-fast-refresh-plugin/RescriptReactFastRefresh.resi

@@ -0,0 +1,21 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import tailwindcss from "@tailwindcss/vite";
+import { rescriptReactFastRefresh } from "./RescriptReactFastRefresh.res.mjs";
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [
+    tailwindcss(),
+    rescriptReactFastRefresh(),
+    react({
+      include: ["**/*.res.mjs"],
+    }),
+  ],
+  server: {
+    watch: {
+      // We ignore ReScript build artifacts to avoid unnecessarily triggering HMR on incremental compilation
+      ignored: ["**/lib/bs/**", "**/lib/ocaml/**", "**/lib/rescript.lock"],
+    },
+  },
+});

src-fast-refresh-plugin/ViteConfig.mjs

@@ -77,6 +77,9 @@ module Test = {
 
   @module("node:test")
   external test: (string, unit => unit) => unit = "test"
+
+  @module("node:test")
+  external testAsync: (string, unit => promise<unit>) => unit = "test"
 }
 
 module Url = {

src/bindings/Node.res

@@ -2,10 +2,84 @@ import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react";
 import tailwindcss from "@tailwindcss/vite";
 
+function rescriptReactFastRefresh() {
+  let previousCode = {};
+  let componentName = (id) => {
+    let pathParts = id.split("/");
+    if (pathParts.length === 0) {
+      return;
+    }
+    let fileName = pathParts[(pathParts.length - 1) | 0];
+    let fileName$1 = fileName.replace(/\.res\.mjs$/, "");
+    if (fileName$1.length === 0) {
+      return;
+    }
+    let name = fileName$1
+      .split(/[^A-Za-z0-9_$]+/)
+      .filter((part) => part.length > 0)
+      .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
+      .join("");
+    if (/^[A-Za-z_$]/.test(name)) {
+      return name;
+    } else {
+      return `ReScript` + name;
+    }
+  };
+  return {
+    name: "rescript-react-fast-refresh",
+    enforce: "pre",
+    handleHotUpdate: async (param) => {
+      let file = param.file;
+      if (file.endsWith(".res") || file.endsWith(".resi")) {
+        return [];
+      }
+      if (!file.endsWith(".res.mjs")) {
+        return;
+      }
+      let code = await param.read();
+      let previous = previousCode[file];
+      previousCode[file] = code;
+      if (previous !== undefined && previous === code) {
+        return [];
+      }
+    },
+    transform: (code, id) => {
+      let idParts = id.split("?");
+      let file = idParts[0];
+      if (!file.endsWith(".res.mjs")) {
+        return;
+      }
+      previousCode[file] = code;
+      if (
+        !(
+          code.includes("react/jsx-runtime") &&
+          !code.includes("react-dom/client") &&
+          /\bfunction\s+make\s*\(/.test(code) &&
+          /\bexport\s*\{[\s\S]*\bmake\b[\s\S]*\}/m.test(code)
+        )
+      ) {
+        return;
+      }
+      let name = componentName(file);
+      if (name == null || name === "Main") {
+        return;
+      } else {
+        return {
+          code: code
+            .replace(/\bfunction\s+make\s*\(/, `function ` + name + `(`)
+            .replace(/\nexport\s*\{/, `\nlet make = ` + name + `;\n\nexport {`),
+          map: null,
+        };
+      }
+    },
+  };
+}
+
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [
     tailwindcss(),
+    rescriptReactFastRefresh(),
     react({
       include: ["**/*.res.mjs"],
     }),