@graphcommerce/next-config 10.0.2 → 10.0.3

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # Change Log
 
+## 10.0.3
+
+### Patch Changes
+
+- [`fdad2b7`](https://github.com/graphcommerce-org/graphcommerce/commit/fdad2b7a14a15c771077f3b836ca1f544f488cdd) - Added support in component props for Generic components. Solves an issue with creating plugins on the AddressFields component. ([@paales](https://github.com/paales))
+
+- [`fdad2b7`](https://github.com/graphcommerce-org/graphcommerce/commit/fdad2b7a14a15c771077f3b836ca1f544f488cdd) - Fixed issue where additional props on a plugin did not carry to the final component. Now we can extend the original component's props with additional props from plugins. ([@paales](https://github.com/paales))
+
+## 10.0.3-canary.0
+
+### Patch Changes
+
+- [`fdad2b7`](https://github.com/graphcommerce-org/graphcommerce/commit/fdad2b7a14a15c771077f3b836ca1f544f488cdd) - Added support in component props for Generic components. Solves an issue with creating plugins on the AddressFields component. ([@paales](https://github.com/paales))
+
+- [`fdad2b7`](https://github.com/graphcommerce-org/graphcommerce/commit/fdad2b7a14a15c771077f3b836ca1f544f488cdd) - Fixed issue where additional props on a plugin did not carry to the final component. Now we can extend the original component's props with additional props from plugins. ([@paales](https://github.com/paales))
+
 ## 10.0.2
 
 ## 10.0.2-canary.0

package/dist/index.js

@@ -733,15 +733,14 @@ async function generateInterceptor(interceptor, config, oldInterceptorSource) {
           `@see {@link file://./${targetExport}.original.tsx} for original source file`
         );
       }
+      let prevPropsName = null;
       const pluginInterceptors = componentPlugins.reverse().map((plugin) => {
         const pluginName = sourceName(name(plugin));
         const interceptorName2 = `${pluginName}${interceptorSuffix}`;
         const propsName = `${pluginName}Props`;
         pluginSee.push(`@see {${pluginName}} for source of applied plugin`);
-        const result = `type ${propsName} = OmitPrev<
-  React.ComponentProps<typeof ${pluginName}>,
-  'Prev'
->
+        const propsType = prevPropsName ? `OmitPrev<React.ComponentProps<typeof ${pluginName}>, 'Prev'> & ${prevPropsName}` : `OmitPrev<React.ComponentProps<typeof ${pluginName}>, 'Prev'>`;
+        const result = `type ${propsName} = ${propsType}
 
 const ${interceptorName2} = (
   props: ${propsName},
@@ -752,6 +751,7 @@ const ${interceptorName2} = (
   />
 )`;
         carry = interceptorName2;
+        prevPropsName = propsName;
         return result;
       }).join("\n\n");
       const seeString = `/**
@@ -762,10 +762,12 @@ const ${interceptorName2} = (
  *
 ${pluginSee.map((s) => ` * ${s}`).join("\n")}
  */`;
+      const originalType = replacePlugin ? `typeof ${sourceName(name(replacePlugin))}` : `typeof ${targetExport}${originalSuffix}`;
+      const exportType = prevPropsName ? `${originalType} & React.FC<${prevPropsName}>` : originalType;
       return `${pluginInterceptors}
 
 ${seeString}
-export const ${targetExport} = ${carry}`;
+export const ${targetExport} = ${carry} as ${exportType}`;
     } else if (plugins.some((p) => p.type === "function")) {
       const functionPlugins = plugins.filter((p) => p.type === "function");
       const replacePlugin = plugins.find((p) => p.type === "replace");

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/next-config",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "10.0.2",
+  "version": "10.0.3",
   "type": "module",
   "exports": {
     ".": {
@@ -63,7 +63,7 @@
   },
   "peerDependencies": {
     "@apollo/client": "*",
-    "@graphcommerce/prettier-config-pwa": "^10.0.2",
+    "@graphcommerce/prettier-config-pwa": "^10.0.3",
     "@lingui/loader": "*",
     "@lingui/macro": "*",
     "@lingui/react": "*",

package/src/interceptors/generateInterceptor.ts

@@ -204,6 +204,9 @@ export async function generateInterceptor(
           )
         }
 
+        // Track the accumulated props type name for chaining
+        let prevPropsName: string | null = null
+
         const pluginInterceptors = componentPlugins
           .reverse() // Start from the last plugin and work backwards
           .map((plugin) => {
@@ -213,10 +216,13 @@ export async function generateInterceptor(
 
             pluginSee.push(`@see {${pluginName}} for source of applied plugin`)
 
-            const result = `type ${propsName} = OmitPrev<
-  React.ComponentProps<typeof ${pluginName}>,
-  'Prev'
->
+            // For the first plugin, just use OmitPrev
+            // For subsequent plugins, intersect with the previous accumulated props
+            const propsType = prevPropsName
+              ? `OmitPrev<React.ComponentProps<typeof ${pluginName}>, 'Prev'> & ${prevPropsName}`
+              : `OmitPrev<React.ComponentProps<typeof ${pluginName}>, 'Prev'>`
+
+            const result = `type ${propsName} = ${propsType}
 
 const ${interceptorName} = (
   props: ${propsName},
@@ -227,6 +233,7 @@ const ${interceptorName} = (
   />
 )`
             carry = interceptorName
+            prevPropsName = propsName
             return result
           })
           .join('\n\n')
@@ -240,10 +247,21 @@ const ${interceptorName} = (
 ${pluginSee.map((s) => ` * ${s}`).join('\n')}
  */`
 
+        // Cast to preserve generic signatures while also including accumulated plugin props
+        const originalType = replacePlugin
+          ? `typeof ${sourceName(name(replacePlugin))}`
+          : `typeof ${targetExport}${originalSuffix}`
+
+        // If we have accumulated props from plugins, include them in the type
+        // This creates a type that has both the original's generics AND the plugin's additional props
+        const exportType = prevPropsName
+          ? `${originalType} & React.FC<${prevPropsName}>`
+          : originalType
+
         return `${pluginInterceptors}
 
 ${seeString}
-export const ${targetExport} = ${carry}`
+export const ${targetExport} = ${carry} as ${exportType}`
       } else if (plugins.some((p) => p.type === 'function')) {
         // Function plugins
         const functionPlugins = plugins.filter((p) => p.type === 'function')