[WIP] Overfetch tracker

packages/cli/src/commands/hydrogen/dev.ts

@@ -19,6 +19,7 @@ import {addVirtualRoutes} from '../../lib/virtual-routes.js';
 import {spawnCodegenProcess} from '../../lib/codegen.js';
 import {combinedEnvironmentVariables} from '../../lib/combined-environment-variables.js';
 import {getConfig} from '../../lib/shopify-config.js';
+import {patchRemix} from '../../lib/very-dirty-remix-patch.js';
 
 const LOG_INITIAL_BUILD = '\n🏁 Initial build';
 const LOG_REBUILDING = '🧱 Rebuilding...';
@@ -147,6 +148,8 @@ async function runDev({
   }
 
   let isInitialBuild = true;
+
+  patchRemix(); // Run before importing files
   const [{watch}, {createFileWatchCache}] = await Promise.all([
     import('@remix-run/dev/dist/compiler/watch.js'),
     import('@remix-run/dev/dist/compiler/fileWatchCache.js'),

packages/cli/src/lib/very-dirty-remix-patch.ts

@@ -0,0 +1,46 @@
+import {readFileSync} from 'node:fs';
+import Module from 'module';
+
+const wrapUseLoaderDataPlugin = {
+  name: 'wrapUseLoaderDataPlugin',
+  setup(build: any) {
+    let patchedContents: string;
+
+    build.onLoad(
+      {filter: /@remix-run\/react\/dist\/esm\/index\.js$/},
+      (args: any) => {
+        if (!patchedContents) {
+          patchedContents =
+            readFileSync(args.path, 'utf8').replace('useLoaderData,', '') +
+            '\nimport {useLoaderData as _useLoaderData} from "./components.js";' +
+            '\nimport {createLoaderDataTracker} from "@shopify/hydrogen";' +
+            '\nexport const useLoaderData = createLoaderDataTracker(_useLoaderData);';
+        }
+
+        return {contents: patchedContents};
+      },
+    );
+  },
+};
+
+export function patchRemix() {
+  // @ts-ignore
+  const jsTransformer = Module._extensions['.js'];
+  // @ts-ignore
+  Module._extensions['.js'] = function (mod: any, filename: any) {
+    if (filename.endsWith('@remix-run/dev/dist/compiler/server/compiler.js')) {
+      // @ts-ignore
+      globalThis.__DEV_SERVER_ESBUILD_PLUGINS = [wrapUseLoaderDataPlugin];
+
+      mod._compile(
+        readFileSync(filename, 'utf8').replace(
+          /,\s*plugins,?\s*}/,
+          ',plugins: [...plugins, ...(globalThis.__DEV_SERVER_ESBUILD_PLUGINS || [])]}',
+        ),
+        filename,
+      );
+    } else {
+      jsTransformer(mod, filename);
+    }
+  };
+}

packages/hydrogen/package.json

@@ -54,6 +54,7 @@
     "dist"
   ],
   "dependencies": {
+    "@qiwi/deep-proxy": "2.0.3",
     "@shopify/hydrogen-react": "2023.4.4",
     "react": "^18.2.0"
   },

packages/hydrogen/src/devtools/use-loader-data.test.ts

@@ -0,0 +1,122 @@
+import {describe, it, expect} from 'vitest';
+import {getDeepKeys, createLoaderDataTracker} from './use-loader-data';
+
+const timeout = 0;
+
+function useLoaderDataTracker<T extends Record<string, any>>(data: T) {
+  const loaderDataTracker: {
+    result: undefined | {filename: string; properties: string[]};
+    proxy: T;
+  } = {
+    result: undefined,
+    proxy: createLoaderDataTracker(
+      () => ({...data}),
+      (result) => (loaderDataTracker.result = result),
+      timeout,
+    )(),
+  };
+
+  return loaderDataTracker;
+}
+
+function sleep() {
+  return new Promise((res) => setTimeout(res, timeout));
+}
+
+describe('createLoaderDataTracker', () => {
+  const filename = expect.stringContaining('use-loader-data.test');
+
+  it('uses the deepest keys', () => {
+    expect(
+      getDeepKeys({
+        f1: {
+          f2: true,
+          f3: {
+            f4: true,
+          },
+          f5: [{f6: {f7: null, f8: null}}, {f6: {f7: {f9: null}, f8: null}}],
+        },
+      }),
+    ).toStrictEqual([
+      'f1.f2',
+      'f1.f3.f4',
+      'f1.f5.f6.f8',
+      'f1.f5.f6.f7.f9',
+      // 'f1.f5.f6.f7', => Should not be shown since it's a short version of the previous key
+    ]);
+  });
+
+  it('does not run when properties are not accessed', async () => {
+    const data = {
+      f1: true,
+    };
+
+    const tracker = useLoaderDataTracker(data);
+    await sleep();
+
+    expect(tracker.result).toStrictEqual(undefined);
+  });
+
+  it('gathers the keys that are not accessed', async () => {
+    const data = {
+      f1: {
+        f2: true,
+        f3: {
+          f4: true,
+        },
+        f5: [{f6: {f7: null, f8: null}}, {f6: {f7: {f9: null}, f8: null}}],
+      },
+    };
+
+    let tracker = useLoaderDataTracker(data);
+
+    tracker.proxy.f1.f2;
+    tracker.proxy.f1.f5[0].f6.f8;
+    tracker.proxy.f1.f5[0].f6.f7?.f9; // Undefined, it will show the property
+
+    await sleep();
+
+    expect(tracker.result).toStrictEqual({
+      filename,
+      properties: ['f1.f3.f4', 'f1.f5.f6.f7.f9'],
+    });
+
+    tracker = useLoaderDataTracker(data);
+
+    tracker.proxy.f1.f5[1].f6.f7?.f9; // Defined, will skip it
+
+    await sleep();
+
+    expect(tracker.result).toStrictEqual({
+      filename,
+      properties: ['f1.f2', 'f1.f3.f4', 'f1.f5.f6.f8'],
+    });
+  });
+
+  it('does not show nodes and edges', async () => {
+    const data = {
+      f0: true,
+      f1: {
+        edges: [{node: {id: 1}}, {node: {id: 2}}],
+      },
+    };
+
+    let tracker = useLoaderDataTracker(data);
+    tracker.proxy.f0;
+    await sleep();
+
+    expect(tracker.result).toStrictEqual({
+      filename,
+      properties: ['f1.id'],
+    });
+
+    tracker = useLoaderDataTracker(data);
+    tracker.proxy.f1.edges[0].node.id;
+    await sleep();
+
+    expect(tracker.result).toStrictEqual({
+      filename,
+      properties: ['f0'],
+    });
+  });
+});