Add simple vite plugin

[nojaf]

I'd propose to streamline the experience by running a single command to start the Vite dev server.
I've added a simple plugin that will start the ReScript process as part of the vite pipeline.

Just type npm run dev (the default vite experience) and start hacking.

(I've also updated the npm packages)

@fhammerschmidt let me know what you think.

[fhammerschmidt]

There is a bit of a trade-off between keeping a template as simple and transparent as possible and making it easy to get started. I am concerned that your plugin will break in subtle ways with vite or its react plugin as was sometimes the case already. Does fast refresh work?

[nojaf]

All works as before. It is a slight trade-off in terms of transparency.
However, I wouldn't underestimate how many devs are used to running the single command to get going.

Comparing it with Vite and TypeScript:

bun create vite
✔ Project name: … some-ts-project
✔ Select a framework: › React
✔ Select a variant: › TypeScript

Scaffolding project in /home/nojaf/projects/some-ts-project...

Done. Now run:

  cd some-ts-project
  bun install
  bun run dev

I update the tsx file and expect to see my browser reflect the change.
Which is what happens as well with this plugin.

[fhammerschmidt]

I am still indifferent, what do you think @cknitt or @zth?

[cknitt]

@nojaf Sorry for the late feedback, somehow missed this before.

It certainly makes for a nicer experience, especially for someone new to ReScript.

Two concerns:

1. How dependent is this solution on the Vite version? E.g., does it still work with Vite 6? Do you think we should update the template to Vite 6 already?
2. Colors in the ReScript output are lost, this is a bit of a downside.

[cknitt]

Suggested change

	let rescriptProcressRef = null;
	let rescriptProcessRef = null;

[nojaf]

1. How dependent is this solution on the Vite version? E.g., does it still work with Vite 6? Do you think we should update the template to Vite 6 already?

This is unaffected in by the Vite 6 major, their plugin model is pretty stable. This will continue to keep on working. I have upgraded some of my projects to Vite 6, we should do it, this release was more significant for frameworks rather than end users.

2. Colors in the ReScript output are lost, this is a bit of a downside.

Hmm, yes, I'm not sure if that can easily be resolved.

[cknitt]

Regarding colors, I just tried this and it works:

      const env = { ...process.env, FORCE_COLOR: "1", NINJA_ANSI_FORCED: "1" };
      if (command === "build") {
        logger.info(execSync("rescript", { env }).toString().trim());
      } else {
        rescriptProcressRef = spawn("rescript", ["-w"], { env });
        logger.info(`Spawned rescript -w`);

But there is another remaining problem here: In the build/execSync case, if there is a compilation error, the output from the rescript process is not logged.

[illusory0x0]

@cknitt I found other vite-plugin-rescript https://github.com/jihchi/vite-plugin-rescript, it can add simply and like vite can load .ts file, this plugin can load .res files, rather than res.mjs as before

The plugin comes with support for loading .res files directly.

[cknitt]

@illusory0x0 Thanks! I will test that one.