build: create example package

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/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/examples/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "@angular/material-examples",
+  "version": "2.0.0-beta.3",
+  "description": "Angular Material",
+  "main": "./bundles/examples.umd.js",
+  "module": "./@angular/examples.es5.js",
+  "es2015": "./@angular/examples.js",
+  "typings": "./examples.d.ts",
+  "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/examples/public_api.ts

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

src/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/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,52 @@
+import {task, watch} from 'gulp';
+import {join} from 'path';
+import {main as tsc} from '@angular/tsc-wrapped';
+import {SOURCE_ROOT, DIST_BUNDLES, DIST_EXAMPLES} from '../constants';
+import {sequenceTask, sassBuildTask, copyTask, triggerLivereload} from '../util/task_helpers';
+import {createRollupBundle} from '../util/rollup-helper';
+import {transpileFile} from '../util/ts-compiler';
+import {buildModuleEntry, composeRelease} from '../util/package-build';
+import {ScriptTarget, ModuleKind} from 'typescript';
+import {writeFileSync} from 'fs';
+
+// There are no type definitions available for these imports.
+const inlineResources = require('../../../scripts/release/inline-resources');
+const uglify = require('uglify-js');
+
+const examplesRoot = join(SOURCE_ROOT, 'examples');
+const tsconfigPath = join(examplesRoot, 'tsconfig-build.json');
+
+// Paths to the different output directories.
+const examplesOut = DIST_EXAMPLES;
+const bundlesDir = DIST_BUNDLES;
+
+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('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, '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

@@ -5,6 +5,7 @@ import {SOURCE_ROOT, DIST_BUNDLES, 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 {buildModuleEntry} from '../util/package-build';
 import {ScriptTarget, ModuleKind} from 'typescript';
 import {writeFileSync} from 'fs';
 
@@ -45,44 +46,6 @@ task('library:watch', () => {
 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.
  **/