diff --git a/Gruntfile.js b/Gruntfile.js index 89a71cf5..18f92267 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -246,6 +246,12 @@ module.exports = function (grunt) { }, webpack: { singleJs: require('./webpack.config.js') + }, + + universal: { + examples: { + src: 'index.html' + } } }); @@ -355,6 +361,97 @@ module.exports = function (grunt) { }); }); + // NOTE: This task does not work. It is WIP. + grunt.registerMultiTask('universal', 'Prerender examples app as static HTML', function () { + var done = this.async(); + /* + * based on angular2-grunt-prerender + * https://github.com/angular/universal + * + * Copyright (c) 2016 Wassim Chegham + * Licensed under the MIT license. + */ + try { + var proxyquire = require('proxyquire'); + var zone = require('zone.js'); + var reflect = require('reflect-metadata'); + var provide = require('angular2/core'); + var router = require('angular2/router'); + var ng2material = require('./ng2-material/all'); + ng2material['@global'] = true; + ng2material['@noCallThru'] = true; + var app = proxyquire('./examples/app', { + 'ng2-material/all': ng2material + }); + var all = proxyquire('./examples/all', { + 'ng2-material/all': ng2material + }); + var universal = require('angular2-universal-preview'); + var options = this.options({ + component: [app.DemosApp], + providers: ng2material.MATERIAL_NODE_PROVIDERS, + platformProviders: [ + universal.NODE_LOCATION_PROVIDERS, + ], + directives: ng2material.MATERIAL_DIRECTIVES.concat(all.DEMO_DIRECTIVES), + preboot: false, + separator: '\r\n' + }); + var angular2Prerender = function (file) { + var clientHtml = file.toString(); + // bootstrap and render component to string + var bootloader = options.bootloader; + if (!options.bootloader) { + options.bootloader = { + component: options.component, + document: universal.parseDocument(clientHtml), + providers: options.providers, + componentProviders: options.componentProviders, + platformProviders: options.platformProviders, + directives: options.directives, + preboot: options.preboot + }; + } + bootloader = universal.Bootloader.create(options.bootloader); + return bootloader.serializeApplication().then(function (html) { + return new Buffer(html); + }); + }; + this.files.forEach(function (f) { + var src = f.src.filter(function (filepath) { + if (!grunt.file.exists(filepath)) { + grunt.log.warn('Source file "' + filepath + '" not found.'); + return false; + } + else { + return true; + } + }) + .map(function (filepath) { + return grunt.file.read(filepath); + }) + .join(grunt.util.normalizelf(options.separator)); + // Handle options. + angular2Prerender(src) + .then(function (buffer) { + return src = buffer; + }) + .then(function (_src) { + return grunt.file.write(f.dest, _src); + }) + .then(function (_) { + return grunt.log.writeln('File "' + f.dest + '" created.'); + done(); + }); + }); + + } + catch (e) { + console.error(e.stack); + return; + } + + }); grunt.registerTask('site-meta', 'Build metadata files describing example usages', function (tag) { var done = this.async(); @@ -379,7 +476,7 @@ module.exports = function (grunt) { tasks.push(function buildCoverage() { // Parse Lcov report and generate `coverage.json` file for site. - var parse = require('lcov-parse'); + var parse = require('lcov-parse'); parse('.coverage/lcov.info', function (err, data) { if (err) { grunt.log.ok('skipping code coverage because lcov.info is missing'); diff --git a/examples/app.ts b/examples/app.ts index e74c5bc5..e9bf90ec 100644 --- a/examples/app.ts +++ b/examples/app.ts @@ -1,24 +1,14 @@ -import {Component, enableProdMode, bind, Input, OnDestroy, ApplicationRef} from "angular2/core"; -import {bootstrap} from "angular2/platform/browser"; -import { - ROUTER_PROVIDERS, - ROUTER_DIRECTIVES, - RouteConfig, - HashLocationStrategy, - LocationStrategy, - Router -} from "angular2/router"; -import {MATERIAL_DIRECTIVES, MATERIAL_PROVIDERS} from "../ng2-material/all"; +import {Component, Input, OnDestroy, ApplicationRef} from "angular2/core"; +import {ROUTER_DIRECTIVES, RouteConfig, Router} from "angular2/router"; import {DEMO_DIRECTIVES} from "./all"; import Example from "./example"; -import {Http, Response, HTTP_PROVIDERS} from "angular2/http"; +import {Http, Response} from "angular2/http"; import {IndexPage} from "./routes/index"; import {ComponentPage} from "./routes/component"; import {ComponentsService, IComponentMeta} from "./services/components"; import {NavigationService} from "./services/navigation"; -import {VersionService} from "./services/version"; -import {SidenavService} from "ng2-material/components/sidenav/sidenav_service"; -import {Media} from "ng2-material/core/util/media"; +import {Media, MATERIAL_DIRECTIVES, SidenavService} from "ng2-material/all"; +// import {bootstrap} from "angular2/bootstrap"; /** * Describe an example that can be dynamically loaded. @@ -35,7 +25,6 @@ export interface IExampleData { {path: '/', name: 'Index', component: IndexPage, useAsDefault: true}, {path: '/components/:id', name: 'Component', component: ComponentPage} ]) - @Component({ selector: 'demos-app', templateUrl: 'examples/app.html', @@ -49,7 +38,7 @@ export class DemosApp implements OnDestroy { static SIDE_MENU_BREAKPOINT: string = 'gt-md'; @Input() - fullPage: boolean = Media.hasMedia(DemosApp.SIDE_MENU_BREAKPOINT); + fullPage: boolean = this.media.hasMedia(DemosApp.SIDE_MENU_BREAKPOINT); public site: string = 'Angular2 Material'; @@ -96,15 +85,3 @@ export class DemosApp implements OnDestroy { } } - -let appProviders = [ - HTTP_PROVIDERS, ROUTER_PROVIDERS, MATERIAL_PROVIDERS, - ComponentsService, NavigationService, VersionService, - bind(LocationStrategy).toClass(HashLocationStrategy) -]; - -if (window.location.href.indexOf('github.com') !== -1) { - enableProdMode(); -} - -bootstrap(DemosApp, appProviders); diff --git a/examples/components/dialog/basic_usage.ts b/examples/components/dialog/basic_usage.ts index 325652ca..c82c6e79 100644 --- a/examples/components/dialog/basic_usage.ts +++ b/examples/components/dialog/basic_usage.ts @@ -1,8 +1,6 @@ import {Component, ElementRef} from "angular2/core"; -import {MATERIAL_DIRECTIVES, MdDialog} from "ng2-material/all"; +import {MATERIAL_DIRECTIVES, MdDialog, Media, MdDialogConfig, MdDialogBasic, MdDialogRef} from "ng2-material/all"; import {DOM} from "angular2/src/platform/dom/dom_adapter"; -import {MdDialogConfig, MdDialogBasic, MdDialogRef} from "ng2-material/components/dialog/dialog"; -import {Media} from "../../../ng2-material/core/util/media"; @Component({ selector: 'dialog-basic-usage', @@ -13,9 +11,11 @@ import {Media} from "../../../ng2-material/core/util/media"; export default class DialogBasicUsage { status = ' '; - customFullscreen = Media.hasMedia('xs') || Media.hasMedia('sm'); + customFullscreen = this.media.hasMedia('xs') || this.media.hasMedia('sm'); - constructor(public dialog: MdDialog, public element: ElementRef) { + constructor(public dialog: MdDialog, + public media: Media, + public element: ElementRef) { } diff --git a/examples/components/sidenav/basic_usage.ts b/examples/components/sidenav/basic_usage.ts index b44a5923..14491e4e 100644 --- a/examples/components/sidenav/basic_usage.ts +++ b/examples/components/sidenav/basic_usage.ts @@ -10,12 +10,13 @@ import {MATERIAL_DIRECTIVES, Media, SidenavService} from "ng2-material/all"; }) export default class SidenavBasicUsage { - constructor(public sidenav: SidenavService) { + constructor(public sidenav: SidenavService, + public media: Media) { } hasMedia(breakSize: string): boolean { - return Media.hasMedia(breakSize); + return this.media.hasMedia(breakSize); } open(name: string) { diff --git a/examples/example.ts b/examples/example.ts index 8dc48d01..d20ddb53 100644 --- a/examples/example.ts +++ b/examples/example.ts @@ -1,11 +1,10 @@ import {Component, Input, DynamicComponentLoader, ElementRef, ComponentRef, Query, QueryList} from "angular2/core"; import {IExampleData} from "./app"; import {DEMO_DIRECTIVES} from "./all"; -import {MATERIAL_DIRECTIVES} from "ng2-material/all"; +import {MATERIAL_DIRECTIVES, MdTabs} from "ng2-material/all"; import {Http, Response} from "angular2/http"; import {Highlight} from "./highlight"; import {TimerWrapper} from "angular2/src/facade/async"; -import {MdTabs} from "ng2-material/components/tabs/tabs"; export interface ISourceFile { diff --git a/examples/platform/browser/bootstrap.ts b/examples/platform/browser/bootstrap.ts new file mode 100644 index 00000000..7e282675 --- /dev/null +++ b/examples/platform/browser/bootstrap.ts @@ -0,0 +1,18 @@ +import {bind, enableProdMode} from "angular2/core"; +import {bootstrap} from "angular2/platform/browser"; +import {ROUTER_PROVIDERS, HashLocationStrategy, LocationStrategy} from "angular2/router"; +import {MATERIAL_BROWSER_PROVIDERS} from "ng2-material/all"; +import {HTTP_PROVIDERS} from "angular2/http"; +import {ComponentsService} from "../../services/components"; +import {NavigationService} from "../../services/navigation"; +import {VersionService} from "../../services/version"; +import {DemosApp} from "../../app"; + +if (window.location.href.indexOf('github.com') !== -1) { + enableProdMode(); +} +bootstrap(DemosApp, [ + HTTP_PROVIDERS, ROUTER_PROVIDERS, MATERIAL_BROWSER_PROVIDERS, + ComponentsService, NavigationService, VersionService, + bind(LocationStrategy).toClass(HashLocationStrategy) +]); diff --git a/examples/platform/node/bootstrap.ts b/examples/platform/node/bootstrap.ts new file mode 100644 index 00000000..a80416d9 --- /dev/null +++ b/examples/platform/node/bootstrap.ts @@ -0,0 +1,13 @@ +import {bootstrap} from "angular2-universal-preview"; +import {ROUTER_PROVIDERS} from "angular2/router"; +import {MATERIAL_NODE_PROVIDERS} from "ng2-material/all"; +import {HTTP_PROVIDERS} from "angular2/http"; +import {ComponentsService} from "../../services/components"; +import {NavigationService} from "../../services/navigation"; +import {VersionService} from "../../services/version"; +import {DemosApp} from "../../app"; + +bootstrap(DemosApp, [ + HTTP_PROVIDERS, ROUTER_PROVIDERS, MATERIAL_NODE_PROVIDERS, + ComponentsService, NavigationService, VersionService +]); diff --git a/examples/routes/component.ts b/examples/routes/component.ts index 7f76be82..361e4d75 100644 --- a/examples/routes/component.ts +++ b/examples/routes/component.ts @@ -1,11 +1,10 @@ import {Component, OnInit} from "angular2/core"; import {RouteParams, ROUTER_DIRECTIVES} from "angular2/router"; import {ComponentsService, IComponentMeta} from "../services/components"; -import {MATERIAL_DIRECTIVES} from "../../ng2-material/all"; +import {MATERIAL_DIRECTIVES, SidenavService} from "ng2-material/all"; import Example from "../example"; import {NavigationService} from "../services/navigation"; import {DOM} from "angular2/src/platform/dom/dom_adapter"; -import {SidenavService} from "../../ng2-material/components/sidenav/sidenav_service"; import {TimerWrapper} from "angular2/src/facade/async"; @Component({ diff --git a/examples/routes/index.ts b/examples/routes/index.ts index 00874281..d9427d15 100644 --- a/examples/routes/index.ts +++ b/examples/routes/index.ts @@ -2,10 +2,9 @@ import {Component, OnInit} from "angular2/core"; import {ROUTER_DIRECTIVES} from "angular2/router"; import {ComponentsService, IComponentMeta} from "../services/components"; import {NavigationService} from "../services/navigation"; -import {MATERIAL_DIRECTIVES} from "ng2-material/all"; +import {MATERIAL_DIRECTIVES, SidenavService} from "ng2-material/all"; import {DOM} from "angular2/src/platform/dom/dom_adapter"; import {Highlight} from "../highlight"; -import {SidenavService} from "../../ng2-material/components/sidenav/sidenav_service"; import {TimerWrapper} from "angular2/src/facade/async"; import {Http, Response} from "angular2/http"; diff --git a/index.html b/index.html index 50a116d4..5bae176b 100644 --- a/index.html +++ b/index.html @@ -45,7 +45,8 @@