Use vite-plugin-fable (#632)

* Use vite-plugin-fable

* Add dev script

* Resolve fsproj safer

* bump plugin

* Update vite-plugin-fable to 0.0.9

* 0.0.10

build.fsx

@@ -148,7 +148,6 @@ pipeline "Build" {
     }
     stage "bundle frontend" {
         workingDir clientDir
-        run "dotnet tool restore"
         run (fun _ ->
             async {
                 setViteToProduction ()
@@ -271,8 +270,7 @@ pipeline "Watch" {
         run (runLambda "FantomasOnlinePreview")
         stage "frontend" {
             workingDir clientDir
-            run "dotnet tool restore"
-            run "dotnet fable watch ./fsharp/FantomasTools.fsproj --outDir ./src/bin --run bunx --bun vite"
+            run "bunx --bun vite"
         }
     }
     runIfOnlySpecified true

src/client/package.json

@@ -1,12 +1,11 @@
 {
   "scripts": {
-    "prebuild": "dotnet fable ./fsharp/FantomasTools.fsproj --outDir ./src/bin",
+    "dev": "bunx --bun vite",
     "build": "bunx --bun vite build --base=/fantomas-tools/",
     "serve": "vite preview",
-    "format": "prettier --write \"src/**/*.{js,jsx}\"",
-    "lint": "prettier --check \"src/**/*.{js,jsx}\""
+    "format": "prettier --write \"src/**/*.{js,jsx}\" vite.config.js",
+    "lint": "prettier --check \"src/**/*.{js,jsx}\" vite.config.js"
   },
-
   "type": "module",
   "dependencies": {
     "@monaco-editor/react": "4.6.0",
@@ -22,6 +21,10 @@
     "@vitejs/plugin-react": "4.2.1",
     "prettier": "3.1.1",
     "prop-types": "^15.8.1",
-    "vite": "5.0.7"
-  }
+    "vite": "^5.1.1",
+    "vite-plugin-fable": "^0.0.10"
+  },
+  "trustedDependencies": [
+    "vite-plugin-fable"
+  ]
 }

src/client/src/index.jsx

@@ -1,4 +1,4 @@
-import './bin/App.js';
+import '../fsharp/App.fs';
 import './styles/style.css';
 import 'notyf/notyf.min.css';
 import 'vis-network/styles/vis-network.css';

src/client/vite.config.js

@@ -1,19 +1,20 @@
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
+import fable from 'vite-plugin-fable';
+
+const currentDir = path.dirname(fileURLToPath(import.meta.url));
+const fsproj = path.join(currentDir, 'fsharp/FantomasTools.fsproj');
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react({ jsxRuntime: 'classic' })],
+  plugins: [react({ jsxRuntime: 'classic' }), fable({ fsproj })],
   server: {
     port: 9060,
-    watch: {
-      ignored: [
-        '**/*.fs',
-        '**/*.fsi', // Don't watch F# files
-      ],
-    },
   },
   build: {
     outDir: 'build',
   },
+  base: '/fantomas-tools/',
 });