build: build cdk package (#4111)

devversion · jelbourn · commit a7ca7c1f248c · 2017-04-17T15:18:16.000-07:00
* Introduces another package called `@angular/cdk`. This package is
currently empty but all the logic for SASS, HTML, TypeScript and tests
is ready.
diff --git a/src/cdk/package.json b/src/cdk/package.json
@@ -0,0 +1,30 @@
+{
+  "name": "@angular/cdk",
+  "version": "0.0.0-PLACEHOLDER",
+  "description": "Angular Material Component Development Kit",
+  "main": "./bundles/cdk.umd.js",
+  "module": "./@angular/cdk.es5.js",
+  "es2015": "./@angular/cdkjs",
+  "typings": "./cdk.d.ts",
+  "private": true,
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/angular/material2.git"
+  },
+  "keywords": [
+    "angular",
+    "cdk",
+    "component",
+    "development",
+    "kit"
+  ],
+  "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"
+  }
+}
diff --git a/src/cdk/public_api.ts b/src/cdk/public_api.ts
@@ -0,0 +1 @@
+export const __TEMP__ = -1;
diff --git a/src/cdk/tsconfig-build.json b/src/cdk/tsconfig-build.json
@@ -0,0 +1,31 @@
+// TypeScript config file that is used to compile the cdk package. 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/cdk",
+    "paths": {},
+    "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",
+    "flatModuleId": "@angular/cdk",
+    "skipTemplateCodegen": true
+  }
+}
diff --git a/src/cdk/tsconfig-tests.json b/src/cdk/tsconfig-tests.json
@@ -0,0 +1,16 @@
+// TypeScript config file that extends the default tsconfig file for the cdk. This config is
+// used to compile the tests for Karma. Since the code will run inside of the browser, the target
+// needs to be ES5. The format needs to be CommonJS since Karma only supports that module format.
+{
+  "extends": "./tsconfig-build",
+  "compilerOptions": {
+    "module": "commonjs",
+    "target": "es5",
+    "types": ["jasmine"],
+    "experimentalDecorators": true
+  },
+  "include": [
+    "**/*.spec.ts"
+  ],
+  "files": null
+}
diff --git a/src/demo-app/system-config.ts b/src/demo-app/system-config.ts
@@ -24,7 +24,10 @@ System.config({
       'node:@angular/platform-browser/bundles/platform-browser-animations.umd.js',
     '@angular/platform-browser-dynamic':
       'node:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
-    '@angular/material': 'dist/bundles/material.umd.js'
+
+    '@angular/material': 'dist/bundles/material.umd.js',
+    // NGC always adds the `index` suffix. As a temporary workaround just map it with that.
+    '@angular/cdk/index': 'dist/bundles/cdk.umd.js'
   },
   packages: {
     // Thirdparty barrels.
diff --git a/src/demo-app/tsconfig-build.json b/src/demo-app/tsconfig-build.json
@@ -14,14 +14,13 @@
     "sourceMap": true,
     "target": "es5",
     "stripInternal": false,
-    "baseUrl": "",
     "typeRoots": [
       "../../node_modules/@types/!(node)"
     ],
+    "baseUrl": ".",
     "paths": {
-      "@angular/material": [
-        "../../dist/packages/material"
-      ]
+      "@angular/material": ["../../dist/packages/material"],
+      "@angular/cdk": ["../../dist/packages/cdk"]
     }
   },
   "files": [
diff --git a/src/e2e-app/system-config.ts b/src/e2e-app/system-config.ts
@@ -24,7 +24,10 @@ System.config({
       'node:@angular/platform-browser/bundles/platform-browser-animations.umd.js',
     '@angular/platform-browser-dynamic':
       'node:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
-    '@angular/material': 'dist/bundles/material.umd.js'
+
+    '@angular/material': 'dist/bundles/material.umd.js',
+    // NGC always adds the `index` suffix. As a temporary workaround just map it with that.
+    '@angular/cdk/index': 'dist/bundles/cdk.umd.js'
   },
   packages: {
     // Thirdparty barrels.
diff --git a/src/lib/system-config-spec.ts b/src/lib/system-config-spec.ts
diff --git a/src/lib/tsconfig-build.json b/src/lib/tsconfig-build.json
@@ -2,21 +2,23 @@
 // 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/material",
-    "paths": {},
     "rootDir": ".",
     "sourceMap": true,
     "inlineSources": true,
     "target": "es2015",
     "lib": ["es2015", "dom"],
     "skipLibCheck": true,
-    "types": []
+    "types": [],
+    "baseUrl": ".",
+    "paths": {
+      "@angular/cdk": ["../../dist/packages/cdk"]
+    }
   },
   "files": [
     "public_api.ts",
diff --git a/src/lib/tsconfig-tests.json b/src/lib/tsconfig-tests.json
@@ -1,5 +1,5 @@
 // TypeScript config file that extends the default tsconfig file for the library. This config is 
-// used to compile the specs for Karma. Since the code will run inside of the browser, the target
+// used to compile the tests for Karma. Since the code will run inside of the browser, the target
 // needs to be ES5. The format needs to be CommonJS since Karma only supports that module format.
 {
   "extends": "./tsconfig-build",
@@ -10,7 +10,7 @@
     "experimentalDecorators": true
   },
   "include": [
-    "system-config-spec.ts",
     "**/*.spec.ts"
-  ]
+  ],
+  "files": null
 }
diff --git a/src/lib/typings.d.ts b/src/lib/typings.d.ts
@@ -1 +1 @@
-declare const module: {id: string};
+declare var module: {id: string};
diff --git a/src/material-examples/tsconfig-build.json b/src/material-examples/tsconfig-build.json
@@ -2,25 +2,23 @@
 // 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": []
+    "types": [],
+    "baseUrl": ".",
+    "paths": {
+      "@angular/material": ["../../dist/packages/material"]
+    }
   },
   "files": [
     "public_api.ts"
diff --git a/src/tsconfig.json b/src/tsconfig.json
@@ -5,16 +5,16 @@
     "experimentalDecorators": true,
     "module": "es2015",
     "moduleResolution": "node",
-    "outDir": "../../dist/packages/all",
+    "outDir": "../dist/packages/all",
     "sourceMap": true,
     "inlineSources": true,
     "target": "es2015",
     "lib": ["es2015", "dom"],
     "types": ["jasmine"],
+    "baseUrl": ".",
     "paths": {
-      "@angular/material": [
-        "../../dist/packages/material"
-      ]
+      "@angular/material": ["./lib/public_api.ts"],
+      "@angular/cdk": ["./cdk/public_api.ts"]
     }
   }
 }
diff --git a/test/karma-test-shim.js b/test/karma-test-shim.js
@@ -5,15 +5,60 @@ jasmine.DEFAULT_TIMEOUT_INTERVAL = 3000;
 __karma__.loaded = function () {};
 
 var baseDir = '/base';
-var configFile = baseDir + '/dist/packages/material/system-config-spec.js';
 var specFiles = Object.keys(window.__karma__.files).filter(isMaterialSpecFile);
 
-// Configure the base path for dist/
-System.config({ baseURL: baseDir });
+// Configure the base path and map the different node packages.
+System.config({
+  baseURL: baseDir,
+  paths: {
+    'node:*': 'node_modules/*'
+  },
+  map: {
+    'rxjs': 'node:rxjs',
+    'main': 'main.js',
 
-// Load the spec SystemJS configuration file.
-System.import(configFile)
-  .then(configureTestBed)
+    // Angular specific mappings.
+    '@angular/core': 'node:@angular/core/bundles/core.umd.js',
+    '@angular/core/testing': 'node:@angular/core/bundles/core-testing.umd.js',
+    '@angular/common': 'node:@angular/common/bundles/common.umd.js',
+    '@angular/common/testing': 'node:@angular/common/bundles/common-testing.umd.js',
+    '@angular/compiler': 'node:@angular/compiler/bundles/compiler.umd.js',
+    '@angular/compiler/testing': 'node:@angular/compiler/bundles/compiler-testing.umd.js',
+    '@angular/http': 'node:@angular/http/bundles/http.umd.js',
+    '@angular/http/testing': 'node:@angular/http/bundles/http-testing.umd.js',
+    '@angular/forms': 'node:@angular/forms/bundles/forms.umd.js',
+    '@angular/forms/testing': 'node:@angular/forms/bundles/forms-testing.umd.js',
+    '@angular/animations': 'node:@angular/animations/bundles/animations.umd.js',
+    '@angular/animations/browser': 'node:@angular/animations/bundles/animations-browser.umd.js',
+    '@angular/platform-browser/animations':
+      'node:@angular/platform-browser/bundles/platform-browser-animations.umd',
+    '@angular/platform-browser':
+      'node:@angular/platform-browser/bundles/platform-browser.umd.js',
+    '@angular/platform-browser/testing':
+      'node:@angular/platform-browser/bundles/platform-browser-testing.umd.js',
+    '@angular/platform-browser-dynamic':
+      'node:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
+    '@angular/platform-browser-dynamic/testing':
+      'node:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic-testing.umd.js',
+
+    // Path mappings for local packages that can be imported inside of tests.
+    '@angular/material': 'dist/bundles/material.umd.js',
+    '@angular/cdk': 'dist/bundles/cdk.umd.js',
+  },
+  packages: {
+    // Thirdparty barrels.
+    'rxjs': {main: 'index'},
+
+    // 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'
+    }
+  }
+});
+
+// Configure the Angular test bed and run all specs once configured.
+ configureTestBed()
   .then(runMaterialSpecs)
   .then(__karma__.start, __karma__.error);
 
@@ -47,4 +92,4 @@ function configureTestBed() {
       testingBrowser.platformBrowserDynamicTesting()
     );
   });
-}
+}
diff --git a/test/karma.conf.js b/test/karma.conf.js
@@ -33,20 +33,18 @@ module.exports = (config) => {
       {pattern: 'test/karma-test-shim.js', included: true, watched: false},
 
       // Include a Material theme in the test suite.
-      {pattern: 'dist/**/core/theming/prebuilt/indigo-pink.css', included: true, watched: true},
+      {pattern: 'dist/packages/**/core/theming/prebuilt/indigo-pink.css', included: true, watched: true},
 
-      // Includes Material spec and source files into karma. Those files will be watched.
-      {pattern: 'dist/packages/material/**/*.js', included: false, watched: true},
-
-      // Paths to support debugging with source maps in dev tools
-      {pattern: 'dist/**/*.ts', included: false, watched: false},
-      {pattern: 'dist/**/*.js.map', included: false, watched: false}
+      // Includes all package tests and source files into karma. Those files will be watched.
+      // This pattern also matches all all sourcemap files and TypeScript files for debugging.
+      {pattern: 'dist/packages/**/*', included: false, watched: true},
+      {pattern: 'dist/bundles/*.umd.js', included: false, watched: true},
     ],
 
     customLaunchers: customLaunchers,
 
     preprocessors: {
-      'dist/**/*.js': ['sourcemap']
+      'dist/packages/**/*.js': ['sourcemap']
     },
 
     reporters: ['dots'],
@@ -103,7 +101,7 @@ module.exports = (config) => {
     if (process.env['TRAVIS_PULL_REQUEST'] === 'false' &&
         process.env['MODE'] === "browserstack_required") {
 
-      config.preprocessors['dist/@angular/material/**/!(*+(.|-)spec).js'] = ['coverage'];
+      config.preprocessors['dist/packages/**/!(*+(.|-)spec).js'] = ['coverage'];
       config.reporters.push('coverage');
     }
 
diff --git a/tools/gulp/constants.ts b/tools/gulp/constants.ts
@@ -13,6 +13,7 @@ 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');
+export const DIST_CDK = join(DIST_ROOT, 'packages', 'cdk');
 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');
diff --git a/tools/gulp/gulpfile.ts b/tools/gulp/gulpfile.ts
@@ -13,3 +13,4 @@ import './tasks/payload';
 import './tasks/coverage';
 import './tasks/library';
 import './tasks/examples';
+import './tasks/cdk';
diff --git a/tools/gulp/tasks/cdk.ts b/tools/gulp/tasks/cdk.ts
diff --git a/tools/gulp/tasks/examples.ts b/tools/gulp/tasks/examples.ts
diff --git a/tools/gulp/tasks/library.ts b/tools/gulp/tasks/library.ts
diff --git a/tools/gulp/tasks/unit-test.ts b/tools/gulp/tasks/unit-test.ts
diff --git a/tools/gulp/util/package-build.ts b/tools/gulp/util/package-build.ts
diff --git a/tools/gulp/util/rollup-helper.ts b/tools/gulp/util/rollup-helper.ts
