First draft of the all package

Author: hansl

scripts/ci/forbidden-identifiers.js

@@ -185,7 +185,7 @@ function isRelativeScopeImport(fileName, line) {
 
     // Creates a valid import statement, which uses the correct scope package.
     let importFilePath = path.relative(importScope.path, importPath);
-    let validImportPath = `@angular2-material/${importScope.name}/${importFilePath}`;
+    let validImportPath = `@angular/material/${importScope.name}/${importFilePath}`;
 
     return {
       fileScope: fileScope.name,

scripts/release/inline-resources.js

@@ -30,10 +30,14 @@ const writeFile = promiseify(fs.writeFile);
 
 
 function inlineResources(globs) {
+  if (typeof globs == 'string') {
+    globs = [globs];
+  }
+
   /**
    * For every argument, inline the templates and styles under it and write the new file.
    */
-  for (let pattern of globs) {
+  return Promise.all(globs.map(pattern => {
     if (pattern.indexOf('*') < 0) {
       // Argument is a directory target, add glob patterns to include every files.
       pattern = path.join(pattern, '**', '*');
@@ -43,17 +47,32 @@ function inlineResources(globs) {
       .filter(name => /\.js$/.test(name));  // Matches only JavaScript files.
 
     // Generate all files content with inlined templates.
-    files.forEach(filePath => {
-      readFile(filePath, 'utf-8')
-        .then(content => inlineTemplate(filePath, content))
-        .then(content => inlineStyle(filePath, content))
-        .then(content => removeModuleId(filePath, content))
+    return Promise.all(files.map(filePath => {
+      return readFile(filePath, 'utf-8')
+        .then(content => inlineResourcesFromString(content, url => {
+          return path.join(path.dirname(filePath), url);
+        }))
         .then(content => writeFile(filePath, content))
         .catch(err => {
           console.error('An error occured: ', err);
         });
-    });
-  }
+    }));
+  }));
+}
+
+/**
+ * Inline resources from a string content.
+ * @param content {string} The source file's content.
+ * @param urlResolver {Function} A resolver that takes a URL and return a path.
+ * @returns {string} The content with resources inlined.
+ */
+function inlineResourcesFromString(content, urlResolver) {
+  // Curry through the inlining functions.
+  return [
+    inlineTemplate,
+    inlineStyle,
+    removeModuleId
+  ].reduce((content, fn) => fn(content, urlResolver), content);
 }
 
 if (require.main === module) {
@@ -64,13 +83,13 @@ if (require.main === module) {
 /**
  * Inline the templates for a source file. Simply search for instances of `templateUrl: ...` and
  * replace with `template: ...` (with the content of the file included).
- * @param filePath {string} The path of the source file.
  * @param content {string} The source file's content.
+ * @param urlResolver {Function} A resolver that takes a URL and return a path.
  * @return {string} The content with all templates inlined.
  */
-function inlineTemplate(filePath, content) {
+function inlineTemplate(content, urlResolver) {
   return content.replace(/templateUrl:\s*'([^']+?\.html)'/g, function(m, templateUrl) {
-    const templateFile = path.join(path.dirname(filePath), templateUrl);
+    const templateFile = urlResolver(templateUrl);
     const templateContent = fs.readFileSync(templateFile, 'utf-8');
     const shortenedTemplate = templateContent
       .replace(/([\n\r]\s*)+/gm, ' ')
@@ -83,16 +102,16 @@ function inlineTemplate(filePath, content) {
 /**
  * Inline the styles for a source file. Simply search for instances of `styleUrls: [...]` and
  * replace with `styles: [...]` (with the content of the file included).
- * @param filePath {string} The path of the source file.
+ * @param urlResolver {Function} A resolver that takes a URL and return a path.
  * @param content {string} The source file's content.
  * @return {string} The content with all styles inlined.
  */
-function inlineStyle(filePath, content) {
+function inlineStyle(content, urlResolver) {
   return content.replace(/styleUrls:\s*(\[[\s\S]*?\])/gm, function(m, styleUrls) {
     const urls = eval(styleUrls);
     return 'styles: ['
       + urls.map(styleUrl => {
-          const styleFile = path.join(path.dirname(filePath), styleUrl);
+          const styleFile = urlResolver(styleUrl);
           const styleContent = fs.readFileSync(styleFile, 'utf-8');
           const shortenedStyle = styleContent
             .replace(/([\n\r]\s*)+/gm, ' ')
@@ -107,13 +126,13 @@ function inlineStyle(filePath, content) {
 
 /**
  * Remove every mention of `moduleId: module.id`.
- * @param _ {string} The file path of the source file, currently ignored.
  * @param content {string} The source file's content.
  * @returns {string} The content with all moduleId: mentions removed.
  */
-function removeModuleId(_, content) {
+function removeModuleId(content) {
   return content.replace(/\s*moduleId:\s*module\.id\s*,?\s*/gm, '');
 }
 
 
 module.exports = inlineResources;
+module.exports.inlineResourcesFromString = inlineResourcesFromString;

src/demo-app/button-toggle/button-toggle-demo.ts

@@ -1,5 +1,5 @@
 import {Component} from '@angular/core';
-import {MdUniqueSelectionDispatcher} from '@angular2-material/core';
+import {MdUniqueSelectionDispatcher} from '@angular/material';
 
 @Component({
   moduleId: module.id,

src/demo-app/demo-app-module.ts

@@ -4,7 +4,7 @@ import {HttpModule} from '@angular/http';
 import {FormsModule} from '@angular/forms';
 import {DemoApp, Home} from './demo-app/demo-app';
 import {RouterModule} from '@angular/router';
-import {MaterialModule} from '@angular2-material/all';
+import {MaterialModule} from '@angular/material';
 import {DEMO_APP_ROUTES} from './demo-app/routes';
 import {ProgressBarDemo} from './progress-bar/progress-bar-demo';
 import {JazzDialog, DialogDemo} from './dialog/dialog-demo';

src/demo-app/dialog/dialog-demo.ts

@@ -1,5 +1,5 @@
 import {Component, ViewContainerRef} from '@angular/core';
-import {MdDialog, MdDialogConfig, MdDialogRef} from '@angular2-material/dialog';
+import {MdDialog, MdDialogConfig, MdDialogRef} from '@angular/material';
 
 @Component({
   moduleId: module.id,

src/demo-app/grid-list/grid-list-demo.ts

@@ -1,5 +1,5 @@
 import {Component} from '@angular/core';
-import {MdIconRegistry} from '@angular2-material/icon';
+import {MdIconRegistry} from '@angular/material';
 
 
 @Component({

src/demo-app/icon/icon-demo.ts

@@ -1,5 +1,5 @@
 import {Component, ViewEncapsulation} from '@angular/core';
-import {MdIconRegistry} from '@angular2-material/icon';
+import {MdIconRegistry} from '@angular/material';
 
 @Component({
   moduleId: module.id,

src/demo-app/index.html

@@ -8,7 +8,7 @@
 
   <link rel="icon" type="image/x-icon" href="favicon.ico">
   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
-  <link href="@angular2-material/core/theming/prebuilt/indigo-pink.css" rel="stylesheet">
+  <link href="@angular/material/core/theming/prebuilt/indigo-pink.css" rel="stylesheet">
 
   <!-- FontAwesome for md-icon demo. -->
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

src/demo-app/live-announcer/live-announcer-demo.ts

@@ -1,5 +1,5 @@
 import {Component} from '@angular/core';
-import {MdLiveAnnouncer} from '@angular2-material/core';
+import {MdLiveAnnouncer} from '@angular/material';
 
 @Component({
   moduleId: module.id,

src/demo-app/overlay/overlay-demo.ts

@@ -13,7 +13,7 @@ import {
     ComponentPortal,
     Portal,
     TemplatePortalDirective,
-} from '@angular2-material/core';
+} from '@angular/material';
 
 
 @Component({

src/demo-app/portal/portal-demo.ts

@@ -3,7 +3,7 @@ import {
     Portal,
     ComponentPortal,
     TemplatePortalDirective,
-} from '@angular2-material/core';
+} from '@angular/material';
 
 
 @Component({

src/demo-app/ripple/ripple-demo.ts

@@ -1,5 +1,5 @@
 import {Component, ViewChild} from '@angular/core';
-import {MdRipple} from '@angular2-material/core';
+import {MdRipple} from '@angular/material';
 
 
 @Component({

src/demo-app/system-config.ts

@@ -2,70 +2,17 @@
  * User Configuration.
  **********************************************************************************************/
 
-const components = [
-  'all',
-  'button',
-  'card',
-  'checkbox',
-  'dialog',
-  'grid-list',
-  'icon',
-  'input',
-  'list',
-  'menu',
-  'progress-bar',
-  'progress-circle',
-  'radio',
-  'select',
-  'sidenav',
-  'slider',
-  'slide-toggle',
-  'button-toggle',
-  'tabs',
-  'toolbar',
-  'tooltip',
-];
-
-
-/** User packages configuration. */
-const packages: any = {
-  '@angular2-material/core': {
-    format: 'cjs',
-    main: 'core.umd.js'
-  },
-  // Set the default extension for the root package, because otherwise the demo-app can't
-  // be built within the production mode. Due to missing file extensions.
-  '.': {
-    defaultExtension: 'js'
-  }
-};
-components.forEach(name => {
-  packages[`@angular2-material/${name}`] = {
-    format: 'cjs',
-    main: `${name}.umd.js`
-  };
-});
-
-
-////////////////////////////////////////////////////////////////////////////////////////////////
-/***********************************************************************************************
- * Everything underneath this line is managed by the CLI.
- **********************************************************************************************/
-const angularPackages = {
+const angularDeps = [
   // Angular specific barrels.
-  '@angular/core': { main: 'bundles/core.umd.js'},
-  '@angular/core/testing': { main: 'bundles/core-testing.umd.js'},
-  '@angular/common': { main: 'bundles/common.umd.js'},
-  '@angular/compiler': { main: 'bundles/compiler.umd.js'},
-  '@angular/http': { main: 'bundles/http.umd.js'},
-  '@angular/forms': { main: 'bundles/forms.umd.js'},
-  '@angular/router': { main: 'bundles/router.umd.js'},
-  '@angular/platform-browser': { main: 'bundles/platform-browser.umd.js'},
-  '@angular/platform-browser-dynamic': { main: 'bundles/platform-browser-dynamic.umd.js'},
-  '@angular/platform-browser-dynamic/testing': {
-    main: 'bundles/platform-browser-dynamic-testing.umd.js'
-  },
-};
+  '@angular/core',
+  '@angular/common',
+  '@angular/compiler',
+  '@angular/http',
+  '@angular/forms',
+  '@angular/router',
+  '@angular/platform-browser',
+  '@angular/platform-browser-dynamic',
+];
 
 const barrels: string[] = [
   // Thirdparty barrels.
@@ -78,27 +25,40 @@ const barrels: string[] = [
   'live-announcer',
   'portal',
   'overlay',
-  ...components
-  /** @cli-barrel */
 ];
 
-const _cliSystemConfig: any = angularPackages;
+
+const angularPackages: any = angularDeps.reduce((config: any, pkg: string) => {
+  config[pkg] = { main: `bundles/${pkg.replace('@angular/', '')}.umd.js` };
+  return config;
+}, {});
 barrels.forEach((barrelName: string) => {
-  _cliSystemConfig[barrelName] = { main: 'index' };
+  angularPackages[barrelName] = { main: 'index' };
 });
 
+const angularMaps: any = angularDeps.reduce((config: any, pkg: string) => {
+  config[pkg] = `vendor/${pkg}`;
+  return config;
+}, {});
+
 /** Type declaration for ambient System. */
 declare var System: any;
 
 // Apply the CLI SystemJS configuration.
 System.config({
-  map: {
-    '@angular': 'vendor/@angular',
+  map: Object.assign({
     'rxjs': 'vendor/rxjs',
-    'main': 'main.js'
-  },
-  packages: _cliSystemConfig
+    'main': 'main.js',
+  }, angularMaps),
+  packages: Object.assign({
+    '@angular/material': {
+      format: 'cjs',
+      main: 'material.umd.js'
+    },
+    // Set the default extension for the root package, because otherwise the demo-app can't
+    // be built within the production mode. Due to missing file extensions.
+    '.': {
+      defaultExtension: 'js'
+    }
+  }, angularPackages)
 });
-
-// Apply the user's configuration.
-System.config({ packages });

src/demo-app/tooltip/tooltip-demo.ts

@@ -1,5 +1,5 @@
 import {Component} from '@angular/core';
-import {TooltipPosition} from '@angular2-material/tooltip';
+import {TooltipPosition} from '@angular/material';
 
 
 @Component({

src/demo-app/tsconfig.json

@@ -15,12 +15,11 @@
     "stripInternal": true,
     "baseUrl": "",
     "typeRoots": [
-      "../../node_modules/@types",
-      "../../node_modules"
+      "../../node_modules/@types"
     ],
     "paths": {
-      "@angular2-material/*": [
-        "../../dist/@angular2-material/*"
+      "@angular/material": [
+        "../../dist/@angular/material"
       ]
     },
     "types": [

src/e2e-app/e2e-app-module.ts

@@ -6,7 +6,7 @@ import {IconE2E} from './icon/icon-e2e';
 import {ButtonE2E} from './button/button-e2e';
 import {MenuE2E} from './menu/menu-e2e';
 import {BasicTabs} from './tabs/tabs-e2e';
-import {MaterialModule} from '@angular2-material/all';
+import {MaterialModule} from '@angular/material';
 import {E2E_APP_ROUTES} from './e2e-app/routes';
 
 

src/e2e-app/index.html

@@ -8,7 +8,7 @@
 
   <link rel="icon" type="image/x-icon" href="favicon.ico">
   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
-  <link href="@angular2-material/core/theming/prebuilt/indigo-pink.css" rel="stylesheet">
+  <link href="@angular/material/core/theming/prebuilt/indigo-pink.css" rel="stylesheet">
 
   <!-- FontAwesome for md-icon demo. -->
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">