From b82c43a0931ee296a460090526489b74bf2491b1 Mon Sep 17 00:00:00 2001
From: Sean Perkins <sean@ionic.io>
Date: Mon, 22 May 2023 23:49:55 -0400
Subject: [PATCH 1/2] feat(playground): inline dependencies per framework
 example

---
 src/components/global/Playground/index.tsx        | 15 +++++++++++++++
 .../global/Playground/stackblitz.utils.ts         | 12 ++++++++++++
 2 files changed, 27 insertions(+)

diff --git a/src/components/global/Playground/index.tsx b/src/components/global/Playground/index.tsx
index 541e510b51e..52f496fb5aa 100644
--- a/src/components/global/Playground/index.tsx
+++ b/src/components/global/Playground/index.tsx
@@ -85,6 +85,20 @@ interface UsageTargetOptions {
   files: {
     [key: string]: MdxContent;
   };
+  /**
+   * The list of dependencies to use in the Stackblitz example.
+   * The key is the package name and the value is the version.
+   * The version must be a valid semver range.
+   *
+   * For example:
+   * ```ts
+   * dependencies: {
+   *  '@maskito/core': '^0.11.0',
+   * }
+   */
+  dependencies?: {
+    [key: string]: string;
+  };
 }
 
 /**
@@ -326,6 +340,7 @@ export default function Playground({
             .outerText,
         }))
         .reduce((acc, curr) => ({ ...acc, ...curr }), {});
+      editorOptions.dependencies = (code[usageTarget] as UsageTargetOptions).dependencies;
     }
 
     switch (usageTarget) {
diff --git a/src/components/global/Playground/stackblitz.utils.ts b/src/components/global/Playground/stackblitz.utils.ts
index 1fe697a350f..713a0d4dbd5 100644
--- a/src/components/global/Playground/stackblitz.utils.ts
+++ b/src/components/global/Playground/stackblitz.utils.ts
@@ -19,6 +19,14 @@ export interface EditorOptions {
     [key: string]: string;
   };
 
+  /**
+   * List of dependencies to add to the Stackblitz example.
+   * The key is the name of the dependency, the value is the version.
+   */
+  dependencies?: {
+    [key: string]: string;
+  }
+
   /**
    * `true` if `ion-app` and `ion-content` should automatically be injected into the
    * Stackblitz example.
@@ -79,6 +87,7 @@ const openHtmlEditor = async (code: string, options?: EditorOptions) => {
     dependencies = {
       ...dependencies,
       ...JSON.parse(package_json).dependencies,
+      ...options?.dependencies,
     };
   } catch (e) {
     console.error('Failed to parse package.json contents', e);
@@ -130,6 +139,7 @@ const openAngularEditor = async (code: string, options?: EditorOptions) => {
     'angular.json': defaultFiles[9],
     'tsconfig.json': defaultFiles[10],
     ...options?.files,
+    ...options?.dependencies,
   };
 
   const package_json = defaultFiles[11];
@@ -144,6 +154,7 @@ const openAngularEditor = async (code: string, options?: EditorOptions) => {
     dependencies = {
       ...dependencies,
       ...JSON.parse(package_json).dependencies,
+      ...options?.dependencies,
     };
   } catch (e) {
     console.error('Failed to parse package.json contents', e);
@@ -183,6 +194,7 @@ const openReactEditor = async (code: string, options?: EditorOptions) => {
     'package.json': defaultFiles[4],
     'package-lock.json': defaultFiles[5],
     ...options?.files,
+    ...options?.dependencies,
     '.stackblitzrc': `{
   "startCommand": "yarn run start"
 }`,

From 061caf61809cc2718b1a08ec4e71ede295462b80 Mon Sep 17 00:00:00 2001
From: Sean Perkins <sean@ionic.io>
Date: Tue, 23 May 2023 13:38:56 -0400
Subject: [PATCH 2/2] chore: typos/formatting

---
 src/components/global/Playground/index.tsx           | 1 +
 src/components/global/Playground/stackblitz.utils.ts | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/global/Playground/index.tsx b/src/components/global/Playground/index.tsx
index 52f496fb5aa..9e01b1902bb 100644
--- a/src/components/global/Playground/index.tsx
+++ b/src/components/global/Playground/index.tsx
@@ -95,6 +95,7 @@ interface UsageTargetOptions {
    * dependencies: {
    *  '@maskito/core': '^0.11.0',
    * }
+   * ```
    */
   dependencies?: {
     [key: string]: string;
diff --git a/src/components/global/Playground/stackblitz.utils.ts b/src/components/global/Playground/stackblitz.utils.ts
index 713a0d4dbd5..acfcc0adf3b 100644
--- a/src/components/global/Playground/stackblitz.utils.ts
+++ b/src/components/global/Playground/stackblitz.utils.ts
@@ -21,7 +21,7 @@ export interface EditorOptions {
 
   /**
    * List of dependencies to add to the Stackblitz example.
-   * The key is the name of the dependency, the value is the version.
+   * The key is the name of the dependency and the value is the version.
    */
   dependencies?: {
     [key: string]: string;