Free DX idea

[nojaf]

Alright, folks, let's talk ReScript and Fable—both of these compile down to JavaScript, and when you're using Vite, you need those JavaScript files on disk. Fable typically handles this with dotnet fable watch --run npx vite, but let's be honest, it’s not the smoothest experience compared to the usual npm run dev workflow with Vite.

Earlier this year, I created a Vite plugin to better integrate Fable with Vite. It’s something I’m proud of, but it was a hobby project, and I’m not planning to actively maintain it. If anyone wants to take it further, feel free to fork it.

Now, about ReScript—they've got a similar challenge: needing compiled files and dealing with multiple terminal processes. You’ve got compilation on one side and Vite on the other, and it can be a bit annoying. So, I created a simple plugin to start and stop the process within the Vite pipeline.

Here’s what it looks like:

function rescriptPlugin() {
  let rescriptProcressRef = null;
  let logger = { info: console.log, warn: console.warn, error: console.error };
  let command = "build";

  return {
    name: "rescript",
    enforce: "pre",
    // Don't watch *.res files, ReScript process does this.
    config: function (config) {
      if (!config.server) {
        config.server = {};
      }

      if (!config.server.watch) {
        config.server.watch = {};
      }

      if (Array.isArray(config.server.watch.ignored)) {
        config.server.watch.ignored.push("**/*.res");
      } else {
        config.server.watch.ignored = ["**/*.res"];
      }
    },
    configResolved: async function (resolvedConfig) {
      logger = resolvedConfig.logger;
      command = resolvedConfig.command;
    },
    buildStart: async function () {
      if (command === "build") {
        logger.info(execSync("bunx rescript").toString().trim());
      } else {
        rescriptProcressRef = spawn("bunx", ["rescript", "-w"]);
        logger.info(`Spawned bunx rescript -w`);

        // Process standard output
        rescriptProcressRef.stdout.on("data", (data) => {
          logger.info(data.toString().trim());
        });

        // Process standard error
        rescriptProcressRef.stderr.on("data", (data) => {
          logger.error(data.toString().trim());
        });

        // Handle process exit
        rescriptProcressRef.on("close", (code) => {
          console.log(`ReScript process exited with code ${code || 0}`);
        });
      }
    },
    buildEnd: async function () {
      if (rescriptProcressRef && !rescriptProcressRef.killed) {
        const pid = rescriptProcressRef.pid;
        rescriptProcressRef.kill("SIGKILL"); // Default signal is SIGTERM
        logger.info(`ReScript process with PID: ${pid} has been killed`);
      }
    },
  };
}

You could easily create a similar plugin for Fable, swapping out rescript for dotnet fable. The advantage of this approach is that it’s not tied to any specific Fable version, making it pretty low-maintenance. The plugin also updates the user config to ignore .res files, which you could change to .fs(i) for Fable.

Here's how you’d use it:

export default defineConfig({
  plugins: [
    react({
      include: ["**/*.res.mjs"],
    }),
    rescriptPlugin(),
  ]
});

This setup gives you the equivalent of:

 server: {
        watch: {
            ignored: [
                "**/*.fs" // Don't watch F# files
            ]
        }
    }

But without needing to configure it every time.

So, if you're interested in improving your development experience, this might be something to explore. But if you’re okay with the current setup using dotnet fable watch --run npx vite, that’s cool too. Just sharing an option for those who might want to streamline things a bit.

[laurentpayot]

@nojaf I just want to thank you for your excellent Fable Vite plugin. It made my setup so much simpler. I wish I had time and skills to maintain a fork. Will you still fix eventual broken stuff that might will occur with the evolution of Vite and Fable in the future?

[nojaf]

It probably depends on how messy things might get 🙈. Honestly, the best answer is 'maybe'. I'd likely prefer pairing with someone rather than fixing it on my own.