@graphcommerce/next-config 8.1.0-canary.7 → 8.1.0-canary.8

package/__tests__/interceptors/generateInterceptors.ts

@@ -8,8 +8,10 @@ import { resolveDependency } from '../../src/utils/resolveDependency'
 
 const projectRoot = `${process.cwd()}/examples/magento-graphcms`
 
+const startLocation = '/** @see {@link file://'
+
 const expectImport = (value: string | undefined): jest.JestMatchers<string> =>
-  expect(value?.slice(value.indexOf(`import`) - 1, value.indexOf(SOURCE_START) - 1).trim())
+  expect(value?.slice(value.indexOf(`import`) - 1, value.indexOf(startLocation) - 1).trim())
 
 const expectInterceptor = (value: string | undefined): jest.JestMatchers<string> => {
   const val = value?.slice(value.indexOf(SOURCE_END) + SOURCE_END.length).trim()
@@ -72,34 +74,29 @@ it('it generates an interceptor', async () => {
     interceptors['packages/magento-cart-payment-method/PaymentMethodContext/PaymentMethodContext']
       ?.template
   expectInterceptor(result).toMatchInlineSnapshot(`
-    "type PluginAddBraintreeMethodsInterceptorProps = DistributedOmit<
-      React.ComponentProps<typeof PluginAddBraintreeMethodsSource>,
-      'Prev'
-    >
-    const PluginAddBraintreeMethodsInterceptor = (props: PluginAddBraintreeMethodsInterceptorProps) => {
-      return (
-        <PluginAddBraintreeMethodsSource
-          {...props}
-          Prev={PaymentMethodContextProviderOriginal as React.FC}
-        />
-      )
-    }
-
-    type PluginAddMollieMethodsInterceptorProps = DistributedOmit<
-      React.ComponentProps<typeof PluginAddMollieMethodsSource>,
-      'Prev'
-    >
-    const PluginAddMollieMethodsInterceptor = (
-      props: PluginAddBraintreeMethodsInterceptorProps & PluginAddMollieMethodsInterceptorProps,
-    ) => {
-      return (
-        <PluginAddMollieMethodsSource
-          {...props}
-          Prev={PluginAddBraintreeMethodsInterceptor as React.FC}
-        />
-      )
-    }
-    export const PaymentMethodContextProvider = PluginAddMollieMethodsInterceptor"
+    "type AddBraintreeMethodsProps = OmitPrev<React.ComponentProps<typeof AddBraintreeMethods>, 'Prev'>
+
+    const AddBraintreeMethodsInterceptor = (props: AddBraintreeMethodsProps) => (
+      <AddBraintreeMethods {...props} Prev={PaymentMethodContextProviderOriginal} />
+    )
+
+    type AddMollieMethodsProps = AddBraintreeMethodsProps &
+      OmitPrev<React.ComponentProps<typeof AddMollieMethods>, 'Prev'>
+
+    const AddMollieMethodsInterceptor = (props: AddMollieMethodsProps) => (
+      <AddMollieMethods {...props} Prev={AddBraintreeMethodsInterceptor} />
+    )
+
+    /**
+     * Here you see the 'interceptor' that is applying all the configured plugins.
+     *
+     * This file is NOT meant to be modified directly and is auto-generated if the plugins or the original source changes.
+     *
+     * @see {@link file://./PaymentMethodContext.tsx} for original source file
+     * @see {AddBraintreeMethods} for source of applied plugin
+     * @see {AddMollieMethods} for source of applied plugin
+     */
+    export const PaymentMethodContextProvider = AddMollieMethodsInterceptor"
   `)
 })
 
@@ -125,9 +122,9 @@ it("resolves a 'root plugin' to be relative to the interceptor", async () => {
     interceptors['packages/magento-cart-payment-method/PaymentMethodContext/PaymentMethodContext']
       ?.template,
   ).toMatchInlineSnapshot(`
-    "import type { DistributedOmit } from 'type-fest'
+    "import type { DistributedOmit as OmitPrev } from 'type-fest'
 
-    import { Plugin as PluginAddPaymentMethodEnhancerSource } from '../../../plugins/AddPaymentMethodEnhancer'"
+    import { Plugin as AddPaymentMethodEnhancer } from '../../../plugins/AddPaymentMethodEnhancer'"
   `)
 })
 
@@ -158,40 +155,38 @@ it('it can apply multiple plugins to a single export', async () => {
     interceptors['packages/magento-cart-payment-method/PaymentMethodContext/PaymentMethodContext']
       ?.template
   expectImport(result).toMatchInlineSnapshot(`
-    "import type { DistributedOmit } from 'type-fest'
+    "import type { DistributedOmit as OmitPrev } from 'type-fest'
 
-    import { Plugin as PluginAddAdyenMethodsSource } from '@graphcommerce/magento-payment-adyen/plugins/AddAdyenMethods'
-    import { Plugin as PluginAddMollieMethodsSource } from '@graphcommerce/mollie-magento-payment/plugins/AddMollieMethods'"
+    import { Plugin as AddAdyenMethods } from '@graphcommerce/magento-payment-adyen/plugins/AddAdyenMethods'
+    import { Plugin as AddMollieMethods } from '@graphcommerce/mollie-magento-payment/plugins/AddMollieMethods'"
   `)
 
   expectOriginal(result).toContain('PaymentMethodContextProviderOriginal')
 
   expectInterceptor(result).toMatchInlineSnapshot(`
-    "type PluginAddAdyenMethodsInterceptorProps = DistributedOmit<
-      React.ComponentProps<typeof PluginAddAdyenMethodsSource>,
-      'Prev'
-    >
-    const PluginAddAdyenMethodsInterceptor = (props: PluginAddAdyenMethodsInterceptorProps) => {
-      return (
-        <PluginAddAdyenMethodsSource
-          {...props}
-          Prev={PaymentMethodContextProviderOriginal as React.FC}
-        />
-      )
-    }
-
-    type PluginAddMollieMethodsInterceptorProps = DistributedOmit<
-      React.ComponentProps<typeof PluginAddMollieMethodsSource>,
-      'Prev'
-    >
-    const PluginAddMollieMethodsInterceptor = (
-      props: PluginAddAdyenMethodsInterceptorProps & PluginAddMollieMethodsInterceptorProps,
-    ) => {
-      return (
-        <PluginAddMollieMethodsSource {...props} Prev={PluginAddAdyenMethodsInterceptor as React.FC} />
-      )
-    }
-    export const PaymentMethodContextProvider = PluginAddMollieMethodsInterceptor"
+    "type AddAdyenMethodsProps = OmitPrev<React.ComponentProps<typeof AddAdyenMethods>, 'Prev'>
+
+    const AddAdyenMethodsInterceptor = (props: AddAdyenMethodsProps) => (
+      <AddAdyenMethods {...props} Prev={PaymentMethodContextProviderOriginal} />
+    )
+
+    type AddMollieMethodsProps = AddAdyenMethodsProps &
+      OmitPrev<React.ComponentProps<typeof AddMollieMethods>, 'Prev'>
+
+    const AddMollieMethodsInterceptor = (props: AddMollieMethodsProps) => (
+      <AddMollieMethods {...props} Prev={AddAdyenMethodsInterceptor} />
+    )
+
+    /**
+     * Here you see the 'interceptor' that is applying all the configured plugins.
+     *
+     * This file is NOT meant to be modified directly and is auto-generated if the plugins or the original source changes.
+     *
+     * @see {@link file://./PaymentMethodContext.tsx} for original source file
+     * @see {AddAdyenMethods} for source of applied plugin
+     * @see {AddMollieMethods} for source of applied plugin
+     */
+    export const PaymentMethodContextProvider = AddMollieMethodsInterceptor"
   `)
 })
 
@@ -223,19 +218,21 @@ it('it handles on duplicates gracefully', async () => {
     interceptors['packages/magento-cart-payment-method/PaymentMethodContext/PaymentMethodContext']
       ?.template
   expectInterceptor(result).toMatchInlineSnapshot(`
-    "type PluginAddBraintreeMethodsInterceptorProps = DistributedOmit<
-      React.ComponentProps<typeof PluginAddBraintreeMethodsSource>,
-      'Prev'
-    >
-    const PluginAddBraintreeMethodsInterceptor = (props: PluginAddBraintreeMethodsInterceptorProps) => {
-      return (
-        <PluginAddBraintreeMethodsSource
-          {...props}
-          Prev={PaymentMethodContextProviderOriginal as React.FC}
-        />
-      )
-    }
-    export const PaymentMethodContextProvider = PluginAddBraintreeMethodsInterceptor"
+    "type AddBraintreeMethodsProps = OmitPrev<React.ComponentProps<typeof AddBraintreeMethods>, 'Prev'>
+
+    const AddBraintreeMethodsInterceptor = (props: AddBraintreeMethodsProps) => (
+      <AddBraintreeMethods {...props} Prev={PaymentMethodContextProviderOriginal} />
+    )
+
+    /**
+     * Here you see the 'interceptor' that is applying all the configured plugins.
+     *
+     * This file is NOT meant to be modified directly and is auto-generated if the plugins or the original source changes.
+     *
+     * @see {@link file://./PaymentMethodContext.tsx} for original source file
+     * @see {AddBraintreeMethods} for source of applied plugin
+     */
+    export const PaymentMethodContextProvider = AddBraintreeMethodsInterceptor"
   `)
 })
 
@@ -392,8 +389,8 @@ it('adds debug logging to interceptors for components', async () => {
   )
 
   expectImport(interceptors['packages/graphql/config']?.template).toMatchInlineSnapshot(`
-    "import { plugin as pluginmagentoInitMemoryCacheSource } from '@graphcommerce/magento-graphql/plugins/magentoInitMemoryCache'
-    import { plugin as pluginhygraphInitMemoryCacheSource } from '@graphcommerce/magento-hygraph/plugins/hygraphInitMemoryCache'"
+    "import { plugin as magentoInitMemoryCache } from '@graphcommerce/magento-graphql/plugins/magentoInitMemoryCache'
+    import { plugin as hygraphInitMemoryCache } from '@graphcommerce/magento-hygraph/plugins/hygraphInitMemoryCache'"
   `)
 
   expectOriginal(interceptors['packages/graphql/config']?.template).toMatchInlineSnapshot(`
@@ -426,21 +423,29 @@ it('adds debug logging to interceptors for components', async () => {
       console.warn(log, ...additional)
     }
 
-    const pluginhygraphInitMemoryCacheInterceptor: typeof graphqlConfigOriginal = (...args) => {
+    const hygraphInitMemoryCacheInterceptor: typeof graphqlConfigOriginal = (...args) => {
       logOnce(
-        \`🔌 Calling graphqlConfig with plugin(s): pluginmagentoInitMemoryCache wrapping pluginhygraphInitMemoryCache wrapping graphqlConfig()\`,
+        \`🔌 Calling graphqlConfig with plugin(s): magentoInitMemoryCache wrapping hygraphInitMemoryCache wrapping graphqlConfig()\`,
       )
-      return pluginhygraphInitMemoryCacheSource(graphqlConfigOriginal, ...args)
+      return hygraphInitMemoryCache(graphqlConfigOriginal, ...args)
     }
-    const pluginmagentoInitMemoryCacheInterceptor: typeof pluginhygraphInitMemoryCacheInterceptor = (
-      ...args
-    ) => {
+    const magentoInitMemoryCacheInterceptor: typeof hygraphInitMemoryCacheInterceptor = (...args) => {
       logOnce(
-        \`🔌 Calling graphqlConfig with plugin(s): pluginhygraphInitMemoryCache wrapping pluginmagentoInitMemoryCache wrapping graphqlConfig()\`,
+        \`🔌 Calling graphqlConfig with plugin(s): hygraphInitMemoryCache wrapping magentoInitMemoryCache wrapping graphqlConfig()\`,
       )
-      return pluginmagentoInitMemoryCacheSource(pluginhygraphInitMemoryCacheInterceptor, ...args)
+      return magentoInitMemoryCache(hygraphInitMemoryCacheInterceptor, ...args)
     }
-    export const graphqlConfig = pluginmagentoInitMemoryCacheInterceptor"
+
+    /**
+     * Here you see the 'interceptor' that is applying all the configured plugins.
+     *
+     * This file is NOT meant to be modified directly and is auto-generated if the plugins or the original source changes.
+     *
+     * @see {@link file://./config.ts} for original source file
+     * @see {hygraphInitMemoryCache} for source of applied plugin
+     * @see {magentoInitMemoryCache} for source of applied plugin
+     */
+    export const graphqlConfig = magentoInitMemoryCacheInterceptor"
   `)
 })
 
@@ -510,7 +515,7 @@ it('Should apply overrides to the correct file', async () => {
     interceptors['packages/magento-product/components/ProductStaticPaths/getProductStaticPaths']
       ?.template
   expectImport(result).toMatchInlineSnapshot(
-    `"import { getProductStaticPaths as getProductStaticPathsreplaceGetProductStaticPathsSource } from '../../../../plugins/replaceGetProductStaticPaths'"`,
+    `"import { getProductStaticPaths as replaceGetProductStaticPaths } from '../../../../plugins/replaceGetProductStaticPaths'"`,
   )
 
   expectOriginal(result).toContain(`getProductStaticPathsDisabled`)
@@ -637,10 +642,10 @@ export const Plugin = ConfigurableProductPageName
     interceptors['packages/magento-product/components/ProductPageName/ProductPageName']?.template
 
   expectImport(result).toMatchInlineSnapshot(`
-    "import type { DistributedOmit } from 'type-fest'
+    "import type { DistributedOmit as OmitPrev } from 'type-fest'
 
-    import { Plugin as PluginConfigurableProductPageNameSource } from '@graphcommerce/magento-product-configurable/plugins/ConfigurableProductPage/ConfigurableProductPageName'
-    import { ProductPageName as ProductPageNameMyPluginSource } from '../../../../plugins/MyPlugin'"
+    import { Plugin as ConfigurableProductPageName } from '@graphcommerce/magento-product-configurable/plugins/ConfigurableProductPage/ConfigurableProductPageName'
+    import { ProductPageName as MyPlugin } from '../../../../plugins/MyPlugin'"
   `)
 
   expectOriginal(result).toMatchInlineSnapshot(`
@@ -655,26 +660,25 @@ export const Plugin = ConfigurableProductPageName
   `)
 
   expectInterceptor(result).toMatchInlineSnapshot(`
-    "type ProductPageNameMyPluginInterceptorProps = React.ComponentProps<
-      typeof ProductPageNameMyPluginSource
-    >
-
-    type PluginConfigurableProductPageNameInterceptorProps = DistributedOmit<
-      React.ComponentProps<typeof PluginConfigurableProductPageNameSource>,
-      'Prev'
-    >
-    const PluginConfigurableProductPageNameInterceptor = (
-      props: ProductPageNameMyPluginInterceptorProps &
-        PluginConfigurableProductPageNameInterceptorProps,
-    ) => {
-      return (
-        <PluginConfigurableProductPageNameSource
-          {...props}
-          Prev={ProductPageNameMyPluginSource as React.FC}
-        />
-      )
-    }
-    export const ProductPageName = PluginConfigurableProductPageNameInterceptor"
+    "type MyPluginProps = React.ComponentProps<typeof MyPlugin>
+
+    type ConfigurableProductPageNameProps = MyPluginProps &
+      OmitPrev<React.ComponentProps<typeof ConfigurableProductPageName>, 'Prev'>
+
+    const ConfigurableProductPageNameInterceptor = (props: ConfigurableProductPageNameProps) => (
+      <ConfigurableProductPageName {...props} Prev={MyPlugin} />
+    )
+
+    /**
+     * Here you see the 'interceptor' that is applying all the configured plugins.
+     *
+     * This file is NOT meant to be modified directly and is auto-generated if the plugins or the original source changes.
+     *
+     * @see {@link file://./ProductPageName.tsx} for original source file
+     * @see {MyPlugin} for replacement of the original source (original source not used)
+     * @see {ConfigurableProductPageName} for source of applied plugin
+     */
+    export const ProductPageName = ConfigurableProductPageNameInterceptor"
   `)
 })
 

package/__tests__/utils/resolveDependenciesSync.ts

@@ -61,6 +61,10 @@ it('resolves dependences', () => {
       "@graphcommerce/eslint-config-pwa" => "packagesDev/eslint-config",
       "@graphcommerce/typescript-config-pwa" => "packagesDev/typescript-config",
       "@graphcommerce/prettier-config-pwa" => "packagesDev/prettier-config",
+      "@graphcommerce/magento-cart-pickup" => "packages/magento-cart-pickup",
+      "@graphcommerce/magento-payment-braintree" => "packages/magento-payment-braintree",
+      "@graphcommerce/mollie-magento-payment" => "packages/mollie-magento-payment",
+      "@graphcommerce/magento-payment-paypal" => "packages/magento-payment-paypal",
     }
   `)
 })

package/dist/config/commands/exportConfig.js

@@ -1,8 +1,13 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.exportConfig = void 0;
 const loadConfig_1 = require("../loadConfig");
 const exportConfigToEnv_1 = require("../utils/exportConfigToEnv");
+const dotenv_1 = __importDefault(require("dotenv"));
+dotenv_1.default.config();
 // eslint-disable-next-line @typescript-eslint/require-await
 async function exportConfig() {
     const conf = (0, loadConfig_1.loadConfig)(process.cwd());

package/dist/config/commands/generateConfig.js

@@ -1,13 +1,18 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.generateConfig = void 0;
 const fs_1 = require("fs");
 // eslint-disable-next-line import/no-extraneous-dependencies
 const cli_1 = require("@graphql-codegen/cli");
 const core_1 = require("@swc/core");
+const dotenv_1 = __importDefault(require("dotenv"));
 const isMonorepo_1 = require("../../utils/isMonorepo");
 const resolveDependenciesSync_1 = require("../../utils/resolveDependenciesSync");
 const resolveDependency_1 = require("../../utils/resolveDependency");
+dotenv_1.default.config();
 const packages = [...(0, resolveDependenciesSync_1.resolveDependenciesSync)().values()].filter((p) => p !== '.');
 const resolve = (0, resolveDependency_1.resolveDependency)();
 const schemaLocations = packages.map((p) => `${p}/**/Config.graphqls`);

package/dist/config/commands/generateIntercetors.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.exportConfig = void 0;
+const loadConfig_1 = require("../loadConfig");
+// eslint-disable-next-line @typescript-eslint/require-await
+async function exportConfig() {
+    const conf = (0, loadConfig_1.loadConfig)(process.cwd());
+}
+exports.exportConfig = exportConfig;

package/dist/index.js

@@ -21,3 +21,4 @@ __exportStar(require("./withGraphCommerce"), exports);
 __exportStar(require("./generated/config"), exports);
 __exportStar(require("./config"), exports);
 __exportStar(require("./runtimeCachingOptimizations"), exports);
+__exportStar(require("./interceptors/commands/codegenInterceptors"), exports);

package/dist/interceptors/commands/codegenInterceptors.js

@@ -0,0 +1,23 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.codegenInterceptors = void 0;
+const loadConfig_1 = require("../../config/loadConfig");
+const resolveDependency_1 = require("../../utils/resolveDependency");
+const findPlugins_1 = require("../findPlugins");
+const generateInterceptors_1 = require("../generateInterceptors");
+const writeInterceptors_1 = require("../writeInterceptors");
+const dotenv_1 = __importDefault(require("dotenv"));
+dotenv_1.default.config();
+// eslint-disable-next-line @typescript-eslint/require-await
+async function codegenInterceptors() {
+    const conf = (0, loadConfig_1.loadConfig)(process.cwd());
+    const [plugins, errors] = (0, findPlugins_1.findPlugins)(conf);
+    const generatedInterceptors = await (0, generateInterceptors_1.generateInterceptors)(plugins, (0, resolveDependency_1.resolveDependency)(), conf.debug, true);
+    // const generated = Date.now()
+    // console.log('Generated interceptors in', generated - found, 'ms')
+    await (0, writeInterceptors_1.writeInterceptors)(generatedInterceptors);
+}
+exports.codegenInterceptors = codegenInterceptors;

package/dist/interceptors/commands/generateIntercetors.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.exportConfig = void 0;
+const loadConfig_1 = require("../../config/loadConfig");
+// eslint-disable-next-line @typescript-eslint/require-await
+async function exportConfig() {
+    const conf = (0, loadConfig_1.loadConfig)(process.cwd());
+}
+exports.exportConfig = exportConfig;

package/dist/interceptors/findPlugins.js

@@ -17,10 +17,14 @@ function findPlugins(config, cwd = process.cwd()) {
     const debug = Boolean(config.debug?.pluginStatus);
     const errors = [];
     const plugins = [];
-    dependencies.forEach((dependency, path) => {
-        const files = (0, glob_1.sync)(`${dependency}/plugins/**/*.{ts,tsx}`, { dotRelative: true });
+    dependencies.forEach((filePath, packageName) => {
+        const files = (0, glob_1.sync)(`${filePath}/plugins/**/*.{ts,tsx}`);
         files.forEach((file) => {
-            const sourceModule = file.replace(dependency, path).replace('.tsx', '').replace('.ts', '');
+            let sourceModule = file.replace('.tsx', '').replace('.ts', '');
+            if (file.startsWith(filePath))
+                sourceModule = `${packageName}/${sourceModule.slice(filePath.length + 1)}`;
+            if (packageName === '.' && !sourceModule.startsWith('.'))
+                sourceModule = `./${sourceModule}`;
             try {
                 const ast = (0, core_1.parseFileSync)(file, { syntax: 'typescript', tsx: true });
                 (0, parseStructure_1.parseStructure)(ast, config, sourceModule).forEach((result) => {

package/dist/interceptors/generateInterceptor.js

@@ -39,19 +39,19 @@ function isPluginConfig(plugin) {
     return isPluginBaseConfig(plugin);
 }
 exports.isPluginConfig = isPluginConfig;
-exports.SOURCE_START = '/** ❗️ Original (modified) source starts here **/';
-exports.SOURCE_END = '/** ❗️ Original (modified) source ends here **/';
+exports.SOURCE_START = '/** Original source starts here (do not modify!): **/';
+exports.SOURCE_END = '/** Original source ends here (do not modify!) **/';
 const originalSuffix = 'Original';
-const sourceSuffix = 'Source';
+const sourceSuffix = 'Plugin';
 const interceptorSuffix = 'Interceptor';
 const disabledSuffix = 'Disabled';
-const name = (plugin) => `${plugin.sourceExport}${plugin.sourceModule
+const name = (plugin) => `${plugin.sourceModule
     .split('/')[plugin.sourceModule.split('/').length - 1].replace(/[^a-zA-Z0-9]/g, '')}`;
 const fileName = (plugin) => `${plugin.sourceModule}#${plugin.sourceExport}`;
 const originalName = (n) => `${n}${originalSuffix}`;
-const sourceName = (n) => `${n}${sourceSuffix}`;
+const sourceName = (n) => `${n}`;
 const interceptorName = (n) => `${n}${interceptorSuffix}`;
-const interceptorPropsName = (n) => `${interceptorName(n)}Props`;
+const interceptorPropsName = (n) => `${n}Props`;
 function moveRelativeDown(plugins) {
     return [...plugins].sort((a, b) => {
         if (a.sourceModule.startsWith('.') && !b.sourceModule.startsWith('.'))
@@ -102,7 +102,9 @@ async function generateInterceptor(interceptor, config, oldInterceptorSource) {
         .map(([base, plugins]) => {
         const duplicateInterceptors = new Set();
         let carry = originalName(base);
-        const carryProps = [];
+        let carryProps = [];
+        const pluginSee = [];
+        pluginSee.push(`@see {@link file://${interceptor.sourcePathRelative}} for original source file`);
         const pluginStr = plugins
             .reverse()
             .filter((p) => {
@@ -121,26 +123,31 @@ async function generateInterceptor(interceptor, config, oldInterceptorSource) {
                 new RenameVisitor_1.RenameVisitor([originalName(p.targetExport)], (s) => s.replace(originalSuffix, disabledSuffix)).visitModule(ast);
                 carryProps.push(interceptorPropsName(name(p)));
                 result = `type ${interceptorPropsName(name(p))} = React.ComponentProps<typeof ${sourceName(name(p))}>`;
+                pluginSee.push(`@see {${sourceName(name(p))}} for replacement of the original source (original source not used)`);
             }
             if (isReactPluginConfig(p)) {
-                carryProps.push(interceptorPropsName(name(p)));
+                const withBraces = config.pluginStatus || process.env.NODE_ENV === 'development';
                 result = `
-              type ${interceptorPropsName(name(p))} = DistributedOmit<React.ComponentProps<typeof ${sourceName(name(p))}>, 'Prev'>
-              const ${interceptorName(name(p))} = (props: ${carryProps.join(' & ')}) => {
+              type ${interceptorPropsName(name(p))} = ${carryProps.join(' & ')} & OmitPrev<React.ComponentProps<typeof ${sourceName(name(p))}>, 'Prev'>
+              
+              const ${interceptorName(name(p))} = (props: ${interceptorPropsName(name(p))}) => ${withBraces ? `{` : '('}
                 ${config.pluginStatus ? `logOnce(\`🔌 Rendering ${base} with plugin(s): ${wrapChain} wrapping <${base}/>\`)` : ''}
 
                 ${process.env.NODE_ENV === 'development'
                     ? `if(!props['data-plugin'])
                   logOnce('${fileName(p)} does not spread props to prev: <Prev {...props}/>. This will cause issues if multiple plugins are applied to this component.')`
                     : ''}
-                return <${sourceName(name(p))} {...props} Prev={${carry} as React.FC} />
-              }`;
+                ${withBraces ? `return` : ''} <${sourceName(name(p))} {...props} Prev={${carry}} />
+              ${withBraces ? `}` : ')'}`;
+                carryProps = [interceptorPropsName(name(p))];
+                pluginSee.push(`@see {${sourceName(name(p))}} for source of applied plugin`);
             }
             if (isMethodPluginConfig(p)) {
                 result = `const ${interceptorName(name(p))}: typeof ${carry} = (...args) => {
                 ${config.pluginStatus ? `logOnce(\`🔌 Calling ${base} with plugin(s): ${wrapChain} wrapping ${base}()\`)` : ''}
                 return ${sourceName(name(p))}(${carry}, ...args)
               }`;
+                pluginSee.push(`@see {${sourceName(name(p))}} for source of applied plugin`);
             }
             carry = p.type === 'replace' ? sourceName(name(p)) : interceptorName(name(p));
             return result;
@@ -151,14 +158,24 @@ async function generateInterceptor(interceptor, config, oldInterceptorSource) {
         if (isComponent && plugins.some((p) => isMethodPluginConfig(p))) {
             throw new Error(`Cannot mix React and Method plugins for ${base} in ${dependency}.`);
         }
+        const seeString = `
+      /**
+       * Here you see the 'interceptor' that is applying all the configured plugins.
+       *
+       * This file is NOT meant to be modified directly and is auto-generated if the plugins or the original source changes.
+       * 
+       ${pluginSee.map((s) => `* ${s}`).join('\n')}
+       */`;
         if (process.env.NODE_ENV === 'development' && isComponent) {
             return `${pluginStr}
+          ${seeString}
           export const ${base}: typeof ${carry} = (props) => {
             return <${carry} {...props} data-plugin />
           }`;
         }
         return `
         ${pluginStr}
+        ${seeString}
         export const ${base} = ${carry}
       `;
     })
@@ -177,11 +194,12 @@ async function generateInterceptor(interceptor, config, oldInterceptorSource) {
     /* eslint-disable */
     /* This file is automatically generated for ${dependency} */
     ${Object.values(targetExports).some((t) => t.some((p) => p.type === 'component'))
-        ? `import type { DistributedOmit } from 'type-fest'`
+        ? `import type { DistributedOmit as OmitPrev } from 'type-fest'`
         : ''}
 
     ${pluginImports}
 
+    /** @see {@link file://${interceptor.sourcePathRelative}} for source of original */
     ${exports.SOURCE_START}
     ${(0, swc_1.printSync)(ast).code}
     ${exports.SOURCE_END}

package/dist/interceptors/generateInterceptors.js

@@ -8,7 +8,7 @@ const node_path_1 = __importDefault(require("node:path"));
 const promises_1 = __importDefault(require("node:fs/promises"));
 const findOriginalSource_1 = require("./findOriginalSource");
 const generateInterceptor_1 = require("./generateInterceptor");
-async function generateInterceptors(plugins, resolve, config) {
+async function generateInterceptors(plugins, resolve, config, force) {
     const byTargetModuleAndExport = (0, generateInterceptor_1.moveRelativeDown)(plugins).reduce((acc, plug) => {
         let { sourceModule: pluginPath } = plug;
         if (!(0, generateInterceptor_1.isPluginConfig)(plug) || !plug.enabled)
@@ -40,10 +40,11 @@ async function generateInterceptors(plugins, resolve, config) {
     }, {});
     return Object.fromEntries(await Promise.all(Object.entries(byTargetModuleAndExport).map(async ([target, interceptor]) => {
         const file = `${interceptor.fromRoot}.interceptor.tsx`;
-        const originalSource = (await promises_1.default
-            .access(file, promises_1.default.constants.F_OK)
-            .then(() => true)
-            .catch(() => false))
+        const originalSource = !force &&
+            (await promises_1.default
+                .access(file, promises_1.default.constants.F_OK)
+                .then(() => true)
+                .catch(() => false))
             ? (await promises_1.default.readFile(file)).toString()
             : undefined;
         return [

package/dist/utils/resolveDependenciesSync.js

@@ -8,7 +8,7 @@ const node_fs_1 = __importDefault(require("node:fs"));
 const node_path_1 = __importDefault(require("node:path"));
 const PackagesSort_1 = require("./PackagesSort");
 const resolveCache = new Map();
-function resolveRecursivePackageJson(dependencyPath, dependencyStructure, root) {
+function resolveRecursivePackageJson(dependencyPath, dependencyStructure, root, additionalDependencies = []) {
     const isRoot = dependencyPath === root;
     const fileName = require.resolve(node_path_1.default.join(dependencyPath, 'package.json'));
     const packageJsonFile = node_fs_1.default.readFileSync(fileName, 'utf-8').toString();
@@ -22,8 +22,9 @@ function resolveRecursivePackageJson(dependencyPath, dependencyStructure, root)
         return dependencyStructure;
     const dependencies = [
         ...new Set([
-            ...Object.keys(packageJson.dependencies ?? {}),
-            ...Object.keys(packageJson.devDependencies ?? {}),
+            ...Object.keys(packageJson.dependencies ?? []),
+            ...Object.keys(packageJson.devDependencies ?? []),
+            ...additionalDependencies,
             // ...Object.keys(packageJson.peerDependencies ?? {}),
         ].filter((name) => name.includes('graphcommerce'))),
     ];
@@ -63,7 +64,7 @@ function resolveDependenciesSync(root = process.cwd()) {
     const cached = resolveCache.get(root);
     if (cached)
         return cached;
-    const dependencyStructure = resolveRecursivePackageJson(root, {}, root);
+    const dependencyStructure = resolveRecursivePackageJson(root, {}, root, process.env.PRIVATE_ADDITIONAL_DEPENDENCIES?.split(',') ?? []);
     const sorted = sortDependencies(dependencyStructure);
     resolveCache.set(root, sorted);
     return sorted;

package/dist/utils/resolveDependency.js

@@ -14,6 +14,7 @@ const resolveDependency = (cwd = process.cwd()) => {
             root: '.',
             source: '',
             sourcePath: '',
+            sourcePathRelative: '',
             dependency,
             fromRoot: dependency,
             fromModule: dependency,
@@ -45,6 +46,9 @@ const resolveDependency = (cwd = process.cwd()) => {
                 let fromModule = !relative
                     ? '.'
                     : `./${relative.split('/')[relative.split('/').length - 1]}`;
+                const sourcePathRelative = !sourcePath
+                    ? '.'
+                    : `./${sourcePath.split('/')[sourcePath.split('/').length - 1]}`;
                 if (dependency.startsWith('./'))
                     fromModule = `.${relative}`;
                 dependencyPaths = {
@@ -55,6 +59,7 @@ const resolveDependency = (cwd = process.cwd()) => {
                     fromModule,
                     source,
                     sourcePath,
+                    sourcePathRelative,
                 };
             }
         });

package/dist/withGraphCommerce.js

@@ -101,8 +101,8 @@ function withGraphCommerce(nextConfig, cwd) {
             // Make import.meta.graphCommerce available for usage.
             config.plugins.push(new webpack_1.DefinePlugin(importMetaPaths));
             // To properly properly treeshake @apollo/client we need to define the __DEV__ property
+            config.plugins.push(new webpack_1.DefinePlugin({ 'globalThis.__DEV__': options.dev }));
             if (!options.isServer) {
-                config.plugins.push(new webpack_1.DefinePlugin({ __DEV__: options.dev }));
                 if (graphcommerceConfig.debug?.webpackCircularDependencyPlugin) {
                     config.plugins.push(new circular_dependency_plugin_1.default({
                         exclude: /readable-stream|duplexer2|node_modules\/next/,

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/next-config",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "8.1.0-canary.7",
+  "version": "8.1.0-canary.8",
   "type": "commonjs",
   "main": "dist/index.js",
   "types": "src/index.ts",