build: create sample router app (#38714)
This commit creates a sample router test application to introduce the symbol tests. It serves as a guard to ensure that any future work on the router package does not unintentionally increase the payload size. PR Close #38714
This commit is contained in:
Sonu Kapoor
Andrew Kushnir
parent
15207e3c9c
commit
f667e374a9
|
|
@ -0,0 +1,118 @@
|
|||
package(default_visibility = ["//visibility:public"])
|
||||
|
||||
load("//tools:defaults.bzl", "jasmine_node_test", "ng_module", "ng_rollup_bundle", "ts_devserver", "ts_library")
|
||||
load("//tools/symbol-extractor:index.bzl", "js_expected_symbol_test")
|
||||
load("@npm//http-server:index.bzl", "http_server")
|
||||
|
||||
ng_module(
|
||||
name = "router",
|
||||
srcs = [
|
||||
"index.ts",
|
||||
],
|
||||
tags = [
|
||||
"ivy-only",
|
||||
],
|
||||
deps = [
|
||||
"//packages/core",
|
||||
"//packages/platform-browser",
|
||||
"//packages/router",
|
||||
],
|
||||
)
|
||||
|
||||
ng_rollup_bundle(
|
||||
name = "bundle",
|
||||
entry_point = ":index.ts",
|
||||
tags = [
|
||||
"ivy-only",
|
||||
],
|
||||
deps = [
|
||||
":router",
|
||||
"//packages/core",
|
||||
"//packages/platform-browser",
|
||||
"//packages/router",
|
||||
"@npm//rxjs",
|
||||
],
|
||||
)
|
||||
|
||||
ts_library(
|
||||
name = "test_lib",
|
||||
testonly = True,
|
||||
srcs = glob(["*_spec.ts"]),
|
||||
tags = [
|
||||
"ivy-only",
|
||||
],
|
||||
deps = [
|
||||
"//packages:types",
|
||||
"//packages/compiler",
|
||||
"//packages/core",
|
||||
"//packages/core/testing",
|
||||
"//packages/private/testing",
|
||||
],
|
||||
)
|
||||
|
||||
jasmine_node_test(
|
||||
name = "test",
|
||||
data = [
|
||||
":bundle",
|
||||
":bundle.js",
|
||||
":bundle.min.js",
|
||||
":bundle.min_debug.js",
|
||||
],
|
||||
tags = [
|
||||
"ivy-only",
|
||||
],
|
||||
deps = [":test_lib"],
|
||||
)
|
||||
|
||||
js_expected_symbol_test(
|
||||
name = "symbol_test",
|
||||
src = ":bundle.min_debug.js",
|
||||
golden = ":bundle.golden_symbols.json",
|
||||
tags = [
|
||||
"ivy-aot",
|
||||
"ivy-only",
|
||||
],
|
||||
)
|
||||
|
||||
genrule(
|
||||
name = "tslib",
|
||||
srcs = [
|
||||
"@npm//:node_modules/tslib/tslib.js",
|
||||
],
|
||||
outs = [
|
||||
"tslib.js",
|
||||
],
|
||||
cmd = "cp $< $@",
|
||||
tags = [
|
||||
"ivy-only",
|
||||
],
|
||||
)
|
||||
|
||||
ts_devserver(
|
||||
name = "devserver",
|
||||
entry_module = "@angular/core/test/bundling/router",
|
||||
scripts = [
|
||||
"//tools/rxjs:rxjs_umd_modules",
|
||||
],
|
||||
serving_path = "/bundle.min.js",
|
||||
static_files = [
|
||||
"index.html",
|
||||
":tslib",
|
||||
],
|
||||
tags = [
|
||||
"ivy-only",
|
||||
],
|
||||
deps = [":router"],
|
||||
)
|
||||
|
||||
http_server(
|
||||
name = "prodserver",
|
||||
data = [
|
||||
"index.html",
|
||||
":bundle.min.js",
|
||||
":bundle.min_debug.js",
|
||||
],
|
||||
tags = [
|
||||
"ivy-only",
|
||||
],
|
||||
)
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,32 @@
|
|||
<!doctype html>
|
||||
|
||||
<html>
|
||||
<head>
|
||||
<title>Angular Routing Example</title>
|
||||
</head>
|
||||
<body>
|
||||
<!-- The Angular application will be bootstrapped into this element. -->
|
||||
|
||||
<app-root></app-root>
|
||||
|
||||
<!--
|
||||
Script tag which bootstraps the application. Use `?debug` in URL to select
|
||||
the debug version of the script.
|
||||
|
||||
There are two scripts sources: `bundle.min.js` and `bundle.min_debug.js` You can
|
||||
switch between which bundle the browser loads to experiment with the application.
|
||||
|
||||
- `bundle.min.js`: Is what the site would serve to their users. It has gone
|
||||
through rollup, build-optimizer, and uglify with tree shaking.
|
||||
- `bundle.min_debug.js`: Is what the developer would like to see when debugging
|
||||
the application. It has also done through full pipeline of rollup, build-optimizer,
|
||||
and uglify, however special flags were passed to uglify to prevent inlining and
|
||||
property renaming.
|
||||
-->
|
||||
<script>
|
||||
document.write('<script src="' +
|
||||
(document.location.search.endsWith('debug') ? '/bundle.min_debug.js' : '/bundle.min.js') +
|
||||
'"></' + 'script>');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,72 @@
|
|||
/**
|
||||
* @license
|
||||
* Copyright Google LLC All Rights Reserved.
|
||||
*
|
||||
* Use of this source code is governed by an MIT-style license that can be
|
||||
* found in the LICENSE file at https://angular.io/license
|
||||
*/
|
||||
import {APP_BASE_HREF} from '@angular/common';
|
||||
import {Component, NgModule, OnInit, ɵNgModuleFactory as NgModuleFactory} from '@angular/core';
|
||||
import {BrowserModule, platformBrowser} from '@angular/platform-browser';
|
||||
import {ActivatedRoute, Router, RouterModule, Routes} from '@angular/router';
|
||||
|
||||
@Component({
|
||||
selector: 'app-list',
|
||||
template: `
|
||||
<ul>
|
||||
<li><a routerLink="/item/1" routerLinkActive="active">List Item 1</a></li>
|
||||
<li><a routerLink="/item/2" routerLinkActive="active">List Item 2</a></li>
|
||||
<li><a routerLink="/item/3" routerLinkActive="active">List Item 3</a></li>
|
||||
</ul>
|
||||
`,
|
||||
})
|
||||
class ListComponent {
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'app-item',
|
||||
template: `
|
||||
Item {{id}}
|
||||
<p><button (click)="viewList()">Back to List</button></p>`,
|
||||
})
|
||||
class ItemComponent implements OnInit {
|
||||
id = -1;
|
||||
constructor(private activatedRoute: ActivatedRoute, private router: Router) {}
|
||||
|
||||
ngOnInit() {
|
||||
this.activatedRoute.paramMap.subscribe(paramsMap => {
|
||||
this.id = +paramsMap.get('id')!;
|
||||
});
|
||||
}
|
||||
|
||||
viewList() {
|
||||
this.router.navigate(['/list']);
|
||||
}
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'app-root',
|
||||
template: `<router-outlet></router-outlet>`,
|
||||
})
|
||||
class RootComponent {
|
||||
constructor() {}
|
||||
}
|
||||
|
||||
const ROUTES: Routes = [
|
||||
{path: '', redirectTo: '/list', pathMatch: 'full'}, {path: 'list', component: ListComponent},
|
||||
{path: 'item/:id', component: ItemComponent}
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
declarations: [RootComponent, ListComponent, ItemComponent],
|
||||
imports: [BrowserModule, RouterModule.forRoot(ROUTES)],
|
||||
providers: [{provide: APP_BASE_HREF, useValue: ''}]
|
||||
})
|
||||
class RouteExampleModule {
|
||||
ngDoBootstrap(app: any) {
|
||||
app.bootstrap(RootComponent);
|
||||
}
|
||||
}
|
||||
|
||||
(window as any).waitForApp = platformBrowser().bootstrapModuleFactory(
|
||||
new NgModuleFactory(RouteExampleModule), {ngZone: 'noop'});
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
/**
|
||||
* @license
|
||||
* Copyright Google LLC All Rights Reserved.
|
||||
*
|
||||
* Use of this source code is governed by an MIT-style license that can be
|
||||
* found in the LICENSE file at https://angular.io/license
|
||||
*/
|
||||
|
||||
import '@angular/compiler';
|
||||
import * as fs from 'fs';
|
||||
import * as path from 'path';
|
||||
|
||||
const UTF8 = {
|
||||
encoding: 'utf-8'
|
||||
};
|
||||
const PACKAGE = 'angular/packages/core/test/bundling/router';
|
||||
|
||||
describe('treeshaking with uglify', () => {
|
||||
let content: string;
|
||||
// We use the debug version as otherwise symbols/identifiers would be mangled (and the test would
|
||||
// always pass)
|
||||
const contentPath = require.resolve(path.join(PACKAGE, 'bundle.min_debug.js'));
|
||||
beforeAll(() => {
|
||||
content = fs.readFileSync(contentPath, UTF8);
|
||||
});
|
||||
|
||||
it('should drop unused TypeScript helpers', () => {
|
||||
expect(content).not.toContain('__asyncGenerator');
|
||||
});
|
||||
|
||||
it('should not contain rxjs from commonjs distro', () => {
|
||||
expect(content).not.toContain('commonjsGlobal');
|
||||
expect(content).not.toContain('createCommonjsModule');
|
||||
});
|
||||
});
|
||||
Loading…
Reference in New Issue