@graphcommerce/next-config 9.1.0-canary.55 → 10.0.0-canary.57

package/src/commands/generateConfigValues.ts

@@ -0,0 +1,265 @@
+/* eslint-disable quotes */
+import { existsSync, mkdirSync, rmSync, writeFileSync } from 'fs'
+import path from 'path'
+import prettierConf from '@graphcommerce/prettier-config-pwa'
+import { transformFileSync } from '@swc/core'
+import dotenv from 'dotenv'
+import prettier from 'prettier'
+import { loadConfig } from '../config/loadConfig'
+import type { GraphCommerceConfig } from '../generated/config'
+import { GraphCommerceConfigSchema } from '../generated/config'
+import { resolveDependency } from '../utils/resolveDependency'
+
+dotenv.config({ quiet: true })
+
+const resolve = resolveDependency()
+
+/** Keeps camelCase for file names and export names */
+function toFileName(key: string): string {
+  return key
+}
+
+/** Generates a TypeScript value literal for the given value */
+function generateValueLiteral(value: unknown): string {
+  if (value === null) return 'null'
+  if (value === undefined) return 'undefined'
+  if (typeof value === 'string') return JSON.stringify(value)
+  if (typeof value === 'boolean' || typeof value === 'number') return String(value)
+  if (Array.isArray(value) || (typeof value === 'object' && value !== null)) {
+    return JSON.stringify(value, null, 2)
+  }
+  return JSON.stringify(value)
+}
+
+/** Checks if a value should get its own file (non-null objects only, not arrays) */
+function shouldCreateFile(value: unknown): boolean {
+  return typeof value === 'object' && value !== null && !Array.isArray(value)
+}
+
+/** Gets the schema keys for a specific config section */
+function getSectionSchemaKeys(configKey: keyof GraphCommerceConfig): string[] {
+  try {
+    const mainSchema = GraphCommerceConfigSchema()
+    const sectionSchema = mainSchema.shape[configKey]
+
+    if (!sectionSchema) return []
+
+    // Handle different schema wrapper types
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    let unwrappedSchema: any = sectionSchema
+
+    // Unwrap wrapper types in a loop to handle chained wrappers (e.g., ZodLazy containing ZodOptional)
+    // eslint-disable-next-line no-constant-condition
+    while (true) {
+      if (!unwrappedSchema || typeof unwrappedSchema !== 'object') break
+      if (!('_def' in unwrappedSchema)) break
+
+      // eslint-disable-next-line no-underscore-dangle
+      const def = unwrappedSchema._def
+      const typeName = def?.typeName as string | undefined
+
+      // Handle ZodLazy - need to evaluate the getter
+      if (typeName === 'ZodLazy' && def.getter) {
+        unwrappedSchema = def.getter()
+        continue
+      }
+
+      // Handle ZodOptional, ZodNullable, ZodDefault
+      if (def.innerType) {
+        unwrappedSchema = def.innerType
+        continue
+      }
+
+      // Handle ZodObject - this is what we want
+      if (typeName === 'ZodObject' && def.shape) {
+        const shape =
+          typeof def.shape === 'function'
+            ? (def.shape as () => Record<string, unknown>)()
+            : (def.shape as Record<string, unknown>)
+        return Object.keys(shape || {})
+      }
+
+      break
+    }
+
+    
+    // Direct ZodObject
+    if (unwrappedSchema && 'shape' in unwrappedSchema) {
+      const shape =
+        typeof unwrappedSchema.shape === 'function'
+          ? (unwrappedSchema.shape as () => Record<string, unknown>)()
+          : (unwrappedSchema.shape as Record<string, unknown>)
+      return Object.keys(shape || {})
+    }
+  } catch {
+    // Silently fail and return empty array
+  }
+
+  return []
+}
+
+/** Creates a configuration section file for nested objects */
+async function createConfigSectionFile(
+  sectionName: string,
+  sectionValue: Record<string, unknown>,
+  targetDir: string,
+  targetDistDir: string,
+  configKey: keyof GraphCommerceConfig,
+): Promise<void> {
+  const fileName = `${toFileName(sectionName)}.ts`
+  const filePath = path.join(targetDir, fileName)
+  const distFileName = `${toFileName(sectionName)}.js`
+  const distFilePath = path.join(targetDistDir, distFileName)
+
+  // Get all schema keys for this section to include all properties, even undefined ones
+  const schemaKeys = getSectionSchemaKeys(configKey)
+
+  // Create complete section object with schema defaults
+  const completeSectionValue: Record<string, unknown> = {}
+  for (const key of schemaKeys) {
+    completeSectionValue[key] = sectionValue[key] // Use actual value if present, undefined if not
+  }
+
+  // Create individual exports for each property with proper typing
+  const exports = Object.entries(completeSectionValue)
+    .map(([key, value]) => {
+      const valueStr = generateValueLiteral(value)
+      const propertyPath = `'${sectionName}.${key}'`
+
+      // Always include type annotation
+      const typeAnnotation = `: Get<GraphCommerceConfig, ${propertyPath}>`
+
+      return `export const ${key}${typeAnnotation} = ${valueStr}`
+    })
+    .join('\n\n')
+
+  // Always need the Get import since we always use type annotations
+  const needsGetImport = true
+
+  const imports = needsGetImport
+    ? `import type { GraphCommerceConfig } from '../config'\nimport type { Get } from 'type-fest'`
+    : `import type { GraphCommerceConfig } from '../config'`
+
+  const content = `// Auto-generated by 'yarn graphcommerce codegen-config-values'
+${imports}
+
+${exports}
+`
+
+  const formattedContent = await prettier.format(content, {
+    ...prettierConf,
+    parser: 'typescript',
+    plugins: prettierConf.plugins?.filter(
+      (p) => typeof p === 'string' && !p.includes('prettier-plugin-sort-imports'),
+    ),
+  })
+
+  // Write TypeScript file
+  writeFileSync(filePath, formattedContent)
+
+  // Transform and write JavaScript file
+  const result = transformFileSync(filePath, {
+    module: { type: 'nodenext' },
+    env: { targets: { node: '18' } },
+  })
+
+  writeFileSync(distFilePath, result.code)
+}
+
+export async function generateConfigValues() {
+  const resolved = resolve('@graphcommerce/next-config')
+  if (!resolved) throw Error('Could not resolve @graphcommerce/next-config')
+
+  const config = loadConfig(process.cwd())
+  const targetDir = `${resolved.root}/src/generated/configValues`
+  const targetDistDir = `${resolved.root}/dist/generated/configValues`
+
+  // Clean up existing directories and recreate them
+  if (existsSync(targetDir)) {
+    rmSync(targetDir, { recursive: true, force: true })
+  }
+  if (existsSync(targetDistDir)) {
+    rmSync(targetDistDir, { recursive: true, force: true })
+  }
+  mkdirSync(targetDir, { recursive: true })
+  mkdirSync(targetDistDir, { recursive: true })
+
+  // Get all schema keys to ensure we include everything, even undefined values
+  const schema = GraphCommerceConfigSchema()
+  const schemaKeys = Object.keys(schema.shape) as (keyof GraphCommerceConfig)[]
+
+  // Create a complete config object with schema defaults
+  const completeConfig: Record<string, unknown> = {}
+  for (const key of schemaKeys) {
+    completeConfig[key] = config[key] // Use actual value if present, undefined if not
+  }
+
+  const configEntries = Object.entries(completeConfig) as [keyof GraphCommerceConfig, unknown][]
+  const nestedObjects: [string, Record<string, unknown>, keyof GraphCommerceConfig][] = []
+  const rootExports: string[] = []
+
+  // Separate nested objects from root-level values
+  for (const [key, value] of configEntries) {
+    if (shouldCreateFile(value)) {
+      // Create file for nested object
+      nestedObjects.push([key, value as Record<string, unknown>, key])
+      rootExports.push(`export * as ${key} from './${toFileName(key)}'`)
+    } else {
+      // Add to root exports (including undefined values)
+      const valueStr = generateValueLiteral(value)
+      // Always include type annotation
+      const typeAnnotation = `: Get<GraphCommerceConfig, '${key}'>`
+      rootExports.push(`export const ${key}${typeAnnotation} = ${valueStr}`)
+    }
+  }
+
+  // Create files for nested objects
+  await Promise.all(
+    nestedObjects.map(([sectionName, sectionValue, configKey]) =>
+      createConfigSectionFile(sectionName, sectionValue, targetDir, targetDistDir, configKey),
+    ),
+  )
+
+  // Always need the Get import since we always use type annotations
+  const rootNeedsGetImport = true
+
+  const rootImports = rootNeedsGetImport
+    ? `import type { GraphCommerceConfig } from '../config'\nimport type { Get } from 'type-fest'`
+    : `import type { GraphCommerceConfig } from '../config'`
+
+  // Create the main index file
+  const indexContent = `// Auto-generated by 'yarn graphcommerce codegen-config-values'
+${rootImports}
+
+${rootExports.join('\n')}
+`
+
+  const formattedIndexContent = await prettier.format(indexContent, {
+    ...prettierConf,
+    parser: 'typescript',
+    plugins: prettierConf.plugins?.filter(
+      (p) => typeof p === 'string' && !p.includes('prettier-plugin-sort-imports'),
+    ),
+  })
+
+  const indexPath = path.join(targetDir, 'index.ts')
+  const distIndexPath = path.join(targetDistDir, 'index.js')
+
+  // Write TypeScript index file
+  writeFileSync(indexPath, formattedIndexContent)
+
+  // Transform and write JavaScript index file
+  const indexResult = transformFileSync(indexPath, {
+    module: { type: 'nodenext' },
+    env: { targets: { node: '20' } },
+  })
+
+  writeFileSync(distIndexPath, indexResult.code)
+
+  // eslint-disable-next-line no-console
+  console.log(`✅ Generated config values in ${targetDir} and ${targetDistDir}`)
+  // eslint-disable-next-line no-console
+  console.log(`📁 Created ${nestedObjects.length} nested object files + index.ts/.js`)
+  // eslint-disable-next-line no-console
+  console.log(`📝 Root exports: ${configEntries.length - nestedObjects.length}`)
+}

package/src/commands/index.ts

@@ -0,0 +1,7 @@
+export * from './cleanupInterceptors'
+export * from './codegen'
+export * from './codegenInterceptors'
+export * from './copyFiles'
+export * from './exportConfig'
+export * from './generateConfig'
+export * from './generateConfigValues'

package/src/config/index.ts

@@ -1,17 +1,8 @@
 import type { Path, PathValue } from 'react-hook-form'
 import type { GraphCommerceConfig } from '../generated/config'
 
-export * from './commands/generateConfig'
-export * from './commands/exportConfig'
-
 export * from './loadConfig'
 
-declare global {
-  interface ImportMeta {
-    graphCommerce: GraphCommerceConfig
-  }
-}
-
 export type IfConfig<P extends Path<GraphCommerceConfig> = Path<GraphCommerceConfig>> =
   | P
   | [P, PathValue<GraphCommerceConfig, P>]

package/src/config/loadConfig.ts

@@ -5,7 +5,6 @@ import { GraphCommerceConfigSchema } from '../generated/config'
 import { demoConfig } from './demoConfig'
 import { formatAppliedEnv, mergeEnvIntoConfig } from './utils/mergeEnvIntoConfig'
 
-export * from './utils/configToImportMeta'
 export * from './utils/replaceConfigInString'
 
 const moduleName = 'graphcommerce'

package/src/config/utils/mergeEnvIntoConfig.ts

@@ -9,6 +9,7 @@ import {
   ZodDefault,
   ZodEffects,
   ZodEnum,
+  ZodLazy,
   ZodNullable,
   ZodNumber,
   ZodObject,
@@ -47,6 +48,7 @@ export type ZodNode =
   | ZodEffects<ZodTypeAny>
   | ZodObject<ZodRawShape>
   | ZodArray<ZodTypeAny>
+  | ZodLazy<ZodTypeAny>
   | ZodString
   | ZodNumber
   | ZodBoolean
@@ -59,10 +61,31 @@ export function configToEnvSchema(schema: ZodNode) {
   function walk(incomming: ZodNode, path: string[] = []) {
     let node = incomming
 
-    if (node instanceof ZodEffects) node = node.innerType()
-    if (node instanceof ZodOptional) node = node.unwrap()
-    if (node instanceof ZodNullable) node = node.unwrap()
-    if (node instanceof ZodDefault) node = node.removeDefault()
+    // Unwrap wrapper types in a loop to handle chained wrappers (e.g., ZodLazy containing ZodOptional)
+    // eslint-disable-next-line no-constant-condition
+    while (true) {
+      if (node instanceof ZodEffects) {
+        node = node.innerType()
+        continue
+      }
+      if (node instanceof ZodOptional) {
+        node = node.unwrap()
+        continue
+      }
+      if (node instanceof ZodNullable) {
+        node = node.unwrap()
+        continue
+      }
+      if (node instanceof ZodDefault) {
+        node = node.removeDefault()
+        continue
+      }
+      if (node instanceof ZodLazy) {
+        node = node.schema
+        continue
+      }
+      break
+    }
 
     if (node instanceof ZodObject) {
       if (path.length > 0) {

package/src/generated/config.ts

@@ -59,9 +59,9 @@ export type DatalayerConfig = {
  *   storefrontConfigDefault,
  *   useStorefrontConfig,
  * } from '@graphcommerce/next-ui'
- *
+ * import { cartDisplayPricesInclTax } from '@graphcommerce/next-config/config'
  * // Accessing a global value
- * const globalConf = import.meta.graphCommerce.cartDisplayPricesInclTax
+ * const globalConf = cartDisplayPricesInclTax
  *
  * function MyComponent() {
  *   // Configuration configured per storefront locale.
@@ -72,8 +72,7 @@ export type DatalayerConfig = {
  *
  *   // Or as single line
  *   const scopedConfigWithFallback2 =
- *     useStorefrontConfig().cartDisplayPricesInclTax ??
- *     import.meta.graphCommerce.cartDisplayPricesInclTax
+ *     useStorefrontConfig().cartDisplayPricesInclTax ?? cartDisplayPricesInclTax
  *
  *   return <div>{googleRecaptchaKey}</div>
  * }
@@ -263,7 +262,7 @@ export type GraphCommerceConfig = {
    */
   graphqlMeshEditMode?: InputMaybe<Scalars['Boolean']['input']>
   /**
-   * The HyGraph endpoint.
+   * The Hygraph endpoint.
    *
    * > Read-only endpoint that allows low latency and high read-throughput content delivery.
    *
@@ -604,7 +603,7 @@ export function GraphCommerceConfigSchema(): z.ZodObject<Properties<GraphCommerc
     compare: z.boolean().nullish(),
     compareVariant: CompareVariantSchema.default('ICON').nullish(),
     configurableVariantForSimple: z.boolean().default(false).nullish(),
-    configurableVariantValues: MagentoConfigurableVariantValuesSchema().nullish(),
+    configurableVariantValues: z.lazy(() => MagentoConfigurableVariantValuesSchema().nullish()),
     containerSizingContent: ContainerSizingSchema.default('FULL_WIDTH').nullish(),
     containerSizingShell: ContainerSizingSchema.default('FULL_WIDTH').nullish(),
     crossSellsHideCartItems: z.boolean().default(false).nullish(),
@@ -613,12 +612,12 @@ export function GraphCommerceConfigSchema(): z.ZodObject<Properties<GraphCommerc
     customerCompanyFieldsEnable: z.boolean().nullish(),
     customerDeleteEnabled: z.boolean().nullish(),
     customerXMagentoCacheIdDisable: z.boolean().nullish(),
-    dataLayer: DatalayerConfigSchema().nullish(),
-    debug: GraphCommerceDebugConfigSchema().nullish(),
+    dataLayer: z.lazy(() => DatalayerConfigSchema().nullish()),
+    debug: z.lazy(() => GraphCommerceDebugConfigSchema().nullish()),
     demoMode: z.boolean().default(true).nullish(),
     enableGuestCheckoutLogin: z.boolean().nullish(),
     googleAnalyticsId: z.string().nullish(),
-    googlePlaystore: GraphCommerceGooglePlaystoreConfigSchema().nullish(),
+    googlePlaystore: z.lazy(() => GraphCommerceGooglePlaystoreConfigSchema().nullish()),
     googleRecaptchaKey: z.string().nullish(),
     googleTagmanagerId: z.string().nullish(),
     graphqlMeshEditMode: z.boolean().default(false).nullish(),
@@ -629,16 +628,16 @@ export function GraphCommerceConfigSchema(): z.ZodObject<Properties<GraphCommerc
     limitSsg: z.boolean().nullish(),
     magentoEndpoint: z.string().min(1),
     magentoVersion: z.number(),
-    permissions: GraphCommercePermissionsSchema().nullish(),
+    permissions: z.lazy(() => GraphCommercePermissionsSchema().nullish()),
     previewSecret: z.string().nullish(),
     productFiltersLayout: ProductFiltersLayoutSchema.default('DEFAULT').nullish(),
     productFiltersPro: z.boolean().nullish(),
     productListPaginationVariant: PaginationVariantSchema.default('COMPACT').nullish(),
     productRoute: z.string().nullish(),
-    recentlyViewedProducts: RecentlyViewedProductsConfigSchema().nullish(),
+    recentlyViewedProducts: z.lazy(() => RecentlyViewedProductsConfigSchema().nullish()),
     robotsAllow: z.boolean().nullish(),
-    sidebarGallery: SidebarGalleryConfigSchema().nullish(),
-    storefront: z.array(GraphCommerceStorefrontConfigSchema()),
+    sidebarGallery: z.lazy(() => SidebarGalleryConfigSchema().nullish()),
+    storefront: z.array(z.lazy(() => GraphCommerceStorefrontConfigSchema())),
     wishlistHideForGuests: z.boolean().nullish(),
     wishlistShowFeedbackMessage: z.boolean().nullish(),
   })
@@ -692,7 +691,7 @@ export function GraphCommerceStorefrontConfigSchema(): z.ZodObject<
     linguiLocale: z.string().nullish(),
     locale: z.string().min(1),
     magentoStoreCode: z.string().min(1),
-    permissions: GraphCommercePermissionsSchema().nullish(),
+    permissions: z.lazy(() => GraphCommercePermissionsSchema().nullish()),
     robotsAllow: z.boolean().nullish(),
   })
 }

package/src/index.ts

@@ -1,45 +1,13 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import type React from 'react'
-import type { Path, PathValue } from 'react-hook-form'
-import type { GraphCommerceConfig } from './generated/config'
-
-export * from './utils/isMonorepo'
-export * from './utils/resolveDependenciesSync'
-export * from './utils/packageRoots'
-export * from './utils/sig'
+export * from './commands'
+export * from './config'
 export {
-  type GraphCommerceConfig,
   GraphCommerceConfigSchema,
-  type GraphCommerceStorefrontConfig,
+  GraphCommerceDebugConfigSchema,
   GraphCommerceStorefrontConfigSchema,
+  type GraphCommerceConfig,
   type GraphCommerceDebugConfig,
-  GraphCommerceDebugConfigSchema,
+  type GraphCommerceStorefrontConfig,
 } from './generated/config'
+export * from './types'
+export * from './utils'
 export * from './withGraphCommerce'
-export * from './config'
-export * from './interceptors/commands/codegenInterceptors'
-export * from './commands/copyFiles'
-export * from './commands/codegen'
-
-export type PluginProps<P extends Record<string, unknown> = Record<string, unknown>> = P & {
-  Prev: React.FC<P>
-}
-
-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'