@graphcommerce/docs 4.12.0-canary.1 → 4.12.0-canary.2

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Change Log
 
+## 4.12.0-canary.2
+
+### Patch Changes
+
+- [#1733](https://github.com/graphcommerce-org/graphcommerce/pull/1733) [`b2d73c726`](https://github.com/graphcommerce-org/graphcommerce/commit/b2d73c726fa123435fa6c54b4e0fd0db2df7c4ab) - Move to <Prev/> instead of <Component/> to call the plugin component ([@paales](https://github.com/paales))
+
 ## 4.12.0-canary.1
 
 ### Minor Changes

package/framework/plugins.md

@@ -74,11 +74,11 @@ export const exported = '@graphcommerce/magento-cart-payment-method'
 function AddPaymentMethodEnhancer(
   props: PluginProps<PaymentMethodContextProviderProps>,
 ) {
-  const { Component, modules, ...rest } = props
-  return <Component {...rest} modules={{ ...modules, purchaseorder }} />
+  const { Prev, modules, ...rest } = props
+  return <Prev {...rest} modules={{ ...modules, purchaseorder }} />
 }
 
-/** The export must be named `Plugin` and must accept a Component to render */
+/** The export must be named `Plugin` and must accept a Prev component to render */
 export const Plugin = AddIncludedMethods
 ```
 
@@ -97,37 +97,59 @@ export const Plugin = AddIncludedMethods
 Example of generated interceptor with additional comments:
 
 ```tsx
-// All plugins are imported, which will be used to enhance the original component.
-import { Plugin as AddIncludedMethods } from '@graphcommerce/magento-payment-included/plugins/AddIncludedMethods'
-import { Plugin as AddPaypalMethods } from '@graphcommerce/magento-payment-paypal/plugins/AddPaypalMethods'
-
-// This file is placed next to the original component, so it is imported with a relative path, in the Webpack plugin we
-// load the original file if it is loaded from the interceptor.
-import { PaymentMethodContextProvider as PaymentMethodContextProviderBase } from './PaymentMethodContext'
-
-// All original exports are exported, if the original file exports more than we're intercepting, it will still work.
-export * from './PaymentMethodContext'
+/* This file is automatically generated for @graphcommerce/magento-cart-payment-method */
 
-type PaymentMethodContextProviderBaseProps = React.ComponentProps<
+export * from '.'
+import { Plugin as GaPaymentMethodButton } from '@graphcommerce/googleanalytics/plugins/GaPaymentMethodButton'
+import { Plugin as GaPaymentMethodContextProvider } from '@graphcommerce/googleanalytics/plugins/GaPaymentMethodContextProvider'
+import { Plugin as AddIncludedMethods } from '@graphcommerce/magento-payment-included/plugins/AddIncludedMethods'
+import { ComponentProps } from 'react'
+import {
+  PaymentMethodButton as PaymentMethodButtonBase,
+  PaymentMethodContextProvider as PaymentMethodContextProviderBase,
+} from '.'
+
+/**
+ * Interceptor for `<PaymentMethodButton/>` with these plugins:
+ *
+ * - `@graphcommerce/googleanalytics/plugins/GaPaymentMethodButton`
+ */
+type PaymentMethodButtonProps = ComponentProps<typeof PaymentMethodButtonBase>
+
+function GaPaymentMethodButtonInterceptor(props: PaymentMethodButtonProps) {
+  return <GaPaymentMethodButton {...props} Prev={PaymentMethodButtonBase} />
+}
+export const PaymentMethodButton = GaPaymentMethodButtonInterceptor
+
+/**
+ * Interceptor for `<PaymentMethodContextProvider/>` with these plugins:
+ *
+ * - `@graphcommerce/magento-payment-included/plugins/AddIncludedMethods`
+ * - `@graphcommerce/googleanalytics/plugins/GaPaymentMethodContextProvider`
+ */
+type PaymentMethodContextProviderProps = ComponentProps<
   typeof PaymentMethodContextProviderBase
 >
 
-// We create new Interceptor components here, which allows us to wrap multiple plugins around the original component.
-const AddIncludedMethodsInterceptor = (
-  props: PaymentMethodContextProviderBaseProps,
-) => (
-  //For the first plugin we use the original component.
-  <AddIncludedMethods {...props} Component={PaymentMethodContextProviderBase} />
-)
-const AddPaypalMethodsInterceptor = (
-  props: PaymentMethodContextProviderBaseProps,
-) => (
-  // For the next components we use the previous Interceptor component.
-  <AddPaypalMethods {...props} Component={AddIncludedMethodsInterceptor} />
-)
-
-// Finally we return the resulting interceptor component.
-export const PaymentMethodContextProvider = AddPaypalMethodsInterceptor
+function AddIncludedMethodsInterceptor(
+  props: PaymentMethodContextProviderProps,
+) {
+  return (
+    <AddIncludedMethods {...props} Prev={PaymentMethodContextProviderBase} />
+  )
+}
+function GaPaymentMethodContextProviderInterceptor(
+  props: PaymentMethodContextProviderProps,
+) {
+  return (
+    <GaPaymentMethodContextProvider
+      {...props}
+      Prev={AddIncludedMethodsInterceptor}
+    />
+  )
+}
+export const PaymentMethodContextProvider =
+  GaPaymentMethodContextProviderInterceptor
 ```
 
 React profile will show that all components are nested:

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/docs",
   "homepage": "https://www.graphcommerce.org/docs",
   "repository": "github:graphcommerce-org/graphcommerce/docs",
-  "version": "4.12.0-canary.1",
+  "version": "4.12.0-canary.2",
   "sideEffects": true,
   "devDependencies": {
     "@graphcommerce/prettier-config-pwa": "^4.0.7"