@graphcommerce/next-config 8.1.0-canary.2 → 8.1.0-canary.5

package/dist/interceptors/generateInterceptors.js

@@ -3,194 +3,53 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.generateInterceptors = exports.generateInterceptor = exports.isPluginConfig = exports.isMethodPluginConfig = exports.isReactPluginConfig = exports.isPluginBaseConfig = void 0;
+exports.generateInterceptors = 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('.'))
-            return 1;
-        if (!a.plugin.startsWith('.') && b.plugin.startsWith('.'))
-            return -1;
-        return 0;
-    });
-}
-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([...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;
-        duplicateImports.add(str);
-        return true;
-    })
-        .join('\n');
-    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 entries = [
-        ...Object.entries(components),
-        ...Object.entries(funcs),
-    ];
-    const pluginExports = entries
-        .map(([base, plugins]) => {
-        const duplicateInterceptors = new Set();
-        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()
-            .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}} />
-}`;
-            }
-            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 \`${isComponent ? `<${base}/>` : `${base}()`}\` with these plugins:
- * 
-${plugins.map((p) => ` * - \`${p.plugin}\``).join('\n')}
- */
-${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} */
-
-${componentExports}
-${pluginImports}
-import { ComponentProps } from 'react'
-${importInjectables}
-${logOnce}${pluginExports}
-`;
-    return { ...interceptor, template };
-}
-exports.generateInterceptor = generateInterceptor;
-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, plugin } = plug;
-        if (!isPluginConfig(plug) || !plug.enabled)
+const promises_1 = __importDefault(require("node:fs/promises"));
+const findOriginalSource_1 = require("./findOriginalSource");
+const generateInterceptor_1 = require("./generateInterceptor");
+async function generateInterceptors(plugins, resolve, config) {
+    const byTargetModuleAndExport = (0, generateInterceptor_1.moveRelativeDown)(plugins).reduce((acc, plug) => {
+        let { sourceModule: pluginPath } = plug;
+        if (!(0, generateInterceptor_1.isPluginConfig)(plug) || !plug.enabled)
+            return acc;
+        const result = resolve(plug.targetModule, { includeSources: true });
+        const { error, resolved } = (0, findOriginalSource_1.findOriginalSource)(plug, result, resolve);
+        if (error) {
+            console.log(error.message);
             return acc;
-        const resolved = resolve(exported);
-        let pluginPathFromResolved = plugin;
-        if (plugin.startsWith('.')) {
-            const resolvedPlugin = resolve(plugin);
-            pluginPathFromResolved = node_path_1.default.relative(resolved.fromRoot.split('/').slice(0, -1).join('/'), resolvedPlugin.fromRoot);
         }
-        if (!acc[resolved.fromRoot])
+        const { fromRoot } = resolved;
+        if (pluginPath.startsWith('.')) {
+            const resolvedPlugin = resolve(pluginPath);
+            if (resolvedPlugin) {
+                pluginPath = node_path_1.default.relative(resolved.fromRoot.split('/').slice(0, -1).join('/'), resolvedPlugin.fromRoot);
+            }
+        }
+        if (!acc[resolved.fromRoot]) {
             acc[resolved.fromRoot] = {
                 ...resolved,
                 target: `${resolved.fromRoot}.interceptor`,
-                components: {},
-                funcs: {},
+                targetExports: {},
             };
-        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,
-            });
         }
+        if (!acc[fromRoot].targetExports[plug.targetExport])
+            acc[fromRoot].targetExports[plug.targetExport] = [];
+        acc[fromRoot].targetExports[plug.targetExport].push({ ...plug, sourceModule: pluginPath });
         return acc;
     }, {});
-    return Object.fromEntries(Object.entries(byExportedComponent).map(([target, interceptor]) => [
-        target,
-        generateInterceptor(interceptor, 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))
+            ? (await promises_1.default.readFile(file)).toString()
+            : undefined;
+        return [
+            target,
+            await (0, generateInterceptor_1.generateInterceptor)(interceptor, config ?? {}, originalSource),
+        ];
+    })));
 }
 exports.generateInterceptors = generateInterceptors;

package/dist/interceptors/parseStructure.js

@@ -0,0 +1,71 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.parseStructure = void 0;
+const get_1 = __importDefault(require("lodash/get"));
+const zod_1 = require("zod");
+const extractExports_1 = require("./extractExports");
+const pluginConfigParsed = zod_1.z.object({
+    type: zod_1.z.enum(['component', 'function', 'replace']),
+    module: zod_1.z.string(),
+    export: zod_1.z.string(),
+    ifConfig: zod_1.z.union([zod_1.z.string(), zod_1.z.tuple([zod_1.z.string(), zod_1.z.string()])]).optional(),
+});
+function nonNullable(value) {
+    return value !== null && value !== undefined;
+}
+const isObject = (input) => typeof input === 'object' && input !== null && !Array.isArray(input);
+function parseStructure(ast, gcConfig, sourceModule) {
+    const [exports, errors] = (0, extractExports_1.extractExports)(ast);
+    if (errors.length)
+        console.error(`Plugin error for`, errors.join('\n'));
+    const { config: moduleConfig, component, func, exported, ifConfig, plugin, Plugin, ...rest } = exports;
+    const exportVals = Object.keys(rest);
+    if (component && !moduleConfig)
+        exportVals.push('Plugin');
+    if (func && !moduleConfig)
+        exportVals.push('plugin');
+    return exportVals
+        .map((exportVal) => {
+        let config = isObject(moduleConfig) ? moduleConfig : {};
+        if (!moduleConfig && component) {
+            config = { type: 'component', module: exported, ifConfig, export: 'Plugin' };
+        }
+        else if (!moduleConfig && func) {
+            config = { type: 'function', module: exported, ifConfig, export: 'plugin' };
+        }
+        else if (isObject(moduleConfig)) {
+            config = { ...moduleConfig, export: exportVal };
+        }
+        else {
+            console.error(`Plugin configuration invalid! See ${sourceModule}`);
+        }
+        const parsed = pluginConfigParsed.safeParse(config);
+        if (!parsed.success) {
+            if (errors.length)
+                console.error(parsed.error.errors.map((e) => `${e.path} ${e.message}`).join('\n'));
+            return undefined;
+        }
+        let enabled = true;
+        if (parsed.data.ifConfig) {
+            enabled = Array.isArray(parsed.data.ifConfig)
+                ? (0, get_1.default)(gcConfig, parsed.data.ifConfig[0]) === parsed.data.ifConfig[1]
+                : Boolean((0, get_1.default)(gcConfig, parsed.data.ifConfig));
+        }
+        const val = {
+            targetExport: exports.component || exports.func || parsed.data.export,
+            sourceModule,
+            sourceExport: parsed.data.export,
+            targetModule: parsed.data.module,
+            type: parsed.data.type,
+            enabled,
+        };
+        if (parsed.data.ifConfig)
+            val.ifConfig = parsed.data.ifConfig;
+        return val;
+    })
+        .filter(nonNullable);
+}
+exports.parseStructure = parseStructure;

package/dist/interceptors/swc.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.printSync = exports.parseSync = void 0;
+const core_1 = require("@swc/core");
+function parseSync(src) {
+    return (0, core_1.parseSync)(src, {
+        syntax: 'typescript',
+        tsx: true,
+        comments: true,
+    });
+}
+exports.parseSync = parseSync;
+function printSync(m) {
+    return (0, core_1.printSync)(m);
+}
+exports.printSync = printSync;

package/dist/interceptors/writeInterceptors.js

@@ -4,20 +4,27 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.writeInterceptors = void 0;
-const node_fs_1 = __importDefault(require("node:fs"));
+const promises_1 = __importDefault(require("node:fs/promises"));
 const path_1 = __importDefault(require("path"));
 // eslint-disable-next-line import/no-extraneous-dependencies
-const glob_1 = __importDefault(require("glob"));
+const glob_1 = require("glob");
 const resolveDependenciesSync_1 = require("../utils/resolveDependenciesSync");
-function writeInterceptors(interceptors, cwd = process.cwd()) {
+function checkFileExists(file) {
+    return promises_1.default
+        .access(file, promises_1.default.constants.F_OK)
+        .then(() => true)
+        .catch(() => false);
+}
+async function writeInterceptors(interceptors, cwd = process.cwd()) {
     const dependencies = (0, resolveDependenciesSync_1.resolveDependenciesSync)(cwd);
     const existing = [];
     dependencies.forEach((dependency) => {
-        const files = glob_1.default.sync(`${dependency}/**/*.interceptor.tsx`, { cwd });
+        const files = (0, glob_1.sync)([`${dependency}/**/*.interceptor.tsx`, `${dependency}/**/*.interceptor.ts`], { cwd });
         existing.push(...files);
     });
-    Object.entries(interceptors).forEach(([, plugin]) => {
-        const relativeFile = `${plugin.fromRoot}.interceptor.tsx`;
+    const written = Object.entries(interceptors).map(async ([, plugin]) => {
+        const extension = plugin.sourcePath.endsWith('.tsx') ? '.tsx' : '.ts';
+        const relativeFile = `${plugin.fromRoot}.interceptor${extension}`;
         if (existing.includes(relativeFile)) {
             delete existing[existing.indexOf(relativeFile)];
         }
@@ -25,12 +32,14 @@ function writeInterceptors(interceptors, cwd = process.cwd()) {
             delete existing[existing.indexOf(`./${relativeFile}`)];
         }
         const fileToWrite = path_1.default.join(cwd, relativeFile);
-        const isSame = node_fs_1.default.existsSync(fileToWrite) &&
-            node_fs_1.default.readFileSync(fileToWrite, 'utf8').toString() === plugin.template;
+        const isSame = (await checkFileExists(fileToWrite)) &&
+            (await promises_1.default.readFile(fileToWrite, 'utf8')).toString() === plugin.template;
         if (!isSame)
-            node_fs_1.default.writeFileSync(fileToWrite, plugin.template);
+            await promises_1.default.writeFile(fileToWrite, plugin.template);
     });
     // Cleanup unused interceptors
-    existing.forEach((file) => node_fs_1.default.existsSync(file) && node_fs_1.default.unlinkSync(file));
+    const cleaned = existing.map(async (file) => (await checkFileExists(file)) && (await promises_1.default.unlink(file)));
+    await Promise.all(written);
+    await Promise.all(cleaned);
 }
 exports.writeInterceptors = writeInterceptors;

package/dist/utils/resolveDependency.js

@@ -8,9 +8,12 @@ const node_fs_1 = __importDefault(require("node:fs"));
 const resolveDependenciesSync_1 = require("./resolveDependenciesSync");
 const resolveDependency = (cwd = process.cwd()) => {
     const dependencies = (0, resolveDependenciesSync_1.resolveDependenciesSync)(cwd);
-    return (dependency) => {
+    function resolve(dependency, options = {}) {
+        const { includeSources = false } = options;
         let dependencyPaths = {
             root: '.',
+            source: '',
+            sourcePath: '',
             dependency,
             fromRoot: dependency,
             fromModule: dependency,
@@ -20,13 +23,23 @@ const resolveDependency = (cwd = process.cwd()) => {
             if (dependency === depCandidate || dependency.startsWith(`${depCandidate}/`)) {
                 const relative = dependency.replace(depCandidate, '');
                 const rootCandidate = dependency.replace(depCandidate, root);
+                let source = '';
+                let sourcePath = '';
                 const fromRoot = [
                     `${rootCandidate}`,
                     `${rootCandidate}/index`,
                     `${rootCandidate}/src/index`,
-                ].find((location) => ['ts', 'tsx'].find((extension) => node_fs_1.default.existsSync(`${location}.${extension}`)));
+                ].find((location) => ['ts', 'tsx'].find((extension) => {
+                    const candidatePath = `${location}.${extension}`;
+                    const exists = node_fs_1.default.existsSync(candidatePath);
+                    if (includeSources && exists) {
+                        source = node_fs_1.default.readFileSync(candidatePath, 'utf-8');
+                        sourcePath = candidatePath;
+                    }
+                    return exists;
+                }));
                 if (!fromRoot) {
-                    throw Error(`Can't find plugin ${dependency}`);
+                    return;
                 }
                 const denormalized = fromRoot.replace(root, depCandidate);
                 let fromModule = !relative
@@ -34,10 +47,19 @@ const resolveDependency = (cwd = process.cwd()) => {
                     : `./${relative.split('/')[relative.split('/').length - 1]}`;
                 if (dependency.startsWith('./'))
                     fromModule = `.${relative}`;
-                dependencyPaths = { root, dependency, denormalized, fromRoot, fromModule };
+                dependencyPaths = {
+                    root,
+                    dependency,
+                    denormalized,
+                    fromRoot,
+                    fromModule,
+                    source,
+                    sourcePath,
+                };
             }
         });
         return dependencyPaths;
-    };
+    }
+    return resolve;
 };
 exports.resolveDependency = resolveDependency;

package/dist/withGraphCommerce.js

@@ -47,6 +47,7 @@ function withGraphCommerce(nextConfig, cwd) {
         experimental: {
             ...nextConfig.experimental,
             scrollRestoration: true,
+            bundlePagesExternals: true,
             swcPlugins: [...(nextConfig.experimental?.swcPlugins ?? []), ['@lingui/swc-plugin', {}]],
         },
         i18n: {
@@ -145,7 +146,7 @@ function withGraphCommerce(nextConfig, cwd) {
                     '@mui/system': '@mui/system/modern',
                 };
             }
-            config.plugins.push(new InterceptorPlugin_1.InterceptorPlugin(graphcommerceConfig));
+            config.plugins.push(new InterceptorPlugin_1.InterceptorPlugin(graphcommerceConfig, !options.isServer));
             return typeof nextConfig.webpack === 'function' ? nextConfig.webpack(config, options) : config;
         },
     };

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.2",
+  "version": "8.1.0-canary.5",
   "type": "commonjs",
   "main": "dist/index.js",
   "types": "src/index.ts",
@@ -16,10 +16,13 @@
     "@lingui/loader": "4.7.0",
     "@lingui/swc-plugin": "4.0.4",
     "@swc/core": "1.3.104",
+    "@swc/wasm-web": "^1.4.8",
     "circular-dependency-plugin": "^5.2.2",
+    "glob": "^10.3.10",
     "inspectpack": "^4.7.1",
     "js-yaml-loader": "^1.2.2",
     "lodash": "^4.17.21",
+    "woodpile": "^0.0.5",
     "znv": "^0.4.0",
     "zod": "^3.22.4"
   },

package/src/config/commands/generateConfig.ts

@@ -13,8 +13,11 @@ const resolve = resolveDependency()
 const schemaLocations = packages.map((p) => `${p}/**/Config.graphqls`)
 
 export async function generateConfig() {
-  const targetTs = `${resolve('@graphcommerce/next-config').root}/src/generated/config.ts`
-  const targetJs = `${resolve('@graphcommerce/next-config').root}/dist/generated/config.js`
+  const resolved = resolve('@graphcommerce/next-config')
+  if (!resolved) throw Error('Could not resolve @graphcommerce/next-config')
+
+  const targetTs = `${resolved.root}/src/generated/config.ts`
+  const targetJs = `${resolved.root}/dist/generated/config.js`
 
   await generate({
     silent: true,

package/src/config/demoConfig.ts

@@ -15,10 +15,25 @@ export const demoConfig: PartialDeep<GraphCommerceConfig, { recurseIntoArrays: t
       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 },
-    { locale: 'en-ca', magentoStoreCode: 'en_CA' },
+    {
+      locale: 'fr-be',
+      magentoStoreCode: 'fr_BE',
+      cartDisplayPricesInclTax: true,
+      linguiLocale: 'fr',
+    },
+    {
+      locale: 'nl-be',
+      magentoStoreCode: 'nl_BE',
+      cartDisplayPricesInclTax: true,
+      linguiLocale: 'nl',
+    },
+    {
+      locale: 'en-gb',
+      magentoStoreCode: 'en_GB',
+      cartDisplayPricesInclTax: true,
+      linguiLocale: 'en',
+    },
+    { locale: 'en-ca', magentoStoreCode: 'en_CA', linguiLocale: 'en' },
   ],
   productFiltersPro: true,
   productFiltersLayout: 'DEFAULT',

package/src/config/index.ts

@@ -1,4 +1,4 @@
-import type { Path } from 'react-hook-form'
+import type { Path, PathValue } from 'react-hook-form'
 import { GraphCommerceConfig } from '../generated/config'
 
 export * from './commands/generateConfig'
@@ -12,4 +12,6 @@ declare global {
   }
 }
 
-export type IfConfig = Path<GraphCommerceConfig>
+export type IfConfig<P extends Path<GraphCommerceConfig> = Path<GraphCommerceConfig>> =
+  | P
+  | [P, PathValue<GraphCommerceConfig, P>]

package/src/generated/config.ts

@@ -20,6 +20,12 @@ export type CompareVariant =
   | 'CHECKBOX'
   | 'ICON';
 
+/** GoogleDatalayerConfig to allow enabling certain aspects of the datalayer */
+export type DatalayerConfig = {
+  /** Enable core web vitals tracking for GraphCommerce */
+  coreWebVitals?: InputMaybe<Scalars['Boolean']['input']>;
+};
+
 /**
  * # GraphCommerce configuration system
  *
@@ -80,7 +86,7 @@ export type CompareVariant =
  *
  * You can export configuration by running `yarn graphcommerce export-config`
  *
- * ## Extending the configuration in your  project
+ * ## Extending the configuration in your project
  *
  * Create a graphql/Config.graphqls file in your project and extend the GraphCommerceConfig, GraphCommerceStorefrontConfig inputs to add configuration.
  *
@@ -159,6 +165,7 @@ export type GraphCommerceConfig = {
    * `customer/create_account/confirm` and should be removed once we can query
    */
   customerRequireEmailConfirmation?: InputMaybe<Scalars['Boolean']['input']>;
+  dataLayer?: InputMaybe<DatalayerConfig>;
   /** Debug configuration for GraphCommerce */
   debug?: InputMaybe<GraphCommerceDebugConfig>;
   /**
@@ -358,9 +365,17 @@ export type GraphCommerceStorefrontConfig = {
   googleTagmanagerId?: InputMaybe<Scalars['String']['input']>;
   /** Add a gcms-locales header to make sure queries return in a certain language, can be an array to define fallbacks. */
   hygraphLocales?: InputMaybe<Array<Scalars['String']['input']>>;
-  /** Specify a custom locale for to load translations. */
+  /**
+   * Specify a custom locale for to load translations. Must be lowercase valid locale.
+   *
+   * This value is also used for the Intl.
+   */
   linguiLocale?: InputMaybe<Scalars['String']['input']>;
-  /** Must be a locale string https://www.unicode.org/reports/tr35/tr35-59/tr35.html#Identifiers */
+  /**
+   * Must be a [locale string](https://www.unicode.org/reports/tr35/tr35-59/tr35.html#Identifiers) for automatic redirects to work.
+   *
+   * This value can be used as a sub-path identifier only, make sure linguiLocale is configured for each URL.
+   */
   locale: Scalars['String']['input'];
   /**
    * Magento store code.
@@ -432,6 +447,12 @@ export const ProductFiltersLayoutSchema = z.enum(['DEFAULT', 'SIDEBAR']);
 
 export const SidebarGalleryPaginationVariantSchema = z.enum(['DOTS', 'THUMBNAILS_BOTTOM']);
 
+export function DatalayerConfigSchema(): z.ZodObject<Properties<DatalayerConfig>> {
+  return z.object({
+    coreWebVitals: z.boolean().nullish()
+  })
+}
+
 export function GraphCommerceConfigSchema(): z.ZodObject<Properties<GraphCommerceConfig>> {
   return z.object({
     canonicalBaseUrl: z.string().min(1),
@@ -443,6 +464,7 @@ export function GraphCommerceConfigSchema(): z.ZodObject<Properties<GraphCommerc
     crossSellsHideCartItems: z.boolean().nullish(),
     crossSellsRedirectItems: z.boolean().nullish(),
     customerRequireEmailConfirmation: z.boolean().nullish(),
+    dataLayer: DatalayerConfigSchema().nullish(),
     debug: GraphCommerceDebugConfigSchema().nullish(),
     demoMode: z.boolean().nullish(),
     enableGuestCheckoutLogin: z.boolean().nullish(),

package/src/index.ts

@@ -1,6 +1,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import type React from 'react'
-
+import type { Path, PathValue } from 'react-hook-form'
+import { GraphCommerceConfig } from './generated/config'
 export * from './utils/isMonorepo'
 export * from './utils/resolveDependenciesSync'
 export * from './utils/packageRoots'
@@ -13,14 +14,23 @@ export type PluginProps<P extends Record<string, unknown> = Record<string, unkno
   Prev: React.FC<P>
 }
 
-export type ReactPlugin<
-  T extends React.FC<any>,
-  AdditionalOptionalProps extends Record<string, unknown> = Record<string, unknown>,
-> = (
-  props: Parameters<T>[0] & AdditionalOptionalProps & { Prev: React.FC<Parameters<T>[0]> },
+export type FunctionPlugin<T extends (...args: any[]) => any> = (
+  prev: T,
+  ...args: Parameters<T>
 ) => ReturnType<T>
 
+/**
+ * @deprecated use FunctionPlugin instead
+ */
 export type MethodPlugin<T extends (...args: any[]) => any> = (
   prev: T,
   ...args: Parameters<T>
 ) => ReturnType<T>
+
+export type PluginConfig<P extends Path<GraphCommerceConfig> = Path<GraphCommerceConfig>> = {
+  type: PluginType
+  module: string
+  ifConfig?: P | [P, PathValue<GraphCommerceConfig, P>]
+}
+
+export type PluginType = 'component' | 'function' | 'replace'