wip

remix-run · Jan 25, 2023 · ff1c064 · ff1c064
1 parent 57004e3
commit ff1c064
Show file tree

Hide file tree

Showing 5 changed files with 84 additions and 13 deletions.
diff --git a/packages/remix-dev/compiler/compileBrowser.ts b/packages/remix-dev/compiler/compileBrowser.ts
@@ -31,7 +31,9 @@ import invariant from "../invariant";
 
 export type BrowserCompiler = {
   // produce ./public/build/
-  compile: (manifestChannel: WriteChannel<AssetsManifest>) => Promise<void>;
+  compile: (
+    manifestChannel: WriteChannel<AssetsManifest>
+  ) => Promise<unknown[] | undefined>;
   dispose: () => void;
 };
 
@@ -174,7 +176,7 @@ export const createBrowserCompiler = (
 ): BrowserCompiler => {
   let appCompiler: esbuild.BuildIncremental;
   let cssCompiler: esbuild.BuildIncremental;
-
+  let prevMetafile: esbuild.Metafile;
   let compile = async (manifestChannel: WriteChannel<AssetsManifest>) => {
     let appBuildTask = async () => {
       appCompiler = await (!appCompiler
@@ -189,6 +191,7 @@ export const createBrowserCompiler = (
         appCompiler.metafile,
         "Expected app compiler metafile to be defined. This is likely a bug in Remix. Please open an issue at https://github.com/remix-run/remix/issues/new"
       );
+      return appCompiler.metafile;
     };
 
     let cssBuildTask = async () => {
@@ -274,7 +277,11 @@ export const createBrowserCompiler = (
       return cssBundlePath;
     };
 
-    let [cssBundlePath] = await Promise.all([cssBuildTask(), appBuildTask()]);
+    let [cssBundlePath, metafile] = await Promise.all([
+      cssBuildTask(),
+      appBuildTask(),
+    ]);
+    // TODO map outputs to public paths
 
     let manifest = await createAssetsManifest({
       config: remixConfig,
@@ -283,6 +290,50 @@ export const createBrowserCompiler = (
     });
     manifestChannel.write(manifest);
     await writeAssetsManifest(remixConfig, manifest);
+
+    if (prevMetafile !== undefined) {
+      let create_input2output = (
+        metafile: esbuild.Metafile
+      ): Record<string, string> => {
+        let inputs = new Set(Object.keys(metafile.inputs));
+        let input2output: Record<string, string> = {};
+        for (let [outputPath, output] of Object.entries(metafile.outputs)) {
+          for (let x of Object.keys(output.inputs)) {
+            if (inputs.has(x)) {
+              input2output[x] = outputPath;
+            }
+          }
+        }
+        return input2output;
+      };
+      let updates = [];
+      let prev_i2o = create_input2output(prevMetafile);
+      let i2o = create_input2output(metafile);
+      console.log(
+        JSON.stringify(
+          {
+            prev_i2o,
+            i2o,
+          },
+          undefined,
+          2
+        )
+      );
+      for (let input of Object.keys(metafile.inputs)) {
+        let prev_o = prev_i2o[input];
+        let o = i2o[input];
+        if (prev_o !== o) {
+          updates.push({
+            // TODO replace /public/build with /build, but respect remix config settings for those
+            id: input,
+            url: "",
+          });
+        }
+      }
+      prevMetafile = metafile;
+      return updates;
+    }
+    prevMetafile = metafile;
   };
 
   return {

diff --git a/packages/remix-dev/compiler/remixCompiler.ts b/packages/remix-dev/compiler/remixCompiler.ts
@@ -28,15 +28,18 @@ export const compile = async (
   options: {
     onCompileFailure?: OnCompileFailure;
   } = {}
-): Promise<AssetsManifest | undefined> => {
+): Promise<
+  { assetsManifest?: AssetsManifest; hmrUpdates: unknown } | undefined
+> => {
   try {
     let assetsManifestChannel = createChannel<AssetsManifest>();
     let browserPromise = compiler.browser.compile(assetsManifestChannel);
     let serverPromise = compiler.server.compile(assetsManifestChannel);
-    await Promise.all([browserPromise, serverPromise]);
-    return assetsManifestChannel.read();
+    let [hmrUpdates] = await Promise.all([browserPromise, serverPromise]);
+    return { assetsManifest: await assetsManifestChannel.read(), hmrUpdates };
   } catch (error: unknown) {
     options.onCompileFailure?.(error as Error);
+    return undefined;
   }
 };
 

diff --git a/packages/remix-dev/compiler/watch.ts b/packages/remix-dev/compiler/watch.ts
@@ -23,7 +23,11 @@ function isEntryPoint(config: RemixConfig, file: string): boolean {
 export type WatchOptions = Partial<CompileOptions> & {
   reloadConfig?(root: string): Promise<RemixConfig>;
   onRebuildStart?(): void;
-  onRebuildFinish?(durationMs: number, assetsManifest?: AssetsManifest): void;
+  onRebuildFinish?(
+    durationMs: number,
+    assetsManifest?: AssetsManifest,
+    hmrEvent?: unknown
+  ): void;
   onFileCreated?(file: string): void;
   onFileChanged?(file: string): void;
   onFileDeleted?(file: string): void;
@@ -77,15 +81,18 @@ export async function watch(
     }
 
     compiler = createRemixCompiler(config, options);
-    let assetsManifest = await compile(compiler);
-    onRebuildFinish?.(Date.now() - start, assetsManifest);
+    let { assetsManifest, hmrUpdates } = (await compile(compiler)) ?? {};
+    onRebuildFinish?.(Date.now() - start, assetsManifest, hmrUpdates);
   }, 500);
 
   let rebuild = debounce(async () => {
     onRebuildStart?.();
     let start = Date.now();
-    let assetsManifest = await compile(compiler, { onCompileFailure });
-    onRebuildFinish?.(Date.now() - start, assetsManifest);
+    let { assetsManifest, hmrUpdates } =
+      (await compile(compiler, {
+        onCompileFailure,
+      })) ?? {};
+    onRebuildFinish?.(Date.now() - start, assetsManifest, hmrUpdates);
   }, 100);
 
   let toWatch = [config.appDirectory];

diff --git a/packages/remix-dev/devServer2.ts b/packages/remix-dev/devServer2.ts
@@ -117,10 +117,16 @@ export let serve = async (
       clean(config);
       socket.log("Rebuilding...");
     },
-    onRebuildFinish: async (durationMs, assetsManifest) => {
+    onRebuildFinish: async (durationMs, assetsManifest, hmrUpdates) => {
       if (!assetsManifest) return;
       socket.log(`Rebuilt in ${prettyMs(durationMs)}`);
 
+      console.log({ hmrUpdates });
+      if (hmrUpdates) {
+        socket.hmr(hmrUpdates);
+        return;
+      }
+
       info(`Waiting for ${appServerOrigin}...`);
       let start = Date.now();
       await waitForAppServer(assetsManifest.version);

diff --git a/packages/remix-dev/liveReload.ts b/packages/remix-dev/liveReload.ts
@@ -23,5 +23,9 @@ export let serve = (options: { port: number }) => {
     broadcast({ type: "LOG", message: _message });
   };
 
-  return { reload, log, close: wss.close };
+  let hmr = (event: unknown) => {
+    log(`[HMR] sending event: ${JSON.stringify(event)}`);
+  };
+
+  return { reload, hmr, log, close: wss.close };
 };