Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,8 @@ import {
ModuleWithProviders,
} from '@angular/core';

import { provideDaffMagentoCacheableOperation } from '@daffodil/driver/magento';
import { provideDaffExternalRouterDriver } from '@daffodil/external-router/driver';

import { DAFF_MAGENTO_RESOLVE_URL_QUERY_NAME } from './graphql/queries/resolve-url-v2.4.1';
import { DaffExternalRouterMagentoDriver } from './magento.service';
import { provideDaffExternalRouterMagentoDriver } from './provider';
/**
* The module used to configure the {@link DaffExternalRouterDriver} for usage with Magento.
*
Expand All @@ -25,6 +22,8 @@ import { DaffExternalRouterMagentoDriver } from './magento.service';
* ```
*
* Note that this package depends upon ApolloClient, as the Magento driver uses GraphQl to make it's API calls.
*
* @deprecated prefer {@link provideDaffExternalRouterMagentoDriver}.
*/
@NgModule({
declarations: [],
Expand All @@ -39,8 +38,7 @@ export class DaffExternalRouterDriverMagentoModule {
return {
ngModule: DaffExternalRouterDriverMagentoModule,
providers: [
provideDaffExternalRouterDriver(DaffExternalRouterMagentoDriver),
provideDaffMagentoCacheableOperation(DAFF_MAGENTO_RESOLVE_URL_QUERY_NAME),
provideDaffExternalRouterMagentoDriver(),
],
};
}
Expand Down
20 changes: 20 additions & 0 deletions libs/external-router/driver/magento/2.4.1/src/provider.spec.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
import { TestBed } from '@angular/core/testing';
import { ApolloTestingModule } from 'apollo-angular/testing';

import { DaffExternalRouterDriver } from '@daffodil/external-router/driver';
import { provideDaffExternalRouterMagentoDriver } from '@daffodil/external-router/driver/magento/2.4.1';

describe('@daffodil/external-router/driver/magento/2.4.1 | provideDaffExternalRouterMagentoDriver', () => {
beforeEach(() => {
TestBed.configureTestingModule({
imports: [ApolloTestingModule],
providers: [
provideDaffExternalRouterMagentoDriver(),
],
});
});

it('should allow you to inject the driver', () => {
expect(TestBed.inject(DaffExternalRouterDriver)).toBeTruthy();
});
});
19 changes: 19 additions & 0 deletions libs/external-router/driver/magento/2.4.1/src/provider.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
import {
EnvironmentProviders,
makeEnvironmentProviders,
} from '@angular/core';

import { provideDaffMagentoCacheableOperation } from '@daffodil/driver/magento';
import { provideDaffExternalRouterDriver } from '@daffodil/external-router/driver';

import { DAFF_MAGENTO_RESOLVE_URL_QUERY_NAME } from './graphql/queries/resolve-url-v2.4.1';
import { DaffExternalRouterMagentoDriver } from './magento.service';

/**
* Provides a Magento v2.4.1 implementation of {@link DaffExternalRouterDriver}.
*/
export const provideDaffExternalRouterMagentoDriver = (
): EnvironmentProviders => makeEnvironmentProviders([
provideDaffExternalRouterDriver(DaffExternalRouterMagentoDriver),
provideDaffMagentoCacheableOperation(DAFF_MAGENTO_RESOLVE_URL_QUERY_NAME),
]);
Original file line number Diff line number Diff line change
Expand Up @@ -4,3 +4,4 @@

export { DaffExternalRouterMagentoDriver } from './magento.service';
export { DaffExternalRouterDriverMagentoModule } from './magento.module';
export { provideDaffExternalRouterMagentoDriver } from './provider';
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,7 @@ import {
ModuleWithProviders,
} from '@angular/core';

import { provideDaffMagentoCacheableOperation } from '@daffodil/driver/magento';
import { provideDaffExternalRouterDriver } from '@daffodil/external-router/driver';

import { DAFF_MAGENTO_RESOLVE_URL_QUERY_NAME } from './graphql/queries/resolve-url-v2.4.2';
import { DaffExternalRouterMagentoDriver } from './magento.service';
import { provideDaffExternalRouterMagentoDriver } from './provider';

/**
* The module used to configure the {@link DaffExternalRouterDriver} for usage with Magento.
Expand All @@ -26,6 +22,8 @@ import { DaffExternalRouterMagentoDriver } from './magento.service';
* ```
*
* Note that this package depends upon ApolloClient, as the Magento driver uses GraphQl to make it's API calls.
*
* @deprecated prefer {@link provideDaffExternalRouterMagentoDriver}.
*/
@NgModule({
declarations: [],
Expand All @@ -40,8 +38,7 @@ export class DaffExternalRouterDriverMagentoModule {
return {
ngModule: DaffExternalRouterDriverMagentoModule,
providers: [
provideDaffExternalRouterDriver(DaffExternalRouterMagentoDriver),
provideDaffMagentoCacheableOperation(DAFF_MAGENTO_RESOLVE_URL_QUERY_NAME),
provideDaffExternalRouterMagentoDriver(),
],
};
}
Expand Down
20 changes: 20 additions & 0 deletions libs/external-router/driver/magento/2.4.2/src/provider.spec.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
import { TestBed } from '@angular/core/testing';
import { ApolloTestingModule } from 'apollo-angular/testing';

import { DaffExternalRouterDriver } from '@daffodil/external-router/driver';
import { provideDaffExternalRouterMagentoDriver } from '@daffodil/external-router/driver/magento/2.4.2';

describe('@daffodil/external-router/driver/magento/2.4.2 | provideDaffExternalRouterMagentoDriver', () => {
beforeEach(() => {
TestBed.configureTestingModule({
imports: [ApolloTestingModule],
providers: [
provideDaffExternalRouterMagentoDriver(),
],
});
});

it('should allow you to inject the driver', () => {
expect(TestBed.inject(DaffExternalRouterDriver)).toBeTruthy();
});
});
19 changes: 19 additions & 0 deletions libs/external-router/driver/magento/2.4.2/src/provider.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
import {
EnvironmentProviders,
makeEnvironmentProviders,
} from '@angular/core';

import { provideDaffMagentoCacheableOperation } from '@daffodil/driver/magento';
import { provideDaffExternalRouterDriver } from '@daffodil/external-router/driver';

import { DAFF_MAGENTO_RESOLVE_URL_QUERY_NAME } from './graphql/queries/resolve-url-v2.4.2';
import { DaffExternalRouterMagentoDriver } from './magento.service';

/**
* Provides a Magento v2.4.2 implementation of {@link DaffExternalRouterDriver}.
*/
export const provideDaffExternalRouterMagentoDriver = (
): EnvironmentProviders => makeEnvironmentProviders([
provideDaffExternalRouterDriver(DaffExternalRouterMagentoDriver),
provideDaffMagentoCacheableOperation(DAFF_MAGENTO_RESOLVE_URL_QUERY_NAME),
]);
Original file line number Diff line number Diff line change
Expand Up @@ -4,3 +4,4 @@

export { DaffExternalRouterMagentoDriver } from './magento.service';
export { DaffExternalRouterDriverMagentoModule } from './magento.module';
export { provideDaffExternalRouterMagentoDriver } from './provider';
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,7 @@ import {
ModuleWithProviders,
} from '@angular/core';

import { provideDaffMagentoCacheableOperation } from '@daffodil/driver/magento';
import { provideDaffExternalRouterDriver } from '@daffodil/external-router/driver';

import { DAFF_MAGENTO_RESOLVE_URL_QUERY_NAME } from './graphql/queries/resolve';
import { DaffExternalRouterMagentoDriver } from './magento.service';
import { provideDaffExternalRouterMagentoDriver } from './provider';

/**
* The module used to configure the {@link DaffExternalRouterDriver} for usage with Magento.
Expand All @@ -26,6 +22,8 @@ import { DaffExternalRouterMagentoDriver } from './magento.service';
* ```
*
* Note that this package depends upon ApolloClient, as the Magento driver uses GraphQl to make it's API calls.
*
* @deprecated prefer {@link provideDaffExternalRouterMagentoDriver}.
*/
@NgModule({
declarations: [],
Expand All @@ -40,8 +38,7 @@ export class DaffExternalRouterDriverMagentoModule {
return {
ngModule: DaffExternalRouterDriverMagentoModule,
providers: [
provideDaffExternalRouterDriver(DaffExternalRouterMagentoDriver),
provideDaffMagentoCacheableOperation(DAFF_MAGENTO_RESOLVE_URL_QUERY_NAME),
provideDaffExternalRouterMagentoDriver(),
],
};
}
Expand Down
6 changes: 6 additions & 0 deletions libs/external-router/driver/magento/auto/ng-package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
{
"$schema": "../../../../../node_modules/ng-packagr/ng-entrypoint.schema.json",
"lib": {
"entryFile": "src/index.ts"
}
}
1 change: 1 addition & 0 deletions libs/external-router/driver/magento/auto/src/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export {};
69 changes: 59 additions & 10 deletions libs/external-router/guides/drivers/magento.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# Magento

This guide provides instructions on how to use various Magento drivers with `@daffodil/external-router`.
This guide provides instructions on how to use the Magento driver with `@daffodil/external-router`.

## Installation

Expand All @@ -10,29 +10,58 @@ npm install @daffodil/external-router --save

## Getting started

To use the Magento drivers, you need to import and configure the appropriate modules and services in your Angular application.
To use the Magento drivers, you need to import and configure the appropriate modules and services in your Angular application, and set your Magento version in `angular.json`.

Magento's GraphQl API has changed with its various versions, with the most recent versions of Magento supporting the `routes` GraphQl query.

As such, most recent versions of Magento should use the driver version which first introduced support for this: `DaffExternalRouterDriverMagentoModule` from `@daffodil/external-router/driver/magento/2.4.3`.
As such, most recent versions of Magento should use the driver version which first introduced support for this: `v2.4.3`

| Magento Version | Module | Package | SEO Data Support |
| --------------- | ---------------------------------------- | ------------------------------------------------ | ---------------- |
| v2.4.1 | `DaffExternalRouterDriverMagentoModule` | `@daffodil/external-router/driver/magento/2.4.1` | No |
| v2.4.2 | `DaffExternalRouterDriverMagentoModule` | `@daffodil/external-router/driver/magento/2.4.2` | No |
| v2.4.3+ | `provideDaffExternalRouterMagentoDriver` | `@daffodil/external-router/driver/magento/2.4.3` | Yes |
The driver version is selected at build time via Angular CLI's `conditions` — only the selected version's code is included in the bundle.

| Magento Version | `conditions` value | SEO Data Support |
| --------------- | ------------------------ | ---------------- |
| v2.4.1 | `magento-2.4.1` | No |
| v2.4.2 | `magento-2.4.2` | No |
| v2.4.3+ | `magento-2.4.3` | Yes |

If `customConditions` is not set, the driver defaults to v2.4.3.

## Usage

To use the Magento driver for external router with the latest version of Magento:
### Step 1 — Set your Magento version in `angular.json`

Set these once. Only change them when you upgrade your Magento version.

```jsonc
// angular.json
{
"projects": {
"my-app": {
"architect": {
"build": {
"configurations": {
"production": {
"conditions": ["magento-2.4.3"]
}
}
}
}
}
}
}
```

### Step 2 — Configure the provider in `app.config.ts`

This import never changes, regardless of which Magento version you use.

```ts
import { ApplicationConfig } from '@angular/core';
import { provideClientHydration } from '@angular/platform-browser';
import { provideRouter } from '@angular/router';

import { provideExternalRouter } from '@daffodil/external-router';
import { provideDaffExternalRouterMagentoDriver } from '@daffodil/external-router/driver/magento/2.4.3';
import { provideDaffExternalRouterMagentoDriver } from '@daffodil/external-router/driver/magento';

export const appConfig: ApplicationConfig = {
providers: [
Expand All @@ -43,3 +72,23 @@ export const appConfig: ApplicationConfig = {
],
};
```

When you upgrade Magento, only `angular.json` need to change — `app.config.ts` stays the same.

## Tree-shaking

The `conditions` approach means the bundler resolves `@daffodil/external-router/driver/magento` to exactly one version bundle. The other version bundles are never imported and are not included in the final output.

## Alternative: version-specific sub-package import

If you are not using Angular CLI (esbuild), you can import `provideDaffExternalRouterMagentoDriver` and `DaffExternalRouterMagentoDriver` directly from the version-specific sub-package. This also guarantees tree-shaking:

```ts
import { provideDaffExternalRouterMagentoDriver } from '@daffodil/external-router/driver/magento/2.4.3';
```

| Magento Version | Package | SEO Data Support |
| --------------- | ------------------------------------------------ | ---------------- |
| v2.4.1 | `@daffodil/external-router/driver/magento/2.4.1` | No |
| v2.4.2 | `@daffodil/external-router/driver/magento/2.4.2` | No |
| v2.4.3+ | `@daffodil/external-router/driver/magento/2.4.3` | Yes |
22 changes: 21 additions & 1 deletion libs/external-router/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -42,5 +42,25 @@
"optionalDependencies": {
"apollo-angular": "0.0.0-PLACEHOLDER",
"@daffodil/driver": "0.0.0-PLACEHOLDER"
}
},
"exports": {
"./driver/magento/auto": {
"external-router-magento-2.4.1": {
"types": "./driver/magento/2.4.1/index.d.ts",
"default": "./fesm2022/daffodil-external-router-driver-magento-2.4.1.mjs"
},
"external-router-magento-2.4.2": {
"types": "./driver/magento/2.4.2/index.d.ts",
"default": "./fesm2022/daffodil-external-router-driver-magento-2.4.2.mjs"
},
"external-router-magento-2.4.3": {
"types": "./driver/magento/2.4.3/index.d.ts",
"default": "./fesm2022/daffodil-external-router-driver-magento-2.4.3.mjs"
},
"default": {
"types": "./driver/magento/2.4.3/index.d.ts",
"default": "./fesm2022/daffodil-external-router-driver-magento-2.4.3.mjs"
}
}
}
}
5 changes: 4 additions & 1 deletion libs/external-router/tsconfig.json
Original file line number Diff line number Diff line change
Expand Up @@ -15,9 +15,12 @@
"@daffodil/external-router/driver/magento": [
"libs/external-router/driver/magento/src"
],
"@daffodil/external-router/driver/magento/auto": [
"libs/external-router/driver/magento/auto/src"
],
"@daffodil/external-router/driver/magento/2.4.1": [
"libs/external-router/driver/magento/2.4.1/src"
],
],
"@daffodil/external-router/driver/magento/2.4.2": [
"libs/external-router/driver/magento/2.4.2/src"
],
Expand Down
4 changes: 2 additions & 2 deletions tools/schematics/utils/module-utils.ts
Original file line number Diff line number Diff line change
Expand Up @@ -230,8 +230,8 @@ function getPackageForProvider(providerName: string): string {
provideDaffNavigationDriver: '@daffodil/navigation/driver',
provideExternalRouter: '@daffodil/external-router',
provideDaffExternalRouterInMemoryDriver: '@daffodil/external-router/driver/in-memory',
provideDaffExternalRouterMagentoDriver: '@daffodil/external-router/driver/magento/2.4.3',
DaffExternalRouterMagentoDriver: '@daffodil/external-router/driver/magento/2.4.3',
provideDaffExternalRouterMagentoDriver: '@daffodil/external-router/driver/magento/auto',
DaffExternalRouterMagentoDriver: '@daffodil/external-router/driver/magento/auto',
provideDaffExternalRouterShopifyDriver: '@daffodil/external-router/driver/shopify',
DaffExternalRouterShopifyDriver: '@daffodil/external-router/driver/shopify',
provideDaffExternalRouterDriver: '@daffodil/external-router/driver',
Expand Down
Loading