5 ms·

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

38 points by sbjs 1y ago

devrandoom 1y ago
It's hard to get the idea down from one's head into a document, as this text shows.
- sbjs 1y ago
  Just updated the text to be hopefully much clearer.
vermilingua 1y ago
This is a reinvention of HMR, no?
- sbjs 1y ago
  It's a highly optimized and extremely simple yet robust implementation of it, sure. Is that reason to dismiss it? Consider Vite's node-side HMR implementation. It creates its own module system on top of Node's native module system, using `node:vm`. So its modules are really second class citizens that have to be glued to the native module system. This library used to do that, but moved to using Node's native module hooks, so that there's nothing magical going on, and you can still use the `import` expression to import your HMR modules, they just auto-update when saving.
feisuzhu 1y ago
(ab)?using ?
- kaeruct 1y ago
  Using. But also maybe abusing.
  - carlosneves 1y ago
    I think he's proposing a fix for the regex in the title. /(ab?)using/ matches: - ausing - abusing while /(ab)?using/ matches: - using - abusing
    - sbjs 1y ago
      It's English, it just looks like regex. In English, the ? belongs inside the parens in this case.
skinkestek 1y ago
Am I missing something, or is the content here too minimal? For this to be genuinely useful, I’d expect at least a few code examples—and ideally a link to a working repo to show it in action.
- sbjs 1y ago
  Just added some code samples, thanks for the suggestion.
noob_07 1y ago
I do not follow, can anyone help with more code/config examples of how to leverage this?
- shakna 1y ago
  One example from the site: import module from 'node:module' const tree = new FileTree('site', import.meta.url) module.registerHooks(hooks.useTree(tree)) import('site/myfile.js') Here, site/myfile.js doesn't exist. It gets created as a reference by the FileTree library. Node thinks it is importing it. The import is also automatically reloaded, if the backend changes it. Caches are invalidated and objects replaced.
  - sbjs 1y ago
    Oh no, I must have mis-explained it. The file `site/myfile.js` does exist. All FileTree does is recursively load all files in a dir into memory. The `useTree` module hook does two things: * Pulls the file from memory when loading it instead of from disk * Adds a cache busting query string when resolving it for invalidation Combined with tree.watch(), this essentially allows you to add a very lightweight but extremely accurate hot module replacement system into Node.js const tree = new FileTree('src', import.meta.url) registerHooks(useTree(tree)) tree.watch().on('filesUpdated', () => import(tree.root + '/myfile.js')) import(tree.root + '/myfile.js') Now save src/myfile.js and see it re-executed
whizzter 1y ago
With Typescript you could(prob still can) specify how JSX tags are translated, so you can get the regular data structure without React dependency.
- sbjs 1y ago
  That's orthogonal, and in fact you probably would use TypeScript to translate JSX to JS when using this library. What this does is (a) provide a Node.js module hook to call your transpile function when it encounters TSX/JSX files, and (b) provide a Node.js module that lets you remap imports, including "react/jsx-runtime" if you want a different JSX implementation.
ricardobeat 1y ago
This is in essence being used to emulate Bun.js behaviour with node. Have you tried bun?

38 points by sbjs 1y ago

devrandoom 1y ago

It's hard to get the idea down from one's head into a document, as this text shows.

sbjs 1y ago
Just updated the text to be hopefully much clearer.

vermilingua 1y ago

This is a reinvention of HMR, no?

sbjs 1y ago
It's a highly optimized and extremely simple yet robust implementation of it, sure. Is that reason to dismiss it? Consider Vite's node-side HMR implementation. It creates its own module system on top of Node's native module system, using `node:vm`. So its modules are really second class citizens that have to be glued to the native module system. This library used to do that, but moved to using Node's native module hooks, so that there's nothing magical going on, and you can still use the `import` expression to import your HMR modules, they just auto-update when saving.

feisuzhu 1y ago

(ab)?using ?

kaeruct 1y ago
Using. But also maybe abusing.
- carlosneves 1y ago
  I think he's proposing a fix for the regex in the title. /(ab?)using/ matches: - ausing - abusing while /(ab)?using/ matches: - using - abusing
  - sbjs 1y ago
    It's English, it just looks like regex. In English, the ? belongs inside the parens in this case.

skinkestek 1y ago

Am I missing something, or is the content here too minimal? For this to be genuinely useful, I’d expect at least a few code examples—and ideally a link to a working repo to show it in action.

sbjs 1y ago
Just added some code samples, thanks for the suggestion.

noob_07 1y ago

I do not follow, can anyone help with more code/config examples of how to leverage this?

shakna 1y ago
One example from the site: import module from 'node:module' const tree = new FileTree('site', import.meta.url) module.registerHooks(hooks.useTree(tree)) import('site/myfile.js') Here, site/myfile.js doesn't exist. It gets created as a reference by the FileTree library. Node thinks it is importing it. The import is also automatically reloaded, if the backend changes it. Caches are invalidated and objects replaced.
- sbjs 1y ago
  Oh no, I must have mis-explained it. The file `site/myfile.js` does exist. All FileTree does is recursively load all files in a dir into memory. The `useTree` module hook does two things: * Pulls the file from memory when loading it instead of from disk * Adds a cache busting query string when resolving it for invalidation Combined with tree.watch(), this essentially allows you to add a very lightweight but extremely accurate hot module replacement system into Node.js const tree = new FileTree('src', import.meta.url) registerHooks(useTree(tree)) tree.watch().on('filesUpdated', () => import(tree.root + '/myfile.js')) import(tree.root + '/myfile.js') Now save src/myfile.js and see it re-executed

whizzter 1y ago

With Typescript you could(prob still can) specify how JSX tags are translated, so you can get the regular data structure without React dependency.

sbjs 1y ago
That's orthogonal, and in fact you probably would use TypeScript to translate JSX to JS when using this library. What this does is (a) provide a Node.js module hook to call your transpile function when it encounters TSX/JSX files, and (b) provide a Node.js module that lets you remap imports, including "react/jsx-runtime" if you want a different JSX implementation.

ricardobeat 1y ago

This is in essence being used to emulate Bun.js behaviour with node. Have you tried bun?