@graphcommerce/next-config 4.30.0 → 4.31.0-canary.1

package/dist/index.d.ts

@@ -1,6 +1,10 @@
 import { NextConfig } from 'next/dist/server/config-shared';
+import React from 'react';
 export * from './utils/isMonorepo';
 export * from './utils/resolveDependenciesSync';
 export * from './withGraphCommerce';
 export declare function withYarn1Workspaces(packages?: string[]): (config: NextConfig) => NextConfig;
 export declare function withYarn1Scopes(packages?: string[]): (config: NextConfig) => NextConfig;
+export declare type PluginProps<P extends Record<string, unknown> = Record<string, unknown>> = P & {
+    Component: React.FC<P>;
+};

package/dist/interceptors/InterceptorPlugin.d.ts

@@ -0,0 +1,9 @@
+import { Compiler } from 'webpack';
+export declare class InterceptorPlugin {
+    private interceptors;
+    private resolveDependency;
+    constructor();
+    private watched;
+    watchList(): string[];
+    apply(compiler: Compiler): void;
+}

package/dist/interceptors/InterceptorPlugin.js

@@ -0,0 +1,62 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InterceptorPlugin = void 0;
+const path_1 = __importDefault(require("path"));
+const resolveDependency_1 = require("../utils/resolveDependency");
+const findPlugins_1 = require("./findPlugins");
+const generateInterceptors_1 = require("./generateInterceptors");
+const writeInterceptors_1 = require("./writeInterceptors");
+class InterceptorPlugin {
+    constructor() {
+        this.watched = [];
+        this.resolveDependency = (0, resolveDependency_1.resolveDependency)();
+        this.watched = this.watchList();
+        this.interceptors = (0, generateInterceptors_1.generateInterceptors)((0, findPlugins_1.findPlugins)(), this.resolveDependency);
+        (0, writeInterceptors_1.writeInterceptors)(this.interceptors);
+    }
+    watchList() {
+        return [
+            ...new Set((0, findPlugins_1.findPlugins)()
+                .map((p) => this.resolveDependency(p.plugin))
+                .map((p) => p.fromRoot)),
+        ];
+    }
+    apply(compiler) {
+        const logger = compiler.getInfrastructureLogger('InterceptorPlugin');
+        // After the compilation has succeeded we watch all possible plugin locations.
+        compiler.hooks.afterCompile.tap('InterceptorPlugin', (compilation) => {
+            const watchList = this.watchList();
+            const added = watchList.filter((d) => !this.watched.includes(d));
+            const removed = this.watched.filter((d) => !watchList.includes(d));
+            this.watched = watchList;
+            if (added.length > 0) {
+                added.forEach((context) => compilation.contextDependencies.add(context));
+            }
+            if (removed.length > 0) {
+                removed.forEach((context) => compilation.contextDependencies.delete(context));
+            }
+            if (added.length > 0 || removed.length > 0) {
+                this.interceptors = (0, generateInterceptors_1.generateInterceptors)((0, findPlugins_1.findPlugins)(), this.resolveDependency);
+                (0, writeInterceptors_1.writeInterceptors)(this.interceptors);
+            }
+        });
+        compiler.hooks.normalModuleFactory.tap('InterceptorPlugin', (nmf) => {
+            nmf.hooks.beforeResolve.tap('InterceptorPlugin', (resource) => {
+                const issuer = resource.contextInfo.issuer ?? '';
+                const requestPath = path_1.default.relative(process.cwd(), path_1.default.resolve(resource.context, resource.request));
+                if (issuer.endsWith('interceptor.tsx') && this.interceptors[requestPath]) {
+                    logger.log(`Interceptor ${issuer} is requesting the original ${requestPath}`);
+                    return;
+                }
+                if (this.interceptors[requestPath]) {
+                    logger.log(`Intercepting... ${this.interceptors[requestPath].fromRoot}}`);
+                    resource.request = `${resource.request}.interceptor.tsx`;
+                }
+            });
+        });
+    }
+}
+exports.InterceptorPlugin = InterceptorPlugin;

package/dist/interceptors/findPlugins.d.ts

@@ -0,0 +1,2 @@
+import type { PluginConfig } from './generateInterceptors';
+export declare function findPlugins(cwd?: string): PluginConfig[];

package/dist/interceptors/findPlugins.js

@@ -0,0 +1,73 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.findPlugins = void 0;
+const core_1 = require("@swc/core");
+const glob_1 = __importDefault(require("glob"));
+const resolveDependenciesSync_1 = require("../utils/resolveDependenciesSync");
+function parseStructure(file) {
+    const ast = (0, core_1.parseFileSync)(file, { syntax: 'typescript', tsx: true });
+    // const ast = swc.parseFileSync(file, { syntax: 'typescript' })
+    const imports = {};
+    const exports = {};
+    ast.body.forEach((node) => {
+        switch (node.type) {
+            case 'ImportDeclaration':
+                node.specifiers.forEach((s) => {
+                    if (s.type === 'ImportSpecifier') {
+                        imports[s.local.value] = node.source.value;
+                    }
+                });
+                break;
+            case 'ExportDeclaration':
+                switch (node.declaration.type) {
+                    case 'VariableDeclaration':
+                        node.declaration.declarations.forEach((declaration) => {
+                            if (declaration.id.type !== 'Identifier')
+                                return;
+                            switch (declaration.init?.type) {
+                                case 'StringLiteral':
+                                    exports[declaration.id.value] = declaration.init.value;
+                                    break;
+                            }
+                        });
+                        break;
+                    case 'FunctionDeclaration':
+                        if (node.declaration.type === 'FunctionDeclaration') {
+                            // console.log('func', node.declaration)
+                        }
+                        break;
+                    default:
+                        console.log('unknown', node.declaration);
+                }
+                break;
+            // default:
+            // console.log('hallo', node)
+        }
+    });
+    return exports.component && exports.exported
+        ? exports
+        : undefined;
+}
+function findPlugins(cwd = process.cwd()) {
+    const dependencies = (0, resolveDependenciesSync_1.resolveDependenciesSync)(cwd);
+    const plugins = [];
+    dependencies.forEach((dependency, path) => {
+        const files = glob_1.default.sync(`${dependency}/plugins/**/*.tsx`);
+        files.forEach((file) => {
+            try {
+                const result = parseStructure(file);
+                if (!result)
+                    return;
+                plugins.push({ ...result, plugin: file.replace(dependency, path).replace('.tsx', '') });
+            }
+            catch (e) {
+                console.error(`Error parsing ${file}`, e);
+            }
+        });
+    });
+    return plugins;
+}
+exports.findPlugins = findPlugins;

package/dist/interceptors/generateInterceptors.d.ts

@@ -0,0 +1,18 @@
+import { ResolveDependency, ResolveDependencyReturn } from '../utils/resolveDependency';
+export declare type PluginConfig = {
+    component: string;
+    exported: string;
+    plugin: string;
+};
+declare type Plugin = ResolveDependencyReturn & {
+    components: Record<string, PluginConfig[]>;
+    target: string;
+    template?: string;
+};
+export declare type MaterializedPlugin = Plugin & {
+    template: string;
+};
+export declare function generateInterceptor(plugin: Plugin): MaterializedPlugin;
+export declare type GenerateInterceptorsReturn = Record<string, MaterializedPlugin>;
+export declare function generateInterceptors(plugins: PluginConfig[], resolve: ResolveDependency): GenerateInterceptorsReturn;
+export {};

package/dist/interceptors/generateInterceptors.js

@@ -0,0 +1,87 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.generateInterceptors = exports.generateInterceptor = void 0;
+function generateInterceptor(plugin) {
+    const { fromModule, components } = plugin;
+    const pluginImports = Object.entries(components)
+        .map(([_, plugins]) => {
+        const duplicateImports = new Set();
+        return plugins
+            .sort((a, b) => a.plugin.localeCompare(b.plugin))
+            .map((p) => `import { Plugin as ${p.plugin.split('/')[p.plugin.split('/').length - 1]} } from '${p.plugin}'`)
+            .filter((importStr) => {
+            if (duplicateImports.has(importStr)) {
+                return false;
+            }
+            duplicateImports.add(importStr);
+            return true;
+        })
+            .join('\n');
+    })
+        .join('\n');
+    const importInjectables = `import { ${Object.entries(components)
+        .map(([component]) => `${component} as ${component}Base`)
+        .join(', ')} } from '${fromModule}'`;
+    const pluginExports = Object.entries(components)
+        .map(([component, plugins]) => {
+        const duplicateImports = new Set();
+        let carry = `${component}Base`;
+        const pluginStr = plugins
+            .reverse()
+            .map((p) => p.plugin.split('/')[p.plugin.split('/').length - 1])
+            .filter((importStr) => {
+            if (duplicateImports.has(importStr)) {
+                return false;
+            }
+            duplicateImports.add(importStr);
+            return true;
+        })
+            .map((name) => {
+            const result = `const ${name}Interceptor = (props: ${component}BaseProps) => (
+  <${name} {...props} Component={${carry}} />
+)`;
+            carry = `${name}Interceptor`;
+            return result;
+        })
+            .join('\n');
+        return `type ${component}BaseProps = React.ComponentProps<typeof ${component}Base>
+
+${pluginStr}
+export const ${component} = ${carry}`;
+    })
+        .join('\n');
+    const componentExports = `export * from '${fromModule}'`;
+    const template = `/* This file is automatically generated. */
+
+/* eslint-disable import/no-extraneous-dependencies */
+/* eslint-disable import/export */
+
+${pluginImports}
+${importInjectables}
+
+${componentExports}
+
+${pluginExports}
+`;
+    return { ...plugin, template };
+}
+exports.generateInterceptor = generateInterceptor;
+function generateInterceptors(plugins, resolve) {
+    // todo: Do not use reduce as we're passing the accumulator to the next iteration
+    const byExportedComponent = plugins.reduce((acc, plug) => {
+        const { exported } = plug;
+        const resolved = resolve(exported);
+        if (!acc[resolved.fromRoot])
+            acc[resolved.fromRoot] = {
+                ...resolved,
+                target: `${resolved.fromRoot}.interceptor`,
+                components: {},
+            };
+        if (!acc[resolved.fromRoot].components[plug.component])
+            acc[resolved.fromRoot].components[plug.component] = [];
+        acc[resolved.fromRoot].components[plug.component].push(plug);
+        return acc;
+    }, {});
+    return Object.fromEntries(Object.entries(byExportedComponent).map(([target, plg]) => [target, generateInterceptor(plg)]));
+}
+exports.generateInterceptors = generateInterceptors;

package/dist/interceptors/rmInterceptors.d.ts

@@ -0,0 +1 @@
+export declare function rmInterceptors(cwd?: string): string[];

package/dist/interceptors/rmInterceptors.js

@@ -0,0 +1,22 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.rmInterceptors = void 0;
+const node_fs_1 = __importDefault(require("node:fs"));
+const glob_1 = __importDefault(require("glob"));
+const resolveDependenciesSync_1 = require("../utils/resolveDependenciesSync");
+function rmInterceptors(cwd = process.cwd()) {
+    const dependencies = (0, resolveDependenciesSync_1.resolveDependenciesSync)(cwd);
+    const removed = [];
+    dependencies.forEach((dependency) => {
+        const files = glob_1.default.sync(`${dependency}/**/*.interceptor.tsx`, { cwd });
+        files.forEach((file) => {
+            node_fs_1.default.unlinkSync(file);
+            removed.push(file);
+        });
+    });
+    return removed;
+}
+exports.rmInterceptors = rmInterceptors;

package/dist/interceptors/writeInterceptors.d.ts

@@ -0,0 +1,2 @@
+import { GenerateInterceptorsReturn } from './generateInterceptors';
+export declare function writeInterceptors(interceptors: GenerateInterceptorsReturn, cwd?: string): void;

package/dist/interceptors/writeInterceptors.js

@@ -0,0 +1,19 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.writeInterceptors = void 0;
+const node_fs_1 = __importDefault(require("node:fs"));
+const path_1 = __importDefault(require("path"));
+function writeInterceptors(interceptors, cwd = process.cwd()) {
+    Object.entries(interceptors).forEach(([target, plugin]) => {
+        // eslint-disable-next-line no-console
+        const fileToWrite = `${path_1.default.join(cwd, plugin.fromRoot)}.interceptor.tsx`;
+        if (!node_fs_1.default.existsSync(fileToWrite) ||
+            node_fs_1.default.readFileSync(fileToWrite, 'utf8').toString() !== plugin.template) {
+            node_fs_1.default.writeFileSync(fileToWrite, plugin.template);
+        }
+    });
+}
+exports.writeInterceptors = writeInterceptors;

package/dist/utils/resolveDependenciesSync.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.resolveDependenciesSync = void 0;
 const node_fs_1 = __importDefault(require("node:fs"));
 const node_path_1 = __importDefault(require("node:path"));
+const resolveCache = new Map();
 function resolveRecursivePackageJson(packageJsonFilename, packageNames) {
     try {
         const packageJsonFile = node_fs_1.default.readFileSync(packageJsonFilename, 'utf-8').toString();
@@ -52,6 +53,11 @@ function resolveRecursivePackageJson(packageJsonFilename, packageNames) {
  * and stop there, not checking children.
  */
 function resolveDependenciesSync(root = process.cwd()) {
-    return resolveRecursivePackageJson(node_path_1.default.join(root, 'package.json'), new Map());
+    const cached = resolveCache.get(root);
+    if (cached)
+        return cached;
+    const result = resolveRecursivePackageJson(node_path_1.default.join(root, 'package.json'), new Map());
+    resolveCache.set(root, result);
+    return result;
 }
 exports.resolveDependenciesSync = resolveDependenciesSync;

package/dist/utils/resolveDependency.d.ts

@@ -0,0 +1,8 @@
+export declare type ResolveDependencyReturn = {
+    dependency: string;
+    root: string;
+    fromRoot: string;
+    fromModule: string;
+};
+export declare type ResolveDependency = (req: string) => ResolveDependencyReturn;
+export declare const resolveDependency: (cwd?: string) => (dependency: string) => ResolveDependencyReturn;

package/dist/utils/resolveDependency.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.resolveDependency = void 0;
+const resolveDependenciesSync_1 = require("./resolveDependenciesSync");
+const resolveDependency = (cwd = process.cwd()) => {
+    const dependencies = (0, resolveDependenciesSync_1.resolveDependenciesSync)(cwd);
+    return (dependency) => {
+        let dependencyPaths = { root: '.', dependency, fromRoot: dependency, fromModule: dependency };
+        dependencies.forEach((root, depCandidate) => {
+            if (dependency.startsWith(depCandidate)) {
+                const relative = dependency.replace(depCandidate, '');
+                const fromRoot = dependency.replace(depCandidate, root);
+                dependencyPaths = {
+                    root,
+                    dependency,
+                    fromRoot,
+                    fromModule: !relative ? '.' : `./${relative.split('/')[relative.split('/').length - 1]}`,
+                };
+            }
+        });
+        return dependencyPaths;
+    };
+};
+exports.resolveDependency = resolveDependency;

package/dist/withGraphCommerce.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.withGraphCommerce = void 0;
 const next_transpile_modules_1 = __importDefault(require("next-transpile-modules"));
 const webpack_1 = require("webpack");
+const InterceptorPlugin_1 = require("./interceptors/InterceptorPlugin");
 const resolveDependenciesSync_1 = require("./utils/resolveDependenciesSync");
 function extendConfig(nextConfig, modules) {
     return {
@@ -42,13 +43,14 @@ function extendConfig(nextConfig, modules) {
                 '@mui/styled-engine': '@mui/styled-engine/modern',
                 '@mui/system': '@mui/system/modern',
             };
+            config.plugins = [...(config.plugins ?? []), new InterceptorPlugin_1.InterceptorPlugin()];
             return typeof nextConfig.webpack === 'function' ? nextConfig.webpack(config, options) : config;
         },
     };
 }
 function withGraphCommerce(conf = {}) {
     const { packages = [] } = conf;
-    const dependencies = [...(0, resolveDependenciesSync_1.resolveDependenciesSync)().keys()];
+    const dependencies = [...(0, resolveDependenciesSync_1.resolveDependenciesSync)().keys()].slice(1);
     const modules = [...dependencies, ...packages];
     return (config) => extendConfig((0, next_transpile_modules_1.default)(modules)(config), modules);
 }

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/next-config",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "4.30.0",
+  "version": "4.31.0-canary.1",
   "type": "commonjs",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -13,8 +13,9 @@
     "prepack": "yarn build"
   },
   "dependencies": {
-    "@graphcommerce/cli": "4.30.0",
+    "@graphcommerce/cli": "4.31.0-canary.1",
     "@lingui/loader": "^3.14.0",
+    "@swc/core": "^1.3.10",
     "js-yaml-loader": "^1.2.2",
     "next-transpile-modules": "^9.0.0",
     "webpack": "^5.73.0"

package/src/index.ts

@@ -1,4 +1,5 @@
 import { NextConfig } from 'next/dist/server/config-shared'
+import React from 'react'
 import { withGraphCommerce } from './withGraphCommerce'
 
 export * from './utils/isMonorepo'
@@ -12,3 +13,7 @@ export function withYarn1Workspaces(packages: string[] = []): (config: NextConfi
 export function withYarn1Scopes(packages?: string[]): (config: NextConfig) => NextConfig {
   return withGraphCommerce({ packages })
 }
+
+export type PluginProps<P extends Record<string, unknown> = Record<string, unknown>> = P & {
+  Component: React.FC<P>
+}

package/src/interceptors/InterceptorPlugin.ts

@@ -0,0 +1,76 @@
+import path from 'path'
+import { Compiler } from 'webpack'
+import { ResolveDependency, resolveDependency } from '../utils/resolveDependency'
+import { findPlugins } from './findPlugins'
+import { generateInterceptors, GenerateInterceptorsReturn } from './generateInterceptors'
+import { writeInterceptors } from './writeInterceptors'
+
+export class InterceptorPlugin {
+  private interceptors: GenerateInterceptorsReturn
+
+  private resolveDependency: ResolveDependency
+
+  constructor() {
+    this.resolveDependency = resolveDependency()
+
+    this.watched = this.watchList()
+    this.interceptors = generateInterceptors(findPlugins(), this.resolveDependency)
+    writeInterceptors(this.interceptors)
+  }
+
+  private watched: string[] = []
+
+  watchList() {
+    return [
+      ...new Set(
+        findPlugins()
+          .map((p) => this.resolveDependency(p.plugin))
+          .map((p) => p.fromRoot),
+      ),
+    ]
+  }
+
+  apply(compiler: Compiler): void {
+    const logger = compiler.getInfrastructureLogger('InterceptorPlugin')
+
+    // After the compilation has succeeded we watch all possible plugin locations.
+    compiler.hooks.afterCompile.tap('InterceptorPlugin', (compilation) => {
+      const watchList = this.watchList()
+      const added = watchList.filter((d) => !this.watched.includes(d))
+      const removed = this.watched.filter((d) => !watchList.includes(d))
+      this.watched = watchList
+
+      if (added.length > 0) {
+        added.forEach((context) => compilation.contextDependencies.add(context))
+      }
+      if (removed.length > 0) {
+        removed.forEach((context) => compilation.contextDependencies.delete(context))
+      }
+      if (added.length > 0 || removed.length > 0) {
+        this.interceptors = generateInterceptors(findPlugins(), this.resolveDependency)
+        writeInterceptors(this.interceptors)
+      }
+    })
+
+    compiler.hooks.normalModuleFactory.tap('InterceptorPlugin', (nmf) => {
+      nmf.hooks.beforeResolve.tap('InterceptorPlugin', (resource) => {
+        const issuer = resource.contextInfo.issuer ?? ''
+
+        const requestPath = path.relative(
+          process.cwd(),
+          path.resolve(resource.context, resource.request),
+        )
+
+        if (issuer.endsWith('interceptor.tsx') && this.interceptors[requestPath]) {
+          logger.log(`Interceptor ${issuer} is requesting the original ${requestPath}`)
+          return
+        }
+
+        if (this.interceptors[requestPath]) {
+          logger.log(`Intercepting... ${this.interceptors[requestPath].fromRoot}}`)
+          resource.request = `${resource.request}.interceptor.tsx`
+        }
+      })
+    })
+  }
+}

package/src/interceptors/findPlugins.ts

@@ -0,0 +1,72 @@
+import { parseFileSync } from '@swc/core'
+import glob from 'glob'
+import { resolveDependenciesSync } from '../utils/resolveDependenciesSync'
+import type { PluginConfig } from './generateInterceptors'
+
+function parseStructure(file: string): { component: string; exported: string } | undefined {
+  const ast = parseFileSync(file, { syntax: 'typescript', tsx: true })
+  // const ast = swc.parseFileSync(file, { syntax: 'typescript' })
+
+  const imports: Record<string, string> = {}
+  const exports: Record<string, string> = {}
+
+  ast.body.forEach((node) => {
+    switch (node.type) {
+      case 'ImportDeclaration':
+        node.specifiers.forEach((s) => {
+          if (s.type === 'ImportSpecifier') {
+            imports[s.local.value] = node.source.value
+          }
+        })
+        break
+      case 'ExportDeclaration':
+        switch (node.declaration.type) {
+          case 'VariableDeclaration':
+            node.declaration.declarations.forEach((declaration) => {
+              if (declaration.id.type !== 'Identifier') return
+
+              switch (declaration.init?.type) {
+                case 'StringLiteral':
+                  exports[declaration.id.value] = declaration.init.value
+                  break
+              }
+            })
+            break
+          case 'FunctionDeclaration':
+            if (node.declaration.type === 'FunctionDeclaration') {
+              // console.log('func', node.declaration)
+            }
+            break
+          default:
+            console.log('unknown', node.declaration)
+        }
+        break
+      // default:
+      // console.log('hallo', node)
+    }
+  })
+
+  return exports.component && exports.exported
+    ? (exports as { component: string; exported: string })
+    : undefined
+}
+
+export function findPlugins(cwd: string = process.cwd()) {
+  const dependencies = resolveDependenciesSync(cwd)
+
+  const plugins: PluginConfig[] = []
+  dependencies.forEach((dependency, path) => {
+    const files = glob.sync(`${dependency}/plugins/**/*.tsx`)
+    files.forEach((file) => {
+      try {
+        const result = parseStructure(file)
+        if (!result) return
+
+        plugins.push({ ...result, plugin: file.replace(dependency, path).replace('.tsx', '') })
+      } catch (e) {
+        console.error(`Error parsing ${file}`, e)
+      }
+    })
+  })
+  return plugins
+}

package/src/interceptors/generateInterceptors.ts

@@ -0,0 +1,123 @@
+import { ResolveDependency, ResolveDependencyReturn } from '../utils/resolveDependency'
+
+export type PluginConfig = {
+  component: string
+  exported: string
+  plugin: string
+}
+
+type Plugin = ResolveDependencyReturn & {
+  components: Record<string, PluginConfig[]>
+  target: string
+  template?: string
+}
+
+export type MaterializedPlugin = Plugin & { template: string }
+
+export function generateInterceptor(plugin: Plugin): MaterializedPlugin {
+  const { fromModule, components } = plugin
+
+  const pluginImports = Object.entries(components)
+    .map(([_, plugins]) => {
+      const duplicateImports = new Set()
+      return plugins
+        .sort((a, b) => a.plugin.localeCompare(b.plugin))
+        .map(
+          (p) =>
+            `import { Plugin as ${p.plugin.split('/')[p.plugin.split('/').length - 1]} } from '${
+              p.plugin
+            }'`,
+        )
+        .filter((importStr) => {
+          if (duplicateImports.has(importStr)) {
+            return false
+          }
+          duplicateImports.add(importStr)
+          return true
+        })
+        .join('\n')
+    })
+    .join('\n')
+
+  const importInjectables = `import { ${Object.entries(components)
+    .map(([component]) => `${component} as ${component}Base`)
+    .join(', ')} } from '${fromModule}'`
+
+  const pluginExports = Object.entries(components)
+    .map(([component, plugins]) => {
+      const duplicateImports = new Set()
+
+      let carry = `${component}Base`
+      const pluginStr = plugins
+        .reverse()
+        .map((p) => p.plugin.split('/')[p.plugin.split('/').length - 1])
+        .filter((importStr) => {
+          if (duplicateImports.has(importStr)) {
+            return false
+          }
+          duplicateImports.add(importStr)
+          return true
+        })
+        .map((name) => {
+          const result = `const ${name}Interceptor = (props: ${component}BaseProps) => (
+  <${name} {...props} Component={${carry}} />
+)`
+          carry = `${name}Interceptor`
+          return result
+        })
+        .join('\n')
+
+      return `type ${component}BaseProps = React.ComponentProps<typeof ${component}Base>
+
+${pluginStr}
+export const ${component} = ${carry}`
+    })
+    .join('\n')
+
+  const componentExports = `export * from '${fromModule}'`
+
+  const template = `/* This file is automatically generated. */
+
+/* eslint-disable import/no-extraneous-dependencies */
+/* eslint-disable import/export */
+
+${pluginImports}
+${importInjectables}
+
+${componentExports}
+
+${pluginExports}
+`
+
+  return { ...plugin, template }
+}
+
+export type GenerateInterceptorsReturn = Record<string, MaterializedPlugin>
+
+export function generateInterceptors(
+  plugins: PluginConfig[],
+  resolve: ResolveDependency,
+): GenerateInterceptorsReturn {
+  // todo: Do not use reduce as we're passing the accumulator to the next iteration
+  const byExportedComponent = plugins.reduce((acc, plug) => {
+    const { exported } = plug
+    const resolved = resolve(exported)
+
+    if (!acc[resolved.fromRoot])
+      acc[resolved.fromRoot] = {
+        ...resolved,
+        target: `${resolved.fromRoot}.interceptor`,
+        components: {},
+      } as Plugin
+
+    if (!acc[resolved.fromRoot].components[plug.component])
+      acc[resolved.fromRoot].components[plug.component] = []
+
+    acc[resolved.fromRoot].components[plug.component].push(plug)
+    return acc
+  }, {} as Record<string, Plugin>)
+
+  return Object.fromEntries(
+    Object.entries(byExportedComponent).map(([target, plg]) => [target, generateInterceptor(plg)]),
+  )
+}

package/src/interceptors/rmInterceptors.ts

@@ -0,0 +1,17 @@
+import fs from 'node:fs'
+import glob from 'glob'
+import { resolveDependenciesSync } from '../utils/resolveDependenciesSync'
+
+export function rmInterceptors(cwd: string = process.cwd()): string[] {
+  const dependencies = resolveDependenciesSync(cwd)
+
+  const removed: string[] = []
+  dependencies.forEach((dependency) => {
+    const files = glob.sync(`${dependency}/**/*.interceptor.tsx`, { cwd })
+    files.forEach((file) => {
+      fs.unlinkSync(file)
+      removed.push(file)
+    })
+  })
+  return removed
+}

package/src/interceptors/writeInterceptors.ts

@@ -0,0 +1,20 @@
+import fs from 'node:fs'
+import path from 'path'
+import { GenerateInterceptorsReturn } from './generateInterceptors'
+
+export function writeInterceptors(
+  interceptors: GenerateInterceptorsReturn,
+  cwd: string = process.cwd(),
+) {
+  Object.entries(interceptors).forEach(([target, plugin]) => {
+    // eslint-disable-next-line no-console
+    const fileToWrite = `${path.join(cwd, plugin.fromRoot)}.interceptor.tsx`
+
+    if (
+      !fs.existsSync(fileToWrite) ||
+      fs.readFileSync(fileToWrite, 'utf8').toString() !== plugin.template
+    ) {
+      fs.writeFileSync(fileToWrite, plugin.template)
+    }
+  })
+}

package/src/utils/resolveDependenciesSync.ts

@@ -2,6 +2,8 @@ import fs from 'node:fs'
 import path from 'node:path'
 import type { PackageJson } from 'type-fest'
 
+const resolveCache: Map<string, Map<string, string>> = new Map<string, Map<string, string>>()
+
 function resolveRecursivePackageJson(
   packageJsonFilename: string,
   packageNames: Map<string, string>,
@@ -55,5 +57,9 @@ function resolveRecursivePackageJson(
  * and stop there, not checking children.
  */
 export function resolveDependenciesSync(root = process.cwd()) {
-  return resolveRecursivePackageJson(path.join(root, 'package.json'), new Map())
+  const cached = resolveCache.get(root)
+  if (cached) return cached
+  const result = resolveRecursivePackageJson(path.join(root, 'package.json'), new Map())
+  resolveCache.set(root, result)
+  return result
 }

package/src/utils/resolveDependency.ts

@@ -0,0 +1,32 @@
+import { resolveDependenciesSync } from './resolveDependenciesSync'
+
+export type ResolveDependencyReturn = {
+  dependency: string
+  root: string
+  fromRoot: string
+  fromModule: string
+}
+
+export type ResolveDependency = (req: string) => ResolveDependencyReturn
+
+export const resolveDependency = (cwd: string = process.cwd()) => {
+  const dependencies = resolveDependenciesSync(cwd)
+  return (dependency: string): ResolveDependencyReturn => {
+    let dependencyPaths = { root: '.', dependency, fromRoot: dependency, fromModule: dependency }
+
+    dependencies.forEach((root, depCandidate) => {
+      if (dependency.startsWith(depCandidate)) {
+        const relative = dependency.replace(depCandidate, '')
+        const fromRoot = dependency.replace(depCandidate, root)
+
+        dependencyPaths = {
+          root,
+          dependency,
+          fromRoot,
+          fromModule: !relative ? '.' : `./${relative.split('/')[relative.split('/').length - 1]}`,
+        }
+      }
+    })
+    return dependencyPaths
+  }
+}

package/src/withGraphCommerce.ts

@@ -1,6 +1,7 @@
 import type { NextConfig } from 'next'
 import withTranspileModules from 'next-transpile-modules'
 import { DefinePlugin, Configuration } from 'webpack'
+import { InterceptorPlugin } from './interceptors/InterceptorPlugin'
 import { resolveDependenciesSync } from './utils/resolveDependenciesSync'
 
 function extendConfig(nextConfig: NextConfig, modules: string[]): NextConfig {
@@ -44,6 +45,8 @@ function extendConfig(nextConfig: NextConfig, modules: string[]): NextConfig {
         '@mui/system': '@mui/system/modern',
       }
 
+      config.plugins = [...(config.plugins ?? []), new InterceptorPlugin()]
+
       return typeof nextConfig.webpack === 'function' ? nextConfig.webpack(config, options) : config
     },
   }
@@ -58,7 +61,7 @@ export function withGraphCommerce(
   conf: GraphCommerceConfig = {},
 ): (config: NextConfig) => NextConfig {
   const { packages = [] } = conf
-  const dependencies = [...resolveDependenciesSync().keys()]
+  const dependencies = [...resolveDependenciesSync().keys()].slice(1)
 
   const modules = [...dependencies, ...packages]
   return (config) => extendConfig(withTranspileModules(modules)(config), modules)