Skip to content

Commit 82e6343

Browse files
soundproofbootsoundproofboot
authored
docs(v6): update StackBlitz set up and examples for JavaScript and Angular (#4213)
resolves #4199 resolves #3728
1 parent 70638b2 commit 82e6343

File tree

233 files changed

+15673
-491
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

233 files changed

+15673
-491
lines changed

‎docs/developing/android.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ import DocsCards from '@components/global/DocsCards';
1616

1717
:::info Looking for the legacy Android guide?
1818

19-
The Developing for Android guide has officially migrated to the [Capacitor documentation for Android](https://capacitorjs.com/docs/android). If you need to access the legacy documentation, you can find it under the [legacy developing for Android guide](https://ionic-docs-o31kiyk8l-ionic1.vercel.app/docs/v6/developing/android).
19+
The Developing for Android guide has officially migrated to the [Capacitor documentation for Android](https://capacitorjs.com/docs/android). If you need to access the legacy documentation, you can find it under the [legacy developing for Android guide](https://ionic-docs-fo03f34h5-ionic1.vercel.app/docs/v6/developing/android).
2020

2121
:::
2222

@@ -30,7 +30,7 @@ The Developing for Android guide has officially migrated to the [Capacitor docum
3030
</DocsCard>
3131
<DocsCard
3232
header="Developing for Android with Cordova (Legacy)"
33-
href="https://ionic-docs-o31kiyk8l-ionic1.vercel.app/docs/v6/developing/android"
33+
href="https://ionic-docs-fo03f34h5-ionic1.vercel.app/docs/v6/developing/android"
3434
icon="/icons/native-cordova-bot.png"
3535
>
3636
<p>Learn the fundamentals you need to know to start building Android apps with Ionic Framework and Cordova.</p>

‎docs/developing/ios.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ import DocsCards from '@components/global/DocsCards';
1717

1818
:::info Looking for the legacy iOS guide?
1919

20-
The Developing for iOS guide has officially migrated to the [Capacitor documentation for iOS](https://capacitorjs.com/docs/ios). If you need to access the legacy documentation, you can find it under the [legacy developing for iOS guide](https://ionic-docs-o31kiyk8l-ionic1.vercel.app/docs/v6/developing/ios).
20+
The Developing for iOS guide has officially migrated to the [Capacitor documentation for iOS](https://capacitorjs.com/docs/ios). If you need to access the legacy documentation, you can find it under the [legacy developing for iOS guide](https://ionic-docs-fo03f34h5-ionic1.vercel.app/docs/v6/developing/ios).
2121

2222
:::
2323

@@ -31,7 +31,7 @@ The Developing for iOS guide has officially migrated to the [Capacitor documenta
3131
</DocsCard>
3232
<DocsCard
3333
header="Developing for iOS with Cordova (Legacy)"
34-
href="https://ionic-docs-o31kiyk8l-ionic1.vercel.app/docs/v6/developing/ios"
34+
href="https://ionic-docs-fo03f34h5-ionic1.vercel.app/docs/v6/developing/ios"
3535
icon="/icons/native-cordova-bot.png"
3636
>
3737
<p>Learn the fundamentals you need to know to start building iOS apps with Ionic Framework and Cordova.</p>

‎src/components/global/Playground/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -153,7 +153,7 @@ export default function Playground({
153153
* The major version of Ionic to use in the generated StackBlitz examples.
154154
* This will also load assets for StackBlitz from the specified version directory.
155155
*/
156-
version: number;
156+
version: string;
157157
}) {
158158
if (!code || Object.keys(code).length === 0) {
159159
console.warn('No code usage examples provided for this Playground example.');

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

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -38,10 +38,10 @@ export interface EditorOptions {
3838
*/
3939
mode?: string;
4040

41-
version?: number;
41+
version?: string;
4242
}
4343

44-
const loadSourceFiles = async (files: string[], version: number) => {
44+
const loadSourceFiles = async (files: string[], version: string) => {
4545
const versionDir = `v${version}`;
4646
const sourceFiles = await Promise.all(files.map((f) => fetch(`/docs/code/stackblitz/${versionDir}/${f}`)));
4747
return await Promise.all(sourceFiles.map((res) => res.text()));
@@ -159,7 +159,14 @@ const openAngularEditor = async (code: string, options?: EditorOptions) => {
159159
...options?.files,
160160
};
161161

162-
files[main] = files[main].replace('provideIonicAngular()', `provideIonicAngular({ mode: '${options?.mode}' })`);
162+
if (options?.version === '6') {
163+
files[main] = files[main].replace(
164+
'importProvidersFrom(IonicModule.forRoot({ }))',
165+
`importProvidersFrom(IonicModule.forRoot({ mode: '${options?.mode}' }))`
166+
);
167+
} else {
168+
files[main] = files[main].replace('provideIonicAngular()', `provideIonicAngular({ mode: '${options?.mode}' })`);
169+
}
163170

164171
sdk.openProject({
165172
template: 'node',

‎static/code/stackblitz/v6/angular/angular.json‎

Lines changed: 69 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -4,50 +4,64 @@
44
"newProjectRoot": "projects",
55
"projects": {
66
"app": {
7+
"projectType": "application",
78
"root": "",
89
"sourceRoot": "src",
9-
"projectType": "application",
1010
"prefix": "app",
11-
"schematics": {},
1211
"architect": {
1312
"build": {
1413
"builder": "@angular-devkit/build-angular:browser",
1514
"options": {
1615
"outputPath": "dist",
1716
"index": "src/index.html",
1817
"main": "src/main.ts",
19-
"polyfills": "src/polyfills.ts",
20-
"tsConfig": "src/tsconfig.app.json",
21-
"assets": ["src/favicon.ico", "src/assets"],
18+
"polyfills": [
19+
"src/polyfills.ts"
20+
],
21+
"tsConfig": "tsconfig.app.json",
22+
"assets": [
23+
{
24+
"glob": "**/*",
25+
"input": "src/assets",
26+
"output": "assets"
27+
}
28+
],
2229
"styles": ["src/styles.css", "src/global.css", "src/theme/variables.css"],
2330
"scripts": []
2431
},
2532
"configurations": {
2633
"production": {
27-
"fileReplacements": [
28-
{
29-
"replace": "src/environments/environment.ts",
30-
"with": "src/environments/environment.prod.ts"
31-
}
32-
],
33-
"optimization": true,
34-
"outputHashing": "all",
35-
"sourceMap": false,
36-
"extractCss": true,
37-
"namedChunks": false,
38-
"aot": true,
39-
"extractLicenses": true,
40-
"vendorChunk": false,
41-
"buildOptimizer": true,
4234
"budgets": [
4335
{
4436
"type": "initial",
4537
"maximumWarning": "2mb",
4638
"maximumError": "5mb"
39+
},
40+
{
41+
"type": "anyComponentStyle",
42+
"maximumWarning": "2kb",
43+
"maximumError": "4kb"
4744
}
48-
]
45+
],
46+
"fileReplacements": [
47+
{
48+
"replace": "src/environments/environment.ts",
49+
"with": "src/environments/environment.prod.ts"
50+
}
51+
],
52+
"outputHashing": "all"
53+
},
54+
"development": {
55+
"optimization": false,
56+
"extractLicenses": false,
57+
"sourceMap": true,
58+
"namedChunks": true
59+
},
60+
"ci": {
61+
"progress": false
4962
}
50-
}
63+
},
64+
"defaultConfiguration": "production"
5165
},
5266
"serve": {
5367
"builder": "@angular-devkit/build-angular:dev-server",
@@ -57,8 +71,15 @@
5771
"configurations": {
5872
"production": {
5973
"browserTarget": "app:build:production"
74+
},
75+
"development": {
76+
"browserTarget": "app:build:development"
77+
},
78+
"ci": {
79+
"progress": false
6080
}
61-
}
81+
},
82+
"defaultConfiguration": "development"
6283
},
6384
"extract-i18n": {
6485
"builder": "@angular-devkit/build-angular:extract-i18n",
@@ -73,46 +94,41 @@
7394
"polyfills": "src/polyfills.ts",
7495
"tsConfig": "src/tsconfig.spec.json",
7596
"karmaConfig": "src/karma.conf.js",
76-
"styles": ["src/styles.css"],
77-
"scripts": [],
78-
"assets": ["src/favicon.ico", "src/assets"]
79-
}
80-
},
81-
"lint": {
82-
"builder": "@angular-devkit/build-angular:tslint",
83-
"options": {
84-
"tsConfig": ["src/tsconfig.app.json", "src/tsconfig.spec.json"],
85-
"exclude": ["**/node_modules/**"]
86-
}
87-
}
88-
}
89-
},
90-
"app-e2e": {
91-
"root": "e2e/",
92-
"projectType": "application",
93-
"prefix": "",
94-
"architect": {
95-
"e2e": {
96-
"builder": "@angular-devkit/build-angular:protractor",
97-
"options": {
98-
"protractorConfig": "e2e/protractor.conf.js",
99-
"devServerTarget": "app:serve"
97+
"assets": [
98+
{
99+
"glob": "**/*",
100+
"input": "src/assets",
101+
"output": "assets"
102+
}
103+
],
104+
"styles": ["src/styles.css", "src/global.css", "src/theme/variables.css"],
105+
"scripts": []
100106
},
101107
"configurations": {
102-
"production": {
103-
"devServerTarget": "app:serve:production"
108+
"ci": {
109+
"progress": false,
110+
"watch": false
104111
}
105112
}
106113
},
107114
"lint": {
108-
"builder": "@angular-devkit/build-angular:tslint",
115+
"builder": "@angular-eslint/builder:lint",
109116
"options": {
110-
"tsConfig": "e2e/tsconfig.e2e.json",
111-
"exclude": ["**/node_modules/**"]
117+
"lintFilePatterns": ["src/**/*.ts", "src/**/*.html"]
112118
}
113119
}
114120
}
115121
}
116122
},
117-
"defaultProject": "app"
123+
"cli": {
124+
"schematicCollections": ["@ionic/angular-toolkit"]
125+
},
126+
"schematics": {
127+
"@angular-eslint/schematics:application": {
128+
"setParserOptionsProject": true
129+
},
130+
"@angular-eslint/schematics:library": {
131+
"setParserOptionsProject": true
132+
}
133+
}
118134
}

‎static/code/stackblitz/v6/angular/app.component.html‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
11
<ion-app>
2-
<app-example class="ion-page"></app-example>
2+
<app-example class="ion-page">
3+
<router-outlet></router-outlet>
4+
</app-example>
35
</ion-app>

‎static/code/stackblitz/v6/angular/app.component.ts‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,13 @@
11
import { Component } from '@angular/core';
2+
import { IonicModule } from '@ionic/angular';
3+
import { RouterOutlet } from '@angular/router';
4+
import { ExampleComponent } from './example.component';
25

36
@Component({
47
selector: 'app-root',
58
templateUrl: 'app.component.html',
6-
styleUrls: ['app.component.css']
9+
styleUrls: ['app.component.css'],
10+
imports: [IonicModule, ExampleComponent, RouterOutlet],
11+
standalone: true
712
})
813
export class AppComponent { }

‎static/code/stackblitz/v6/angular/app.component.withContent.html‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
<ion-app>
22
<ion-content class="ion-padding">
3-
<app-example></app-example>
3+
<app-example>
4+
<router-outlet></router-outlet>
5+
</app-example>
46
</ion-content>
57
</ion-app>

‎static/code/stackblitz/v6/angular/app.component.withContent.ts‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { Component } from '@angular/core';
2+
import { IonicModule } from '@ionic/angular';
3+
import { RouterOutlet } from '@angular/router';
4+
import { ExampleComponent } from './example.component';
5+
6+
@Component({
7+
selector: 'app-root',
8+
templateUrl: 'app.component.html',
9+
styleUrls: ['app.component.css'],
10+
imports: [IonicModule, ExampleComponent, RouterOutlet],
11+
standalone: true
12+
})
13+
export class AppComponent {
14+
constructor() {}
15+
}

‎static/code/stackblitz/v6/angular/app.routes.ts‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { Routes } from '@angular/router';
2+
3+
export const routes: Routes = [
4+
{
5+
path: 'example',
6+
loadComponent: () => import('./example.component').then((m) => m.ExampleComponent),
7+
},
8+
{
9+
path: '',
10+
redirectTo: 'example',
11+
pathMatch: 'full',
12+
},
13+
];

0 commit comments

Comments
 (0)