# (ab?)using Node module hooks to speed up development

I wanted a much faster way to develop the front-end of my site.

And I wanted to use JSX as the templating language but without React.

And I didn't want to be tied down to any one way of doing anything.

So I made a bunch of orthogonal stuff. Half evolved into module hooks.

One module loader transforms JSX to JS with the function you give it.

Now I can import and run JSX files natively in JSX.

Another remaps imports arbitrarily.

Now I can remap react/jsx-runtime to ./my-jsx-impl.js for experimentation.

Another looks for .{ts,tsx,jsx} when .js isn't found.

Now I can import foo.tsx as foo.js which helps with client code sharing.

The final one works with FileTree.

It resolves to the latest version of a file using query string cache busting.

And it loads the latest one from the FileTree for speed and fewer disk reads.

This works because FileTree can (optionally) keep itself updated on disk changes.

I added filesUpdated events to the FileTree's EventEmitter.

Now I can rebuild my whole front-end whenever any file changes.

But I made sure to use module versioning to not discard unchanged state.

Modules are only invalidated and re-executed if they or their deps change.

This also allows me to keep persisted runtime state between site rebuilds.

I also added moduleInvalidated events and the onModuleInvalidated method.

This way, a module can run a callback when its being replaced by a newer version.

Now I can properly dispose singletons instead of restarting the whole process.