chore(tasks): add v4 build tasks

README.md

@@ -1,37 +1,44 @@
-[![npm version](https://badge.fury.io/js/ionic-angular.svg)](https://badge.fury.io/js/ionic-angular)
+# Ionic Angular v4
-[![Circle CI](https://circleci.com/gh/driftyco/ionic.svg?style=shield&circle-token=:circle-token)](https://circleci.com/gh/driftyco/ionic)
 
-# 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
+- Users continue to use Angular to develop their apps and components
-build top quality native and progressive web apps with web technologies.
+- 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
+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.
-feature improvements over the past versions.
 
-See the [Building Apps with Ionic](http://adamdbradley.github.io/building-with-ionic2) slides for a quick
+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:
-overview or watch our [Crash Course](https://youtu.be/O2WiI9QrS5s) video for a quick walkthrough on how to get
-started using Ionic.
 
-### Getting Started
 
-Start a new project by following our quick [Getting Started guide](http://ionicframework.com/getting-started/).
+### Changes
-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.
 
-### 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)
+import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
-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.
 
-### 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).
+Update your `package.json` to match the following dependencies, remove the existing node_modules directory, and then run npm install:
-Please open any issues and pull requests related to Ionic 1.x on that repository.
+
+```
+  "@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.

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",

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';

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();
+  });
+});

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);
 }

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);
 }

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) => {

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',

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',