Adding lifecycle hooks for dev mode

[ZipBrandon]

I want to RFC this POC adding the ability to execute callbacks at the end of Remix finishing its rebuild. The motivation for this is to improve DX. Currently the status quo is to purgeRequireCache() on every request regardless, if needed or not, which adds to overall processing time of request. Since purging the cache is only required after a rebuild, we can achieve this by adding the small amount of code.

In remix.config.js:

  ...
  rebuildFinishedCallbacks: [
    () => {
      console.log(`Purging cache`);
      fetch(`http://localhost:3000/purgeCache`);
    },
  ],
 ...

In server.js: (using Express here)

app.all(`/purgeCache`, (req, res, next) => {
  purgeRequireCache();
  res.send(200, { message: `ok` });
});

POC Implementation: ZipBrandon@0bd0eed

Things to do:

• Add the ability for other lifecycles .
• Inject parameters for the lifecycle callbacks.
• Discuss the naming and api

[kiliman]

Instead of updating remix.config you can do this in userland.

I have my own <LiveReload/> component

// components/LiveReload.tsx
export default function LiveReload({ port = Number(8002) }: { port?: number }) {
//...
    let ws = new WebSocket(socketPath)
    ws.onmessage = message => {
      let event = JSON.parse(message.data)
      if (event.type === 'LOG') {
        console.log(event.message)
      }
      if (event.type === 'RELOAD') {
        console.log('💿 Reloading window ...')
        fetch('/build/__purge__').finally(() => {
          window.location.reload()
        })
      }
    }
//...

// server.js
app.use('/build/__purge__', (req, res) => {
  console.log('💿 Purging require cache')
  purgeRequireCache()
  return res.send('ok')
})

[ZipBrandon]

I have been using this the previous two weeks and it is that the LiveReload does not pick up loader or action changes? I am having to externally call the API endpoint upon changes that are exclusively to those.

[kiliman]

I haven't had any issues. You should see the rebuild and purge on any change.

[dmarkow]

I ended up patching this directly in @remix-run/dev so that the cache gets cleared after the rebuild and before broadcasting the reload message, instead of clearing it during the request. Pretty sure this only works if you're using remix's built-in dev server though. (The fse__namespace stuff is to properly clean the build folder when quitting, since the current setup doesn't work as expected #2432)

diff --git a/node_modules/@remix-run/dev/dist/cli/commands.js b/node_modules/@remix-run/dev/dist/cli/commands.js
index 93e642f..9767205 100644
--- a/node_modules/@remix-run/dev/dist/cli/commands.js
+++ b/node_modules/@remix-run/dev/dist/cli/commands.js
@@ -228,6 +228,7 @@ async function watch(remixRootOrConfig, modeArg, callbacks) {
     },
 
     onRebuildFinish() {
+      purgeAppRequireCache(config$1.serverBuildPath);
       log(`Rebuilt in ${prettyMs__default["default"](Date.now() - start)}`);
       broadcast({
         type: "RELOAD"
@@ -250,6 +251,8 @@ async function watch(remixRootOrConfig, modeArg, callbacks) {
   console.log(`💿 Built in ${prettyMs__default["default"](Date.now() - start)}`);
   let resolve;
   exitHook__default["default"](() => {
+    fse__namespace.emptyDirSync(config$1.assetsBuildDirectory);
+    fse__namespace.rmSync(config$1.serverBuildPath);
     resolve();
   });
   return new Promise(r => {
@@ -257,8 +260,6 @@ async function watch(remixRootOrConfig, modeArg, callbacks) {
   }).then(async () => {
     wss.close();
     await closeWatcher();
-    fse__namespace.emptyDirSync(config$1.assetsBuildDirectory);
-    fse__namespace.rmSync(config$1.serverBuildPath);
   });
 }
 async function dev(remixRoot, modeArg, portArg) {
@@ -289,7 +290,6 @@ async function dev(remixRoot, modeArg, portArg) {
   let app = express();
   app.disable("x-powered-by");
   app.use((_, __, next) => {
-    purgeAppRequireCache(config$1.serverBuildPath);
     next();
   });
   app.use(createApp(config$1.serverBuildPath, mode, config$1.publicPath, config$1.assetsBuildDirectory));