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

package/package.json

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

package/src/config/commands/exportConfig.ts

@@ -1,5 +1,8 @@
 import { loadConfig } from '../loadConfig'
 import { exportConfigToEnv } from '../utils/exportConfigToEnv'
+import dotenv from 'dotenv'
+
+dotenv.config()
 
 // eslint-disable-next-line @typescript-eslint/require-await
 export async function exportConfig() {

package/src/config/commands/generateConfig.ts

@@ -2,10 +2,13 @@ import { writeFileSync } from 'fs'
 // eslint-disable-next-line import/no-extraneous-dependencies
 import { generate } from '@graphql-codegen/cli'
 import { transformFileSync } from '@swc/core'
+import dotenv from 'dotenv'
 import { isMonorepo } from '../../utils/isMonorepo'
 import { resolveDependenciesSync } from '../../utils/resolveDependenciesSync'
 import { resolveDependency } from '../../utils/resolveDependency'
 
+dotenv.config()
+
 const packages = [...resolveDependenciesSync().values()].filter((p) => p !== '.')
 
 const resolve = resolveDependency()

package/src/generated/config.ts

@@ -365,11 +365,7 @@ 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. Must be lowercase valid locale.
-   *
-   * This value is also used for the Intl.
-   */
+  /** Custom locale used to load the .po files. Must be a valid locale, also used for Intl functions. */
   linguiLocale?: InputMaybe<Scalars['String']['input']>;
   /**
    * Must be a [locale string](https://www.unicode.org/reports/tr35/tr35-59/tr35.html#Identifiers) for automatic redirects to work.
@@ -388,6 +384,11 @@ export type GraphCommerceStorefrontConfig = {
    * - b2b-us
    */
   magentoStoreCode: Scalars['String']['input'];
+  /**
+   * Allow the site to be indexed by search engines.
+   * If false, the robots.txt file will be set to disallow all.
+   */
+  robotsAllow?: InputMaybe<Scalars['Boolean']['input']>;
 };
 
 /** Options to configure which values will be replaced when a variant is selected on the product page. */
@@ -512,7 +513,8 @@ export function GraphCommerceStorefrontConfigSchema(): z.ZodObject<Properties<Gr
     hygraphLocales: z.array(z.string().min(1)).nullish(),
     linguiLocale: z.string().nullish(),
     locale: z.string().min(1),
-    magentoStoreCode: z.string().min(1)
+    magentoStoreCode: z.string().min(1),
+    robotsAllow: z.boolean().nullish()
   })
 }
 

package/src/index.ts

@@ -9,6 +9,7 @@ export * from './withGraphCommerce'
 export * from './generated/config'
 export * from './config'
 export * from './runtimeCachingOptimizations'
+export * from './interceptors/commands/codegenInterceptors'
 
 export type PluginProps<P extends Record<string, unknown> = Record<string, unknown>> = P & {
   Prev: React.FC<P>

package/src/interceptors/commands/codegenInterceptors.ts

@@ -0,0 +1,27 @@
+import { loadConfig } from '../../config/loadConfig'
+import { resolveDependency } from '../../utils/resolveDependency'
+import { findPlugins } from '../findPlugins'
+import { generateInterceptors } from '../generateInterceptors'
+import { writeInterceptors } from '../writeInterceptors'
+import dotenv from 'dotenv'
+
+dotenv.config()
+
+// eslint-disable-next-line @typescript-eslint/require-await
+export async function codegenInterceptors() {
+  const conf = loadConfig(process.cwd())
+
+  const [plugins, errors] = findPlugins(conf)
+
+  const generatedInterceptors = await generateInterceptors(
+    plugins,
+    resolveDependency(),
+    conf.debug,
+    true,
+  )
+
+  // const generated = Date.now()
+  // console.log('Generated interceptors in', generated - found, 'ms')
+
+  await writeInterceptors(generatedInterceptors)
+}

package/src/interceptors/findPlugins.ts

@@ -17,10 +17,14 @@ export function findPlugins(config: GraphCommerceConfig, cwd: string = process.c
 
   const errors: string[] = []
   const plugins: PluginConfig[] = []
-  dependencies.forEach((dependency, path) => {
-    const files = globSync(`${dependency}/plugins/**/*.{ts,tsx}`, { dotRelative: true })
+  dependencies.forEach((filePath, packageName) => {
+    const files = globSync(`${filePath}/plugins/**/*.{ts,tsx}`)
     files.forEach((file) => {
-      const sourceModule = file.replace(dependency, path).replace('.tsx', '').replace('.ts', '')
+      let sourceModule = file.replace('.tsx', '').replace('.ts', '')
+      if (file.startsWith(filePath))
+        sourceModule = `${packageName}/${sourceModule.slice(filePath.length + 1)}`
+
+      if (packageName === '.' && !sourceModule.startsWith('.')) sourceModule = `./${sourceModule}`
 
       try {
         const ast = parseFileSync(file, { syntax: 'typescript', tsx: true })

package/src/interceptors/generateInterceptor.ts

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

package/src/interceptors/generateInterceptors.ts

@@ -19,6 +19,7 @@ export async function generateInterceptors(
   plugins: PluginConfig[],
   resolve: ResolveDependency,
   config?: GraphCommerceDebugConfig | null | undefined,
+  force?: boolean,
 ): Promise<GenerateInterceptorsReturn> {
   const byTargetModuleAndExport = moveRelativeDown(plugins).reduce<Record<string, Interceptor>>(
     (acc, plug) => {
@@ -68,12 +69,14 @@ export async function generateInterceptors(
       Object.entries(byTargetModuleAndExport).map(async ([target, interceptor]) => {
         const file = `${interceptor.fromRoot}.interceptor.tsx`
 
-        const originalSource = (await fs
-          .access(file, fs.constants.F_OK)
-          .then(() => true)
-          .catch(() => false))
-          ? (await fs.readFile(file)).toString()
-          : undefined
+        const originalSource =
+          !force &&
+          (await fs
+            .access(file, fs.constants.F_OK)
+            .then(() => true)
+            .catch(() => false))
+            ? (await fs.readFile(file)).toString()
+            : undefined
 
         return [
           target,

package/src/utils/resolveDependenciesSync.ts

@@ -12,6 +12,7 @@ function resolveRecursivePackageJson(
   dependencyPath: string,
   dependencyStructure: DependencyStructure,
   root: string,
+  additionalDependencies: string[] = [],
 ) {
   const isRoot = dependencyPath === root
   const fileName = require.resolve(path.join(dependencyPath, 'package.json'))
@@ -28,8 +29,9 @@ function resolveRecursivePackageJson(
   const dependencies = [
     ...new Set(
       [
-        ...Object.keys(packageJson.dependencies ?? {}),
-        ...Object.keys(packageJson.devDependencies ?? {}),
+        ...Object.keys(packageJson.dependencies ?? []),
+        ...Object.keys(packageJson.devDependencies ?? []),
+        ...additionalDependencies,
         // ...Object.keys(packageJson.peerDependencies ?? {}),
       ].filter((name) => name.includes('graphcommerce')),
     ),
@@ -77,7 +79,13 @@ export function sortDependencies(dependencyStructure: DependencyStructure): Pack
 export function resolveDependenciesSync(root = process.cwd()) {
   const cached = resolveCache.get(root)
   if (cached) return cached
-  const dependencyStructure = resolveRecursivePackageJson(root, {}, root)
+
+  const dependencyStructure = resolveRecursivePackageJson(
+    root,
+    {},
+    root,
+    process.env.PRIVATE_ADDITIONAL_DEPENDENCIES?.split(',') ?? [],
+  )
 
   const sorted = sortDependencies(dependencyStructure)
   resolveCache.set(root, sorted)

package/src/utils/resolveDependency.ts

@@ -11,6 +11,7 @@ export type ResolveDependencyReturn =
       fromModule: string
       source: string
       sourcePath: string
+      sourcePathRelative: string
     }
 
 export type ResolveDependency = (
@@ -31,6 +32,7 @@ export const resolveDependency = (cwd: string = process.cwd()) => {
       root: '.',
       source: '',
       sourcePath: '',
+      sourcePathRelative: '',
       dependency,
       fromRoot: dependency,
       fromModule: dependency,
@@ -73,6 +75,10 @@ export const resolveDependency = (cwd: string = process.cwd()) => {
           ? '.'
           : `./${relative.split('/')[relative.split('/').length - 1]}`
 
+        const sourcePathRelative = !sourcePath
+          ? '.'
+          : `./${sourcePath.split('/')[sourcePath.split('/').length - 1]}`
+
         if (dependency.startsWith('./')) fromModule = `.${relative}`
 
         dependencyPaths = {
@@ -83,6 +89,7 @@ export const resolveDependency = (cwd: string = process.cwd()) => {
           fromModule,
           source,
           sourcePath,
+          sourcePathRelative,
         }
       }
     })

package/src/withGraphCommerce.ts

@@ -121,8 +121,9 @@ export function withGraphCommerce(nextConfig: NextConfig, cwd: string): NextConf
       config.plugins.push(new DefinePlugin(importMetaPaths))
 
       // To properly properly treeshake @apollo/client we need to define the __DEV__ property
+      config.plugins.push(new DefinePlugin({ 'globalThis.__DEV__': options.dev }))
+
       if (!options.isServer) {
-        config.plugins.push(new DefinePlugin({ __DEV__: options.dev }))
         if (graphcommerceConfig.debug?.webpackCircularDependencyPlugin) {
           config.plugins.push(
             new CircularDependencyPlugin({