mirror of
https://github.com/angular/angular.git
synced 2026-09-14 13:54:52 +08:00
test(core): remove redundant renderComponent-based bundling tests (#46559)
The `hello_world` and `todo` bundling tests use the experimental `renderComponent` function (and `Renderer3`) as a result, and have corresponding `Renderer2` equivalents. This commit removes these tests in favor of the `Renderer2` versions, which will be renamed in a future commit. PR Close #46559
This commit is contained in:
Alex Rickabaugh
committed by
Dylan Hunn
Dylan Hunn
parent
6a530349e0
commit
842a3f31e6
@@ -1,61 +0,0 @@
|
||||
load("//tools:defaults.bzl", "app_bundle", "jasmine_node_test", "ng_module", "ts_library")
|
||||
load("//tools/symbol-extractor:index.bzl", "js_expected_symbol_test")
|
||||
load("@npm//http-server:index.bzl", "http_server")
|
||||
|
||||
package(default_visibility = ["//visibility:public"])
|
||||
|
||||
ng_module(
|
||||
name = "hello_world",
|
||||
srcs = ["index.ts"],
|
||||
deps = [
|
||||
"//packages/core",
|
||||
],
|
||||
)
|
||||
|
||||
app_bundle(
|
||||
name = "bundle",
|
||||
entry_point = ":index.ts",
|
||||
deps = [
|
||||
":hello_world",
|
||||
"//packages/core",
|
||||
"@npm//rxjs",
|
||||
],
|
||||
)
|
||||
|
||||
ts_library(
|
||||
name = "test_lib",
|
||||
testonly = True,
|
||||
srcs = glob(["*_spec.ts"]),
|
||||
deps = [
|
||||
"//packages:types",
|
||||
"//packages/compiler",
|
||||
"//packages/core/testing",
|
||||
"//packages/private/testing",
|
||||
],
|
||||
)
|
||||
|
||||
jasmine_node_test(
|
||||
name = "test",
|
||||
data = [
|
||||
":bundle.debug.min.js",
|
||||
":bundle.js",
|
||||
":bundle.min.js",
|
||||
":bundle.min.js.br",
|
||||
],
|
||||
deps = [":test_lib"],
|
||||
)
|
||||
|
||||
js_expected_symbol_test(
|
||||
name = "symbol_test",
|
||||
src = ":bundle.debug.min.js",
|
||||
golden = ":bundle.golden_symbols.json",
|
||||
)
|
||||
|
||||
http_server(
|
||||
name = "devserver",
|
||||
data = [
|
||||
"index.html",
|
||||
":bundle.debug.min.js",
|
||||
":bundle.min.js",
|
||||
],
|
||||
)
|
||||
@@ -1,341 +0,0 @@
|
||||
[
|
||||
{
|
||||
"name": "CLEAN_PROMISE"
|
||||
},
|
||||
{
|
||||
"name": "ChangeDetectionStrategy"
|
||||
},
|
||||
{
|
||||
"name": "EMPTY_ARRAY"
|
||||
},
|
||||
{
|
||||
"name": "EMPTY_OBJ"
|
||||
},
|
||||
{
|
||||
"name": "InjectFlags"
|
||||
},
|
||||
{
|
||||
"name": "NG_COMP_DEF"
|
||||
},
|
||||
{
|
||||
"name": "NG_DIR_DEF"
|
||||
},
|
||||
{
|
||||
"name": "NG_ELEMENT_ID"
|
||||
},
|
||||
{
|
||||
"name": "NG_FACTORY_DEF"
|
||||
},
|
||||
{
|
||||
"name": "NG_INJECTABLE_DEF"
|
||||
},
|
||||
{
|
||||
"name": "NG_PIPE_DEF"
|
||||
},
|
||||
{
|
||||
"name": "NG_PROV_DEF"
|
||||
},
|
||||
{
|
||||
"name": "NOT_FOUND"
|
||||
},
|
||||
{
|
||||
"name": "NO_CHANGE"
|
||||
},
|
||||
{
|
||||
"name": "NodeInjectorFactory"
|
||||
},
|
||||
{
|
||||
"name": "RuntimeError"
|
||||
},
|
||||
{
|
||||
"name": "TRACKED_LVIEWS"
|
||||
},
|
||||
{
|
||||
"name": "ViewEncapsulation"
|
||||
},
|
||||
{
|
||||
"name": "__forward_ref__"
|
||||
},
|
||||
{
|
||||
"name": "_global"
|
||||
},
|
||||
{
|
||||
"name": "_injectImplementation"
|
||||
},
|
||||
{
|
||||
"name": "allocExpando"
|
||||
},
|
||||
{
|
||||
"name": "allocLFrame"
|
||||
},
|
||||
{
|
||||
"name": "appendChild"
|
||||
},
|
||||
{
|
||||
"name": "attachPatchData"
|
||||
},
|
||||
{
|
||||
"name": "bloomHasToken"
|
||||
},
|
||||
{
|
||||
"name": "callHook"
|
||||
},
|
||||
{
|
||||
"name": "callHooks"
|
||||
},
|
||||
{
|
||||
"name": "componentDefCount"
|
||||
},
|
||||
{
|
||||
"name": "concatStringsWithSpace"
|
||||
},
|
||||
{
|
||||
"name": "createLFrame"
|
||||
},
|
||||
{
|
||||
"name": "createLView"
|
||||
},
|
||||
{
|
||||
"name": "createNodeInjector"
|
||||
},
|
||||
{
|
||||
"name": "createTView"
|
||||
},
|
||||
{
|
||||
"name": "defaultScheduler"
|
||||
},
|
||||
{
|
||||
"name": "domRendererFactory3"
|
||||
},
|
||||
{
|
||||
"name": "enterDI"
|
||||
},
|
||||
{
|
||||
"name": "enterView"
|
||||
},
|
||||
{
|
||||
"name": "executeCheckHooks"
|
||||
},
|
||||
{
|
||||
"name": "executeInitAndCheckHooks"
|
||||
},
|
||||
{
|
||||
"name": "executeTemplate"
|
||||
},
|
||||
{
|
||||
"name": "executeViewQueryFn"
|
||||
},
|
||||
{
|
||||
"name": "extractDirectiveDef"
|
||||
},
|
||||
{
|
||||
"name": "forwardRef"
|
||||
},
|
||||
{
|
||||
"name": "getClosureSafeProperty"
|
||||
},
|
||||
{
|
||||
"name": "getComponentDef"
|
||||
},
|
||||
{
|
||||
"name": "getComponentLViewByIndex"
|
||||
},
|
||||
{
|
||||
"name": "getCurrentTNode"
|
||||
},
|
||||
{
|
||||
"name": "getCurrentTNodePlaceholderOk"
|
||||
},
|
||||
{
|
||||
"name": "getDeclarationTNode"
|
||||
},
|
||||
{
|
||||
"name": "getFirstLContainer"
|
||||
},
|
||||
{
|
||||
"name": "getInjectorIndex"
|
||||
},
|
||||
{
|
||||
"name": "getLView"
|
||||
},
|
||||
{
|
||||
"name": "getNativeByTNode"
|
||||
},
|
||||
{
|
||||
"name": "getNearestLContainer"
|
||||
},
|
||||
{
|
||||
"name": "getNextLContainer"
|
||||
},
|
||||
{
|
||||
"name": "getNodeInjectable"
|
||||
},
|
||||
{
|
||||
"name": "getOrCreateInjectable"
|
||||
},
|
||||
{
|
||||
"name": "getOrCreateTNode"
|
||||
},
|
||||
{
|
||||
"name": "getOwnDefinition"
|
||||
},
|
||||
{
|
||||
"name": "getParentInjectorIndex"
|
||||
},
|
||||
{
|
||||
"name": "getParentInjectorLocation"
|
||||
},
|
||||
{
|
||||
"name": "getParentInjectorView"
|
||||
},
|
||||
{
|
||||
"name": "getPipeDef"
|
||||
},
|
||||
{
|
||||
"name": "getSimpleChangesStore"
|
||||
},
|
||||
{
|
||||
"name": "getTNodeFromLView"
|
||||
},
|
||||
{
|
||||
"name": "includeViewProviders"
|
||||
},
|
||||
{
|
||||
"name": "incrementInitPhaseFlags"
|
||||
},
|
||||
{
|
||||
"name": "injectInjectorOnly"
|
||||
},
|
||||
{
|
||||
"name": "insertBloom"
|
||||
},
|
||||
{
|
||||
"name": "instructionState"
|
||||
},
|
||||
{
|
||||
"name": "invertObject"
|
||||
},
|
||||
{
|
||||
"name": "isComponentDef"
|
||||
},
|
||||
{
|
||||
"name": "isLView"
|
||||
},
|
||||
{
|
||||
"name": "isProceduralRenderer"
|
||||
},
|
||||
{
|
||||
"name": "isTemplateNode"
|
||||
},
|
||||
{
|
||||
"name": "leaveDI"
|
||||
},
|
||||
{
|
||||
"name": "leaveView"
|
||||
},
|
||||
{
|
||||
"name": "leaveViewLight"
|
||||
},
|
||||
{
|
||||
"name": "lookupTokenUsingModuleInjector"
|
||||
},
|
||||
{
|
||||
"name": "lookupTokenUsingNodeInjector"
|
||||
},
|
||||
{
|
||||
"name": "nativeAppendOrInsertBefore"
|
||||
},
|
||||
{
|
||||
"name": "nextNgElementId"
|
||||
},
|
||||
{
|
||||
"name": "ngOnChangesSetInput"
|
||||
},
|
||||
{
|
||||
"name": "nonNull"
|
||||
},
|
||||
{
|
||||
"name": "notFoundValueOrThrow"
|
||||
},
|
||||
{
|
||||
"name": "refreshComponent"
|
||||
},
|
||||
{
|
||||
"name": "refreshContainsDirtyView"
|
||||
},
|
||||
{
|
||||
"name": "refreshContentQueries"
|
||||
},
|
||||
{
|
||||
"name": "refreshView"
|
||||
},
|
||||
{
|
||||
"name": "registerHostBindingOpCodes"
|
||||
},
|
||||
{
|
||||
"name": "rememberChangeHistoryAndInvokeOnChangesHook"
|
||||
},
|
||||
{
|
||||
"name": "renderComponent"
|
||||
},
|
||||
{
|
||||
"name": "renderView"
|
||||
},
|
||||
{
|
||||
"name": "renderer3Enabled"
|
||||
},
|
||||
{
|
||||
"name": "resetPreOrderHookFlags"
|
||||
},
|
||||
{
|
||||
"name": "resolveForwardRef"
|
||||
},
|
||||
{
|
||||
"name": "searchTokensOnInjector"
|
||||
},
|
||||
{
|
||||
"name": "setBindingRootForHostBindings"
|
||||
},
|
||||
{
|
||||
"name": "setCurrentQueryIndex"
|
||||
},
|
||||
{
|
||||
"name": "setCurrentTNode"
|
||||
},
|
||||
{
|
||||
"name": "setIncludeViewProviders"
|
||||
},
|
||||
{
|
||||
"name": "setInjectImplementation"
|
||||
},
|
||||
{
|
||||
"name": "setSelectedIndex"
|
||||
},
|
||||
{
|
||||
"name": "shouldSearchParent"
|
||||
},
|
||||
{
|
||||
"name": "stringify"
|
||||
},
|
||||
{
|
||||
"name": "throwProviderNotFoundError"
|
||||
},
|
||||
{
|
||||
"name": "uniqueIdCounter"
|
||||
},
|
||||
{
|
||||
"name": "updateTransplantedViewCount"
|
||||
},
|
||||
{
|
||||
"name": "viewAttachedToChangeDetector"
|
||||
},
|
||||
{
|
||||
"name": "ɵɵdefineComponent"
|
||||
},
|
||||
{
|
||||
"name": "ɵɵdirectiveInject"
|
||||
},
|
||||
{
|
||||
"name": "ɵɵinject"
|
||||
}
|
||||
]
|
||||
@@ -1,31 +0,0 @@
|
||||
<!doctype html>
|
||||
|
||||
<html>
|
||||
<head>
|
||||
<title>Angular Hello World Example</title>
|
||||
</head>
|
||||
<body>
|
||||
<!-- The Angular application will be bootstrapped into this element. -->
|
||||
<hello-world></hello-world>
|
||||
|
||||
<!--
|
||||
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.debug.min.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.debug.min.js`: Is what the developer would like to see when debugging
|
||||
the application. It has also gone through full pipeline of esbuild, babel optimization,
|
||||
plugins from the devkit and terser, however mangling is disabled and the minified
|
||||
file is formatted using prettier (to ease debugging).
|
||||
-->
|
||||
<script>
|
||||
document.write('<script src="' +
|
||||
(document.location.search.endsWith('debug') ? '/bundle.debug.min.js' : '/bundle.min.js') +
|
||||
'"></' + 'script>');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,15 +0,0 @@
|
||||
/**
|
||||
* @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 {Component, ɵrenderComponent as renderComponent} from '@angular/core';
|
||||
|
||||
@Component({selector: 'hello-world', template: 'Hello World!'})
|
||||
class HelloWorld {
|
||||
}
|
||||
|
||||
renderComponent(HelloWorld);
|
||||
@@ -1,56 +0,0 @@
|
||||
/**
|
||||
* @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 {withBody} from '@angular/private/testing';
|
||||
import * as fs from 'fs';
|
||||
import * as path from 'path';
|
||||
|
||||
const PACKAGE = 'angular/packages/core/test/bundling/hello_world';
|
||||
|
||||
describe('treeshaking with uglify', () => {
|
||||
let content: string;
|
||||
const contentPath = require.resolve(path.join(PACKAGE, 'bundle.debug.min.js'));
|
||||
beforeAll(() => {
|
||||
content = fs.readFileSync(contentPath, {encoding: 'utf-8'});
|
||||
});
|
||||
|
||||
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');
|
||||
});
|
||||
|
||||
it('should not contain zone.js', () => {
|
||||
expect(content).not.toContain('global[\'Zone\'] = Zone');
|
||||
});
|
||||
|
||||
describe('functional test in domino', () => {
|
||||
it('should render hello world when not minified',
|
||||
withBody('<hello-world></hello-world>', () => {
|
||||
require(path.join(PACKAGE, 'bundle.js'));
|
||||
expect(document.body.textContent).toEqual('Hello World!');
|
||||
}));
|
||||
|
||||
it('should render hello world when debug minified',
|
||||
withBody('<hello-world></hello-world>', () => {
|
||||
require(path.join(PACKAGE, 'bundle.debug.min.js'));
|
||||
expect(document.body.textContent).toEqual('Hello World!');
|
||||
}));
|
||||
|
||||
it('should render hello world when fully minified',
|
||||
withBody('<hello-world></hello-world>', () => {
|
||||
require(path.join(PACKAGE, 'bundle.min.js'));
|
||||
expect(document.body.textContent).toEqual('Hello World!');
|
||||
}));
|
||||
});
|
||||
});
|
||||
@@ -1,97 +0,0 @@
|
||||
load("//tools:defaults.bzl", "app_bundle", "jasmine_node_test", "ng_module", "ts_devserver", "ts_library")
|
||||
load("//tools/symbol-extractor:index.bzl", "js_expected_symbol_test")
|
||||
load("@npm//http-server:index.bzl", "http_server")
|
||||
|
||||
package(default_visibility = ["//visibility:public"])
|
||||
|
||||
ng_module(
|
||||
name = "todo",
|
||||
srcs = ["index.ts"],
|
||||
deps = [
|
||||
"//packages/common",
|
||||
"//packages/core",
|
||||
"//packages/core/test/bundling/util:reflect_metadata",
|
||||
],
|
||||
)
|
||||
|
||||
app_bundle(
|
||||
name = "bundle",
|
||||
entry_point = ":index.ts",
|
||||
deps = [
|
||||
":todo",
|
||||
"//packages/common",
|
||||
"//packages/core",
|
||||
"//packages/core/test/bundling/util:reflect_metadata",
|
||||
"@npm//rxjs",
|
||||
],
|
||||
)
|
||||
|
||||
ts_library(
|
||||
name = "test_lib",
|
||||
testonly = True,
|
||||
srcs = glob(["*_spec.ts"]),
|
||||
deps = [
|
||||
"//packages:types",
|
||||
"//packages/compiler",
|
||||
"//packages/core",
|
||||
"//packages/core/testing",
|
||||
"//packages/private/testing",
|
||||
],
|
||||
)
|
||||
|
||||
jasmine_node_test(
|
||||
name = "test",
|
||||
data = [
|
||||
":bundle",
|
||||
":bundle.debug.min.js",
|
||||
":bundle.js",
|
||||
":bundle.min.js",
|
||||
],
|
||||
deps = [":test_lib"],
|
||||
)
|
||||
|
||||
js_expected_symbol_test(
|
||||
name = "symbol_test",
|
||||
src = ":bundle.debug.min.js",
|
||||
golden = ":bundle.golden_symbols.json",
|
||||
)
|
||||
|
||||
genrule(
|
||||
name = "tslib",
|
||||
srcs = [
|
||||
"@npm//:node_modules/tslib/tslib.js",
|
||||
],
|
||||
outs = [
|
||||
"tslib.js",
|
||||
],
|
||||
cmd = "cp $< $@",
|
||||
)
|
||||
|
||||
ts_devserver(
|
||||
name = "devserver",
|
||||
entry_module = "@angular/core/test/bundling/todo",
|
||||
scripts = [
|
||||
"//tools/rxjs:rxjs_umd_modules",
|
||||
],
|
||||
# Use a serving_path that matches the common static index.html used
|
||||
# in both devserver & prodserver
|
||||
serving_path = "/bundle.min.js.br",
|
||||
static_files = [
|
||||
"index.html",
|
||||
":tslib",
|
||||
"todo.css",
|
||||
"base.css",
|
||||
],
|
||||
deps = [":todo"],
|
||||
)
|
||||
|
||||
http_server(
|
||||
name = "prodserver",
|
||||
data = [
|
||||
"base.css",
|
||||
"index.html",
|
||||
"todo.css",
|
||||
":bundle.debug.min.js",
|
||||
":bundle.min.js.br",
|
||||
],
|
||||
)
|
||||
@@ -1,31 +0,0 @@
|
||||
# Outstanding on the `Todo` app
|
||||
|
||||
## `Todo` app
|
||||
- [X] Clicking archive removes todo item.
|
||||
- [X] Update `Todo` app to match http://todomvc.com/.
|
||||
- [ ] Make it work with `[(ngModel)]`.
|
||||
- [ ] Make it work with `(keyup.Enter)`.
|
||||
|
||||
## Compiler
|
||||
- [ ] Remove ` tslib_1.__decorate([core_1.Input(), tslib_1.__metadata("design:type", Object)], TodoComponent.prototype, "todo", void 0);` from generated output.
|
||||
- [ ] Allow compilation of `@angular/common` through ivy.
|
||||
|
||||
## Ivy Runtime
|
||||
- [X] Work on `ViewContainerRef` needs to cause change detection so that `todo` app renders correctly on first render.
|
||||
- [X] The todo input value box is not correctly rendering to checked for completed tasks.
|
||||
- [ ] `ViewContainerRef` must separate creation mode from update mode otherwise {{todo.done}} fails for `NgFor` because `todo` is not set during creation mode.
|
||||
- [ ] Injector should be optional
|
||||
|
||||
## Testing
|
||||
- [ ] Create a debug mode which would publish components into DOM for easier writing of tests.
|
||||
|
||||
# NOTES
|
||||
|
||||
## Killing hung `iblaze` server
|
||||
|
||||
At times the `iblaze run packages/core/test/bundling/todo:devserver` keeps running and holding onto
|
||||
ports even after `ctrl-c`. This command kills the outstanding processes.
|
||||
|
||||
```
|
||||
kill -9 $(ps aux | grep ibazel\\\|devserver | cut -c 17-23)
|
||||
```
|
||||
@@ -1,141 +0,0 @@
|
||||
hr {
|
||||
margin: 20px 0;
|
||||
border: 0;
|
||||
border-top: 1px dashed #c5c5c5;
|
||||
border-bottom: 1px dashed #f7f7f7;
|
||||
}
|
||||
|
||||
.learn a {
|
||||
font-weight: normal;
|
||||
text-decoration: none;
|
||||
color: #b83f45;
|
||||
}
|
||||
|
||||
.learn a:hover {
|
||||
text-decoration: underline;
|
||||
color: #787e7e;
|
||||
}
|
||||
|
||||
.learn h3,
|
||||
.learn h4,
|
||||
.learn h5 {
|
||||
margin: 10px 0;
|
||||
font-weight: 500;
|
||||
line-height: 1.2;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.learn h3 {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.learn h4 {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.learn h5 {
|
||||
margin-bottom: 0;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.learn ul {
|
||||
padding: 0;
|
||||
margin: 0 0 30px 25px;
|
||||
}
|
||||
|
||||
.learn li {
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.learn p {
|
||||
font-size: 15px;
|
||||
font-weight: 300;
|
||||
line-height: 1.3;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
#issue-count {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.quote {
|
||||
border: none;
|
||||
margin: 20px 0 60px 0;
|
||||
}
|
||||
|
||||
.quote p {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.quote p:before {
|
||||
content: '“';
|
||||
font-size: 50px;
|
||||
opacity: .15;
|
||||
position: absolute;
|
||||
top: -20px;
|
||||
left: 3px;
|
||||
}
|
||||
|
||||
.quote p:after {
|
||||
content: '”';
|
||||
font-size: 50px;
|
||||
opacity: .15;
|
||||
position: absolute;
|
||||
bottom: -42px;
|
||||
right: 3px;
|
||||
}
|
||||
|
||||
.quote footer {
|
||||
position: absolute;
|
||||
bottom: -40px;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.quote footer img {
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.quote footer a {
|
||||
margin-left: 5px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.speech-bubble {
|
||||
position: relative;
|
||||
padding: 10px;
|
||||
background: rgba(0, 0, 0, .04);
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.speech-bubble:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
right: 30px;
|
||||
border: 13px solid transparent;
|
||||
border-top-color: rgba(0, 0, 0, .04);
|
||||
}
|
||||
|
||||
.learn-bar > .learn {
|
||||
position: absolute;
|
||||
width: 272px;
|
||||
top: 8px;
|
||||
left: -300px;
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
background-color: rgba(255, 255, 255, .6);
|
||||
transition-property: left;
|
||||
transition-duration: 500ms;
|
||||
}
|
||||
|
||||
@media (min-width: 899px) {
|
||||
.learn-bar {
|
||||
width: auto;
|
||||
padding-left: 300px;
|
||||
}
|
||||
|
||||
.learn-bar > .learn {
|
||||
left: 8px;
|
||||
}
|
||||
}
|
||||
@@ -1,872 +0,0 @@
|
||||
[
|
||||
{
|
||||
"name": "CLEAN_PROMISE"
|
||||
},
|
||||
{
|
||||
"name": "ChangeDetectionStrategy"
|
||||
},
|
||||
{
|
||||
"name": "DefaultIterableDiffer"
|
||||
},
|
||||
{
|
||||
"name": "DefaultIterableDifferFactory"
|
||||
},
|
||||
{
|
||||
"name": "EMPTY_ARRAY"
|
||||
},
|
||||
{
|
||||
"name": "EMPTY_OBJ"
|
||||
},
|
||||
{
|
||||
"name": "ElementRef"
|
||||
},
|
||||
{
|
||||
"name": "EnvironmentInjector"
|
||||
},
|
||||
{
|
||||
"name": "InjectFlags"
|
||||
},
|
||||
{
|
||||
"name": "IterableChangeRecord_"
|
||||
},
|
||||
{
|
||||
"name": "IterableDiffers"
|
||||
},
|
||||
{
|
||||
"name": "LifecycleHooksFeature"
|
||||
},
|
||||
{
|
||||
"name": "NG_COMP_DEF"
|
||||
},
|
||||
{
|
||||
"name": "NG_DIR_DEF"
|
||||
},
|
||||
{
|
||||
"name": "NG_ELEMENT_ID"
|
||||
},
|
||||
{
|
||||
"name": "NG_FACTORY_DEF"
|
||||
},
|
||||
{
|
||||
"name": "NG_INJECTABLE_DEF"
|
||||
},
|
||||
{
|
||||
"name": "NG_PIPE_DEF"
|
||||
},
|
||||
{
|
||||
"name": "NG_PROV_DEF"
|
||||
},
|
||||
{
|
||||
"name": "NOT_FOUND"
|
||||
},
|
||||
{
|
||||
"name": "NOT_FOUND_CHECK_ONLY_ELEMENT_INJECTOR"
|
||||
},
|
||||
{
|
||||
"name": "NO_CHANGE"
|
||||
},
|
||||
{
|
||||
"name": "NgForOf"
|
||||
},
|
||||
{
|
||||
"name": "NgIf"
|
||||
},
|
||||
{
|
||||
"name": "NgIfContext"
|
||||
},
|
||||
{
|
||||
"name": "NodeInjector"
|
||||
},
|
||||
{
|
||||
"name": "NodeInjectorFactory"
|
||||
},
|
||||
{
|
||||
"name": "Optional"
|
||||
},
|
||||
{
|
||||
"name": "R3TemplateRef"
|
||||
},
|
||||
{
|
||||
"name": "R3ViewContainerRef"
|
||||
},
|
||||
{
|
||||
"name": "RootViewRef"
|
||||
},
|
||||
{
|
||||
"name": "RuntimeError"
|
||||
},
|
||||
{
|
||||
"name": "Sanitizer"
|
||||
},
|
||||
{
|
||||
"name": "SkipSelf"
|
||||
},
|
||||
{
|
||||
"name": "TRACKED_LVIEWS"
|
||||
},
|
||||
{
|
||||
"name": "TemplateRef"
|
||||
},
|
||||
{
|
||||
"name": "ToDoAppComponent_footer_6_Template"
|
||||
},
|
||||
{
|
||||
"name": "ToDoAppComponent_footer_6_button_5_Template"
|
||||
},
|
||||
{
|
||||
"name": "ToDoAppComponent_section_5_Template"
|
||||
},
|
||||
{
|
||||
"name": "ToDoAppComponent_section_5_input_1_Template"
|
||||
},
|
||||
{
|
||||
"name": "ToDoAppComponent_section_5_li_3_Template"
|
||||
},
|
||||
{
|
||||
"name": "ToDoAppComponent_section_5_li_3_input_6_Template"
|
||||
},
|
||||
{
|
||||
"name": "Todo"
|
||||
},
|
||||
{
|
||||
"name": "TodoStore"
|
||||
},
|
||||
{
|
||||
"name": "VERSION"
|
||||
},
|
||||
{
|
||||
"name": "VE_ViewContainerRef"
|
||||
},
|
||||
{
|
||||
"name": "ViewContainerRef"
|
||||
},
|
||||
{
|
||||
"name": "ViewEncapsulation"
|
||||
},
|
||||
{
|
||||
"name": "ViewEngineTemplateRef"
|
||||
},
|
||||
{
|
||||
"name": "ViewRef"
|
||||
},
|
||||
{
|
||||
"name": "_CLEAN_PROMISE"
|
||||
},
|
||||
{
|
||||
"name": "_DuplicateMap"
|
||||
},
|
||||
{
|
||||
"name": "__forward_ref__"
|
||||
},
|
||||
{
|
||||
"name": "_global"
|
||||
},
|
||||
{
|
||||
"name": "_injectImplementation"
|
||||
},
|
||||
{
|
||||
"name": "_symbolIterator"
|
||||
},
|
||||
{
|
||||
"name": "addComponentLogic"
|
||||
},
|
||||
{
|
||||
"name": "addToArray"
|
||||
},
|
||||
{
|
||||
"name": "addToViewTree"
|
||||
},
|
||||
{
|
||||
"name": "allocExpando"
|
||||
},
|
||||
{
|
||||
"name": "allocLFrame"
|
||||
},
|
||||
{
|
||||
"name": "appendChild"
|
||||
},
|
||||
{
|
||||
"name": "applyNodes"
|
||||
},
|
||||
{
|
||||
"name": "applyProjectionRecursive"
|
||||
},
|
||||
{
|
||||
"name": "applyToElementOrContainer"
|
||||
},
|
||||
{
|
||||
"name": "applyView"
|
||||
},
|
||||
{
|
||||
"name": "applyViewChange"
|
||||
},
|
||||
{
|
||||
"name": "assertTemplate"
|
||||
},
|
||||
{
|
||||
"name": "attachInjectFlag"
|
||||
},
|
||||
{
|
||||
"name": "attachPatchData"
|
||||
},
|
||||
{
|
||||
"name": "bindingUpdated"
|
||||
},
|
||||
{
|
||||
"name": "bloomHasToken"
|
||||
},
|
||||
{
|
||||
"name": "callHook"
|
||||
},
|
||||
{
|
||||
"name": "callHooks"
|
||||
},
|
||||
{
|
||||
"name": "classIndexOf"
|
||||
},
|
||||
{
|
||||
"name": "cleanUpView"
|
||||
},
|
||||
{
|
||||
"name": "collectNativeNodes"
|
||||
},
|
||||
{
|
||||
"name": "collectStylingFromDirectives"
|
||||
},
|
||||
{
|
||||
"name": "collectStylingFromTAttrs"
|
||||
},
|
||||
{
|
||||
"name": "componentDefCount"
|
||||
},
|
||||
{
|
||||
"name": "computeStaticStyling"
|
||||
},
|
||||
{
|
||||
"name": "concatStringsWithSpace"
|
||||
},
|
||||
{
|
||||
"name": "configureViewWithDirective"
|
||||
},
|
||||
{
|
||||
"name": "createDirectivesInstances"
|
||||
},
|
||||
{
|
||||
"name": "createElementNode"
|
||||
},
|
||||
{
|
||||
"name": "createElementRef"
|
||||
},
|
||||
{
|
||||
"name": "createLContainer"
|
||||
},
|
||||
{
|
||||
"name": "createLFrame"
|
||||
},
|
||||
{
|
||||
"name": "createLView"
|
||||
},
|
||||
{
|
||||
"name": "createNodeInjector"
|
||||
},
|
||||
{
|
||||
"name": "createRootComponent"
|
||||
},
|
||||
{
|
||||
"name": "createRootComponentView"
|
||||
},
|
||||
{
|
||||
"name": "createRootContext"
|
||||
},
|
||||
{
|
||||
"name": "createTView"
|
||||
},
|
||||
{
|
||||
"name": "defaultIterableDiffersFactory"
|
||||
},
|
||||
{
|
||||
"name": "defaultScheduler"
|
||||
},
|
||||
{
|
||||
"name": "destroyLView"
|
||||
},
|
||||
{
|
||||
"name": "detachMovedView"
|
||||
},
|
||||
{
|
||||
"name": "detachView"
|
||||
},
|
||||
{
|
||||
"name": "diPublicInInjector"
|
||||
},
|
||||
{
|
||||
"name": "domRendererFactory3"
|
||||
},
|
||||
{
|
||||
"name": "enterDI"
|
||||
},
|
||||
{
|
||||
"name": "enterView"
|
||||
},
|
||||
{
|
||||
"name": "executeCheckHooks"
|
||||
},
|
||||
{
|
||||
"name": "executeInitAndCheckHooks"
|
||||
},
|
||||
{
|
||||
"name": "executeListenerWithErrorHandling"
|
||||
},
|
||||
{
|
||||
"name": "executeTemplate"
|
||||
},
|
||||
{
|
||||
"name": "executeViewQueryFn"
|
||||
},
|
||||
{
|
||||
"name": "extractDirectiveDef"
|
||||
},
|
||||
{
|
||||
"name": "findAttrIndexInNode"
|
||||
},
|
||||
{
|
||||
"name": "findStylingValue"
|
||||
},
|
||||
{
|
||||
"name": "forwardRef"
|
||||
},
|
||||
{
|
||||
"name": "generateInitialInputs"
|
||||
},
|
||||
{
|
||||
"name": "generatePropertyAliases"
|
||||
},
|
||||
{
|
||||
"name": "getBeforeNodeForView"
|
||||
},
|
||||
{
|
||||
"name": "getBindingsEnabled"
|
||||
},
|
||||
{
|
||||
"name": "getClosureSafeProperty"
|
||||
},
|
||||
{
|
||||
"name": "getComponentDef"
|
||||
},
|
||||
{
|
||||
"name": "getComponentLViewByIndex"
|
||||
},
|
||||
{
|
||||
"name": "getComponentViewByInstance"
|
||||
},
|
||||
{
|
||||
"name": "getConstant"
|
||||
},
|
||||
{
|
||||
"name": "getCurrentTNode"
|
||||
},
|
||||
{
|
||||
"name": "getCurrentTNodePlaceholderOk"
|
||||
},
|
||||
{
|
||||
"name": "getDeclarationTNode"
|
||||
},
|
||||
{
|
||||
"name": "getFirstLContainer"
|
||||
},
|
||||
{
|
||||
"name": "getFirstNativeNode"
|
||||
},
|
||||
{
|
||||
"name": "getInjectorIndex"
|
||||
},
|
||||
{
|
||||
"name": "getLView"
|
||||
},
|
||||
{
|
||||
"name": "getLViewById"
|
||||
},
|
||||
{
|
||||
"name": "getLViewParent"
|
||||
},
|
||||
{
|
||||
"name": "getNativeByIndex"
|
||||
},
|
||||
{
|
||||
"name": "getNativeByTNode"
|
||||
},
|
||||
{
|
||||
"name": "getNearestLContainer"
|
||||
},
|
||||
{
|
||||
"name": "getNextLContainer"
|
||||
},
|
||||
{
|
||||
"name": "getNodeInjectable"
|
||||
},
|
||||
{
|
||||
"name": "getOrCreateInjectable"
|
||||
},
|
||||
{
|
||||
"name": "getOrCreateLViewCleanup"
|
||||
},
|
||||
{
|
||||
"name": "getOrCreateNodeInjectorForNode"
|
||||
},
|
||||
{
|
||||
"name": "getOrCreateTComponentView"
|
||||
},
|
||||
{
|
||||
"name": "getOrCreateTNode"
|
||||
},
|
||||
{
|
||||
"name": "getOrCreateTViewCleanup"
|
||||
},
|
||||
{
|
||||
"name": "getOrCreateViewRefs"
|
||||
},
|
||||
{
|
||||
"name": "getOriginalError"
|
||||
},
|
||||
{
|
||||
"name": "getOwnDefinition"
|
||||
},
|
||||
{
|
||||
"name": "getParentInjectorIndex"
|
||||
},
|
||||
{
|
||||
"name": "getParentInjectorLocation"
|
||||
},
|
||||
{
|
||||
"name": "getParentInjectorView"
|
||||
},
|
||||
{
|
||||
"name": "getPipeDef"
|
||||
},
|
||||
{
|
||||
"name": "getPreviousIndex"
|
||||
},
|
||||
{
|
||||
"name": "getProjectionNodes"
|
||||
},
|
||||
{
|
||||
"name": "getSelectedIndex"
|
||||
},
|
||||
{
|
||||
"name": "getSimpleChangesStore"
|
||||
},
|
||||
{
|
||||
"name": "getSymbolIterator"
|
||||
},
|
||||
{
|
||||
"name": "getTNode"
|
||||
},
|
||||
{
|
||||
"name": "getTNodeFromLView"
|
||||
},
|
||||
{
|
||||
"name": "getTStylingRangeNext"
|
||||
},
|
||||
{
|
||||
"name": "getTStylingRangePrev"
|
||||
},
|
||||
{
|
||||
"name": "getTView"
|
||||
},
|
||||
{
|
||||
"name": "getViewRefs"
|
||||
},
|
||||
{
|
||||
"name": "handleError"
|
||||
},
|
||||
{
|
||||
"name": "hasParentInjector"
|
||||
},
|
||||
{
|
||||
"name": "hasTagAndTypeMatch"
|
||||
},
|
||||
{
|
||||
"name": "icuContainerIterate"
|
||||
},
|
||||
{
|
||||
"name": "includeViewProviders"
|
||||
},
|
||||
{
|
||||
"name": "incrementInitPhaseFlags"
|
||||
},
|
||||
{
|
||||
"name": "initTNodeFlags"
|
||||
},
|
||||
{
|
||||
"name": "injectElementRef"
|
||||
},
|
||||
{
|
||||
"name": "injectInjectorOnly"
|
||||
},
|
||||
{
|
||||
"name": "injectTemplateRef"
|
||||
},
|
||||
{
|
||||
"name": "injectViewContainerRef"
|
||||
},
|
||||
{
|
||||
"name": "insertBloom"
|
||||
},
|
||||
{
|
||||
"name": "instructionState"
|
||||
},
|
||||
{
|
||||
"name": "invertObject"
|
||||
},
|
||||
{
|
||||
"name": "invokeHostBindingsInCreationMode"
|
||||
},
|
||||
{
|
||||
"name": "isAnimationProp"
|
||||
},
|
||||
{
|
||||
"name": "isComponentDef"
|
||||
},
|
||||
{
|
||||
"name": "isComponentHost"
|
||||
},
|
||||
{
|
||||
"name": "isContentQueryHost"
|
||||
},
|
||||
{
|
||||
"name": "isCssClassMatching"
|
||||
},
|
||||
{
|
||||
"name": "isCurrentTNodeParent"
|
||||
},
|
||||
{
|
||||
"name": "isDirectiveHost"
|
||||
},
|
||||
{
|
||||
"name": "isInlineTemplate"
|
||||
},
|
||||
{
|
||||
"name": "isLContainer"
|
||||
},
|
||||
{
|
||||
"name": "isLView"
|
||||
},
|
||||
{
|
||||
"name": "isListLikeIterable"
|
||||
},
|
||||
{
|
||||
"name": "isNodeMatchingSelector"
|
||||
},
|
||||
{
|
||||
"name": "isNodeMatchingSelectorList"
|
||||
},
|
||||
{
|
||||
"name": "isPositive"
|
||||
},
|
||||
{
|
||||
"name": "isProceduralRenderer"
|
||||
},
|
||||
{
|
||||
"name": "isStylingMatch"
|
||||
},
|
||||
{
|
||||
"name": "isStylingValuePresent"
|
||||
},
|
||||
{
|
||||
"name": "isTemplateNode"
|
||||
},
|
||||
{
|
||||
"name": "keyValueArrayGet"
|
||||
},
|
||||
{
|
||||
"name": "keyValueArrayIndexOf"
|
||||
},
|
||||
{
|
||||
"name": "keyValueArraySet"
|
||||
},
|
||||
{
|
||||
"name": "leaveDI"
|
||||
},
|
||||
{
|
||||
"name": "leaveView"
|
||||
},
|
||||
{
|
||||
"name": "leaveViewLight"
|
||||
},
|
||||
{
|
||||
"name": "locateHostElement"
|
||||
},
|
||||
{
|
||||
"name": "lookupTokenUsingModuleInjector"
|
||||
},
|
||||
{
|
||||
"name": "lookupTokenUsingNodeInjector"
|
||||
},
|
||||
{
|
||||
"name": "makeParamDecorator"
|
||||
},
|
||||
{
|
||||
"name": "markAsComponentHost"
|
||||
},
|
||||
{
|
||||
"name": "markDirty"
|
||||
},
|
||||
{
|
||||
"name": "markDuplicates"
|
||||
},
|
||||
{
|
||||
"name": "markViewDirty"
|
||||
},
|
||||
{
|
||||
"name": "maybeWrapInNotSelector"
|
||||
},
|
||||
{
|
||||
"name": "mergeHostAttribute"
|
||||
},
|
||||
{
|
||||
"name": "mergeHostAttrs"
|
||||
},
|
||||
{
|
||||
"name": "nativeAppendChild"
|
||||
},
|
||||
{
|
||||
"name": "nativeAppendOrInsertBefore"
|
||||
},
|
||||
{
|
||||
"name": "nativeInsertBefore"
|
||||
},
|
||||
{
|
||||
"name": "nativeParentNode"
|
||||
},
|
||||
{
|
||||
"name": "nextBindingIndex"
|
||||
},
|
||||
{
|
||||
"name": "nextNgElementId"
|
||||
},
|
||||
{
|
||||
"name": "ngOnChangesSetInput"
|
||||
},
|
||||
{
|
||||
"name": "noSideEffects"
|
||||
},
|
||||
{
|
||||
"name": "nonNull"
|
||||
},
|
||||
{
|
||||
"name": "notFoundValueOrThrow"
|
||||
},
|
||||
{
|
||||
"name": "readPatchedData"
|
||||
},
|
||||
{
|
||||
"name": "readPatchedLView"
|
||||
},
|
||||
{
|
||||
"name": "refreshComponent"
|
||||
},
|
||||
{
|
||||
"name": "refreshContainsDirtyView"
|
||||
},
|
||||
{
|
||||
"name": "refreshContentQueries"
|
||||
},
|
||||
{
|
||||
"name": "refreshView"
|
||||
},
|
||||
{
|
||||
"name": "registerHostBindingOpCodes"
|
||||
},
|
||||
{
|
||||
"name": "registerPostOrderHooks"
|
||||
},
|
||||
{
|
||||
"name": "rememberChangeHistoryAndInvokeOnChangesHook"
|
||||
},
|
||||
{
|
||||
"name": "removeFromArray"
|
||||
},
|
||||
{
|
||||
"name": "renderComponent"
|
||||
},
|
||||
{
|
||||
"name": "renderComponentOrTemplate"
|
||||
},
|
||||
{
|
||||
"name": "renderStringify"
|
||||
},
|
||||
{
|
||||
"name": "renderView"
|
||||
},
|
||||
{
|
||||
"name": "renderer3Enabled"
|
||||
},
|
||||
{
|
||||
"name": "resetPreOrderHookFlags"
|
||||
},
|
||||
{
|
||||
"name": "resolveDirectives"
|
||||
},
|
||||
{
|
||||
"name": "resolveForwardRef"
|
||||
},
|
||||
{
|
||||
"name": "saveNameToExportMap"
|
||||
},
|
||||
{
|
||||
"name": "saveResolvedLocalsInData"
|
||||
},
|
||||
{
|
||||
"name": "searchTokensOnInjector"
|
||||
},
|
||||
{
|
||||
"name": "selectIndexInternal"
|
||||
},
|
||||
{
|
||||
"name": "setBindingRootForHostBindings"
|
||||
},
|
||||
{
|
||||
"name": "setCurrentDirectiveIndex"
|
||||
},
|
||||
{
|
||||
"name": "setCurrentQueryIndex"
|
||||
},
|
||||
{
|
||||
"name": "setCurrentTNode"
|
||||
},
|
||||
{
|
||||
"name": "setDirectiveInputsWhichShadowsStyling"
|
||||
},
|
||||
{
|
||||
"name": "setIncludeViewProviders"
|
||||
},
|
||||
{
|
||||
"name": "setInjectImplementation"
|
||||
},
|
||||
{
|
||||
"name": "setInputsForProperty"
|
||||
},
|
||||
{
|
||||
"name": "setInputsFromAttrs"
|
||||
},
|
||||
{
|
||||
"name": "setSelectedIndex"
|
||||
},
|
||||
{
|
||||
"name": "setTStylingRangeNext"
|
||||
},
|
||||
{
|
||||
"name": "setTStylingRangeNextDuplicate"
|
||||
},
|
||||
{
|
||||
"name": "setTStylingRangePrevDuplicate"
|
||||
},
|
||||
{
|
||||
"name": "setUpAttributes"
|
||||
},
|
||||
{
|
||||
"name": "shouldSearchParent"
|
||||
},
|
||||
{
|
||||
"name": "stringify"
|
||||
},
|
||||
{
|
||||
"name": "stringifyCSSSelector"
|
||||
},
|
||||
{
|
||||
"name": "throwProviderNotFoundError"
|
||||
},
|
||||
{
|
||||
"name": "tickRootContext"
|
||||
},
|
||||
{
|
||||
"name": "toRefArray"
|
||||
},
|
||||
{
|
||||
"name": "toTStylingRange"
|
||||
},
|
||||
{
|
||||
"name": "trackByIdentity"
|
||||
},
|
||||
{
|
||||
"name": "uniqueIdCounter"
|
||||
},
|
||||
{
|
||||
"name": "unwrapRNode"
|
||||
},
|
||||
{
|
||||
"name": "updateTransplantedViewCount"
|
||||
},
|
||||
{
|
||||
"name": "viewAttachedToChangeDetector"
|
||||
},
|
||||
{
|
||||
"name": "wrapListener"
|
||||
},
|
||||
{
|
||||
"name": "writeDirectClass"
|
||||
},
|
||||
{
|
||||
"name": "writeDirectStyle"
|
||||
},
|
||||
{
|
||||
"name": "ɵɵadvance"
|
||||
},
|
||||
{
|
||||
"name": "ɵɵclassProp"
|
||||
},
|
||||
{
|
||||
"name": "ɵɵdefineComponent"
|
||||
},
|
||||
{
|
||||
"name": "ɵɵdefineDirective"
|
||||
},
|
||||
{
|
||||
"name": "ɵɵdefineInjectable"
|
||||
},
|
||||
{
|
||||
"name": "ɵɵdirectiveInject"
|
||||
},
|
||||
{
|
||||
"name": "ɵɵelementEnd"
|
||||
},
|
||||
{
|
||||
"name": "ɵɵelementStart"
|
||||
},
|
||||
{
|
||||
"name": "ɵɵgetCurrentView"
|
||||
},
|
||||
{
|
||||
"name": "ɵɵinject"
|
||||
},
|
||||
{
|
||||
"name": "ɵɵlistener"
|
||||
},
|
||||
{
|
||||
"name": "ɵɵnextContext"
|
||||
},
|
||||
{
|
||||
"name": "ɵɵproperty"
|
||||
},
|
||||
{
|
||||
"name": "ɵɵreference"
|
||||
},
|
||||
{
|
||||
"name": "ɵɵresetView"
|
||||
},
|
||||
{
|
||||
"name": "ɵɵrestoreView"
|
||||
},
|
||||
{
|
||||
"name": "ɵɵtemplate"
|
||||
},
|
||||
{
|
||||
"name": "ɵɵtext"
|
||||
},
|
||||
{
|
||||
"name": "ɵɵtextInterpolate"
|
||||
},
|
||||
{
|
||||
"name": "ɵɵtextInterpolate1"
|
||||
}
|
||||
]
|
||||
@@ -1,41 +0,0 @@
|
||||
<!doctype html>
|
||||
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Angular Todo Example</title>
|
||||
<link rel="stylesheet" href="base.css">
|
||||
<link rel="stylesheet" href="todo.css">
|
||||
<style>
|
||||
.done {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- The Angular application will be bootstrapped into this element. -->
|
||||
<todo-app></todo-app>
|
||||
|
||||
<!--
|
||||
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.debug.min.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.debug.min.js`: Is what the developer would like to see when debugging
|
||||
the application. It has also gone through full pipeline of esbuild, babel optimization,
|
||||
plugins from the devkit and terser, however mangling is disabled and the minified
|
||||
file is formatted using prettier (to ease debugging).
|
||||
-->
|
||||
<script>
|
||||
document.write('<script src="' +
|
||||
(document.location.search.endsWith('debug') ? '/bundle.debug.min.js' : '/bundle.min.js.br') +
|
||||
'"></' + 'script>');
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -1,209 +0,0 @@
|
||||
/**
|
||||
* @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/core/test/bundling/util/src/reflect_metadata';
|
||||
|
||||
import {CommonModule} from '@angular/common';
|
||||
import {Component, Injectable, NgModule, ViewEncapsulation, ɵmarkDirty as markDirty, ɵrenderComponent as renderComponent, ɵwhenRendered as whenRendered} from '@angular/core';
|
||||
|
||||
class Todo {
|
||||
editing: boolean;
|
||||
|
||||
// TODO(issue/24571): remove '!'.
|
||||
private _title!: string;
|
||||
get title() {
|
||||
return this._title;
|
||||
}
|
||||
set title(value: string) {
|
||||
this._title = value.trim();
|
||||
}
|
||||
|
||||
constructor(title: string, public completed: boolean = false) {
|
||||
this.editing = false;
|
||||
this.title = title;
|
||||
}
|
||||
}
|
||||
|
||||
@Injectable({providedIn: 'root'})
|
||||
class TodoStore {
|
||||
todos: Array<Todo> = [
|
||||
new Todo('Demonstrate Components'),
|
||||
new Todo('Demonstrate Structural Directives', true),
|
||||
new Todo('Demonstrate NgModules'),
|
||||
new Todo('Demonstrate zoneless change detection'),
|
||||
new Todo('Demonstrate internationalization'),
|
||||
];
|
||||
|
||||
private getWithCompleted(completed: boolean) {
|
||||
return this.todos.filter((todo: Todo) => todo.completed === completed);
|
||||
}
|
||||
|
||||
allCompleted() {
|
||||
return this.todos.length === this.getCompleted().length;
|
||||
}
|
||||
|
||||
setAllTo(completed: boolean) {
|
||||
this.todos.forEach((t: Todo) => t.completed = completed);
|
||||
}
|
||||
|
||||
removeCompleted() {
|
||||
this.todos = this.getWithCompleted(false);
|
||||
}
|
||||
|
||||
getRemaining() {
|
||||
return this.getWithCompleted(false);
|
||||
}
|
||||
|
||||
getCompleted() {
|
||||
return this.getWithCompleted(true);
|
||||
}
|
||||
|
||||
toggleCompletion(todo: Todo) {
|
||||
todo.completed = !todo.completed;
|
||||
}
|
||||
|
||||
remove(todo: Todo) {
|
||||
this.todos.splice(this.todos.indexOf(todo), 1);
|
||||
}
|
||||
|
||||
add(title: string) {
|
||||
this.todos.push(new Todo(title));
|
||||
}
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'todo-app',
|
||||
// TODO(misko): make this work with `[(ngModel)]`
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
template: `
|
||||
<section class="todoapp">
|
||||
<header class="header">
|
||||
<h1>todos</h1>
|
||||
<input class="new-todo" placeholder="What needs to be done?" autofocus=""
|
||||
[value]="newTodoText"
|
||||
(keyup)="$event.code == 'Enter' ? addTodo() : updateNewTodoValue($event.target.value)">
|
||||
</header>
|
||||
<section *ngIf="todoStore.todos.length > 0" class="main">
|
||||
<input *ngIf="todoStore.todos.length"
|
||||
#toggleall class="toggle-all" type="checkbox"
|
||||
[checked]="todoStore.allCompleted()"
|
||||
(click)="toggleAllTodos(toggleall.checked)">
|
||||
<ul class="todo-list">
|
||||
<li *ngFor="let todo of todoStore.todos"
|
||||
[class.completed]="todo.completed"
|
||||
[class.editing]="todo.editing">
|
||||
<div class="view">
|
||||
<input class="toggle" type="checkbox"
|
||||
(click)="toggleCompletion(todo)"
|
||||
[checked]="todo.completed">
|
||||
<label (dblclick)="editTodo(todo)">{{todo.title}}</label>
|
||||
<button class="destroy" (click)="remove(todo)"></button>
|
||||
</div>
|
||||
<input *ngIf="todo.editing"
|
||||
class="edit" #editedtodo
|
||||
[value]="todo.title"
|
||||
(blur)="updateEditedTodoValue(todo, editedtodo.value)"
|
||||
(keyup)="updateEditedTodoValue(todo, $event.target.value)"
|
||||
(keyup)="$event.code == 'Enter' && updateEditedTodoValue(todo, editedtodo.value)"
|
||||
(keyup)="$event.code == 'Escape' && cancelEditingTodo(todo)">
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
<footer *ngIf="todoStore.todos.length > 0" class="footer">
|
||||
<span class="todo-count">
|
||||
<strong>{{todoStore.getRemaining().length}}</strong>
|
||||
{{todoStore.getRemaining().length == 1 ? 'item' : 'items'}} left
|
||||
</span>
|
||||
<button *ngIf="todoStore.getCompleted().length > 0"
|
||||
class="clear-completed"
|
||||
(click)="removeCompleted()">
|
||||
Clear completed
|
||||
</button>
|
||||
</footer>
|
||||
</section>
|
||||
`,
|
||||
// TODO(misko): switch over to OnPush
|
||||
// changeDetection: ChangeDetectionStrategy.OnPush
|
||||
})
|
||||
class ToDoAppComponent {
|
||||
newTodoText = '';
|
||||
|
||||
constructor(public todoStore: TodoStore) {
|
||||
(window as any).todoAppComponent = this;
|
||||
}
|
||||
|
||||
cancelEditingTodo(todo: Todo) {
|
||||
todo.editing = false;
|
||||
markDirty(this);
|
||||
}
|
||||
|
||||
finishUpdatingTodo(todo: Todo, editedTitle: string) {
|
||||
editedTitle = editedTitle.trim();
|
||||
|
||||
if (editedTitle.length === 0) {
|
||||
this.remove(todo);
|
||||
}
|
||||
|
||||
todo.title = editedTitle;
|
||||
this.cancelEditingTodo(todo);
|
||||
}
|
||||
|
||||
editTodo(todo: Todo) {
|
||||
todo.editing = true;
|
||||
markDirty(this);
|
||||
}
|
||||
|
||||
removeCompleted() {
|
||||
this.todoStore.removeCompleted();
|
||||
markDirty(this);
|
||||
}
|
||||
|
||||
toggleCompletion(todo: Todo) {
|
||||
this.todoStore.toggleCompletion(todo);
|
||||
markDirty(this);
|
||||
}
|
||||
|
||||
remove(todo: Todo) {
|
||||
this.todoStore.remove(todo);
|
||||
markDirty(this);
|
||||
}
|
||||
|
||||
addTodo() {
|
||||
if (this.newTodoText.trim().length) {
|
||||
this.todoStore.add(this.newTodoText);
|
||||
this.newTodoText = '';
|
||||
}
|
||||
markDirty(this);
|
||||
}
|
||||
|
||||
toggleAllTodos(checked: boolean) {
|
||||
this.todoStore.setAllTo(checked);
|
||||
markDirty(this);
|
||||
}
|
||||
|
||||
updateEditedTodoValue(todo: Todo, value: string) {
|
||||
todo.title = value;
|
||||
markDirty(this);
|
||||
}
|
||||
|
||||
updateNewTodoValue(value: string) {
|
||||
this.newTodoText = value;
|
||||
markDirty(this);
|
||||
}
|
||||
}
|
||||
|
||||
@NgModule({declarations: [ToDoAppComponent], imports: [CommonModule]})
|
||||
class ToDoAppModule {
|
||||
}
|
||||
|
||||
renderComponent(ToDoAppComponent);
|
||||
|
||||
// This bundle includes `@angular/core` within it which means that the test asserting
|
||||
// against it will load a different core bundle. These symbols are exposed so that they
|
||||
// can interact with the correct `@angular/core` instance.
|
||||
module.exports = {whenRendered};
|
||||
@@ -1,368 +0,0 @@
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
button {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
background: none;
|
||||
font-size: 100%;
|
||||
vertical-align: baseline;
|
||||
font-family: inherit;
|
||||
font-weight: inherit;
|
||||
color: inherit;
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
body {
|
||||
font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
line-height: 1.4em;
|
||||
background: #f5f5f5;
|
||||
color: #4d4d4d;
|
||||
min-width: 230px;
|
||||
max-width: 550px;
|
||||
margin: 0 auto;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
button,
|
||||
input[type="checkbox"] {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.todoapp {
|
||||
background: #fff;
|
||||
margin: 130px 0 40px 0;
|
||||
position: relative;
|
||||
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2),
|
||||
0 25px 50px 0 rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.todoapp input::-webkit-input-placeholder {
|
||||
font-style: italic;
|
||||
font-weight: 300;
|
||||
color: #e6e6e6;
|
||||
}
|
||||
|
||||
.todoapp input::-moz-placeholder {
|
||||
font-style: italic;
|
||||
font-weight: 300;
|
||||
color: #e6e6e6;
|
||||
}
|
||||
|
||||
.todoapp input::input-placeholder {
|
||||
font-style: italic;
|
||||
font-weight: 300;
|
||||
color: #e6e6e6;
|
||||
}
|
||||
|
||||
.todoapp h1 {
|
||||
position: absolute;
|
||||
top: -155px;
|
||||
width: 100%;
|
||||
font-size: 100px;
|
||||
font-weight: 100;
|
||||
text-align: center;
|
||||
color: rgba(175, 47, 47, 0.15);
|
||||
-webkit-text-rendering: optimizeLegibility;
|
||||
-moz-text-rendering: optimizeLegibility;
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
|
||||
.new-todo,
|
||||
.edit {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
font-size: 24px;
|
||||
font-family: inherit;
|
||||
font-weight: inherit;
|
||||
line-height: 1.4em;
|
||||
border: 0;
|
||||
outline: none;
|
||||
color: inherit;
|
||||
padding: 6px;
|
||||
border: 1px solid #999;
|
||||
box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.new-todo {
|
||||
padding: 16px 16px 16px 60px;
|
||||
border: none;
|
||||
background: rgba(0, 0, 0, 0.003);
|
||||
box-shadow: inset 0 -2px 1px rgba(0,0,0,0.03);
|
||||
}
|
||||
|
||||
.main {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
border-top: 1px solid #e6e6e6;
|
||||
}
|
||||
|
||||
label[for='toggle-all'] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.toggle-all {
|
||||
position: absolute;
|
||||
top: -55px;
|
||||
left: -12px;
|
||||
width: 60px;
|
||||
height: 34px;
|
||||
text-align: center;
|
||||
border: none; /* Mobile Safari */
|
||||
}
|
||||
|
||||
.toggle-all:before {
|
||||
content: '❯';
|
||||
font-size: 22px;
|
||||
color: #e6e6e6;
|
||||
padding: 10px 27px 10px 27px;
|
||||
}
|
||||
|
||||
.toggle-all:checked:before {
|
||||
color: #737373;
|
||||
}
|
||||
|
||||
.todo-list {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.todo-list li {
|
||||
position: relative;
|
||||
font-size: 24px;
|
||||
border-bottom: 1px solid #ededed;
|
||||
}
|
||||
|
||||
.todo-list li:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.todo-list li.editing {
|
||||
border-bottom: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.todo-list li.editing .edit {
|
||||
display: block;
|
||||
width: 506px;
|
||||
padding: 13px 17px 12px 17px;
|
||||
margin: 0 0 0 43px;
|
||||
}
|
||||
|
||||
.todo-list li.editing .view {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.todo-list li .toggle {
|
||||
text-align: center;
|
||||
width: 40px;
|
||||
/* auto, since non-WebKit browsers doesn't support input styling */
|
||||
height: auto;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
margin: auto 0;
|
||||
border: none; /* Mobile Safari */
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
.todo-list li .toggle:after {
|
||||
content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="-10 -18 100 135"><circle cx="50" cy="50" r="50" fill="none" stroke="#ededed" stroke-width="3"/></svg>');
|
||||
}
|
||||
|
||||
.todo-list li .toggle:checked:after {
|
||||
content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="-10 -18 100 135"><circle cx="50" cy="50" r="50" fill="none" stroke="#bddad5" stroke-width="3"/><path fill="#5dc2af" d="M72 25L42 71 27 56l-4 4 20 20 34-52z"/></svg>');
|
||||
}
|
||||
|
||||
.todo-list li label {
|
||||
white-space: pre-line;
|
||||
word-break: break-all;
|
||||
padding: 15px 60px 15px 15px;
|
||||
margin-left: 45px;
|
||||
display: block;
|
||||
line-height: 1.2;
|
||||
transition: color 0.4s;
|
||||
}
|
||||
|
||||
.todo-list li.completed label {
|
||||
color: #d9d9d9;
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
.todo-list li .destroy {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 10px;
|
||||
bottom: 0;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin: auto 0;
|
||||
font-size: 30px;
|
||||
color: #cc9a9a;
|
||||
margin-bottom: 11px;
|
||||
transition: color 0.2s ease-out;
|
||||
}
|
||||
|
||||
.todo-list li .destroy:hover {
|
||||
color: #af5b5e;
|
||||
}
|
||||
|
||||
.todo-list li .destroy:after {
|
||||
content: '×';
|
||||
}
|
||||
|
||||
.todo-list li:hover .destroy {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.todo-list li .edit {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.todo-list li.editing:last-child {
|
||||
margin-bottom: -1px;
|
||||
}
|
||||
|
||||
.footer {
|
||||
color: #777;
|
||||
padding: 10px 15px;
|
||||
height: 20px;
|
||||
text-align: center;
|
||||
border-top: 1px solid #e6e6e6;
|
||||
}
|
||||
|
||||
.footer:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
height: 50px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2),
|
||||
0 8px 0 -3px #f6f6f6,
|
||||
0 9px 1px -3px rgba(0, 0, 0, 0.2),
|
||||
0 16px 0 -6px #f6f6f6,
|
||||
0 17px 2px -6px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.todo-count {
|
||||
float: left;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.todo-count strong {
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.filters {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.filters li {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.filters li a {
|
||||
color: inherit;
|
||||
margin: 3px;
|
||||
padding: 3px 7px;
|
||||
text-decoration: none;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.filters li a.selected,
|
||||
.filters li a:hover {
|
||||
border-color: rgba(175, 47, 47, 0.1);
|
||||
}
|
||||
|
||||
.filters li a.selected {
|
||||
border-color: rgba(175, 47, 47, 0.2);
|
||||
}
|
||||
|
||||
.clear-completed,
|
||||
html .clear-completed:active {
|
||||
float: right;
|
||||
position: relative;
|
||||
line-height: 20px;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.clear-completed:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.info {
|
||||
margin: 65px auto 0;
|
||||
color: #bfbfbf;
|
||||
font-size: 10px;
|
||||
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.info p {
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.info a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.info a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/*
|
||||
Hack to remove background from Mobile Safari.
|
||||
Can't use it globally since it destroys checkboxes in Firefox
|
||||
*/
|
||||
@media screen and (-webkit-min-device-pixel-ratio:0) {
|
||||
.toggle-all,
|
||||
.todo-list li .toggle {
|
||||
background: none;
|
||||
}
|
||||
|
||||
.todo-list li .toggle {
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.toggle-all {
|
||||
-webkit-transform: rotate(90deg);
|
||||
transform: rotate(90deg);
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 430px) {
|
||||
.footer {
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.filters {
|
||||
bottom: 10px;
|
||||
}
|
||||
}
|
||||
@@ -1,31 +0,0 @@
|
||||
/**
|
||||
* @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 {withBody} from '@angular/private/testing';
|
||||
import * as path from 'path';
|
||||
|
||||
const PACKAGE = 'angular/packages/core/test/bundling/todo';
|
||||
const BUNDLES = ['bundle.js', 'bundle.debug.min.js', 'bundle.min.js'];
|
||||
|
||||
describe('functional test for todo', () => {
|
||||
BUNDLES.forEach(bundle => {
|
||||
describe(bundle, () => {
|
||||
it('should render todo', withBody('<todo-app></todo-app>', async () => {
|
||||
const {whenRendered} = require(path.join(PACKAGE, bundle));
|
||||
expect(document.body.textContent).toContain('todos');
|
||||
expect(document.body.textContent).toContain('Demonstrate Components');
|
||||
expect(document.body.textContent).toContain('4 items left');
|
||||
document.querySelector('button')!.click();
|
||||
await whenRendered((window as any).todoAppComponent);
|
||||
expect(document.body.textContent).toContain('3 items left');
|
||||
}));
|
||||
});
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user