@graphcommerce/next-config 4.31.0-canary.2 → 4.31.0-canary.3

package/dist/index.d.ts

@@ -1,10 +1,10 @@
 import { NextConfig } from 'next/dist/server/config-shared';
-import React from 'react';
+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 declare type PluginProps<P extends Record<string, unknown> = Record<string, unknown>> = P & {
-    Component: React.FC<P>;
+    Prev: React.FC<P>;
 };

package/dist/interceptors/InterceptorPlugin.js

@@ -55,12 +55,12 @@ class InterceptorPlugin {
                 }
                 const interceptorForRequest = this.interceptorByDepependency[resource.request];
                 if (interceptorForRequest) {
-                    logger.log(`Intercepting... ${interceptorForRequest.dependency}`);
+                    logger.log(`Intercepting dep... ${interceptorForRequest.dependency}`);
                     resource.request = `${interceptorForRequest.denormalized}.interceptor.tsx`;
                 }
                 const interceptorForPath = this.interceptors[requestPath];
                 if (interceptorForPath) {
-                    logger.log(`Intercepting... ${interceptorForPath.fromRoot}`);
+                    logger.log(`Intercepting fromRoot... ${interceptorForPath.fromRoot}`);
                     resource.request = `${resource.request}.interceptor.tsx`;
                 }
             });

package/dist/interceptors/generateInterceptors.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.generateInterceptors = exports.generateInterceptor = void 0;
 function generateInterceptor(plugin) {
-    const { fromModule, components } = plugin;
+    const { fromModule, dependency, components } = plugin;
     const pluginImports = Object.entries(components)
         .map(([_, plugins]) => {
         const duplicateImports = new Set();
@@ -19,9 +19,12 @@ function generateInterceptor(plugin) {
             .join('\n');
     })
         .join('\n');
-    const importInjectables = `import { ${Object.entries(components)
-        .map(([component]) => `${component} as ${component}Base`)
-        .join(', ')} } from '${fromModule}'`;
+    const imports = Object.entries(components).map(([component]) => `${component} as ${component}Base`);
+    const importInjectables = imports.length > 1
+        ? `import { 
+  ${imports.join(',\n  ')},
+} from '${fromModule}'`
+        : `import { ${imports[0]} } from '${fromModule}'`;
     const pluginExports = Object.entries(components)
         .map(([component, plugins]) => {
         const duplicateImports = new Set();
@@ -37,30 +40,32 @@ function generateInterceptor(plugin) {
             return true;
         })
             .map((name) => {
-            const result = `const ${name}Interceptor = (props: ${component}BaseProps) => (
-  <${name} {...props} Component={${carry}} />
-)`;
+            const result = `function ${name}Interceptor(props: ${component}Props) {
+  return <${name} {...props} Prev={${carry}} />
+}`;
             carry = `${name}Interceptor`;
             return result;
         })
             .join('\n');
-        return `type ${component}BaseProps = React.ComponentProps<typeof ${component}Base>
+        return `
+/**
+ * Interceptor for \`<${component}/>\` with these plugins:
+ * 
+${plugins.map((p) => ` * - \`${p.plugin}\``).join('\n')}
+ */
+type ${component}Props = ComponentProps<typeof ${component}Base>
 
 ${pluginStr}
 export const ${component} = ${carry}`;
     })
         .join('\n');
     const componentExports = `export * from '${fromModule}'`;
-    const template = `/* This file is automatically generated. */
-
-/* eslint-disable import/no-extraneous-dependencies */
-/* eslint-disable import/export */
+    const template = `/* This file is automatically generated for ${dependency} */
 
+${componentExports}
 ${pluginImports}
+import { ComponentProps } from 'react'
 ${importInjectables}
-
-${componentExports}
-
 ${pluginExports}
 `;
     return { ...plugin, template };

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/next-config",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "4.31.0-canary.2",
+  "version": "4.31.0-canary.3",
   "type": "commonjs",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -13,7 +13,7 @@
     "prepack": "yarn build"
   },
   "dependencies": {
-    "@graphcommerce/cli": "4.31.0-canary.2",
+    "@graphcommerce/cli": "4.31.0-canary.3",
     "@lingui/loader": "^3.14.0",
     "@swc/core": "^1.3.10",
     "js-yaml-loader": "^1.2.2",

package/src/index.ts

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

package/src/interceptors/InterceptorPlugin.ts

@@ -77,13 +77,13 @@ export class InterceptorPlugin {
 
         const interceptorForRequest = this.interceptorByDepependency[resource.request]
         if (interceptorForRequest) {
-          logger.log(`Intercepting... ${interceptorForRequest.dependency}`)
+          logger.log(`Intercepting dep... ${interceptorForRequest.dependency}`)
           resource.request = `${interceptorForRequest.denormalized}.interceptor.tsx`
         }
 
         const interceptorForPath = this.interceptors[requestPath]
         if (interceptorForPath) {
-          logger.log(`Intercepting... ${interceptorForPath.fromRoot}`)
+          logger.log(`Intercepting fromRoot... ${interceptorForPath.fromRoot}`)
           resource.request = `${resource.request}.interceptor.tsx`
         }
       })

package/src/interceptors/generateInterceptors.ts

@@ -15,7 +15,7 @@ type Plugin = ResolveDependencyReturn & {
 export type MaterializedPlugin = Plugin & { template: string }
 
 export function generateInterceptor(plugin: Plugin): MaterializedPlugin {
-  const { fromModule, components } = plugin
+  const { fromModule, dependency, components } = plugin
 
   const pluginImports = Object.entries(components)
     .map(([_, plugins]) => {
@@ -39,9 +39,15 @@ export function generateInterceptor(plugin: Plugin): MaterializedPlugin {
     })
     .join('\n')
 
-  const importInjectables = `import { ${Object.entries(components)
-    .map(([component]) => `${component} as ${component}Base`)
-    .join(', ')} } from '${fromModule}'`
+  const imports = Object.entries(components).map(
+    ([component]) => `${component} as ${component}Base`,
+  )
+  const importInjectables =
+    imports.length > 1
+      ? `import { 
+  ${imports.join(',\n  ')},
+} from '${fromModule}'`
+      : `import { ${imports[0]} } from '${fromModule}'`
 
   const pluginExports = Object.entries(components)
     .map(([component, plugins]) => {
@@ -59,15 +65,21 @@ export function generateInterceptor(plugin: Plugin): MaterializedPlugin {
           return true
         })
         .map((name) => {
-          const result = `const ${name}Interceptor = (props: ${component}BaseProps) => (
-  <${name} {...props} Component={${carry}} />
-)`
+          const result = `function ${name}Interceptor(props: ${component}Props) {
+  return <${name} {...props} Prev={${carry}} />
+}`
           carry = `${name}Interceptor`
           return result
         })
         .join('\n')
 
-      return `type ${component}BaseProps = React.ComponentProps<typeof ${component}Base>
+      return `
+/**
+ * Interceptor for \`<${component}/>\` with these plugins:
+ * 
+${plugins.map((p) => ` * - \`${p.plugin}\``).join('\n')}
+ */
+type ${component}Props = ComponentProps<typeof ${component}Base>
 
 ${pluginStr}
 export const ${component} = ${carry}`
@@ -76,16 +88,12 @@ export const ${component} = ${carry}`
 
   const componentExports = `export * from '${fromModule}'`
 
-  const template = `/* This file is automatically generated. */
-
-/* eslint-disable import/no-extraneous-dependencies */
-/* eslint-disable import/export */
+  const template = `/* This file is automatically generated for ${dependency} */
 
+${componentExports}
 ${pluginImports}
+import { ComponentProps } from 'react'
 ${importInjectables}
-
-${componentExports}
-
 ${pluginExports}
 `