Skip to content

Commit f2f9305

Browse files
brandyscarneybrandyscarney
authored
docs(playgrounds): update playgrounds to include default package-lock file (#4282)
Co-authored-by: Brandy Smith <[email protected]>
1 parent 9899fb6 commit f2f9305

File tree

12 files changed

+42960
-38
lines changed

12 files changed

+42960
-38
lines changed

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

Lines changed: 34 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,7 @@ const openHtmlEditor = async (code: string, options?: EditorOptions) => {
5454
options?.includeIonContent ? 'html/index.withContent.html' : 'html/index.html',
5555
'html/variables.css',
5656
'html/package.json',
57+
'html/package-lock.json',
5758
'html/tsconfig.json',
5859
'html/vite.config.ts',
5960
],
@@ -72,11 +73,12 @@ const openHtmlEditor = async (code: string, options?: EditorOptions) => {
7273
const indexHtml = 'index.html';
7374
const files = {
7475
'package.json': JSON.stringify(package_json, null, 2),
76+
'package-lock.json': defaultFiles[4],
7577
'index.ts': defaultFiles[0],
7678
[indexHtml]: defaultFiles[1],
7779
'theme/variables.css': defaultFiles[2],
78-
'tsconfig.json': defaultFiles[4],
79-
'vite.config.ts': defaultFiles[5],
80+
'tsconfig.json': defaultFiles[5],
81+
'vite.config.ts': defaultFiles[6],
8082
...options?.files,
8183
};
8284

@@ -106,6 +108,7 @@ const openAngularEditor = async (code: string, options?: EditorOptions) => {
106108
const defaultFiles = await loadSourceFiles(
107109
[
108110
'angular/package.json',
111+
'angular/package-lock.json',
109112
'angular/angular.json',
110113
'angular/tsconfig.json',
111114
'angular/tsconfig.app.json',
@@ -136,22 +139,23 @@ const openAngularEditor = async (code: string, options?: EditorOptions) => {
136139

137140
const files = {
138141
'package.json': JSON.stringify(package_json, null, 2),
139-
'angular.json': defaultFiles[1],
140-
'tsconfig.json': defaultFiles[2],
141-
'tsconfig.app.json': defaultFiles[3],
142-
[main]: defaultFiles[4],
143-
'src/index.html': defaultFiles[5],
142+
'package-lock.json': defaultFiles[1],
143+
'angular.json': defaultFiles[2],
144+
'tsconfig.json': defaultFiles[3],
145+
'tsconfig.app.json': defaultFiles[4],
146+
[main]: defaultFiles[5],
147+
'src/index.html': defaultFiles[6],
144148
'src/polyfills.ts': `import 'zone.js';`,
145-
'src/app/app.routes.ts': defaultFiles[6],
146-
'src/app/app.component.ts': defaultFiles[7],
147-
'src/app/app.component.css': defaultFiles[8],
148-
'src/app/app.component.html': defaultFiles[9],
149-
'src/app/example.component.ts': defaultFiles[10],
149+
'src/app/app.routes.ts': defaultFiles[7],
150+
'src/app/app.component.ts': defaultFiles[8],
151+
'src/app/app.component.css': defaultFiles[9],
152+
'src/app/app.component.html': defaultFiles[10],
153+
'src/app/example.component.ts': defaultFiles[11],
150154
'src/app/example.component.html': code,
151155
'src/app/example.component.css': '',
152-
'src/styles.css': defaultFiles[11],
153-
'src/global.css': defaultFiles[12],
154-
'src/theme/variables.css': defaultFiles[13],
156+
'src/styles.css': defaultFiles[12],
157+
'src/global.css': defaultFiles[13],
158+
'src/theme/variables.css': defaultFiles[14],
155159
...options?.files,
156160
};
157161

@@ -173,6 +177,7 @@ const openReactEditor = async (code: string, options?: EditorOptions) => {
173177
'react/variables.css',
174178
'react/tsconfig.json',
175179
'react/package.json',
180+
'react/package-lock.json',
176181
'react/index.html',
177182
'react/vite.config.js',
178183
'react/browserslistrc',
@@ -192,16 +197,17 @@ const openReactEditor = async (code: string, options?: EditorOptions) => {
192197

193198
const appTsx = 'src/App.tsx';
194199
const files = {
195-
'.eslintrc.js': defaultFiles[8],
196-
'.browserslistrc': defaultFiles[7],
197-
'vite.config.js': defaultFiles[6],
198-
'index.html': defaultFiles[5],
200+
'.eslintrc.js': defaultFiles[9],
201+
'.browserslistrc': defaultFiles[8],
202+
'vite.config.js': defaultFiles[7],
203+
'index.html': defaultFiles[6],
199204
'src/index.tsx': defaultFiles[0],
200205
[appTsx]: defaultFiles[1],
201206
'src/main.tsx': code,
202207
'src/theme/variables.css': defaultFiles[2],
203208
'tsconfig.json': defaultFiles[3],
204209
'package.json': JSON.stringify(package_json, null, 2),
210+
'package-lock.json': defaultFiles[5],
205211
...options?.files,
206212
'.stackblitzrc': `{
207213
"startCommand": "yarn run start"
@@ -222,6 +228,7 @@ const openVueEditor = async (code: string, options?: EditorOptions) => {
222228
const defaultFiles = await loadSourceFiles(
223229
[
224230
'vue/package.json',
231+
'vue/package-lock.json',
225232
'vue/index.html',
226233
'vue/variables.css',
227234
'vue/vite.config.ts',
@@ -244,15 +251,16 @@ const openVueEditor = async (code: string, options?: EditorOptions) => {
244251

245252
const mainTs = 'src/main.ts';
246253
const files = {
247-
'src/App.vue': defaultFiles[5],
254+
'src/App.vue': defaultFiles[6],
248255
'src/components/Example.vue': code,
249-
[mainTs]: defaultFiles[4],
250-
'src/theme/variables.css': defaultFiles[2],
251-
'index.html': defaultFiles[1],
252-
'vite.config.ts': defaultFiles[3],
256+
[mainTs]: defaultFiles[5],
257+
'src/theme/variables.css': defaultFiles[3],
258+
'index.html': defaultFiles[2],
259+
'vite.config.ts': defaultFiles[4],
253260
'package.json': JSON.stringify(package_json, null, 2),
254-
'tsconfig.json': defaultFiles[6],
255-
'tsconfig.node.json': defaultFiles[7],
261+
'package-lock.json': defaultFiles[1],
262+
'tsconfig.json': defaultFiles[7],
263+
'tsconfig.node.json': defaultFiles[8],
256264
...options?.files,
257265
'.stackblitzrc': `{
258266
"startCommand": "yarn run dev"

‎static/code/stackblitz/README.md‎

Lines changed: 67 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -2,43 +2,98 @@
22

33
This directory contains the source files for generating the individual framework targets for a playground examples. The contents of the files will be loaded and injected into the StackBlitz example that is opened from the Playground.
44

5+
## Structure
6+
7+
The files are organized by Ionic version (`v6`, `v7`, `v8`) and framework (`angular`, `html`, `react`, `vue`):
8+
9+
```
10+
stackblitz/
11+
├── v6/
12+
│ ├── angular/
13+
│ ├── html/
14+
│ ├── react/
15+
│ └── vue/
16+
├── v7/
17+
│ ├── angular/
18+
│ ├── html/
19+
│ ├── react/
20+
│ └── vue/
21+
└── v8/
22+
├── angular/
23+
├── html/
24+
├── react/
25+
└── vue/
26+
```
27+
528
## Angular
629

7-
| File | Description |
8-
| ------------------ | ------------------------------------------------------ |
9-
| `angular.json` | Main configuration file for any Angular application. |
10-
| `app.component.ts` | Primary component class/entry point. |
11-
| `app.module.ts` | Primary `AppModule`. Specifies required `IonicModule`. |
12-
| `main.ts` | Responsive for bootstrapping the main `AppModule`. |
13-
| `styles.css` | Ionic default styles |
30+
| File | Description |
31+
| -------------------- | ------------------------------------------------------ |
32+
| `angular.json` | Main configuration file for any Angular application. |
33+
| `app.component.css` | App component styles. |
34+
| `app.component.html` | App component template. |
35+
| `app.component.ts` | App component class/entry point. |
36+
| `app.component.withContent.html` | App component template with `ion-content` wrapper. |
37+
| `app.component.withContent.ts` | App component class/entry point with `ion-content` wrapper. |
38+
| `app.routes.ts` | Application routing configuration. |
39+
| `example.component.ts` | Example component for demos. |
40+
| `global.css` | Global styles. |
41+
| `index.html` | Main HTML template. |
42+
| `main.ts` | Responsible for bootstrapping the application. |
43+
| `package.json` | Project dependencies. |
44+
| `package-lock.json` | Locked dependency versions. |
45+
| `styles.css` | Ionic default styles. |
46+
| `tsconfig.app.json` | TypeScript configuration for the app. |
47+
| `tsconfig.json` | TypeScript configuration. |
48+
| `variables.css` | CSS variables for theming. |
1449

1550
## HTML
1651

1752
| File | Description |
1853
| ------------ | ----------------------------------------------------------------- |
1954
| `index.html` | Main template file with CDN link to latest `@ionic/core` release. |
55+
| `index.withContent.html` | Main template with `ion-content` wrapper. |
2056
| `index.ts` | Defines the Stencil hydrated bundle for Ionic. |
57+
| `package.json` | Project dependencies. |
58+
| `package-lock.json` | Locked dependency versions. |
59+
| `tsconfig.json` | TypeScript configuration. |
60+
| `variables.css` | CSS variables for theming. |
61+
| `vite.config.ts` | Vite configuration file. |
2162

2263
## React
2364

2465
| File | Description |
2566
| ---------- | -------------------------------------------------------------------------------------------- |
2667
| `app.tsx` | Imports required Ionic styles and `setupIonicReact()` function to initialize web components. |
27-
| `index.js` | Boilerplate to render a React app. |
68+
| `app.withContent.tsx` | App component with `ion-content` wrapper. |
69+
| `browserslistrc` | Browser support configuration. |
70+
| `eslintrc.js` | ESLint configuration. |
71+
| `index.html` | The HTML template to create an element to mount React to. |
72+
| `index.tsx` | Boilerplate to render a React app. |
73+
| `package.json` | Project dependencies. |
74+
| `package-lock.json` | Locked dependency versions. |
75+
| `tsconfig.json` | TypeScript configuration. |
76+
| `variables.css` | CSS variables for theming. |
77+
| `vite.config.js` | Vite configuration file. |
2878

2979
## Vue
3080

3181
| File | Description |
3282
| ---------------- | ------------------------------------------------------------- |
3383
| `App.vue` | Main Vue component that wraps each example in `ion-app`. |
84+
| `App.withContent.vue` | Main Vue component with `ion-content` wrapper. |
3485
| `index.html` | The HTML template to create an element to mount Vue to. |
35-
| `main.js` | Initializes Ionic Vue and imports global styles. |
36-
| `package.json` | Project specific dependencies to create an example with Vite. |
37-
| `vite.config.js` | Vite configuration file. |
86+
| `main.ts` | Initializes Ionic Vue and imports global styles. |
87+
| `package.json` | Project dependencies. |
88+
| `package-lock.json` | Locked dependency versions. |
89+
| `tsconfig.json` | TypeScript configuration. |
90+
| `tsconfig.node.json` | TypeScript configuration for Node. |
91+
| `variables.css` | CSS variables for theming. |
92+
| `vite.config.ts` | Vite configuration file. |
3893

3994

4095
## Dotfiles
4196

4297
Dotfiles must be saved without the dot otherwise they will not be fetched correctly. However, when creating the StackBlitz project the dot can be used.
4398

44-
For example, if you had an `.eslintrc.js` file you would save it as `eslintrc.js` in this repo. When creating the StackBlitz project the contents of that file can then be saved as `.eslintrc.js`
99+
For example, if you had an `.eslintrc.js` file you would save it as `eslintrc.js` in this repo. When creating the StackBlitz project the contents of that file can then be saved as `.eslintrc.js`.

0 commit comments

Comments
 (0)