feat(angular): v10 support (#286)

NativeScript · Jul 30, 2020 · 55fa354 · 55fa354
1 parent b5678dd
commit 55fa354
Show file tree

Hide file tree

Showing 37 changed files with 211 additions and 219 deletions.
diff --git a/.npmignore b/.npmignore
@@ -7,6 +7,7 @@
 *.spec.js
 *.js.map
 tsconfig.json
+*.tgz
 
 /jasmine-config
 

diff --git a/README.md b/README.md
@@ -141,8 +141,8 @@ This includes the following steps:
 In a code sharing project to build:
 
  * a `web` app call: `ng serve`,
- * an `iOS` app call: `tns run ios --env.aot`,
- * an `Android` app call: `tns run android --env.aot`
+ * an `iOS` app call: `tns run ios`,
+ * an `Android` app call: `tns run android`
 
 ## Templates
 

diff --git a/package.json b/package.json
@@ -1,8 +1,9 @@
 {
   "name": "@nativescript/schematics",
-  "version": "9.0.0",
+  "version": "10.0.1",
   "description": "Schematics for NativeScript Angular apps.",
   "scripts": {
+    "clean": "npx rimraf node_modules package-lock.json && npm i",
     "build": "tsc -p tsconfig.json",
     "watch": "tsc -w -p tsconfig.json",
     "test": "npm run build && npm run jasmine",
@@ -23,21 +24,23 @@
   },
   "schematics": "./src/collection.json",
   "dependencies": {
-    "@angular-devkit/core": "~9.1.0",
-    "@angular-devkit/schematics": "~9.1.0",
+    "@angular-devkit/core": "~10.0.0",
+    "@angular-devkit/schematics": "~10.0.0",
     "@nativescript/tslint-rules": "~0.0.5",
-    "@phenomnomnominal/tsquery": "^4.1.0"
+    "@phenomnomnominal/tsquery": "^4.1.0",
+    "strip-json-comments": "~3.1.1"
   },
   "devDependencies": {
-    "@schematics/angular": "~9.1.0",
+    "@angular/cli": "~10.0.0",
+    "@schematics/angular": "~10.0.0",
     "@types/jasmine": "~3.5.0",
     "@types/jasminewd2": "~2.0.3",
     "@types/node": "^12.11.1",
     "conventional-changelog-cli": "^2.0.1",
-    "jasmine": "^2.8.0",
-    "jasmine-spec-reporter": "^4.2.1",
+    "jasmine": "^3.5.0",
+    "jasmine-spec-reporter": "^5.0.2",
     "tslint": "~6.1.0",
-    "typescript": "~3.8.3"
+    "typescript": "~3.9.0"
   },
   "repository": {
     "type": "git",
@@ -60,7 +63,8 @@
   "contributors": [
     "Stanimira Vlaeva <Stanimira.Vlaeva@progress.com>",
     "Sebastian Witalec <Sebastian.Witalec@progress.com>",
-    "Danny Koppenhagen <d-koppenhagen>"
+    "Danny Koppenhagen <d-koppenhagen>",
+    "NativeScript Team <oss@nativescript.org>"
   ],
   "license": "Apache-2.0"
 }
diff --git a/...d-ns/_ns-files/__sourceDir__/app/__entryComponentName@dasherize__.component__nsext__.html b/...d-ns/_ns-files/__sourceDir__/app/__entryComponentName@dasherize__.component__nsext__.html
@@ -1,4 +1,18 @@
-<!-- https://docs.nativescript.org/angular/core-concepts/angular-navigation.html#page-router-outlet -->
-<page-router-outlet></page-router-outlet>
-<% if (skipAutoGeneratedComponent && !sample) { %><Label text="Entry Component works" textWrap="true"></Label>
-<% } %>
+<GridLayout>
+  <!-- This will contain any angular routes you setup -->
+  <page-router-outlet></page-router-outlet>
+
+  <% if (skipAutoGeneratedComponent && !sample) { %>
+  <!-- This is just a fun sample for you to play with :) -->
+  <StackLayout verticalAlignment="center" (loaded)="loadedSuccess($event)" opacity="0">
+    <Label text="Sweet!" textWrap="true" class="h2 text-center"></Label>
+    <Label text="You should try adding some routes." class="h3 text-center"></Label>
+  </StackLayout>
+  <StackLayout verticalAlignment="center" (loaded)="loadedContainer($event)">
+    <Label text="Congrats! It works" textWrap="true" class="h2 text-center"></Label>
+    <Button text="Keep Tapping for a Surprise!" textWrap="true" class="-primary" (tap)="tapMe()"></Button>
+    <Label [text]="'You have ' + cnt + ' taps left.'" class="h3 text-center"></Label>
+  </StackLayout>
+  <% } %>
+
+</GridLayout>
diff --git a/...add-ns/_ns-files/__sourceDir__/app/__entryComponentName@dasherize__.component__nsext__.ts b/...add-ns/_ns-files/__sourceDir__/app/__entryComponentName@dasherize__.component__nsext__.ts
@@ -1,8 +1,45 @@
-import { Component } from '@angular/core';
+import { Component } from '@angular/core';<% if (skipAutoGeneratedComponent && !sample) { %>
+import { StackLayout, Enums } from '@nativescript/core';<% } %>
 
 @Component({
   selector: '<%= indexAppRootTag %>',
   templateUrl: '<%= entryComponentImportPath %>.html',
 })
+export class <%= entryComponentClassName %> {
+  <% if (skipAutoGeneratedComponent && !sample) { %>
+  title = 'NativeScript';
+  cnt = 3;
+  private messageLayout: StackLayout;
+  private successLayout: StackLayout;
 
-export class <%= entryComponentClassName %> { }
+  tapMe() {
+    this.cnt--;
+    if (this.cnt === 0) {
+      this.messageLayout
+        .animate({
+          translate: { x: 0, y: 150 },
+          opacity: 0,
+          duration: 400,
+          curve: Enums.AnimationCurve.easeOut,
+        })
+        .then(() => {
+          this.successLayout.translateY = 150;
+          this.successLayout.animate({
+            translate: { x: 0, y: 0 },
+            opacity: 1,
+            duration: 300,
+            curve: Enums.AnimationCurve.easeInOut,
+          });
+        });
+    }
+  }
+
+  loadedContainer(args) {
+    this.messageLayout = args.object;
+  }
+
+  loadedSuccess(args) {
+    this.successLayout = args.object;
+  }
+  <% } %>
+}
diff --git a/src/add-ns/_ns-files/__sourceDir__/main__nsext__.ts b/src/add-ns/_ns-files/__sourceDir__/main__nsext__.ts
@@ -1,5 +1,5 @@
 // this import should be first in order to load some required settings (like globals and reflect-metadata)
-import { platformNativeScriptDynamic } from '@nativescript/angular/platform';
+import { platformNativeScriptDynamic } from '@nativescript/angular';
 
 import { <%= entryModuleClassName %> } from '<%= entryModuleImportPath %>';
 

diff --git a/src/add-ns/_ns-files/ngcc.config.js b/src/add-ns/_ns-files/ngcc.config.js
diff --git a/src/add-ns/_ns-files/nsconfig.json b/src/add-ns/_ns-files/nsconfig.json
@@ -3,6 +3,5 @@
   "appPath": "<%= sourceDir %>",
   "nsext": "<%= nsext %>",
   "webext": "<%= webext %>",
-  "shared": true,
-  "useLegacyWorkflow": false
+  "shared": true
 }
diff --git a/src/add-ns/_ns-files/tsconfig__nsext__.json b/src/add-ns/_ns-files/tsconfig__nsext__.json
@@ -3,7 +3,9 @@
   "compilerOptions": {
     "module": "ESNext",
     "moduleResolution": "node",
+    "experimentalDecorators": true,
     "skipLibCheck": true,
+    "baseUrl": ".",
     "paths": {
       "@src/*": [
         "<%= sourceDir %>/*.tns.ts",

diff --git a/src/add-ns/index.ts b/src/add-ns/index.ts
@@ -223,8 +223,8 @@ const addRunScriptsToPackageJson = (tree: Tree, context: SchematicContext) => {
   const packageJson = getPackageJson(tree);
 
   const scriptsToAdd = {
-    android: 'tns run android --env.aot',
-    ios: 'tns run ios --env.aot',
+    android: 'tns run android --no-hmr',
+    ios: 'tns run ios --no-hmr',
     mobile: 'tns run',
     preview: 'tns preview',
     ngcc: 'ngcc --properties es2015 module main --first-only',
@@ -364,16 +364,16 @@ const addDependencies = () => (tree: Tree, context: SchematicContext) => {
 
   // @UPGRADE: Update all versions whenever {N} version updates
   const depsToAdd = {
-    '@nativescript/angular': '~9.0.0',
-    '@nativescript/core': '~6.5.5',
+    '@nativescript/angular': '~10.0.0',
+    '@nativescript/core': 'rc',
     '@nativescript/theme': '~2.2.1',
     'reflect-metadata': '~0.1.12',
     tslib: '1.10.0',
   };
   packageJson.dependencies = {...depsToAdd, ...packageJson.dependencies};
 
   const devDepsToAdd = {
-    'nativescript-dev-webpack': '~1.5.0',
+    '@nativescript/webpack': '~2.0.0',
     '@nativescript/tslint-rules': '~0.0.5',
   };
   packageJson.devDependencies = {...devDepsToAdd, ...packageJson.devDependencies};

diff --git a/src/add-ns/index_spec.ts b/src/add-ns/index_spec.ts
@@ -5,6 +5,7 @@ import { SchematicTestRunner, UnitTestTree } from '@angular-devkit/schematics/te
 
 import { Schema as AddNsOptions } from './schema';
 import { getFileContent } from '@schematics/angular/utility/test';
+import * as stripJsonComments from 'strip-json-comments';
 
 describe('Add {N} schematic', () => {
     const schematicRunner = new SchematicTestRunner(
@@ -36,15 +37,14 @@ describe('Add {N} schematic', () => {
         it('should add dependency to NativeScript schematics', () => {
             const configFile = '/angular.json';
             expect(appTree.files).toContain(configFile);
-            const configFileContent = JSON.parse(getFileContent(appTree, configFile));
+            const configFileContent = JSON.parse(stripJsonComments(getFileContent(appTree, configFile)));
 
-            expect(configFileContent.cli.defaultCollection).toEqual('@nativescript/schematics');
+            expect(configFileContent.cli.defaultCollection).toBe('@nativescript/schematics');
         });
 
         it('should add {N} specific files', () => {
             const files = appTree.files;
 
-            expect(files).toContain('/ngcc.config.js');
             expect(files).toContain('/nsconfig.json');
             expect(files).toContain('/tsconfig.tns.json');
             expect(files).toContain('/src/app.css');
@@ -75,27 +75,27 @@ describe('Add {N} schematic', () => {
             const packageJsonPath = '/package.json';
             expect(appTree.files).toContain(packageJsonPath);
 
-            const packageJson = JSON.parse(getFileContent(appTree, packageJsonPath));
+            const packageJson = JSON.parse(stripJsonComments(getFileContent(appTree, packageJsonPath)));
             const { dependencies, devDependencies } = packageJson;
             expect(dependencies).toBeDefined();
             expect(dependencies['@nativescript/angular']).toBeDefined();
             expect(dependencies['@nativescript/theme']).toBeDefined();
             expect(dependencies['@nativescript/core']).toBeDefined();
             expect(dependencies['reflect-metadata']).toBeDefined();
 
-            expect(devDependencies['nativescript-dev-webpack']).toBeDefined();
+            expect(devDependencies['@nativescript/webpack']).toBeDefined();
             expect(devDependencies['@nativescript/tslint-rules']).toBeDefined();
         });
 
         it('should add run scripts to the package json', () => {
             const packageJsonPath = '/package.json';
             expect(appTree.files).toContain(packageJsonPath);
 
-            const packageJson = JSON.parse(getFileContent(appTree, packageJsonPath));
+            const packageJson = JSON.parse(stripJsonComments(getFileContent(appTree, packageJsonPath)));
             const { scripts } = packageJson;
             expect(scripts).toBeDefined();
-            expect(scripts.android).toEqual('tns run android --env.aot');
-            expect(scripts.ios).toEqual('tns run ios --env.aot');
+            expect(scripts.android).toEqual('tns run android --no-hmr');
+            expect(scripts.ios).toEqual('tns run ios --no-hmr');
             expect(scripts.ngcc).toEqual('ngcc --properties es2015 module main --first-only');
             expect(scripts.postinstall).toEqual('npm run ngcc');
         });
@@ -104,7 +104,7 @@ describe('Add {N} schematic', () => {
             const packageJsonPath = '/package.json';
             expect(appTree.files).toContain(packageJsonPath);
 
-            const packageJson = JSON.parse(getFileContent(appTree, packageJsonPath));
+            const packageJson = JSON.parse(stripJsonComments(getFileContent(appTree, packageJsonPath)));
             const { nativescript } = packageJson;
 
             expect(nativescript).toBeDefined();
@@ -115,7 +115,7 @@ describe('Add {N} schematic', () => {
             const webTsConfigPath = '/tsconfig.app.json';
             expect(appTree.files).toContain(webTsConfigPath);
 
-            const webTsconfig = JSON.parse(getFileContent(appTree, webTsConfigPath));
+            const webTsconfig = JSON.parse(stripJsonComments(getFileContent(appTree, webTsConfigPath)));
             const files = webTsconfig.files;
 
             expect(files).toBeDefined();
@@ -135,7 +135,7 @@ describe('Add {N} schematic', () => {
             const nsTsConfigPath = '/tsconfig.tns.json';
             expect(appTree.files).toContain(nsTsConfigPath);
 
-            const nsTsConfig = JSON.parse(getFileContent(appTree, nsTsConfigPath));
+            const nsTsConfig = JSON.parse(stripJsonComments(getFileContent(appTree, nsTsConfigPath)));
             const files = nsTsConfig.files;
 
             expect(files).toBeDefined();
@@ -154,7 +154,7 @@ describe('Add {N} schematic', () => {
             const specTsConfigPath = '/tsconfig.spec.json';
             expect(appTree.files).toContain(specTsConfigPath);
 
-            const specTsConfig = JSON.parse(getFileContent(appTree, specTsConfigPath));
+            const specTsConfig = JSON.parse(stripJsonComments(getFileContent(appTree, specTsConfigPath)));
             const files = specTsConfig.files;
 
             expect(files).toBeDefined();
@@ -163,10 +163,10 @@ describe('Add {N} schematic', () => {
         });
 
         it('should modify the base tsconfig.json to include path mappings', () => {
-            const baseTsConfigPath = '/tsconfig.json';
+            const baseTsConfigPath = '/tsconfig.base.json';
             expect(appTree.files).toContain(baseTsConfigPath);
 
-            const baseTsConfig = JSON.parse(getFileContent(appTree, baseTsConfigPath));
+            const baseTsConfig = JSON.parse(stripJsonComments(getFileContent(appTree, baseTsConfigPath)));
 
             const paths = baseTsConfig.compilerOptions.paths;
             expect(paths).toBeDefined();
@@ -184,7 +184,7 @@ describe('Add {N} schematic', () => {
             const tsLintConfigPath = '/tslint.json';
             expect(appTree.files).toContain(tsLintConfigPath);
 
-            const tsLintConfig = JSON.parse(getFileContent(appTree, tsLintConfigPath));
+            const tsLintConfig = JSON.parse(stripJsonComments(getFileContent(appTree, tsLintConfigPath)));
             const { extends: tsLintExtends, rules: tsLintRules } = tsLintConfig;
 
             expect(tsLintExtends).toEqual(jasmine.any(Array));
@@ -241,7 +241,7 @@ describe('Add {N} schematic', () => {
                 'export const routes: Routes = []',
             );
             expect(appComponentTemplate).toContain(
-                '<Label text="Entry Component works" textWrap="true"></Label>',
+                `This is just a fun sample for you to play with`,
             );
         });
     });
@@ -294,7 +294,7 @@ async function setupProject(
         'workspace',
         {
             name: 'workspace',
-            version: '8.0.0',
+            version: '10.0.0',
             newProjectRoot: '',
         },
     ).toPromise();

diff --git a/src/angular-project-parser.ts b/src/angular-project-parser.ts
@@ -2,8 +2,6 @@ import * as ts from '@schematics/angular/third_party/github.com/Microsoft/TypeSc
 import { basename } from 'path';
 import { Tree, SchematicsException } from '@angular-devkit/schematics';
 import { getWorkspace } from '@schematics/angular/utility/config';
-import { getProject } from '@schematics/angular/utility/project';
-import { getProjectTargets } from '@schematics/angular/utility/project-targets';
 import {
   findBootstrapModuleCall,
   findBootstrapModulePath,
@@ -161,14 +159,14 @@ export function getTsConfigFromProject(tree: Tree, projectName: string): string
 
 function parseAngularConfig(tree, projectName: string) {
   const project = getProjectObject(tree, projectName);
-  const targets = getProjectTargets(project);
+  const targets = project.architect;
 
   return { targets, project };
 }
 
 export function getProjectObject(tree: Tree, projectName: string) {
   const workspace = getWorkspace(tree);
-  const project = getProject(workspace, projectName);
+  const project = workspace.projects[projectName];
   if (!project) {
     throw new SchematicsException(`Couldn't find project "${projectName}" in the workspace!`);
   }