From 996a3f53c2b30d3edf93ebd5f291a11bf9b2f727 Mon Sep 17 00:00:00 2001 From: nojaf Date: Mon, 4 Mar 2024 21:13:51 +0100 Subject: [PATCH] Await initial compile promise. Add React to SampleApp. --- index.js | 20 ++++++++++---------- package.json | 2 +- sample-project/App.fsproj | 11 +++++++---- sample-project/Component.fs | 8 ++++++++ sample-project/Component.fsi | 6 ++++++ sample-project/Library.fs | 7 ++++++- sample-project/bun.lockb | Bin 57030 -> 57030 bytes sample-project/index.html | 4 ++-- sample-project/vite.config.js | 7 ++----- 9 files changed, 42 insertions(+), 23 deletions(-) create mode 100644 sample-project/Component.fs create mode 100644 sample-project/Component.fsi diff --git a/index.js b/index.js index aca70a2..dddd88c 100644 --- a/index.js +++ b/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}`); diff --git a/package.json b/package.json index 680feeb..45aa492 100644 --- a/package.json +++ b/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", diff --git a/sample-project/App.fsproj b/sample-project/App.fsproj index 8e55f12..158c477 100644 --- a/sample-project/App.fsproj +++ b/sample-project/App.fsproj @@ -8,13 +8,16 @@ - - + + + - - + + + + diff --git a/sample-project/Component.fs b/sample-project/Component.fs new file mode 100644 index 0000000..598c87a --- /dev/null +++ b/sample-project/Component.fs @@ -0,0 +1,8 @@ +module Components.Component + +open Fable.Core +open React +open type React.DSL.DOMProps + +[] +let Component () : JSX.Element = div [] [ str "React rocks!" ] diff --git a/sample-project/Component.fsi b/sample-project/Component.fsi new file mode 100644 index 0000000..bf9a9aa --- /dev/null +++ b/sample-project/Component.fsi @@ -0,0 +1,6 @@ +module Components.Component + +open Fable.Core + +[] +val Component : unit -> JSX.Element diff --git a/sample-project/Library.fs b/sample-project/Library.fs index 3256c32..6266010 100644 --- a/sample-project/Library.fs +++ b/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 []) diff --git a/sample-project/bun.lockb b/sample-project/bun.lockb index 378cd78d99390be7d1af4bed772bdbb9da60a68e..b7c410771143ead5d5e18e7bcb964325ac11da57 100755 GIT binary patch delta 23 acmX@Mm-*OU<_+f4IG7k9V6*+Sb`Jnx8V2hC delta 23 fcmX@Mm-*OU<_+f4I2hv$E%c1^3^v

Static text

- +
diff --git a/sample-project/vite.config.js b/sample-project/vite.config.js index 4f3fa73..4852648 100644 --- a/sample-project/vite.config.js +++ b/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$/ })], });