-
21 |
22 |
-
23 |
24 | 26 | 27 | 30 | 31 | 32 | 33 | 34 |35 | 36 |37 | 38 | 42 | 43 |44 | 45 |
46 |
8 | */
9 | export function getNodeEvents(preboot: PrebootRef, strategy: ListenStrategy): NodeEvent[] {
10 | let attributeName = strategy.attributeName || 'preboot-events';
11 | let elems = preboot.dom.getAllAppNodes('[' + attributeName + ']');
12 |
13 | // if no elements found, return empty array since no node events
14 | if (!elems) { return []; }
15 |
16 | // else loop through all the elems and add node events
17 | let nodeEvents = [];
18 | for (let elem of elems) {
19 | let events = elem.getAttribute(attributeName).split(',');
20 |
21 | for (let eventName of events) {
22 | nodeEvents.push({
23 | node: elem,
24 | eventName: eventName
25 | });
26 | }
27 | }
28 |
29 | return nodeEvents;
30 | }
31 |
--------------------------------------------------------------------------------
/modules/preboot/src/client/replay/replay_after_hydrate.ts:
--------------------------------------------------------------------------------
1 | import {PrebootRef} from '../../interfaces/preboot_ref';
2 | import {ReplayStrategy} from '../../interfaces/strategy';
3 | import {PrebootEvent} from '../../interfaces/event';
4 |
5 | /**
6 | * this replay strategy assumes that the client did not blow away
7 | * the server generated HTML and that the elements in memory for
8 | * preboot can be used to replay the events.
9 | *
10 | * any events that could not be replayed for whatever reason are returned.
11 | */
12 | export function replayEvents(preboot: PrebootRef, strategy: ReplayStrategy, events: PrebootEvent[]): PrebootEvent[] {
13 | let remainingEvents = [];
14 | events = events || [];
15 |
16 | for (let eventData of events) {
17 | let event = eventData.event;
18 | let node = eventData.node;
19 |
20 | // if we should check to see if the node exists in the DOM before dispatching
21 | // note: this can be expensive so this option is false by default
22 | if (strategy.checkIfExists && !preboot.dom.appContains(node)) {
23 | remainingEvents.push(eventData);
24 | } else {
25 | node.dispatchEvent(event);
26 | }
27 | }
28 |
29 | return remainingEvents;
30 | }
31 |
--------------------------------------------------------------------------------
/modules/preboot/src/server/utils.ts:
--------------------------------------------------------------------------------
1 | const FUNC_START = 'START_FUNCTION_HERE';
2 | const FUNC_STOP = 'STOP_FUNCTION_HERE';
3 |
4 | /**
5 | * Stringify an object and include functions
6 | */
7 | export function stringifyWithFunctions(obj: Object): String {
8 |
9 | // first stringify except mark off functions with markers
10 | let str = JSON.stringify(obj, function (key, value) {
11 |
12 | // if the value is a function, we want to wrap it with markers
13 | if (!!(value && value.constructor && value.call && value.apply)) {
14 | return FUNC_START + value.toString() + FUNC_STOP;
15 | } else {
16 | return value;
17 | }
18 | });
19 |
20 | // now we use the markers to replace function strings with actual functions
21 | let startFuncIdx = str.indexOf(FUNC_START);
22 | let stopFuncIdx, fn;
23 | while (startFuncIdx >= 0) {
24 | stopFuncIdx = str.indexOf(FUNC_STOP);
25 |
26 | // pull string out
27 | fn = str.substring(startFuncIdx + FUNC_START.length, stopFuncIdx);
28 | fn = fn.replace(/\\n/g, '\n');
29 |
30 | str = str.substring(0, startFuncIdx - 1) + fn + str.substring(stopFuncIdx + FUNC_STOP.length + 1);
31 | startFuncIdx = str.indexOf(FUNC_START);
32 | }
33 |
34 | return str;
35 | }
36 |
--------------------------------------------------------------------------------
/modules/preboot/src/client/listen/listen_by_selectors.ts:
--------------------------------------------------------------------------------
1 | import {PrebootRef} from '../../interfaces/preboot_ref';
2 | import {ListenStrategy} from '../../interfaces/strategy';
3 | import {NodeEvent} from '../../interfaces/event';
4 |
5 | /**
6 | * This listen strategy uses a list of selectors maped to events. For example:
7 | * {
8 | * 'input[type="text"],textarea': ['focusin', 'focusout'],
9 | * 'button': ['click']
10 | * }
11 | */
12 | export function getNodeEvents(preboot: PrebootRef, strategy: ListenStrategy): NodeEvent[] {
13 | let nodeEvents = [];
14 | let eventsBySelector = strategy.eventsBySelector || {};
15 | let selectors = Object.keys(eventsBySelector);
16 |
17 | // loop through selectors
18 | for (let selector of selectors) {
19 | let events = eventsBySelector[selector];
20 | let elems = preboot.dom.getAllAppNodes(selector);
21 |
22 | // if no elems, go to next iteration in for loop
23 | if (!elems) { continue; }
24 |
25 | // for each node and eventName combo, add a nodeEvent
26 | for (let elem of elems) {
27 | for (let eventName of events) {
28 | nodeEvents.push({
29 | node: elem,
30 | eventName: eventName
31 | });
32 | }
33 | }
34 | }
35 |
36 | return nodeEvents;
37 | }
38 |
--------------------------------------------------------------------------------
/modules/preboot/src/interfaces/preboot_options.ts:
--------------------------------------------------------------------------------
1 |
2 | interface Styles {
3 | className?: string;
4 | style?: Object;
5 | }
6 |
7 | interface FreezeStyles {
8 | overlay?: Styles;
9 | spinner?: Styles;
10 | }
11 |
12 | // interface simply for type checking options values passed into preboot
13 | export interface PrebootOptions {
14 | listen?: any; // can be string (name of strategy), object (custom) or array of either
15 | replay?: any; // same as listen
16 | freeze?: any; // same as listen
17 | appRoot?: string; // a selector for the root of the application
18 | pauseEvent?: string; // name of event that when dispatched on document will cause preboot to pause
19 | resumeEvent?: string; // when this event dispatched on document, preboot will resume
20 | completeEvent?: string; // instead of calling complete(), can just raise this event
21 | presets?: any; // each string represents a preset value
22 | uglify?: boolean; // if true, client code generated will be uglified
23 | buffer?: boolean; // if true, attempt to buffer client rendering to hidden div
24 | debug?: boolean; // if true, output console logs on the client with runtime info about preboot
25 | }
26 |
--------------------------------------------------------------------------------
/modules/preboot/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "preboot",
3 | "version": "1.0.2",
4 | "description": "Record and play back client side events",
5 | "main": "dist/server.js",
6 | "scripts": {
7 | "test": "echo \"Error: no test specified\" && exit 1"
8 | },
9 | "repository": {
10 | "type": "git",
11 | "url": "https://github.com/angular/universal"
12 | },
13 | "author": "Jeff Whelpley",
14 | "license": "Apache-2.0",
15 | "contributors": [
16 | "Tobias Bosch ",
17 | "PatrickJS ",
18 | "Jeff Whelpley "
19 | ],
20 | "bugs": {
21 | "url": "https://github.com/angular/universal/issues"
22 | },
23 | "homepage": "https://github.com/angular/universal/tree/master/modules/preboot",
24 | "devDependencies": {
25 | "gulp-jasmine": "^2.1.0",
26 | "jasmine": "^2.3.2",
27 | "jasmine-reporters": "^2.0.7",
28 | "jasmine-spec-reporter": "^2.4.0",
29 | "karma": "^0.13.11",
30 | "karma-jasmine": "^0.3.6"
31 | },
32 | "dependencies": {
33 | "browserify": "^11.2.0",
34 | "event-stream": "^3.3.2",
35 | "gulp": "^3.9.0",
36 | "gulp-insert": "^0.5.0",
37 | "gulp-rename": "^1.2.2",
38 | "gulp-uglify": "^1.4.2",
39 | "lodash": "^3.10.1",
40 | "q": "^1.4.1",
41 | "vinyl-buffer": "^1.0.0",
42 | "vinyl-source-stream": "^1.1.0"
43 | }
44 | }
45 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | .idea
5 | .vscode
6 | .DS_Store
7 | **/.DS_Store
8 |
9 | # Runtime data
10 | pids
11 | *.pid
12 | *.seed
13 |
14 | # Directory for instrumented libs generated by jscoverage/JSCover
15 | /lib-cov
16 |
17 | # Coverage directory used by tools like istanbul
18 | /coverage
19 |
20 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
21 | .grunt
22 |
23 | # Dependency directory
24 | # Commenting this out is preferred by some people, see
25 | # https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git-
26 | node_modules
27 | modules/preboot/node_modules
28 |
29 | # used for karma unit test coverage
30 | test/coverage
31 |
32 | # Users Environment Variables
33 | .lock-wscript
34 |
35 | # Server
36 | /dist/
37 | /modules/server/dist/
38 | # /modules/server/typings/
39 | !/modules/server/typings/_custom
40 | !/modules/server/typings/tsd.d.ts
41 |
42 | # Static files
43 |
44 | /bower_components/
45 | /web_modules/
46 |
47 | # Preboot
48 | /modules/preboot/node_modules
49 | /modules/preboot/dist
50 | # /modules/preboot/typings/
51 | !/modules/preboot/typings/_custom
52 | !/modules/preboot/typings/tsd.d.ts
53 |
54 | # inline ts compile
55 | modules/**/*.js
56 |
57 | # Typings
58 | /typings
59 | /modules/universal/client/typings
60 | /modules/universal/server/typings
61 | /tsd_typings
62 |
63 | /modules/universal/dist/
64 |
--------------------------------------------------------------------------------
/modules/preboot/test/client/listen/listen_by_selectors_spec.ts:
--------------------------------------------------------------------------------
1 | /// ",
13 | "PatrickJS ",
14 | "Jeff Whelpley "
15 | ],
16 | "scripts": {
17 | "build": "tsc || true",
18 | "prepublish": "npm run build"
19 | },
20 | "repository": {
21 | "type": "git",
22 | "url": "https://github.com/angular/universal"
23 | },
24 | "bugs": {
25 | "url": "https://github.com/angular/universal/issues"
26 | },
27 | "devDependencies": {
28 | "typescript": "^1.7.3"
29 | },
30 | "dependencies": {
31 | "css": "^2.2.1",
32 | "es6-shim": "^0.33.6",
33 | "parse5": "^1.5.0",
34 | "preboot": "^1.0.2",
35 | "angular2": "2.0.0-beta.0",
36 | "es6-promise": "^3.0.2",
37 | "reflect-metadata": "0.1.2",
38 | "rxjs": "5.0.0-beta.0",
39 | "zone.js": "0.5.10",
40 | "xhr2": "0.1.3"
41 | },
42 | "peerDependencies": {
43 | "rxjs": "5.0.0-beta.0",
44 | "angular2": "2.0.0-beta.0",
45 | "css": "*",
46 | "parse5": "^1.5.0"
47 | }
48 | }
49 |
--------------------------------------------------------------------------------
/modules/preboot/test/client/listen/listen_by_attributes_spec.ts:
--------------------------------------------------------------------------------
1 | /// = [];
28 |
29 | constructor() {
30 |
31 | }
32 |
33 | add(record: KeyModel): void { this.list.push(record); }
34 |
35 | remove(record: KeyModel): void { this._spliceOut(record); }
36 |
37 | removeBy(callback: any): void {
38 | var records = this.list.filter(callback);
39 |
40 | for (let i = 0; i < records.length; ++i) {
41 | let index = this.list.indexOf(records[i]);
42 | this.list.splice(index, 1);
43 | }
44 | }
45 |
46 | private _spliceOut(record: KeyModel) {
47 | var i = this._indexFor(record);
48 | if (i > -1) {
49 | return this.list.splice(i, 1)[0];
50 | }
51 | return null;
52 | }
53 |
54 | private _indexFor(record: KeyModel) { return this.list.indexOf(record); }
55 | }
56 |
--------------------------------------------------------------------------------
/examples/preboot/preboot.css:
--------------------------------------------------------------------------------
1 | /**
2 | *
3 | * This is a same CSS file for overlay and spinner. This can/should
4 | * be overriden/customized to suit your needs
5 | */
6 |
7 | .preboot-overlay {
8 | background: grey;
9 | opacity: .27;
10 | }
11 |
12 | @keyframes spin {
13 | to { transform: rotate(1turn); }
14 | }
15 |
16 | .preboot-spinner {
17 | position: relative;
18 | display: inline-block;
19 | width: 5em;
20 | height: 5em;
21 | margin: 0 .5em;
22 | font-size: 12px;
23 | text-indent: 999em;
24 | overflow: hidden;
25 | animation: spin 1s infinite steps(8);
26 | }
27 |
28 | .preboot-spinner.small {
29 | font-size: 6px;
30 | }
31 |
32 | .preboot-spinner.large {
33 | font-size: 24px;
34 | }
35 |
36 | .preboot-spinner:before,
37 | .preboot-spinner:after,
38 | .preboot-spinner > div:before,
39 | .preboot-spinner > div:after {
40 | content: '';
41 | position: absolute;
42 | top: 0;
43 | left: 2.25em; /* (container width - part width)/2 */
44 | width: .5em;
45 | height: 1.5em;
46 | border-radius: .2em;
47 | background: #eee;
48 | box-shadow: 0 3.5em #eee; /* container height - part height */
49 | transform-origin: 50% 2.5em; /* container height / 2 */
50 | }
51 |
52 | .preboot-spinner:before {
53 | background: #555;
54 | }
55 |
56 | .preboot-spinner:after {
57 | transform: rotate(-45deg);
58 | background: #777;
59 | }
60 |
61 | .preboot-spinner > div:before {
62 | transform: rotate(-90deg);
63 | background: #999;
64 | }
65 |
66 | .preboot-spinner > div:after {
67 | transform: rotate(-135deg);
68 | background: #bbb;
69 | }
70 |
--------------------------------------------------------------------------------
/modules/universal/server/src/stringifyElement.ts:
--------------------------------------------------------------------------------
1 | // dom closure
2 | import {Parse5DomAdapter} from 'angular2/src/platform/server/parse5_adapter';
3 | Parse5DomAdapter.makeCurrent();
4 |
5 | import {ListWrapper, MapWrapper} from 'angular2/src/facade/collection';
6 | import {DOM} from 'angular2/src/platform/dom/dom_adapter';
7 | import {isPresent, isString, StringWrapper} from 'angular2/src/facade/lang';
8 |
9 | var _singleTagWhitelist = ['br', 'hr', 'input'];
10 | export function stringifyElement(el): string {
11 | var result = '';
12 | if (DOM.isElementNode(el)) {
13 | var tagName = DOM.tagName(el).toLowerCase();
14 | // Opening tag
15 | result += `<${tagName}`;
16 | // Attributes in an ordered way
17 | var attributeMap = DOM.attributeMap(el);
18 | var keys = [];
19 | attributeMap.forEach((v, k) => { keys.push(k); });
20 | keys.sort();
21 | for (let i = 0; i < keys.length; i++) {
22 | var key = keys[i];
23 | var attValue = attributeMap.get(key);
24 | if (!isString(attValue)) {
25 | result += ` ${key}`;
26 | } else {
27 | result += ` ${key}="${attValue}"`;
28 | }
29 | }
30 | result += '>';
31 | // Children
32 | var children = DOM.childNodes(DOM.templateAwareRoot(el));
33 | for (let j = 0; j < children.length; j++) {
34 | result += stringifyElement(children[j]);
35 | }
36 | // Closing tag
37 | if (!ListWrapper.contains(_singleTagWhitelist, tagName)) {
38 | result += ``;
39 | }
40 | } else if (DOM.isCommentNode(el)) {
41 | result += ``;
42 | } else {
43 | result += DOM.getText(el);
44 | }
45 | return result;
46 | }
47 |
--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
1 | language: node_js
2 | node_js:
3 | - '0.12'
4 | - '4'
5 |
6 | cache:
7 | directories:
8 | - node_modules
9 | - bower_components
10 | - angular/node_modules
11 | - angular/bower_components
12 | - web_modules
13 | - tsd_typings
14 |
15 | notifications:
16 | webhooks:
17 | urls:
18 | - https://webhooks.gitter.im/e/8953131954d5e41f649b
19 | on_success: always # options: [always|never|change] default: always
20 | on_failure: always # options: [always|never|change] default: always
21 | on_start: false # default: false
22 | slack:
23 | secure: EP4MzZ8JMyNQJ4S3cd5LEPWSMjC7ZRdzt3veelDiOeorJ6GwZfCDHncR+4BahDzQAuqyE/yNpZqaLbwRWloDi15qIUsm09vgl/1IyNky1Sqc6lEknhzIXpWSalo4/T9ZP8w870EoDvM/UO+LCV99R3wS8Nm9o99eLoWVb2HIUu0=
24 |
25 | env:
26 | global:
27 | - SAUCE_ACCESS_KEY=''
28 | # Token for tsd to increase github rate limit
29 | # See https://github.com/DefinitelyTyped/tsd#tsdrc
30 | # This does not use http://docs.travis-ci.com/user/environment-variables/#Secure-Variables
31 | # because those are not visible for pull requests, and those should also be reliable.
32 | # This SSO token belongs to github account angular-github-ratelimit-token which has no access
33 | # (password is in Valentine)
34 | - TSDRC='{"token":"ef474500309daea53d5991b3079159a29520a40b"}'
35 | # GITHUB_TOKEN_ANGULAR
36 | - secure: "fq/U7VDMWO8O8SnAQkdbkoSe2X92PVqg4d044HmRYVmcf6YbO48+xeGJ8yOk0pCBwl3ISO4Q2ot0x546kxfiYBuHkZetlngZxZCtQiFT9kyId8ZKcYdXaIW9OVdw3Gh3tQyUwDucfkVhqcs52D6NZjyE2aWZ4/d1V4kWRO/LMgo="
37 |
38 | before_install:
39 | - echo ${TSDRC} > .tsdrc
40 | # - npm install -g webpack
41 | - npm install -g tsd
42 |
43 | before_script:
44 | - npm install -g gulp
45 |
46 | script:
47 | - npm run ci
48 |
--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
1 | var SERVER_IP = '127.0.0.1';
2 |
3 | var port = process.env.PORT || 3000;
4 | // var ssl = process.env.SSLPORT || 4000;
5 |
6 | // Module dependencies
7 | var http = require('http');
8 | // var https = require('https');
9 |
10 | /*
11 | var options = {
12 | key: fs.readFileSync('/private/etc/apache2/ssl/ssl.key'),
13 | cert: fs.readFileSync('/private/etc/apache2/ssl/ssl.crt')
14 | };
15 | */
16 |
17 | var server = require('./dist/examples/app/server/server')(__dirname);
18 |
19 | // Start server
20 | module.exports.Server = http.createServer(server).listen(port, SERVER_IP, function() {
21 | console.log('Listening on port: ' + port);
22 | // for smoke testing
23 | // smokeTest();
24 | });
25 | /*
26 | https.createServer(options, server).listen(ssl, function() {
27 | console.log('Listening on port: ' + ssl + ' in ' + process.env.NODE_ENV);
28 | });
29 | */
30 |
31 |
32 | function smokeTest() {
33 | var req = http.get({
34 | host: 'localhost',
35 | port: 3000,
36 | path: '/?server=true&client=false&preboot=false&bootstrap=false',
37 | }, function(res) {
38 | // console.log('STATUS: ' + res.statusCode);
39 | // console.log('HEADERS: ' + JSON.stringify(res.headers, null, 2));
40 |
41 | // Buffer the body entirely for processing as a whole.
42 | var bodyChunks = [];
43 | res.
44 | on('data', function(chunk) {
45 | // You can process streamed parts here...
46 | bodyChunks.push(chunk);
47 | }).
48 | on('end', function() {
49 | var body = Buffer.concat(bodyChunks);
50 | // console.log('GOOD' /*, body.toString()*/ );
51 | // ...and/or process the entire body here.
52 | })
53 | });
54 |
55 | req.on('error', function(e) {
56 | console.error('ERROR: ' + e.message);
57 | });
58 | }
59 |
--------------------------------------------------------------------------------
/modules/universal/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "es5",
4 | "module": "commonjs",
5 | "declaration": true,
6 | "noImplicitAny": false,
7 | "removeComments": false,
8 | "noLib": false,
9 | "emitDecoratorMetadata": true,
10 | "experimentalDecorators": true,
11 | "sourceMap": true,
12 | "listFiles": false,
13 | "outDir": "dist"
14 | },
15 | "exclude": [
16 | "client/test",
17 | "server/test",
18 | "node_modules"
19 | ],
20 | "files": [
21 | "../../tsd_typings/tsd.d.ts",
22 | "../../custom_typings/_custom.d.ts",
23 | "universal.d.ts",
24 | "server/index.ts",
25 | "server/server.ts",
26 | "server/src/express/engine.ts",
27 | "server/src/directives/server_form.ts",
28 | "server/src/http/server_http.ts",
29 | "server/src/router/server_router.ts",
30 | "server/src/render/server_dom_renderer.ts",
31 | "server/src/ng_scripts.ts",
32 | "server/src/helper.ts",
33 | "server/src/render.ts",
34 | "server/src/server_patch.ts",
35 | "server/src/stringifyElement.ts",
36 | "server/test/router_server_spec.ts",
37 | "client/index.ts",
38 | "client/client.ts",
39 | "client/src/ng_preload_cache.ts",
40 | "client/src/bootstrap.ts"
41 | ],
42 | "formatCodeOptions": {
43 | "indentSize": 2,
44 | "tabSize": 2,
45 | "newLineCharacter": "\r\n",
46 | "convertTabsToSpaces": true,
47 | "insertSpaceAfterCommaDelimiter": true,
48 | "insertSpaceAfterSemicolonInForStatements": true,
49 | "insertSpaceBeforeAndAfterBinaryOperators": true,
50 | "insertSpaceAfterKeywordsInControlFlowStatements": true,
51 | "insertSpaceAfterFunctionKeywordForAnonymousFunctions": true,
52 | "insertSpaceAfterOpeningAndBeforeClosingNonemptyParenthesis": false,
53 | "placeOpenBraceOnNewLineForFunctions": false,
54 | "placeOpenBraceOnNewLineForControlBlocks": false
55 | }
56 | }
57 |
--------------------------------------------------------------------------------
/protractor.conf.js:
--------------------------------------------------------------------------------
1 |
2 | exports.config = {
3 | baseUrl: 'http://localhost:3000',
4 |
5 | specs: [
6 | 'test/*.e2e.js'
7 | ],
8 |
9 | allScriptsTimeout: 11000,
10 |
11 | framework: 'jasmine2',
12 |
13 | jasmineNodeOpts: {
14 | defaultTimeoutInterval: 60000,
15 | showTiming: true,
16 | print: function(){} // remove the dots!!
17 | },
18 |
19 | capabilities: {
20 | browserName: 'chrome',
21 | chromeOptions: {
22 | //Important for benchpress to get timeline data from the browser
23 | 'args': ['--js-flags=--expose-gc'],
24 | 'perfLoggingPrefs': {
25 | 'traceCategories': 'blink.console,disabled-by-default-devtools.timeline'
26 | }
27 | },
28 | loggingPrefs: {
29 | performance: 'ALL'
30 | }
31 | },
32 |
33 | // https://github.com/mllrsohn/gulp-protractor#protractor-webdriver
34 | seleniumServerJar: './node_modules/protractor/selenium/selenium-server-standalone-2.47.1.jar',
35 | //seleniumAddress: 'http://localhost:4444/wd/hub',
36 |
37 | onPrepare: function() {
38 | browser.manage().deleteAllCookies();
39 | browser.ignoreSynchronization = true;
40 |
41 | var SpecReporter = require('jasmine-spec-reporter');
42 | jasmine.getEnv().addReporter(new SpecReporter({
43 | displayStacktrace:'none',
44 | displaySpecDuration: true,
45 | verbose: 1,
46 | showStack: true,
47 | color: true
48 | }));
49 |
50 | /*
51 | // open a new browser for every benchmark
52 | var originalBrowser = browser;
53 | var _tmpBrowser;
54 | beforeEach(function() {
55 | global.browser = originalBrowser.forkNewDriverInstance();
56 | global.element = global.browser.element;
57 | global.$ = global.browser.$;
58 | global.$$ = global.browser.$$;
59 | global.browser.ignoreSynchronization = true;
60 | });
61 | afterEach(function() {
62 | global.browser.quit();
63 | global.browser = originalBrowser;
64 | });
65 | */
66 | }
67 |
68 | };
69 |
--------------------------------------------------------------------------------
/examples/app/universal/todo/todo.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
15 |
16 |
17 |
18 |
19 |
20 |
49 |
50 |
66 |
67 |
68 |
69 |
73 |
--------------------------------------------------------------------------------
/modules/universal/server/src/helper.ts:
--------------------------------------------------------------------------------
1 | export function escapeRegExp(str): string {
2 | return str.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, '\\$&');
3 | }
4 |
5 | export function stringify(obj, replacer = null, spaces = 2): string {
6 | return JSON.stringify(obj, replacer, spaces);
7 | }
8 |
9 | export function cssHyphenate(propertyName: string): string {
10 | return propertyName.replace(/([A-Z])/g, '-$1')
11 | .replace(/^ms-/, '-ms-') // Internet Explorer vendor prefix.
12 | .toLowerCase();
13 | }
14 |
15 | export function showDebug(options = {}): string {
16 | var info = '\n';
17 | for (var prop in options) {
18 | if (prop && options[prop]) {
19 | info += '' +
20 | ' content
52 | /<([^\s\>]+)[^>]*>([\s\S]*?)<\/\1>/
53 | */
54 |
55 | let regExpSelect = `<${ escapeRegExp(selector) }[^>]*>([\\s\\S]*?)<\/${ escapeRegExp(selector) }>`;
56 | return new RegExp(regExpSelect);
57 | }
58 |
59 | export function arrayFlattenTree(children: any[], arr: any[]): any[] {
60 | for (let child of children) {
61 | arr.push(child.res);
62 | arrayFlattenTree(child.children, arr);
63 | }
64 | return arr
65 | }
66 |
67 |
--------------------------------------------------------------------------------
/modules/preboot/src/client/freeze/freeze_with_spinner.ts:
--------------------------------------------------------------------------------
1 | import {PrebootRef} from '../../interfaces/preboot_ref';
2 | import {PrebootOptions} from '../../interfaces/preboot_options';
3 |
4 | // overlay and spinner nodes stored in memory in between prep and cleanup
5 | export let state = {
6 | overlay: null,
7 | spinner: null
8 | };
9 |
10 | /**
11 | * Clean up the freeze elements from the DOM
12 | */
13 | export function cleanup(preboot: PrebootRef) {
14 | preboot.dom.removeNode(state.overlay);
15 | preboot.dom.removeNode(state.spinner);
16 |
17 | state.overlay = null;
18 | state.spinner = null;
19 | }
20 |
21 | /**
22 | * Prepare for freeze by adding elements to the DOM and adding an event handler
23 | */
24 | export function prep(preboot: PrebootRef, opts: PrebootOptions) {
25 | let freezeOpts = opts.freeze || {};
26 | let freezeStyles = freezeOpts.styles || {};
27 | let overlayStyles = freezeStyles.overlay || {};
28 | let spinnerStyles = freezeStyles.spinner || {};
29 |
30 | // add the overlay and spinner to the end of the body
31 | state.overlay = preboot.dom.addNodeToBody('div', overlayStyles.className, overlayStyles.style);
32 | state.spinner = preboot.dom.addNodeToBody('div', spinnerStyles.className, spinnerStyles.style);
33 |
34 | // when a freeze event occurs, show the overlay and spinner
35 | preboot.dom.on(freezeOpts.eventName, function () {
36 |
37 | // if there is an active node, position spinner on top of it and blur the focus
38 | let activeNode = preboot.activeNode;
39 | if (activeNode) {
40 | state.spinner.style.top = activeNode.offsetTop;
41 | state.spinner.style.left = activeNode.offsetLeft;
42 |
43 | if (freezeOpts.doBlur) {
44 | activeNode.blur();
45 | }
46 | }
47 |
48 | // display the overlay and spinner
49 | state.overlay.style.display = 'block';
50 | state.spinner.style.display = 'block';
51 |
52 | // preboot should end in under 5 seconds, but if it doesn't unfreeze just in case
53 | setTimeout(() => cleanup(preboot), freezeOpts.timeout);
54 | });
55 | }
56 |
--------------------------------------------------------------------------------
/modules/preboot/src/client/log.ts:
--------------------------------------------------------------------------------
1 | import {PrebootOptions} from '../interfaces/preboot_options';
2 | import {PrebootEvent} from '../interfaces/event';
3 | import {Element} from '../interfaces/element';
4 |
5 | function logOptions(opts: PrebootOptions) {
6 | console.log('preboot options are:');
7 | console.log(opts);
8 | }
9 |
10 | function logEvents(events: PrebootEvent[]) {
11 | console.log('preboot events captured are:');
12 | console.log(events);
13 | }
14 |
15 | function replaySuccess(serverNode: Element, clientNode: Element, event: any) {
16 | console.log('replaying:');
17 | console.log({
18 | serverNode: serverNode,
19 | clientNode: clientNode,
20 | event: event
21 | });
22 | }
23 |
24 | function missingClientNode(serverNode: Element) {
25 | console.log('preboot could not find client node for:');
26 | console.log(serverNode);
27 | }
28 |
29 | function remainingEvents(events: PrebootEvent[]) {
30 | if (events && events.length) {
31 | console.log('the following events were not replayed:');
32 | console.log(events);
33 | }
34 | }
35 |
36 | function noRefocus(serverNode: Element) {
37 | console.log('Could not find node on client to match server node for refocus:');
38 | console.log(serverNode);
39 | }
40 |
41 | let logMap = {
42 | '1': logOptions,
43 | '2': logEvents,
44 | '3': replaySuccess,
45 | '4': missingClientNode,
46 | '5': remainingEvents,
47 | '6': noRefocus
48 | };
49 |
50 | /**
51 | * Idea here is simple. If debugging turned on and this module exists, we
52 | * log various things that happen in preboot. The calling code only references
53 | * a number (keys in logMap) to a handling function. By doing this, we are
54 | * able to cut down on the amount of logging code in preboot when no in debug mode.
55 | */
56 | export function log(...args) {
57 | if (!args.length) { return; }
58 |
59 | let id = args[0] + '';
60 | let fn = logMap[id];
61 |
62 | if (fn) {
63 | fn(...args.slice(1));
64 | } else {
65 | console.log('log: ' + JSON.stringify(args));
66 | }
67 | }
68 |
--------------------------------------------------------------------------------
/modules/preboot/test/client/listen/listen_by_event_bindings_spec.ts:
--------------------------------------------------------------------------------
1 | ///
todos
7 | 14 |' +
21 | `${ prop } = ${ stringify(options[prop]) }` +
22 | '';
23 | }
24 | }
25 | return info;
26 | }
27 |
28 | export function stringToBoolean(txt) {
29 | if (typeof txt !== 'string') { return txt; }
30 | switch (txt.toLowerCase()) {
31 | case'false': case'\'false\'': case'"false"': case'0': case'no': return false;
32 | case'true': case'\'true\'': case'"true"': case'1': case'yes': return true;
33 | default: return txt;
34 | }
35 | }
36 |
37 | export function queryParamsToBoolean(query) {
38 | var obj = {};
39 | for (let prop in query) {
40 | if (query.hasOwnProperty(prop)) {
41 | obj[prop] = stringToBoolean(query[prop]);
42 | }
43 | }
44 | return obj;
45 | }
46 |
47 |
48 | export function selectorRegExpFactory(selector: string): RegExp {
49 | /*
50 | $1 $2 $3
51 |
7 | //
8 | const ngEventPattern = /^(on\-.*)|(\(.*\))$/;
9 |
10 | // state for this module just includes the nodeEvents (exported for testing purposes)
11 | export let state = { nodeEvents: [] };
12 |
13 | /**
14 | * This is from Crockford to walk the DOM (http://whlp.ly/1Ii6YbR).
15 | * Recursively walk DOM tree and execute input param function at
16 | * each node.
17 | */
18 | export function walkDOM(node: any, func: Function) {
19 | if (!node) { return; }
20 |
21 | func(node);
22 | node = node.firstChild;
23 | while (node) {
24 | walkDOM(node, func);
25 | node = node.nextSibling;
26 | }
27 | }
28 |
29 | /**
30 | * This is function called at each node while walking DOM.
31 | * Will add node event if events defined on element.
32 | */
33 | export function addNodeEvents(node: any) {
34 | let attrs = node.attributes;
35 |
36 | // if no attributes, return without doing anything
37 | if (!attrs) { return; }
38 |
39 | // otherwise loop through attributes to try and find an Angular 2 event binding
40 | for (let attr of attrs) {
41 | let name = attr.name;
42 |
43 | // if attribute name is an Angular 2 event binding
44 | if (ngEventPattern.test(name)) {
45 |
46 | // extract event name from the () or on- (TODO: replace this w regex)
47 | name = name.charAt(0) === '(' ?
48 | name.substring(1, name.length - 1) : // remove parenthesis
49 | name.substring(3); // remove on-
50 |
51 | state.nodeEvents.push({
52 | node: node,
53 | eventName: name
54 | });
55 | }
56 | }
57 | }
58 |
59 | /**
60 | * This listen strategy will look for a specific attribute which contains all the elements
61 | * that a given element is listening to.
62 | */
63 | export function getNodeEvents(preboot: PrebootRef, strategy: ListenStrategy): NodeEvent[] {
64 | state.nodeEvents = [];
65 | walkDOM(preboot.dom.state.body, addNodeEvents);
66 | return state.nodeEvents;
67 | }
68 |
--------------------------------------------------------------------------------
/modules/preboot/src/client/buffer_manager.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * The purpose of this module is to manage the buffering of client rendered
3 | * HTML to a hidden div. After the client is fully bootstrapped, this module
4 | * would then be used to switch the hidden client div and the visible server div.
5 | * Note that this technique would only work if the app root is somewhere within
6 | * the body tag in the HTML document.
7 | */
8 | import {PrebootRef} from '../interfaces/preboot_ref';
9 |
10 | // expose state for testing purposes
11 | export let state = { switched: false };
12 |
13 | /**
14 | * Create a second div that will be the client root for an app
15 | */
16 | export function prep(preboot: PrebootRef) {
17 |
18 | // server root is the app root when we get started
19 | let serverRoot = preboot.dom.state.appRoot;
20 |
21 | // client root is going to be a shallow clone of the server root
22 | let clientRoot = serverRoot.cloneNode(false);
23 |
24 | // client in the DOM, but not displayed until time for switch
25 | clientRoot.style.display = 'none';
26 |
27 | // insert the client root right before the server root
28 | serverRoot.parentNode.insertBefore(clientRoot, serverRoot);
29 |
30 | // update the dom manager to store the server and client roots (first param is appRoot)
31 | preboot.dom.updateRoots(serverRoot, serverRoot, clientRoot);
32 | }
33 |
34 | /**
35 | * We want to simultaneously remove the server node from the DOM
36 | * and display the client node
37 | */
38 | export function switchBuffer(preboot: PrebootRef) {
39 | let domState = preboot.dom.state;
40 |
41 | // get refs to the roots
42 | let clientRoot = domState.clientRoot || domState.appRoot;
43 | let serverRoot = domState.serverRoot || domState.appRoot;
44 |
45 | // don't do anything if already switched
46 | if (state.switched) { return; }
47 |
48 | // remove the server root if not same as client and not the body
49 | if (serverRoot !== clientRoot && serverRoot.nodeName !== 'BODY') {
50 | preboot.dom.removeNode(serverRoot);
51 | }
52 |
53 | // display the client
54 | clientRoot.style.display = 'block';
55 |
56 | // update the roots; first param is the new appRoot; serverRoot now null
57 | preboot.dom.updateRoots(clientRoot, null, clientRoot);
58 |
59 | // finally mark state as switched
60 | state.switched = true;
61 | }
62 |
--------------------------------------------------------------------------------
/examples/app/server/api.ts:
--------------------------------------------------------------------------------
1 | /// Object).assign({
4 | start: true,
5 | appRoot: 'app', // selector for root element
6 | replay: 'rerender', // rerender replay strategy
7 | buffer: true, // client app will write to hidden div until bootstrap complete
8 | debug: false,
9 | uglify: true,
10 | presets: ['keyPress', 'buttonPress', 'focus']
11 | }, config || {});
12 | }
13 |
14 | export function getPrebootCSS(): string {
15 | return `
16 | .preboot-overlay {
17 | background: grey;
18 | opacity: .27;
19 | }
20 |
21 | @keyframes spin {
22 | to { transform: rotate(1turn); }
23 | }
24 |
25 | .preboot-spinner {
26 | position: relative;
27 | display: inline-block;
28 | width: 5em;
29 | height: 5em;
30 | margin: 0 .5em;
31 | font-size: 12px;
32 | text-indent: 999em;
33 | overflow: hidden;
34 | animation: spin 1s infinite steps(8);
35 | }
36 |
37 | .preboot-spinner.small {
38 | font-size: 6px;
39 | }
40 |
41 | .preboot-spinner.large {
42 | font-size: 24px;
43 | }
44 |
45 | .preboot-spinner:before,
46 | .preboot-spinner:after,
47 | .preboot-spinner > div:before,
48 | .preboot-spinner > div:after {
49 | content: '';
50 | position: absolute;
51 | top: 0;
52 | left: 2.25em; /* (container width - part width)/2 */
53 | width: .5em;
54 | height: 1.5em;
55 | border-radius: .2em;
56 | background: #eee;
57 | box-shadow: 0 3.5em #eee; /* container height - part height */
58 | transform-origin: 50% 2.5em; /* container height / 2 */
59 | }
60 |
61 | .preboot-spinner:before {
62 | background: #555;
63 | }
64 |
65 | .preboot-spinner:after {
66 | transform: rotate(-45deg);
67 | background: #777;
68 | }
69 |
70 | .preboot-spinner > div:before {
71 | transform: rotate(-90deg);
72 | background: #999;
73 | }
74 |
75 | .preboot-spinner > div:after {
76 | transform: rotate(-135deg);
77 | background: #bbb;
78 | }
79 | `
80 | }
81 |
82 |
83 | export function createPrebootHTML(code: string, config?: any): string {
84 | let html = '';
85 |
86 | html += `
87 |
90 | `;
91 |
92 | html += `
93 |
96 | `;
97 |
98 | if (config && config.start === true) {
99 | html += '';
100 | }
101 |
102 | return html;
103 | }
104 |
--------------------------------------------------------------------------------
/modules/universal/README.md:
--------------------------------------------------------------------------------
1 | 
2 |
3 | # Angular 2 Universal
4 | > Universal (isomorphic) JavaScript support for Angular 2
5 |
6 | # Table of Contents
7 | * [Modules](#modules)
8 | * [Universal](#universal)
9 | * [preboot.js](#prebootjs)
10 | * [Best Practices](#best-practices)
11 | * [What's in a name?](#whats-in-a-name)
12 | * [License](#license)
13 |
14 | # Modules
15 |
16 | ## Universal
17 | > Manage your application lifecycle and serialize changes while on the server to be sent to the client
18 |
19 | ### Documentation
20 | [Design Doc](https://docs.google.com/document/d/1q6g9UlmEZDXgrkY88AJZ6MUrUxcnwhBGS0EXbVlYicY)
21 |
22 | ### Videos
23 | Full Stack Angular 2 - AngularConnect, Oct 2015
24 | [](https://www.youtube.com/watch?v=MtoHFDfi8FM)
25 |
26 | Angular 2 Server Rendering - Angular U, July 2015
27 | [](http://www.youtube.com/watch?v=0wvZ7gakqV4)
28 |
29 | ## preboot.js
30 | > Control server-rendered page and transfer state before client-side web app loads to the client-side-app.
31 |
32 | # Best Practices
33 | > When building Universal components in Angular 2 there are a few things to keep in mind
34 |
35 | * Know the difference between attributes and properties in relation to the DOM
36 | * Don't manipulate the `nativeElement` directly. Use the `Renderer`
37 | ```typescript
38 | constructor(element: ElementRef, renderer: Renderer) {
39 | renderer.setElementStyle(element, 'fontSize', 'x-large');
40 | }
41 | ```
42 | * Don't use any of the browser types provided in the global namespace such as `navigator` or `document`. Anything outside of Angular will not be detected when serializing your application into html
43 | * Keep your directives stateless as much as possible. For stateful directives you may need to provide an attribute that reflects the corresponding property with an initial string value such as `url` in `img` tag. For our native `![]()
` element the `src` attribute is reflected as the `src` property of the element type `HTMLImageElement`.
44 |
45 | # What's in a name?
46 | We believe that using the word "universal" is correct when referring to a JavaScript Application that runs in more environments than the browser. (inspired by [Universal JavaScript](https://medium.com/@mjackson/universal-javascript-4761051b7ae9))
47 |
48 | # License
49 | [Apache-2.0](/LICENSE)
50 |
--------------------------------------------------------------------------------
/examples/preboot/preboot_example.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
33 |
36 |
70 |
71 |
72 |
--------------------------------------------------------------------------------
/modules/universal/server/src/router/server_router.ts:
--------------------------------------------------------------------------------
1 | import * as nodeUrl from 'url';
2 | import {Injectable, Inject, provide} from 'angular2/core';
3 | import {LocationStrategy} from 'angular2/router';
4 | import {MockLocationStrategy} from 'angular2/src/mock/mock_location_strategy';
5 | import {BASE_URL} from '../http/server_http';
6 |
7 | // TODO: see https://github.com/angular/universal/issues/60#issuecomment-130463593
8 | class MockServerHistory implements History {
9 | length: number;
10 | state: any;
11 | constructor () {/*TODO*/}
12 | back(distance?: any): void {/*TODO*/}
13 | forward(distance?: any): void {/*TODO*/}
14 | go(delta?: any): void {/*TODO*/}
15 | pushState(statedata: any, title?: string, url?: string): void {/*TODO*/}
16 | replaceState(statedata: any, title?: string, url?: string): void {/*TODO*/}
17 | }
18 |
19 | class MockServerLocation implements Location {
20 | hash: string;
21 | host: string;
22 | hostname: string;
23 | href: string;
24 | origin: string;
25 | pathname: string;
26 | port: string;
27 | protocol: string;
28 | search: string;
29 | constructor () {/*TODO*/}
30 | assign(url: string): void {
31 | var parsed = nodeUrl.parse(url);
32 | this.hash = parsed.hash;
33 | this.host = parsed.host;
34 | this.hostname = parsed.hostname;
35 | this.href = parsed.href;
36 | this.pathname = parsed.pathname;
37 | this.port = parsed.port;
38 | this.protocol = parsed.protocol;
39 | this.search = parsed.search;
40 | this.origin = parsed.protocol + '//' + parsed.hostname + ':' + parsed.port;
41 | }
42 | reload(forcedReload?: boolean): void {/*TODO*/}
43 | replace(url: string): void {
44 | this.assign(url);
45 | }
46 | toString(): string { /*TODO*/ return ''; }
47 | }
48 |
49 |
50 | @Injectable()
51 | export class ServerLocationStrategy extends LocationStrategy {
52 | private _location: Location = new MockServerLocation();
53 | private _history: History = new MockServerHistory();
54 | private _baseHref: string = '/';
55 |
56 | constructor(@Inject(BASE_URL) baseUrl: string) {
57 | super();
58 | this._location.assign(baseUrl);
59 | }
60 |
61 | onPopState(fn: EventListener): void {/*TODO*/}
62 |
63 | getBaseHref(): string { return this._baseHref; }
64 |
65 | path(): string { return this._location.pathname; }
66 |
67 | pushState(state: any, title: string, url: string) {/*TODO*/}
68 |
69 | replaceState(state: any, title: string, url: string) {/*TODO*/}
70 |
71 | forward(): void {
72 | this._history.forward();
73 | }
74 |
75 | back(): void {
76 | this._history.back();
77 | }
78 |
79 | prepareExternalUrl(internal: string): string { return internal; }
80 | }
81 |
82 | export const SERVER_LOCATION_PROVIDERS: Array = [
83 | provide(LocationStrategy, {useClass: ServerLocationStrategy})
84 | ];
85 |
--------------------------------------------------------------------------------
/modules/preboot/test/client/replay/replay_after_hydrate_spec.ts:
--------------------------------------------------------------------------------
1 | /// {
31 | return >viewRef;
32 | }
33 |
34 | @Injectable()
35 | export class ServerDomRenderer_ extends DomRenderer_ {
36 | constructor(
37 | private eventManager: EventManager,
38 | private domSharedStylesHost: DomSharedStylesHost,
39 | private animate: AnimationBuilder,
40 | @Inject(DOCUMENT) document) {
41 | super(eventManager, domSharedStylesHost, animate, document);
42 | }
43 |
44 | setElementProperty(location: RenderElementRef, propertyName: string, propertyValue: any) {
45 | if (propertyName === 'value' || (propertyName === 'checked' && propertyValue !== false)) {
46 | let view: DefaultRenderView = resolveInternalDomView(location.renderView);
47 | let element = view.boundElements[(location).boundElementIndex];
48 | if (DOM.nodeName(element) === 'input') {
49 | DOM.setAttribute(element, propertyName, propertyValue);
50 | return;
51 | }
52 | } else if (propertyName === 'src') {
53 | let view: DefaultRenderView = resolveInternalDomView(location.renderView);
54 | let element = view.boundElements[(location).boundElementIndex];
55 | DOM.setAttribute(element, propertyName, propertyValue);
56 | return;
57 | }
58 | return super.setElementProperty(location, propertyName, propertyValue);
59 | }
60 |
61 | setElementStyle(location: RenderElementRef, styleName: string, styleValue: string): void {
62 | let styleNameCased = cssHyphenate(styleName);
63 | super.setElementProperty(location, styleNameCased, styleValue);
64 | }
65 |
66 | invokeElementMethod(location: RenderElementRef, methodName: string, args: any[]) {
67 | if (methodName === 'focus') {
68 | let view: DefaultRenderView = resolveInternalDomView(location.renderView);
69 | let element = view.boundElements[(location).boundElementIndex];
70 | if (DOM.nodeName(element) === 'input') {
71 | DOM.invoke(element, 'autofocus', null);
72 | return;
73 | }
74 |
75 | }
76 | return super.invokeElementMethod(location, methodName, args);
77 | }
78 |
79 | }
80 |
81 |
82 |
--------------------------------------------------------------------------------
/modules/universal/server/test/router_server_spec.ts:
--------------------------------------------------------------------------------
1 | import 'reflect-metadata';
2 | import {LocationStrategy} from 'angular2/src/router/location_strategy';
3 | import {ServerLocationStrategy, SERVER_LOCATION_PROVIDERS} from '../src/router/server_router';
4 | import {Component, Directive, View} from 'angular2/core';
5 | import {ROUTER_DIRECTIVES, ROUTER_BINDINGS, RouteConfig, Router} from 'angular2/router';
6 |
7 | /**
8 | * These tests are pretty basic, but just have something in
9 | * place that we can expand in the future
10 | */
11 | describe('server_router', () => {
12 |
13 | var serverLocationStrategy: ServerLocationStrategy = null;
14 |
15 | beforeAll( () => {
16 | serverLocationStrategy = new ServerLocationStrategy('/');
17 | });
18 | afterAll( () => {
19 | serverLocationStrategy = null;
20 | });
21 |
22 | describe('ServerLocationStrategy', () => {
23 | it('should be defined', () => {
24 | expect(serverLocationStrategy).toBeDefined();
25 | });
26 |
27 | describe('should have all methods defined and functional', () => {
28 |
29 | it('should have method path()', () => {
30 | spyOn(serverLocationStrategy, 'path');
31 | serverLocationStrategy.path();
32 | expect(serverLocationStrategy.path).toHaveBeenCalled();
33 | });
34 |
35 | it('should have method forward()', () => {
36 | spyOn(serverLocationStrategy, 'forward');
37 | serverLocationStrategy.forward();
38 | expect(serverLocationStrategy.forward).toHaveBeenCalled();
39 | });
40 |
41 | it('should have method back()', () => {
42 | spyOn(serverLocationStrategy, 'back');
43 | serverLocationStrategy.back();
44 | expect(serverLocationStrategy.back).toHaveBeenCalled();
45 | });
46 |
47 | it('should have method getBaseHref()', () => {
48 | spyOn(serverLocationStrategy, 'getBaseHref').and.callThrough();
49 | var baseHref = serverLocationStrategy.getBaseHref();
50 | expect(serverLocationStrategy.getBaseHref).toHaveBeenCalled();
51 | expect(baseHref).toEqual('/');
52 | });
53 |
54 | it('should have method onPopState()', () => {
55 | spyOn(serverLocationStrategy, 'onPopState');
56 | var fn = () => {};
57 | serverLocationStrategy.onPopState(fn);
58 | expect(serverLocationStrategy.onPopState).toHaveBeenCalled();
59 | expect(serverLocationStrategy.onPopState).toHaveBeenCalledWith(fn);
60 | });
61 |
62 | it('should have method pushState()', () => {
63 | spyOn(serverLocationStrategy, 'pushState');
64 | var opts = {
65 | state: {},
66 | title: 'foo',
67 | url: '/bar'
68 | };
69 | serverLocationStrategy.pushState(opts.state, opts.title, opts.url);
70 | expect(serverLocationStrategy.pushState).toHaveBeenCalled();
71 | expect(serverLocationStrategy.pushState).toHaveBeenCalledWith(opts.state, opts.title, opts.url);
72 | });
73 |
74 |
75 | });
76 |
77 | });
78 |
79 | });
80 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | [](https://travis-ci.org/angular/universal)
2 | [](http://badge.fury.io/js/angular2-universal-preview)
3 | [](https://gitter.im/angular/universal?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
4 | [](http://issuestats.com/github/angular/universal)
5 | [](http://issuestats.com/github/angular/universal)
6 |
7 | ![]()
` element the `src` attribute is reflected as the `src` property of the element type `HTMLImageElement`.
54 |
55 | # What's in a name?
56 | We believe that using the word "universal" is correct when referring to a JavaScript Application that runs in more environments than the browser. (inspired by [Universal JavaScript](https://medium.com/@mjackson/universal-javascript-4761051b7ae9))
57 |
58 | # License
59 | [Apache-2.0](/LICENSE)
60 |
--------------------------------------------------------------------------------
/modules/preboot/test/client/replay/replay_after_rerender_spec.ts:
--------------------------------------------------------------------------------
1 | /// = sharedStylesHost.getAllStyles();
62 |
63 | // TODO: we need a better way to manage data serialized data for server/client
64 | // let http = appRef.injector.getOptional(Http);
65 | // let cache = isPresent(http) ? arrayFlattenTree(http._rootNode.children, []) : null;
66 |
67 | let serializedApp: string = serializeApplication(element, styles);
68 | // return stringifyElement(element);
69 | return serializedApp;
70 | }
71 |
72 | export function renderToString(AppComponent: any, serverProviders?: any): Promise {
73 | return bootstrap(AppComponent, serverProviders)
74 | .then(appRef => {
75 | let html = appRefSyncRender(appRef);
76 | appRef.dispose();
77 | return html;
78 | // let http = appRef.injector.getOptional(Http);
79 | // // TODO: fix zone.js ensure overrideOnEventDone callback when there are no pending tasks
80 | // // ensure all xhr calls are done
81 | // return new Promise(resolve => {
82 | // let ngZone = appRef.injector.get(NgZone);
83 | // // ngZone
84 | // ngZone.overrideOnEventDone(() => {
85 | // if (isBlank(http) || isBlank(http._async) || http._async <= 0) {
86 | // let html: string = appRefSyncRender(appRef);
87 | // appRef.dispose();
88 | // resolve(html);
89 | // }
90 |
91 | // }, true);
92 |
93 | // });
94 |
95 | });
96 | }
97 |
98 |
99 | export function renderToStringWithPreboot(AppComponent: any, serverProviders?: any, prebootConfig: any = {}): Promise {
100 | return renderToString(AppComponent, serverProviders)
101 | .then((html: string) => {
102 | if (typeof prebootConfig === 'boolean' && prebootConfig === false) { return html }
103 | let config = prebootConfigDefault(prebootConfig);
104 | return getClientCode(config)
105 | .then(code => html + createPrebootHTML(code, config));
106 | });
107 | }
108 |
--------------------------------------------------------------------------------
/modules/preboot/src/server/client_code_generator.ts:
--------------------------------------------------------------------------------
1 | import * as Q from 'q';
2 | import uglify = require('gulp-uglify');
3 | import insert = require('gulp-insert');
4 | import rename = require('gulp-rename');
5 | import eventStream = require('event-stream');
6 | import buffer = require('vinyl-buffer');
7 | import source = require('vinyl-source-stream');
8 | import * as browserify from 'browserify';
9 | import {normalize, listenStrategies, replayStrategies, freezeStrategies} from './normalize';
10 | import {stringifyWithFunctions} from './utils';
11 | import {PrebootOptions} from '../interfaces/preboot_options';
12 |
13 | // map of input opts to client code; exposed for testing purposes
14 | export let clientCodeCache = {};
15 |
16 | /**
17 | * We want to use the browserify ignore functionality so that any code modules
18 | * that are not being used are stubbed out. So, for example, if in the preboot
19 | * options the only listen strategy is selectors, then the event_bindings and
20 | * attributes strategies will be stubbed out (meaing the refs will be {})
21 | */
22 | export function ignoreUnusedStrategies(b: BrowserifyObject, bOpts: Object, strategyOpts: any[], allStrategies: Object, pathPrefix: string) {
23 | let activeStrategies = strategyOpts
24 | .filter(x => x.name)
25 | .map(x => x.name);
26 |
27 | Object.keys(allStrategies)
28 | .filter(x => activeStrategies.indexOf(x) < 0)
29 | .forEach(x => b.ignore(pathPrefix + x + '.js', bOpts));
30 | }
31 |
32 | /**
33 | * Generate client code as a readable stream for preboot based on the input options
34 | */
35 | export function getClientCodeStream(opts?: PrebootOptions): NodeJS.ReadableStream {
36 | opts = normalize(opts);
37 |
38 | let bOpts = {
39 | entries: [__dirname + '/../client/preboot_client.js'],
40 | standalone: 'preboot',
41 | basedir: __dirname + '/../client',
42 | browserField: false
43 | };
44 | let b = browserify(bOpts);
45 |
46 | // ignore any strategies that are not being used
47 | ignoreUnusedStrategies(b, bOpts, opts.listen, listenStrategies, './listen/listen_by_');
48 | ignoreUnusedStrategies(b, bOpts, opts.replay, replayStrategies, './replay/replay_after_');
49 |
50 | if (opts.freeze) {
51 | ignoreUnusedStrategies(b, bOpts, [opts.freeze], freezeStrategies, './freeze/freeze_with_');
52 | }
53 |
54 | // ignore other code not being used
55 | if (!opts.buffer) { b.ignore('./buffer_manager.js', bOpts); }
56 | if (!opts.debug) { b.ignore('./log.js', bOpts); }
57 |
58 | // use gulp to get the stream with the custom preboot client code
59 | let outputStream = b.bundle()
60 | .pipe(source('src/client/preboot_client.js'))
61 | .pipe(buffer())
62 | .pipe(insert.append('\n\n;preboot.init(' + stringifyWithFunctions(opts) + ');\n\n'))
63 | .pipe(rename('preboot.js'));
64 |
65 | // uglify if the option is passed in
66 | return opts.uglify ? outputStream.pipe(uglify()) : outputStream;
67 | }
68 |
69 | /**
70 | * Generate client code as a string for preboot
71 | * based on the input options
72 | */
73 | export function getClientCode(opts?: PrebootOptions, done?: Function) {
74 | let deferred = Q.defer();
75 | let clientCode = '';
76 |
77 | // check cache first
78 | let cacheKey = JSON.stringify(opts);
79 | if (clientCodeCache[cacheKey]) {
80 | return Q.when(clientCodeCache[cacheKey]);
81 | }
82 |
83 | // get the client code
84 | getClientCodeStream(opts)
85 | .pipe(eventStream.map(function(file, cb) {
86 | clientCode += file.contents;
87 | cb(null, file);
88 | }))
89 | .on('error', function(err) {
90 | if (done) {
91 | done(err);
92 | }
93 |
94 | deferred.reject(err);
95 | })
96 | .on('end', function() {
97 | if (done) {
98 | done(null, clientCode);
99 | }
100 |
101 | clientCodeCache[cacheKey] = clientCode;
102 | deferred.resolve(clientCode);
103 | });
104 |
105 | return deferred.promise;
106 | }
107 |
--------------------------------------------------------------------------------
/modules/preboot/test/server/presets_spec.ts:
--------------------------------------------------------------------------------
1 | /// ",
10 | "PatrickJS ",
11 | "Jeff Whelpley "
12 | ],
13 | "scripts": {
14 | "prestart": "gulp build",
15 | "build": "gulp build.typescript && gulp build.preboot",
16 | "serve": "gulp serve",
17 | "start": "gulp server",
18 | "watch": "gulp watch",
19 | "debug": "gulp debug",
20 | "clean": "gulp clean",
21 | "preboot": "gulp build.preboot",
22 | "test": "gulp karma",
23 | "ci": "gulp ci",
24 | "changelog": "gulp changelog",
25 | "e2e": "gulp protractor",
26 | "webdriver-update": "gulp protractor.update",
27 | "webdriver-start": "gulp protractor.start",
28 | "preprotractor": "gulp protractor.update",
29 | "protractor": "gulp protractor",
30 | "remove-dist": "rimraf ./dist",
31 | "remove-tsd-typing": "rimraf ./tsd_typings",
32 | "remove-angular2": "rimraf ./node_modules/angular2",
33 | "remove-angular-typings": "rimraf ./angular/modules/angular2/typings",
34 | "remove-angular-dist": "rimraf ./angular/dist",
35 | "remove-web-modules": "rimraf ./web_modules",
36 | "bower": "bower install",
37 | "web_modules": "bash ./scripts/update-ng-bundle.sh",
38 | "tsd": "tsd reinstall && tsd link",
39 | "postinstall": "npm run tsd && tsc || true && npm run remove-web-modules && npm run web_modules && npm run bower && npm run webdriver-update"
40 | },
41 | "repository": {
42 | "type": "git",
43 | "url": "https://github.com/angular/universal"
44 | },
45 | "bugs": {
46 | "url": "https://github.com/angular/universal/issues"
47 | },
48 | "devDependencies": {
49 | "bower": "^1.4.1",
50 | "brfs": "^1.4.0",
51 | "browser-sync": "^2.8.2",
52 | "connect-history-api-fallback": "^1.1.0",
53 | "connect-livereload": "^0.5.3",
54 | "conventional-changelog": "^0.5.0",
55 | "del": "^2.0.2",
56 | "express": "^4.13.0",
57 | "gulp-eslint": "^1.0.0",
58 | "gulp-jasmine": "^2.0.1",
59 | "gulp-livereload": "^3.8.0",
60 | "gulp-load-plugins": "^1.1.0",
61 | "gulp-node-inspector": "^0.1.0",
62 | "gulp-nodemon": "^2.0.3",
63 | "gulp-notify": "^2.2.0",
64 | "gulp-protractor": "^2.1.0",
65 | "gulp-size": "^2.0.0",
66 | "gulp-tslint": "^4.2.2",
67 | "gulp-typescript": "^2.9.0",
68 | "jasmine": "^2.3.1",
69 | "jasmine-reporters": "^2.0.7",
70 | "jasmine-spec-reporter": "^2.4.0",
71 | "karma": "^0.13.3",
72 | "karma-browserify": "^4.3.0",
73 | "karma-chrome-launcher": "^0.2.0",
74 | "karma-jasmine": "^0.3.6",
75 | "karma-phantomjs-launcher": "^0.2.1",
76 | "morgan": "^1.6.1",
77 | "nodemon": "^1.3.7",
78 | "open": "0.0.5",
79 | "opn": "^3.0.2",
80 | "phantomjs": "^1.9.17",
81 | "protractor": "^3.0.0",
82 | "rimraf": "^2.4.3",
83 | "selenium-webdriver": "^2.46.1",
84 | "serve-index": "^1.7.0",
85 | "serve-static": "^1.10.0",
86 | "tsd": "^0.6.4",
87 | "tslint": "^3.2.1",
88 | "typescript": "^1.7.3",
89 | "yargs": "^3.14.0"
90 | },
91 | "dependencies": {
92 | "angular2": "2.0.0-beta.0",
93 | "browserify": "^11.0.0",
94 | "css": "^2.2.1",
95 | "es6-shim": "^0.33.8",
96 | "event-stream": "^3.3.1",
97 | "gulp": "^3.9.0",
98 | "gulp-insert": "^0.5.0",
99 | "gulp-rename": "^1.2.2",
100 | "gulp-uglify": "^1.2.0",
101 | "lodash": "^3.10.1",
102 | "parse5": "^1.5.0",
103 | "q": "^1.4.1",
104 | "reflect-metadata": "0.1.2",
105 | "require-dir": "^0.3.0",
106 | "run-sequence": "^1.1.2",
107 | "rxjs": "5.0.0-beta.0",
108 | "vinyl-buffer": "^1.0.0",
109 | "vinyl-source-stream": "^1.1.0",
110 | "xhr2": "^0.1.3",
111 | "zone.js": "0.5.10"
112 | }
113 | }
114 |
--------------------------------------------------------------------------------
/modules/universal/client/src/ng_preload_cache.ts:
--------------------------------------------------------------------------------
1 | import {
2 | Http,
3 | Response,
4 | Headers,
5 | RequestOptions,
6 | ResponseOptions,
7 | ConnectionBackend,
8 | XHRBackend
9 | } from 'angular2/http';
10 | import {ObservableWrapper} from 'angular2/src/facade/async';
11 | import {
12 | isPresent,
13 | isBlank,
14 | CONST_EXPR
15 | } from 'angular2/src/facade/lang';
16 |
17 | import {
18 | provide,
19 | OpaqueToken,
20 | Injectable,
21 | Optional,
22 | Inject,
23 | EventEmitter
24 | } from 'angular2/core';
25 |
26 | import {
27 | Observable
28 | } from 'rxjs';
29 |
30 | export const PRIME_CACHE: OpaqueToken = CONST_EXPR(new OpaqueToken('primeCache'));
31 |
32 |
33 | @Injectable()
34 | export class NgPreloadCacheHttp extends Http {
35 | prime: boolean = true;
36 | constructor(
37 | protected _backend: ConnectionBackend,
38 | protected _defaultOptions: RequestOptions) {
39 | super(_backend, _defaultOptions);
40 | }
41 |
42 | preload(method) {
43 | let obs = new EventEmitter();
44 | let newcache = (window).ngPreloadCache;
45 | if (newcache) {
46 |
47 | var preloaded = null;
48 |
49 | try {
50 | let res;
51 | preloaded = newcache.shift();
52 | if (isPresent(preloaded)) {
53 | let body = preloaded._body;
54 | res = new ResponseOptions((Object).assign({}, preloaded, { body }));
55 |
56 | if (preloaded.headers) {
57 | res.headers = new Headers(preloaded);
58 | }
59 | preloaded = new Response(res);
60 | }
61 | } catch(e) {
62 | console.log('WAT', e)
63 | }
64 |
65 | if (preloaded) {
66 | setTimeout(() => {
67 | ObservableWrapper.callNext(obs, preloaded);
68 | // setTimeout(() => {
69 | ObservableWrapper.callComplete(obs);
70 | // });
71 | });
72 | return obs;
73 | }
74 |
75 | }
76 | let request = method();
77 | // request.observer(obs);
78 | request.observer({
79 | next(value) {
80 | ObservableWrapper.callNext(obs, value);
81 | },
82 | throw(e) {
83 | setTimeout(() => {
84 | ObservableWrapper.callError(obs, e)
85 | });
86 | },
87 | return() {
88 | setTimeout(() => {
89 | ObservableWrapper.callComplete(obs)
90 | });
91 | }
92 | });
93 |
94 | return obs;
95 | }
96 |
97 | request(url: string, options): Observable {
98 | return this.prime ? this.preload(() => super.request(url, options)) : super.request(url, options);
99 | }
100 |
101 | get(url: string, options): Observable {
102 | return this.prime ? this.preload(() => super.get(url, options)) : super.get(url, options);
103 | }
104 |
105 | post(url: string, body: string, options): Observable {
106 | return this.prime ? this.preload(() => super.post(url, body, options)) : super.post(url, body, options);
107 | }
108 |
109 | put(url: string, body: string, options): Observable {
110 | return this.prime ? this.preload(() => super.put(url, body, options)) : super.put(url, body, options);
111 | }
112 |
113 | delete(url: string, options): Observable {
114 | return this.prime ? this.preload(() => super.delete(url, options)) : super.delete(url, options);
115 | }
116 |
117 | patch(url: string, body: string, options): Observable {
118 | return this.prime ? this.preload(() => super.patch(url, body, options)) : super.patch(url, body, options);
119 | }
120 |
121 | head(url: string, options): Observable {
122 | return this.prime ? this.preload(() => super.head(url, options)) : super.head(url, options);
123 | }
124 | }
125 |
126 | export const NG_PRELOAD_CACHE_PROVIDERS = [
127 | provide(Http, {
128 | useFactory: (xhrBackend, requestOptions) => {
129 | return new NgPreloadCacheHttp(xhrBackend, requestOptions);
130 | },
131 | deps: [XHRBackend, RequestOptions]
132 | })
133 | ];
134 |
--------------------------------------------------------------------------------
/modules/universal/server/src/express/engine.ts:
--------------------------------------------------------------------------------
1 | import '../server_patch';
2 | import * as fs from 'fs';
3 | import {selectorRegExpFactory} from '../helper';
4 |
5 |
6 | import {
7 | renderToString,
8 | renderToStringWithPreboot,
9 | selectorResolver
10 | } from '../render';
11 |
12 | import {
13 | prebootScript,
14 | angularScript,
15 | bootstrapButton,
16 | bootstrapFunction,
17 | bootstrapApp,
18 | buildClientScripts
19 | } from '../ng_scripts';
20 |
21 | import {enableProdMode} from 'angular2/core';
22 |
23 | export interface engineOptions {
24 | App: Function;
25 | providers?: Array;
26 | preboot?: Object | any;
27 | selector?: string;
28 | serializedCmp?: string;
29 | server?: boolean;
30 | client?: boolean;
31 | enableProdMode?: boolean;
32 | }
33 |
34 | export function ng2engine(filePath: string, options: engineOptions, done: Function) {
35 | // defaults
36 | options = options || {};
37 | options.providers = options.providers || null;
38 |
39 | // read file on disk
40 | try {
41 | fs.readFile(filePath, (err, content) => {
42 |
43 | if (err) { return done(err); }
44 |
45 | // convert to string
46 | var clientHtml: string = content.toString();
47 |
48 | // TODO: better build scripts abstraction
49 | if (options.server === false && options.client === false) {
50 | return done(null, clientHtml);
51 | }
52 | if (options.server === false && options.client !== false) {
53 | return done(null, buildClientScripts(clientHtml, options));
54 | }
55 | if (options.enableProdMode) {
56 | enableProdMode();
57 | }
58 |
59 | // bootstrap and render component to string
60 | var renderPromise: any = renderToString;
61 | var args = [options.App, options.providers];
62 | if (options.preboot) {
63 | renderPromise = renderToStringWithPreboot;
64 | args.push(options.preboot);
65 | }
66 |
67 | renderPromise(...args)
68 | .then(serializedCmp => {
69 |
70 | let selector: string = selectorResolver(options.App);
71 |
72 | // selector replacer explained here
73 | // https://gist.github.com/gdi2290/c74afd9898d2279fef9f
74 | // replace our component with serialized version
75 | let rendered: string = clientHtml.replace(
76 | // {{ serializedCmp }}
79 | serializedCmp
80 | // TODO: serializedData
81 | );
82 |
83 | done(null, buildClientScripts(rendered, options));
84 | })
85 | .catch(e => {
86 | console.log(e.stack);
87 | // if server fail then return client html
88 | done(null, buildClientScripts(clientHtml, options));
89 | });
90 | });
91 | } catch (e) {
92 | done(e);
93 | }
94 | };
95 |
96 | export const ng2engineWithPreboot = ng2engine;
97 |
98 | export function simpleReplace(filePath: string, options: engineOptions, done: Function) {
99 | // defaults
100 | options = options || {};
101 |
102 | // read file on disk
103 | try {
104 | fs.readFile(filePath, (err, content) => {
105 |
106 | if (err) { return done(err); }
107 |
108 | // convert to string
109 | var clientHtml: string = content.toString();
110 |
111 | // TODO: better build scripts abstraction
112 | if (options.server === false && options.client === false) {
113 | return done(null, clientHtml);
114 | }
115 | if (options.server === false && options.client !== false) {
116 | return done(null, buildClientScripts(clientHtml, options));
117 | }
118 |
119 | let rendered: string = clientHtml.replace(
120 | // {{ serializedCmp }}
123 | options.serializedCmp
124 | );
125 |
126 | done(null, buildClientScripts(rendered, options));
127 | });
128 | } catch (e) {
129 | done(e);
130 | }
131 | }
132 |
--------------------------------------------------------------------------------
/examples/app/server/routes.ts:
--------------------------------------------------------------------------------
1 | ///
8 |
9 |
10 |
11 |
12 | `;
13 | // Inject Angular for the developer
14 | export const angularScript: string = `
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
34 | `;
35 |
36 | export const bootstrapButton: string = `
37 |
43 |
44 |
45 |
48 | ```
49 |
50 | Finally, once your client-side web app is "alive" it has to tell preboot that it is OK
51 | to replay events.
52 |
53 | ```
54 | preboot.done();
55 | ```
56 |
57 | ## Examples
58 |
59 | Server-side integrations:
60 |
61 | * [Express](docs/examples.md#express)
62 | * [Hapi](docs/examples.md#hapi)
63 | * [Gulp](docs/examples.md#gulp)
64 |
65 | Client-side integrations:
66 |
67 | * [Angular 1.x](docs/examples.md#angular-1)
68 | * [Angular 2](docs/examples.md#angular-2)
69 | * [React](docs/examples.md#react)
70 | * [Ember](docs/examples.md#ember)
71 |
72 | Custom strategies:
73 |
74 | * [Listening for events](docs/examples.md#listen-strategy)
75 | * [Replaying events](docs/examples.md#replay-strategy)
76 | * [Freezing screen](docs/examples.md#freeze-strategy)
77 |
78 | ## Options
79 |
80 | There are 5 different types of options that can be passed into preboot:
81 |
82 | **1. Selectors**
83 |
84 | * `appRoot` - A selector that can be used to find the root element for the view (default is 'body')
85 |
86 | **2. Strategies**
87 |
88 | These can either be string values if you want to use a pre-built strategy that comes with the framework
89 | or you can implement your own strategy and pass it in here as a function or object.
90 |
91 | * `listen` - How preboot listens for events. See [Listen Strategies](docs/strategies.md#listen-strategies) below for more details.
92 | * `replay` - How preboot replays captured events on client view. See [Replay Strategies](docs/strategies.md#replay-strategies) below for more details.
93 | * `freeze` - How preboot freezes the screen when certain events occur. See [Freeze Strategies](docs/strategies.md#freeze-strategies) below for more details.
94 |
95 | **3. Flags**
96 |
97 | All flags flase by default.
98 |
99 | * `focus` - If true, will track and maintain focus even if page re-rendered
100 | * `buffer` - If true, client will write to a hidden div which is only displayed after bootstrap complete
101 | * `keyPress` - If true, all keystrokes in a textbox or textarea will be transferred from the server
102 | view to the client view
103 | * `buttonPress` - If true, button presses will be recorded and the UI will freeze until bootstrap complete
104 | * `pauseOnTyping` - If true, the preboot will not complete until user focus out of text input elements
105 | * `doNotReplay` - If true, none of the events recorded will be replayed
106 |
107 | **4. Workflow Events**
108 |
109 | These are the names of global events that can affect the preboot workflow:
110 |
111 | * `pauseEvent` - When this is raised, preboot will delay the play back of recorded events (default 'PrebootPause')
112 | * `resumeEvent` - When this is raised, preboot will resume the playback of events (default 'PrebootResume')
113 |
114 | **5. Build Params**
115 |
116 | * `uglify` - You can always uglify the output of the client code stream yourself, but if you set this
117 | option to true preboot will do it for you.
118 |
119 | ## Play
120 |
121 | If you want to play with this library you can clone it locally:
122 |
123 | ```
124 | git clone git@github.com:jeffwhelpley/preboot.git
125 | cd preboot
126 | gulp build
127 | gulp play
128 | ```
129 |
130 | Open your browser to http://localhost:3000. Make modifications to the options in build/task.build.js
131 | to see how preboot can be changed.
132 |
133 | ## Contributors
134 |
135 | We would welcome any and all contributions. Please see the [Contributors Guide](docs/contributors.md).
136 |
--------------------------------------------------------------------------------
/examples/app/universal/todo/app.ts:
--------------------------------------------------------------------------------
1 | ///
40 |
41 |
42 |
51 |
52 |
53 |
58 |
59 |
60 |
93 |
94 |
124 |
125 |
126 | `
127 | })
128 | export class TodoApp {
129 | todoEdit: Todo = null;
130 | selected: number = 0;
131 | constructor(public todoStore: Store, public factory: TodoFactory) {
132 | }
133 |
134 | onInit() {
135 | this.addTodo('Universal JavaScript');
136 | this.addTodo('Run Angular 2 in Web Workers');
137 | this.addTodo('Upgrade the web');
138 | this.addTodo('Release Angular 2');
139 | }
140 |
141 | enterTodo($event, inputElement) {
142 | if (!inputElement.value) { return; }
143 | if ($event.which !== 13) { return; }
144 | this.addTodo(inputElement.value);
145 | inputElement.value = '';
146 | }
147 |
148 | editTodo(todo: Todo) {
149 | this.todoEdit = todo;
150 | }
151 |
152 | doneEditing($event, todo: Todo) {
153 | var which = $event.which;
154 | var target = $event.target;
155 |
156 | if (which === 13) {
157 | todo.title = target.value;
158 | this.todoEdit = null;
159 | } else if (which === 27) {
160 | this.todoEdit = null;
161 | target.value = todo.title;
162 | }
163 |
164 | }
165 |
166 | addTodo(newTitle: string) {
167 | this.todoStore.add(this.factory.create(newTitle, false));
168 | }
169 |
170 | completeMe(todo: Todo) {
171 | todo.completed = !todo.completed;
172 | }
173 |
174 | deleteMe(todo: Todo) {
175 | this.todoStore.remove(todo);
176 | }
177 |
178 | toggleAll($event) {
179 | var isComplete = $event.target.checked;
180 | this.todoStore.list.forEach((todo: Todo) => todo.completed = isComplete);
181 | }
182 |
183 | clearCompleted() {
184 | this.todoStore.removeBy(todo => todo.completed);
185 | }
186 |
187 | pluralize(count, word) {
188 | return `word${count === 1 ? '' : 's'}`;
189 | }
190 |
191 | remainingCount() {
192 | return this.todoStore.list.filter((todo: Todo) => !todo.completed).length;
193 | }
194 | }
195 |
196 |
197 |
198 | export function main() {
199 | return bootstrap(TodoApp, [
200 | ROUTER_PROVIDERS,
201 | HTTP_PROVIDERS,
202 | NG_PRELOAD_CACHE_PROVIDERS,
203 | bind(PRIME_CACHE).toValue(true)
204 | ]);
205 | }
206 |
--------------------------------------------------------------------------------
/examples/app/universal/test_page/app.ts:
--------------------------------------------------------------------------------
1 | /// = [];
115 | toggle: boolean = true;
116 | itemCount: number = 0;
117 | buttonTest: string = '';
118 | testingInput: string = 'default state on component';
119 |
120 | // todosObs1$ = this.http.get(App.queries.todos)
121 | // .filter(res => res.status >= 200 && res.status < 300)
122 | // .map(res => res.json())
123 | // .map(data => transformData(data)); // ensure correct data prop types
124 | // todosObs2$ = this.http.get(App.queries.todos)
125 | // .filter(res => res.status >= 200 && res.status < 300)
126 | // .map(res => res.json())
127 | // .map(data => transformData(data)); // ensure correct data prop types
128 | // todosObs3$ = this.http.get(App.queries.todos)
129 | // .map(res => res.json())
130 | // .map(data => transformData(data));
131 |
132 | constructor(/*private http: Http*/) {
133 |
134 | }
135 |
136 | onInit() {
137 | // this.addItem();
138 | // this.addItem();
139 | // this.addItem();
140 |
141 | // this.todosObs1$.subscribe(
142 | // // onValue
143 | // todos => {
144 | // todos.map(todo => this.addItem(todo));
145 | // this.anotherAjaxCall();
146 | // },
147 | // // onError
148 | // err => {
149 | // console.error('err', err);
150 | // throw err;
151 | // },
152 | // // onComplete
153 | // () => {
154 | // console.log('complete request1');
155 | // });
156 |
157 | // this.todosObs2$.subscribe(
158 | // // onValue
159 | // todos => {
160 | // console.log('another call 2', todos);
161 | // todos.map(todo => this.addItem(todo));
162 | // // this.anotherAjaxCall();
163 | // },
164 | // // onError
165 | // err => {
166 | // console.error('err', err);
167 | // throw err;
168 | // },
169 | // // onComplete
170 | // () => {
171 | // console.log('complete request2');
172 | // });
173 |
174 | }
175 | anotherAjaxCall() {
176 | // this.todosObs3$.subscribe(
177 | // todos => {
178 | // console.log('anotherAjaxCall data 3', todos);
179 | // },
180 | // err => {
181 | // console.log('anotherAjaxCall err')
182 | // },
183 | // () => {
184 | // console.log('anotherAjaxCall complete ajax')
185 | // });
186 | }
187 |
188 | log(value) {
189 | console.log('log:', value);
190 | return value;
191 | }
192 |
193 | toggleNgIf() {
194 | this.toggle = !this.toggle;
195 | }
196 |
197 | testing() {
198 | return 'testing' + 5;
199 | }
200 |
201 | clickingTest() {
202 | this.buttonTest = `click ${ this.testing() } ${ ~~(Math.random() * 20) }`;
203 | console.log(this.buttonTest);
204 | }
205 |
206 | addItem(value?: any) {
207 | if (value) {
208 | return this.items.push(value);
209 | }
210 | let defaultItem = {
211 | value: `item ${ this.itemCount++ }`,
212 | completed: true,
213 | created_at: new Date()
214 | };
215 | return this.items.push(defaultItem);
216 | }
217 |
218 |
219 | removeItem() {
220 | this.items.pop();
221 | }
222 |
223 | }
224 |
225 |
226 | export function main() {
227 | return bootstrap(App, [
228 | // HTTP_PROVIDERS,
229 | // NG_PRELOAD_CACHE_PROVIDERS,
230 | // bind(PRIME_CACHE).toValue(true)
231 | ]);
232 | }
233 |
--------------------------------------------------------------------------------
/modules/universal/server/src/platform/node.ts:
--------------------------------------------------------------------------------
1 | import * as http from 'http';
2 | import * as url from 'url';
3 |
4 | // Facade
5 | import {Type, isPresent, CONST_EXPR} from 'angular2/src/facade/lang';
6 | import {Promise, PromiseWrapper, PromiseCompleter} from 'angular2/src/facade/promise';
7 |
8 | // Compiler
9 | import {COMPILER_PROVIDERS, XHR} from 'angular2/compiler';
10 |
11 | // Animate
12 | import {BrowserDetails} from 'angular2/src/animate/browser_details';
13 | import {AnimationBuilder} from 'angular2/src/animate/animation_builder';
14 |
15 | // Core
16 | import {Testability} from 'angular2/src/core/testability/testability';
17 | import {ReflectionCapabilities} from 'angular2/src/core/reflection/reflection_capabilities';
18 | import {DirectiveResolver} from 'angular2/src/core/linker/directive_resolver';
19 | import {APP_COMPONENT} from 'angular2/src/core/application_tokens';
20 | import {
21 | provide,
22 | Provider,
23 | PLATFORM_INITIALIZER,
24 | PLATFORM_COMMON_PROVIDERS,
25 | PLATFORM_DIRECTIVES,
26 | PLATFORM_PIPES,
27 | APPLICATION_COMMON_PROVIDERS,
28 | ComponentRef,
29 | platform,
30 | reflector,
31 | ExceptionHandler,
32 | Renderer
33 | } from 'angular2/core';
34 |
35 | // Common
36 | import {COMMON_DIRECTIVES, COMMON_PIPES, FORM_PROVIDERS} from 'angular2/common';
37 |
38 | // Platform
39 | import {ELEMENT_PROBE_BINDINGS,ELEMENT_PROBE_PROVIDERS,} from 'angular2/platform/common_dom';
40 | import {Parse5DomAdapter} from 'angular2/src/platform/server/parse5_adapter';
41 | Parse5DomAdapter.makeCurrent(); // ensure Parse5DomAdapter is used
42 | // Platform.Dom
43 | import {DOM} from 'angular2/src/platform/dom/dom_adapter';
44 | // import {DomRenderer} from 'angular2/src/platform/dom/dom_renderer';
45 | import {EventManager, EVENT_MANAGER_PLUGINS} from 'angular2/src/platform/dom/events/event_manager';
46 | import {DomEventsPlugin} from 'angular2/src/platform/dom/events/dom_events';
47 | import {KeyEventsPlugin} from 'angular2/src/platform/dom/events/key_events';
48 | import {HammerGesturesPlugin} from 'angular2/src/platform/dom/events/hammer_gestures';
49 | import {DomSharedStylesHost, SharedStylesHost} from 'angular2/src/platform/dom/shared_styles_host';
50 | import {DOCUMENT} from 'angular2/src/platform/dom/dom_tokens';
51 | import {DomRenderer} from 'angular2/src/platform/dom/dom_renderer';
52 |
53 | import {ServerDomRenderer_} from '../render/server_dom_renderer';
54 |
55 | export function initNodeAdapter() {
56 | Parse5DomAdapter.makeCurrent();
57 | }
58 |
59 | export class NodeXHRImpl extends XHR {
60 | get(templateUrl: string): Promise {
61 | let completer: PromiseCompleter = PromiseWrapper.completer(),
62 | parsedUrl = url.parse(templateUrl);
63 |
64 | http.get(templateUrl, (res) => {
65 | res.setEncoding('utf8');
66 |
67 | // normalize IE9 bug (http://bugs.jquery.com/ticket/1450)
68 | var status = res.statusCode === 1223 ? 204 : res.statusCode;
69 |
70 | if (200 <= status && status <= 300) {
71 | let data = '';
72 |
73 | res.on('data', (chunk) => {
74 | data += chunk;
75 | });
76 | res.on('end', () => {
77 | completer.resolve(data);
78 | });
79 | }
80 | else {
81 | completer.reject(`Failed to load ${templateUrl}`, null);
82 | }
83 |
84 | // consume response body
85 | res.resume();
86 | }).on('error', (e) => {
87 | completer.reject(`Failed to load ${templateUrl}`, null);
88 | });
89 |
90 | return completer.promise;
91 | }
92 | }
93 |
94 | export const NODE_PROVIDERS: Array = CONST_EXPR([
95 | ...PLATFORM_COMMON_PROVIDERS,
96 | new Provider(PLATFORM_INITIALIZER, {useValue: initNodeAdapter, multi: true}),
97 | ]);
98 |
99 | function _exceptionHandler(): ExceptionHandler {
100 | return new ExceptionHandler(DOM, false);
101 | }
102 |
103 | export const NODE_APP_COMMON_PROVIDERS: Array = CONST_EXPR([
104 | ...APPLICATION_COMMON_PROVIDERS,
105 | ...FORM_PROVIDERS,
106 | new Provider(PLATFORM_PIPES, {useValue: COMMON_PIPES, multi: true}),
107 | new Provider(PLATFORM_DIRECTIVES, {useValue: COMMON_DIRECTIVES, multi: true}),
108 | new Provider(ExceptionHandler, {useFactory: _exceptionHandler, deps: []}),
109 | new Provider(DOCUMENT, {
110 | useFactory: (appComponentType, directiveResolver) => {
111 | // TODO(gdi2290): determine a better for document on the server
112 | let selector = directiveResolver.resolve(appComponentType).selector;
113 | let serverDocument = DOM.createHtmlDocument();
114 | let el = DOM.createElement(selector);
115 | DOM.appendChild(serverDocument.body, el);
116 | return serverDocument;
117 | },
118 | deps: [APP_COMPONENT, DirectiveResolver]
119 | }),
120 | new Provider(EVENT_MANAGER_PLUGINS, {useClass: DomEventsPlugin, multi: true}),
121 | new Provider(EVENT_MANAGER_PLUGINS, {useClass: KeyEventsPlugin, multi: true}),
122 | new Provider(EVENT_MANAGER_PLUGINS, {useClass: HammerGesturesPlugin, multi: true}),
123 | new Provider(DomRenderer, {useClass: ServerDomRenderer_}),
124 | new Provider(Renderer, {useExisting: DomRenderer}),
125 | new Provider(SharedStylesHost, {useExisting: DomSharedStylesHost}),
126 | DomSharedStylesHost,
127 | Testability,
128 | BrowserDetails,
129 | AnimationBuilder,
130 | EventManager
131 | ]);
132 |
133 | /**
134 | * An array of providers that should be passed into `application()` when bootstrapping a component.
135 | */
136 | export const NODE_APP_PROVIDERS: Array = CONST_EXPR([
137 | ...NODE_APP_COMMON_PROVIDERS,
138 | ...COMPILER_PROVIDERS,
139 | new Provider(XHR, {useClass: NodeXHRImpl}),
140 | ]);
141 |
142 | /**
143 | *
144 | */
145 | export function bootstrap(
146 | appComponentType: Type,
147 | customAppProviders: Array = null,
148 | customComponentProviders: Array = null): Promise {
149 |
150 | reflector.reflectionCapabilities = new ReflectionCapabilities();
151 |
152 | let appProviders: Array = [
153 | provide(APP_COMPONENT, {useValue: appComponentType}),
154 | ...NODE_APP_PROVIDERS,
155 | ...(isPresent(customAppProviders) ? customAppProviders : [])
156 | ];
157 |
158 | let componentProviders: Array = [
159 | ...(isPresent(customComponentProviders) ? customComponentProviders : [])
160 | ];
161 |
162 | return platform(NODE_PROVIDERS)
163 | .application(appProviders)
164 | .bootstrap(appComponentType, componentProviders);
165 | }
166 |
--------------------------------------------------------------------------------
/modules/preboot/test/client/event_manager_spec.ts:
--------------------------------------------------------------------------------
1 | /// ;
66 | readyState: ReadyState;
67 | constructor(req: Request, browserXHR: BrowserXhr, baseResponseOptions?: ResponseOptions) {
68 | this.request = req;
69 | this.response = new Observable(responseObserver => {
70 | let _xhr: any = browserXHR.build();
71 | _xhr.open(RequestMethod[req.method].toUpperCase(), req.url);
72 | // load event handler
73 | let onLoad = () => {
74 | // responseText is the old-school way of retrieving response (supported by IE8 & 9)
75 | // response/responseType properties were introduced in XHR Level2 spec (supported by
76 | // IE10)
77 | let response = ('response' in _xhr) ? _xhr.response : _xhr.responseText;
78 |
79 | // normalize IE9 bug (http://bugs.jquery.com/ticket/1450)
80 | let status = _xhr.status === 1223 ? 204 : _xhr.status;
81 |
82 | // fix status code when it is 0 (0 status is undocumented).
83 | // Occurs when accessing file resources or on Android 4.1 stock browser
84 | // while retrieving files from application cache.
85 | if (status === 0) {
86 | status = response ? 200 : 0;
87 | }
88 | var responseOptions = new ResponseOptions({body: response, status: status});
89 | if (isPresent(baseResponseOptions)) {
90 | responseOptions = baseResponseOptions.merge(responseOptions);
91 | }
92 | responseObserver.next(new Response(responseOptions));
93 | // TODO(gdi2290): defer complete if array buffer until done
94 | responseObserver.complete();
95 | };
96 | // error event handler
97 | let onError = (err) => {
98 | var responseOptions = new ResponseOptions({body: err, type: ResponseType.Error});
99 | if (isPresent(baseResponseOptions)) {
100 | responseOptions = baseResponseOptions.merge(responseOptions);
101 | }
102 | responseObserver.error(new Response(responseOptions));
103 | };
104 |
105 | if (isPresent(req.headers)) {
106 | req.headers.forEach((values, name) => _xhr.setRequestHeader(name, values.join(',')));
107 | }
108 |
109 | _xhr.addEventListener('load', onLoad);
110 | _xhr.addEventListener('error', onError);
111 |
112 | _xhr.send(this.request.text());
113 |
114 | return () => {
115 | _xhr.removeEventListener('load', onLoad);
116 | _xhr.removeEventListener('error', onError);
117 | _xhr.abort();
118 | };
119 | });
120 | }
121 | }
122 |
123 |
124 | @Injectable()
125 | export class NodeXhr {
126 | _baseUrl: string;
127 | constructor(@Optional() @Inject(BASE_URL) baseUrl?: string) {
128 |
129 | if (isBlank(baseUrl)) {
130 | throw new Error('No base url set. Please provide a BASE_URL bindings.');
131 | }
132 |
133 | this._baseUrl = baseUrl;
134 |
135 | }
136 | build() {
137 | let xhr = new XMLHttpRequest();
138 | xhr.nodejsSet({ baseUrl: this._baseUrl });
139 | return xhr;
140 | }
141 | }
142 |
143 | @Injectable()
144 | export class NodeBackend {
145 | constructor(private _browserXHR: BrowserXhr, private _baseResponseOptions: ResponseOptions) {
146 | }
147 | createConnection(request: any): Connection {
148 | return new NodeConnection(request, this._browserXHR, this._baseResponseOptions);
149 | }
150 | }
151 |
152 |
153 | @Injectable()
154 | export class NgPreloadCacheHttp extends Http {
155 | _async: number = 0;
156 | _callId: number = 0;
157 | _rootNode;
158 | _activeNode;
159 | constructor(
160 | protected _backend: ConnectionBackend,
161 | protected _defaultOptions: RequestOptions,
162 | @Inject(NgZone) protected _ngZone: NgZone,
163 | @Optional() @Inject(PRIME_CACHE) protected prime?: boolean
164 | ) {
165 | super(_backend, _defaultOptions);
166 |
167 | var _rootNode = { children: [], res: null };
168 | this._rootNode = _rootNode;
169 | this._activeNode = _rootNode;
170 |
171 |
172 | }
173 |
174 | preload(factory) {
175 |
176 | // TODO: fix this after the next release with RxNext
177 | var obs = new EventEmitter();
178 |
179 | var currentNode = null;
180 | if (isPresent(this._activeNode)) {
181 | currentNode = { children: [], res: null };
182 | this._activeNode.children.push(currentNode);
183 | }
184 |
185 | // We need this to ensure all ajax calls are done before rendering the app
186 | this._async += 1;
187 | var request = factory();
188 |
189 | request.subscribe({
190 | next: () => {
191 |
192 | },
193 | error: () => {
194 | this._ngZone.run(() => {
195 | setTimeout(() => { this._async -= 1; });
196 | });
197 | },
198 | complete: () => {
199 | this._ngZone.run(() => {
200 | setTimeout(() => { this._async -= 1; });
201 | });
202 | }
203 | });
204 |
205 | return request;
206 | }
207 |
208 | request(url: string | Request, options?: RequestOptionsArgs): Observable {
209 | return isBlank(this.prime) ? super.request(url, options) : this.preload(() => super.request(url, options));
210 | }
211 |
212 | get(url: string, options?: RequestOptionsArgs): Observable {
213 | return isBlank(this.prime) ? super.get(url, options) : this.preload(() => super.get(url, options));
214 |
215 | }
216 |
217 | post(url: string, body: string, options?: RequestOptionsArgs): Observable {
218 | return isBlank(this.prime) ? super.post(url, body, options) : this.preload(() => super.post(url, body, options));
219 | }
220 |
221 | put(url: string, body: string, options?: RequestOptionsArgs): Observable {
222 | return isBlank(this.prime) ? super.put(url, body, options) : this.preload(() => super.put(url, body, options));
223 | }
224 |
225 | delete(url: string, options?: RequestOptionsArgs): Observable {
226 | return isBlank(this.prime) ? super.delete(url, options) : this.preload(() => super.delete(url, options));
227 |
228 | }
229 |
230 | patch(url: string, body: string, options?: RequestOptionsArgs): Observable {
231 | return isBlank(this.prime) ? super.patch(url, body, options) : this.preload(() => super.patch(url, body, options));
232 | }
233 |
234 | head(url: string, options?: RequestOptionsArgs): Observable {
235 | return isBlank(this.prime) ? super.head(url, options) : this.preload(() => super.head(url, options));
236 | }
237 |
238 |
239 | }
240 |
241 |
242 | export var HTTP_PROVIDERS: Array = [
243 | provide(BASE_URL, {useValue: ''}),
244 | provide(PRIME_CACHE, {useValue: false}),
245 | provide(RequestOptions, {useClass: BaseRequestOptions}),
246 | provide(ResponseOptions, {useClass: BaseResponseOptions}),
247 |
248 | provide(BrowserXhr, {useClass: NodeXhr}),
249 | provide(ConnectionBackend, {useClass: NodeBackend}),
250 |
251 | provide(Http, {useClass: NgPreloadCacheHttp})
252 | ];
253 |
--------------------------------------------------------------------------------
8 |
9 | 
10 |
11 |
38 |
48 |
51 |
52 | `;
53 |
54 | export function bootstrapFunction(appUrl: string): string {
55 | return `
56 |
71 | `;
72 | };
73 |
74 | export var bootstrapApp = `
75 |
80 | `;
81 |
82 | export function buildScripts(scripts: any, appUrl?: string): string {
83 | // figure out what scripts to inject
84 | return (scripts === false ? '' : (
85 | (scripts.preboot === true ? prebootScript : '') +
86 | (scripts.angular === true ? angularScript : '') +
87 | (scripts.bootstrapButton === true ? angularScript : '') +
88 | (scripts.bootstrapFunction === true ? bootstrapFunction(appUrl || '') : '') +
89 | (scripts.bootstrapApp === true ? angularScript : '')
90 | )
91 | );
92 | }
93 |
94 | // TODO: find better ways to configure the App initial state
95 | // to pay off this technical debt
96 | // currently checking for explicit values
97 | export function buildClientScripts(html: string, options: any): string {
98 | return html
99 | .replace(
100 | selectorRegExpFactory('preboot'),
101 | ((options.preboot === false) ? '' : prebootScript)
102 | )
103 | .replace(
104 | selectorRegExpFactory('angular'),
105 | ((options.angular === false) ? '' : '$1' + angularScript + '$3')
106 | )
107 | .replace(
108 | selectorRegExpFactory('bootstrap'),
109 | '$1' +
110 | ((options.bootstrap === false) ? (
111 | bootstrapButton +
112 | bootstrapFunction(options.componentUrl)
113 | ) : (
114 | (
115 | (options.client === undefined || options.server === undefined) ?
116 | '' : (options.client === false) ? '' : bootstrapButton
117 | ) +
118 | bootstrapFunction(options.componentUrl) +
119 | ((options.client === false) ? '' : bootstrapApp)
120 | )) +
121 | '$3'
122 | );
123 | }
124 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "version": "1.5.0",
3 | "compilerOptions": {
4 | "target": "es5",
5 | "module": "commonjs",
6 | "declaration": false,
7 | "noImplicitAny": false,
8 | "removeComments": false,
9 | "noLib": false,
10 | "emitDecoratorMetadata": true,
11 | "experimentalDecorators": true,
12 | "sourceMap": true,
13 | "listFiles": false,
14 | "outDir": "dist"
15 | },
16 | "files": [
17 | "tsd_typings/tsd.d.ts",
18 | "custom_typings/_custom.d.ts",
19 | "modules/index.ts",
20 | "modules/preboot/client.ts",
21 | "modules/preboot/server.ts",
22 | "modules/preboot/src/client/buffer_manager.ts",
23 | "modules/preboot/src/client/dom.ts",
24 | "modules/preboot/src/client/event_manager.ts",
25 | "modules/preboot/src/client/log.ts",
26 | "modules/preboot/src/client/preboot_client.ts",
27 | "modules/preboot/src/client/freeze/freeze_with_spinner.ts",
28 | "modules/preboot/src/client/listen/listen_by_attributes.ts",
29 | "modules/preboot/src/client/listen/listen_by_event_bindings.ts",
30 | "modules/preboot/src/client/listen/listen_by_selectors.ts",
31 | "modules/preboot/src/client/replay/replay_after_hydrate.ts",
32 | "modules/preboot/src/client/replay/replay_after_rerender.ts",
33 | "modules/preboot/src/server/client_code_generator.ts",
34 | "modules/preboot/src/server/normalize.ts",
35 | "modules/preboot/src/server/preboot_server.ts",
36 | "modules/preboot/src/server/presets.ts",
37 | "modules/preboot/src/server/utils.ts",
38 | "modules/preboot/test/preboot_karma.ts",
39 | "modules/preboot/test/server/client_code_generator_spec.ts",
40 | "modules/preboot/test/server/normalize_spec.ts",
41 | "modules/preboot/test/server/presets_spec.ts",
42 | "modules/preboot/test/server/utils_spec.ts",
43 | "modules/preboot/test/client/buffer_manager_spec.ts",
44 | "modules/preboot/test/client/dom_spec.ts",
45 | "modules/preboot/test/client/event_manager_spec.ts",
46 | "modules/preboot/test/client/log_spec.ts",
47 | "modules/preboot/test/client/freeze/freeze_with_spinner_spec.ts",
48 | "modules/preboot/test/client/listen/listen_by_attributes_spec.ts",
49 | "modules/preboot/test/client/listen/listen_by_event_bindings_spec.ts",
50 | "modules/preboot/test/client/listen/listen_by_selectors_spec.ts",
51 | "modules/preboot/test/client/replay/replay_after_hydrate_spec.ts",
52 | "modules/preboot/test/client/replay/replay_after_rerender_spec.ts",
53 | "modules/universal/server/index.ts",
54 | "modules/universal/server/server.ts",
55 | "modules/universal/server/src/platform/node.ts",
56 | "modules/universal/server/src/express/engine.ts",
57 | "modules/universal/server/src/directives/server_form.ts",
58 | "modules/universal/server/src/http/server_http.ts",
59 | "modules/universal/server/src/router/server_router.ts",
60 | "modules/universal/server/src/render/server_dom_renderer.ts",
61 | "modules/universal/server/src/ng_scripts.ts",
62 | "modules/universal/server/src/helper.ts",
63 | "modules/universal/server/src/render.ts",
64 | "modules/universal/server/src/server_patch.ts",
65 | "modules/universal/server/src/stringifyElement.ts",
66 | "modules/universal/server/test/router_server_spec.ts",
67 | "modules/universal/client/index.ts",
68 | "modules/universal/client/client.ts",
69 | "modules/universal/client/src/ng_preload_cache.ts",
70 | "examples/app/server/api.ts",
71 | "examples/app/server/routes.ts",
72 | "examples/app/server/server.ts",
73 | "examples/app/universal/test_page/app.ts",
74 | "examples/app/universal/todo/app.ts"
75 | ],
76 | "exclude": [
77 | "modules/universal/client/test",
78 | "modules/universal/server/test",
79 | "modules/universal/node_modules",
80 | "preboot/test",
81 | "preboot/node_modules",
82 | "node_modules"
83 | ],
84 | "formatCodeOptions": {
85 | "indentSize": 2,
86 | "tabSize": 2,
87 | "newLineCharacter": "\r\n",
88 | "convertTabsToSpaces": true,
89 | "insertSpaceAfterCommaDelimiter": true,
90 | "insertSpaceAfterSemicolonInForStatements": true,
91 | "insertSpaceBeforeAndAfterBinaryOperators": true,
92 | "insertSpaceAfterKeywordsInControlFlowStatements": true,
93 | "insertSpaceAfterFunctionKeywordForAnonymousFunctions": true,
94 | "insertSpaceAfterOpeningAndBeforeClosingNonemptyParenthesis": false,
95 | "placeOpenBraceOnNewLineForFunctions": false,
96 | "placeOpenBraceOnNewLineForControlBlocks": false
97 | }
98 | }
99 |
--------------------------------------------------------------------------------
/modules/preboot/src/client/preboot_client.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * This is the main entry point for preboot on the client side.
3 | * The primary methods are:
4 | * init() - called automatically to initialize preboot according to options
5 | * start() - when preboot should start listening to events
6 | * done() - when preboot should start replaying events
7 | */
8 | import * as dom from './dom';
9 | import * as eventManager from './event_manager';
10 | import * as bufferManager from './buffer_manager';
11 | import * as logManager from './log';
12 | import * as freezeSpin from './freeze/freeze_with_spinner';
13 | import {PrebootOptions} from '../interfaces/preboot_options';
14 |
15 | // this is an impl of PrebootRef which can be passed into other client modules
16 | // so they don't have to directly ref dom or log. this used so that users can
17 | // write plugin strategies which get this object as an input param.
18 | // note that log is defined this way because browserify can blank it out.
19 | /* tslint:disable:no-empty */
20 | let preboot = {
21 | dom: dom,
22 | log: logManager.log || function () {}
23 | };
24 |
25 | // in each client-side module, we store state in an object so we can mock
26 | // it out during testing and easily reset it as necessary
27 | let state = {
28 | canComplete: true, // set to false if preboot paused through an event
29 | completeCalled: false, // set to true once the completion event has been raised
30 | freeze: null, // only used if freeze option is passed in
31 | opts: null,
32 | started: false
33 | };
34 |
35 | /**
36 | * Once bootstrap has compled, we replay events,
37 | * switch buffer and then cleanup
38 | */
39 | export function complete() {
40 | preboot.log(2, eventManager.state.events);
41 |
42 | // track that complete has been called
43 | state.completeCalled = true;
44 |
45 | // if we can't complete (i.e. preboot paused), just return right away
46 | if (!state.canComplete) { return; }
47 |
48 | // else we can complete, so get started with events
49 | let opts = state.opts;
50 | eventManager.replayEvents(preboot, opts); // replay events on client DOM
51 | if (opts.buffer) { bufferManager.switchBuffer(preboot); } // switch from server to client buffer
52 | if (opts.freeze) { state.freeze.cleanup(preboot); } // cleanup freeze divs like overlay
53 | eventManager.cleanup(preboot, opts); // cleanup event listeners
54 | }
55 |
56 | /**
57 | * Get function to run once window has loaded
58 | */
59 | function load() {
60 | let opts = state.opts;
61 |
62 | // re-initialize dom now that we have the body
63 | dom.init({ window: window });
64 |
65 | // make sure the app root is set
66 | dom.updateRoots(dom.getDocumentNode(opts.appRoot));
67 |
68 | // if we are buffering, need to switch around the divs
69 | if (opts.buffer) { bufferManager.prep(preboot); }
70 |
71 | // if we could potentially freeze the UI, we need to prep (i.e. to add divs for overlay, etc.)
72 | // note: will need to alter this logic when we have more than one freeze strategy
73 | if (opts.freeze) {
74 | state.freeze = opts.freeze.name === 'spinner' ? freezeSpin : opts.freeze;
75 | state.freeze.prep(preboot, opts);
76 | }
77 |
78 | // start listening to events
79 | eventManager.startListening(preboot, opts);
80 | };
81 |
82 | /**
83 | * Resume the completion process; if complete already called,
84 | * call it again right away
85 | */
86 | function resume() {
87 | state.canComplete = true;
88 |
89 | if (state.completeCalled) {
90 |
91 | // using setTimeout to fix weird bug where err thrown on
92 | // serverRoot.remove() in buffer switch
93 | setTimeout(complete, 10);
94 | }
95 | }
96 |
97 | /**
98 | * Initialization is really simple. Just save the options and set
99 | * the window object. Most stuff happens with start()
100 | */
101 | export function init(opts: PrebootOptions) {
102 | state.opts = opts;
103 | preboot.log(1, opts);
104 | dom.init({ window: window });
105 | }
106 |
107 | /**
108 | * Start preboot by starting to record events
109 | */
110 | export function start() {
111 | let opts = state.opts;
112 |
113 | // we can only start once, so don't do anything if called multiple times
114 | if (state.started) { return; }
115 |
116 | // initialize the window
117 | dom.init({ window: window });
118 |
119 | // if body there, then run load handler right away, otherwise register for onLoad
120 | dom.state.body ? load() : dom.onLoad(load);
121 |
122 | // set up other handlers
123 | dom.on(opts.pauseEvent, () => state.canComplete = false);
124 | dom.on(opts.resumeEvent, resume);
125 | dom.on(opts.completeEvent, complete);
126 | }
127 |
--------------------------------------------------------------------------------
/modules/preboot/test/client/buffer_manager_spec.ts:
--------------------------------------------------------------------------------
1 | /// todos
43 | 50 |-
61 |
62 |
-
66 |
67 | 69 | 70 | 74 | 75 | 76 | 77 | 78 |79 | 80 |81 | 82 | 87 | 88 |89 | 90 |
91 |
Hello Server Renderer
45 |test binding {{ value }}
46 | {{ value }} 47 | {{ value }} 48 | 49 | 50 | 54 | 55 |
56 |
61 | // App.testing()
57 | {{ testing() | json }}
58 | // App.clickingTest()
59 | {{ buttonTest | json }}
60 |
62 |
68 | {{ value }}
69 |
70 |
71 |
72 |
73 |
74 |
75 |
76 |
77 |
78 | NgIf true
79 |
80 |
81 | -
82 |
-
83 |
87 |
{{ item | json }}88 |
89 |
92 |
93 |
94 |
95 |
96 |
97 |
98 |
99 | Problem with default component state and stateful DOM
100 |
101 |
102 | {{ testingInput }}
103 |