Skip to content

Commit 0283366

Browse files
atscottatscott
committed
docs: Add a tutorial for migrating to zoneless
This adds a tutorial for migrating an app to zoneless
1 parent 687e018 commit 0283366

File tree

88 files changed

+11576
-64
lines changed

Some content is hidden

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

88 files changed

+11576
-64
lines changed

‎.aspect/rules/external_repository_action_cache/npm_translate_lock_MzA5NzUwNzMx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,10 @@
22
# Input hashes for repository rule npm_translate_lock(name = "npm2", pnpm_lock = "@//:pnpm-lock.yaml").
33
# This file should be checked into version control along with the pnpm-lock.yaml file.
44
.npmrc=-1406867100
5-
package.json=-1316846371
5+
package.json=1961408440
66
packages/compiler-cli/package.json=1094415146
77
packages/compiler/package.json=1190056499
8-
pnpm-lock.yaml=1584116426
8+
pnpm-lock.yaml=359614490
99
pnpm-workspace.yaml=353334404
1010
tools/bazel/rules_angular_store/package.json=-239561259
11-
yarn.lock=871229310
11+
yarn.lock=-2098156798

‎MODULE.bazel

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
###############################################################################
2+
# Bazel now uses Bzlmod by default to manage external dependencies.
3+
# Please consider migrating your external dependencies from WORKSPACE to MODULE.bazel.
4+
#
5+
# For more details, please check https://github.com/bazelbuild/bazel/issues/18958
6+
###############################################################################

‎MODULE.bazel.lock

Lines changed: 138 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎adev/shared-docs/interfaces/tutorial.ts

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,8 @@ export type TutorialConfig =
7272
| EditorTutorialConfig
7373
| LocalTutorialConfig
7474
| CliTutorialConfig
75-
| EditorOnlyTutorialConfig;
75+
| EditorOnlyTutorialConfig
76+
| TestTutorialConfig;
7677

7778
export interface TutorialConfigBase {
7879
type: TutorialType;
@@ -113,6 +114,9 @@ export type CliTutorialConfig = Omit<LocalTutorialConfig, 'type'> & {
113114
type: TutorialType.CLI;
114115
};
115116

117+
export type TestTutorialConfig = Omit<EditorTutorialConfig, 'type'> & {
118+
type: TutorialType.TEST;
119+
};
116120
export type EditorOnlyTutorialConfig = Omit<EditorTutorialConfig, 'type'> & {
117121
type: TutorialType.EDITOR_ONLY;
118122
};
@@ -161,4 +165,5 @@ export const enum TutorialType {
161165
LOCAL = 'local',
162166
EDITOR = 'editor',
163167
EDITOR_ONLY = 'editor-only',
168+
TEST = 'test',
164169
}

‎adev/shared-docs/pipeline/tutorials/common/tsconfig.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,8 @@
1919
"target": "ES2022",
2020
"module": "ES2022",
2121
"useDefineForClassFields": false,
22-
"lib": ["ES2022", "dom"]
22+
"lib": ["ES2022", "dom"],
23+
"skipLibCheck": true
2324
},
2425
"angularCompilerOptions": {
2526
"enableI18nLegacyMessageIdFormat": false,

‎adev/src/app/editor/embedded-editor.component.html

Lines changed: 27 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,12 @@
66
[type]="TerminalType.INTERACTIVE"
77
/>
88
} @else {
9-
<as-split class="docs-editor" [direction]="splitDirection()" restrictMove="true" gutterSize="5">
9+
<as-split
10+
class="docs-editor"
11+
[direction]="splitDirection()"
12+
restrictMove="true"
13+
gutterSize="5"
14+
>
1015
<as-split-area class="adev-left-side" size="50">
1116
<docs-tutorial-code-editor class="adev-tutorial-code-editor" />
1217
</as-split-area>
@@ -15,7 +20,7 @@
1520
<!-- Preview, Terminal & Console -->
1621
<as-split class="docs-right-side" direction="vertical" restrictMove="true" gutterSize="5">
1722
<!-- Preview Section: for larger screens -->
18-
@if (!displayPreviewInMatTabGroup()) {
23+
@if (!displayPreviewInMatTabGroup() && this.editorUiState.tutorialType() !== 'test') {
1924
<as-split-area size="50">
2025
<!-- Preview Section: for larger screens -->
2126
<div class="adev-preview-section">
@@ -38,26 +43,28 @@
3843
[selectedIndex]="selectedTabIndex()"
3944
(selectedIndexChange)="selectedTabIndex.set($event)"
4045
>
41-
@if (displayPreviewInMatTabGroup()) {
42-
<mat-tab label="Preview">
43-
<docs-tutorial-preview />
46+
@if (this.editorUiState.tutorialType() !== 'test') {
47+
@if (displayPreviewInMatTabGroup()) {
48+
<mat-tab label="Preview">
49+
<docs-tutorial-preview />
50+
</mat-tab>
51+
}
52+
<mat-tab label="Console">
53+
<ng-template mat-tab-label>
54+
Console
55+
@if (errorsCount()) {
56+
<docs-icon class="docs-icon_high-contrast">error</docs-icon>
57+
<span>
58+
{{ errorsCount() }}
59+
</span>
60+
}
61+
</ng-template>
62+
<docs-tutorial-terminal
63+
[type]="TerminalType.READONLY"
64+
class="docs-tutorial-terminal"
65+
/>
4466
</mat-tab>
4567
}
46-
<mat-tab label="Console">
47-
<ng-template mat-tab-label>
48-
Console
49-
@if (errorsCount()) {
50-
<docs-icon class="docs-icon_high-contrast">error</docs-icon>
51-
<span>
52-
{{ errorsCount() }}
53-
</span>
54-
}
55-
</ng-template>
56-
<docs-tutorial-terminal
57-
[type]="TerminalType.READONLY"
58-
class="docs-tutorial-terminal"
59-
/>
60-
</mat-tab>
6168
<mat-tab label="Terminal">
6269
<docs-tutorial-terminal
6370
[type]="TerminalType.INTERACTIVE"

‎adev/src/app/editor/node-runtime-sandbox.service.ts

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -111,8 +111,14 @@ export class NodeRuntimeSandbox {
111111
await this.startInteractiveTerminal(webContainer);
112112
this.terminalHandler.clearTerminals();
113113

114-
const startDevServer = this.embeddedTutorialManager.type() !== TutorialType.CLI;
115-
await this.initProject(startDevServer);
114+
if (
115+
this.embeddedTutorialManager.type() === TutorialType.CLI ||
116+
this.embeddedTutorialManager.type() === TutorialType.TEST
117+
) {
118+
await this.initProject(false);
119+
} else {
120+
await this.initProject(true);
121+
}
116122

117123
console.timeEnd('Load time');
118124
} catch (error: any) {

‎adev/src/app/features/tutorial/tutorial.component.ts

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -196,7 +196,9 @@ export default class Tutorial {
196196
if (routeData.type === TutorialType.LOCAL) {
197197
this.setLocalTutorialData(routeData);
198198
} else if (
199-
(routeData.type === TutorialType.EDITOR || routeData.type === TutorialType.CLI) &&
199+
(routeData.type === TutorialType.EDITOR ||
200+
routeData.type === TutorialType.TEST ||
201+
routeData.type === TutorialType.CLI) &&
200202
this.isBrowser
201203
) {
202204
await this.setEditorTutorialData(

‎adev/src/app/sub-navigation-data.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import {NavigationItem} from '@angular/docs';
1212
import FIRST_APP_TUTORIAL_NAV_DATA from '../../src/assets/tutorials/first-app/routes.json';
1313
import LEARN_ANGULAR_TUTORIAL_NAV_DATA from '../../src/assets/tutorials/learn-angular/routes.json';
1414
import DEFERRABLE_VIEWS_TUTORIAL_NAV_DATA from '../../src/assets/tutorials/deferrable-views/routes.json';
15+
import ZONELESS_MIGRATION_TUTORIAL_NAV_DATA from '../../src/assets/tutorials/zoneless-migration/routes.json';
1516
import ERRORS_NAV_DATA from '../../src/assets/content/reference/errors/routes.json';
1617
import EXT_DIAGNOSTICS_NAV_DATA from '../../src/assets/content/reference/extended-diagnostics/routes.json';
1718

@@ -921,6 +922,7 @@ export const TUTORIALS_SUB_NAVIGATION_DATA: NavigationItem[] = [
921922
FIRST_APP_TUTORIAL_NAV_DATA,
922923
LEARN_ANGULAR_TUTORIAL_NAV_DATA,
923924
DEFERRABLE_VIEWS_TUTORIAL_NAV_DATA,
925+
ZONELESS_MIGRATION_TUTORIAL_NAV_DATA,
924926
{
925927
path: DefaultPage.TUTORIALS,
926928
contentPath: 'tutorials/home',

‎adev/src/assets/BUILD.bazel

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,7 @@ copy_to_directory(
4646
"//adev/src/content/tutorials/deferrable-views:deferrable-views-guides",
4747
"//adev/src/content/tutorials/first-app:first-app-guides",
4848
"//adev/src/content/tutorials/learn-angular:learn-angular-guides",
49+
"//adev/src/content/tutorials/zoneless-migration:zoneless-migration-guides",
4950
"//packages/animations:animations_docs",
5051
"//packages/animations/browser:animations_browser_docs",
5152
"//packages/animations/browser/testing:animations_browser_testing_docs",
@@ -99,6 +100,7 @@ copy_to_directory(
99100
"//adev/src/content/tutorials/homepage",
100101
"//adev/src/content/tutorials/learn-angular",
101102
"//adev/src/content/tutorials/playground",
103+
"//adev/src/content/tutorials/zoneless-migration",
102104
],
103105
replace_prefixes = {
104106
"adev/**/tutorials/*/": "",

‎adev/src/content/tutorials/README.md

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ Each tutorial is defined by a `config.json`, which can have the following option
2626
- `type`: the type denotes how the tutorial will be presented and which components are necessary for that tutorial
2727
- `cli`: a tutorial with a `cli` type will contain only the content and an interactive terminal with the Angular CLI
2828
- `editor`: used for the complete embedded editor, containing the code editor, the preview, an interactive terminal and the console with outputs from the dev server
29+
- `test`: Includes the embedded editor, the code editor, and an interactive terminal. Does _not_ include the preview or console
2930
- `local`: disables the embedded editor and shows only the content
3031
- `editor-only`: a special config used for the tutorial playground and the homepage playground, which disables the content and shows only the embedded editor
3132

@@ -98,11 +99,12 @@ See [`src/content/tutorials/homepage`](/src/content/tutorials/homepage)
9899
To update the dependencies of all tutorials you can run the following script
99100

100101
```bash
101-
rm ./adev/src/content/tutorials/homepage/package-lock.json ./adev/src/content/tutorials/first-app/common/package-lock.json ./adev/src/content/tutorials/learn-angular/common/package-lock.json ./adev/src/content/tutorials/playground/common/package-lock.json ./adev/src/content/tutorials/deferrable-views/common/package-lock.json
102+
rm ./adev/src/content/tutorials/homepage/package-lock.json ./adev/src/content/tutorials/first-app/common/package-lock.json ./adev/src/content/tutorials/learn-angular/common/package-lock.json ./adev/src/content/tutorials/playground/common/package-lock.json ./adev/src/content/tutorials/deferrable-views/common/package-lock.json ./adev/src/content/tutorials/zoneless-migration/common/package-lock.json
102103

103104
npm i --package-lock-only --prefix ./adev/src/content/tutorials/homepage
104105
npm i --package-lock-only --prefix ./adev/src/content/tutorials/first-app/common
105106
npm i --package-lock-only --prefix ./adev/src/content/tutorials/learn-angular/common
106107
npm i --package-lock-only --prefix ./adev/src/content/tutorials/playground/common
107108
npm i --package-lock-only --prefix ./adev/src/content/tutorials/deferrable-views/common
108-
```
109+
npm i --package-lock-only --prefix ./adev/src/content/tutorials/zoneless-migration/common
110+
```

‎adev/src/content/tutorials/first-app/common/package-lock.json

Lines changed: 29 additions & 15 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎adev/src/content/tutorials/home.md

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,4 +12,7 @@ Welcome to the Angular tutorials! These tutorials will guide you through the cor
1212
<docs-card title="Deferrable views" link="Start coding" href="tutorials/deferrable-views" imgSrc="adev/src/assets/images/ang_illustrations-04.svg">
1313
via the Playground
1414
</docs-card>
15+
<docs-card title="Zoneless migration" link="Start coding" href="tutorials/zoneless-migration" imgSrc="adev/src/assets/images/ang_illustrations-04.svg">
16+
via the Playground
17+
</docs-card>
1518
</docs-card-container>

‎adev/src/content/tutorials/zoneless-migration/BUILD.bazel

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
load("//adev/shared-docs:index.bzl", "generate_guides", "generate_tutorial")
2+
3+
package(default_visibility = ["//adev:__subpackages__"])
4+
5+
generate_guides(
6+
name = "zoneless-migration-guides",
7+
srcs = glob(
8+
[
9+
"**/*.md",
10+
],
11+
exclude = [
12+
"**/node_modules/**/*.md",
13+
],
14+
),
15+
)
16+
17+
filegroup(
18+
name = "files",
19+
srcs = glob(
20+
["**/*"],
21+
exclude = ["**/*.md"],
22+
),
23+
)
24+
25+
generate_tutorial(
26+
name = "zoneless-migration",
27+
tutorial_srcs = ":files",
28+
)

0 commit comments

Comments
 (0)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy