Parcel 2 Hot Module Replacement

[bricehartmann]

Really love this project!

I played around with it for a few hours using Parcel 2 but I couldn't find a way to get file change detection to work for HMR.

For example: Parcel doesn't detect when I change the markup of a component that's used within index.html and I have to restart the dev server (or rebuild) to see the changes reflected in my browser.

I haven't dug into the plugin system of Parcel 2 yet so it's possible there's a straightforward way to add this functionality within a project, but I wanted to post this in case someone else has come across this need already.

[thewebartisan7]

I am glad to hear that you like the plugin. Let me know any issues or suggestions you have and you are welcome to contribute.

About HMR issue, it's a known issue that happen also with posthtml-modules and posthtml-extends plugin, also with Webpack, and most probably with any other building tool.

As I understand it's because the building tool know only about the entry point, index.html in your case, and not about the included file via plugin.

I also try to find a solution within webpack but still no luck.

For Parcel, seem there is a workaround, but I didn't test it as I don't use Parcel.

See:
parcel-bundler/parcel#3218
The first reply in this issue point to this solution here https://github.com/pugson/parcel-static-template/blob/master/tools/watcher.js#L36-L57

It's also mentioned here posthtml/posthtml-modules#33

Webpack issue is here posthtml/posthtml-loader#133

However a work around for avoid to run again the server, or for rebuild again, it's just to add a minor change inside index.html (or any other HTML entry point), like for example a new line. In this way everything is again reloaded, including all components used inside the entry point (pages).

Let me know if above works for you.

[bricehartmann]

Thanks for the research!

I modeled a custom file watcher off of one of the resources you linked to. It seems that simply changing the last modification timestamp on a file is not enough to trigger Parcel 2 to rebuild.

I ended up implementing logic that, upon a change requiring a rebuild being detected, will write a newline character to the end of index.html, wait 250ms, and then remove it. I couldn't get it to work without waiting for a short period of time for Parcel to detect the changes to the file.

This feels really hacky, but it's working! 🎉

You can check out an example repository of this working here:
https://github.com/bricehartmann/parcel-2-posthtml-components

Thanks for your help and work on this project!

[cossssmin]

Reopening this as I'm looking into using Parcel with posthtml-component and seeing that the same issue was actually fixed in posthtml-modules.

This is the patch that fixed it there: posthtml/posthtml-modules#100

Related:

posthtml/posthtml-modules#79

PostHTML tree.messages:

https://github.com/posthtml/posthtml/blob/b453a8223a9d4da6fb291f82948d6eb7dc9b615a/docs/plugins/index.md#messages

It would require info about the dependency pushed up the tree, see the commit in that PR. I've tried testing it, however I wasn't able to get it working - not sure where to push it to tree.messages (which always seems to not exist?).

I'd very much appreciate it if you could please have another look, it'd be awesome to get this working in Parcel 🫣

[thewebartisan7]

Reopening this as I'm looking into using Parcel with posthtml-component and seeing that the same issue was actually fixed in posthtml-modules.

This is the patch that fixed it there: posthtml/posthtml-modules#100

Related:

posthtml/posthtml-modules#79

PostHTML tree.messages:

https://github.com/posthtml/posthtml/blob/b453a8223a9d4da6fb291f82948d6eb7dc9b615a/docs/plugins/index.md#messages

It would require info about the dependency pushed up the tree, see the commit in that PR. I've tried testing it, however I wasn't able to get it working - not sure where to push it to tree.messages (which always seems to not exist?).

I'd very much appreciate it if you could please have another look, it'd be awesome to get this working in Parcel 🫣

I see, looks the right solution to go. Unfortunately at the moment I have no time to check into and I should do some mental gymnastics to get the posthtml api back in hand. If you or someone else can make a PR would be much better.

[thewebartisan7]

@cossssmin according to this fix here https://github.com/posthtml/posthtml-modules/pull/100/files we could try to add similar fix here https://github.com/posthtml/posthtml-components/blob/main/src/index.js#L177, like:

  const componentPath = getComponentPath(currentNode, options);

  if (tree.messages) {
    tree.messages.push({
      type: 'dependency',
      file: componentPath
    });
  }

[cossssmin]

Yup, could work I think 👍