Use JSX preserve mode to support fast refresh

Author: fhammerschmidt

package-lock.json

@@ -41,8 +41,10 @@
     "@rollup/plugin-commonjs": "^29.0.0",
     "@rollup/plugin-node-resolve": "^16.0.3",
     "@rollup/plugin-terser": "^0.4.4",
+    "@vitejs/plugin-react": "^5.0.2",
     "compare-versions": "^6.1.0",
     "rescript": "^12.0.0",
-    "rollup": "^4.53.3"
+    "rollup": "^4.53.3",
+    "vite": "^7.1.0"
   }
 }

package.json

@@ -61,7 +61,9 @@ let getModuleSystemOptions = () => [
 ]
 
 let addToExistingProject = async (~projectName) => {
-  let versions = await RescriptVersions.promptVersions()
+  let versions = await RescriptVersions.promptVersions(
+    ~versionRange=RescriptVersions.rescriptVersionRange,
+  )
 
   let sourceDir = await P.text({
     message: "Where will you put your ReScript source files?",

src/ExistingJsProject.res

@@ -146,9 +146,11 @@ let createNewProject = async () => {
       })->P.resultOrRaise
     }
 
+    let versionRange = Templates.getRescriptVersionRange(templateName)
+
     let versions = useDefaultVersions
-      ? await RescriptVersions.getDefaultVersions()
-      : await RescriptVersions.promptVersions()
+      ? await RescriptVersions.getDefaultVersions(~versionRange)
+      : await RescriptVersions.promptVersions(~versionRange)
 
     await createProject(~templateName, ~projectName, ~versions)
   }

src/NewProject.res

@@ -3,6 +3,7 @@ open Node
 module P = ClackPrompts
 
 let rescriptVersionRange = `11.1.4 || 12.x.x`
+let jsxPreserveVersionRange = `12.x.x`
 let finalRescriptCoreVersion = "1.6.1"
 let includesRewatchVersionRange = ">=12.0.0-alpha.15"
 let includesStdlibVersionRange = ">=12.0.0-beta.1"
@@ -18,15 +19,12 @@ let makeVersions = rescriptVersion => {
   {rescriptVersion, rescriptCoreVersion}
 }
 
-let getDefaultVersions = async () => {
+let getDefaultVersions = async (~versionRange) => {
   let s = P.spinner()
 
   s->P.Spinner.start(spinnerMessage)
 
-  let rescriptVersionsResult = await NpmRegistry.getPackageVersions(
-    "rescript",
-    rescriptVersionRange,
-  )
+  let rescriptVersionsResult = await NpmRegistry.getPackageVersions("rescript", versionRange)
 
   switch rescriptVersionsResult {
   | Ok(_) => s->P.Spinner.stop("Versions loaded.")
@@ -47,15 +45,12 @@ let getDefaultVersions = async () => {
   makeVersions(rescriptVersion)
 }
 
-let promptVersions = async () => {
+let promptVersions = async (~versionRange) => {
   let s = P.spinner()
 
   s->P.Spinner.start(spinnerMessage)
 
-  let rescriptVersionsResult = await NpmRegistry.getPackageVersions(
-    "rescript",
-    rescriptVersionRange,
-  )
+  let rescriptVersionsResult = await NpmRegistry.getPackageVersions("rescript", versionRange)
 
   switch rescriptVersionsResult {
   | Ok(_) => s->P.Spinner.stop("Versions loaded.")

src/RescriptVersions.res

@@ -1,8 +1,12 @@
 type versions = {rescriptVersion: string, rescriptCoreVersion: option<string>}
 
-let getDefaultVersions: unit => promise<versions>
+let rescriptVersionRange: string
 
-let promptVersions: unit => promise<versions>
+let jsxPreserveVersionRange: string
+
+let getDefaultVersions: (~versionRange: string) => promise<versions>
+
+let promptVersions: (~versionRange: string) => promise<versions>
 
 let installVersions: versions => promise<unit>
 

src/RescriptVersions.resi

@@ -19,6 +19,12 @@ let getTemplateName = templateName => {
   ->Option.map(_ => `${templateNamePrefix}${templateName}`)
 }
 
+let getRescriptVersionRange = templateName =>
+  switch templateName {
+  | templateName if templateName === viteTemplateName => RescriptVersions.jsxPreserveVersionRange
+  | _ => RescriptVersions.rescriptVersionRange
+  }
+
 let templates = [
   {
     name: viteTemplateName,

src/Templates.res

@@ -1,6 +1,9 @@
 module Fs = {
   @module("node:fs") external existsSync: string => bool = "existsSync"
 
+  @module("node:fs")
+  external readFileSync: (string, @as(json`"utf8"`) _) => string = "readFileSync"
+
   module Promises = {
     @module("node:fs") @scope("promises")
     external readFile: (string, @as(json`"utf8"`) _) => promise<string> = "readFile"
@@ -77,6 +80,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

@@ -4,10 +4,11 @@
 
 This is a Vite-based template with following setup:
 
-- [ReScript](https://rescript-lang.org) 11.0 with @rescript/react, [Core](https://github.com/rescript-association/rescript-core) and JSX v4
+- [ReScript](https://rescript-lang.org) 12 with [@rescript/react](https://github.com/rescript-lang/rescript-react) and JSX v4 preserve mode
 - ES6 modules (ReScript code compiled to `.res.mjs` files)
-- Vite 6 with React Plugin (Fast Refresh)
-- Tailwind 4
+- [React](https://react.dev) 19 with React DOM
+- [Vite](https://vite.dev) 7 with [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react) 5
+- [Tailwind CSS](https://tailwindcss.com) 4 with [@tailwindcss/vite](https://tailwindcss.com/docs/installation/using-vite)
 
 ## Development
 
@@ -27,6 +28,8 @@ npm run dev
 
 ### Fast Refresh & ReScript
 
+This template enables ReScript JSX preserve mode so Vite's React plugin can process the generated `.res.mjs` files and keep React Fast Refresh working.
+
 Make sure to create interface files (`.resi`) for each `*.res` file.
 
 Fast Refresh requires you to **only export React components**, and it's easy to unintenionally export other values that will disable Fast Refresh (you will see a message in the browser console whenever this happens).

templates/rescript-template-vite/README.md

@@ -13,9 +13,10 @@
     }
   ],
   "suffix": ".res.mjs",
-  "bs-dependencies": ["@rescript/core", "@rescript/react"],
-  "bsc-flags": ["-open RescriptCore"],
+  "dependencies": ["@rescript/core", "@rescript/react"],
+  "compiler-flags": ["-open RescriptCore"],
   "jsx": {
-    "version": 4
+    "version": 4,
+    "preserve": true
   }
 }