@graphcommerce/next-config 6.1.1-canary.4 → 6.2.0-canary.6

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Change Log
 
+## 6.2.0-canary.6
+
+### Minor Changes
+
+- [#1915](https://github.com/graphcommerce-org/graphcommerce/pull/1915) [`f4a8c3881`](https://github.com/graphcommerce-org/graphcommerce/commit/f4a8c388183e17c52e7f66536c5448749f494d7f) - Added the ability to create functional plugins for usage in non-component areas and hooks ([@paales](https://github.com/paales))
+
+## 6.1.1-canary.5
+
 ## 6.1.1-canary.4
 
 ## 6.1.1-canary.3

package/__tests__/config/utils/replaceConfigInString.ts

@@ -48,6 +48,10 @@ it('replaces config in string', () => {
                 },
                 {
                   "cartDisplayPricesInclTax": true,
+                  "hygraphLocales": [
+                    "nl",
+                    "en_us",
+                  ],
                   "locale": "nl",
                   "magentoStoreCode": "nl_NL",
                 },

package/__tests__/interceptors/findPlugins.ts

@@ -9,10 +9,12 @@ it('finds plugins', () => {
     googleAnalyticsId: '123',
   } as GraphCommerceConfig
 
-  const plugins = findPlugins(fakeconfig, projectRoot)
+  const [plugins, errors] = findPlugins(fakeconfig, projectRoot)
   const disabled = plugins.filter((p) => !p.enabled)
   const enabled = plugins.filter((p) => p.enabled)
 
+  expect(errors).toMatchInlineSnapshot(`[]`)
+
   expect(enabled).toMatchInlineSnapshot(`
     [
       {
@@ -96,6 +98,7 @@ it('finds plugins', () => {
         "component": "ProductPageMeta",
         "enabled": true,
         "exported": "@graphcommerce/magento-product",
+        "ifConfig": "googleAnalyticsId",
         "plugin": "@graphcommerce/googleanalytics/plugins/GaViewItem",
       },
       {
@@ -127,10 +130,10 @@ it('finds plugins', () => {
         "plugin": "@graphcommerce/googlerecaptcha/plugins/GrecaptchaGraphQLProvider",
       },
       {
-        "component": "GraphQLProvider",
         "enabled": true,
-        "exported": "@graphcommerce/graphql",
-        "plugin": "@graphcommerce/graphcms-ui/plugins/HygraphGraphqlProvider",
+        "exported": "@graphcommerce/graphql/config",
+        "func": "graphqlConfig",
+        "plugin": "@graphcommerce/graphcms-ui/plugins/hygraphGraphqlConfig",
       },
       {
         "component": "PaymentMethodContextProvider",
@@ -157,16 +160,10 @@ it('finds plugins', () => {
         "plugin": "@graphcommerce/magento-customer/plugins/MagentoCustomerGraphqlProvider",
       },
       {
-        "component": "GraphQLProvider",
         "enabled": true,
-        "exported": "@graphcommerce/graphql",
-        "plugin": "@graphcommerce/magento-store/plugins/MagentoStoreGraphqlProvider",
-      },
-      {
-        "component": "GraphQLProvider",
-        "enabled": true,
-        "exported": "@graphcommerce/graphql",
-        "plugin": "@graphcommerce/magento-graphql/plugins/MagentoGraphqlGraphqlProvider",
+        "exported": "@graphcommerce/graphql/config",
+        "func": "graphqlConfig",
+        "plugin": "@graphcommerce/magento-store/plugins/magentoStoreGraphqlConfig",
       },
     ]
   `)

package/__tests__/interceptors/generateInterceptors.ts

@@ -267,3 +267,146 @@ it('it handles root plugins deeper nested', () => {
     interceptors['packages/next-ui/Overlay/components/OverlaySsr'].components.OverlaySsr[0].plugin,
   ).toMatchInlineSnapshot(`"../../../../examples/magento-graphcms/plugins/EnableCrosssellsPlugin"`)
 })
+
+it('generates method interceptors alognside component interceptors', () => {
+  const plugins = [
+    {
+      enabled: true,
+      exported: '@graphcommerce/graphql',
+      component: 'GraphQLProvider',
+      plugin: '@graphcommerce/magento-graphql/plugins/MagentoGraphqlGraphqlProvider',
+    },
+    {
+      enabled: true,
+      exported: '@graphcommerce/graphql',
+      func: 'inMemoryCache',
+      plugin: '@graphcommerce/magento-graphql/plugins/magentoInitMemoryCache',
+    },
+    {
+      enabled: true,
+      exported: '@graphcommerce/graphql',
+      func: 'inMemoryCache',
+      plugin: '@graphcommerce/magento-hygraph/plugins/hygraphInitMemoryCache',
+    },
+  ]
+
+  const resolve = resolveDependency(projectRoot)
+  const interceptors = generateInterceptors(plugins, resolve)
+
+  expect(interceptors['packages/graphql/index']?.template).toMatchInlineSnapshot(`
+    "/* This file is automatically generated for @graphcommerce/graphql */
+
+    export * from '.'
+    import { Plugin as MagentoGraphqlGraphqlProvider } from '@graphcommerce/magento-graphql/plugins/MagentoGraphqlGraphqlProvider'
+    import { plugin as magentoInitMemoryCache } from '@graphcommerce/magento-graphql/plugins/magentoInitMemoryCache'
+    import { plugin as hygraphInitMemoryCache } from '@graphcommerce/magento-hygraph/plugins/hygraphInitMemoryCache'
+    import { ComponentProps } from 'react'
+    import { 
+      GraphQLProvider as GraphQLProviderBase,
+      inMemoryCache as inMemoryCacheBase,
+    } from '.'
+
+    /**
+     * Interceptor for \`<GraphQLProvider/>\` with these plugins:
+     * 
+     * - \`@graphcommerce/magento-graphql/plugins/MagentoGraphqlGraphqlProvider\`
+     */
+    type GraphQLProviderProps = ComponentProps<typeof GraphQLProviderBase>
+
+    function MagentoGraphqlGraphqlProviderInterceptor(props: GraphQLProviderProps) {
+      return <MagentoGraphqlGraphqlProvider {...props} Prev={GraphQLProviderBase} />
+    }
+    export const GraphQLProvider = MagentoGraphqlGraphqlProviderInterceptor
+
+    /**
+     * Interceptor for \`inMemoryCache()\` with these plugins:
+     * 
+     * - \`@graphcommerce/magento-hygraph/plugins/hygraphInitMemoryCache\`
+     * - \`@graphcommerce/magento-graphql/plugins/magentoInitMemoryCache\`
+     */
+    const hygraphInitMemoryCacheInterceptor: typeof inMemoryCacheBase = (...args) => {
+      return hygraphInitMemoryCache(inMemoryCacheBase, ...args)
+    }
+    const magentoInitMemoryCacheInterceptor: typeof inMemoryCacheBase = (...args) => {
+      return magentoInitMemoryCache(hygraphInitMemoryCacheInterceptor, ...args)
+    }
+    export const inMemoryCache = magentoInitMemoryCacheInterceptor
+    "
+  `)
+})
+
+it('adds debug logging to interceptors for components', () => {
+  const plugins = [
+    {
+      enabled: true,
+      exported: '@graphcommerce/graphql',
+      component: 'GraphQLProvider',
+      plugin: '@graphcommerce/magento-graphql/plugins/MagentoGraphqlGraphqlProvider',
+    },
+    {
+      enabled: true,
+      exported: '@graphcommerce/graphql',
+      func: 'inMemoryCache',
+      plugin: '@graphcommerce/magento-graphql/plugins/magentoInitMemoryCache',
+    },
+    {
+      enabled: true,
+      exported: '@graphcommerce/graphql',
+      func: 'inMemoryCache',
+      plugin: '@graphcommerce/magento-hygraph/plugins/hygraphInitMemoryCache',
+    },
+  ]
+
+  const resolve = resolveDependency(projectRoot)
+  const interceptors = generateInterceptors(plugins, resolve, { pluginStatus: true })
+
+  expect(interceptors['packages/graphql/index']?.template).toMatchInlineSnapshot(`
+    "/* This file is automatically generated for @graphcommerce/graphql */
+
+    export * from '.'
+    import { Plugin as MagentoGraphqlGraphqlProvider } from '@graphcommerce/magento-graphql/plugins/MagentoGraphqlGraphqlProvider'
+    import { plugin as magentoInitMemoryCache } from '@graphcommerce/magento-graphql/plugins/magentoInitMemoryCache'
+    import { plugin as hygraphInitMemoryCache } from '@graphcommerce/magento-hygraph/plugins/hygraphInitMemoryCache'
+    import { ComponentProps } from 'react'
+    import { 
+      GraphQLProvider as GraphQLProviderBase,
+      inMemoryCache as inMemoryCacheBase,
+    } from '.'
+
+    const logged: Set<string> = new Set();
+    const logInterceptor = (log: string, ...additional: unknown[]) => {
+      if (logged.has(log)) return
+      logged.add(log)
+      console.log(log, ...additional)
+    }
+
+    /**
+     * Interceptor for \`<GraphQLProvider/>\` with these plugins:
+     * 
+     * - \`@graphcommerce/magento-graphql/plugins/MagentoGraphqlGraphqlProvider\`
+     */
+    type GraphQLProviderProps = ComponentProps<typeof GraphQLProviderBase>
+
+    function MagentoGraphqlGraphqlProviderInterceptor(props: GraphQLProviderProps) {
+      logInterceptor(\`🔌 Rendering GraphQLProvider with plugin(s): <MagentoGraphqlGraphqlProvider/> wrapping <GraphQLProvider/>\`)
+      return <MagentoGraphqlGraphqlProvider {...props} Prev={GraphQLProviderBase} />
+    }
+    export const GraphQLProvider = MagentoGraphqlGraphqlProviderInterceptor
+
+    /**
+     * Interceptor for \`inMemoryCache()\` with these plugins:
+     * 
+     * - \`@graphcommerce/magento-hygraph/plugins/hygraphInitMemoryCache\`
+     * - \`@graphcommerce/magento-graphql/plugins/magentoInitMemoryCache\`
+     */
+    const hygraphInitMemoryCacheInterceptor: typeof inMemoryCacheBase = (...args) => {
+      logInterceptor(\`🔌 Calling inMemoryCache with plugin(s): magentoInitMemoryCache() wrapping hygraphInitMemoryCache() wrapping inMemoryCache()\`)
+      return hygraphInitMemoryCache(inMemoryCacheBase, ...args)
+    }
+    const magentoInitMemoryCacheInterceptor: typeof inMemoryCacheBase = (...args) => {
+      return magentoInitMemoryCache(hygraphInitMemoryCacheInterceptor, ...args)
+    }
+    export const inMemoryCache = magentoInitMemoryCacheInterceptor
+    "
+  `)
+})

package/dist/config/demoConfig.js

@@ -7,7 +7,12 @@ exports.demoConfig = {
     magentoEndpoint: 'https://backend.reachdigital.dev/graphql',
     storefront: [
         { locale: 'en', magentoStoreCode: 'en_US', defaultLocale: true },
-        { locale: 'nl', magentoStoreCode: 'nl_NL', cartDisplayPricesInclTax: true },
+        {
+            locale: 'nl',
+            magentoStoreCode: 'nl_NL',
+            hygraphLocales: ['nl', 'en_us'],
+            cartDisplayPricesInclTax: true,
+        },
         { locale: 'fr-be', magentoStoreCode: 'fr_BE', cartDisplayPricesInclTax: true },
         { locale: 'nl-be', magentoStoreCode: 'nl_BE', cartDisplayPricesInclTax: true },
         { locale: 'en-gb', magentoStoreCode: 'en_GB', cartDisplayPricesInclTax: true },

package/dist/interceptors/InterceptorPlugin.js

@@ -13,7 +13,8 @@ class InterceptorPlugin {
     constructor(config) {
         this.config = config;
         this.resolveDependency = (0, resolveDependency_1.resolveDependency)();
-        this.interceptors = (0, generateInterceptors_1.generateInterceptors)((0, findPlugins_1.findPlugins)(this.config), this.resolveDependency);
+        const [plugins, errors] = (0, findPlugins_1.findPlugins)(this.config);
+        this.interceptors = (0, generateInterceptors_1.generateInterceptors)(plugins, this.resolveDependency, this.config.debug);
         this.interceptorByDepependency = Object.fromEntries(Object.values(this.interceptors).map((i) => [i.dependency, i]));
         (0, writeInterceptors_1.writeInterceptors)(this.interceptors);
     }
@@ -21,12 +22,12 @@ class InterceptorPlugin {
         const logger = compiler.getInfrastructureLogger('InterceptorPlugin');
         // After the compilation has succeeded we watch all possible plugin locations.
         compiler.hooks.afterCompile.tap('InterceptorPlugin', (compilation) => {
-            const plugins = (0, findPlugins_1.findPlugins)(this.config);
+            const [plugins, errors] = (0, findPlugins_1.findPlugins)(this.config);
             plugins.forEach((p) => {
                 const absoluteFilePath = `${path_1.default.join(process.cwd(), this.resolveDependency(p.plugin).fromRoot)}.tsx`;
                 compilation.fileDependencies.add(absoluteFilePath);
             });
-            this.interceptors = (0, generateInterceptors_1.generateInterceptors)(plugins, this.resolveDependency);
+            this.interceptors = (0, generateInterceptors_1.generateInterceptors)(plugins, this.resolveDependency, this.config.debug);
             this.interceptorByDepependency = Object.fromEntries(Object.values(this.interceptors).map((i) => [i.dependency, i]));
             (0, writeInterceptors_1.writeInterceptors)(this.interceptors);
         });

package/dist/interceptors/findPlugins.js

@@ -4,35 +4,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.findPlugins = void 0;
-const console_1 = require("console");
-const stream_1 = require("stream");
 const core_1 = require("@swc/core");
 // eslint-disable-next-line import/no-extraneous-dependencies
+const chalk_1 = __importDefault(require("chalk"));
+// eslint-disable-next-line import/no-extraneous-dependencies
 const glob_1 = __importDefault(require("glob"));
 const get_1 = __importDefault(require("lodash/get"));
-const diff_1 = __importDefault(require("../config/utils/diff"));
 const resolveDependenciesSync_1 = require("../utils/resolveDependenciesSync");
-function table(input) {
-    // @see https://stackoverflow.com/a/67859384
-    const ts = new stream_1.Transform({
-        transform(chunk, enc, cb) {
-            cb(null, chunk);
-        },
-    });
-    const logger = new console_1.Console({ stdout: ts });
-    logger.table(input);
-    const t = (ts.read() || '').toString();
-    let result = '';
-    for (const row of t.split(/[\r\n]+/)) {
-        let r = row.replace(/[^┬]*┬/, '┌');
-        r = r.replace(/^├─*┼/, '├');
-        r = r.replace(/│[^│]*/, '');
-        r = r.replace(/^└─*┴/, '└');
-        r = r.replace(/'/g, ' ');
-        result += `${r}\n`;
-    }
-    console.log(result);
-}
+const generateInterceptors_1 = require("./generateInterceptors");
 function parseStructure(file) {
     const ast = (0, core_1.parseFileSync)(file, { syntax: 'typescript', tsx: true });
     const imports = {};
@@ -55,45 +34,66 @@ function parseStructure(file) {
     });
     return exports;
 }
-let prevlog;
+const pluginLogs = {};
 function findPlugins(config, cwd = process.cwd()) {
     const dependencies = (0, resolveDependenciesSync_1.resolveDependenciesSync)(cwd);
     const debug = Boolean(config.debug?.pluginStatus);
-    if (debug)
-        console.time('findPlugins');
+    const errors = [];
     const plugins = [];
     dependencies.forEach((dependency, path) => {
-        const files = glob_1.default.sync(`${dependency}/plugins/**/*.tsx`);
+        const files = glob_1.default.sync(`${dependency}/plugins/**/*.{ts,tsx}`);
         files.forEach((file) => {
             try {
                 const result = parseStructure(file);
                 if (!result)
                     return;
-                plugins.push({
-                    plugin: file.replace(dependency, path).replace('.tsx', ''),
+                const pluginConfig = {
+                    plugin: file.replace(dependency, path).replace('.tsx', '').replace('.ts', ''),
                     ...result,
                     enabled: !result.ifConfig || Boolean((0, get_1.default)(config, result.ifConfig)),
-                });
+                };
+                if (!(0, generateInterceptors_1.isPluginConfig)(pluginConfig)) {
+                    if (!(0, generateInterceptors_1.isPluginBaseConfig)(pluginConfig))
+                        errors.push(`Plugin ${file} is not a valid plugin, make it has "export const exported = '@graphcommerce/my-package"`);
+                    else if (file.endsWith('.ts')) {
+                        errors.push(`Plugin ${file} is not a valid plugin, please define the method to create a plugin for "export const method = 'someMethod'"`);
+                    }
+                    else if (file.endsWith('.tsx')) {
+                        errors.push(`Plugin ${file} is not a valid plugin, please define the compoennt to create a plugin for "export const component = 'SomeComponent'"`);
+                    }
+                }
+                else {
+                    plugins.push(pluginConfig);
+                }
             }
             catch (e) {
                 console.error(`Error parsing ${file}`, e);
             }
         });
     });
-    if (debug) {
-        const formatted = plugins.map(({ plugin, component, ifConfig, enabled, exported }) => ({
-            '💉': enabled ? '✅' : '❌',
-            Reason: `${ifConfig ? `${ifConfig}` : ''}`,
-            Plugin: plugin,
-            Target: `${exported}#${component}`,
-        }));
-        const res = (0, diff_1.default)(prevlog, formatted);
-        if (res) {
-            table(formatted);
-        }
-        prevlog = formatted;
-        console.timeEnd('findPlugins');
+    if (process.env.NODE_ENV === 'development' && debug) {
+        const byExported = plugins.reduce((acc, plugin) => {
+            const componentStr = (0, generateInterceptors_1.isReactPluginConfig)(plugin) ? plugin.component : '';
+            const funcStr = (0, generateInterceptors_1.isMethodPluginConfig)(plugin) ? plugin.func : '';
+            const key = `🔌 ${chalk_1.default.greenBright(`Plugins loaded for ${plugin.exported}#${componentStr}${funcStr}`)}`;
+            if (!acc[key])
+                acc[key] = [];
+            acc[key].push(plugin);
+            return acc;
+        }, {});
+        const toLog = [];
+        Object.entries(byExported).forEach(([key, p]) => {
+            const logStr = p
+                .filter((c) => debug || c.enabled)
+                .map((c) => `${c.enabled ? `🟢` : `⚪️`} ${c.plugin} ${c.ifConfig ? `(${c.ifConfig}: ${c.enabled ? 'true' : 'false'})` : ''}`)
+                .join('\n');
+            if (logStr && pluginLogs[key] !== logStr) {
+                toLog.push(`${key}\n${logStr}`);
+                pluginLogs[key] = logStr;
+            }
+        });
+        console.log(toLog.join('\n\n'));
     }
-    return plugins;
+    return [plugins, errors];
 }
 exports.findPlugins = findPlugins;

package/dist/interceptors/generateInterceptors.js

@@ -3,8 +3,30 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.generateInterceptors = exports.generateInterceptor = void 0;
+exports.generateInterceptors = exports.generateInterceptor = exports.isPluginConfig = exports.isMethodPluginConfig = exports.isReactPluginConfig = exports.isPluginBaseConfig = void 0;
 const node_path_1 = __importDefault(require("node:path"));
+function isPluginBaseConfig(plugin) {
+    return (typeof plugin.exported === 'string' &&
+        typeof plugin.plugin === 'string' &&
+        typeof plugin.enabled === 'boolean');
+}
+exports.isPluginBaseConfig = isPluginBaseConfig;
+function isReactPluginConfig(plugin) {
+    if (!isPluginBaseConfig(plugin))
+        return false;
+    return plugin.component !== undefined;
+}
+exports.isReactPluginConfig = isReactPluginConfig;
+function isMethodPluginConfig(plugin) {
+    if (!isPluginBaseConfig(plugin))
+        return false;
+    return plugin.func !== undefined;
+}
+exports.isMethodPluginConfig = isMethodPluginConfig;
+function isPluginConfig(plugin) {
+    return isReactPluginConfig(plugin) || isMethodPluginConfig(plugin);
+}
+exports.isPluginConfig = isPluginConfig;
 function moveRelativeDown(plugins) {
     return [...plugins].sort((a, b) => {
         if (a.plugin.startsWith('.') && !b.plugin.startsWith('.'))
@@ -14,15 +36,19 @@ function moveRelativeDown(plugins) {
         return 0;
     });
 }
-function generateInterceptor(interceptor) {
-    const { fromModule, dependency, components } = interceptor;
-    const flattended = Object.entries(components)
+function generateInterceptor(interceptor, config) {
+    const { fromModule, dependency, components, funcs } = interceptor;
+    const pluginConfigs = [...Object.entries(components), ...Object.entries(funcs)]
         .map(([, plugins]) => plugins)
         .flat();
     const duplicateImports = new Set();
-    const pluginImports = moveRelativeDown([...flattended].sort((a, b) => a.plugin.localeCompare(b.plugin)))
-        .map((p) => p.plugin)
-        .map((p) => `import { Plugin as ${p.split('/')[p.split('/').length - 1]} } from '${p}'`)
+    const pluginImports = moveRelativeDown([...pluginConfigs].sort((a, b) => a.plugin.localeCompare(b.plugin)))
+        .map((plugin) => {
+        const { plugin: p } = plugin;
+        if (isReactPluginConfig(plugin))
+            return `import { Plugin as ${p.split('/')[p.split('/').length - 1]} } from '${p}'`;
+        return `import { plugin as ${p.split('/')[p.split('/').length - 1]} } from '${p}'`;
+    })
         .filter((str) => {
         if (duplicateImports.has(str))
             return false;
@@ -30,46 +56,87 @@ function generateInterceptor(interceptor) {
         return true;
     })
         .join('\n');
-    const imports = Object.entries(components).map(([component]) => `${component} as ${component}Base`);
+    const imports = [
+        ...Object.entries(components).map(([component]) => `${component} as ${component}Base`),
+        ...Object.entries(funcs).map(([func]) => `${func} as ${func}Base`),
+    ];
     const importInjectables = imports.length > 1
         ? `import { 
   ${imports.join(',\n  ')},
 } from '${fromModule}'`
         : `import { ${imports[0]} } from '${fromModule}'`;
-    const pluginExports = Object.entries(components)
-        .map(([component, plugins]) => {
+    const entries = [
+        ...Object.entries(components),
+        ...Object.entries(funcs),
+    ];
+    const pluginExports = entries
+        .map(([base, plugins]) => {
         const duplicateInterceptors = new Set();
-        let carry = `${component}Base`;
+        const name = (p) => p.plugin.split('/')[p.plugin.split('/').length - 1];
+        const filterNoDuplicate = (p) => {
+            if (duplicateInterceptors.has(name(p)))
+                return false;
+            duplicateInterceptors.add(name(p));
+            return true;
+        };
+        let carry = `${base}Base`;
         const pluginStr = plugins
             .reverse()
-            .map((p) => p.plugin.split('/')[p.plugin.split('/').length - 1])
-            .filter((importStr) => {
-            if (duplicateInterceptors.has(importStr)) {
-                return false;
+            .filter(filterNoDuplicate)
+            .map((p) => {
+            let result;
+            if (isReactPluginConfig(p)) {
+                const wrapChain = plugins
+                    .reverse()
+                    .map((pl) => `<${name(pl)}/>`)
+                    .join(' wrapping ');
+                const debugLog = carry === `${base}Base` && config.pluginStatus
+                    ? `\n  logInterceptor(\`🔌 Rendering ${base} with plugin(s): ${wrapChain} wrapping <${base}/>\`)`
+                    : '';
+                result = `function ${name(p)}Interceptor(props: ${base}Props) {${debugLog}
+  return <${name(p)} {...props} Prev={${carry}} />
+}`;
             }
-            duplicateInterceptors.add(importStr);
-            return true;
-        })
-            .map((name) => {
-            const result = `function ${name}Interceptor(props: ${component}Props) {
-  return <${name} {...props} Prev={${carry}} />
+            else {
+                const wrapChain = plugins
+                    .reverse()
+                    .map((pl) => `${name(pl)}()`)
+                    .join(' wrapping ');
+                const debugLog = carry === `${base}Base` && config.pluginStatus
+                    ? `\n  logInterceptor(\`🔌 Calling ${base} with plugin(s): ${wrapChain} wrapping ${base}()\`)`
+                    : '';
+                result = `const ${name(p)}Interceptor: typeof ${base}Base = (...args) => {${debugLog}
+  return ${name(p)}(${carry}, ...args)
 }`;
-            carry = `${name}Interceptor`;
+            }
+            carry = `${name(p)}Interceptor`;
             return result;
         })
             .join('\n');
+        const isComponent = plugins.every((p) => isReactPluginConfig(p));
+        if (isComponent && plugins.some((p) => isMethodPluginConfig(p))) {
+            throw new Error(`Cannot mix React and Method plugins for ${base} in ${dependency}.`);
+        }
         return `
 /**
- * Interceptor for \`<${component}/>\` with these plugins:
+ * Interceptor for \`${isComponent ? `<${base}/>` : `${base}()`}\` with these plugins:
  * 
 ${plugins.map((p) => ` * - \`${p.plugin}\``).join('\n')}
  */
-type ${component}Props = ComponentProps<typeof ${component}Base>
-
-${pluginStr}
-export const ${component} = ${carry}`;
+${isComponent ? `type ${base}Props = ComponentProps<typeof ${base}Base>\n\n` : ``}${pluginStr}
+export const ${base} = ${carry}`;
     })
         .join('\n');
+    const logOnce = config.pluginStatus
+        ? `
+const logged: Set<string> = new Set();
+const logInterceptor = (log: string, ...additional: unknown[]) => {
+  if (logged.has(log)) return
+  logged.add(log)
+  console.log(log, ...additional)
+}
+`
+        : '';
     const componentExports = `export * from '${fromModule}'`;
     const template = `/* This file is automatically generated for ${dependency} */
 
@@ -77,16 +144,16 @@ ${componentExports}
 ${pluginImports}
 import { ComponentProps } from 'react'
 ${importInjectables}
-${pluginExports}
+${logOnce}${pluginExports}
 `;
     return { ...interceptor, template };
 }
 exports.generateInterceptor = generateInterceptor;
-function generateInterceptors(plugins, resolve) {
+function generateInterceptors(plugins, resolve, config) {
     // todo: Do not use reduce as we're passing the accumulator to the next iteration
     const byExportedComponent = moveRelativeDown(plugins).reduce((acc, plug) => {
-        const { exported, component, enabled, plugin } = plug;
-        if (!exported || !component || !enabled)
+        const { exported, plugin } = plug;
+        if (!isPluginConfig(plug) || !plug.enabled)
             return acc;
         const resolved = resolve(exported);
         let pluginPathFromResolved = plugin;
@@ -99,18 +166,31 @@ function generateInterceptors(plugins, resolve) {
                 ...resolved,
                 target: `${resolved.fromRoot}.interceptor`,
                 components: {},
+                funcs: {},
             };
-        if (!acc[resolved.fromRoot].components[component])
-            acc[resolved.fromRoot].components[component] = [];
-        acc[resolved.fromRoot].components[component].push({
-            ...plug,
-            plugin: pluginPathFromResolved,
-        });
+        if (isReactPluginConfig(plug)) {
+            const { component } = plug;
+            if (!acc[resolved.fromRoot].components[component])
+                acc[resolved.fromRoot].components[component] = [];
+            acc[resolved.fromRoot].components[component].push({
+                ...plug,
+                plugin: pluginPathFromResolved,
+            });
+        }
+        if (isMethodPluginConfig(plug)) {
+            const { func } = plug;
+            if (!acc[resolved.fromRoot].funcs[func])
+                acc[resolved.fromRoot].funcs[func] = [];
+            acc[resolved.fromRoot].funcs[func].push({
+                ...plug,
+                plugin: pluginPathFromResolved,
+            });
+        }
         return acc;
     }, {});
     return Object.fromEntries(Object.entries(byExportedComponent).map(([target, interceptor]) => [
         target,
-        generateInterceptor(interceptor),
+        generateInterceptor(interceptor, config ?? {}),
     ]));
 }
 exports.generateInterceptors = generateInterceptors;

package/package.json

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

package/src/config/demoConfig.ts

@@ -6,7 +6,12 @@ export const demoConfig: Partial<GraphCommerceConfig> & Record<string, unknown>
   magentoEndpoint: 'https://backend.reachdigital.dev/graphql',
   storefront: [
     { locale: 'en', magentoStoreCode: 'en_US', defaultLocale: true },
-    { locale: 'nl', magentoStoreCode: 'nl_NL', cartDisplayPricesInclTax: true },
+    {
+      locale: 'nl',
+      magentoStoreCode: 'nl_NL',
+      hygraphLocales: ['nl', 'en_us'],
+      cartDisplayPricesInclTax: true,
+    },
     { locale: 'fr-be', magentoStoreCode: 'fr_BE', cartDisplayPricesInclTax: true },
     { locale: 'nl-be', magentoStoreCode: 'nl_BE', cartDisplayPricesInclTax: true },
     { locale: 'en-gb', magentoStoreCode: 'en_GB', cartDisplayPricesInclTax: true },

package/src/index.ts

@@ -9,3 +9,12 @@ export * from './config'
 export type PluginProps<P extends Record<string, unknown> = Record<string, unknown>> = P & {
   Prev: React.FC<P>
 }
+
+export type ReactPlugin<T extends React.FC<any>> = (
+  props: Parameters<T>[0] & { Prev: React.FC<Parameters<T>[0]> },
+) => ReturnType<T>
+
+export type MethodPlugin<T extends (...args: any[]) => any> = (
+  prev: T,
+  ...args: Parameters<T>
+) => ReturnType<T>

package/src/interceptors/InterceptorPlugin.ts

@@ -16,7 +16,8 @@ export class InterceptorPlugin {
   constructor(private config: GraphCommerceConfig) {
     this.resolveDependency = resolveDependency()
 
-    this.interceptors = generateInterceptors(findPlugins(this.config), this.resolveDependency)
+    const [plugins, errors] = findPlugins(this.config)
+    this.interceptors = generateInterceptors(plugins, this.resolveDependency, this.config.debug)
     this.interceptorByDepependency = Object.fromEntries(
       Object.values(this.interceptors).map((i) => [i.dependency, i]),
     )
@@ -29,7 +30,7 @@ export class InterceptorPlugin {
 
     // After the compilation has succeeded we watch all possible plugin locations.
     compiler.hooks.afterCompile.tap('InterceptorPlugin', (compilation) => {
-      const plugins = findPlugins(this.config)
+      const [plugins, errors] = findPlugins(this.config)
 
       plugins.forEach((p) => {
         const absoluteFilePath = `${path.join(
@@ -39,7 +40,7 @@ export class InterceptorPlugin {
         compilation.fileDependencies.add(absoluteFilePath)
       })
 
-      this.interceptors = generateInterceptors(plugins, this.resolveDependency)
+      this.interceptors = generateInterceptors(plugins, this.resolveDependency, this.config.debug)
       this.interceptorByDepependency = Object.fromEntries(
         Object.values(this.interceptors).map((i) => [i.dependency, i]),
       )

package/src/interceptors/findPlugins.ts

@@ -1,36 +1,19 @@
-import { Console } from 'console'
-import { Transform } from 'stream'
 import { parseFileSync } from '@swc/core'
 // eslint-disable-next-line import/no-extraneous-dependencies
+import chalk from 'chalk'
+// eslint-disable-next-line import/no-extraneous-dependencies
 import glob from 'glob'
 import get from 'lodash/get'
 import type { Path } from 'react-hook-form'
-import diff from '../config/utils/diff'
 import { GraphCommerceConfig } from '../generated/config'
 import { resolveDependenciesSync } from '../utils/resolveDependenciesSync'
-import type { PluginConfig } from './generateInterceptors'
-
-function table(input: any) {
-  // @see https://stackoverflow.com/a/67859384
-  const ts = new Transform({
-    transform(chunk, enc, cb) {
-      cb(null, chunk)
-    },
-  })
-  const logger = new Console({ stdout: ts })
-  logger.table(input)
-  const t = (ts.read() || '').toString()
-  let result = ''
-  for (const row of t.split(/[\r\n]+/)) {
-    let r = row.replace(/[^┬]*┬/, '┌')
-    r = r.replace(/^├─*┼/, '├')
-    r = r.replace(/│[^│]*/, '')
-    r = r.replace(/^└─*┴/, '└')
-    r = r.replace(/'/g, ' ')
-    result += `${r}\n`
-  }
-  console.log(result)
-}
+import {
+  isMethodPluginConfig,
+  isPluginBaseConfig,
+  isPluginConfig,
+  isReactPluginConfig,
+  PluginConfig,
+} from './generateInterceptors'
 
 type ParseResult = {
   component?: string
@@ -64,51 +47,83 @@ function parseStructure(file: string): ParseResult {
   return exports as ParseResult
 }
 
-let prevlog: any
+const pluginLogs: Record<string, string> = {}
 
 export function findPlugins(config: GraphCommerceConfig, cwd: string = process.cwd()) {
   const dependencies = resolveDependenciesSync(cwd)
 
   const debug = Boolean(config.debug?.pluginStatus)
 
-  if (debug) console.time('findPlugins')
-
+  const errors: string[] = []
   const plugins: PluginConfig[] = []
   dependencies.forEach((dependency, path) => {
-    const files = glob.sync(`${dependency}/plugins/**/*.tsx`)
+    const files = glob.sync(`${dependency}/plugins/**/*.{ts,tsx}`)
     files.forEach((file) => {
       try {
         const result = parseStructure(file)
         if (!result) return
 
-        plugins.push({
-          plugin: file.replace(dependency, path).replace('.tsx', ''),
+        const pluginConfig = {
+          plugin: file.replace(dependency, path).replace('.tsx', '').replace('.ts', ''),
           ...result,
           enabled: !result.ifConfig || Boolean(get(config, result.ifConfig)),
-        })
+        }
+
+        if (!isPluginConfig(pluginConfig)) {
+          if (!isPluginBaseConfig(pluginConfig))
+            errors.push(
+              `Plugin ${file} is not a valid plugin, make it has "export const exported = '@graphcommerce/my-package"`,
+            )
+          else if (file.endsWith('.ts')) {
+            errors.push(
+              `Plugin ${file} is not a valid plugin, please define the method to create a plugin for "export const method = 'someMethod'"`,
+            )
+          } else if (file.endsWith('.tsx')) {
+            errors.push(
+              `Plugin ${file} is not a valid plugin, please define the compoennt to create a plugin for "export const component = 'SomeComponent'"`,
+            )
+          }
+        } else {
+          plugins.push(pluginConfig)
+        }
       } catch (e) {
         console.error(`Error parsing ${file}`, e)
       }
     })
   })
 
-  if (debug) {
-    const formatted = plugins.map(({ plugin, component, ifConfig, enabled, exported }) => ({
-      '💉': enabled ? '✅' : '❌',
-      Reason: `${ifConfig ? `${ifConfig}` : ''}`,
-      Plugin: plugin,
-      Target: `${exported}#${component}`,
-    }))
-
-    const res = diff(prevlog, formatted)
-
-    if (res) {
-      table(formatted)
-    }
-    prevlog = formatted
+  if (process.env.NODE_ENV === 'development' && debug) {
+    const byExported = plugins.reduce((acc, plugin) => {
+      const componentStr = isReactPluginConfig(plugin) ? plugin.component : ''
+      const funcStr = isMethodPluginConfig(plugin) ? plugin.func : ''
+      const key = `🔌 ${chalk.greenBright(
+        `Plugins loaded for ${plugin.exported}#${componentStr}${funcStr}`,
+      )}`
+      if (!acc[key]) acc[key] = []
+      acc[key].push(plugin)
+      return acc
+    }, {} as Record<string, Pick<PluginConfig, 'plugin' | 'ifConfig' | 'enabled'>[]>)
+
+    const toLog: string[] = []
+    Object.entries(byExported).forEach(([key, p]) => {
+      const logStr = p
+        .filter((c) => debug || c.enabled)
+        .map(
+          (c) =>
+            `${c.enabled ? `🟢` : `⚪️`} ${c.plugin} ${
+              c.ifConfig ? `(${c.ifConfig}: ${c.enabled ? 'true' : 'false'})` : ''
+            }`,
+        )
+        .join('\n')
+
+      if (logStr && pluginLogs[key] !== logStr) {
+        toLog.push(`${key}\n${logStr}`)
+        pluginLogs[key] = logStr
+      }
+    })
 
-    console.timeEnd('findPlugins')
+    console.log(toLog.join('\n\n'))
   }
 
-  return plugins
+  return [plugins, errors] as const
 }

package/src/interceptors/generateInterceptors.ts

@@ -1,16 +1,46 @@
 import path from 'node:path'
+import { GraphCommerceConfig, GraphCommerceDebugConfig } from '../generated/config'
 import { ResolveDependency, ResolveDependencyReturn } from '../utils/resolveDependency'
 
-export type PluginConfig = {
-  component?: string
-  exported?: string
+type PluginBaseConfig = {
+  exported: string
   plugin: string
-  ifConfig?: string
   enabled: boolean
+  ifConfig?: string
+}
+export function isPluginBaseConfig(plugin: Partial<PluginBaseConfig>): plugin is PluginBaseConfig {
+  return (
+    typeof plugin.exported === 'string' &&
+    typeof plugin.plugin === 'string' &&
+    typeof plugin.enabled === 'boolean'
+  )
+}
+
+type ReactPluginConfig = PluginBaseConfig & { component: string }
+type MethodPluginConfig = PluginBaseConfig & { func: string }
+
+export function isReactPluginConfig(
+  plugin: Partial<PluginBaseConfig>,
+): plugin is ReactPluginConfig {
+  if (!isPluginBaseConfig(plugin)) return false
+  return (plugin as ReactPluginConfig).component !== undefined
+}
+
+export function isMethodPluginConfig(
+  plugin: Partial<PluginBaseConfig>,
+): plugin is MethodPluginConfig {
+  if (!isPluginBaseConfig(plugin)) return false
+  return (plugin as MethodPluginConfig).func !== undefined
+}
+
+export type PluginConfig = ReactPluginConfig | MethodPluginConfig
+export function isPluginConfig(plugin: Partial<PluginConfig>): plugin is PluginConfig {
+  return isReactPluginConfig(plugin) || isMethodPluginConfig(plugin)
 }
 
 type Interceptor = ResolveDependencyReturn & {
-  components: Record<string, PluginConfig[]>
+  components: Record<string, ReactPluginConfig[]>
+  funcs: Record<string, MethodPluginConfig[]>
   target: string
   template?: string
 }
@@ -25,19 +55,27 @@ function moveRelativeDown(plugins: PluginConfig[]) {
   })
 }
 
-export function generateInterceptor(interceptor: Interceptor): MaterializedPlugin {
-  const { fromModule, dependency, components } = interceptor
+export function generateInterceptor(
+  interceptor: Interceptor,
+  config: GraphCommerceDebugConfig,
+): MaterializedPlugin {
+  const { fromModule, dependency, components, funcs } = interceptor
 
-  const flattended = Object.entries(components)
+  const pluginConfigs = [...Object.entries(components), ...Object.entries(funcs)]
     .map(([, plugins]) => plugins)
     .flat()
+
   const duplicateImports = new Set()
 
   const pluginImports = moveRelativeDown(
-    [...flattended].sort((a, b) => a.plugin.localeCompare(b.plugin)),
+    [...pluginConfigs].sort((a, b) => a.plugin.localeCompare(b.plugin)),
   )
-    .map((p) => p.plugin)
-    .map((p) => `import { Plugin as ${p.split('/')[p.split('/').length - 1]} } from '${p}'`)
+    .map((plugin) => {
+      const { plugin: p } = plugin
+      if (isReactPluginConfig(plugin))
+        return `import { Plugin as ${p.split('/')[p.split('/').length - 1]} } from '${p}'`
+      return `import { plugin as ${p.split('/')[p.split('/').length - 1]} } from '${p}'`
+    })
     .filter((str) => {
       if (duplicateImports.has(str)) return false
       duplicateImports.add(str)
@@ -45,9 +83,11 @@ export function generateInterceptor(interceptor: Interceptor): MaterializedPlugi
     })
     .join('\n')
 
-  const imports = Object.entries(components).map(
-    ([component]) => `${component} as ${component}Base`,
-  )
+  const imports = [
+    ...Object.entries(components).map(([component]) => `${component} as ${component}Base`),
+    ...Object.entries(funcs).map(([func]) => `${func} as ${func}Base`),
+  ]
+
   const importInjectables =
     imports.length > 1
       ? `import { 
@@ -55,43 +95,89 @@ export function generateInterceptor(interceptor: Interceptor): MaterializedPlugi
 } from '${fromModule}'`
       : `import { ${imports[0]} } from '${fromModule}'`
 
-  const pluginExports = Object.entries(components)
-    .map(([component, plugins]) => {
+  const entries: [string, PluginConfig[]][] = [
+    ...Object.entries(components),
+    ...Object.entries(funcs),
+  ]
+  const pluginExports = entries
+    .map(([base, plugins]) => {
       const duplicateInterceptors = new Set()
+      const name = (p: PluginConfig) => p.plugin.split('/')[p.plugin.split('/').length - 1]
+
+      const filterNoDuplicate = (p: PluginConfig) => {
+        if (duplicateInterceptors.has(name(p))) return false
+        duplicateInterceptors.add(name(p))
+        return true
+      }
+
+      let carry = `${base}Base`
 
-      let carry = `${component}Base`
       const pluginStr = plugins
         .reverse()
-        .map((p) => p.plugin.split('/')[p.plugin.split('/').length - 1])
-        .filter((importStr) => {
-          if (duplicateInterceptors.has(importStr)) {
-            return false
-          }
-          duplicateInterceptors.add(importStr)
-          return true
-        })
-        .map((name) => {
-          const result = `function ${name}Interceptor(props: ${component}Props) {
-  return <${name} {...props} Prev={${carry}} />
+        .filter(filterNoDuplicate)
+        .map((p) => {
+          let result
+
+          if (isReactPluginConfig(p)) {
+            const wrapChain = plugins
+              .reverse()
+              .map((pl) => `<${name(pl)}/>`)
+              .join(' wrapping ')
+            const debugLog =
+              carry === `${base}Base` && config.pluginStatus
+                ? `\n  logInterceptor(\`🔌 Rendering ${base} with plugin(s): ${wrapChain} wrapping <${base}/>\`)`
+                : ''
+
+            result = `function ${name(p)}Interceptor(props: ${base}Props) {${debugLog}
+  return <${name(p)} {...props} Prev={${carry}} />
 }`
-          carry = `${name}Interceptor`
+          } else {
+            const wrapChain = plugins
+              .reverse()
+              .map((pl) => `${name(pl)}()`)
+              .join(' wrapping ')
+
+            const debugLog =
+              carry === `${base}Base` && config.pluginStatus
+                ? `\n  logInterceptor(\`🔌 Calling ${base} with plugin(s): ${wrapChain} wrapping ${base}()\`)`
+                : ''
+
+            result = `const ${name(p)}Interceptor: typeof ${base}Base = (...args) => {${debugLog}
+  return ${name(p)}(${carry}, ...args)
+}`
+          }
+          carry = `${name(p)}Interceptor`
           return result
         })
         .join('\n')
 
+      const isComponent = plugins.every((p) => isReactPluginConfig(p))
+      if (isComponent && plugins.some((p) => isMethodPluginConfig(p))) {
+        throw new Error(`Cannot mix React and Method plugins for ${base} in ${dependency}.`)
+      }
+
       return `
 /**
- * Interceptor for \`<${component}/>\` with these plugins:
+ * Interceptor for \`${isComponent ? `<${base}/>` : `${base}()`}\` with these plugins:
  * 
 ${plugins.map((p) => ` * - \`${p.plugin}\``).join('\n')}
  */
-type ${component}Props = ComponentProps<typeof ${component}Base>
-
-${pluginStr}
-export const ${component} = ${carry}`
+${isComponent ? `type ${base}Props = ComponentProps<typeof ${base}Base>\n\n` : ``}${pluginStr}
+export const ${base} = ${carry}`
     })
     .join('\n')
 
+  const logOnce = config.pluginStatus
+    ? `
+const logged: Set<string> = new Set();
+const logInterceptor = (log: string, ...additional: unknown[]) => {
+  if (logged.has(log)) return
+  logged.add(log)
+  console.log(log, ...additional)
+}
+`
+    : ''
+
   const componentExports = `export * from '${fromModule}'`
 
   const template = `/* This file is automatically generated for ${dependency} */
@@ -100,7 +186,7 @@ ${componentExports}
 ${pluginImports}
 import { ComponentProps } from 'react'
 ${importInjectables}
-${pluginExports}
+${logOnce}${pluginExports}
 `
 
   return { ...interceptor, template }
@@ -111,11 +197,12 @@ export type GenerateInterceptorsReturn = Record<string, MaterializedPlugin>
 export function generateInterceptors(
   plugins: PluginConfig[],
   resolve: ResolveDependency,
+  config?: GraphCommerceDebugConfig | null | undefined,
 ): GenerateInterceptorsReturn {
   // todo: Do not use reduce as we're passing the accumulator to the next iteration
   const byExportedComponent = moveRelativeDown(plugins).reduce((acc, plug) => {
-    const { exported, component, enabled, plugin } = plug
-    if (!exported || !component || !enabled) return acc
+    const { exported, plugin } = plug
+    if (!isPluginConfig(plug) || !plug.enabled) return acc
 
     const resolved = resolve(exported)
 
@@ -133,15 +220,28 @@ export function generateInterceptors(
         ...resolved,
         target: `${resolved.fromRoot}.interceptor`,
         components: {},
+        funcs: {},
       } as Interceptor
 
-    if (!acc[resolved.fromRoot].components[component])
-      acc[resolved.fromRoot].components[component] = []
+    if (isReactPluginConfig(plug)) {
+      const { component } = plug
+      if (!acc[resolved.fromRoot].components[component])
+        acc[resolved.fromRoot].components[component] = []
 
-    acc[resolved.fromRoot].components[component].push({
-      ...plug,
-      plugin: pluginPathFromResolved,
-    })
+      acc[resolved.fromRoot].components[component].push({
+        ...plug,
+        plugin: pluginPathFromResolved,
+      })
+    }
+    if (isMethodPluginConfig(plug)) {
+      const { func } = plug
+      if (!acc[resolved.fromRoot].funcs[func]) acc[resolved.fromRoot].funcs[func] = []
+
+      acc[resolved.fromRoot].funcs[func].push({
+        ...plug,
+        plugin: pluginPathFromResolved,
+      })
+    }
 
     return acc
   }, {} as Record<string, Interceptor>)
@@ -149,7 +249,7 @@ export function generateInterceptors(
   return Object.fromEntries(
     Object.entries(byExportedComponent).map(([target, interceptor]) => [
       target,
-      generateInterceptor(interceptor),
+      generateInterceptor(interceptor, config ?? {}),
     ]),
   )
 }

package/src/withGraphCommerce.ts

@@ -1,10 +1,9 @@
 import CircularDependencyPlugin from 'circular-dependency-plugin'
 import { DuplicatesPlugin } from 'inspectpack/plugin'
 import type { NextConfig } from 'next'
-import { Redirect, Rewrite } from 'next/dist/lib/load-custom-routes'
 import { DomainLocale } from 'next/dist/server/config'
 import { RemotePattern } from 'next/dist/shared/lib/image-config'
-import { DefinePlugin, Configuration, WebpackPluginInstance } from 'webpack'
+import { DefinePlugin, Configuration } from 'webpack'
 import { loadConfig } from './config/loadConfig'
 import { configToImportMeta } from './config/utils/configToImportMeta'
 import { GraphCommerceConfig } from './generated/config'
@@ -134,7 +133,7 @@ export function withGraphCommerce(nextConfig: NextConfig, cwd: string): NextConf
           config.plugins.push(
             new CircularDependencyPlugin({
               exclude: /readable-stream|duplexer2|node_modules\/next/,
-            }) as WebpackPluginInstance,
+            }),
           )
         }
         if (graphcommerceConfig.debug?.webpackDuplicatesPlugin) {