diff --git a/.travis.yml b/.travis.yml index dc3f4e01dfe6..9d06eeaa70a0 100644 --- a/.travis.yml +++ b/.travis.yml @@ -24,19 +24,11 @@ env: - BROWSER_STACK_ACCESS_KEY=BWCd4SynLzdDcv8xtzsB - ARCH=linux-x64 - BROWSER_PROVIDER_READY_FILE=/tmp/angular-material2-build/readyfile - # Token for tsd to increase github rate limit - # See https://github.com/DefinitelyTyped/tsd#tsdrc - # This does not use http://docs.travis-ci.com/user/environment-variables/#Secure-Variables - # because those are not visible for pull requests, and those should also be reliable. - # This SSO token belongs to github account angular-github-ratelimit-token which has no access - # (password is in Valentine) - - TSDRC='{"token":"ef474500309daea53d5991b3079159a29520a40b"}' # GITHUB_TOKEN_ANGULAR - secure: "fq/U7VDMWO8O8SnAQkdbkoSe2X92PVqg4d044HmRYVmcf6YbO48+xeGJ8yOk0pCBwl3ISO4Q2ot0x546kxfiYBuHkZetlngZxZCtQiFT9kyId8ZKcYdXaIW9OVdw3Gh3tQyUwDucfkVhqcs52D6NZjyE2aWZ4/d1V4kWRO/LMgo=" matrix: # Order: a slower build first, so that we don't occupy an idle travis worker waiting for others to complete. - MODE=lint - - MODE=circular_deps - MODE=extract_metadata - MODE=e2e - MODE=saucelabs_required @@ -51,13 +43,12 @@ matrix: install: - npm install - - npm run typings before_script: - mkdir -p $LOGS_DIR script: -- ./scripts/ci/build-and-test.sh + - ./scripts/ci/build-and-test.sh cache: directories: diff --git a/angular-cli-build.js b/angular-cli-build.js deleted file mode 100644 index f7225769f49c..000000000000 --- a/angular-cli-build.js +++ /dev/null @@ -1,111 +0,0 @@ -'use strict'; -const fs = require('fs'); -const path = require('path'); - -// Import the require hook. Enables us to require TS files natively. -require('ts-node/register'); - -const Angular2App = require('angular-cli/lib/broccoli/angular2-app'); -const Funnel = require('broccoli-funnel'); -const MergeTree = require('broccoli-merge-trees'); -const autoPrefixerTree = require('broccoli-autoprefixer'); - - -module.exports = function(defaults) { - // The Angular Application tree. - const appTree = _buildAppTree(defaults); - - // The CSS tree that is auto prefixed with browser support. - const cssAutoprefixed = autoPrefixerTree(new Funnel(appTree, { - include: [ '**/*.css' ] - })); - - // Include the scss sources in the output for when we publish. - const scssSources = new Funnel('src', {include: ['**/*.scss']}); - - return new MergeTree([appTree, cssAutoprefixed, scssSources], { overwrite: true }); -}; - - -/** - * Build the Broccoli Tree containing all the files used as the input to the Demo Angular2App. - */ -function _buildDemoAppInputTree() { - return new MergeTree([ - new Funnel('typings', { - destDir: 'typings' - }), - new Funnel('src', { - include: ['components/**/*', 'core/**/*'], - destDir: 'src/demo-app' - }), - new Funnel('src/demo-app', { - destDir: 'src/demo-app' - }) - ]); -} - - -/** - * Build the Broccoli Tree containing all the files used as the input to the e2e Angular2App. - */ -function _buildE2EAppInputTree() { - return new MergeTree([ - new Funnel('typings', { - destDir: 'typings' - }), - new Funnel('src', { - include: ['components/**/*', 'core/**/*'], - destDir: 'src/e2e-app' - }), - new Funnel('src/e2e-app', { - destDir: 'src/e2e-app' - }) - ]); -} - - -/** - * Build the Broccoli Tree that contains the Angular2 App. This picks between E2E, Example or Demo - * app. - * @param defaults The default objects from AngularCLI (deprecated). - * @returns {Angular2App} - */ -function _buildAppTree(defaults) { - let inputNode; - let sourceDir; - switch(process.env['MD_APP']) { - case 'e2e': - inputNode = _buildE2EAppInputTree(); - sourceDir = 'src/e2e-app'; - break; - default: - inputNode = _buildDemoAppInputTree(); - sourceDir = 'src/demo-app'; - } - - return new Angular2App(defaults, inputNode, { - sourceDir: sourceDir, - polyfills: [ - 'vendor/core-js/client/core.js', - 'vendor/systemjs/dist/system.src.js', - 'vendor/zone.js/dist/zone.js', - 'vendor/hammerjs/hammer.min.js' - ], - tsCompiler: {}, - sassCompiler: { - includePaths: [ - 'src/core/style' - ] - }, - vendorNpmFiles: [ - 'systemjs/dist/system-polyfills.js', - 'systemjs/dist/system.src.js', - 'zone.js/dist/*.+(js|js.map)', - 'core-js/client/core.js', - 'rxjs/**/*.+(js|js.map)', - '@angular/**/*.+(js|js.map)', - 'hammerjs/*.min.+(js|js.map)' - ] - }); -} diff --git a/angular-cli.json b/angular-cli.json deleted file mode 100644 index b416b34f14ee..000000000000 --- a/angular-cli.json +++ /dev/null @@ -1,25 +0,0 @@ -{ - "project": { - "version": "0.0.37", - "name": "material2" - }, - "apps": [ - {"main": "src/main.ts", "tsconfig": "src/tsconfig.json"} - ], - "addons": [], - "packages": [], - "e2e": { - "protractor": { - "config": "test/protractor.conf.js" - } - }, - "test": { - "karma": { - "config": "test/karma.conf.js" - } - }, - "defaults": { - "prefix": "", - "sourceDir": "src" - } -} diff --git a/gulpfile.js b/gulpfile.js new file mode 100644 index 000000000000..45e68bf5d1f1 --- /dev/null +++ b/gulpfile.js @@ -0,0 +1,14 @@ +'use strict'; +/** + * Load the TypeScript compiler, then load the TypeScript gulpfile which simply loads all + * the tasks. The tasks are really inside tools/gulp/tasks. + */ + +const path = require('path'); + +// Register TS compilation. +require('ts-node').register({ + project: path.join(__dirname, 'tools/gulp') +}); + +require('./tools/gulp/gulpfile'); diff --git a/package.json b/package.json index eb48e288a800..f1f0ceecd407 100644 --- a/package.json +++ b/package.json @@ -8,17 +8,12 @@ "url": "https://github.com/angular/material2.git" }, "scripts": { - "ci:forbidden-identifiers": "node ./scripts/ci/forbidden-identifiers.js", - "build": "ng build", - "demo-app": "ng serve", - "test": "karma start test/karma.conf.js", - "tslint": "tslint -c tslint.json 'src/**/*.ts'", - "stylelint": "stylelint 'src/**/*.scss' --config stylelint-config.json --syntax scss", - "check-circular-deps": "madge --circular ./dist", - "typings": "typings install --global", - "postinstall": "npm run typings", - "e2e": "protractor", - "inline-resources": "node ./scripts/release/inline-resources.js ./dist/components", + "build": "gulp build", + "demo-app": "gulp serve:devapp", + "test": "gulp test", + "tslint": "gulp lint", + "stylelint": "gulp lint", + "e2e": "gulp e2e", "deploy": "firebase deploy", "webdriver-manager": "webdriver-manager" }, @@ -31,10 +26,10 @@ "@angular/common": "2.0.0-rc.5", "@angular/compiler": "2.0.0-rc.5", "@angular/core": "2.0.0-rc.5", + "@angular/forms": "0.3.0", "@angular/http": "2.0.0-rc.5", "@angular/platform-browser": "2.0.0-rc.5", "@angular/platform-browser-dynamic": "2.0.0-rc.5", - "@angular/forms": "0.3.0", "@angular/router": "3.0.0-rc.1", "core-js": "^2.4.0", "hammerjs": "^2.0.8", @@ -44,19 +39,27 @@ }, "devDependencies": { "@angular/compiler-cli": "^0.4.1", - "add-stream": "^1.0.0", - "angular-cli": "^1.0.0-beta.9", - "broccoli-autoprefixer": "^4.1.0", - "broccoli-funnel": "^1.0.1", - "broccoli-merge-trees": "^1.1.1", + "@types/glob": "^5.0.29", + "@types/gulp": "^3.8.29", + "@types/hammerjs": "^2.0.30", + "@types/jasmine": "^2.2.31", + "@types/merge2": "0.0.28", + "@types/node": "^6.0.34", + "@types/run-sequence": "0.0.27", "browserstacktunnel-wrapper": "^1.4.2", "conventional-changelog": "^1.1.0", - "ember-cli-inject-live-reload": "^1.4.0", + "express": "^4.14.0", "firebase-tools": "^2.2.1", "fs-extra": "^0.26.5", "glob": "^6.0.4", + "gulp": "^3.9.1", + "gulp-clean": "^0.3.2", + "gulp-sass": "^2.3.2", + "gulp-server-livereload": "^1.8.2", + "gulp-shell": "^0.5.2", + "gulp-sourcemaps": "^1.6.0", + "gulp-typescript": "^2.13.6", "jasmine-core": "^2.4.1", - "js-yaml": "^3.5.2", "karma": "^1.1.1", "karma-browserstack-launcher": "^1.0.1", "karma-chrome-launcher": "^1.0.1", @@ -64,9 +67,12 @@ "karma-jasmine": "^1.0.2", "karma-sauce-launcher": "^1.0.0", "madge": "^0.6.0", + "merge2": "^1.0.2", "node-sass": "^3.4.2", "protractor": "^3.3.0", "protractor-accessibility-plugin": "0.1.1", + "resolve-bin": "^0.4.0", + "run-sequence": "^1.2.2", "sass": "^0.5.0", "strip-ansi": "^3.0.0", "stylelint": "^6.9.0", diff --git a/scripts/ci/build-and-test.sh b/scripts/ci/build-and-test.sh index 969cba5a68ed..54b3f5684552 100755 --- a/scripts/ci/build-and-test.sh +++ b/scripts/ci/build-and-test.sh @@ -14,42 +14,12 @@ start_tunnel wait_for_tunnel if is_lint; then - npm run tslint - npm run ci:forbidden-identifiers - npm run stylelint -elif is_circular_deps_check; then - # Build first because madge needs the JavaScript output. - ng build - npm run check-circular-deps + $(npm bin)/gulp ci:lint elif is_e2e; then - # Start up the e2e app. This will take some time. - echo "Starting e2e app" - MD_APP=e2e ng serve & - sleep 1 - - # Wait until the dist/ directory is created, indicating that the e2e app is ready. - # Use the presence of `button.js` to determine whether the compiled output is ready to be served. - echo "Waiting for e2e app to start" - while [ ! -f ./dist/components/button/button.js ]; do - sleep 2 - echo -n ".." - done - - echo "\nInlining resources" - npm run inline-resources - - # Run the e2e tests on the served e2e app. - echo "Starting e2e tests" - ng e2e + $(npm bin)/gulp ci:e2e elif is_extract_metadata; then - # Run `tsc` first so that the directory structure in dist/ matches what ngc expects. - ./node_modules/.bin/tsc -p ./src/demo-app/ - ./node_modules/.bin/ngc -p ./src/demo-app/ + $(npm bin)/gulp ci:extract-metadata else - # Unit tests - npm run build - npm run inline-resources - - karma start test/karma.conf.js --single-run --no-auto-watch --reporters='dots' + $(npm bin)/gulp ci:test fi teardown_tunnel diff --git a/scripts/ci/forbidden-identifiers.js b/scripts/ci/forbidden-identifiers.js index 0f01ad0b5a04..b08b60c5af21 100755 --- a/scripts/ci/forbidden-identifiers.js +++ b/scripts/ci/forbidden-identifiers.js @@ -29,7 +29,7 @@ const blocked_statements = [ ]; const sourceFolders = ['./src', './e2e']; -const scopePackages = ['src/core'].concat(glob('src/components/*')); +const scopePackages = glob('src/lib/*'); const blockedRegex = new RegExp(blocked_statements.join('|'), 'g'); const importRegex = /from\s+'(.*)';/g; @@ -227,4 +227,4 @@ function exec(cmd) { } }); }); -} \ No newline at end of file +} diff --git a/scripts/ci/sources/mode.sh b/scripts/ci/sources/mode.sh index a6903ccf3d7f..7d31a010ceae 100644 --- a/scripts/ci/sources/mode.sh +++ b/scripts/ci/sources/mode.sh @@ -9,10 +9,6 @@ is_lint() { [[ "$MODE" = lint ]] } -is_circular_deps_check() { - [[ "$MODE" = circular_deps ]] -} - is_extract_metadata() { [[ "$MODE" = extract_metadata ]] } diff --git a/scripts/release/inline-resources.js b/scripts/release/inline-resources.js index 42cfd23f8ca1..fb4bc16171ec 100644 --- a/scripts/release/inline-resources.js +++ b/scripts/release/inline-resources.js @@ -29,29 +29,34 @@ const readFile = promiseify(fs.readFile); const writeFile = promiseify(fs.writeFile); -/** - * For every argument, inline the templates and styles under it and write the new file. - */ -for (let arg of process.argv.slice(2)) { - if (arg.indexOf('*') < 0) { - // Argument is a directory target, add glob patterns to include every files. - arg = path.join(arg, '**', '*'); - } +function inlineResources(globs) { + /** + * For every argument, inline the templates and styles under it and write the new file. + */ + for (let pattern of globs) { + if (pattern.indexOf('*') < 0) { + // Argument is a directory target, add glob patterns to include every files. + pattern = path.join(pattern, '**', '*'); + } - const files = glob.sync(arg, {}) - .filter(name => /\.js$/.test(name)); // Matches only JavaScript files. + const files = glob.sync(pattern, {}) + .filter(name => /\.js$/.test(name)); // Matches only JavaScript files. - // Generate all files content with inlined templates. - files.forEach(filePath => { - readFile(filePath, 'utf-8') - .then(content => inlineTemplate(filePath, content)) - .then(content => inlineStyle(filePath, content)) - .then(content => removeModuleIds(content)) - .then(content => writeFile(filePath, content)) - .catch(err => { - console.error('An error occured: ', err); - }); - }); + // Generate all files content with inlined templates. + files.forEach(filePath => { + readFile(filePath, 'utf-8') + .then(content => inlineTemplate(filePath, content)) + .then(content => inlineStyle(filePath, content)) + .then(content => writeFile(filePath, content)) + .catch(err => { + console.error('An error occured: ', err); + }); + }); + } +} + +if (require.main === module) { + inlineResources(process.argv.slice(2)); } @@ -98,12 +103,5 @@ function inlineStyle(filePath, content) { }); } -/** - * Removes the module ids of the component metadata. - * Since the templates and styles are now inlined, the module id has become unnecessary and - * can cause unexpected issues. - */ -function removeModuleIds(content) { - // Match the line feeds as well, because we want to get rid of that line. - return content.replace(/^\W+moduleId:\W+module\.id,?[\n|\r]+/gm, ''); -} + +module.exports = inlineResources; diff --git a/scripts/release/stage-release.bat b/scripts/release/stage-release.bat deleted file mode 100644 index f3ebf2068f61..000000000000 --- a/scripts/release/stage-release.bat +++ /dev/null @@ -1,28 +0,0 @@ -@echo off -REM Stages a release by putting everything that should be packaged and released -REM into the ./deploy folder. This script should be run from the root of the -REM material2 repo. - -REM Make sure you are not running `ng serve` or `ng build --watch` when running this. - - -REM Clear dist/ and deploy/ so that we guarantee there are no stale artifacts. -rmdir /S /Q dist -rmdir /S /Q deploy - -REM Perform a build with the modified tsconfig.json. -call ng build - -REM Inline the css and html into the component ts files. -call npm run inline-resources - -REM deploy/ serves as a working directory to stage the release. -mkdir deploy - -REM Copy all components/ to deploy/ -xcopy /E dist\components\*.* deploy\ - -REM Copy the core/ directory directly into ./deploy -xcopy /E dist\core\*.* deploy\core\ - -REM To test the packages, simply `npm install` the package directories. diff --git a/scripts/release/stage-release.sh b/scripts/release/stage-release.sh deleted file mode 100755 index e0a951e72efc..000000000000 --- a/scripts/release/stage-release.sh +++ /dev/null @@ -1,72 +0,0 @@ -#!/usr/bin/env bash -set -xu - -# Stages a release by putting everything that should be packaged and released -# into the ./deploy folder. This script should be run from the root of the -# material2 repo. - -# Make sure you are not running `ng serve` or `ng build --watch` when running this. - - -# Clear dist/ and deploy/ so that we guarantee there are no stale artifacts. -rm -rf ./dist -rm -rf ./deploy - -# deploy/ serves as a working directory to stage the release. -mkdir deploy - -# Start off by building normally. -ng build - -# `ng build` does not complete synchronously, so wait a moment for it. -sleep 2 - -# We need to remove moduleId for the ngc build. We do this by simply commenting out with a -# distinguishing marker and then undoing those lines after we've generated the .metadata.json files. -grep -lr "moduleId:" ./src/ | xargs sed -i 's|moduleId:|//MODULE moduleId:|g' - -# Run tsc directly first so that the output directories match what ngc is expecting. This is -# different from what the CLI will output for *demo-app*, but we don't care about the output for -# demo-app when we're staging a release (only components/ and core/). -tsc -p ./src/demo-app - -# Now run ngc to generate the .metadata.json files. Our tsconfig is configred with -# skipTemplateCodegen, so only the metadata files are actually generated. -./node_modules/.bin/ngc -p ./src/demo-app - -# Restore the moduleIds. -grep -lr "//MODULE " ./src/ | xargs sed -i 's|//MODULE ||g' - -# At this point, we have all of our .metadata.json files, which is all we care about from ngc. -# Temporarily copy them over to deploy/ so we can cut a clean build. -# Use rsync since we want to preserve the directory structure and `cp --parents` won't work on OSX. -find ./dist/{components,core} -iname "*.metadata.json" | xargs -i rsync -Rq {} ./deploy/ - -# Wipe away dist and perform a clean build. -rm -rf ./dist -ng build - -# Inline the css and html into the component ts files. -npm run inline-resources - -# Move the .metadata.json files back to where we want them. -(cd ./deploy ; find ./ -iname "*.metadata.json" | xargs -i rsync -Rq {} ../) - -# Clear the deploy/ directory again now that we've pulled the metadata out of it. -rm -rf ./deploy/* - -# Copy all components/ to deploy/ -cp -R ./dist/components/* ./deploy/ - -# Copy the core/ directory directly into ./deploy -cp -R ./dist/core/ ./deploy/core/ - -# Remove css files from src/ -find ./src -iname "*.css" | xargs rm - -# Remove test files from deploy/ -find ./deploy -iname "*.spec.d.ts" | xargs rm -find ./deploy -iname "*.spec.js" | xargs rm -find ./deploy -iname "*.spec.js.map" | xargs rm - -# To test the packages, simply `npm install` the package directories. diff --git a/src/demo-app/baseline/baseline-demo.scss b/src/demo-app/baseline/baseline-demo.scss index 4ec33a506a96..32ba259cffaa 100644 --- a/src/demo-app/baseline/baseline-demo.scss +++ b/src/demo-app/baseline/baseline-demo.scss @@ -1,5 +1,3 @@ -@import 'default-theme'; -@import 'variables'; .demo-basic { padding: 0; @@ -18,13 +16,6 @@ width: inherit; } -.demo-transform { - transition: color $swift-ease-out-duration $swift-ease-out-timing-function; -} -.demo-primary { - color: md-color($md-primary); -} - .demo-card { margin: 16px; } diff --git a/src/demo-app/environment.ts b/src/demo-app/environment.ts deleted file mode 100644 index 79ee96fdfdbd..000000000000 --- a/src/demo-app/environment.ts +++ /dev/null @@ -1,7 +0,0 @@ -// The file for the current environment will overwrite this one during build -// Different environments can be found in config/environment.{dev|prod}.ts -// The build system defaults to the dev environment - -export const environment = { - production: false -}; diff --git a/src/demo-app/index.html b/src/demo-app/index.html index d2ee30b106b5..02da2647b9d4 100644 --- a/src/demo-app/index.html +++ b/src/demo-app/index.html @@ -1,21 +1,14 @@ -{{!-- This file is an handlebar file that gets filled at build time. --}} Material2 - - - {{!-- Add live-reload support, only in development. --}} - {{#unless environment.production}} - - {{/unless}} + - - + @@ -23,10 +16,10 @@ Loading... - {{!-- Add all polyfill scripts. --}} - {{#each scripts.polyfills}} - - {{/each}} + + + + - {{/unless}} + - + @@ -21,9 +16,10 @@ Loading... - {{#each scripts.polyfills}} - - {{/each}} + + + +