@graphcommerce/next-config 6.0.0-canary.44 → 6.0.0-canary.46

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Change Log
 
+## 6.0.0-canary.46
+
+### Patch Changes
+
+- [#1844](https://github.com/graphcommerce-org/graphcommerce/pull/1844) [`929cffafb`](https://github.com/graphcommerce-org/graphcommerce/commit/929cffafbc8b2e57433b6448c95234fb057880b1) - Plugins were incorrectly sorted and local plugins didn't get preference ([@paales](https://github.com/paales))
+
+## 6.0.0-canary.45
+
 ## 6.0.0-canary.44
 
 ### Patch Changes

package/__tests__/interceptors/generateInterceptors.ts

@@ -55,18 +55,18 @@ it('it generates an interceptor', () => {
     /**
      * Interceptor for \`<PaymentMethodContextProvider/>\` with these plugins:
      * 
-     * - \`@graphcommerce/mollie-magento-payment/plugins/AddMollieMethods\`
      * - \`@graphcommerce/magento-payment-braintree/plugins/AddBraintreeMethods\`
+     * - \`@graphcommerce/mollie-magento-payment/plugins/AddMollieMethods\`
      */
     type PaymentMethodContextProviderProps = ComponentProps<typeof PaymentMethodContextProviderBase>
 
-    function AddMollieMethodsInterceptor(props: PaymentMethodContextProviderProps) {
-      return <AddMollieMethods {...props} Prev={PaymentMethodContextProviderBase} />
-    }
     function AddBraintreeMethodsInterceptor(props: PaymentMethodContextProviderProps) {
-      return <AddBraintreeMethods {...props} Prev={AddMollieMethodsInterceptor} />
+      return <AddBraintreeMethods {...props} Prev={PaymentMethodContextProviderBase} />
     }
-    export const PaymentMethodContextProvider = AddBraintreeMethodsInterceptor
+    function AddMollieMethodsInterceptor(props: PaymentMethodContextProviderProps) {
+      return <AddMollieMethods {...props} Prev={AddBraintreeMethodsInterceptor} />
+    }
+    export const PaymentMethodContextProvider = AddMollieMethodsInterceptor
     "
   `)
 })
@@ -134,8 +134,8 @@ it('it can apply multiple plugins to a single export', () => {
     "/* This file is automatically generated for @graphcommerce/magento-cart-payment-method/PaymentMethodContext/PaymentMethodContext */
 
     export * from './PaymentMethodContext'
-    import { Plugin as AddMollieMethods } from '@graphcommerce/mollie-magento-payment/plugins/AddMollieMethods'
     import { Plugin as AddOneMore } from '@graphcommerce/magento-payment-braintree/plugins/AddOneMore'
+    import { Plugin as AddMollieMethods } from '@graphcommerce/mollie-magento-payment/plugins/AddMollieMethods'
     import { ComponentProps } from 'react'
     import { 
       PaymentMethodContextProvider as PaymentMethodContextProviderBase,

package/dist/interceptors/generateInterceptors.js

@@ -5,22 +5,29 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.generateInterceptors = exports.generateInterceptor = void 0;
 const node_path_1 = __importDefault(require("node:path"));
-function generateInterceptor(plugin) {
-    const { fromModule, dependency, components } = plugin;
-    const pluginImports = Object.entries(components)
-        .map(([, plugins]) => {
-        const duplicateImports = new Set();
-        return plugins
-            .sort((a, b) => a.plugin.localeCompare(b.plugin))
-            .map((p) => `import { Plugin as ${p.plugin.split('/')[p.plugin.split('/').length - 1]} } from '${p.plugin}'`)
-            .filter((importStr) => {
-            if (duplicateImports.has(importStr)) {
-                return false;
-            }
-            duplicateImports.add(importStr);
-            return true;
-        })
-            .join('\n');
+function moveRelativeDown(plugins) {
+    return [...plugins].sort((a, b) => {
+        if (a.plugin.startsWith('.') && !b.plugin.startsWith('.'))
+            return 1;
+        if (!a.plugin.startsWith('.') && b.plugin.startsWith('.'))
+            return -1;
+        return 0;
+    });
+}
+function generateInterceptor(interceptor) {
+    const { fromModule, dependency, components } = interceptor;
+    const flattended = Object.entries(components)
+        .map(([, plugins]) => plugins)
+        .flat();
+    const duplicateImports = new Set();
+    const pluginImports = moveRelativeDown([...flattended].sort((a, b) => a.plugin.localeCompare(b.plugin)))
+        .map((p) => p.plugin)
+        .map((p) => `import { Plugin as ${p.split('/')[p.split('/').length - 1]} } from '${p}'`)
+        .filter((str) => {
+        if (duplicateImports.has(str))
+            return false;
+        duplicateImports.add(str);
+        return true;
     })
         .join('\n');
     const imports = Object.entries(components).map(([component]) => `${component} as ${component}Base`);
@@ -31,16 +38,16 @@ function generateInterceptor(plugin) {
         : `import { ${imports[0]} } from '${fromModule}'`;
     const pluginExports = Object.entries(components)
         .map(([component, plugins]) => {
-        const duplicateImports = new Set();
+        const duplicateInterceptors = new Set();
         let carry = `${component}Base`;
         const pluginStr = plugins
             .reverse()
             .map((p) => p.plugin.split('/')[p.plugin.split('/').length - 1])
             .filter((importStr) => {
-            if (duplicateImports.has(importStr)) {
+            if (duplicateInterceptors.has(importStr)) {
                 return false;
             }
-            duplicateImports.add(importStr);
+            duplicateInterceptors.add(importStr);
             return true;
         })
             .map((name) => {
@@ -72,12 +79,12 @@ import { ComponentProps } from 'react'
 ${importInjectables}
 ${pluginExports}
 `;
-    return { ...plugin, template };
+    return { ...interceptor, template };
 }
 exports.generateInterceptor = generateInterceptor;
 function generateInterceptors(plugins, resolve) {
     // todo: Do not use reduce as we're passing the accumulator to the next iteration
-    const byExportedComponent = plugins.reduce((acc, plug) => {
+    const byExportedComponent = moveRelativeDown(plugins).reduce((acc, plug) => {
         const { exported, component, enabled, plugin } = plug;
         if (!exported || !component || !enabled)
             return acc;
@@ -101,6 +108,9 @@ function generateInterceptors(plugins, resolve) {
         });
         return acc;
     }, {});
-    return Object.fromEntries(Object.entries(byExportedComponent).map(([target, plg]) => [target, generateInterceptor(plg)]));
+    return Object.fromEntries(Object.entries(byExportedComponent).map(([target, interceptor]) => [
+        target,
+        generateInterceptor(interceptor),
+    ]));
 }
 exports.generateInterceptors = generateInterceptors;

package/dist/withGraphCommerce.js

@@ -58,6 +58,7 @@ function withGraphCommerce(nextConfig, cwd) {
             domains: [...domains(graphcommerceConfig), ...(nextConfig.i18n?.domains ?? [])],
         },
         images: {
+            ...nextConfig.images,
             domains: [
                 new URL(graphcommerceConfig.magentoEndpoint).hostname,
                 'media.graphassets.com',

package/package.json

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

package/src/interceptors/generateInterceptors.ts

@@ -9,36 +9,39 @@ export type PluginConfig = {
   enabled: boolean
 }
 
-type Plugin = ResolveDependencyReturn & {
+type Interceptor = ResolveDependencyReturn & {
   components: Record<string, PluginConfig[]>
   target: string
   template?: string
 }
 
-export type MaterializedPlugin = Plugin & { template: string }
-
-export function generateInterceptor(plugin: Plugin): MaterializedPlugin {
-  const { fromModule, dependency, components } = plugin
-
-  const pluginImports = Object.entries(components)
-    .map(([, plugins]) => {
-      const duplicateImports = new Set()
-      return plugins
-        .sort((a, b) => a.plugin.localeCompare(b.plugin))
-        .map(
-          (p) =>
-            `import { Plugin as ${p.plugin.split('/')[p.plugin.split('/').length - 1]} } from '${
-              p.plugin
-            }'`,
-        )
-        .filter((importStr) => {
-          if (duplicateImports.has(importStr)) {
-            return false
-          }
-          duplicateImports.add(importStr)
-          return true
-        })
-        .join('\n')
+export type MaterializedPlugin = Interceptor & { template: string }
+
+function moveRelativeDown(plugins: PluginConfig[]) {
+  return [...plugins].sort((a, b) => {
+    if (a.plugin.startsWith('.') && !b.plugin.startsWith('.')) return 1
+    if (!a.plugin.startsWith('.') && b.plugin.startsWith('.')) return -1
+    return 0
+  })
+}
+
+export function generateInterceptor(interceptor: Interceptor): MaterializedPlugin {
+  const { fromModule, dependency, components } = interceptor
+
+  const flattended = Object.entries(components)
+    .map(([, plugins]) => plugins)
+    .flat()
+  const duplicateImports = new Set()
+
+  const pluginImports = moveRelativeDown(
+    [...flattended].sort((a, b) => a.plugin.localeCompare(b.plugin)),
+  )
+    .map((p) => p.plugin)
+    .map((p) => `import { Plugin as ${p.split('/')[p.split('/').length - 1]} } from '${p}'`)
+    .filter((str) => {
+      if (duplicateImports.has(str)) return false
+      duplicateImports.add(str)
+      return true
     })
     .join('\n')
 
@@ -54,17 +57,17 @@ export function generateInterceptor(plugin: Plugin): MaterializedPlugin {
 
   const pluginExports = Object.entries(components)
     .map(([component, plugins]) => {
-      const duplicateImports = new Set()
+      const duplicateInterceptors = new Set()
 
       let carry = `${component}Base`
       const pluginStr = plugins
         .reverse()
         .map((p) => p.plugin.split('/')[p.plugin.split('/').length - 1])
         .filter((importStr) => {
-          if (duplicateImports.has(importStr)) {
+          if (duplicateInterceptors.has(importStr)) {
             return false
           }
-          duplicateImports.add(importStr)
+          duplicateInterceptors.add(importStr)
           return true
         })
         .map((name) => {
@@ -100,7 +103,7 @@ ${importInjectables}
 ${pluginExports}
 `
 
-  return { ...plugin, template }
+  return { ...interceptor, template }
 }
 
 export type GenerateInterceptorsReturn = Record<string, MaterializedPlugin>
@@ -110,7 +113,7 @@ export function generateInterceptors(
   resolve: ResolveDependency,
 ): GenerateInterceptorsReturn {
   // todo: Do not use reduce as we're passing the accumulator to the next iteration
-  const byExportedComponent = plugins.reduce((acc, plug) => {
+  const byExportedComponent = moveRelativeDown(plugins).reduce((acc, plug) => {
     const { exported, component, enabled, plugin } = plug
     if (!exported || !component || !enabled) return acc
 
@@ -127,7 +130,7 @@ export function generateInterceptors(
         ...resolved,
         target: `${resolved.fromRoot}.interceptor`,
         components: {},
-      } as Plugin
+      } as Interceptor
 
     if (!acc[resolved.fromRoot].components[component])
       acc[resolved.fromRoot].components[component] = []
@@ -138,9 +141,12 @@ export function generateInterceptors(
     })
 
     return acc
-  }, {} as Record<string, Plugin>)
+  }, {} as Record<string, Interceptor>)
 
   return Object.fromEntries(
-    Object.entries(byExportedComponent).map(([target, plg]) => [target, generateInterceptor(plg)]),
+    Object.entries(byExportedComponent).map(([target, interceptor]) => [
+      target,
+      generateInterceptor(interceptor),
+    ]),
   )
 }

package/src/withGraphCommerce.ts

@@ -68,6 +68,7 @@ export function withGraphCommerce(nextConfig: NextConfig, cwd: string): NextConf
       domains: [...domains(graphcommerceConfig), ...(nextConfig.i18n?.domains ?? [])],
     },
     images: {
+      ...nextConfig.images,
       domains: [
         new URL(graphcommerceConfig.magentoEndpoint).hostname,
         'media.graphassets.com',