feat(packaging): move packaging to a single "@angular/material" (#1286)

Author: hansl

scripts/ci/forbidden-identifiers.js

@@ -29,7 +29,7 @@ const blocked_statements = [
 ];
 
 const sourceFolders = ['./src', './e2e'];
-const scopePackages = glob('src/lib/*');
+const libRoot = 'src/lib';
 const blockedRegex = new RegExp(blocked_statements.join('|'), 'g');
 const importRegex = /from\s+'(.*)';/g;
 
@@ -58,7 +58,9 @@ findTestFiles()
         lineCount++;
 
         let matches = line.match(blockedRegex);
-        let scopeImport = isRelativeScopeImport(fileName, line);
+        let scopeImport = path.relative(libRoot, fileName).startsWith('..')
+          ? isRelativeScopeImport(fileName, line)
+          : false;
 
         if (matches || scopeImport) {
 
@@ -155,6 +157,10 @@ function findChangedFiles() {
  * @param line Line to be checked.
  */
 function isRelativeScopeImport(fileName, line) {
+  if (fileName.startsWith(libRoot)) {
+    return false;
+  }
+
   let importMatch = importRegex.exec(line);
 
   // We have to reset the last index of the import regex, otherwise we
@@ -184,8 +190,7 @@ function isRelativeScopeImport(fileName, line) {
   if (fileScope.path !== importScope.path) {
 
     // 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`;
 
     return {
       fileScope: fileScope.name,
@@ -200,9 +205,7 @@ function isRelativeScopeImport(fileName, line) {
     filePath = path.normalize(filePath);
 
     // Iterate through all scope paths and try to find them inside of the file path.
-    var scopePath = scopePackages
-      .filter(scope => filePath.indexOf(path.normalize(scope)) !== -1)
-      .pop();
+    var scopePath = filePath.indexOf(path.normalize(libRoot)) == -1 ? libRoot : filePath;
 
     // Return an object containing the name of the scope and the associated path.
     return {

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

@@ -1,104 +1,34 @@
-/***********************************************************************************************
- * 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 = {
-  // 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'
-  },
-};
-
-const barrels: string[] = [
-  // Thirdparty barrels.
-  'rxjs',
-
-  // App specific barrels.
-  'demo-app',
-  'button-toggle',
-  'gestures',
-  'live-announcer',
-  'portal',
-  'overlay',
-  ...components
-  /** @cli-barrel */
-];
-
-const _cliSystemConfig: any = angularPackages;
-barrels.forEach((barrelName: string) => {
-  _cliSystemConfig[barrelName] = { main: 'index' };
-});
-
 /** Type declaration for ambient System. */
 declare var System: any;
 
 // Apply the CLI SystemJS configuration.
 System.config({
   map: {
-    '@angular': 'vendor/@angular',
     'rxjs': 'vendor/rxjs',
-    'main': 'main.js'
+    'main': 'main.js',
+
+    // Angular specific mappings.
+    '@angular/core': 'vendor/@angular/core/bundles/core.umd.js',
+    '@angular/common': 'vendor/@angular/common/bundles/common.umd.js',
+    '@angular/compiler': 'vendor/@angular/compiler/bundles/compiler.umd.js',
+    '@angular/http': 'vendor/@angular/http/bundles/http.umd.js',
+    '@angular/forms': 'vendor/@angular/forms/bundles/forms.umd.js',
+    '@angular/router': 'vendor/@angular/router/bundles/router.umd.js',
+    '@angular/platform-browser': 'vendor/@angular/platform-browser/bundles/platform-browser.umd.js',
+    '@angular/platform-browser-dynamic':
+      'vendor/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
   },
-  packages: _cliSystemConfig
+  packages: {
+    // Thirdparty barrels.
+    'rxjs': { main: 'index' },
+    '@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'
+    }
+  }
 });
-
-// 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": [