From 5809444aaf39208b5a37d381c4e97401e30fc033 Mon Sep 17 00:00:00 2001 From: Adam Bradley Date: Tue, 18 Apr 2017 15:31:13 -0500 Subject: [PATCH] chore(tasks): add v4 build tasks --- README.md | 57 ++++++++++++++++++--------------- package.json | 2 +- scripts/gulp/gulpfile.ts | 1 + scripts/gulp/tasks/core.ts | 36 +++++++++++++++++++++ scripts/gulp/tasks/demos.dev.ts | 6 ++-- scripts/gulp/tasks/e2e.dev.ts | 6 ++-- scripts/gulp/tasks/e2e.prod.ts | 2 +- scripts/gulp/tasks/release.ts | 1 + scripts/gulp/util.ts | 8 ++++- 9 files changed, 87 insertions(+), 32 deletions(-) create mode 100644 scripts/gulp/tasks/core.ts diff --git a/README.md b/README.md index 2d8b75e70d..fc19ef06fc 100644 --- a/README.md +++ b/README.md @@ -1,37 +1,44 @@ -[![npm version](https://badge.fury.io/js/ionic-angular.svg)](https://badge.fury.io/js/ionic-angular) -[![Circle CI](https://circleci.com/gh/driftyco/ionic.svg?style=shield&circle-token=:circle-token)](https://circleci.com/gh/driftyco/ionic) +# Ionic Angular v4 -# Ionic +Ionic components will be working toward embracing web components with the following goals: -[Ionic](http://ionicframework.com/) is the open-source mobile app development framework that makes it easy to -build top quality native and progressive web apps with web technologies. +- Users continue to use Angular to develop their apps and components +- No changes to the development and build time experience +- Minimal changes to the user’s markup +- Reduce build times +- Reduce startup times +- Ionic components are loaded asynchronously by default and without added configuration -Ionic is based on [Angular](https://angular.io/) and comes with many significant performance, usability, and -feature improvements over the past versions. +For the most part, `ionic-angular` will continue to work the same way, using the same API as previous versions. However, the implementation of some of the less complex components, such as `ion-badge`, will use the standardized web component v1 spec, which ships today in a majority of browsers. Additionally, for browsers that do not support web components, polyfills are added on-demand, which is already built into `ionic-angular` v4. -See the [Building Apps with Ionic](http://adamdbradley.github.io/building-with-ionic2) slides for a quick -overview or watch our [Crash Course](https://youtu.be/O2WiI9QrS5s) video for a quick walkthrough on how to get -started using Ionic. +We will continue to develop and support ionic-angular v3 in the master branch. Ultimately the differences between v3 and v4 are internal, but on the surface it's the same `ionic-angular` as v3. :beers: -### Getting Started -Start a new project by following our quick [Getting Started guide](http://ionicframework.com/getting-started/). -We would love to hear from you! If you have any feedback or run into issues using our framework, please file -an [issue](https://github.com/driftyco/ionic/issues/new) on this repository. +### Changes -### Contributing +What's great is that Angular already supports and works with web components! In order to enable them simply add `CUSTOM_ELEMENTS_SCHEMA` to the `schemas` property of `@NgModule`, such as: -Thanks for your interest in contributing! Read up on our guidelines for -[contributing](https://github.com/driftyco/ionic/blob/master/.github/CONTRIBUTING.md) -and then look through our issues with a [help wanted](https://github.com/driftyco/ionic/issues?q=is%3Aopen+is%3Aissue+label%3A%22help+wanted%22) -label. +``` +import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; -### Examples +@NgModule({ + ... + schemas: [CUSTOM_ELEMENTS_SCHEMA] +}) +export class AppModule {} +``` -The [Ionic Conference App](https://github.com/driftyco/ionic-conference-app) is a full featured Ionic app. -It is the perfect starting point for learning and building your own app. -### Ionic 1.x +### Testing -The source code for Ionic 1.x has been moved to [driftyco/ionic-v1](https://github.com/driftyco/ionic-v1). -Please open any issues and pull requests related to Ionic 1.x on that repository. +Update your `package.json` to match the following dependencies, remove the existing node_modules directory, and then run npm install: + +``` + "@ionic/app-scripts": "nightly" + "ionic-angular": "canary" +``` + + +### Future Goals + +As Ionic components migrate to the web component standard, a goal of ours is to have Ionic components easily work within all of the popular frameworks. diff --git a/package.json b/package.json index 254d59db93..64c9e2e0f1 100644 --- a/package.json +++ b/package.json @@ -38,7 +38,7 @@ "zone.js": "^0.8.5" }, "devDependencies": { - "@ionic/app-scripts": "1.3.4", + "@ionic/app-scripts": "nightly", "@ionic/commit-hooks": "1.0.3", "@types/connect": "3.4.30", "@types/del": "2.2.31", diff --git a/scripts/gulp/gulpfile.ts b/scripts/gulp/gulpfile.ts index 4c9fd9142b..0b22699cbf 100644 --- a/scripts/gulp/gulpfile.ts +++ b/scripts/gulp/gulpfile.ts @@ -1,5 +1,6 @@ import './tasks/build'; import './tasks/clean'; +import './tasks/core'; import './tasks/default'; import './tasks/demos'; import './tasks/demos.dev'; diff --git a/scripts/gulp/tasks/core.ts b/scripts/gulp/tasks/core.ts new file mode 100644 index 0000000000..ce49509afb --- /dev/null +++ b/scripts/gulp/tasks/core.ts @@ -0,0 +1,36 @@ +import { DIST_BUILD_ROOT, PROJECT_ROOT } from '../constants'; +import { task } from 'gulp'; +import { accessSync } from 'fs'; +import { join } from 'path'; + + +task('core', (done) => { + const cwd = join(PROJECT_ROOT, '../ionic-core'); + const args = [ + 'run', + 'build.angular', + DIST_BUILD_ROOT + ]; + + try { + accessSync(cwd); + } catch (e) { + console.log('core directory not found:', cwd); + process.exit(1); + } + + const spawn = require('child_process').spawn; + const ls = spawn('npm', args, { cwd: cwd }); + + ls.stdout.on('data', (data) => { + console.log(data.toString().trim()); + }); + + ls.stderr.on('data', (data) => { + console.log(data.toString().trim()); + }); + + ls.on('close', (code) => { + done(); + }); +}); diff --git a/scripts/gulp/tasks/demos.dev.ts b/scripts/gulp/tasks/demos.dev.ts index f43f787223..f27c600817 100644 --- a/scripts/gulp/tasks/demos.dev.ts +++ b/scripts/gulp/tasks/demos.dev.ts @@ -19,8 +19,10 @@ task('demos.watch', ['demos.prepare'], (done: Function) => { }); function serveDemo(folderName: any) { - + const testOrDemoName = folderName; const ionicAngularDir = join(PROJECT_ROOT, 'src'); + const coreCompilerFilePath = join(PROJECT_ROOT, 'dist', 'ionic-angular', 'compiler'); + const coreDir = join(PROJECT_ROOT, 'dist', 'ionic-angular'); const srcTestRoot = join(DEMOS_ROOT, 'src', folderName); const distDemoRoot = join(DIST_DEMOS_ROOT, folderName); const includeGlob = [ join(ionicAngularDir, '**', '*.ts'), @@ -40,5 +42,5 @@ function serveDemo(folderName: any) { const appNgModulePath = join(srcTestRoot, 'app', 'app.module.ts'); const distDir = join(distDemoRoot, 'www'); - return runAppScriptsServe(folderName, appEntryPoint, appNgModulePath, ionicAngularDir, distDir, pathToWriteFile, ionicAngularDir, sassConfigPath, copyConfigPath, watchConfigPath); + return runAppScriptsServe(testOrDemoName, appEntryPoint, appNgModulePath, ionicAngularDir, distDir, pathToWriteFile, ionicAngularDir, coreCompilerFilePath, coreDir, sassConfigPath, copyConfigPath, watchConfigPath); } diff --git a/scripts/gulp/tasks/e2e.dev.ts b/scripts/gulp/tasks/e2e.dev.ts index 63e1f86638..86c032f242 100644 --- a/scripts/gulp/tasks/e2e.dev.ts +++ b/scripts/gulp/tasks/e2e.dev.ts @@ -21,8 +21,10 @@ task('e2e.watch', ['e2e.prepare'], (done: Function) => { }); function serveTest(folderInfo: any) { - + const testOrDemoName = folderInfo.componentName + '/' + folderInfo.componentTest; const ionicAngularDir = join(PROJECT_ROOT, 'src'); + const coreCompilerFilePath = join(PROJECT_ROOT, 'dist', 'ionic-angular', 'compiler'); + const coreDir = join(PROJECT_ROOT, 'dist', 'ionic-angular'); const srcTestRoot = join(PROJECT_ROOT, 'src', 'components', folderInfo.componentName, 'test', folderInfo.componentTest); const distTestRoot = join(PROJECT_ROOT, 'dist', 'e2e', 'components', folderInfo.componentName, 'test', folderInfo.componentTest); const includeGlob = [ join(ionicAngularDir, '**', '*.ts')]; @@ -47,5 +49,5 @@ function serveTest(folderInfo: any) { const appNgModulePath = join(dirname(appEntryPoint), 'app.module.ts'); const distDir = join(distTestRoot, 'www'); - return runAppScriptsServe(folderInfo.componentName + '/' + folderInfo.componentTest, appEntryPoint, appNgModulePath, ionicAngularDir, distDir, pathToWriteFile, ionicAngularDir, sassConfigPath, copyConfigPath, null); + return runAppScriptsServe(testOrDemoName, appEntryPoint, appNgModulePath, ionicAngularDir, distDir, pathToWriteFile, ionicAngularDir, coreCompilerFilePath, coreDir, sassConfigPath, copyConfigPath, null); } diff --git a/scripts/gulp/tasks/e2e.prod.ts b/scripts/gulp/tasks/e2e.prod.ts index 24fcfff8b7..7b64f037af 100644 --- a/scripts/gulp/tasks/e2e.prod.ts +++ b/scripts/gulp/tasks/e2e.prod.ts @@ -15,7 +15,7 @@ import { createTempTsConfig, createTimestamp, getFolderInfo, readFileAsync, runA import * as pAll from 'p-all'; task('e2e.prepare', (done: Function) => { - runSequence('e2e.clean', 'e2e.polyfill', 'e2e.prepareSass', (err: any) => done(err)); + runSequence('e2e.clean', 'core', 'e2e.polyfill', 'e2e.prepareSass', (err: any) => done(err)); }); task('e2e.prepareSass', (done: Function) => { diff --git a/scripts/gulp/tasks/release.ts b/scripts/gulp/tasks/release.ts index 165c339ab0..bd1a162800 100644 --- a/scripts/gulp/tasks/release.ts +++ b/scripts/gulp/tasks/release.ts @@ -194,6 +194,7 @@ task('release.copyProdVersion', () => { task('release.prepareReleasePackage', (done: (err: any) => void) => { runSequence('clean', + 'core', 'release.polyfill', 'compile.release', 'release.copyTemplates', diff --git a/scripts/gulp/util.ts b/scripts/gulp/util.ts index 30549e1028..e1f108ef56 100644 --- a/scripts/gulp/util.ts +++ b/scripts/gulp/util.ts @@ -56,6 +56,10 @@ export function createTempTsConfig(includeGlob: string[], target: string, module } config.include = includeGlob; + config.exclude = [ + './components/badge/**/*' + ]; + if (overrideCompileOptions) { config.compilerOptions = Object.assign(config.compilerOptions, overrideCompileOptions); } @@ -188,7 +192,7 @@ export function runWebpack(pathToWebpackConfig: string, done: Function) { }); } -export function runAppScriptsServe(testOrDemoName: string, appEntryPoint: string, appNgModulePath: string, srcDir: string, distDir: string, tsConfig: string, ionicAngularDir: string, sassConfigPath: string, copyConfigPath: string, watchConfigPath: string) { +export function runAppScriptsServe(testOrDemoName: string, appEntryPoint: string, appNgModulePath: string, srcDir: string, distDir: string, tsConfig: string, ionicAngularDir: string, coreCompilerFilePath: string, coreDir: string, sassConfigPath: string, copyConfigPath: string, watchConfigPath: string) { console.log('Running ionic-app-scripts serve with', testOrDemoName); const deepLinksDir = dirname(dirname(appNgModulePath)); let scriptArgs = [ @@ -201,6 +205,8 @@ export function runAppScriptsServe(testOrDemoName: string, appEntryPoint: string '--tsconfig', tsConfig, '--readConfigJson', 'false', '--ionicAngularDir', ionicAngularDir, + '--coreCompilerFilePath', coreCompilerFilePath, + '--coreDir', coreDir, '--sass', sassConfigPath, '--copy', copyConfigPath, '--enableLint', 'false',