Await initial compile promise.

Add React to SampleApp.

index.js

@@ -337,7 +337,7 @@ export default function fablePlugin(userConfig) {
     } catch (e) {
       logCritical(
         "projectChanged",
-        `Unexpected failure during projectChanged for ${projectFiles}`,
+        `Unexpected failure during projectChanged for ${Array.from(projectFiles)},\n${e}`,
       );
     }
   }
@@ -419,7 +419,8 @@ export default function fablePlugin(userConfig) {
         resolvedConfig.env.MODE === "production" ? "Release" : "Debug";
       state.isBuild = resolvedConfig.command === "build";
       logDebug("configResolved", `Configuration: ${state.configuration}`);
-      const configDir = path.dirname(resolvedConfig.configFile);
+      const configDir =
+        resolvedConfig.configFile && path.dirname(resolvedConfig.configFile);
 
       if (state.config && state.config.fsproj) {
         state.fsproj = state.config.fsproj;
@@ -474,26 +475,25 @@ export default function fablePlugin(userConfig) {
                   this.addWatchFile.bind(this),
                   pendingChanges.projectFiles,
                 );
-                if (state.hotPromiseWithResolvers) {
-                  state.hotPromiseWithResolvers.resolve();
-                  state.hotPromiseWithResolvers = null;
-                }
               } else {
                 const files = Array.from(pendingChanges.fsharpFiles);
                 logDebug("subscribe", files.join("\n"));
                 await fsharpFileChanged(files);
-                if (state.hotPromiseWithResolvers) {
-                  state.hotPromiseWithResolvers.resolve();
-                  state.hotPromiseWithResolvers = null;
-                }
+              }
+
+              if (state.hotPromiseWithResolvers) {
+                state.hotPromiseWithResolvers.resolve();
+                state.hotPromiseWithResolvers = null;
               }
             });
 
           logDebug("buildStart", "Initial project file change!");
+          state.hotPromiseWithResolvers = Promise.withResolvers();
           pendingChangesSubject.next({
             type: "ProjectFileChanged",
             file: state.fsproj,
           });
+          await state.hotPromiseWithResolvers.promise;
         }
       } catch (e) {
         logCritical("buildStart", `Unexpected failure during buildStart: ${e}`);

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vite-plugin-fable",
-  "version": "0.0.25",
+  "version": "0.0.26",
   "homepage": "https://nojaf.com/vite-plugin-fable/",
   "description": "",
   "main": "index.js",

sample-project/App.fsproj

@@ -8,13 +8,16 @@
     </PropertyGroup>
 
     <ItemGroup>
-        <PackageReference Include="Fable.Browser.Dom" Version="2.14.0"/>
-        <PackageReference Include="Fable.Core" Version="4.2.0"/>
+        <PackageReference Include="Fable.Browser.Dom" Version="2.14.0" />
+        <PackageReference Include="Fable.Core" Version="4.3.0" />
+        <PackageReference Include="Nojaf.Fable.React" Version="0.0.1" />
         <PackageReference Include="Thoth.Json" Version="10.2.0" />
     </ItemGroup>
 
     <ItemGroup>
-        <Compile Include="Math.fs"/>
-        <Compile Include="Library.fs"/>
+        <Compile Include="Math.fs" />
+        <Compile Include="Component.fsi" />
+        <Compile Include="Component.fs" />
+        <Compile Include="Library.fs" />
     </ItemGroup>
 </Project>

sample-project/Component.fs

@@ -0,0 +1,8 @@
+module Components.Component
+
+open Fable.Core
+open React
+open type React.DSL.DOMProps
+
+[<ExportDefault>]
+let Component () : JSX.Element = div [] [ str "React rocks!" ]

sample-project/Component.fsi

@@ -0,0 +1,6 @@
+module Components.Component
+
+open Fable.Core
+
+[<ExportDefault>]
+val Component : unit -> JSX.Element

sample-project/Library.fs

@@ -1,6 +1,6 @@
 module App
 
-open Fable.Core.JS
+open Fable.Core
 open Browser.Dom
 open Math
 open Thoth.Json
@@ -12,3 +12,8 @@ let someJsonString =
 
 let h1Element = document.querySelector "h1"
 h1Element.textContent <- $"Dynamic Fable text %i{r}! %s{someJsonString}"
+
+open React
+
+let app = document.querySelector "#app"
+ReactDom.createRoot(app).render (JSX.create Components.Component.Component [])

sample-project/index.html

@@ -9,10 +9,10 @@
   <body>
     <div id="root">
       <h1>Static text</h1>
-      <input type="text" />
+      <div id="app"></div>
     </div>
     <script type="module">
-      import "/Library.fs"
+        import "/Library.fs"
     </script>
   </body>
 </html>

sample-project/vite.config.js

@@ -1,12 +1,9 @@
 import { defineConfig } from "vite";
 import Inspect from "vite-plugin-inspect";
 import fable from "../index.js";
-import { fileURLToPath } from "node:url";
-import path from "node:path";
-
-const repositoryRoot = path.dirname(fileURLToPath(import.meta.url));
+import react from "@vitejs/plugin-react";
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [Inspect(), fable()],
+  plugins: [Inspect(), fable({ jsx: "automatic" }), react({ include: /\.fs$/ })],
 });