BjornTheProgrammer / bun-plugin-html

A plugin for bun build which allows html entrypoints
MIT License
34 stars 2 forks source link

HMR support? #7

Closed SrBrahma closed 8 months ago

SrBrahma commented 10 months ago

I would like to migrate from parcel to bun in my bundling process. I also want it to support the dev environment, so my dev is the most similar as possible to prod.

But one limitation is the lack of HMR that parcel supports: https://en.parceljs.org/hmr.html

Would it be possible to add this to this repo? Not sure how hard that would be.

BjornTheProgrammer commented 10 months ago

@SrBrahma Thanks for leaving your suggestion!

So if I'm correct the idea is that on save this project would rebuild the application and hot reload every imported module and serve it via a server?

The goal of this project is to just build html, and not serve the html so this could be considered out of scope.

Looking at awesome-bun it seems that there are some hmr packages. Granted that repo isn't very up to date.

The first is bun-html-live-reload and the second is bun-livereload.

Currently how I would do what you wish to do is make a build file such as this.

import html from 'bun-plugin-html';
import { withHtmlLiveReload } from 'bun-html-live-reload';

await Bun.build({
  entrypoints: ['./src/index.html'],
  outdir: './dist',  // Specify the output directory
  plugins: [
    html({ inline: true })
  ],
});

export default withHtmlLiveReload({
  fetch: () => {
    return new Response(Bun.file('./dist/index.ts'), {
      headers: { "Content-Type": "text/html" },
    });
  },
});

Then run using bun --hot example.ts

Keep in mind this might not work since I haven't tested it.

Despite potentially being out of scope. If there is no alternative or the convenience of such a built in option is significant this can change.

Please elaborate on how exactly you would envision the option working? Maybe something like...

html({
    serve: true,
    hmr: true
})

As for difficulty it is probably pretty easy to implement.