build: create material-examples package (#4046)

scripts/closure-compiler/build-devapp-bundle.sh

@@ -39,7 +39,7 @@ OPTS=(
 
   # List of path prefixes to be removed from ES6 & CommonJS modules.
   "--js_module_root=dist/packages"
-  "--js_module_root=dist/release"
+  "--js_module_root=dist/releases/material"
   "--js_module_root=node_modules/@angular/core"
   "--js_module_root=node_modules/@angular/common"
   "--js_module_root=node_modules/@angular/compiler"
@@ -57,7 +57,7 @@ OPTS=(
   "--debug"
 
   # Include the Material FESM bundle
-  dist/release/@angular/material.js
+  dist/releases/material/@angular/material.js
 
   # Include all Angular FESM bundles.
   node_modules/@angular/core/@angular/core.js

scripts/release/publish-build-artifacts.sh

@@ -8,7 +8,7 @@ set -e -o pipefail
 # Go to the project root directory
 cd $(dirname $0)/../..
 
-buildDir="dist/release"
+buildDir="dist/releases/material"
 buildVersion=$(sed -nE 's/^\s*"version": "(.*?)",$/\1/p' package.json)
 
 commitSha=$(git rev-parse --short HEAD)

src/lib/core/overlay/overlay-ref.ts

@@ -103,7 +103,7 @@ export class OverlayRef implements PortalHost {
     }
   }
 
-  /** Updates the text direction of the overlay panel. **/
+  /** Updates the text direction of the overlay panel. */
   private updateDirection() {
     this._pane.setAttribute('dir', this._state.direction);
   }

src/lib/core/overlay/overlay-state.ts

@@ -13,19 +13,19 @@ export class OverlayState {
   /** Whether the overlay has a backdrop. */
   hasBackdrop: boolean = false;
 
-  /** Custom class to add to the backdrop **/
+  /** Custom class to add to the backdrop */
   backdropClass: string = 'cdk-overlay-dark-backdrop';
 
-  /** The width of the overlay panel. If a number is provided, pixel units are assumed. **/
+  /** The width of the overlay panel. If a number is provided, pixel units are assumed. */
   width: number | string;
 
-  /** The height of the overlay panel. If a number is provided, pixel units are assumed. **/
+  /** The height of the overlay panel. If a number is provided, pixel units are assumed. */
   height: number | string;
 
-  /** The min-width of the overlay panel. If a number is provided, pixel units are assumed. **/
+  /** The min-width of the overlay panel. If a number is provided, pixel units are assumed. */
   minWidth: number | string;
 
-  /** The min-height of the overlay panel. If a number is provided, pixel units are assumed. **/
+  /** The min-height of the overlay panel. If a number is provided, pixel units are assumed. */
   minHeight: number | string;
 
   /** The direction of the text in the overlay panel. */

src/examples/autocomplete-overview/autocomplete-overview-example.ts → src/material-examples/autocomplete-overview/autocomplete-overview-example.ts

@@ -1,6 +1,8 @@
 import {Component} from '@angular/core';
 import {FormControl} from '@angular/forms';
+
 import 'rxjs/add/operator/startWith';
+import 'rxjs/add/operator/map';
 
 @Component({
   selector: 'autocomplete-overview-example',

src/material-examples/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "@angular/material-examples",
+  "version": "2.0.0-beta.3",
+  "description": "Angular Material Examples",
+  "main": "./bundles/material-examples.umd.js",
+  "module": "./@angular/material-examples.es5.js",
+  "es2015": "./@angular/material-examples.js",
+  "typings": "./material-examples.d.ts",
+  "private": true,
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/angular/material2.git"
+  },
+  "keywords": [
+    "angular",
+    "material",
+    "material design",
+    "components"
+  ],
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/angular/material2/issues"
+  },
+  "homepage": "https://github.com/angular/material2#readme",
+  "peerDependencies": {
+    "@angular/core": "^4.0.0",
+    "@angular/common": "^4.0.0",
+    "@angular/http": "^4.0.0"
+  }
+}

src/material-examples/public_api.ts

@@ -0,0 +1,2 @@
+export * from './example-data';
+export * from './example-module';

src/material-examples/tsconfig-build.json

@@ -0,0 +1,34 @@
+// TypeScript config file that is used to compile the examples. Target environment needs to be
+// ES2015 since the build process will create FESM bundles using rollup.
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "declaration": true,
+    "stripInternal": false,
+    "experimentalDecorators": true,
+    "module": "es2015",
+    "moduleResolution": "node",
+    "outDir": "../../dist/packages/examples",
+    "paths": {
+      "@angular/material": [
+        "../../dist/packages/material"
+      ]
+    },
+    "rootDir": ".",
+    "sourceMap": true,
+    "inlineSources": true,
+    "target": "es2015",
+    "lib": ["es2015", "dom"],
+    "skipLibCheck": true,
+    "types": []
+  },
+  "files": [
+    "public_api.ts"
+  ],
+  "angularCompilerOptions": {
+    "annotateForClosureCompiler": true,
+    "strictMetadataEmit": true,
+    "flatModuleOutFile": "index.js",
+    "skipTemplateCodegen": true
+  }
+}

src/tsconfig.json

@@ -10,6 +10,11 @@
     "inlineSources": true,
     "target": "es2015",
     "lib": ["es2015", "dom"],
-    "types": ["jasmine"]
+    "types": ["jasmine"],
+    "paths": {
+      "@angular/material": [
+        "../../dist/packages/material"
+      ]
+    }
   }
 }

tools/dgeni/processors/categorizer.js

@@ -18,7 +18,7 @@ module.exports = function categorizer() {
    * Decorates all class docs inside of the dgeni pipeline.
    * - Methods and properties of a class-doc will be extracted into separate variables.
    * - Identifies directives, services or NgModules and marks them them in class-doc.
-   **/
+   */
   function decorateClassDoc(classDoc) {
     // Resolve all methods and properties from the classDoc. Includes inherited docs.
     classDoc.methods = resolveMethods(classDoc);
@@ -42,7 +42,7 @@ module.exports = function categorizer() {
   /**
    * Method that will be called for each method doc. The parameters for the method-docs
    * will be normalized, so that they can be easily used inside of dgeni templates.
-   **/
+   */
   function decorateMethodDoc(methodDoc) {
     normalizeMethodParameters(methodDoc);
 
@@ -53,7 +53,7 @@ module.exports = function categorizer() {
   /**
    * Method that will be called for each property doc. Properties that are Angular inputs or
    * outputs will be marked. Aliases for the inputs or outputs will be stored as well.
-   **/
+   */
   function decoratePropertyDoc(propertyDoc) {
     propertyDoc.isDirectiveInput = isDirectiveInput(propertyDoc);
     propertyDoc.directiveInputAlias = getDirectiveInputAlias(propertyDoc);

tools/gulp/constants.ts

@@ -13,12 +13,11 @@ export const DIST_BUNDLES = join(DIST_ROOT, 'bundles');
 
 /** Output subdirectory where all library artifacts will be written (compiled JS, CSS, etc.) */
 export const DIST_MATERIAL = join(DIST_ROOT, 'packages', 'material');
-
-/** Output subdirectory where the npm package will be staged for publish */
-export const DIST_RELEASE = join(DIST_ROOT, 'release');
-
 export const DIST_DEMOAPP = join(DIST_ROOT, 'packages', 'demo-app');
 export const DIST_E2EAPP = join(DIST_ROOT, 'packages', 'e2e-app');
+export const DIST_EXAMPLES = join(DIST_ROOT, 'packages', 'examples');
+
+export const DIST_RELEASES = join(DIST_ROOT, 'releases');
 
 export const COVERAGE_RESULT_FILE = join(DIST_ROOT, 'coverage', 'coverage-summary.json');
 

tools/gulp/gulpfile.ts

@@ -12,3 +12,4 @@ import './tasks/aot';
 import './tasks/payload';
 import './tasks/coverage';
 import './tasks/library';
+import './tasks/examples';

tools/gulp/tasks/aot.ts

@@ -1,6 +1,6 @@
 import {task} from 'gulp';
 import {copySync} from 'fs-extra';
-import {DIST_DEMOAPP, DIST_RELEASE} from '../constants';
+import {DIST_DEMOAPP, DIST_RELEASES} from '../constants';
 import {sequenceTask, execNodeTask} from '../util/task_helpers';
 import {join} from 'path';
 
@@ -11,7 +11,9 @@ task('aot:deps', sequenceTask('build:devapp', ':package:release', 'aot:copy-rele
 
 // As a workaround for https://github.com/angular/angular/issues/12249, we need to
 // copy the Material ESM output inside of the demo-app output.
-task('aot:copy-release', () => copySync(DIST_RELEASE, join(DIST_DEMOAPP, 'material')));
+task('aot:copy-release', () => {
+  return copySync(join(DIST_RELEASES, 'material'), join(DIST_DEMOAPP, 'material'));
+});
 
 /** Build the demo-app and a release to confirm that the library is AOT-compatible. */
 task('aot:build', sequenceTask('aot:deps', 'aot:compiler-cli'));

tools/gulp/tasks/docs.ts

@@ -48,7 +48,6 @@ const MARKDOWN_TAGS_TO_CLASS_ALIAS = [
   'code',
 ];
 
-
 /** Generate all docs content. */
 task('docs', [
   'markdown-docs',

tools/gulp/tasks/examples.ts

@@ -0,0 +1,45 @@
+import {task} from 'gulp';
+import {join} from 'path';
+import {main as tsc} from '@angular/tsc-wrapped';
+import {SOURCE_ROOT, DIST_EXAMPLES} from '../constants';
+import {sequenceTask, copyTask} from '../util/task_helpers';
+import {buildModuleEntry, composeRelease} from '../util/package-build';
+
+// There are no type definitions available for these imports.
+const inlineResources = require('../../../scripts/release/inline-resources');
+
+const examplesRoot = join(SOURCE_ROOT, 'material-examples');
+const tsconfigPath = join(examplesRoot, 'tsconfig-build.json');
+
+// Paths to the different output files and directories.
+const examplesOut = DIST_EXAMPLES;
+const examplesMain = join(examplesOut, 'public_api.js');
+
+task('examples:clean-build', sequenceTask('clean', 'examples:build'));
+
+task('examples:build', sequenceTask(
+  // The examples depend on the library. Build the library first.
+  'library:build',
+  // Build ESM and copy HTML assets to the dist.
+  ['examples:build:esm', 'examples:assets:html'],
+  // Inline assets into ESM output.
+  'examples:assets:inline',
+  // Build bundles on top of inlined ESM output.
+  'examples:build:bundles',
+));
+
+task('examples:release', ['examples:clean-build'], () => composeRelease('material-examples'));
+
+/**
+ * TypeScript compilation tasks. Tasks are creating ESM, FESM, UMD bundles for releases.
+ */
+
+task('examples:build:esm', () => tsc(tsconfigPath, {basePath: examplesRoot}));
+task('examples:build:bundles', () => buildModuleEntry(examplesMain, 'material-examples'));
+
+/**
+ * Asset tasks. Copying and inlining CSS, HTML files into the ESM output.
+ */
+
+task('examples:assets:html', copyTask(join(examplesRoot, '**/*.+(html|css)'), examplesOut));
+task('examples:assets:inline', () => inlineResources(examplesOut));

tools/gulp/tasks/library.ts

@@ -1,24 +1,18 @@
 import {task, watch} from 'gulp';
 import {join} from 'path';
 import {main as tsc} from '@angular/tsc-wrapped';
-import {SOURCE_ROOT, DIST_BUNDLES, DIST_MATERIAL} from '../constants';
+import {SOURCE_ROOT, DIST_MATERIAL} from '../constants';
 import {sequenceTask, sassBuildTask, copyTask, triggerLivereload} from '../util/task_helpers';
-import {createRollupBundle} from '../util/rollup-helper';
-import {transpileFile} from '../util/ts-compiler';
-import {ScriptTarget, ModuleKind} from 'typescript';
-import {writeFileSync} from 'fs';
+import {buildModuleEntry} from '../util/package-build';
 
 // There are no type definitions available for these imports.
 const inlineResources = require('../../../scripts/release/inline-resources');
-const uglify = require('uglify-js');
 
 const libraryRoot = join(SOURCE_ROOT, 'lib');
 const tsconfigPath = join(libraryRoot, 'tsconfig-build.json');
 
-// Paths to the different output directories.
+// Paths to the different output files and directories.
 const materialDir = DIST_MATERIAL;
-const bundlesDir = DIST_BUNDLES;
-
 const esmMainFile = join(materialDir, 'index.js');
 
 task('library:clean-build', sequenceTask('clean', 'library:build'));
@@ -40,52 +34,14 @@ task('library:watch', () => {
 
 /**
  * TypeScript compilation tasks. Tasks are creating ESM, FESM, UMD bundles for releases.
- **/
+ */
 
 task('library:build:esm', () => tsc(tsconfigPath, {basePath: libraryRoot}));
 task('library:build:bundles', () => buildModuleEntry(esmMainFile));
 
-/** Builds a module entry-point. If no entry name is specified it builds the whole library. */
-async function buildModuleEntry(entryFile: string, entryName = '') {
-  let baseFileName = entryName ? `material-${entryName}` : 'material';
-  let moduleName = entryName ? `ng.material.${entryName}` : 'ng.material';
-
-  // List of paths for the specified entrypoint.
-  let fesm2015File = join(bundlesDir, `${baseFileName}.js`);
-  let fesm2014File = join(bundlesDir, `${baseFileName}.es5.js`);
-  let umdFile = join(bundlesDir, `${baseFileName}.umd.js`);
-  let umdMinFile = join(bundlesDir, `${baseFileName}.umd.min.js`);
-
-  // Build FESM-2015 bundle file.
-  await createRollupBundle({
-    moduleName: moduleName,
-    entry: entryFile,
-    dest: fesm2015File,
-    format: 'es',
-  });
-
-  // Downlevel FESM-2015 file to ES5.
-  transpileFile(fesm2015File, fesm2014File, {
-    target: ScriptTarget.ES5,
-    module: ModuleKind.ES2015,
-    allowJs: true
-  });
-
-  // Create UMD bundle of FESM-2014 output.
-  await createRollupBundle({
-    moduleName: moduleName,
-    entry: fesm2014File,
-    dest: umdFile,
-    format: 'umd'
-  });
-
-  // Output a minified version of the UMD bundle
-  writeFileSync(umdMinFile, uglify.minify(umdFile, { preserveComments: 'license' }).code);
-}
-
 /**
  * Asset tasks. Building SaSS files and inlining CSS, HTML files into the ESM output.
- **/
+ */
 
 task('library:assets', ['library:assets:scss', 'library:assets:html']);