Skip to content

Commit e4fb93c

Browse files
devversionmatsko
devversion
authored and
matsko
committed
build: switch playground examples to bazel (#28490)
Currently all playground examples are built with `tsc` and served with the `gulp serve` task. In order to be able to test these examples easily with Ivy, we now build and serve the examples using Bazel. This allows us to expand our Ivy test coverage and additionally it allows us to move forward with the overall Bazel migration. Building & serving individual examples is now very easy and doesn't involve building everything inside of `/modules`. PR Close #28490
1 parent b7738ef commit e4fb93c

110 files changed

Lines changed: 1135 additions & 475 deletions

File tree

Some content is hidden

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

‎modules/playground/BUILD.bazel‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
exports_files([
2+
"tsconfig-build.json",
3+
"tsconfig-e2e.json",
4+
"systemjs-config.js",
5+
"systemjs-rxjs-operators.js",
6+
])

‎modules/playground/README.md‎

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,12 @@
1-
# How to run the examples locally
1+
## How to serve the examples
22

3-
```
4-
$ cp -r ./modules/playground ./dist/all/
5-
$ ./node_modules/.bin/tsc -p modules --emitDecoratorMetadata -w
6-
$ gulp serve
7-
$ open http://localhost:8000/all/playground/src/hello_world/index.html?bundles=false
3+
All playground examples are built and served with Bazel. Below is an example that
4+
demonstrates how a specific example can be built and served with Bazel:
5+
6+
```bash
7+
# e.g. src/zippy_component
8+
yarn bazel run modules/playground/src/zippy_component:devserver
9+
10+
# e.g. src/upgrade
11+
yarn bazel run modules/playground/src/upgrade:devserver
812
```

‎modules/playground/src/animate/BUILD.bazel‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
load("//tools:defaults.bzl", "ng_module")
2+
load("@build_bazel_rules_typescript//:defs.bzl", "ts_devserver")
3+
4+
package(default_visibility = ["//modules/playground:__subpackages__"])
5+
6+
ng_module(
7+
name = "animate",
8+
srcs = glob(["**/*.ts"]),
9+
assets = glob(["**/*.css"]),
10+
tsconfig = "//modules/playground:tsconfig-build.json",
11+
# TODO: FW-1004 Type checking is currently not complete.
12+
type_check = False,
13+
deps = [
14+
"//packages/animations",
15+
"//packages/core",
16+
"//packages/platform-browser-dynamic",
17+
"//packages/platform-browser/animations",
18+
],
19+
)
20+
21+
ts_devserver(
22+
name = "devserver",
23+
entry_module = "angular/modules/playground/src/animate/index",
24+
index_html = "index.html",
25+
port = 4200,
26+
scripts = ["@ngdeps//node_modules/tslib:tslib.js"],
27+
static_files = [
28+
"@ngdeps//node_modules/zone.js:dist/zone.js",
29+
"@ngdeps//node_modules/reflect-metadata:Reflect.js",
30+
],
31+
deps = [":animate"],
32+
)

‎modules/playground/src/animate/app/animate-app.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ import {Component} from '@angular/core';
1616
'(@backgroundAnimation.done)': 'bgStatusChanged($event, "completed")'
1717
},
1818
selector: 'animate-app',
19-
styleUrls: ['css/animate-app.css'],
19+
styleUrls: ['../css/animate-app.css'],
2020
template: `
2121
<button (click)="state='start'">Start State</button>
2222
<button (click)="state='active'">Active State</button>

‎modules/playground/src/animate/index.html‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,5 @@
1515
</style>
1616
<body>
1717
<animate-app>Loading...</animate-app>
18-
<script src="../bootstrap.js"></script>
1918
</body>
2019
</html>

‎modules/playground/src/animate/index.ts‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,7 @@ import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
1212
import {AnimateApp} from './app/animate-app';
1313

1414
@NgModule({declarations: [AnimateApp], bootstrap: [AnimateApp], imports: [BrowserAnimationsModule]})
15-
class ExampleModule {
15+
export class ExampleModule {
1616
}
1717

18-
export function main() {
19-
platformBrowserDynamic().bootstrapModule(ExampleModule);
20-
}
18+
platformBrowserDynamic().bootstrapModule(ExampleModule);

‎modules/playground/src/async/BUILD.bazel‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
load("//tools:defaults.bzl", "ng_module")
2+
load("@build_bazel_rules_typescript//:defs.bzl", "ts_devserver")
3+
4+
package(default_visibility = ["//modules/playground:__subpackages__"])
5+
6+
ng_module(
7+
name = "async",
8+
srcs = glob(["**/*.ts"]),
9+
tsconfig = "//modules/playground:tsconfig-build.json",
10+
# TODO: FW-1004 Type checking is currently not complete.
11+
type_check = False,
12+
deps = [
13+
"//packages/core",
14+
"//packages/platform-browser",
15+
"//packages/platform-browser-dynamic",
16+
],
17+
)
18+
19+
ts_devserver(
20+
name = "devserver",
21+
entry_module = "angular/modules/playground/src/async/index",
22+
index_html = "index.html",
23+
port = 4200,
24+
scripts = ["@ngdeps//node_modules/tslib:tslib.js"],
25+
static_files = [
26+
"@ngdeps//node_modules/zone.js:dist/zone.js",
27+
"@ngdeps//node_modules/reflect-metadata:Reflect.js",
28+
],
29+
deps = [":async"],
30+
)

‎modules/playground/src/async/index.html‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,5 @@
88
<async-app>
99
Loading...
1010
</async-app>
11-
12-
<script src="../bootstrap.js"></script>
1311
</body>
1412
</html>

‎modules/playground/src/async/index.ts‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -103,6 +103,4 @@ class AsyncApplication {
103103
class ExampleModule {
104104
}
105105

106-
export function main() {
107-
platformBrowserDynamic().bootstrapModule(ExampleModule);
108-
}
106+
platformBrowserDynamic().bootstrapModule(ExampleModule);

‎modules/playground/src/benchpress/BUILD.bazel‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
load("@build_bazel_rules_typescript//:defs.bzl", "ts_devserver")
2+
3+
package(default_visibility = ["//modules/playground:__subpackages__"])
4+
5+
ts_devserver(
6+
name = "devserver",
7+
index_html = "index.html",
8+
port = 4200,
9+
)

0 commit comments

Comments
 (0)