@graphcommerce/next-config 5.2.0-canary.9 → 6.0.0-canary.20

package/dist/interceptors/findPlugins.js

@@ -4,53 +4,63 @@ 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 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);
+}
 function parseStructure(file) {
     const ast = (0, core_1.parseFileSync)(file, { syntax: 'typescript', tsx: true });
-    // const ast = swc.parseFileSync(file, { syntax: 'typescript' })
     const imports = {};
     const exports = {};
     ast.body.forEach((node) => {
-        switch (node.type) {
-            case 'ImportDeclaration':
-                node.specifiers.forEach((s) => {
-                    if (s.type === 'ImportSpecifier') {
-                        imports[s.local.value] = node.source.value;
-                    }
-                });
-                break;
-            case 'ExportDeclaration':
-                switch (node.declaration.type) {
-                    case 'VariableDeclaration':
-                        node.declaration.declarations.forEach((declaration) => {
-                            if (declaration.id.type !== 'Identifier')
-                                return;
-                            switch (declaration.init?.type) {
-                                case 'StringLiteral':
-                                    exports[declaration.id.value] = declaration.init.value;
-                                    break;
-                            }
-                        });
-                        break;
-                    case 'FunctionDeclaration':
-                        if (node.declaration.type === 'FunctionDeclaration') {
-                            // console.log('func', node.declaration)
-                        }
-                        break;
-                    default:
-                        console.log('unknown', node.declaration);
+        if (node.type === 'ImportDeclaration') {
+            node.specifiers.forEach((s) => {
+                if (s.type === 'ImportSpecifier') {
+                    imports[s.local.value] = node.source.value;
+                }
+            });
+        }
+        if (node.type === 'ExportDeclaration' && node.declaration.type === 'VariableDeclaration') {
+            node.declaration.declarations.forEach((declaration) => {
+                if (declaration.init?.type === 'StringLiteral' && declaration.id.type === 'Identifier') {
+                    exports[declaration.id.value] = declaration.init.value;
                 }
-                break;
-            // default:
-            // console.log('hallo', node)
+            });
         }
     });
     return exports;
 }
-function findPlugins(cwd = process.cwd()) {
+let prevlog;
+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 plugins = [];
     dependencies.forEach((dependency, path) => {
         const files = glob_1.default.sync(`${dependency}/plugins/**/*.tsx`);
@@ -59,14 +69,33 @@ function findPlugins(cwd = process.cwd()) {
                 const result = parseStructure(file);
                 if (!result)
                     return;
-                // if (result.ifEnv && !process.env[result.ifEnv]) return
-                plugins.push({ ...result, plugin: file.replace(dependency, path).replace('.tsx', '') });
+                plugins.push({
+                    plugin: file.replace(dependency, path).replace('.tsx', ''),
+                    ...result,
+                    enabled: !result.ifConfig || Boolean((0, get_1.default)(config, result.ifConfig)),
+                });
             }
             catch (e) {
                 console.error(`Error parsing ${file}`, e);
             }
         });
     });
+    if (debug) {
+        const res = (0, diff_1.default)(prevlog, plugins);
+        if (!prevlog) {
+            prevlog = res;
+            table(plugins.map(({ plugin, component, ifConfig, enabled, exported }) => ({
+                '💉': enabled ? '✅' : '❌',
+                Reason: `${ifConfig ? `${ifConfig}` : ''}`,
+                Plugin: plugin,
+                Target: `${exported}#${component}`,
+            })));
+        }
+        else if (res) {
+            table(res);
+        }
+        console.timeEnd('findPlugins');
+    }
     return plugins;
 }
 exports.findPlugins = findPlugins;

package/dist/interceptors/generateInterceptors.js

@@ -74,8 +74,8 @@ exports.generateInterceptor = generateInterceptor;
 function generateInterceptors(plugins, resolve) {
     // todo: Do not use reduce as we're passing the accumulator to the next iteration
     const byExportedComponent = plugins.reduce((acc, plug) => {
-        const { exported, component } = plug;
-        if (!exported || !component)
+        const { exported, component, enabled } = plug;
+        if (!exported || !component || !enabled)
             return acc;
         const resolved = resolve(exported);
         if (!acc[resolved.fromRoot])

package/dist/interceptors/writeInterceptors.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.writeInterceptors = void 0;
 const node_fs_1 = __importDefault(require("node:fs"));
 const path_1 = __importDefault(require("path"));
+// eslint-disable-next-line import/no-extraneous-dependencies
 const glob_1 = __importDefault(require("glob"));
 const resolveDependenciesSync_1 = require("../utils/resolveDependenciesSync");
 function writeInterceptors(interceptors, cwd = process.cwd()) {

package/dist/utils/resolveDependency.js

@@ -20,7 +20,11 @@ const resolveDependency = (cwd = process.cwd()) => {
             if (dependency === depCandidate || dependency.startsWith(`${depCandidate}/`)) {
                 const relative = dependency.replace(depCandidate, '');
                 const rootCandidate = dependency.replace(depCandidate, root);
-                const fromRoot = [`${rootCandidate}`, `${rootCandidate}/index`].find((location) => ['ts', 'tsx'].find((extension) => node_fs_1.default.existsSync(`${location}.${extension}`)));
+                const fromRoot = [
+                    `${rootCandidate}`,
+                    `${rootCandidate}/index`,
+                    `${rootCandidate}/src/index`,
+                ].find((location) => ['ts', 'tsx'].find((extension) => node_fs_1.default.existsSync(`${location}.${extension}`)));
                 if (!fromRoot)
                     throw Error("Can't find plugin target");
                 const denormalized = fromRoot.replace(root, depCandidate);

package/dist/withGraphCommerce.js

@@ -4,19 +4,94 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.withGraphCommerce = void 0;
-const next_transpile_modules_1 = __importDefault(require("next-transpile-modules"));
+const circular_dependency_plugin_1 = __importDefault(require("circular-dependency-plugin"));
+const plugin_1 = require("inspectpack/plugin");
 const webpack_1 = require("webpack");
+const loadConfig_1 = require("./config/loadConfig");
+const configToImportMeta_1 = require("./config/utils/configToImportMeta");
 const InterceptorPlugin_1 = require("./interceptors/InterceptorPlugin");
 const resolveDependenciesSync_1 = require("./utils/resolveDependenciesSync");
-function extendConfig(nextConfig, modules) {
+let graphcommerceConfig;
+function domains(config) {
+    return Object.values(config.i18n.reduce((acc, loc) => {
+        if (!loc.domain)
+            return acc;
+        acc[loc.domain] = {
+            defaultLocale: loc.defaultLocale ? loc.locale : acc[loc.domain]?.defaultLocale,
+            locales: [...(acc[loc.domain]?.locales ?? []), loc.locale],
+            domain: loc.domain,
+            http: true,
+        };
+        return acc;
+    }, {}));
+}
+function remotePatterns(url) {
+    const urlObj = new URL(url);
+    return {
+        hostname: urlObj.hostname,
+        protocol: urlObj.protocol,
+        port: urlObj.port,
+    };
+}
+/**
+ * GraphCommerce configuration: .
+ *
+ * ```ts
+ * const { withGraphCommerce } = require('@graphcommerce/next-config')
+ *
+ * module.exports = withGraphCommerce(nextConfig)
+ * ```
+ */
+function withGraphCommerce(nextConfig, cwd) {
+    graphcommerceConfig ??= (0, loadConfig_1.loadConfig)(cwd);
+    const importMetaPaths = (0, configToImportMeta_1.configToImportMeta)(graphcommerceConfig);
+    const { i18n } = graphcommerceConfig;
     return {
         ...nextConfig,
+        i18n: {
+            defaultLocale: i18n.find((locale) => locale.defaultLocale)?.locale ?? i18n[0].locale,
+            locales: i18n.map((locale) => locale.locale),
+            domains: [...domains(graphcommerceConfig), ...(nextConfig.i18n?.domains ?? [])],
+        },
+        images: {
+            domains: [
+                new URL(graphcommerceConfig.magentoEndpoint).hostname,
+                'media.graphassets.com',
+                ...(nextConfig.images?.domains ?? []),
+            ],
+        },
+        transpilePackages: [
+            ...[...(0, resolveDependenciesSync_1.resolveDependenciesSync)().keys()].slice(1),
+            ...(nextConfig.transpilePackages ?? []),
+        ],
         webpack: (config, options) => {
             // Allow importing yml/yaml files for graphql-mesh
             config.module?.rules?.push({ test: /\.ya?ml$/, use: 'js-yaml-loader' });
+            if (!config.plugins)
+                config.plugins = [];
+            // 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
             if (!options.isServer) {
-                config.plugins = [new webpack_1.DefinePlugin({ __DEV__: options.dev }), ...(config.plugins ?? [])];
+                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/,
+                    }));
+                }
+                if (graphcommerceConfig.debug?.webpackDuplicatesPlugin) {
+                    config.plugins.push(new plugin_1.DuplicatesPlugin({
+                        ignoredPackages: [
+                            // very small
+                            'react-is',
+                            // build issue
+                            'tslib',
+                            // server
+                            'isarray',
+                            'readable-stream',
+                        ],
+                    }));
+                }
             }
             // @lingui .po file support
             config.module?.rules?.push({ test: /\.po/, use: '@lingui/loader' });
@@ -24,15 +99,12 @@ function extendConfig(nextConfig, modules) {
                 layers: true,
                 topLevelAwait: true,
             };
-            config.snapshot = {
-                ...(config.snapshot ?? {}),
-                managedPaths: [new RegExp(`^(.+?[\\/]node_modules[\\/])(?!${modules.join('|')})`)],
-            };
-            // `config.watchOptions.ignored = ['**/.git/**', '**/node_modules/**', '**/.next/**']
-            config.watchOptions = {
-                ...(config.watchOptions ?? {}),
-                ignored: ['**/.git/**', `**/node_modules/!(${modules.join('|')})**`, '**/.next/**'],
-            };
+            // config.snapshot = {
+            //   ...(config.snapshot ?? {}),
+            //   managedPaths: [
+            //     new RegExp(`^(.+?[\\/]node_modules[\\/])(?!${transpilePackages.join('|')})`),
+            //   ],
+            // }
             if (!config.resolve)
                 config.resolve = {};
             config.resolve.alias = {
@@ -43,15 +115,9 @@ function extendConfig(nextConfig, modules) {
                 '@mui/styled-engine': '@mui/styled-engine/modern',
                 '@mui/system': '@mui/system/modern',
             };
-            config.plugins = [...(config.plugins ?? []), new InterceptorPlugin_1.InterceptorPlugin()];
+            config.plugins.push(new InterceptorPlugin_1.InterceptorPlugin(graphcommerceConfig));
             return typeof nextConfig.webpack === 'function' ? nextConfig.webpack(config, options) : config;
         },
     };
 }
-function withGraphCommerce(conf = {}) {
-    const { packages = [] } = conf;
-    const dependencies = [...(0, resolveDependenciesSync_1.resolveDependenciesSync)().keys()].slice(1);
-    const modules = [...dependencies, ...packages];
-    return (config) => extendConfig((0, next_transpile_modules_1.default)(modules)(config), modules);
-}
 exports.withGraphCommerce = withGraphCommerce;

package/package.json

@@ -2,23 +2,30 @@
   "name": "@graphcommerce/next-config",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "5.2.0-canary.9",
+  "version": "6.0.0-canary.20",
   "type": "commonjs",
   "main": "dist/index.js",
-  "typings": "dist/index.d.ts",
+  "types": "src/index.ts",
   "scripts": {
     "dev": "tsc -W --preserveWatchOutput",
-    "generate": "node dist/generate.js",
     "build": "tsc",
-    "prepack": "yarn build"
+    "prepack": "tsc"
   },
   "dependencies": {
-    "@lingui/loader": "^3.15.0",
+    "@graphql-mesh/cli": "0.82.14",
+    "@lingui/loader": "3.17.1",
     "@swc/core": "1.3.23",
+    "circular-dependency-plugin": "^5.2.2",
+    "inspectpack": "^4.7.1",
     "js-yaml-loader": "^1.2.2",
-    "next-transpile-modules": "^10.0.0"
+    "lodash": "^4.17.21",
+    "znv": "^0.3.2",
+    "zod": "^3.20.2"
   },
   "devDependencies": {
+    "@types/circular-dependency-plugin": "^5.0.5",
+    "@types/cli-table": "^0.3.1",
+    "@types/lodash": "^4.14.191",
     "typescript": "4.9.4"
   },
   "peerDependencies": {

package/src/config/generateConfig.ts

@@ -0,0 +1,52 @@
+import { writeFileSync } from 'fs'
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { generate } from '@graphql-codegen/cli'
+import { transformFileSync } from '@swc/core'
+import { resolveDependenciesSync } from '../utils/resolveDependenciesSync'
+import { resolveDependency } from '../utils/resolveDependency'
+import { isMonorepo } from '../utils/isMonorepo'
+
+const packages = [...resolveDependenciesSync().values()].filter((p) => p !== '.')
+
+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`
+
+  await generate({
+    silent: true,
+    schema: ['graphql/**/Config.graphqls', ...schemaLocations],
+    generates: {
+      [targetTs]: {
+        plugins: ['typescript', 'typescript-validation-schema', 'add'],
+        config: {
+          // enumsAsTypes: true,
+          content: '/* eslint-disable */',
+          schema: 'zod',
+          notAllowEmptyString: true,
+          enumsAsTypes: true,
+          scalarSchemas: {
+            Domain: 'z.string()',
+            DateTime: 'z.date()',
+            RichTextAST: 'z.object.json()',
+          },
+        },
+      },
+      ...(isMonorepo() && {
+        '../../docs/framework/config.md': {
+          plugins: ['@graphcommerce/graphql-codegen-markdown-docs'],
+        },
+      }),
+    },
+  })
+
+  const result = transformFileSync(targetTs, {
+    module: { type: 'commonjs' },
+    env: { targets: { node: '16' } },
+  })
+
+  writeFileSync(targetJs, result.code)
+}

package/src/config/index.ts

@@ -0,0 +1,13 @@
+import type { Path } from 'react-hook-form'
+import { GraphCommerceConfig } from '../generated/config'
+
+export * from './generateConfig'
+export * from './loadConfig'
+
+declare global {
+  interface ImportMeta {
+    graphCommerce: GraphCommerceConfig
+  }
+}
+
+export type IfConfig = Path<GraphCommerceConfig>

package/src/config/loadConfig.ts

@@ -0,0 +1,40 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { cosmiconfigSync } from 'cosmiconfig'
+import type { GraphCommerceConfig } from '../generated/config'
+import { GraphCommerceConfigSchema } from '../generated/config'
+import { formatAppliedEnv } from './utils/mergeEnvIntoConfig'
+import { rewriteLegacyEnv } from './utils/rewriteLegacyEnv'
+
+export * from './utils/configToImportMeta'
+
+const moduleName = 'graphcommerce'
+const loader = cosmiconfigSync(moduleName)
+
+export function loadConfig(cwd: string): GraphCommerceConfig {
+  try {
+    const result = loader.search(cwd)
+
+    if (!result) throw Error("Couldn't find a graphcommerce.config.(m)js in the project.")
+
+    const schema = GraphCommerceConfigSchema()
+    const config = schema.parse(result.config)
+
+    if (!config) throw Error("Couldn't find a graphcommerce.config.(m)js in the project.")
+
+    const [mergedConfig, applyResult] = rewriteLegacyEnv(
+      GraphCommerceConfigSchema(),
+      config,
+      process.env,
+    )
+
+    if (applyResult.length > 0) console.log(formatAppliedEnv(applyResult))
+
+    return schema.parse(mergedConfig)
+  } catch (error) {
+    if (error instanceof Error) {
+      console.log(error.message)
+      process.exit(1)
+    }
+    throw error
+  }
+}

package/src/config/utils/configToImportMeta.ts

@@ -0,0 +1,36 @@
+function flattenKeys(value: unknown, initialPathPrefix: string): Record<string, unknown> {
+  // Is a scalar:
+  if (value === null || value === undefined || typeof value === 'number') {
+    return { [initialPathPrefix]: value }
+  }
+
+  if (typeof value === 'string') {
+    return { [initialPathPrefix]: JSON.stringify(value) }
+  }
+
+  if (!value || typeof value !== 'object' || Array.isArray(value)) {
+    return { [initialPathPrefix]: JSON.stringify(value) }
+  }
+
+  if (typeof value === 'object') {
+    return {
+      [initialPathPrefix]:
+        process.env.NODE_ENV === 'development'
+          ? `{ __debug: "'${initialPathPrefix}' can not be destructured, please access deeper properties directly" }`
+          : '{}',
+      ...Object.keys(value)
+        .map((key) => {
+          const deep = (value as Record<string, unknown>)[key]
+          return flattenKeys(deep, `${initialPathPrefix}.${key}`)
+        })
+        .reduce((acc, path) => ({ ...acc, ...path })),
+    }
+  }
+
+  throw Error(`Unexpected value: ${value}`)
+}
+
+/** The result of this function is passed to the webpack DefinePlugin as import.meta.graphCommerce.* */
+export function configToImportMeta(config: unknown) {
+  return flattenKeys(config, 'import.meta.graphCommerce') as Record<string, string>
+}

package/src/config/utils/diff.ts

@@ -0,0 +1,39 @@
+function isObject(val: unknown): val is Record<string, unknown> {
+  return typeof val === 'object' && val !== null
+}
+function isArray(val: unknown): val is unknown[] {
+  return Array.isArray(val)
+}
+
+/** Simple diff function, retuns the values of the second object. */
+export default function diff(item1: unknown, item2: unknown): unknown {
+  const item1Type = typeof item2
+  const item2Type = typeof item2
+  const isSame = item1Type === item2Type
+
+  // If the types aren't the same we always have a diff
+  if (!isSame) return item2
+
+  if (isArray(item1) && isArray(item2)) {
+    const res = item1.map((val, idx) => diff(val, item2[idx])).filter((val) => !!val)
+    return res.length ? res : undefined
+  }
+
+  if (isObject(item1) && isObject(item2)) {
+    const entriesRight = Object.fromEntries(
+      Object.entries(item1)
+        .map(([key, val]) => [key, diff(val, item2[key])])
+        .filter((entry) => !!entry[1]),
+    )
+    const entriesLeft = Object.fromEntries(
+      Object.entries(item2)
+        .map(([key, val]) => [key, diff(item1[key], val)])
+        .filter((entry) => !!entry[1]),
+    )
+    const entries = { ...entriesRight, ...entriesLeft } as Record<string, unknown>
+
+    return Object.keys(entries).length ? entries : undefined
+  }
+
+  return item2 === item1 ? undefined : item2
+}