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

package/src/interceptors/findPlugins.ts

@@ -1,63 +1,78 @@
+import { Console } from 'console'
+import { Transform } from 'stream'
 import { parseFileSync } from '@swc/core'
+// 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)
+}
+
 type ParseResult = {
   component?: string
   exported?: string
-  ifEnv?: string
+  ifConfig?: Path<GraphCommerceConfig>
 }
 
 function parseStructure(file: string): ParseResult {
   const ast = parseFileSync(file, { syntax: 'typescript', tsx: true })
-  // const ast = swc.parseFileSync(file, { syntax: 'typescript' })
 
   const imports: Record<string, string> = {}
   const exports: Record<string, string> = {}
 
   ast.body.forEach((node) => {
-    switch (node.type) {
-      case 'ImportDeclaration':
-        node.specifiers.forEach((s) => {
-          if (s.type === 'ImportSpecifier') {
-            imports[s.local.value] = node.source.value
-          }
-        })
-        break
-      case 'ExportDeclaration':
-        switch (node.declaration.type) {
-          case 'VariableDeclaration':
-            node.declaration.declarations.forEach((declaration) => {
-              if (declaration.id.type !== 'Identifier') return
-
-              switch (declaration.init?.type) {
-                case 'StringLiteral':
-                  exports[declaration.id.value] = declaration.init.value
-                  break
-              }
-            })
-            break
-          case 'FunctionDeclaration':
-            if (node.declaration.type === 'FunctionDeclaration') {
-              // console.log('func', node.declaration)
-            }
-            break
-          default:
-            console.log('unknown', node.declaration)
+    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 as ParseResult
 }
 
-export function findPlugins(cwd: string = process.cwd()) {
+let prevlog: any
+
+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 plugins: PluginConfig[] = []
   dependencies.forEach((dependency, path) => {
     const files = glob.sync(`${dependency}/plugins/**/*.tsx`)
@@ -65,14 +80,36 @@ export function findPlugins(cwd: string = process.cwd()) {
       try {
         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(get(config, result.ifConfig)),
+        })
       } catch (e) {
         console.error(`Error parsing ${file}`, e)
       }
     })
   })
 
+  if (debug) {
+    const res = diff(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
 }

package/src/interceptors/generateInterceptors.ts

@@ -4,7 +4,8 @@ export type PluginConfig = {
   component?: string
   exported?: string
   plugin: string
-  ifEnv?: string
+  ifConfig?: string
+  enabled: boolean
 }
 
 type Plugin = ResolveDependencyReturn & {
@@ -109,8 +110,8 @@ export function generateInterceptors(
 ): GenerateInterceptorsReturn {
   // 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) return acc
+    const { exported, component, enabled } = plug
+    if (!exported || !component || !enabled) return acc
 
     const resolved = resolve(exported)
 

package/src/interceptors/writeInterceptors.ts

@@ -1,5 +1,6 @@
 import fs from 'node:fs'
 import path from 'path'
+// eslint-disable-next-line import/no-extraneous-dependencies
 import glob from 'glob'
 import { resolveDependenciesSync } from '../utils/resolveDependenciesSync'
 import { GenerateInterceptorsReturn } from './generateInterceptors'

package/src/utils/resolveDependency.ts

@@ -27,7 +27,11 @@ export const resolveDependency = (cwd: string = process.cwd()) => {
         const relative = dependency.replace(depCandidate, '')
 
         const rootCandidate = dependency.replace(depCandidate, root)
-        const fromRoot = [`${rootCandidate}`, `${rootCandidate}/index`].find((location) =>
+        const fromRoot = [
+          `${rootCandidate}`,
+          `${rootCandidate}/index`,
+          `${rootCandidate}/src/index`,
+        ].find((location) =>
           ['ts', 'tsx'].find((extension) => fs.existsSync(`${location}.${extension}`)),
         )
         if (!fromRoot) throw Error("Can't find plugin target")

package/src/withGraphCommerce.ts

@@ -1,19 +1,110 @@
+import CircularDependencyPlugin from 'circular-dependency-plugin'
+import { DuplicatesPlugin } from 'inspectpack/plugin'
 import type { NextConfig } from 'next'
-import withTranspileModules from 'next-transpile-modules'
-import { DefinePlugin, Configuration } from 'webpack'
+import { DomainLocale } from 'next/dist/server/config'
+import { RemotePattern } from 'next/dist/shared/lib/image-config'
+import { DefinePlugin, Configuration, WebpackPluginInstance } from 'webpack'
+import { loadConfig } from './config/loadConfig'
+import { configToImportMeta } from './config/utils/configToImportMeta'
+import { GraphCommerceConfig } from './generated/config'
 import { InterceptorPlugin } from './interceptors/InterceptorPlugin'
 import { resolveDependenciesSync } from './utils/resolveDependenciesSync'
 
-function extendConfig(nextConfig: NextConfig, modules: string[]): NextConfig {
+let graphcommerceConfig: GraphCommerceConfig
+
+function domains(config: GraphCommerceConfig): DomainLocale[] {
+  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,
+      } as DomainLocale
+
+      return acc
+    }, {} as Record<string, DomainLocale>),
+  )
+}
+
+function remotePatterns(url: string): RemotePattern {
+  const urlObj = new URL(url)
+  return {
+    hostname: urlObj.hostname,
+    protocol: urlObj.protocol as RemotePattern['protocol'],
+    port: urlObj.port,
+  }
+}
+
+/**
+ * GraphCommerce configuration: .
+ *
+ * ```ts
+ * const { withGraphCommerce } = require('@graphcommerce/next-config')
+ *
+ * module.exports = withGraphCommerce(nextConfig)
+ * ```
+ */
+export function withGraphCommerce(nextConfig: NextConfig, cwd: string): NextConfig {
+  graphcommerceConfig ??= loadConfig(cwd)
+  const importMetaPaths = 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: [
+      ...[...resolveDependenciesSync().keys()].slice(1),
+      ...(nextConfig.transpilePackages ?? []),
+    ],
     webpack: (config: Configuration, 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 DefinePlugin(importMetaPaths))
+
       // To properly properly treeshake @apollo/client we need to define the __DEV__ property
       if (!options.isServer) {
-        config.plugins = [new DefinePlugin({ __DEV__: options.dev }), ...(config.plugins ?? [])]
+        config.plugins.push(new DefinePlugin({ __DEV__: options.dev }))
+        if (graphcommerceConfig.debug?.webpackCircularDependencyPlugin) {
+          config.plugins.push(
+            new CircularDependencyPlugin({
+              exclude: /readable-stream|duplexer2|node_modules\/next/,
+            }) as WebpackPluginInstance,
+          )
+        }
+        if (graphcommerceConfig.debug?.webpackDuplicatesPlugin) {
+          config.plugins.push(
+            new DuplicatesPlugin({
+              ignoredPackages: [
+                // very small
+                'react-is',
+                // build issue
+                'tslib',
+                // server
+                'isarray',
+                'readable-stream',
+              ],
+            }),
+          )
+        }
       }
 
       // @lingui .po file support
@@ -24,16 +115,12 @@ function extendConfig(nextConfig: NextConfig, modules: string[]): NextConfig {
         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 = {
@@ -45,24 +132,9 @@ function extendConfig(nextConfig: NextConfig, modules: string[]): NextConfig {
         '@mui/system': '@mui/system/modern',
       }
 
-      config.plugins = [...(config.plugins ?? []), new InterceptorPlugin()]
+      config.plugins.push(new InterceptorPlugin(graphcommerceConfig))
 
       return typeof nextConfig.webpack === 'function' ? nextConfig.webpack(config, options) : config
     },
   }
 }
-
-export type GraphCommerceConfig = {
-  /** Additional packages that should be transpiled, usually this auto generated. */
-  packages?: string[]
-}
-
-export function withGraphCommerce(
-  conf: GraphCommerceConfig = {},
-): (config: NextConfig) => NextConfig {
-  const { packages = [] } = conf
-  const dependencies = [...resolveDependenciesSync().keys()].slice(1)
-
-  const modules = [...dependencies, ...packages]
-  return (config) => extendConfig(withTranspileModules(modules)(config), modules)
-}

package/dist/index.d.ts

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

package/dist/interceptors/InterceptorPlugin.d.ts

@@ -1,8 +0,0 @@
-import { Compiler } from 'webpack';
-export declare class InterceptorPlugin {
-    private interceptors;
-    private interceptorByDepependency;
-    private resolveDependency;
-    constructor();
-    apply(compiler: Compiler): void;
-}

package/dist/interceptors/findPlugins.d.ts

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

package/dist/interceptors/generateInterceptors.d.ts

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

package/dist/interceptors/writeInterceptors.d.ts

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

package/dist/utils/PackagesSort.d.ts

@@ -1,3 +0,0 @@
-import { TopologicalSort } from './TopologicalSort';
-export declare class PackagesSort extends TopologicalSort<string, string> {
-}

package/dist/utils/TopologicalSort.d.ts

@@ -1,16 +0,0 @@
-export interface INodeWithChildren<KeyType, ValueType> {
-    children: InternalNodesMap<KeyType, ValueType>;
-    node: ValueType;
-}
-export type InternalNodesMap<KeyType, ValueType> = Map<KeyType, INodeWithChildren<KeyType, ValueType>>;
-export declare class TopologicalSort<KeyType, ValueType> {
-    #private;
-    constructor(nodes: Map<KeyType, ValueType>);
-    addNode(key: KeyType, node: ValueType): this;
-    addNodes(nodes: Map<KeyType, ValueType>): void;
-    addEdge(fromKey: KeyType, toKey: KeyType): void;
-    sort(): Map<KeyType, INodeWithChildren<KeyType, ValueType>>;
-    private exploreNode;
-    private addInternalNode;
-    private addMultipleInternalNodes;
-}

package/dist/utils/isMonorepo.d.ts

@@ -1 +0,0 @@
-export declare function isMonorepo(): boolean;

package/dist/utils/resolveDependenciesSync.d.ts

@@ -1,22 +0,0 @@
-type PackageNames = Map<string, string>;
-type DependencyStructure = Record<string, {
-    dirName: string;
-    dependencies: string[];
-}>;
-/**
- * We're sorting all dependencies topologically
- *
- * This can detect dependency cycles and throw an error
- */
-export declare function sortDependencies(dependencyStructure: DependencyStructure): PackageNames;
-/**
- * This will return a list of all dependencies that have `graphcommerce` in the name, matching:
- *
- * - `@graphcommerce/package-name`
- * - `@mycompany/graphcommerce-my-feature`
- *
- * It will traverse children until it finds a package that doesn't contain graphcommerce in the name
- * and stop there, not checking children.
- */
-export declare function resolveDependenciesSync(root?: string): PackageNames;
-export {};

package/dist/utils/resolveDependency.d.ts

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

package/dist/withGraphCommerce.d.ts

@@ -1,6 +0,0 @@
-import type { NextConfig } from 'next';
-export type GraphCommerceConfig = {
-    /** Additional packages that should be transpiled, usually this auto generated. */
-    packages?: string[];
-};
-export declare function withGraphCommerce(conf?: GraphCommerceConfig): (config: NextConfig) => NextConfig;