build: add material experimental package (#8591)

* Adds the material-experimental package.

.github/CODEOWNERS

@@ -72,6 +72,9 @@
 # Moment adapter package
 /src/material-moment-adapter/**                    @mmalerba
 
+# Material experimental package
+/src/material-experimental/**                      @jelbourn
+
 # Docs examples & guides
 /guides/**                                         @amcdnl @jelbourn
 /src/material-examples/**                          @amcdnl @jelbourn

src/demo-app/system-config.ts

@@ -38,7 +38,8 @@ System.config({
 
     // TODO(devversion): replace once the index.ts file for the Material package has been added.
     '@angular/material': 'dist/packages/material/public-api.js',
-    '@angular/material-moment-adapter': 'dist/packages/material-moment-adapter/public-api.js',
+    '@angular/material-experimental': 'dist/packages/material-experimental/index.js',
+    '@angular/material-moment-adapter': 'dist/packages/material-moment-adapter/index.js',
     '@angular/cdk': 'dist/packages/cdk/index.js',
     '@angular/cdk/a11y': 'dist/packages/cdk/a11y/index.js',
     '@angular/cdk/accordion': 'dist/packages/cdk/accordion/index.js',

src/demo-app/tsconfig-aot.json

@@ -1,6 +1,5 @@
 // TypeScript config that extends the demo-app tsconfig file. This config compiles the
-// "main-aot.ts" file and also enables templage code generation / AOT. All paths need
-// to be relative to the output directory.
+// "main-aot.ts" file and also enables templage code generation / AOT.
 {
   "extends": "./tsconfig-build",
   "compilerOptions": {
@@ -9,12 +8,19 @@
     "experimentalDecorators": true,
     "noUnusedParameters": true,
     "strictNullChecks": true,
-    "outDir": ".",
+    "outDir": "../../dist/packages/demo-app",
+    "rootDirs": [
+      ".",
+      "../../dist/packages/demo-app"
+    ],
     "paths": {
-      "@angular/cdk/*": ["./cdk/*"],
-      "@angular/material": ["./material"],
-      "@angular/material/*": ["./material/*"],
-      "@angular/material-moment-adapter": ["./material-moment-adapter"]
+      "@angular/material/*": ["../../dist/releases/material/*"],
+      "@angular/material": ["../../dist/releases/material"],
+      "@angular/cdk/*": ["../../dist/releases/cdk/*"],
+      "@angular/cdk": ["../../dist/releases/cdk"],
+      "@angular/material-experimental/*": ["../../dist/releases/material-experimental/*"],
+      "@angular/material-experimental": ["../../dist/releases/material-experimental"],
+      "@angular/material-moment-adapter": ["../../dist/releases/material-moment-adapter"]
     }
   },
   "files": [

src/demo-app/tsconfig-build.json

@@ -24,9 +24,12 @@
     ],
     "baseUrl": ".",
     "paths": {
+      "@angular/material/*": ["../../dist/packages/material/*"],
       "@angular/material": ["../../dist/packages/material/public-api"],
       "@angular/cdk/*": ["../../dist/packages/cdk/*"],
-      "@angular/material/*": ["../../dist/packages/material/*"],
+      "@angular/cdk": ["../../dist/packages/cdk"],
+      "@angular/material-experimental/*": ["../../dist/packages/material-experimental/*"],
+      "@angular/material-experimental": ["../../dist/packages/material-experimental"],
       "@angular/material-moment-adapter": ["../../dist/packages/material-moment-adapter"]
     }
   },

src/demo-app/tsconfig.json

@@ -10,6 +10,8 @@
       "@angular/cdk/*": ["../cdk/*"],
       "@angular/material/*": ["../lib/*"],
       "@angular/material": ["../lib/public-api.ts"],
+      "@angular/material-experimental/*": ["../material-experimental/*"],
+      "@angular/material-experimental": ["../material-experimental"],
       "@angular/material-moment-adapter": ["../material-moment-adapter/public-api.ts"]
     }
   },

src/e2e-app/system-config.ts

@@ -28,6 +28,7 @@ System.config({
       'node:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
 
     '@angular/material': 'dist/bundles/material.umd.js',
+    '@angular/material-experimental': 'dist/bundles/material-experimental.umd.js',
     '@angular/material-moment-adapter': 'dist/bundles/material-moment-adapter.umd.js',
     '@angular/cdk': 'dist/bundles/cdk.umd.js',
     '@angular/cdk/a11y': 'dist/bundles/cdk-a11y.umd.js',

src/e2e-app/tsconfig.json

@@ -8,8 +8,10 @@
       "@angular/cdk/*": ["../cdk/*"],
       "@angular/material/*": ["../lib/*"],
       "@angular/material": ["../lib/public-api.ts"],
-      "@angular/material-moment-adapter": ["../material-moment-adapter/public-api.ts"],
-      "@angular/material-examples": ["../material-examples/public-api.ts"]
+      "@angular/material-experimental/*": ["../material-experimental/*"],
+      "@angular/material-experimental": ["../material-experimental/"],
+      "@angular/material-moment-adapter": ["../material-moment-adapter/"],
+      "@angular/material-examples": ["../material-examples/"]
     }
   },
   "include": ["./**/*.ts"]

src/material-experimental/index.ts

@@ -0,0 +1,9 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+export * from './public-api';

src/material-experimental/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "@angular/material-experimental",
+  "version": "0.0.0-PLACEHOLDER",
+  "description": "Experimental components for Angular Material",
+  "main": "./bundles/material-experimental.umd.js",
+  "module": "./esm5/material-experimental.es5.js",
+  "es2015": "./esm2015/material-experimental.js",
+  "typings": "./material-experimental.d.ts",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/angular/material2.git"
+  },
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/angular/material2/issues"
+  },
+  "homepage": "https://github.com/angular/material2#readme",
+  "peerDependencies": {
+    "@angular/material": "0.0.0-PLACEHOLDER",
+    "@angular/core": "0.0.0-NG"
+  },
+  "dependencies": {
+    "tslib": "^1.7.1"
+  }
+}

src/material-experimental/public-api.ts

@@ -0,0 +1,9 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+export * from './version';

src/material-experimental/tsconfig-build.json

@@ -0,0 +1,39 @@
+// TypeScript config file that is used to compile the experimental package into ES2015.
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "declaration": true,
+    "stripInternal": false,
+    "experimentalDecorators": true,
+    "noUnusedParameters": true,
+    "strictNullChecks": true,
+    "importHelpers": true,
+    "newLine": "lf",
+    "module": "es2015",
+    "moduleResolution": "node",
+    "outDir": "../../dist/packages/material-experimental",
+    "rootDir": ".",
+    "sourceMap": true,
+    "inlineSources": true,
+    "target": "es2015",
+    "lib": ["es2015", "dom"],
+    "skipLibCheck": true,
+    "types": [],
+    "paths": {
+      "@angular/material/*": ["../../dist/packages/material/*"],
+      "@angular/material": ["../../dist/packages/material/public-api"],
+      "@angular/cdk/*": ["../../dist/packages/cdk/*"],
+      "@angular/cdk": ["../../dist/packages/cdk"]
+    }
+  },
+  "files": [
+    "public-api.ts"
+  ],
+  "angularCompilerOptions": {
+    "annotateForClosureCompiler": true,
+    "strictMetadataEmit": true,
+    "flatModuleOutFile": "index.js",
+    "flatModuleId": "@angular/material-experimental",
+    "skipTemplateCodegen": true
+  }
+}

src/material-experimental/tsconfig-tests.json

@@ -0,0 +1,21 @@
+// TypeScript config file that extends the default build tsconfig file. This config is used to
+// also compile the unit-test files. Since the code will run inside of the browser, the target is
+// set to ES5. Also the format needs to be CommonJS for Karma.
+{
+  "extends": "./tsconfig-build",
+  "compilerOptions": {
+    "importHelpers": false,
+    "module": "commonjs",
+    "target": "es5",
+    "types": ["jasmine"]
+  },
+  "angularCompilerOptions": {
+    "strictMetadataEmit": true,
+    "skipTemplateCodegen": true,
+    "emitDecoratorMetadata": true
+  },
+  "include": [
+    "**/*.spec.ts",
+    "index.ts"
+  ]
+}

src/material-experimental/tsconfig.json

@@ -0,0 +1,15 @@
+// Configuration for IDEs only.
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "rootDir": "..",
+    "baseUrl": ".",
+    "paths": {
+      "@angular/cdk/*": ["../cdk/*"],
+      "@angular/cdk": ["../cdk"],
+      "@angular/material/*": ["../lib/*"],
+      "@angular/material": ["../lib/public-api.ts"]
+    }
+  },
+  "include": ["./**/*.ts"]
+}

src/material-experimental/version.ts

@@ -0,0 +1,12 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {Version} from '@angular/core';
+
+/** Current version of the Material experimental package. */
+export const VERSION = new Version('0.0.0-PLACEHOLDER');

test/karma-test-shim.js

@@ -50,6 +50,7 @@ System.config({
     // Path mappings for local packages that can be imported inside of tests.
     // TODO(devversion): replace once the index.ts file for the Material package has been added.
     '@angular/material': 'dist/packages/material/public-api.js',
+    '@angular/material-experimental': 'dist/packages/material-experimental/index.js',
     '@angular/cdk': 'dist/packages/cdk/index.js',
     '@angular/cdk/a11y': 'dist/packages/cdk/a11y/index.js',
     '@angular/cdk/accordion': 'dist/packages/cdk/accordion/index.js',

tools/gulp/gulpfile.ts

@@ -1,26 +1,33 @@
 import {createPackageBuildTasks} from 'material2-build-tools';
-import {cdkPackage, examplesPackage, materialPackage, momentAdapterPackage} from './packages';
+import {
+  cdkPackage,
+  examplesPackage,
+  experimentalPackage,
+  materialPackage,
+  momentAdapterPackage
+} from './packages';
 
 createPackageBuildTasks(cdkPackage);
 createPackageBuildTasks(materialPackage);
+createPackageBuildTasks(experimentalPackage);
 createPackageBuildTasks(examplesPackage);
 createPackageBuildTasks(momentAdapterPackage);
 
+import './tasks/aot';
+import './tasks/changelog';
 import './tasks/ci';
 import './tasks/clean';
+import './tasks/coverage';
 import './tasks/default';
 import './tasks/development';
 import './tasks/docs';
 import './tasks/e2e';
+import './tasks/examples';
 import './tasks/lint';
+import './tasks/material-release';
+import './tasks/payload';
 import './tasks/publish';
 import './tasks/screenshots';
-import './tasks/examples';
 import './tasks/unit-test';
-import './tasks/aot';
-import './tasks/payload';
-import './tasks/coverage';
-import './tasks/material-release';
 import './tasks/universal';
 import './tasks/validate-release';
-import './tasks/changelog';

tools/gulp/packages.ts

@@ -3,6 +3,7 @@ import {join} from 'path';
 
 export const cdkPackage = new BuildPackage('cdk');
 export const materialPackage = new BuildPackage('material', [cdkPackage]);
+export const experimentalPackage = new BuildPackage('material-experimental', [materialPackage]);
 export const momentAdapterPackage = new BuildPackage('material-moment-adapter', [materialPackage]);
 export const examplesPackage = new BuildPackage('material-examples', [momentAdapterPackage]);
 

tools/gulp/tasks/aot.ts

@@ -1,42 +1,29 @@
 import {task} from 'gulp';
-import {copySync} from 'fs-extra';
 import {execNodeTask} from '../util/task_helpers';
 import {join} from 'path';
 import {buildConfig, sequenceTask} from 'material2-build-tools';
 
-const {outputDir, packagesDir} = buildConfig;
-
-/** Path to the directory where all releases are living. */
-const releasesDir = join(outputDir, 'releases');
+const {packagesDir} = buildConfig;
 
 /** Path to the demo-app source directory. */
 const demoAppSource = join(packagesDir, 'demo-app');
 
-/** Path to the demo-app output directory. */
-const demoAppOut = join(outputDir, 'packages', 'demo-app');
-
 /** Path to the tsconfig file that builds the AOT files. */
-const tsconfigFile = join(demoAppOut, 'tsconfig-aot.json');
+const tsconfigFile = join(demoAppSource, 'tsconfig-aot.json');
 
-/** Builds the demo-app and material. To be able to run NGC, apply the metadata workaround. */
+/** Builds the demo-app assets and builds the required release packages. */
 task('aot:deps', sequenceTask(
-  ['material:build-release', 'cdk:build-release', 'material-moment-adapter:build-release'],
-  [':build:devapp:assets', ':build:devapp:scss', 'aot:copy-devapp', 'aot:copy-release'],
+  [
+    'cdk:build-release',
+    'material:build-release',
+    'material-experimental:build-release',
+    'material-moment-adapter:build-release'
+  ],
+  // Build the assets after the releases have been built, because the demo-app assets import
+  // SCSS files from the release packages.
+  [':build:devapp:assets', ':build:devapp:scss'],
 ));
 
-// As a workaround for https://github.com/angular/angular/issues/12249, we need to
-// copy the Material and CDK ESM output inside of the demo-app output.
-task('aot:copy-release', () => {
-  copySync(join(releasesDir, 'material'), join(demoAppOut, 'material'));
-  copySync(join(releasesDir, 'cdk'), join(demoAppOut, 'cdk'));
-  copySync(
-      join(releasesDir, 'material-moment-adapter'), join(demoAppOut, 'material-moment-adapter'));
-});
-
-// As a workaround for https://github.com/angular/angular/issues/12249, we need to
-// copy the demo-app sources to distribution and run the NGC inside of the dist folder.
-task('aot:copy-devapp', () => copySync(demoAppSource, demoAppOut));
-
 /** Build the demo-app and a release to confirm that the library is AOT-compatible. */
 task('aot:build', sequenceTask('clean', 'aot:deps', 'aot:compiler-cli'));
 

tools/gulp/tasks/development.ts

@@ -4,7 +4,7 @@ import {join} from 'path';
 import {
   buildConfig, copyFiles, buildScssTask, sequenceTask, watchFiles
 } from 'material2-build-tools';
-import {cdkPackage, materialPackage, momentAdapterPackage} from '../packages';
+import {cdkPackage, experimentalPackage, materialPackage, momentAdapterPackage} from '../packages';
 
 // These imports don't have any typings provided.
 const firebaseTools = require('firebase-tools');
@@ -41,13 +41,15 @@ task(':watch:devapp', () => {
   watchFiles(join(appDir, '**/*.scss'), [':build:devapp:scss']);
   watchFiles(join(appDir, '**/*.html'), [':build:devapp:assets']);
 
-  // Custom watchers for the CDK, Material and Moment adapter package. This is necessary because
-  // we only want to build the package as a single entry-point (using the tests task).
+  // Custom watchers for all packages that are used inside of the demo-app. This is necessary
+  // because we only want to build the changed package (using the build-no-bundles task).
   watchFiles(join(cdkPackage.sourceDir, '**/*'), ['cdk:build-no-bundles']);
   watchFiles(join(materialPackage.sourceDir, '**/!(*.scss)'), ['material:build-no-bundles']);
   watchFiles(join(materialPackage.sourceDir, '**/*.scss'), [':build:devapp:material-with-styles']);
   watchFiles(join(momentAdapterPackage.sourceDir, '**/*'),
       ['material-moment-adapter:build-no-bundles']);
+  watchFiles(join(experimentalPackage.sourceDir, '**/*'),
+      ['material-experimental:build-no-bundles']);
 });
 
 /** Path to the demo-app tsconfig file. */
@@ -66,8 +68,11 @@ task(':build:devapp:material-with-styles', sequenceTask(
 ));
 
 task('build:devapp', sequenceTask(
-  ['material-moment-adapter:build-no-bundles', ':build:devapp:assets'],
-  [':build:devapp:scss', ':build:devapp:ts']
+  'cdk:build-no-bundles',
+  'material:build-no-bundles',
+  'material-experimental:build-no-bundles',
+  'material-moment-adapter:build-no-bundles',
+  [':build:devapp:assets', ':build:devapp:scss', ':build:devapp:ts']
 ));
 
 task('serve:devapp', ['build:devapp'], sequenceTask([':serve:devapp', ':watch:devapp']));
@@ -78,6 +83,8 @@ task('stage-deploy:devapp', ['build:devapp'], () => {
   copyFiles(bundlesDir, '*.+(js|map)', join(outDir, 'dist/bundles'));
   copyFiles(cdkPackage.outputDir, '**/*.+(js|map)', join(outDir, 'dist/packages/cdk'));
   copyFiles(materialPackage.outputDir, '**/*.+(js|map)', join(outDir, 'dist/packages/material'));
+  copyFiles(experimentalPackage.outputDir, '**/*.+(js|map)',
+      join(outDir, 'dist/packages/material-experimental'));
   copyFiles(materialPackage.outputDir, '**/prebuilt/*.+(css|map)',
       join(outDir, 'dist/packages/material'));
 });

tools/gulp/tasks/e2e.ts

@@ -35,8 +35,9 @@ task('e2e', sequenceTask(
 task('e2e-app:build', sequenceTask(
   'clean',
   [
-    'material:build-release',
     'cdk:build-release',
+    'material:build-release',
+    'material-experimental:build-release',
     'material-moment-adapter:build-release',
     'material-examples:build-release'
   ],
@@ -79,8 +80,9 @@ task('serve:e2eapp:watch', ['serve:e2eapp', 'material:watch', ':watch:e2eapp']);
 // As a workaround for https://github.com/angular/angular/issues/12249, we need to
 // copy the Material and CDK ESM output inside of the demo-app output.
 task('e2e-app:copy-release', () => {
-  copySync(join(releasesDir, 'material'), join(outDir, 'material'));
   copySync(join(releasesDir, 'cdk'), join(outDir, 'cdk'));
+  copySync(join(releasesDir, 'material'), join(outDir, 'material'));
+  copySync(join(releasesDir, 'material-experimental'), join(outDir, 'material-experimental'));
   copySync(join(releasesDir, 'material-examples'), join(outDir, 'material-examples'));
   copySync(join(releasesDir, 'material-moment-adapter'), join(outDir, 'material-moment-adapter'));
 });

tools/gulp/tasks/publish.ts

@@ -11,6 +11,7 @@ import * as minimist from 'minimist';
 export const releasePackages = [
   'cdk',
   'material',
+  'material-experimental',
   'material-moment-adapter'
 ];
 

tools/gulp/tasks/unit-test.ts

@@ -15,8 +15,9 @@ const defaultOptions = {
 /** Builds everything that is necessary for karma. */
 task(':test:build', sequenceTask(
   'clean',
-  // Build tests for all different packages by just building the tests of the moment-adapter
-  // package. All dependencies of that package (material, cdk) will be built as well.
+  'cdk:build-no-bundles',
+  'material:build-no-bundles',
+  'material-experimental:build-no-bundles',
   'material-moment-adapter:build-no-bundles'
 ));
 

tools/package-tools/gulp/build-tasks-gulp.ts

@@ -54,8 +54,6 @@ export function createPackageBuildTasks(buildPackage: BuildPackage) {
   ));
 
   task(`${taskName}:build-no-bundles`, sequenceTask(
-    // Build all required tests before building.
-    ...dependencyNames.map(pkgName => `${pkgName}:build-no-bundles`),
     // Build the ESM output that includes all test files. Also build assets for the package.
     [`${taskName}:build:esm:tests`, `${taskName}:assets`],
     // Inline assets into ESM output.