Skip to content

Commit a209f34

Browse files
committed
feat(playground): inline dependencies per framework example (#2970)
1 parent 06b82b6 commit a209f34

File tree

2 files changed

+28
-0
lines changed

2 files changed

+28
-0
lines changed

src/components/global/Playground/index.tsx

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -85,6 +85,21 @@ interface UsageTargetOptions {
8585
files: {
8686
[key: string]: MdxContent;
8787
};
88+
/**
89+
* The list of dependencies to use in the Stackblitz example.
90+
* The key is the package name and the value is the version.
91+
* The version must be a valid semver range.
92+
*
93+
* For example:
94+
* ```ts
95+
* dependencies: {
96+
* '@maskito/core': '^0.11.0',
97+
* }
98+
* ```
99+
*/
100+
dependencies?: {
101+
[key: string]: string;
102+
};
88103
}
89104

90105
/**
@@ -326,6 +341,7 @@ export default function Playground({
326341
.outerText,
327342
}))
328343
.reduce((acc, curr) => ({ ...acc, ...curr }), {});
344+
editorOptions.dependencies = (code[usageTarget] as UsageTargetOptions).dependencies;
329345
}
330346

331347
switch (usageTarget) {

src/components/global/Playground/stackblitz.utils.ts

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,14 @@ export interface EditorOptions {
1919
[key: string]: string;
2020
};
2121

22+
/**
23+
* List of dependencies to add to the Stackblitz example.
24+
* The key is the name of the dependency and the value is the version.
25+
*/
26+
dependencies?: {
27+
[key: string]: string;
28+
}
29+
2230
/**
2331
* `true` if `ion-app` and `ion-content` should automatically be injected into the
2432
* Stackblitz example.
@@ -79,6 +87,7 @@ const openHtmlEditor = async (code: string, options?: EditorOptions) => {
7987
dependencies = {
8088
...dependencies,
8189
...JSON.parse(package_json).dependencies,
90+
...options?.dependencies,
8291
};
8392
} catch (e) {
8493
console.error('Failed to parse package.json contents', e);
@@ -130,6 +139,7 @@ const openAngularEditor = async (code: string, options?: EditorOptions) => {
130139
'angular.json': defaultFiles[9],
131140
'tsconfig.json': defaultFiles[10],
132141
...options?.files,
142+
...options?.dependencies,
133143
};
134144

135145
const package_json = defaultFiles[11];
@@ -144,6 +154,7 @@ const openAngularEditor = async (code: string, options?: EditorOptions) => {
144154
dependencies = {
145155
...dependencies,
146156
...JSON.parse(package_json).dependencies,
157+
...options?.dependencies,
147158
};
148159
} catch (e) {
149160
console.error('Failed to parse package.json contents', e);
@@ -183,6 +194,7 @@ const openReactEditor = async (code: string, options?: EditorOptions) => {
183194
'package.json': defaultFiles[4],
184195
'package-lock.json': defaultFiles[5],
185196
...options?.files,
197+
...options?.dependencies,
186198
'.stackblitzrc': `{
187199
"startCommand": "yarn run start"
188200
}`,

0 commit comments

Comments
 (0)