fix(platform-webworker): remove platform-webworker and platform-webworker-dynamic (#38846)

Remove @angular/platform-webworker and @angular/platform-webworker-dynamic
as they were deprecated in v8

BREAKING CHANGE: @angular/platform-webworker and @angular/platform-webworker-dynamic
have been removed as they were deprecated in v8

PR Close #38846
This commit is contained in:
Joey Perrott 2020-09-14 15:48:03 -07:00 committed by Alex Rickabaugh
parent 1b70dc931d
commit 93c3d8f9fd
134 changed files with 12 additions and 5787 deletions

View File

@ -105,9 +105,9 @@ Fixes #<issue number>
# │ │
# │ └─⫸ Commit Scope: animations|bazel|benchpress|common|compiler|compiler-cli|core|
# │ elements|forms|http|language-service|localize|platform-browser|
# │ platform-browser-dynamic|platform-server|platform-webworker|
# │ platform-webworker-dynamic|router|service-worker|upgrade|zone.js|
# │ packaging|changelog|dev-infra|docs-infra|migrations|ngcc|ve
# │ platform-browser-dynamic|platform-server|router|service-worker|
# │ upgrade|zone.js|packaging|changelog|dev-infra|docs-infra|migrations|
# │ ngcc|ve
# │ https://github.com/angular/angular/blob/master/CONTRIBUTING.md#scope
# │
# └─⫸ Commit Type: build|ci|docs|feat|fix|perf|refactor|style|test

View File

@ -303,8 +303,6 @@ groups:
'packages/platform-browser/**',
'packages/examples/platform-browser/**',
'packages/platform-browser-dynamic/**',
'packages/platform-webworker/**',
'packages/platform-webworker-dynamic/**',
'packages/examples/common/**',
'packages/docs/**',
'aio/content/guide/accessibility.md',

View File

@ -209,9 +209,9 @@ Any line of the commit message cannot be longer than 100 characters.
│ │
│ └─⫸ Commit Scope: animations|bazel|benchpress|common|compiler|compiler-cli|core|
│ elements|forms|http|language-service|localize|platform-browser|
│ platform-browser-dynamic|platform-server|platform-webworker|
platform-webworker-dynamic|router|service-worker|upgrade|zone.js|
packaging|changelog|dev-infra|docs-infra|migrations|ngcc|ve
│ platform-browser-dynamic|platform-server|router|service-worker|
upgrade|zone.js|packaging|changelog|dev-infra|docs-infra|migrations|
│ ngcc|ve
└─⫸ Commit Type: build|ci|docs|feat|fix|perf|refactor|style|test
```
@ -253,8 +253,6 @@ The following is the list of supported scopes:
* `platform-browser`
* `platform-browser-dynamic`
* `platform-server`
* `platform-webworker`
* `platform-webworker-dynamic`
* `router`
* `service-worker`
* `upgrade`

View File

@ -48,7 +48,6 @@ v9 - v12
| `@angular/upgrade` | [`@angular/upgrade`](#upgrade) | <!--v8--> v11 |
| `@angular/upgrade` | [`getAngularLib`](#upgrade-static) | <!--v8--> v11 |
| `@angular/upgrade` | [`setAngularLib`](#upgrade-static) | <!--v8--> v11 |
| `@angular/platform-webworker` | [All entry points](api/platform-webworker) | <!--v8--> v11 |
| template syntax | [`<template`>](#template-tag) | <!--v7--> v11 |
| polyfills | [reflect-metadata](#reflect-metadata) | <!--v8--> v11 |
| npm package format | [`esm5` and `fesm5` entry-points in @angular/* npm packages](guide/deprecations#esm5-fesm5) | <!-- v9 --> v11 |
@ -123,20 +122,6 @@ Tip: In the [API reference section](api) of this doc site, deprecated APIs are i
| --- | ----------- | --------------------- | ----- |
| [`preserveQueryParams`](api/router/UrlCreationOptions#preserveQueryParams) | [`queryParamsHandling`](api/router/UrlCreationOptions#queryParamsHandling) | v4 | none |
{@a platform-webworker}
### @angular/platform-webworker
| API | Replacement | Deprecation announced | Notes |
| --- | ----------- | --------------------- | ----- |
| [All entry points](api/platform-webworker) | none | v8 | See [platform-webworker](#webworker-apps). |
{@a platform-webworker-dynamic}
### @angular/platform-webworker-dynamic
| API | Replacement | Deprecation announced | Notes |
| --- | ----------- | --------------------- | ----- |
| [All entry points](api/platform-webworker-dynamic) | none | v8 | See [platform-webworker](#webworker-apps). |
{@a upgrade}
### @angular/upgrade
@ -391,28 +376,6 @@ These two properties have subtle differences, so switching to `textContent` unde
All of the `wtf*` APIs are deprecated and will be removed in a future version.
{@a webworker-apps}
### Running Angular applications in platform-webworker
The `@angular/platform-*` packages enable Angular to be run in different contexts. For examples,
`@angular/platform-server` enables Angular to be run on the server, and `@angular/platform-browser`
enables Angular to be run in a web browser.
`@angular/platform-webworker` was introduced in Angular version 2 as an experiment in leveraging
Angular's rendering architecture to run an entire web application in a
[web worker](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API). We've learned a lot
from this experiment and have come to the conclusion that running the entire application in a web
worker is not the best strategy for most applications.
Going forward, we will focus our efforts related to web workers around their primary use case of
offloading CPU-intensive, non-critical work needed for initial rendering (such as in-memory search
and image processing). Learn more in the
[guide to Using Web Workers with the Angular CLI](guide/web-worker).
As of Angular version 8, all `platform-webworker` APIs are deprecated.
This includes both packages: `@angular/platform-webworker` and
`@angular/platform-webworker-dynamic`.
{@a entryComponents}
### `entryComponents` and `ANALYZE_FOR_ENTRY_COMPONENTS` no longer required
Previously, the `entryComponents` array in the `NgModule` definition was used to tell the compiler which components would be created and inserted dynamically. With Ivy, this isn't a requirement anymore and the `entryComponents` array can be removed from existing module declarations. The same applies to the `ANALYZE_FOR_ENTRY_COMPONENTS` injection token.

View File

@ -20,8 +20,6 @@ const packageMap = {
'platform-browser': ['platform-browser/index.ts', 'platform-browser/animations/index.ts', 'platform-browser/testing/index.ts'],
'platform-browser-dynamic': ['platform-browser-dynamic/index.ts', 'platform-browser-dynamic/testing/index.ts'],
'platform-server': ['platform-server/index.ts', 'platform-server/testing/index.ts'],
'platform-webworker': ['platform-webworker/index.ts'],
'platform-webworker-dynamic': ['platform-webworker-dynamic/index.ts'],
router: ['router/index.ts', 'router/testing/index.ts', 'router/upgrade/index.ts'],
'service-worker': ['service-worker/index.ts'],
upgrade: ['upgrade/index.ts', 'upgrade/static/index.ts', 'upgrade/static/testing/index.ts']

View File

@ -10,8 +10,6 @@ Our semver, timed-release cycle and deprecation policy currently applies to thes
- `@angular/platform-browser`
- `@angular/platform-browser-dynamic`
- `@angular/platform-server`
- `@angular/platform-webworker`
- `@angular/platform-webworker-dynamic`
- `@angular/upgrade`
- `@angular/router`
- `@angular/service-worker`

View File

@ -50,8 +50,6 @@ GENERATED_NPM_PACKAGES = [
"@angular/platform-browser",
"@angular/platform-browser-dynamic",
"@angular/platform-server",
"@angular/platform-webworker",
"@angular/platform-webworker-dynamic",
"@angular/router",
"@angular/service-worker",
"@angular/upgrade",

View File

@ -17,8 +17,6 @@
"@angular/platform-browser": "file:../../dist/packages-dist/platform-browser",
"@angular/platform-browser-dynamic": "file:../../dist/packages-dist/platform-browser-dynamic",
"@angular/platform-server": "file:../../dist/packages-dist/platform-server",
"@angular/platform-webworker": "file:../../dist/packages-dist/platform-webworker",
"@angular/platform-webworker-dynamic": "file:../../dist/packages-dist/platform-webworker-dynamic",
"@angular/router": "file:../../dist/packages-dist/router",
"@angular/service-worker": "file:../../dist/packages-dist/service-worker",
"@angular/upgrade": "file:../../dist/packages-dist/upgrade",

View File

@ -28,8 +28,6 @@ import * as platformBrowserAnimations from '@angular/platform-browser/animations
import * as platformBrowserTesting from '@angular/platform-browser/testing';
import * as platformServer from '@angular/platform-server';
import * as platformServerTesting from '@angular/platform-server/testing';
import * as platformWebworker from '@angular/platform-webworker';
import * as platformWebworkerDynamic from '@angular/platform-webworker-dynamic';
import * as router from '@angular/router';
import * as routerTesting from '@angular/router/testing';
import * as routerUpgrade from '@angular/router/upgrade';
@ -59,8 +57,6 @@ export default {
platformBrowserAnimations,
platformServer,
platformServerTesting,
platformWebworker,
platformWebworkerDynamic,
router,
routerTesting,
routerUpgrade,

View File

@ -14,8 +14,6 @@
"@angular/platform-browser": "file:../../dist/packages-dist/platform-browser",
"@angular/platform-browser-dynamic": "file:../../dist/packages-dist/platform-browser-dynamic",
"@angular/platform-server": "file:../../dist/packages-dist/platform-server",
"@angular/platform-webworker": "file:../../dist/packages-dist/platform-webworker",
"@angular/platform-webworker-dynamic": "file:../../dist/packages-dist/platform-webworker-dynamic",
"@angular/router": "file:../../dist/packages-dist/router",
"@angular/service-worker": "file:../../dist/packages-dist/service-worker",
"@angular/upgrade": "file:../../dist/packages-dist/upgrade",

View File

@ -28,8 +28,6 @@ import * as platformBrowserAnimations from '@angular/platform-browser/animations
import * as platformBrowserTesting from '@angular/platform-browser/testing';
import * as platformServer from '@angular/platform-server';
import * as platformServerTesting from '@angular/platform-server/testing';
import * as platformWebworker from '@angular/platform-webworker';
import * as platformWebworkerDynamic from '@angular/platform-webworker-dynamic';
import * as router from '@angular/router';
import * as routerTesting from '@angular/router/testing';
import * as routerUpgrade from '@angular/router/upgrade';
@ -59,8 +57,6 @@ export default {
platformBrowserAnimations,
platformServer,
platformServerTesting,
platformWebworker,
platformWebworkerDynamic,
router,
routerTesting,
routerUpgrade,

View File

@ -14,8 +14,6 @@
"@angular/platform-browser": "file:../../dist/packages-dist/platform-browser",
"@angular/platform-browser-dynamic": "file:../../dist/packages-dist/platform-browser-dynamic",
"@angular/platform-server": "file:../../dist/packages-dist/platform-server",
"@angular/platform-webworker": "file:../../dist/packages-dist/platform-webworker",
"@angular/platform-webworker-dynamic": "file:../../dist/packages-dist/platform-webworker-dynamic",
"@angular/router": "file:../../dist/packages-dist/router",
"@angular/service-worker": "file:../../dist/packages-dist/service-worker",
"@angular/upgrade": "file:../../dist/packages-dist/upgrade",

View File

@ -1,7 +0,0 @@
load("//modules/playground/e2e_test:example_test.bzl", "example_test")
example_test(
name = "animations",
srcs = glob(["**/*.ts"]),
server = "//modules/playground/src/web_workers/animations:devserver",
)

View File

@ -1,79 +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 {browser, by, element, protractor} from 'protractor';
import {verifyNoBrowserErrors} from '../../../../../dev-infra/benchmark/driver-utilities';
// Disabled because with ViewEngine animations within webworkers is not supported.
// See: https://github.com/angular/angular/issues/18610
xdescribe('WebWorkers Animations', function() {
afterEach(() => {
verifyNoBrowserErrors();
browser.ignoreSynchronization = false;
});
const selector = 'animation-app';
const URL = 'all/playground/src/web_workers/animations/index.html';
it('should bootstrap', () => {
// This test can't wait for Angular as Testability is not available when using WebWorker
browser.ignoreSynchronization = true;
browser.get(URL);
waitForBootstrap();
const elem = element(by.css(selector + ' .box'));
expect(elem.getText()).toEqual('...');
});
it('should animate to open', () => {
// This test can't wait for Angular as Testability is not available when using WebWorker
browser.ignoreSynchronization = true;
browser.get(URL);
waitForBootstrap();
element(by.css(selector + ' button')).click();
const boxElm = element(by.css(selector + ' .box'));
browser.wait(() => boxElm.getSize().then(sizes => sizes['width'] > 750), 1000);
});
it('should cancel the animation midway and continue from where it left off', () => {
browser.ignoreSynchronization = true;
browser.get(URL);
waitForBootstrap();
const elem = element(by.css(selector + ' .box'));
const btn = element(by.css(selector + ' button'));
const getWidth = () => elem.getSize().then((sizes: any) => sizes['width']);
btn.click();
browser.sleep(250);
btn.click();
expect(getWidth()).toBeLessThan(600);
browser.sleep(500);
expect(getWidth()).toBeLessThan(50);
});
function waitForBootstrap() {
browser.wait(protractor.until.elementLocated(by.css(selector + ' .box')), 5000)
.then(() => {}, () => {
// jasmine will timeout if this gets called too many times
console.error('>> unexpected timeout -> browser.refresh()');
browser.refresh();
waitForBootstrap();
});
}
});

View File

@ -1,7 +0,0 @@
load("//modules/playground/e2e_test:example_test.bzl", "example_test")
example_test(
name = "input",
srcs = glob(["**/*.ts"]),
server = "//modules/playground/src/web_workers/input:devserver",
)

View File

@ -1,75 +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 {browser, by, element, ExpectedConditions, protractor} from 'protractor';
import {verifyNoBrowserErrors} from '../../../../../dev-infra/benchmark/driver-utilities';
describe('WebWorkers Input', function() {
afterEach(() => {
verifyNoBrowserErrors();
browser.ignoreSynchronization = false;
});
const selector = 'input-app';
const URL = '/';
const VALUE = 'test val';
it('should bootstrap', () => {
// This test can't wait for Angular as Testability is not available when using WebWorker
browser.ignoreSynchronization = true;
browser.get(URL);
waitForBootstrap();
const elem = element(by.css(selector + ' h2'));
expect(elem.getText()).toEqual('Input App');
});
it('should bind to input value', () => {
// This test can't wait for Angular as Testability is not available when using WebWorker
browser.ignoreSynchronization = true;
browser.get(URL);
waitForBootstrap();
const input = element(by.css(selector + ' input'));
input.sendKeys(VALUE);
const displayElem = element(by.css(selector + ' .input-val'));
const expectedVal = `Input val is ${VALUE}.`;
browser.wait(ExpectedConditions.textToBePresentInElement(displayElem, expectedVal), 5000);
expect(displayElem.getText()).toEqual(expectedVal);
});
it('should bind to textarea value', () => {
// This test can't wait for Angular as Testability is not available when using WebWorker
browser.ignoreSynchronization = true;
browser.get(URL);
waitForBootstrap();
const input = element(by.css(selector + ' textarea'));
input.sendKeys(VALUE);
const displayElem = element(by.css(selector + ' .textarea-val'));
const expectedVal = `Textarea val is ${VALUE}.`;
browser.wait(ExpectedConditions.textToBePresentInElement(displayElem, expectedVal), 5000);
expect(displayElem.getText()).toEqual(expectedVal);
});
function waitForBootstrap() {
browser.wait(protractor.until.elementLocated(by.css(selector + ' h2')), 5000)
.then(
() => {
const elem = element(by.css(selector + ' h2'));
browser.wait(
protractor.ExpectedConditions.textToBePresentInElement(elem, 'Input App'), 5000);
},
() => {
// jasmine will timeout if this gets called too many times
console.error('>> unexpected timeout -> browser.refresh()');
browser.refresh();
waitForBootstrap();
});
}
});

View File

@ -1,7 +0,0 @@
load("//modules/playground/e2e_test:example_test.bzl", "example_test")
example_test(
name = "kitchen_sink",
srcs = glob(["**/*.ts"]),
server = "//modules/playground/src/web_workers/kitchen_sink:devserver",
)

View File

@ -1,58 +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 {browser, by, element, ExpectedConditions, protractor} from 'protractor';
import {verifyNoBrowserErrors} from '../../../../../dev-infra/benchmark/driver-utilities';
describe('WebWorkers Kitchen Sink', function() {
afterEach(() => {
verifyNoBrowserErrors();
browser.ignoreSynchronization = false;
});
const selector = 'hello-app .greeting';
const URL = '/';
it('should greet', () => {
// This test can't wait for Angular as Testability is not available when using WebWorker
browser.ignoreSynchronization = true;
browser.get(URL);
browser.wait(protractor.until.elementLocated(by.css(selector)), 15000);
const elem = element(by.css(selector));
browser.wait(ExpectedConditions.textToBePresentInElement(elem, 'hello world!'), 5000);
expect(elem.getText()).toEqual('hello world!');
});
it('should change greeting', () => {
// This test can't wait for Angular as Testability is not available when using WebWorker
browser.ignoreSynchronization = true;
browser.get(URL);
const changeButtonSelector = 'hello-app .changeButton';
browser.wait(protractor.until.elementLocated(by.css(changeButtonSelector)), 15000);
element(by.css(changeButtonSelector)).click();
const elem = element(by.css(selector));
browser.wait(ExpectedConditions.textToBePresentInElement(elem, 'howdy world!'), 5000);
expect(elem.getText()).toEqual('howdy world!');
});
it('should display correct key names', () => {
// This test can't wait for Angular as Testability is not available when using WebWorker
browser.ignoreSynchronization = true;
browser.get(URL);
browser.wait(protractor.until.elementLocated(by.css('.sample-area')), 15000);
const area = element.all(by.css('.sample-area')).first();
expect(area.getText()).toEqual('(none)');
area.sendKeys('u');
browser.wait(ExpectedConditions.textToBePresentInElement(area, 'U'), 5000);
expect(area.getText()).toEqual('U');
});
});

View File

@ -1,7 +0,0 @@
load("//modules/playground/e2e_test:example_test.bzl", "example_test")
example_test(
name = "message_broker",
srcs = glob(["**/*.ts"]),
server = "//modules/playground/src/web_workers/message_broker:devserver",
)

View File

@ -1,47 +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 {browser, by, element, ExpectedConditions, protractor} from 'protractor';
import {verifyNoBrowserErrors} from '../../../../../dev-infra/benchmark/driver-utilities';
const URL = '/';
describe('MessageBroker', function() {
afterEach(() => {
verifyNoBrowserErrors();
browser.ignoreSynchronization = false;
});
it('should bootstrap', () => {
// This test can't wait for Angular as Testability is not available when using WebWorker
browser.ignoreSynchronization = true;
browser.get(URL);
waitForBootstrap();
expect(element(by.css('app h1')).getText()).toEqual('WebWorker MessageBroker Test');
});
it('should echo messages', () => {
const VALUE = 'Hi There';
// This test can't wait for Angular as Testability is not available when using WebWorker
browser.ignoreSynchronization = true;
browser.get(URL);
waitForBootstrap();
const input = element.all(by.css('#echo_input')).first();
input.sendKeys(VALUE);
element(by.css('#send_echo')).click();
const area = element(by.css('#echo_result'));
browser.wait(ExpectedConditions.textToBePresentInElement(area, VALUE), 5000);
expect(area.getText()).toEqual(VALUE);
});
});
function waitForBootstrap(): void {
browser.wait(protractor.until.elementLocated(by.css('app h1')), 15000);
}

View File

@ -1,7 +0,0 @@
load("//modules/playground/e2e_test:example_test.bzl", "example_test")
example_test(
name = "router",
srcs = glob(["**/*.ts"]),
server = "//modules/playground/src/web_workers/router:devserver",
)

View File

@ -1,88 +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 {browser, by, element, protractor} from 'protractor';
import {verifyNoBrowserErrors} from '../../../../../dev-infra/benchmark/driver-utilities';
describe('WebWorker Router', () => {
beforeEach(() => {
// This test can't wait for Angular as Testability is not available when using WebWorker
browser.ignoreSynchronization = true;
browser.get('/');
});
afterEach(() => {
verifyNoBrowserErrors();
browser.ignoreSynchronization = false;
});
const contentSelector = 'app main h1';
const navSelector = 'app nav ul';
const baseUrl = '/';
it('should route on click', () => {
browser.get(baseUrl);
waitForElement(contentSelector);
let content = element(by.css(contentSelector));
expect(content.getText()).toEqual('Start');
const aboutBtn = element(by.css(navSelector + ' .about'));
aboutBtn.click();
waitForUrl(/\/about/);
waitForElement(contentSelector);
waitForElementText(contentSelector, 'About');
content = element(by.css(contentSelector));
expect(content.getText()).toEqual('About');
expect(browser.getCurrentUrl()).toMatch(/\/about/);
const contactBtn = element(by.css(navSelector + ' .contact'));
contactBtn.click();
waitForUrl(/\/contact/);
waitForElement(contentSelector);
waitForElementText(contentSelector, 'Contact');
content = element(by.css(contentSelector));
expect(content.getText()).toEqual('Contact');
expect(browser.getCurrentUrl()).toMatch(/\/contact/);
});
it('should load the correct route from the URL', () => {
browser.get(baseUrl + '#/about');
waitForElement(contentSelector);
waitForElementText(contentSelector, 'About');
const content = element(by.css(contentSelector));
expect(content.getText()).toEqual('About');
});
function waitForElement(selector: string): void {
browser.wait(protractor.until.elementLocated(by.css(selector)), 15000);
}
function waitForElementText(contentSelector: string, expected: string): void {
browser.wait(() => {
const deferred = protractor.promise.defer();
const elem = element(by.css(contentSelector));
elem.getText().then((text: string) => {
return deferred.fulfill(text === expected);
});
return deferred.promise;
}, 5000);
}
function waitForUrl(regex: RegExp): void {
browser.wait(() => {
const deferred = protractor.promise.defer();
browser.getCurrentUrl().then((url: string) => {
return deferred.fulfill(url.match(regex) !== null);
});
return deferred.promise;
}, 5000);
}
});

View File

@ -1,7 +0,0 @@
load("//modules/playground/e2e_test:example_test.bzl", "example_test")
example_test(
name = "todo",
srcs = glob(["**/*.ts"]),
server = "//modules/playground/src/web_workers/todo:devserver",
)

View File

@ -1,33 +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 {browser, by, element, protractor} from 'protractor';
import {verifyNoBrowserErrors} from '../../../../../dev-infra/benchmark/driver-utilities';
describe('WebWorkers Todo', function() {
afterEach(() => {
verifyNoBrowserErrors();
browser.ignoreSynchronization = false;
});
const URL = '/';
it('should bootstrap', () => {
// This test can't wait for Angular as Testability is not available when using WebWorker
browser.ignoreSynchronization = true;
browser.get(URL);
waitForBootstrap();
expect(element(by.css('#todoapp header')).getText()).toEqual('todos');
});
});
function waitForBootstrap(): void {
browser.wait(protractor.until.elementLocated(by.css('todo-app #todoapp')), 15000);
}

View File

@ -1,13 +0,0 @@
package(default_visibility = ["//visibility:public"])
filegroup(
name = "worker-config",
srcs = ["worker-configure.js"],
data = [
"//modules/playground:systemjs-config.js",
"//modules/playground:systemjs-rxjs-operators.js",
"//packages/zone.js/bundles:zone.umd.js",
"@npm//reflect-metadata",
"@npm//systemjs",
],
)

View File

@ -1,31 +0,0 @@
load("//tools:defaults.bzl", "ng_module", "ts_devserver")
package(default_visibility = ["//modules/playground:__subpackages__"])
ng_module(
name = "animations",
srcs = glob(["**/*.ts"]),
tsconfig = "//modules/playground:tsconfig-build.json",
deps = [
"//packages/animations",
"//packages/core",
"//packages/platform-webworker",
"//packages/platform-webworker-dynamic",
],
)
ts_devserver(
name = "devserver",
entry_module = "angular/modules/playground/src/web_workers/animations/index",
port = 4200,
scripts = ["@npm//:node_modules/tslib/tslib.js"],
static_files = [
"loader.js",
"//modules/playground/src/web_workers:worker-config",
"@npm//:node_modules/rxjs/bundles/rxjs.umd.js",
"@npm//:node_modules/tslib/tslib.js",
"index.html",
"//packages/zone.js/bundles:zone.umd.js",
],
deps = [":animations"],
)

View File

@ -1,19 +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 {NgModule} from '@angular/core';
import {WorkerAppModule} from '@angular/platform-webworker';
import {platformWorkerAppDynamic} from '@angular/platform-webworker-dynamic';
import {AnimationCmp} from './index_common';
@NgModule({imports: [WorkerAppModule], bootstrap: [AnimationCmp], declarations: [AnimationCmp]})
export class ExampleModule {
}
platformWorkerAppDynamic().bootstrapModule(ExampleModule);

View File

@ -1,11 +0,0 @@
<!doctype html>
<html>
<title>WebWorker Animation Tests</title>
<style>
</style>
<body>
<animation-app>
Loading...
</animation-app>
</body>
</html>

View File

@ -1,11 +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 {bootstrapWorkerUi} from '@angular/platform-webworker';
bootstrapWorkerUi('loader.js');

View File

@ -1,43 +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 {animate, state, style, transition, trigger} from '@angular/animations';
import {Component} from '@angular/core';
@Component({
selector: 'animation-app',
styles: [`
.box {
border:10px solid black;
text-align:center;
overflow:hidden;
background:red;
color:white;
font-size:100px;
line-height:200px;
}
`],
animations: [trigger(
'animate',
[
state('off', style({width: '0px'})), state('on', style({width: '750px'})),
transition('off <=> on', animate(500))
])],
template: `
<button (click)="animate=!animate">
Start Animation
</button>
<div class="box" [@animate]="animate ? 'on' : 'off'">
...
</div>
`
})
export class AnimationCmp {
animate = false;
}

View File

@ -1,14 +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
*/
importScripts('angular/modules/playground/src/web_workers/worker-configure.js');
System.config({packages: {'angular/modules/playground/src/web_workers': {defaultExtension: 'js'}}});
System.import('./background_index.js')
.catch(error => console.error('error loading background', error));

View File

@ -1,41 +0,0 @@
load("//tools:defaults.bzl", "ng_module", "ts_devserver")
package(default_visibility = ["//modules/playground:__subpackages__"])
ng_module(
name = "images",
srcs = glob(["**/*.ts"]),
assets = ["image_demo.html"],
tsconfig = "//modules/playground:tsconfig-build.json",
deps = [
"//packages/core",
"//packages/platform-webworker",
"//packages/platform-webworker-dynamic",
"@npm//@types/base64-js",
],
)
ts_devserver(
name = "devserver",
# Workaround for: https://github.com/bazelbuild/rules_typescript/issues/409
additional_root_paths = ["angular"],
bootstrap = [
"//packages/zone.js/bundles:zone.umd.js",
"@npm//:node_modules/jquery/dist/jquery.min.js",
"@npm//:node_modules/materialize-css/dist/js/materialize.min.js",
],
entry_module = "angular/modules/playground/src/web_workers/images/index",
port = 4200,
scripts = ["@npm//:node_modules/tslib/tslib.js"],
static_files = [
"@npm//:node_modules/base64-js/base64js.min.js",
"@npm//:node_modules/rxjs/bundles/rxjs.umd.js",
"@npm//:node_modules/tslib/tslib.js",
"@npm//:node_modules/materialize-css/dist/css/materialize.min.css",
"loader.js",
"index.html",
"//modules/playground/src/web_workers:worker-config",
"//third_party/github.com/google/material-design-icons",
] + glob(["**/*.css"]),
deps = [":images"],
)

View File

@ -1,19 +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 {NgModule} from '@angular/core';
import {WorkerAppModule} from '@angular/platform-webworker';
import {platformWorkerAppDynamic} from '@angular/platform-webworker-dynamic';
import {ImageDemo} from './index_common';
@NgModule({imports: [WorkerAppModule], bootstrap: [ImageDemo], declarations: [ImageDemo]})
export class ExampleModule {
}
platformWorkerAppDynamic().bootstrapModule(ExampleModule);

View File

@ -1,30 +0,0 @@
.hidden{
display: none !important;
}
#images {
width: 600px;
margin: 0 auto;
}
ul li {
list-style-type: none;
float: left;
margin-left: 20px;
width: 200px;
}
#main ul {
width: 700px;
}
.card-image .image-loader{
position: absolute;
bottom: 0;
margin: auto;
}
.card-image img.grey {
opacity: 0.4;
}
.fixed-action-btn.bottom {
bottom: 45px;
right: 24px;
}

View File

@ -1,36 +0,0 @@
<nav class="blue">
<div class="container">
<div class="nav-wrapper">
<a class="brand-logo">Angular Image Demo</a>
</div>
</div>
</nav>
<section id="main" class="container">
<div class="row">
<div *ngFor="let image of images" class="col s12 m2">
<div class="card">
<div class="card-image">
<img [src]="image.src" [class.grey]="image.filtering"/>
<div class="image-loader progress" [class.hidden]="!image.filtering">
<div class="indeterminate"></div>
</div>
</div>
</div>
</div>
</div>
<div class="fixed-action-btn bottom" (click)="applyFilters()">
<a class="btn-floating btn-large blue darken-4" (click)="applyFilters()">
<i class="large material-icons" (click)="applyFilters()">invert_colors</i>
</a>
</div>
<div class="input-field file-field">
<div class="btn blue darken-2">
<span>Select Images</span>
<input type="file" accept="image/bmp" multiple (change)="uploadFiles($event.target.files)" />
</div>
<div class="file-path-wrapper">
<input class="file-path validate" type="text" placeholder="Upload one or more files">
</div>
</div>
</section>

View File

@ -1,13 +0,0 @@
<html>
<head>
<link rel="stylesheet" href="image_demo.css" />
<link rel="stylesheet" href="/npm/node_modules/materialize-css/dist/css/materialize.min.css">
<link rel="stylesheet" href="/third_party/github.com/google/material-design-icons/material-icons.css"></head>
</head>
<body>
<image-demo></image-demo>
<!--load location for ts_devserver-->
<script src="/app_bundle.js"></script>
</body>
</html>

View File

@ -1,11 +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 {bootstrapWorkerUi} from '@angular/platform-webworker';
bootstrapWorkerUi('loader.js');

View File

@ -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 {Component} from '@angular/core';
import {BitmapService} from './services/bitmap';
@Component({selector: 'image-demo', viewProviders: [BitmapService], templateUrl: 'image_demo.html'})
export class ImageDemo {
images: {src: string, buffer: ArrayBuffer, filtering: boolean}[] = [];
fileInput: String;
constructor(private _bitmapService: BitmapService) {}
uploadFiles(files: FileList) {
for (let i = 0; i < files.length; i++) {
const reader = new FileReader();
reader.addEventListener('load', this.handleReaderLoad(reader));
reader.readAsArrayBuffer(files[i]);
}
}
handleReaderLoad(reader: FileReader): EventListener {
return (e) => {
const buffer = reader.result as ArrayBuffer;
this.images.push({
src: this._bitmapService.arrayBufferToDataUri(new Uint8Array(buffer)),
buffer: buffer,
filtering: false
});
};
}
applyFilters() {
for (let i = 0; i < this.images.length; i++) {
this.images[i].filtering = true;
setTimeout(this._filter(i), 0);
}
}
private _filter(i: number): () => void {
return () => {
let imageData = this._bitmapService.convertToImageData(this.images[i].buffer);
imageData = this._bitmapService.applySepia(imageData);
this.images[i].src = this._bitmapService.toDataUri(imageData);
this.images[i].filtering = false;
};
}
}

View File

@ -1,71 +0,0 @@
body {
background: #eaecfa;
}
.loader {
width: 250px;
height: 50px;
line-height: 50px;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
font-family: helvetica, arial, sans-serif;
text-transform: uppercase;
font-weight: 900;
color: #ce4233;
letter-spacing: 0.2em;
}
.loader::before, .loader::after {
content: "";
display: block;
width: 15px;
height: 15px;
background: #ce4233;
position: absolute;
-webkit-animation: load .7s infinite alternate ease-in-out;
animation: load .7s infinite alternate ease-in-out;
}
.loader::before {
top: 0;
}
.loader::after {
bottom: 0;
}
@-webkit-keyframes load {
0% {
left: 0;
height: 30px;
width: 15px;
}
50% {
height: 8px;
width: 40px;
}
100% {
left: 235px;
height: 30px;
width: 15px;
}
}
@keyframes load {
0% {
left: 0;
height: 30px;
width: 15px;
}
50% {
height: 8px;
width: 40px;
}
100% {
left: 235px;
height: 30px;
width: 15px;
}
}

View File

@ -1,19 +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
*/
importScripts('angular/modules/playground/src/web_workers/worker-configure.js');
System.config({
map: {
'base64-js': 'npm/node_modules/base64-js/base64js.min.js',
},
packages: {'angular/modules/playground/src/web_workers': {defaultExtension: 'js'}}
});
System.import('./background_index.js')
.catch(error => console.error('error loading background', error));

View File

@ -1,179 +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 {Injectable} from '@angular/core';
import {fromByteArray} from 'base64-js';
// This class is based on the Bitmap examples at:
// http://www.i-programmer.info/projects/36-web/6234-reading-a-bmp-file-in-javascript.html
// and http://www.worldwidewhat.net/2012/07/how-to-draw-bitmaps-using-javascript/
@Injectable()
export class BitmapService {
convertToImageData(buffer: ArrayBuffer): ImageData {
const bmp = this._getBMP(buffer);
return this._BMPToImageData(bmp);
}
applySepia(imageData: ImageData): ImageData {
const buffer = imageData.data;
for (let i = 0; i < buffer.length; i += 4) {
const r = buffer[i];
const g = buffer[i + 1];
const b = buffer[i + 2];
buffer[i] = (r * .393) + (g * .769) + (b * .189);
buffer[i + 1] = (r * .349) + (g * .686) + (b * .168);
buffer[i + 2] = (r * .272) + (g * .534) + (b * .131);
}
return imageData;
}
toDataUri(imageData: ImageData): string {
const header = this._createBMPHeader(imageData);
imageData = this._imageDataToBMP(imageData);
return 'data:image/bmp;base64,' + btoa(header) + fromByteArray(Uint8Array.from(imageData.data));
}
// converts a .bmp file ArrayBuffer to a dataURI
arrayBufferToDataUri(data: Uint8Array): string {
return 'data:image/bmp;base64,' + fromByteArray(data);
}
// returns a UInt8Array in BMP order (starting from the bottom)
private _imageDataToBMP(imageData: ImageData): ImageData {
const width = imageData.width;
const height = imageData.height;
const data = imageData.data;
for (let y = 0; y < height / 2; ++y) {
let topIndex = y * width * 4;
let bottomIndex = (height - y) * width * 4;
for (let i = 0; i < width * 4; i++) {
this._swap(data, topIndex, bottomIndex);
topIndex++;
bottomIndex++;
}
}
return imageData;
}
private _swap(data: Uint8Array|Uint8ClampedArray|number[], index1: number, index2: number) {
const temp = data[index1];
data[index1] = data[index2];
data[index2] = temp;
}
// Based on example from
// http://www.worldwidewhat.net/2012/07/how-to-draw-bitmaps-using-javascript/
private _createBMPHeader(imageData: ImageData): string {
const numFileBytes = this._getLittleEndianHex(imageData.width * imageData.height);
const w = this._getLittleEndianHex(imageData.width);
const h = this._getLittleEndianHex(imageData.height);
return 'BM' + // Signature
numFileBytes + // size of the file (bytes)*
'\x00\x00' + // reserved
'\x00\x00' + // reserved
'\x36\x00\x00\x00' + // offset of where BMP data lives (54 bytes)
'\x28\x00\x00\x00' + // number of remaining bytes in header from here (40 bytes)
w + // the width of the bitmap in pixels*
h + // the height of the bitmap in pixels*
'\x01\x00' + // the number of color planes (1)
'\x20\x00' + // 32 bits / pixel
'\x00\x00\x00\x00' + // No compression (0)
'\x00\x00\x00\x00' + // size of the BMP data (bytes)*
'\x13\x0B\x00\x00' + // 2835 pixels/meter - horizontal resolution
'\x13\x0B\x00\x00' + // 2835 pixels/meter - the vertical resolution
'\x00\x00\x00\x00' + // Number of colors in the palette (keep 0 for 32-bit)
'\x00\x00\x00\x00'; // 0 important colors (means all colors are important)
}
private _BMPToImageData(bmp: BitmapFile): ImageData {
const width = bmp.infoHeader.biWidth;
const height = bmp.infoHeader.biHeight;
const imageData = new ImageData(width, height);
const data = imageData.data;
const bmpData = bmp.pixels;
const stride = bmp.stride;
for (let y = 0; y < height; ++y) {
for (let x = 0; x < width; ++x) {
const index1 = (x + width * (height - y)) * 4;
const index2 = x * 3 + stride * y;
data[index1] = bmpData[index2 + 2];
data[index1 + 1] = bmpData[index2 + 1];
data[index1 + 2] = bmpData[index2];
data[index1 + 3] = 255;
}
}
return imageData;
}
private _getBMP(buffer: ArrayBuffer): BitmapFile {
const datav = new DataView(buffer);
const bitmap: BitmapFile = {
fileHeader: {
bfType: datav.getUint16(0, true),
bfSize: datav.getUint32(2, true),
bfReserved1: datav.getUint16(6, true),
bfReserved2: datav.getUint16(8, true),
bfOffBits: datav.getUint32(10, true),
},
infoHeader: {
biSize: datav.getUint32(14, true),
biWidth: datav.getUint32(18, true),
biHeight: datav.getUint32(22, true),
biPlanes: datav.getUint16(26, true),
biBitCount: datav.getUint16(28, true),
biCompression: datav.getUint32(30, true),
biSizeImage: datav.getUint32(34, true),
biXPelsPerMeter: datav.getUint32(38, true),
biYPelsPerMeter: datav.getUint32(42, true),
biClrUsed: datav.getUint32(46, true),
biClrImportant: datav.getUint32(50, true)
},
stride: null,
pixels: null
};
const start = bitmap.fileHeader.bfOffBits;
bitmap.stride =
Math.floor((bitmap.infoHeader.biBitCount * bitmap.infoHeader.biWidth + 31) / 32) * 4;
bitmap.pixels = new Uint8Array(datav.buffer, start);
return bitmap;
}
// Based on example from
// http://www.worldwidewhat.net/2012/07/how-to-draw-bitmaps-using-javascript/
private _getLittleEndianHex(value: number): string {
const result: string[] = [];
for (let bytes = 4; bytes > 0; bytes--) {
result.push(String.fromCharCode(value & 255));
value >>= 8;
}
return result.join('');
}
}
interface BitmapFile {
fileHeader: {
bfType: number; bfSize: number; bfReserved1: number; bfReserved2: number; bfOffBits: number;
};
infoHeader: {
biSize: number; biWidth: number; biHeight: number; biPlanes: number; biBitCount: number;
biCompression: number;
biSizeImage: number;
biXPelsPerMeter: number;
biYPelsPerMeter: number;
biClrUsed: number;
biClrImportant: number
};
stride: number;
pixels: Uint8Array;
}

View File

@ -1,17 +0,0 @@
<html>
<head>
<link href="angular/third_party/github.com/google/material-design-icons/material-icons.css"
rel="stylesheet">
<link rel="stylesheet" href="image_demo.css" />
</head>
<body>
<image-demo>
</image-demo>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="angular/third_party/cdnjs.cloudflare.com/materialize/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script type="text/javascript" src="angular/third_party/code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="angular/third_party/cdnjs.cloudflare.com/materialize/materialize.min.js"></script>
</body>
</html>

View File

@ -1,21 +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 {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {ImageDemo} from './index_common';
@NgModule({bootstrap: [ImageDemo], imports: [BrowserModule]})
class ExampleModule {
}
export function main() {
platformBrowserDynamic().bootstrapModule(ExampleModule);
}

View File

@ -1,38 +0,0 @@
load("//tools:defaults.bzl", "ng_module", "ts_devserver")
package(default_visibility = ["//modules/playground:__subpackages__"])
ng_module(
name = "input",
srcs = glob(["**/*.ts"]),
tsconfig = "//modules/playground:tsconfig-build.json",
deps = [
"//packages/core",
"//packages/platform-webworker",
"//packages/platform-webworker-dynamic",
],
)
ts_devserver(
name = "devserver",
bootstrap = [
"@npm//:node_modules/systemjs/dist/system.js",
"//packages/zone.js/bundles:zone.umd.js",
"//packages/zone.js/bundles:long-stack-trace-zone.umd.js",
"@npm//:node_modules/reflect-metadata/Reflect.js",
],
entry_module = "angular/modules/playground/src/web_workers/input/index",
port = 4200,
scripts = [
"@npm//:node_modules/tslib/tslib.js",
"//tools/rxjs:rxjs_umd_modules",
],
static_files = [
"index.html",
"loader.js",
"//modules/playground/src/web_workers:worker-config",
"//modules/playground:systemjs-config.js",
"//modules/playground:systemjs-rxjs-operators.js",
],
deps = [":input"],
)

View File

@ -1,19 +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 {NgModule} from '@angular/core';
import {WorkerAppModule} from '@angular/platform-webworker';
import {platformWorkerAppDynamic} from '@angular/platform-webworker-dynamic';
import {InputCmp} from './index_common';
@NgModule({imports: [WorkerAppModule], bootstrap: [InputCmp], declarations: [InputCmp]})
export class ExampleModule {
}
platformWorkerAppDynamic().bootstrapModule(ExampleModule);

View File

@ -1,14 +0,0 @@
<!doctype html>
<html>
<title>WebWorker Input Tests</title>
<style>
</style>
<body>
<input-app>
Loading...
</input-app>
<!--load location for ts_devserver-->
<script src="/app_bundle.js"></script>
</body>
</html>

View File

@ -1,11 +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 {bootstrapWorkerUi} from '@angular/platform-webworker';
bootstrapWorkerUi('loader.js');

View File

@ -1,36 +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} from '@angular/core';
@Component({
selector: 'input-app',
template: `
<h2>Input App</h2>
<div id="input-container">
<input type="text" (input)="inputChanged($event)">
<textarea (input)="textAreaChanged($event)"></textarea>
<div class="input-val">Input val is {{inputVal}}.</div>
<div class="textarea-val">Textarea val is {{textareaVal}}.</div>
</div>
<div id="ng-model-container">
</div>
`
})
export class InputCmp {
inputVal = '';
textareaVal = '';
inputChanged(e: Event) {
this.inputVal = (e.target as HTMLInputElement).value;
}
textAreaChanged(e: Event) {
this.textareaVal = (e.target as HTMLTextAreaElement).value;
}
}

View File

@ -1,14 +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
*/
importScripts('angular/modules/playground/src/web_workers/worker-configure.js');
System.config({packages: {'angular/modules/playground/src/web_workers': {defaultExtension: 'js'}}});
System.import('./background_index.js')
.catch(error => console.error('error loading background', error));

View File

@ -1,38 +0,0 @@
load("//tools:defaults.bzl", "ng_module", "ts_devserver")
package(default_visibility = ["//modules/playground:__subpackages__"])
ng_module(
name = "kitchen_sink",
srcs = glob(["**/*.ts"]),
tsconfig = "//modules/playground:tsconfig-build.json",
deps = [
"//packages/core",
"//packages/platform-webworker",
"//packages/platform-webworker-dynamic",
],
)
ts_devserver(
name = "devserver",
bootstrap = [
"@npm//:node_modules/systemjs/dist/system.js",
"//packages/zone.js/bundles:zone.umd.js",
"//packages/zone.js/bundles:long-stack-trace-zone.umd.js",
"@npm//:node_modules/reflect-metadata/Reflect.js",
],
entry_module = "angular/modules/playground/src/web_workers/kitchen_sink/index",
port = 4200,
scripts = [
"@npm//:node_modules/tslib/tslib.js",
"//tools/rxjs:rxjs_umd_modules",
],
static_files = [
"index.html",
"loader.js",
"//modules/playground/src/web_workers:worker-config",
"//modules/playground:systemjs-config.js",
"//modules/playground:systemjs-rxjs-operators.js",
],
deps = [":kitchen_sink"],
)

View File

@ -1,23 +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 {NgModule} from '@angular/core';
import {WorkerAppModule} from '@angular/platform-webworker';
import {platformWorkerAppDynamic} from '@angular/platform-webworker-dynamic';
import {HelloCmp, RedDec} from './index_common';
@NgModule({
imports: [WorkerAppModule],
bootstrap: [HelloCmp],
declarations: [HelloCmp, RedDec],
})
export class ExampleModule {
}
platformWorkerAppDynamic().bootstrapModule(ExampleModule);

View File

@ -1,27 +0,0 @@
<!doctype html>
<html>
<title>Hello Angular</title>
<style>
.sample-area {
text-align: center;
margin: 5px;
height: 50px;
line-height: 50px;
border-radius: 5px;
border: 1px solid #d0d0d0;
}
.sample-area:focus {
border: 1px solid blue;
color: blue;
font-weight: bold;
}
</style>
<body>
<hello-app>
Loading...
</hello-app>
<!--load location for ts_devserver-->
<script src="/app_bundle.js"></script>
</body>
</html>

View File

@ -1,11 +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 {bootstrapWorkerUi} from '@angular/platform-webworker';
bootstrapWorkerUi('loader.js');

View File

@ -1,63 +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, Directive, ElementRef, Injectable, Renderer2} from '@angular/core';
// A service available to the Injector, used by the HelloCmp component.
@Injectable()
export class GreetingService {
greeting: string = 'hello';
}
// Directives are light-weight. They don't allow new
// expression contexts (use @Component for those needs).
@Directive({selector: '[red]'})
export class RedDec {
// ElementRef is always injectable and it wraps the element on which the
// directive was found by the compiler.
constructor(el: ElementRef, renderer: Renderer2) {
renderer.setStyle(el.nativeElement, 'color', 'red');
}
}
// Angular supports 2 basic types of directives:
// - Component - the basic building blocks of Angular apps. Backed by
// ShadowDom.(http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom/)
// - Directive - add behavior to existing elements.
@Component({
// The Selector prop tells Angular on which elements to instantiate this
// class. The syntax supported is a basic subset of CSS selectors, for example
// 'element', '[attr]', [attr=foo]', etc.
selector: 'hello-app',
// These are services that would be created if a class in the component's
// template tries to inject them.
viewProviders: [GreetingService],
// The template for the component.
// Expressions in the template (like {{greeting}}) are evaluated in the
// context of the HelloCmp class below.
template: `<div class="greeting">{{greeting}} <span red>world</span>!</div>
<button class="changeButton" (click)="changeGreeting()">change greeting</button>
<div (keydown)="onKeyDown($event)" class="sample-area" tabindex="0">{{lastKey}}</div><br>`
})
export class HelloCmp {
greeting: string;
lastKey: string = '(none)';
constructor(service: GreetingService) {
this.greeting = service.greeting;
}
changeGreeting(): void {
this.greeting = 'howdy';
}
onKeyDown(event: KeyboardEvent): void {
this.lastKey = String.fromCharCode(event.keyCode);
}
}

View File

@ -1,14 +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
*/
importScripts('angular/modules/playground/src/web_workers/worker-configure.js');
System.config({packages: {'angular/modules/playground/src/web_workers': {defaultExtension: 'js'}}});
System.import('./background_index.js')
.catch(error => console.error('error loading background', error));

View File

@ -1,38 +0,0 @@
load("//tools:defaults.bzl", "ng_module", "ts_devserver")
package(default_visibility = ["//modules/playground:__subpackages__"])
ng_module(
name = "message_broker",
srcs = glob(["**/*.ts"]),
tsconfig = "//modules/playground:tsconfig-build.json",
deps = [
"//packages/core",
"//packages/platform-webworker",
"//packages/platform-webworker-dynamic",
],
)
ts_devserver(
name = "devserver",
bootstrap = [
"@npm//:node_modules/systemjs/dist/system.js",
"//packages/zone.js/bundles:zone.umd.js",
"//packages/zone.js/bundles:long-stack-trace-zone.umd.js",
"@npm//:node_modules/reflect-metadata/Reflect.js",
],
entry_module = "angular/modules/playground/src/web_workers/message_broker/index",
port = 4200,
scripts = [
"@npm//:node_modules/tslib/tslib.js",
"//tools/rxjs:rxjs_umd_modules",
],
static_files = [
"index.html",
"loader.js",
"//modules/playground/src/web_workers:worker-config",
"//modules/playground:systemjs-config.js",
"//modules/playground:systemjs-rxjs-operators.js",
],
deps = [":message_broker"],
)

View File

@ -1,19 +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 {NgModule} from '@angular/core';
import {WorkerAppModule} from '@angular/platform-webworker';
import {platformWorkerAppDynamic} from '@angular/platform-webworker-dynamic';
import {App} from './index_common';
@NgModule({imports: [WorkerAppModule], bootstrap: [App], declarations: [App]})
export class ExampleModule {
}
platformWorkerAppDynamic().bootstrapModule(ExampleModule);

View File

@ -1,14 +0,0 @@
<!doctype html>
<html>
<title>Message Broker Example</title>
<body>
<app></app>
<input type="text" id="echo_input" />
<button type="button" id="send_echo">Send Echo</button>
<p id="echo_result"></p>
<p id="ui_result"></p>
<!--load location for ts_devserver-->
<script src="/app_bundle.js"></script>
</body>
</html>

View File

@ -1,32 +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 {PlatformRef} from '@angular/core';
import {bootstrapWorkerUi, ClientMessageBrokerFactory, FnArg, SerializerTypes, UiArguments} from '@angular/platform-webworker';
const ECHO_CHANNEL = 'ECHO';
function afterBootstrap(ref: PlatformRef) {
const brokerFactory: ClientMessageBrokerFactory = ref.injector.get(ClientMessageBrokerFactory);
const broker = brokerFactory.createMessageBroker(ECHO_CHANNEL, false);
document.getElementById('send_echo').addEventListener('click', (e) => {
const val = (<HTMLInputElement>document.getElementById('echo_input')).value;
// TODO(jteplitz602): Replace default constructors with real constructors
// once they're in the .d.ts file (#3926)
const fnArg = new FnArg(val);
const args = new UiArguments('echo', [fnArg]);
broker.runOnService(args, SerializerTypes.PRIMITIVE).then((echo_result: string) => {
document.getElementById('echo_result').innerHTML =
`<span class='response'>${echo_result}</span>`;
});
});
}
bootstrapWorkerUi('loader.js').then(afterBootstrap);

View File

@ -1,25 +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} from '@angular/core';
import {SerializerTypes, ServiceMessageBrokerFactory} from '@angular/platform-webworker';
const ECHO_CHANNEL = 'ECHO';
@Component({selector: 'app', template: '<h1>WebWorker MessageBroker Test</h1>'})
export class App {
constructor(private _serviceBrokerFactory: ServiceMessageBrokerFactory) {
const broker = _serviceBrokerFactory.createMessageBroker(ECHO_CHANNEL, false);
broker.registerMethod(
'echo', [SerializerTypes.PRIMITIVE], this._echo, SerializerTypes.PRIMITIVE);
}
private _echo(val: string) {
return new Promise((res) => res(val));
}
}

View File

@ -1,14 +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
*/
importScripts('angular/modules/playground/src/web_workers/worker-configure.js');
System.config({packages: {'angular/modules/playground/src/web_workers': {defaultExtension: 'js'}}});
System.import('./background_index.js')
.catch(error => console.error('error loading background', error));

View File

@ -1,41 +0,0 @@
load("//tools:defaults.bzl", "ng_module", "ts_devserver")
package(default_visibility = ["//modules/playground:__subpackages__"])
ng_module(
name = "router",
srcs = glob(["**/*.ts"]),
assets = ["app.html"],
tsconfig = "//modules/playground:tsconfig-build.json",
deps = [
"//packages/core",
"//packages/platform-webworker",
"//packages/platform-webworker-dynamic",
"//packages/router",
"@npm//rxjs",
],
)
ts_devserver(
name = "devserver",
bootstrap = [
"@npm//:node_modules/systemjs/dist/system.js",
"//packages/zone.js/bundles:zone.umd.js",
"//packages/zone.js/bundles:long-stack-trace-zone.umd.js",
"@npm//:node_modules/reflect-metadata/Reflect.js",
],
entry_module = "angular/modules/playground/src/web_workers/router/index",
port = 4200,
scripts = [
"@npm//:node_modules/tslib/tslib.js",
"//tools/rxjs:rxjs_umd_modules",
],
static_files = [
"index.html",
"loader.js",
"//modules/playground/src/web_workers:worker-config",
"//modules/playground:systemjs-config.js",
"//modules/playground:systemjs-rxjs-operators.js",
],
deps = [":router"],
)

View File

@ -1,11 +0,0 @@
<nav>
<ul>
<li class="start" routerLink="/">Start</li>
<li class="about" routerLink="/about">About</li>
<li class="contact" routerLink="/contact">Contact</li>
</ul>
</nav>
<main>
<router-outlet></router-outlet>
</main>

View File

@ -1,12 +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 {platformWorkerAppDynamic} from '@angular/platform-webworker-dynamic';
import {AppModule} from './index_common';
platformWorkerAppDynamic().bootstrapModule(AppModule);

View File

@ -1,12 +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} from '@angular/core';
@Component({selector: 'about', template: '<h1>About</h1>'})
export class About {
}

View File

@ -1,12 +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} from '@angular/core';
@Component({selector: 'contact', template: '<h1>Contact</h1>'})
export class Contact {
}

View File

@ -1,12 +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} from '@angular/core';
@Component({selector: 'start', template: '<h1>Start</h1>'})
export class Start {
}

View File

@ -1,10 +0,0 @@
<!doctype html>
<html>
<title>Web Worker Router Example</title>
<body>
<app></app>
<!--load location for ts_devserver-->
<script src="/app_bundle.js"></script>
</body>
</html>

View File

@ -1,11 +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 {bootstrapWorkerUi, WORKER_UI_LOCATION_PROVIDERS} from '@angular/platform-webworker';
bootstrapWorkerUi('loader.js', WORKER_UI_LOCATION_PROVIDERS);

View File

@ -1,35 +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, NgModule} from '@angular/core';
import {WORKER_APP_LOCATION_PROVIDERS, WorkerAppModule} from '@angular/platform-webworker';
import {RouterModule} from '@angular/router';
import {About} from './components/about';
import {Contact} from './components/contact';
import {Start} from './components/start';
@Component({selector: 'app', templateUrl: 'app.html'})
export class App {
}
export const ROUTES = [
{path: '', component: Start}, {path: 'contact', component: Contact},
{path: 'about', component: About}
];
@NgModule({
imports: [WorkerAppModule, RouterModule.forRoot(ROUTES, {useHash: true})],
providers: [
WORKER_APP_LOCATION_PROVIDERS,
],
bootstrap: [App],
declarations: [App, Start, Contact, About]
})
export class AppModule {
}

View File

@ -1,14 +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
*/
importScripts('angular/modules/playground/src/web_workers/worker-configure.js');
System.config({packages: {'angular/modules/playground/src/web_workers': {defaultExtension: 'js'}}});
System.import('./background_index.js')
.catch(error => console.error('error loading background', error));

View File

@ -1,41 +0,0 @@
load("//tools:defaults.bzl", "ng_module", "ts_devserver")
package(default_visibility = ["//modules/playground:__subpackages__"])
ng_module(
name = "todo",
srcs = glob(["**/*.ts"]),
assets = ["todo.html"],
tsconfig = "//modules/playground:tsconfig-build.json",
deps = [
"//packages/core",
"//packages/forms",
"//packages/platform-webworker",
"//packages/platform-webworker-dynamic",
],
)
ts_devserver(
name = "devserver",
bootstrap = [
"@npm//:node_modules/systemjs/dist/system.js",
"//packages/zone.js/bundles:zone.umd.js",
"//packages/zone.js/bundles:long-stack-trace-zone.umd.js",
"@npm//:node_modules/reflect-metadata/Reflect.js",
],
entry_module = "angular/modules/playground/src/web_workers/todo/index",
port = 4200,
scripts = [
"@npm//:node_modules/tslib/tslib.js",
"//tools/rxjs:rxjs_umd_modules",
],
static_files = [
"index.html",
"css/main.css",
"loader.js",
"//modules/playground/src/web_workers:worker-config",
"//modules/playground:systemjs-config.js",
"//modules/playground:systemjs-rxjs-operators.js",
],
deps = [":todo"],
)

View File

@ -1,20 +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 {NgModule} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {WorkerAppModule} from '@angular/platform-webworker';
import {platformWorkerAppDynamic} from '@angular/platform-webworker-dynamic';
import {TodoApp} from './index_common';
@NgModule({imports: [WorkerAppModule, FormsModule], bootstrap: [TodoApp], declarations: [TodoApp]})
export class ExampleModule {
}
platformWorkerAppDynamic().bootstrapModule(ExampleModule);

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.1 KiB

View File

@ -1,386 +0,0 @@
@charset "utf-8";
html,
body {
margin: 0;
padding: 0;
}
body {
font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;
line-height: 1.4em;
background: #eaeaea;
color: #4d4d4d;
width: 550px;
margin: 0 auto;
}
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;
-ms-appearance: none;
appearance: none;
}
button,
input[type="checkbox"] {
outline: none;
}
.hidden {
display: none;
}
.visible {
display: block !important;
}
#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;
-ms-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);
-ms-box-sizing: border-box;
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;
-ms-appearance: none;
appearance: none;
}
#todo-list li .toggle:after {
content: url('data:image/svg+xml;charset=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;charset=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;
word-break: break-word;
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;
visibility: hidden;
position: relative;
}
#clear-completed::after {
visibility: visible;
content: 'Clear completed';
position: absolute;
right: 0;
white-space: nowrap;
}
#clear-completed:hover::after {
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;
}
}

View File

@ -1,13 +0,0 @@
<!doctype html>
<html>
<title>Todo Angular - WebWorker</title>
<link rel="stylesheet" href="css/main.css" media="screen" title="no title" charset="utf-8">
<body>
<todo-app>
Loading...
</todo-app>
<!--load location for ts_devserver-->
<script src="/app_bundle.js"></script>
</body>
</html>

View File

@ -1,11 +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 {bootstrapWorkerUi} from '@angular/platform-webworker';
bootstrapWorkerUi('loader.js');

View File

@ -1,80 +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} from '@angular/core';
import {Store, Todo, TodoFactory} from './services/TodoStore';
@Component({selector: 'todo-app', viewProviders: [Store, TodoFactory], templateUrl: 'todo.html'})
export class TodoApp {
todoEdit: Todo = null;
inputValue: string;
hideActive: boolean = false;
hideCompleted: boolean = false;
isComplete: boolean = false;
constructor(public todoStore: Store<Todo>, public factory: TodoFactory) {}
enterTodo(): void {
this.addTodo(this.inputValue);
this.inputValue = '';
}
doneEditing($event: KeyboardEvent, todo: Todo): void {
const which = $event.keyCode;
if (which === 13) {
todo.title = todo.editTitle;
this.todoEdit = null;
} else if (which === 27) {
this.todoEdit = null;
todo.editTitle = todo.title;
}
}
editTodo(todo: Todo): void {
this.todoEdit = todo;
}
addTodo(newTitle: string): void {
this.todoStore.add(this.factory.create(newTitle, false));
}
completeMe(todo: Todo): void {
todo.completed = !todo.completed;
}
toggleCompleted(): void {
this.hideActive = !this.hideActive;
this.hideCompleted = false;
}
toggleActive(): void {
this.hideCompleted = !this.hideCompleted;
this.hideActive = false;
}
showAll(): void {
this.hideCompleted = false;
this.hideActive = false;
}
deleteMe(todo: Todo): void {
this.todoStore.remove(todo);
}
toggleAll($event: MouseEvent): void {
this.isComplete = !this.isComplete;
this.todoStore.list.forEach((todo: Todo) => {
todo.completed = this.isComplete;
});
}
clearCompleted(): void {
this.todoStore.removeBy((todo: Todo) => todo.completed);
}
}

View File

@ -1,10 +0,0 @@
<!doctype html>
<html>
<title>Todo Angular - WebWorker</title>
<link rel="stylesheet" href="css/main.css" media="screen" title="no title" charset="utf-8">
<body>
<todo-app>
Loading...
</todo-app>
</body>
</html>

View File

@ -1,14 +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
*/
importScripts('angular/modules/playground/src/web_workers/worker-configure.js');
System.config({packages: {'angular/modules/playground/src/web_workers': {defaultExtension: 'js'}}});
System.import('./background_index.js')
.catch(error => console.error('error loading background', error));

View File

@ -1,53 +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 {Injectable} from '@angular/core';
// base model for RecordStore
export class KeyModel {
constructor(public key: number) {}
}
export class Todo extends KeyModel {
editTitle: string;
constructor(key: number, public title: string, public completed: boolean) {
super(key);
this.editTitle = title;
}
}
@Injectable()
export class TodoFactory {
private _uid: number = 0;
nextUid(): number {
return ++this._uid;
}
create(title: string, isCompleted: boolean): Todo {
return new Todo(this.nextUid(), title, isCompleted);
}
}
// Store manages any generic item that inherits from KeyModel
@Injectable()
export class Store<T extends KeyModel> {
list: T[] = [];
add(record: T): void {
this.list.push(record);
}
remove(record: T): void {
this.removeBy((item) => item === record);
}
removeBy(callback: (record: T) => boolean): void {
this.list = this.list.filter((record) => !callback(record));
}
}

View File

@ -1,68 +0,0 @@
<section id="todoapp">
<header id="header">
<h1>todos</h1>
<input
id="new-todo"
placeholder="What needs to be done?"
[(ngModel)]="inputValue"
autofocus
#newtodo
(keyup.enter)="enterTodo()">
</header>
<section id="main">
<input id="toggle-all" type="checkbox" [checked]="isComplete" (click)="toggleAll($event)">
<label for="toggle-all">Mark all as complete</label>
<ul id="todo-list">
<li *ngFor="let todo of todoStore.list" [class.hidden]="hideActive && !todo.completed || hideCompleted && todo.completed">
<div class="view"
[class.hidden]="todoEdit == todo">
<input class="toggle" type="checkbox"
(click)="completeMe(todo)"
[checked]="todo.completed">
<label (dblclick)="editTodo(todo)">{{todo.title}}</label>
<button class="destroy" (click)="deleteMe(todo)"></button>
</div>
<div>
<input class="edit"
[class.visible]="todoEdit == todo"
[(ngModel)]="todo.editTitle"
(keyup)="doneEditing($event, todo)">
</div>
</li>
</ul>
</section>
<footer id="footer">
<span id="todo-count"></span>
<div [class.hidden]="true"></div>
<ul id="filters">
<li>
<a href="#/" [class.selected]="!hideActive && !hideCompleted" (click)="showAll()">All</a>
</li>
<li>
<a href="#/active" [class.selected]="hideCompleted" (click)="toggleActive()">Active</a>
</li>
<li>
<a href="#/completed" [class.selected]="hideActive" (click)="toggleCompleted()">Completed</a>
</li>
</ul>
<button id="clear-completed" (click)="clearCompleted()">Clear completed</button>
</footer>
</section>
<footer id="info">
<p>Double-click to edit a todo</p>
<p>Created by <a href="http://twitter.com/angularjs">The Angular Team</a></p>
</footer>

View File

@ -1,14 +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
*/
importScripts('npm/node_modules/reflect-metadata/Reflect.js');
importScripts('angular/packages/zone.js/bundles/zone.umd.js');
importScripts('angular/packages/zone.js/bundles/long-stack-trace-zone.umd.js');
importScripts('npm/node_modules/systemjs/dist/system.js');
importScripts('angular/modules/playground/systemjs-config.js');

View File

@ -21,8 +21,6 @@ const angularPackages = [
'http',
'platform-browser',
'platform-browser-dynamic',
'platform-webworker',
'platform-webworker-dynamic',
'router',
'upgrade',
'upgrade/static',

View File

@ -102,8 +102,6 @@ WELL_KNOWN_GLOBALS = {p: _global_name(p) for p in [
"@angular/core",
"@angular/platform-server/testing",
"@angular/platform-server",
"@angular/platform-webworker-dynamic",
"@angular/platform-webworker",
"@angular/common/testing",
"@angular/common",
"@angular/common/http/testing",

View File

@ -11,8 +11,7 @@ const path = require('path');
module.exports = {
baseDir: '../',
goldenFile: '../goldens/circular-deps/packages.json',
// The test should not capture deprecated packages such as `http`, or the `webworker` platform.
glob: `./!(http|platform-webworker|platform-webworker-dynamic)/**/*.ts`,
glob: `./**/*.ts`,
// Command that will be displayed if the golden needs to be updated.
approveCommand: 'yarn ts-circular-deps:approve',
resolveModule: resolveModule

View File

@ -178,8 +178,7 @@ function getScrollRestorationProperty(obj: any): PropertyDescriptor|undefined {
}
/**
* Provides an empty implementation of the viewport scroller. This will
* live in @angular/common as it will be used by both platform-server and platform-webworker.
* Provides an empty implementation of the viewport scroller.
*/
export class NullViewportScroller implements ViewportScroller {
/**

View File

@ -1,43 +0,0 @@
load("//tools:defaults.bzl", "ng_module", "ng_package", "ts_api_guardian_test_npm_package")
package(default_visibility = ["//visibility:public"])
ng_module(
name = "platform-webworker-dynamic",
srcs = glob(
[
"*.ts",
"src/**/*.ts",
],
),
deps = [
"//packages:types",
"//packages/common",
"//packages/compiler",
"//packages/core",
"//packages/platform-browser-dynamic",
],
)
ng_package(
name = "npm_package",
srcs = ["package.json"],
entry_point = ":index.ts",
tags = [
"release-with-framework",
],
# Do not add more to this list.
# Dependencies on the full npm_package cause long re-builds.
visibility = ["//integration:__pkg__"],
deps = [":platform-webworker-dynamic"],
)
ts_api_guardian_test_npm_package(
name = "platform-webworker-dynamic_api",
actualDir = "angular/packages/platform-webworker-dynamic/npm_package",
data = [
":npm_package",
"//goldens:public-api",
],
goldenDir = "angular/goldens/public-api/platform-webworker-dynamic",
)

View File

@ -1,14 +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
*/
// This file is not used to build this module. It is only used during editing
// by the TypeScript language service and during build for verification. `ngc`
// replaces this file with production index.ts when it rewrites private symbol
// names.
export * from './public_api';

View File

@ -1,29 +0,0 @@
{
"name": "@angular/platform-webworker-dynamic",
"version": "0.0.0-PLACEHOLDER",
"description": "Angular - library for using Angular in a web browser with web workers",
"author": "angular",
"license": "MIT",
"dependencies": {
"tslib": "^2.0.0"
},
"peerDependencies": {
"@angular/common": "0.0.0-PLACEHOLDER",
"@angular/core": "0.0.0-PLACEHOLDER",
"@angular/compiler": "0.0.0-PLACEHOLDER",
"@angular/platform-browser": "0.0.0-PLACEHOLDER",
"@angular/platform-webworker": "0.0.0-PLACEHOLDER"
},
"repository": {
"type": "git",
"url": "https://github.com/angular/angular.git",
"directory": "packages/platform-webworker-dynamic"
},
"ng-update": {
"packageGroup": "NG_UPDATE_PACKAGE_GROUP"
},
"sideEffects": false,
"publishConfig":{
"registry":"https://wombat-dressing-room.appspot.com"
}
}

View File

@ -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
*/
/**
* @module
* @description
* Entry point for all public APIs of this package.
*/
export * from './src/platform-webworker-dynamic';
// This file only reexports content of the `src` folder. Keep it that way.

View File

@ -1,30 +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 {ɵPLATFORM_WORKER_UI_ID as PLATFORM_WORKER_UI_ID} from '@angular/common';
import {ResourceLoader} from '@angular/compiler';
import {COMPILER_OPTIONS, createPlatformFactory, PLATFORM_ID, PlatformRef, StaticProvider} from '@angular/core';
import {ɵplatformCoreDynamic as platformCoreDynamic, ɵResourceLoaderImpl as ResourceLoaderImpl} from '@angular/platform-browser-dynamic';
export {VERSION} from './version';
/**
* @publicApi
* @deprecated platform-webworker is deprecated in Angular and will be removed in a future version
* of Angular
*/
export const platformWorkerAppDynamic =
createPlatformFactory(platformCoreDynamic, 'workerAppDynamic', [
{
provide: COMPILER_OPTIONS,
useValue: {providers: [{provide: ResourceLoader, useClass: ResourceLoaderImpl, deps: []}]},
multi: true
},
{provide: PLATFORM_ID, useValue: PLATFORM_WORKER_UI_ID}
]);

View File

@ -1,22 +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
*/
/**
* @module
* @description
* Entry point for all public APIs of the common package.
*/
import {Version} from '@angular/core';
/**
* @publicApi
* @deprecated platform-webworker is deprecated in Angular and will be removed in a future version
* of Angular
*/
export const VERSION = new Version('0.0.0-PLACEHOLDER');

View File

@ -1,49 +0,0 @@
load("//tools:defaults.bzl", "ng_module", "ng_package", "ts_api_guardian_test_npm_package")
package(default_visibility = ["//visibility:public"])
ng_module(
name = "platform-webworker",
srcs = glob(
[
"*.ts",
"src/**/*.ts",
],
),
# Disable building with strict compatibility as the platform-webworker package is
# deprecated and therefore it is not needed to make it compatible with --strict.
tsconfig = "//packages:tsconfig-build-no-strict",
deps = [
"//packages:types",
"//packages/common",
"//packages/compiler",
"//packages/core",
"//packages/platform-browser",
"@npm//rxjs",
],
)
ng_package(
name = "npm_package",
srcs = ["package.json"],
entry_point = ":index.ts",
tags = [
"release-with-framework",
],
# Do not add more to this list.
# Dependencies on the full npm_package cause long re-builds.
visibility = ["//integration:__pkg__"],
deps = [
":platform-webworker",
],
)
ts_api_guardian_test_npm_package(
name = "platform-webworker_api",
actualDir = "angular/packages/platform-webworker/npm_package",
data = [
":npm_package",
"//goldens:public-api",
],
goldenDir = "angular/goldens/public-api/platform-webworker",
)

View File

@ -1,2 +0,0 @@
**Deprecated** This package is deprecated and will be removed in a future version of Angular.
See [Angular deprecations policy](guide/deprecations).

View File

@ -1,14 +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
*/
// This file is not used to build this module. It is only used during editing
// by the TypeScript language service and during build for verification. `ngc`
// replaces this file with production index.ts when it rewrites private symbol
// names.
export * from './public_api';

View File

@ -1,27 +0,0 @@
{
"name": "@angular/platform-webworker",
"version": "0.0.0-PLACEHOLDER",
"description": "Angular - library for using Angular in a web browser with web workers",
"author": "angular",
"license": "MIT",
"dependencies": {
"tslib": "^2.0.0"
},
"peerDependencies": {
"@angular/common": "0.0.0-PLACEHOLDER",
"@angular/core": "0.0.0-PLACEHOLDER",
"@angular/platform-browser": "0.0.0-PLACEHOLDER"
},
"repository": {
"type": "git",
"url": "https://github.com/angular/angular.git",
"directory": "packages/platform-webworker"
},
"ng-update": {
"packageGroup": "NG_UPDATE_PACKAGE_GROUP"
},
"sideEffects": false,
"publishConfig":{
"registry":"https://wombat-dressing-room.appspot.com"
}
}

View File

@ -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
*/
/**
* @module
* @description
* Entry point for all public APIs of this package.
*/
export * from './src/platform-webworker';
// This file only reexports content of the `src` folder. Keep it that way.

View File

@ -1,39 +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 {PlatformRef, StaticProvider} from '@angular/core';
import {platformWorkerUi, WORKER_SCRIPT} from './worker_render';
export {VERSION} from './version';
export {ClientMessageBroker, ClientMessageBrokerFactory, FnArg, UiArguments} from './web_workers/shared/client_message_broker';
export {MessageBus, MessageBusSink, MessageBusSource} from './web_workers/shared/message_bus';
export {SerializerTypes} from './web_workers/shared/serializer';
export {ReceivedMessage, ServiceMessageBroker, ServiceMessageBrokerFactory} from './web_workers/shared/service_message_broker';
export {WORKER_UI_LOCATION_PROVIDERS} from './web_workers/ui/location_providers';
export {WORKER_APP_LOCATION_PROVIDERS} from './web_workers/worker/location_providers';
export {platformWorkerApp, WorkerAppModule} from './worker_app';
export {platformWorkerUi} from './worker_render';
/**
* Bootstraps the worker ui.
*
* @publicApi
* @deprecated platform-webworker is deprecated in Angular and will be removed in a future version
* of Angular
*/
export function bootstrapWorkerUi(
workerScriptUri: string, customProviders: StaticProvider[] = []): Promise<PlatformRef> {
// For now, just creates the worker ui platform...
const platform = platformWorkerUi([
{provide: WORKER_SCRIPT, useValue: workerScriptUri},
...customProviders,
]);
return Promise.resolve(platform);
}

View File

@ -1,22 +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
*/
/**
* @module
* @description
* Entry point for all public APIs of the common package.
*/
import {Version} from '@angular/core';
/**
* @publicApi
* @deprecated platform-webworker is deprecated in Angular and will be removed in a future version
* of Angular
*/
export const VERSION = new Version('0.0.0-PLACEHOLDER');

Some files were not shown because too many files have changed in this diff Show More