From 91e6cf2cb95994543a7c3224405e420a86776ea5 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Thu, 7 Dec 2023 11:35:58 -0500
Subject: [PATCH 1/3] docs(angular): note jest transformIgnorePatterns for es
 modules

---
 docs/angular/build-options.md | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/docs/angular/build-options.md b/docs/angular/build-options.md
index 7c179cbdd6b..642b1d8b0f3 100644
--- a/docs/angular/build-options.md
+++ b/docs/angular/build-options.md
@@ -175,6 +175,17 @@ export class HomePage {}
 <ion-button routerLink="/foo" routerDirection="root">Go to Foo Page</ion-button>
 ```
 
+**Testing**
+
+Ionic Angular's standalone components use ES Modules. As a result, developers using Jest should ensure that ES Modules are transpiled to a format that Jest can use. Developers using Jest should add the following to their Jest config:
+
+```json
+{
+  ...,
+  "transformIgnorePatterns": ["node_modules/(?!(@ionic/angular|@ionic/core|ionicons|@stencil/core|@angular/*)/)"]
+}
+```
+
 ### Usage with NgModule-based Applications
 
 :::caution

From 4d9097930722e01ffb5ff3a86735f1d296c8ca48 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Fri, 8 Dec 2023 09:10:30 -0500
Subject: [PATCH 2/3] add  pnpm example

---
 docs/angular/build-options.md | 43 +++++++++++++++++++++++++++++++----
 1 file changed, 39 insertions(+), 4 deletions(-)

diff --git a/docs/angular/build-options.md b/docs/angular/build-options.md
index 642b1d8b0f3..652935c7d24 100644
--- a/docs/angular/build-options.md
+++ b/docs/angular/build-options.md
@@ -1,3 +1,6 @@
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
 # Build Options
 
 Developers have two options for using Ionic components: Standalone or Modules. This guide covers both options as well as the benefits and downsides of each approach.
@@ -179,12 +182,22 @@ export class HomePage {}
 
 Ionic Angular's standalone components use ES Modules. As a result, developers using Jest should ensure that ES Modules are transpiled to a format that Jest can use. Developers using Jest should add the following to their Jest config:
 
+<Tabs groupId="package-manager" defaultValue="npm" values={[{ value: 'npm', label: 'npm' }, { value: 'pnpm', label: 'pnpm' }]}>
+<TabItem value="npm">
+
 ```json
-{
-  ...,
-  "transformIgnorePatterns": ["node_modules/(?!(@ionic/angular|@ionic/core|ionicons|@stencil/core|@angular/*)/)"]
-}
+
+"transformIgnorePatterns": ["<rootDir>/node_modules/(?!(@ionic/angular|@ionic/core|ionicons|@stencil/core|@angular/*)/)"]
+```
+</TabItem>
+<TabItem value="pnpm">
+
+```json
+
+"transformIgnorePatterns": ["<rootDir>/node_modules/.pnpm/(?!(@ionic/angular|@ionic/core|ionicons|@stencil/core|@angular/*)@)"]
 ```
+</TabItem>
+</Tabs>
 
 ### Usage with NgModule-based Applications
 
@@ -326,6 +339,28 @@ export class HomePageModule {}
 <ion-button routerLink="/foo" routerDirection="root">Go to Foo Page</ion-button>
 ```
 
+**Testing**
+
+Ionic Angular's standalone components use ES Modules. As a result, developers using Jest should ensure that ES Modules are transpiled to a format that Jest can use. Developers using Jest should add the following to their Jest config:
+
+<Tabs groupId="package-manager" defaultValue="npm" values={[{ value: 'npm', label: 'npm' }, { value: 'pnpm', label: 'pnpm' }]}>
+<TabItem value="npm">
+
+```json
+
+"transformIgnorePatterns": ["<rootDir>/node_modules/(?!(@ionic/angular|@ionic/core|ionicons|@stencil/core|@angular/*)/)"]
+```
+</TabItem>
+<TabItem value="pnpm">
+
+```json
+
+"transformIgnorePatterns": ["<rootDir>/node_modules/.pnpm/(?!(@ionic/angular|@ionic/core|ionicons|@stencil/core|@angular/*)@)"]
+```
+</TabItem>
+</Tabs>
+
+
 ## Modules
 
 ### Overview

From d0a1973c3433e17f3024048936c331cba5cfa34f Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Mon, 11 Dec 2023 11:29:24 -0500
Subject: [PATCH 3/3] lint

---
 docs/angular/build-options.md | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/docs/angular/build-options.md b/docs/angular/build-options.md
index 652935c7d24..af935730d95 100644
--- a/docs/angular/build-options.md
+++ b/docs/angular/build-options.md
@@ -189,6 +189,7 @@ Ionic Angular's standalone components use ES Modules. As a result, developers us
 
 "transformIgnorePatterns": ["<rootDir>/node_modules/(?!(@ionic/angular|@ionic/core|ionicons|@stencil/core|@angular/*)/)"]
 ```
+
 </TabItem>
 <TabItem value="pnpm">
 
@@ -196,6 +197,7 @@ Ionic Angular's standalone components use ES Modules. As a result, developers us
 
 "transformIgnorePatterns": ["<rootDir>/node_modules/.pnpm/(?!(@ionic/angular|@ionic/core|ionicons|@stencil/core|@angular/*)@)"]
 ```
+
 </TabItem>
 </Tabs>
 
@@ -350,6 +352,7 @@ Ionic Angular's standalone components use ES Modules. As a result, developers us
 
 "transformIgnorePatterns": ["<rootDir>/node_modules/(?!(@ionic/angular|@ionic/core|ionicons|@stencil/core|@angular/*)/)"]
 ```
+
 </TabItem>
 <TabItem value="pnpm">
 
@@ -357,10 +360,10 @@ Ionic Angular's standalone components use ES Modules. As a result, developers us
 
 "transformIgnorePatterns": ["<rootDir>/node_modules/.pnpm/(?!(@ionic/angular|@ionic/core|ionicons|@stencil/core|@angular/*)@)"]
 ```
+
 </TabItem>
 </Tabs>
 
-
 ## Modules
 
 ### Overview