Skip to content

Commit 23488f4

Browse files
brandyscarneybrandyscarney
committed
docs(stackblitz): update readme with correct files
1 parent ba5f860 commit 23488f4

File tree

1 file changed

+67
-12
lines changed

1 file changed

+67
-12
lines changed

‎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)