Skip to content

Commit a8c2cab

Browse files
devversiondevversion
committed
build: create example package
* Initial refactoring that allows Material to build multiple packages using a shared logic.
1 parent 9d719c5 commit a8c2cab

19 files changed

+299
-163
lines changed

‎README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -112,7 +112,7 @@ High level items planned for next few months:
112112
[16]: https://material.angular.io/components/component/slider
113113
[17]: https://material.angular.io/components/component/menu
114114
[18]: https://material.angular.io/components/component/tooltip
115-
[19]: https://github.com/angular/material2/blob/master/src/lib/core/ripple/README.md
115+
[19]: https://github.com/angular/material2/blob/master/src/material/core/ripple/README.md
116116
[20]: https://github.com/angular/material2/blob/master/guides/theming.md
117117
[21]: https://material.angular.io/components/component/snack-bar
118118
[22]: https://material.angular.io/components/component/dialog

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ OPTS=(
3939

4040
# List of path prefixes to be removed from ES6 & CommonJS modules.
4141
"--js_module_root=dist/packages"
42-
"--js_module_root=dist/release"
42+
"--js_module_root=dist/releases/material"
4343
"--js_module_root=node_modules/@angular/core"
4444
"--js_module_root=node_modules/@angular/common"
4545
"--js_module_root=node_modules/@angular/compiler"
@@ -57,7 +57,7 @@ OPTS=(
5757
"--debug"
5858

5959
# Include the Material FESM bundle
60-
dist/release/@angular/material.js
60+
dist/releases/material/@angular/material.js
6161

6262
# Include all Angular FESM bundles.
6363
node_modules/@angular/core/@angular/core.js

‎scripts/release/publish-build-artifacts.sh

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ set -e -o pipefail
88
# Go to the project root directory
99
cd $(dirname $0)/../..
1010

11-
buildDir="dist/release"
11+
buildDir="dist/releases/material"
1212
buildVersion=$(sed -nE 's/^\s*"version": "(.*?)",$/\1/p' package.json)
1313

1414
commitSha=$(git rev-parse --short HEAD)

‎src/lib/README.md renamed to ‎src/README.md

File renamed without changes.

‎src/examples/autocomplete-overview/autocomplete-overview-example.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
import {Component} from '@angular/core';
22
import {FormControl} from '@angular/forms';
3+
34
import 'rxjs/add/operator/startWith';
5+
import 'rxjs/add/operator/map';
46

57
@Component({
68
selector: 'autocomplete-overview-example',

‎src/examples/package.json

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
{
2+
"name": "@angular/material-examples",
3+
"version": "2.0.0-beta.3",
4+
"description": "Angular Material",
5+
"main": "./bundles/examples.umd.js",
6+
"module": "./@angular/examples.es5.js",
7+
"es2015": "./@angular/examples.js",
8+
"typings": "./examples.d.ts",
9+
"repository": {
10+
"type": "git",
11+
"url": "https://github.com/angular/material2.git"
12+
},
13+
"keywords": [
14+
"angular",
15+
"material",
16+
"material design",
17+
"components"
18+
],
19+
"license": "MIT",
20+
"bugs": {
21+
"url": "https://github.com/angular/material2/issues"
22+
},
23+
"homepage": "https://github.com/angular/material2#readme",
24+
"peerDependencies": {
25+
"@angular/core": "^4.0.0",
26+
"@angular/common": "^4.0.0",
27+
"@angular/http": "^4.0.0"
28+
}
29+
}

‎src/examples/public_api.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
export * from './example-data';
2+
export * from './example-module';

‎src/examples/tsconfig-build.json

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
// TypeScript config file that is used to compile the examples. Target environment needs to be
2+
// ES2015 since the build process will create FESM bundles using rollup.
3+
{
4+
"compilerOptions": {
5+
"baseUrl": ".",
6+
"declaration": true,
7+
"stripInternal": false,
8+
"experimentalDecorators": true,
9+
"module": "es2015",
10+
"moduleResolution": "node",
11+
"outDir": "../../dist/packages/examples",
12+
"paths": {
13+
"@angular/material": [
14+
"../../dist/packages/material"
15+
]
16+
},
17+
"rootDir": ".",
18+
"sourceMap": true,
19+
"inlineSources": true,
20+
"target": "es2015",
21+
"lib": ["es2015", "dom"],
22+
"skipLibCheck": true,
23+
"types": []
24+
},
25+
"files": [
26+
"public_api.ts"
27+
],
28+
"angularCompilerOptions": {
29+
"annotateForClosureCompiler": true,
30+
"strictMetadataEmit": true,
31+
"flatModuleOutFile": "index.js",
32+
"skipTemplateCodegen": true
33+
}
34+
}

‎src/tsconfig.json

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,11 @@
1010
"inlineSources": true,
1111
"target": "es2015",
1212
"lib": ["es2015", "dom"],
13-
"types": ["jasmine"]
13+
"types": ["jasmine"],
14+
"paths": {
15+
"@angular/material": [
16+
"../../dist/packages/material"
17+
]
18+
}
1419
}
1520
}

‎tools/gulp/constants.ts

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -13,12 +13,11 @@ export const DIST_BUNDLES = join(DIST_ROOT, 'bundles');
1313

1414
/** Output subdirectory where all library artifacts will be written (compiled JS, CSS, etc.) */
1515
export const DIST_MATERIAL = join(DIST_ROOT, 'packages', 'material');
16-
17-
/** Output subdirectory where the npm package will be staged for publish */
18-
export const DIST_RELEASE = join(DIST_ROOT, 'release');
19-
2016
export const DIST_DEMOAPP = join(DIST_ROOT, 'packages', 'demo-app');
2117
export const DIST_E2EAPP = join(DIST_ROOT, 'packages', 'e2e-app');
18+
export const DIST_EXAMPLES = join(DIST_ROOT, 'packages', 'examples');
19+
20+
export const DIST_RELEASES = join(DIST_ROOT, 'releases');
2221

2322
export const COVERAGE_RESULT_FILE = join(DIST_ROOT, 'coverage', 'coverage-summary.json');
2423

‎tools/gulp/gulpfile.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,3 +12,4 @@ import './tasks/aot';
1212
import './tasks/payload';
1313
import './tasks/coverage';
1414
import './tasks/library';
15+
import './tasks/examples';

‎tools/gulp/tasks/aot.ts

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import {task} from 'gulp';
22
import {copySync} from 'fs-extra';
3-
import {DIST_DEMOAPP, DIST_RELEASE} from '../constants';
3+
import {DIST_DEMOAPP, DIST_RELEASES} from '../constants';
44
import {sequenceTask, execNodeTask} from '../util/task_helpers';
55
import {join} from 'path';
66

@@ -11,7 +11,9 @@ task('aot:deps', sequenceTask('build:devapp', ':package:release', 'aot:copy-rele
1111

1212
// As a workaround for https://github.com/angular/angular/issues/12249, we need to
1313
// copy the Material ESM output inside of the demo-app output.
14-
task('aot:copy-release', () => copySync(DIST_RELEASE, join(DIST_DEMOAPP, 'material')));
14+
task('aot:copy-release', () => {
15+
return copySync(join(DIST_RELEASES, 'material'), join(DIST_DEMOAPP, 'material'));
16+
});
1517

1618
/** Build the demo-app and a release to confirm that the library is AOT-compatible. */
1719
task('aot:build', sequenceTask('aot:deps', 'aot:compiler-cli'));

‎tools/gulp/tasks/docs.ts

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,6 @@ const MARKDOWN_TAGS_TO_CLASS_ALIAS = [
4848
'code',
4949
];
5050

51-
5251
/** Generate all docs content. */
5352
task('docs', [
5453
'markdown-docs',

‎tools/gulp/tasks/examples.ts

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import {task, watch} from 'gulp';
2+
import {join} from 'path';
3+
import {main as tsc} from '@angular/tsc-wrapped';
4+
import {SOURCE_ROOT, DIST_BUNDLES, DIST_EXAMPLES} from '../constants';
5+
import {sequenceTask, sassBuildTask, copyTask, triggerLivereload} from '../util/task_helpers';
6+
import {createRollupBundle} from '../util/rollup-helper';
7+
import {transpileFile} from '../util/ts-compiler';
8+
import {buildModuleEntry, composeRelease} from '../util/package-build';
9+
import {ScriptTarget, ModuleKind} from 'typescript';
10+
import {writeFileSync} from 'fs';
11+
12+
// There are no type definitions available for these imports.
13+
const inlineResources = require('../../../scripts/release/inline-resources');
14+
const uglify = require('uglify-js');
15+
16+
const examplesRoot = join(SOURCE_ROOT, 'examples');
17+
const tsconfigPath = join(examplesRoot, 'tsconfig-build.json');
18+
19+
// Paths to the different output directories.
20+
const examplesOut = DIST_EXAMPLES;
21+
const bundlesDir = DIST_BUNDLES;
22+
23+
const examplesMain = join(examplesOut, 'public_api.js');
24+
25+
task('examples:clean-build', sequenceTask('clean', 'examples:build'));
26+
27+
task('examples:build', sequenceTask(
28+
// The examples depend on the library. Build the library first.
29+
'library:build',
30+
// Build ESM and copy HTML assets to the dist.
31+
['examples:build:esm', 'examples:assets:html'],
32+
// Inline assets into ESM output.
33+
'examples:assets:inline',
34+
// Build bundles on top of inlined ESM output.
35+
'examples:build:bundles',
36+
));
37+
38+
task('examples:release', ['examples:clean-build'], () => composeRelease('examples'));
39+
40+
/**
41+
* TypeScript compilation tasks. Tasks are creating ESM, FESM, UMD bundles for releases.
42+
**/
43+
44+
task('examples:build:esm', () => tsc(tsconfigPath, {basePath: examplesRoot}));
45+
task('examples:build:bundles', () => buildModuleEntry(examplesMain, 'examples'));
46+
47+
/**
48+
* Asset tasks. Copying and inlining CSS, HTML files into the ESM output.
49+
**/
50+
51+
task('examples:assets:html', copyTask(join(examplesRoot, '**/*.+(html|css)'), examplesOut));
52+
task('examples:assets:inline', () => inlineResources(examplesOut));

‎tools/gulp/tasks/library.ts

Lines changed: 1 addition & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import {SOURCE_ROOT, DIST_BUNDLES, DIST_MATERIAL} from '../constants';
55
import {sequenceTask, sassBuildTask, copyTask, triggerLivereload} from '../util/task_helpers';
66
import {createRollupBundle} from '../util/rollup-helper';
77
import {transpileFile} from '../util/ts-compiler';
8+
import {buildModuleEntry} from '../util/package-build';
89
import {ScriptTarget, ModuleKind} from 'typescript';
910
import {writeFileSync} from 'fs';
1011

@@ -45,44 +46,6 @@ task('library:watch', () => {
4546
task('library:build:esm', () => tsc(tsconfigPath, {basePath: libraryRoot}));
4647
task('library:build:bundles', () => buildModuleEntry(esmMainFile));
4748

48-
/** Builds a module entry-point. If no entry name is specified it builds the whole library. */
49-
async function buildModuleEntry(entryFile: string, entryName = '') {
50-
let baseFileName = entryName ? `material-${entryName}` : 'material';
51-
let moduleName = entryName ? `ng.material.${entryName}` : 'ng.material';
52-
53-
// List of paths for the specified entrypoint.
54-
let fesm2015File = join(bundlesDir, `${baseFileName}.js`);
55-
let fesm2014File = join(bundlesDir, `${baseFileName}.es5.js`);
56-
let umdFile = join(bundlesDir, `${baseFileName}.umd.js`);
57-
let umdMinFile = join(bundlesDir, `${baseFileName}.umd.min.js`);
58-
59-
// Build FESM-2015 bundle file.
60-
await createRollupBundle({
61-
moduleName: moduleName,
62-
entry: entryFile,
63-
dest: fesm2015File,
64-
format: 'es',
65-
});
66-
67-
// Downlevel FESM-2015 file to ES5.
68-
transpileFile(fesm2015File, fesm2014File, {
69-
target: ScriptTarget.ES5,
70-
module: ModuleKind.ES2015,
71-
allowJs: true
72-
});
73-
74-
// Create UMD bundle of FESM-2014 output.
75-
await createRollupBundle({
76-
moduleName: moduleName,
77-
entry: fesm2014File,
78-
dest: umdFile,
79-
format: 'umd'
80-
});
81-
82-
// Output a minified version of the UMD bundle
83-
writeFileSync(umdMinFile, uglify.minify(umdFile, { preserveComments: 'license' }).code);
84-
}
85-
8649
/**
8750
* Asset tasks. Building SaSS files and inlining CSS, HTML files into the ESM output.
8851
**/

0 commit comments

Comments
 (0)