From 00802d219fe9839b30c4e1c66daeafce96b990a4 Mon Sep 17 00:00:00 2001 From: Eduardo Speroni Date: Sat, 28 Dec 2024 13:31:32 -0600 Subject: [PATCH] feat: Angular 19 support (#143) --- .prettierrc | 2 +- apps/nativescript-demo-ng/.gitignore | 6 - apps/nativescript-demo-ng/package.json | 1 + apps/nativescript-demo-ng/project.json | 48 +- apps/nativescript-demo-ng/src/app.css | 18 +- .../src/app/app.component.ts | 5 +- .../src/app/app.module.ts | 35 - .../{app-routing.module.ts => app.routes.ts} | 13 +- .../src/app/home/home.component.html | 2 +- .../src/app/home/home.component.ts | 4 +- .../src/app/item/item-detail.component.ts | 10 +- .../src/app/item/items.component.html | 14 +- .../src/app/item/items.component.ts | 9 +- .../src/app/item2/item-detail2.component.html | 15 +- .../src/app/item2/item-detail2.component.ts | 7 +- .../src/app/item2/item2-routing.module.ts | 13 - .../src/app/item2/item2.module.ts | 12 - .../src/app/item2/item2.routes.ts | 4 + .../src/app/item3/item3.module.ts | 4 +- .../src/app/item3/items.component.html | 16 +- .../src/app/item3/items.component.ts | 9 +- .../src/app/modal/modal.component.html | 6 +- .../src/app/modal/modal.component.ts | 26 +- apps/nativescript-demo-ng/src/main.ts | 24 +- .../src/tests/detached-loader-tests.spec.ts | 15 +- .../src/tests/detached-utils-tests.spec.ts | 6 +- .../src/tests/list-view-tests.spec.ts | 29 +- .../src/tests/modal-dialog.spec.ts | 24 +- .../tests/platform-filter-components.spec.ts | 24 +- .../src/tests/spans.spec.ts | 11 +- .../src/tests/textnode.spec.ts | 2 - apps/nativescript-demo-ng/tailwind.config.js | 29 + nx.json | 16 +- package.json | 74 +- packages/angular/package.json | 2 +- packages/angular/src/lib/application.ts | 75 +- .../cdk/dialog/dialog-content-directives.ts | 6 +- .../src/lib/cdk/dialog/dialog-module.ts | 4 +- .../src/lib/cdk/dialog/dialog-services.ts | 79 +- .../src/lib/cdk/dialog/native-modal-ref.ts | 40 +- .../lib/cdk/list-view/list-view.component.ts | 20 +- .../angular/src/lib/forms/forms.module.ts | 3 +- .../value-accessors/checked-value-accessor.ts | 1 - .../value-accessors/date-value-accessor.ts | 1 - .../value-accessors/number-value-accessor.ts | 1 - .../selectedIndex-value-accessor.ts | 1 - .../value-accessors/text-value-accessor.ts | 1 - .../value-accessors/time-value-accessor.ts | 1 - .../src/lib/http/http-client.module.ts | 22 +- .../router/ns-empty-outlet.component.ts | 1 - .../lib/legacy/router/page-router-outlet.ts | 94 +- .../src/lib/legacy/router/router.module.ts | 48 +- .../angular/src/lib/nativescript-ng-zone.ts | 51 +- .../angular/src/lib/platform-nativescript.ts | 132 +- packages/angular/src/lib/public_api.ts | 44 +- .../angular/src/lib/router/router.module.ts | 12 +- yarn.lock | 6554 ++++++++--------- 57 files changed, 3726 insertions(+), 4000 deletions(-) delete mode 100644 apps/nativescript-demo-ng/src/app/app.module.ts rename apps/nativescript-demo-ng/src/app/{app-routing.module.ts => app.routes.ts} (75%) delete mode 100644 apps/nativescript-demo-ng/src/app/item2/item2-routing.module.ts delete mode 100644 apps/nativescript-demo-ng/src/app/item2/item2.module.ts create mode 100644 apps/nativescript-demo-ng/src/app/item2/item2.routes.ts create mode 100644 apps/nativescript-demo-ng/tailwind.config.js diff --git a/.prettierrc b/.prettierrc index adc80c6..220ae8e 100644 --- a/.prettierrc +++ b/.prettierrc @@ -1,6 +1,6 @@ { "useTabs": false, - "printWidth": 600, + "printWidth": 120, "tabWidth": 2, "singleQuote": true } \ No newline at end of file diff --git a/apps/nativescript-demo-ng/.gitignore b/apps/nativescript-demo-ng/.gitignore index 77984f1..496a3df 100644 --- a/apps/nativescript-demo-ng/.gitignore +++ b/apps/nativescript-demo-ng/.gitignore @@ -3,12 +3,6 @@ hooks/ node_modules/ platforms/ -# NativeScript Template -*.js.map -*.js -!webpack.config.js -!ngcc.config.js - # Logs logs *.log diff --git a/apps/nativescript-demo-ng/package.json b/apps/nativescript-demo-ng/package.json index 74fab78..16848d6 100644 --- a/apps/nativescript-demo-ng/package.json +++ b/apps/nativescript-demo-ng/package.json @@ -9,6 +9,7 @@ "devDependencies": { "@nativescript/android": "~8.8.0", "@nativescript/ios": "~8.8.0", + "@nativescript/tailwind": "^2.1.0", "@nativescript/unit-test-runner": "^3.0.1" } } diff --git a/apps/nativescript-demo-ng/project.json b/apps/nativescript-demo-ng/project.json index aa1a0a5..c3946f4 100644 --- a/apps/nativescript-demo-ng/project.json +++ b/apps/nativescript-demo-ng/project.json @@ -31,39 +31,20 @@ } } }, - "ios": { - "executor": "@nativescript/nx:build", - "options": { - "platform": "ios" - }, - "configurations": { - "build": { - "copyTo": "./dist/build.ipa" - }, - "prod": { - "combineWithConfig": "build:prod" - } - } - }, - "android": { - "executor": "@nativescript/nx:build", + "debug": { + "executor": "@nativescript/nx:debug", "options": { - "platform": "android" + "noHmr": true, + "uglify": false, + "release": false, + "forDevice": false, + "prepare": false }, - "configurations": { - "build": { - "copyTo": "./dist/build.apk" - }, - "prod": { - "combineWithConfig": "build:prod" - } - } + "dependsOn": ["^build"] }, "clean": { - "executor": "@nativescript/nx:build", - "options": { - "clean": true - } + "executor": "@nativescript/nx:clean", + "options": {} }, "lint": { "executor": "@nx/eslint:lint" @@ -74,14 +55,7 @@ "options": { "coverage": false }, - "configurations": { - "android": { - "platform": "android" - }, - "ios": { - "platform": "ios" - } - } + "configurations": {} } } } diff --git a/apps/nativescript-demo-ng/src/app.css b/apps/nativescript-demo-ng/src/app.css index 3640885..60c9b79 100644 --- a/apps/nativescript-demo-ng/src/app.css +++ b/apps/nativescript-demo-ng/src/app.css @@ -9,8 +9,11 @@ In many cases you may want to use the NativeScript core theme instead of writing your own CSS rules. For a full list of class names in the theme refer to http://docs.nativescript.org/ui/theme. */ -@import '@nativescript/theme/css/core.css'; -@import '@nativescript/theme/css/default.css'; +/* @import '@nativescript/theme/css/core.css'; +@import '@nativescript/theme/css/default.css'; */ +@tailwind base; +@tailwind components; +@tailwind utilities; Button { border: 0; @@ -23,11 +26,18 @@ Button { color: #fff; } -.h1 { +.h-center { + horizontal-align: center; +} +.h-right { + horizontal-align: right; +} + +/* .h1 { font-weight: bold; margin: 10 0 0; } .c-light-blue { color: #65ADF1; -} +} */ diff --git a/apps/nativescript-demo-ng/src/app/app.component.ts b/apps/nativescript-demo-ng/src/app/app.component.ts index b4bb4ed..f789d41 100644 --- a/apps/nativescript-demo-ng/src/app/app.component.ts +++ b/apps/nativescript-demo-ng/src/app/app.component.ts @@ -1,10 +1,13 @@ -import { Component, ViewContainerRef, OnInit, OnDestroy } from '@angular/core'; +import { Component, NO_ERRORS_SCHEMA, OnDestroy, OnInit, ViewContainerRef } from '@angular/core'; +import { PageRouterOutlet } from '@nativescript/angular'; // registerElement('ns-app', () => GridLayout); @Component({ selector: 'ns-app', moduleId: module.id, templateUrl: './app.component.html', + imports: [PageRouterOutlet], + schemas: [NO_ERRORS_SCHEMA], }) export class AppComponent implements OnInit, OnDestroy { constructor(private vcRef: ViewContainerRef) {} diff --git a/apps/nativescript-demo-ng/src/app/app.module.ts b/apps/nativescript-demo-ng/src/app/app.module.ts deleted file mode 100644 index 9981032..0000000 --- a/apps/nativescript-demo-ng/src/app/app.module.ts +++ /dev/null @@ -1,35 +0,0 @@ -import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core'; -import { NativeDialogModule, NativeScriptHttpClientModule, NativeScriptModule } from '@nativescript/angular'; - -import { AppRoutingModule } from './app-routing.module'; -import { AppComponent } from './app.component'; -import { ItemDetailComponent } from './item/item-detail.component'; -import { ItemsComponent } from './item/items.component'; -import { ModalComponent } from './modal/modal.component'; - -/** - * To test tab named outlets, can uncomment imports and declarations - */ -// import { HomeComponent } from './home/home.component'; -// import { NativeScriptMaterialBottomNavigationModule } from '@nativescript-community/ui-material-bottom-navigation/angular'; - -@NgModule({ - bootstrap: [AppComponent], - imports: [ - NativeScriptModule, - NativeScriptHttpClientModule, - AppRoutingModule, - NativeDialogModule, - // NativeScriptMaterialBottomNavigationModule - ], - declarations: [ - AppComponent, - ItemsComponent, - ItemDetailComponent, - ModalComponent, - // HomeComponent - ], - providers: [], - schemas: [NO_ERRORS_SCHEMA], -}) -export class AppModule {} diff --git a/apps/nativescript-demo-ng/src/app/app-routing.module.ts b/apps/nativescript-demo-ng/src/app/app.routes.ts similarity index 75% rename from apps/nativescript-demo-ng/src/app/app-routing.module.ts rename to apps/nativescript-demo-ng/src/app/app.routes.ts index a6eeb26..e80adcb 100644 --- a/apps/nativescript-demo-ng/src/app/app-routing.module.ts +++ b/apps/nativescript-demo-ng/src/app/app.routes.ts @@ -1,17 +1,14 @@ -import { NgModule } from '@angular/core'; import { Routes } from '@angular/router'; -import { NativeScriptRouterModule } from '@nativescript/angular'; - import { ItemDetailComponent } from './item/item-detail.component'; import { ItemsComponent } from './item/items.component'; // import { HomeComponent } from './home/home.component'; // import { BootGuardService } from './boot-guard.service'; -const routes: Routes = [ +export const routes: Routes = [ { path: '', redirectTo: '/rootlazy', pathMatch: 'full' }, { path: 'items', component: ItemsComponent }, { path: 'item/:id', component: ItemDetailComponent }, - { path: 'item2', loadChildren: () => import('./item2/item2.module').then((m) => m.Item2Module) }, + { path: 'item2', loadChildren: () => import('./item2/item2.routes').then((m) => m.ITEM2_ROUTES) }, { path: 'rootlazy', loadChildren: () => import('./item3/item3.module').then((m) => m.Item3Module) }, /** @@ -36,9 +33,3 @@ const routes: Routes = [ // loadChildren: () => import('./item2/item2.module').then((m) => m.Item2Module), // }, ]; - -@NgModule({ - imports: [NativeScriptRouterModule.forRoot(routes)], - exports: [NativeScriptRouterModule], -}) -export class AppRoutingModule {} diff --git a/apps/nativescript-demo-ng/src/app/home/home.component.html b/apps/nativescript-demo-ng/src/app/home/home.component.html index 2ebc2e1..e5e865c 100644 --- a/apps/nativescript-demo-ng/src/app/home/home.component.html +++ b/apps/nativescript-demo-ng/src/app/home/home.component.html @@ -2,7 +2,7 @@ - + diff --git a/apps/nativescript-demo-ng/src/app/home/home.component.ts b/apps/nativescript-demo-ng/src/app/home/home.component.ts index 48c9728..6d9e70d 100644 --- a/apps/nativescript-demo-ng/src/app/home/home.component.ts +++ b/apps/nativescript-demo-ng/src/app/home/home.component.ts @@ -1,12 +1,14 @@ import { Component, NgZone, OnInit } from '@angular/core'; import { ActivatedRoute, Router } from '@angular/router'; -import { RouterExtensions } from '@nativescript/angular'; +import { RouterExtensions, NativeScriptCommonModule } from '@nativescript/angular'; import { Page, TabView } from '@nativescript/core'; @Component({ moduleId: module.id, selector: 'demo-home', templateUrl: './home.component.html', + imports: [NativeScriptCommonModule], + standalone: true, }) export class HomeComponent implements OnInit { tabItems: { [key: string]: { index: number; title?: string; iconSource?: string; textTransform?: string } } = {}; diff --git a/apps/nativescript-demo-ng/src/app/item/item-detail.component.ts b/apps/nativescript-demo-ng/src/app/item/item-detail.component.ts index 48fa15b..23e6585 100644 --- a/apps/nativescript-demo-ng/src/app/item/item-detail.component.ts +++ b/apps/nativescript-demo-ng/src/app/item/item-detail.component.ts @@ -1,20 +1,24 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, NO_ERRORS_SCHEMA, OnInit } from '@angular/core'; import { ActivatedRoute } from '@angular/router'; import { Item } from './item'; import { ItemService } from './item.service'; +import { NativeScriptCommonModule } from '@nativescript/angular'; @Component({ selector: 'ns-details', moduleId: module.id, - templateUrl: './item-detail.component.html' + templateUrl: './item-detail.component.html', + imports: [NativeScriptCommonModule], + standalone: true, + schemas: [NO_ERRORS_SCHEMA] }) export class ItemDetailComponent implements OnInit { item: Item; constructor( private itemService: ItemService, - private route: ActivatedRoute + private route: ActivatedRoute, ) {} ngOnInit(): void { diff --git a/apps/nativescript-demo-ng/src/app/item/items.component.html b/apps/nativescript-demo-ng/src/app/item/items.component.html index 9832cac..19516a0 100644 --- a/apps/nativescript-demo-ng/src/app/item/items.component.html +++ b/apps/nativescript-demo-ng/src/app/item/items.component.html @@ -23,16 +23,16 @@ class names available for styling your app at https://docs.nativescript.org/ui/theme. --> - - - - - - + + + + + + - + diff --git a/apps/nativescript-demo-ng/src/app/item/items.component.ts b/apps/nativescript-demo-ng/src/app/item/items.component.ts index 69ac276..cd5972d 100644 --- a/apps/nativescript-demo-ng/src/app/item/items.component.ts +++ b/apps/nativescript-demo-ng/src/app/item/items.component.ts @@ -1,18 +1,21 @@ -import { Component, OnInit, OnDestroy } from '@angular/core'; +import { Component, OnInit, OnDestroy, NO_ERRORS_SCHEMA } from '@angular/core'; import { HttpClient } from '@angular/common/http'; import { Item } from './item'; import { ItemService } from './item.service'; import { ModalComponent } from '../modal/modal.component'; -import { ModalDialogService, NativeDialogService } from '@nativescript/angular'; +import { ModalDialogService, NativeDialogService, NativeScriptCommonModule } from '@nativescript/angular'; @Component({ selector: 'ns-items', moduleId: module.id, templateUrl: './items.component.html', + imports: [NativeScriptCommonModule], + standalone: true, + schemas: [NO_ERRORS_SCHEMA] }) export class ItemsComponent implements OnInit, OnDestroy { - message = 'Hello Angular 18!'; + message = 'Hello Angular 19!'; items: Array; constructor( diff --git a/apps/nativescript-demo-ng/src/app/item2/item-detail2.component.html b/apps/nativescript-demo-ng/src/app/item2/item-detail2.component.html index 690a55b..1346c48 100644 --- a/apps/nativescript-demo-ng/src/app/item2/item-detail2.component.html +++ b/apps/nativescript-demo-ng/src/app/item2/item-detail2.component.html @@ -8,10 +8,19 @@ --> - + - - + + diff --git a/apps/nativescript-demo-ng/src/app/item2/item-detail2.component.ts b/apps/nativescript-demo-ng/src/app/item2/item-detail2.component.ts index fee6010..5aa9e13 100644 --- a/apps/nativescript-demo-ng/src/app/item2/item-detail2.component.ts +++ b/apps/nativescript-demo-ng/src/app/item2/item-detail2.component.ts @@ -1,6 +1,6 @@ -import { Component, OnInit, OnDestroy } from '@angular/core'; +import { Component, OnInit, OnDestroy, NO_ERRORS_SCHEMA } from '@angular/core'; import { ActivatedRoute } from '@angular/router'; -import { RouterExtensions } from '@nativescript/angular'; +import { NativeScriptCommonModule, RouterExtensions } from '@nativescript/angular'; import { Item } from '../item/item'; import { ItemService } from '../item/item.service'; @@ -9,6 +9,9 @@ import { ItemService } from '../item/item.service'; selector: 'ns-details2', moduleId: module.id, templateUrl: './item-detail2.component.html', + imports: [NativeScriptCommonModule], + standalone: true, + schemas: [NO_ERRORS_SCHEMA] }) export class ItemDetailComponent implements OnInit, OnDestroy { item: Item; diff --git a/apps/nativescript-demo-ng/src/app/item2/item2-routing.module.ts b/apps/nativescript-demo-ng/src/app/item2/item2-routing.module.ts deleted file mode 100644 index ff06852..0000000 --- a/apps/nativescript-demo-ng/src/app/item2/item2-routing.module.ts +++ /dev/null @@ -1,13 +0,0 @@ -import { NgModule } from '@angular/core'; -import { NativeScriptRouterModule } from '@nativescript/angular'; -import { Routes } from '@angular/router'; - -import { ItemDetailComponent } from './item-detail2.component'; - -const routes: Routes = [{ path: ':id', component: ItemDetailComponent }]; - -@NgModule({ - imports: [NativeScriptRouterModule.forChild(routes)], - exports: [NativeScriptRouterModule], -}) -export class Items2RoutingModule {} diff --git a/apps/nativescript-demo-ng/src/app/item2/item2.module.ts b/apps/nativescript-demo-ng/src/app/item2/item2.module.ts deleted file mode 100644 index fe952d7..0000000 --- a/apps/nativescript-demo-ng/src/app/item2/item2.module.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core'; -import { NativeScriptCommonModule } from '@nativescript/angular'; -import { ItemDetailComponent } from './item-detail2.component'; -import { Items2RoutingModule } from './item2-routing.module'; - -@NgModule({ - imports: [NativeScriptCommonModule, Items2RoutingModule], - declarations: [ItemDetailComponent], - exports: [Items2RoutingModule], - schemas: [NO_ERRORS_SCHEMA], -}) -export class Item2Module {} diff --git a/apps/nativescript-demo-ng/src/app/item2/item2.routes.ts b/apps/nativescript-demo-ng/src/app/item2/item2.routes.ts new file mode 100644 index 0000000..85f6911 --- /dev/null +++ b/apps/nativescript-demo-ng/src/app/item2/item2.routes.ts @@ -0,0 +1,4 @@ +import { Routes } from '@angular/router'; +import { ItemDetailComponent } from './item-detail2.component'; + +export const ITEM2_ROUTES: Routes = [{ path: ':id', component: ItemDetailComponent }]; diff --git a/apps/nativescript-demo-ng/src/app/item3/item3.module.ts b/apps/nativescript-demo-ng/src/app/item3/item3.module.ts index 1ab0b83..1ae01f3 100644 --- a/apps/nativescript-demo-ng/src/app/item3/item3.module.ts +++ b/apps/nativescript-demo-ng/src/app/item3/item3.module.ts @@ -1,11 +1,11 @@ import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core'; import { NativeScriptCommonModule } from '@nativescript/angular'; -import { ItemsComponent } from './items.component'; +// import { ItemsComponent } from './items.component'; import { Items2RoutingModule } from './item3-routing.module'; @NgModule({ imports: [NativeScriptCommonModule, Items2RoutingModule], - declarations: [ItemsComponent], + // declarations: [ItemsComponent], exports: [Items2RoutingModule], schemas: [NO_ERRORS_SCHEMA], }) diff --git a/apps/nativescript-demo-ng/src/app/item3/items.component.html b/apps/nativescript-demo-ng/src/app/item3/items.component.html index ef11383..79bb513 100644 --- a/apps/nativescript-demo-ng/src/app/item3/items.component.html +++ b/apps/nativescript-demo-ng/src/app/item3/items.component.html @@ -23,17 +23,17 @@ class names available for styling your app at https://docs.nativescript.org/ui/theme. --> - - - + + + - - + + - + - - + + diff --git a/apps/nativescript-demo-ng/src/app/item3/items.component.ts b/apps/nativescript-demo-ng/src/app/item3/items.component.ts index a414985..0b7ad84 100644 --- a/apps/nativescript-demo-ng/src/app/item3/items.component.ts +++ b/apps/nativescript-demo-ng/src/app/item3/items.component.ts @@ -1,18 +1,21 @@ -import { Component, OnInit, OnDestroy } from '@angular/core'; +import { Component, OnInit, OnDestroy, NO_ERRORS_SCHEMA } from '@angular/core'; import { HttpClient } from '@angular/common/http'; import { Item } from '../item/item'; import { ItemService } from '../item/item.service'; import { ModalComponent } from '../modal/modal.component'; -import { ModalDialogService, NativeDialogService } from '@nativescript/angular'; +import { ModalDialogService, NativeDialogService, NativeScriptCommonModule, NativeScriptRouterModule } from '@nativescript/angular'; @Component({ selector: 'ns-items', moduleId: module.id, templateUrl: './items.component.html', + imports: [NativeScriptCommonModule, NativeScriptRouterModule], + standalone: true, + schemas: [NO_ERRORS_SCHEMA] }) export class ItemsComponent implements OnInit, OnDestroy { - message = 'Hello Angular 18'; + message = 'Hello Angular 19'; items: Array; borderRadius: number; fontSize: number; diff --git a/apps/nativescript-demo-ng/src/app/modal/modal.component.html b/apps/nativescript-demo-ng/src/app/modal/modal.component.html index 2e4c222..c85ab13 100644 --- a/apps/nativescript-demo-ng/src/app/modal/modal.component.html +++ b/apps/nativescript-demo-ng/src/app/modal/modal.component.html @@ -1,9 +1,9 @@ - + - + - + diff --git a/apps/nativescript-demo-ng/src/app/modal/modal.component.ts b/apps/nativescript-demo-ng/src/app/modal/modal.component.ts index 674cae2..fe58b69 100644 --- a/apps/nativescript-demo-ng/src/app/modal/modal.component.ts +++ b/apps/nativescript-demo-ng/src/app/modal/modal.component.ts @@ -1,11 +1,14 @@ -import { Component, OnDestroy, OnInit, Optional, ViewContainerRef, inject } from '@angular/core'; -import { ModalDialogService, NativeDialogRef, NativeDialogService } from '@nativescript/angular'; +import { Component, NO_ERRORS_SCHEMA, OnDestroy, OnInit, Optional, ViewContainerRef, inject } from '@angular/core'; +import { ModalDialogService, NativeDialogModule, NativeDialogRef, NativeDialogService, NativeScriptCommonModule } from '@nativescript/angular'; import { ItemService } from '../item/item.service'; import { View } from '@nativescript/core'; @Component({ selector: 'ns-modal', templateUrl: `./modal.component.html`, + imports: [NativeScriptCommonModule, NativeDialogModule], + standalone: true, + schemas: [NO_ERRORS_SCHEMA] }) export class ModalComponent implements OnInit, OnDestroy { id = Math.floor(Math.random() * 1000); @@ -46,15 +49,16 @@ export class ModalComponent implements OnInit, OnDestroy { loadedImg(args) { this.img = args.object as View; const scaleImage = (up: boolean) => { - this.img.animate({ - scale: { x: up ? 1.5 : 1.0, y: up ? 1.5 : 1.0}, - translate: { x: up ? -100 : 0, y: 0}, - duration: 1000, - - }).then(() => { - scaleImage(up ? false : true); - }) - } + this.img + .animate({ + scale: { x: up ? 1.5 : 1.0, y: up ? 1.5 : 1.0 }, + translate: { x: up ? -100 : 0, y: 0 }, + duration: 1000, + }) + .then(() => { + scaleImage(up ? false : true); + }); + }; scaleImage(true); } } diff --git a/apps/nativescript-demo-ng/src/main.ts b/apps/nativescript-demo-ng/src/main.ts index 21ba177..2a7eb46 100644 --- a/apps/nativescript-demo-ng/src/main.ts +++ b/apps/nativescript-demo-ng/src/main.ts @@ -1,8 +1,20 @@ -import { NativeScriptNgZone, platformNativeScript, runNativeScriptAngularApp } from '@nativescript/angular'; +import { + bootstrapApplication, + provideNativeScriptHttpClient, + provideNativeScriptNgZone, + provideNativeScriptRouter, + runNativeScriptAngularApp, +} from '@nativescript/angular'; import { Trace } from '@nativescript/core'; -import { AppModule } from './app/app.module'; +// import { AppModule } from './app/app.module'; +import { withInterceptorsFromDi } from '@angular/common/http'; import { setWindowBackgroundColor } from '@nativescript/core/utils/ios'; +import { AppComponent } from './app/app.component'; +import { routes } from './app/app.routes'; +import { provideExperimentalZonelessChangeDetection } from '@angular/core'; + +const EXPERIMENTAL_ZONELESS = true; Trace.enable(); Trace.setCategories('ns-route-reuse-strategy,ns-router'); @@ -12,8 +24,12 @@ runNativeScriptAngularApp({ if (global.isIOS) { setWindowBackgroundColor('#a6120d'); } - return platformNativeScript().bootstrapModule(AppModule, { - ngZone: new NativeScriptNgZone(), + return bootstrapApplication(AppComponent, { + providers: [ + provideNativeScriptHttpClient(withInterceptorsFromDi()), + provideNativeScriptRouter(routes), + EXPERIMENTAL_ZONELESS ? provideExperimentalZonelessChangeDetection() : provideNativeScriptNgZone(), + ], }); }, }); diff --git a/apps/nativescript-demo-ng/src/tests/detached-loader-tests.spec.ts b/apps/nativescript-demo-ng/src/tests/detached-loader-tests.spec.ts index 12b71ec..db4c382 100644 --- a/apps/nativescript-demo-ng/src/tests/detached-loader-tests.spec.ts +++ b/apps/nativescript-demo-ng/src/tests/detached-loader-tests.spec.ts @@ -1,6 +1,6 @@ // make sure you import mocha-config before @angular/core -import { NgModule, Directive, ChangeDetectionStrategy, Component, ViewChild, NO_ERRORS_SCHEMA } from '@angular/core'; -import { ComponentFixture, TestBed } from '@angular/core/testing'; +import { ChangeDetectionStrategy, Component, Directive, NgModule, NO_ERRORS_SCHEMA, ViewChild } from '@angular/core'; +import { TestBed } from '@angular/core/testing'; import { DetachedLoader, NativeScriptModule } from '@nativescript/angular'; import { NativeScriptTestingModule } from '@nativescript/angular/testing'; // import { NS_COMPILER_PROVIDERS } from "@nativescript/angular/platform"; @@ -8,6 +8,7 @@ import { CommonModule } from '@angular/common'; @Component({ template: ``, + schemas: [NO_ERRORS_SCHEMA], }) export class TestComponent {} @@ -23,6 +24,8 @@ class LoaderComponentBase { `, + imports: [DetachedLoader], + schemas: [NO_ERRORS_SCHEMA], }) export class LoaderComponent extends LoaderComponentBase {} @@ -34,13 +37,14 @@ export class LoaderComponent extends LoaderComponentBase {} `, + imports: [DetachedLoader], + schemas: [NO_ERRORS_SCHEMA], }) // eslint-disable-next-line @angular-eslint/component-class-suffix export class LoaderComponentOnPush extends LoaderComponentBase {} @NgModule({ - declarations: [LoaderComponent, LoaderComponentOnPush, TestComponent], - imports: [NativeScriptModule, NativeScriptTestingModule, CommonModule], + imports: [LoaderComponent, LoaderComponentOnPush, TestComponent], schemas: [NO_ERRORS_SCHEMA], }) export class EntryComponentsTestModule {} @@ -48,8 +52,7 @@ describe('DetachedLoader', function () { // this.timeout(4000); beforeEach(() => { TestBed.configureTestingModule({ - declarations: [LoaderComponent, LoaderComponentOnPush, TestComponent], - imports: [NativeScriptModule, NativeScriptTestingModule, CommonModule], + imports: [NativeScriptModule, NativeScriptTestingModule, CommonModule, LoaderComponent, LoaderComponentOnPush, TestComponent], schemas: [NO_ERRORS_SCHEMA], }); return TestBed.compileComponents(); diff --git a/apps/nativescript-demo-ng/src/tests/detached-utils-tests.spec.ts b/apps/nativescript-demo-ng/src/tests/detached-utils-tests.spec.ts index cc4d70e..fe84bf8 100644 --- a/apps/nativescript-demo-ng/src/tests/detached-utils-tests.spec.ts +++ b/apps/nativescript-demo-ng/src/tests/detached-utils-tests.spec.ts @@ -5,6 +5,7 @@ import { GridLayout, ProxyViewContainer } from '@nativescript/core'; @Component({ template: ``, + schemas: [NO_ERRORS_SCHEMA], }) export class GenerateViewComponent { @ViewChild('vc', { read: ViewContainerRef }) vc: ViewContainerRef; @@ -14,11 +15,12 @@ export class GenerateViewComponent { @Component({ template: ``, + schemas: [NO_ERRORS_SCHEMA], }) export class GeneratedComponent {} @NgModule({ - declarations: [GeneratedComponent, GenerateViewComponent], + imports: [GeneratedComponent, GenerateViewComponent], schemas: [NO_ERRORS_SCHEMA], }) export class GeneratedModule {} @@ -28,7 +30,7 @@ describe('generateNativeScriptView', () => { let cleanup: Array | ComponentRef | EmbeddedViewRef> = []; beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [GenerateViewComponent, GeneratedComponent], + imports: [GenerateViewComponent, GeneratedComponent], }).compileComponents(); fixture = TestBed.createComponent(GenerateViewComponent); fixture.detectChanges(); diff --git a/apps/nativescript-demo-ng/src/tests/list-view-tests.spec.ts b/apps/nativescript-demo-ng/src/tests/list-view-tests.spec.ts index 8e23c5d..3499a41 100644 --- a/apps/nativescript-demo-ng/src/tests/list-view-tests.spec.ts +++ b/apps/nativescript-demo-ng/src/tests/list-view-tests.spec.ts @@ -1,12 +1,15 @@ -import { Component, Input, NgModule, NO_ERRORS_SCHEMA, ViewChild } from '@angular/core'; +import { Component, Input, NO_ERRORS_SCHEMA, ViewChild } from '@angular/core'; import { TestBed, waitForAsync } from '@angular/core/testing'; -import { ListViewComponent, NativeScriptModule } from '@nativescript/angular'; +import { ListViewComponent, TemplateKeyDirective } from '@nativescript/angular'; // import trace = require("trace"); // trace.setCategories("ns-list-view, " + trace.categories.Navigation); // trace.enable(); class DataItem { - constructor(public id: number, public name: string) {} + constructor( + public id: number, + public name: string, + ) {} } const ITEMS = [new DataItem(0, 'data item 0'), new DataItem(1, 'data item 1'), new DataItem(2, 'data item 2')]; @@ -24,6 +27,8 @@ let testTemplates: { first: number; second: number }; `, + imports: [ListViewComponent], + schemas: [NO_ERRORS_SCHEMA], }) export class TestListViewComponent { public myItems: Array = ITEMS; @@ -63,6 +68,8 @@ export class ItemTemplateComponent { `, + imports: [ListViewComponent, TemplateKeyDirective, ItemTemplateComponent], + schemas: [NO_ERRORS_SCHEMA], }) export class TestListViewSelectorComponent { public myItems: Array = ITEMS; @@ -94,6 +101,8 @@ export class TestListViewSelectorComponent { `, + imports: [ListViewComponent, TemplateKeyDirective, ItemTemplateComponent], + schemas: [NO_ERRORS_SCHEMA], }) export class TestListViewSelectorWithEventsComponent { public myItems: Array = ITEMS; @@ -115,6 +124,8 @@ export class TestListViewSelectorWithEventsComponent { `, + imports: [ListViewComponent], + schemas: [NO_ERRORS_SCHEMA], }) export class TestDefaultItemTemplateComponent { public myItems: Array; @@ -132,20 +143,12 @@ export class TestDefaultItemTemplateComponent { const declarations = [TestListViewComponent, TestListViewSelectorComponent, ItemTemplateComponent, TestDefaultItemTemplateComponent, TestListViewSelectorWithEventsComponent]; -@NgModule({ - declarations: [...declarations], - imports: [NativeScriptModule], - schemas: [NO_ERRORS_SCHEMA], -}) -export class ListViewModule {} - describe('ListView-tests', () => { beforeEach(() => TestBed.configureTestingModule({ - declarations: [...declarations], - imports: [NativeScriptModule], + imports: declarations, schemas: [NO_ERRORS_SCHEMA], - }).compileComponents() + }).compileComponents(), ); it('setupItemView is called for every item', waitForAsync(async () => { diff --git a/apps/nativescript-demo-ng/src/tests/modal-dialog.spec.ts b/apps/nativescript-demo-ng/src/tests/modal-dialog.spec.ts index 92fdbf3..996e96e 100644 --- a/apps/nativescript-demo-ng/src/tests/modal-dialog.spec.ts +++ b/apps/nativescript-demo-ng/src/tests/modal-dialog.spec.ts @@ -1,16 +1,8 @@ // make sure you import mocha-config before @angular/core -import { NgModule, Component, ViewContainerRef, NO_ERRORS_SCHEMA } from '@angular/core'; -import { Page, Frame, isIOS } from '@nativescript/core'; -import { ModalDialogParams, ModalDialogService } from '@nativescript/angular'; - -import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing'; -import { nsTestBedRender, nsTestBedAfterEach, nsTestBedBeforeEach, NATIVESCRIPT_TESTING_PROVIDERS, NativeScriptTestingModule } from '@nativescript/angular/testing'; -import { NSLocationStrategy, Outlet } from '@nativescript/angular'; -import { FrameService } from '@nativescript/angular'; -import { DetachedLoader, NativeScriptModule } from '@nativescript/angular'; -import { platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing'; -// import { NS_COMPILER_PROVIDERS } from "@nativescript/angular/platform"; -import { CommonModule } from '@angular/common'; +import { Component, NgModule, NO_ERRORS_SCHEMA, ViewContainerRef } from '@angular/core'; +import { TestBed, waitForAsync } from '@angular/core/testing'; +import { FrameService, ModalDialogParams, ModalDialogService, NSLocationStrategy, Outlet } from '@nativescript/angular'; +import { Frame, isIOS } from '@nativescript/core'; import { FakeFrameService } from './ns-location-strategy.spec'; const CLOSE_WAIT = isIOS ? 1000 : 0; @@ -18,6 +10,7 @@ const CLOSE_WAIT = isIOS ? 1000 : 0; @Component({ selector: 'modal-comp', template: ``, + schemas: [NO_ERRORS_SCHEMA], }) export class ModalComponent { constructor(public params: ModalDialogParams) {} @@ -32,6 +25,7 @@ export class ModalComponent { selector: 'fail-comp', providers: [ModalDialogService], template: ``, + schemas: [NO_ERRORS_SCHEMA], }) export class FailComponent { constructor(public service: ModalDialogService) {} @@ -43,6 +37,7 @@ export class FailComponent { template: ` `, + schemas: [NO_ERRORS_SCHEMA], }) export class SuccessComponent { constructor( @@ -54,7 +49,7 @@ export class SuccessComponent { } @NgModule({ - declarations: [FailComponent, SuccessComponent, ModalComponent], + imports: [FailComponent, SuccessComponent, ModalComponent], exports: [FailComponent, SuccessComponent, ModalComponent], // entryComponents: [ModalComponent], schemas: [NO_ERRORS_SCHEMA], @@ -69,8 +64,7 @@ describe('modal-dialog', () => { // [ModalComponent])); beforeEach(() => { return TestBed.configureTestingModule({ - declarations: [FailComponent, SuccessComponent, ModalComponent], - imports: [], + imports: [FailComponent, SuccessComponent, ModalComponent], providers: [{ provide: FrameService, useValue: new FakeFrameService() }, NSLocationStrategy], }).compileComponents(); }); diff --git a/apps/nativescript-demo-ng/src/tests/platform-filter-components.spec.ts b/apps/nativescript-demo-ng/src/tests/platform-filter-components.spec.ts index 8a9baad..7d89e17 100644 --- a/apps/nativescript-demo-ng/src/tests/platform-filter-components.spec.ts +++ b/apps/nativescript-demo-ng/src/tests/platform-filter-components.spec.ts @@ -1,14 +1,15 @@ // make sure you import mocha-config before @angular/core import { Component, ElementRef, NgModule, NO_ERRORS_SCHEMA } from '@angular/core'; -import { dumpView, createDevice } from './test-utils.spec'; -import { DEVICE, NativeScriptCommonModule, NativeScriptModule, registerElement } from '@nativescript/angular'; -import { platformNames } from '@nativescript/core/platform'; import { TestBed } from '@angular/core/testing'; -import { StackLayout } from '@nativescript/core'; +import { AndroidFilterComponent, DEVICE, IOSFilterComponent, NativeScriptModule } from '@nativescript/angular'; +import { platformNames } from '@nativescript/core/platform'; +import { createDevice, dumpView } from './test-utils.spec'; @Component({ template: ` `, + imports: [IOSFilterComponent], + schemas: [NO_ERRORS_SCHEMA], }) export class IosSpecificComponent { constructor(public elementRef: ElementRef) {} @@ -18,6 +19,8 @@ export class IosSpecificComponent { template: ` `, + imports: [AndroidFilterComponent], + schemas: [NO_ERRORS_SCHEMA], }) export class AndroidSpecificComponent { constructor(public elementRef: ElementRef) {} @@ -27,25 +30,19 @@ export class AndroidSpecificComponent { template: ` `, + schemas: [NO_ERRORS_SCHEMA], }) export class PlatformSpecificAttributeComponent { constructor(public elementRef: ElementRef) {} } const DECLARATIONS = [PlatformSpecificAttributeComponent, AndroidSpecificComponent, IosSpecificComponent]; -@NgModule({ - declarations: DECLARATIONS, - imports: [NativeScriptModule], - schemas: [NO_ERRORS_SCHEMA], -}) -export class PlatformModule {} describe('Platform filter directives', () => { describe('on IOS device', () => { beforeEach(() => { return TestBed.configureTestingModule({ - imports: [], - declarations: DECLARATIONS, + imports: DECLARATIONS, providers: [{ provide: DEVICE, useValue: createDevice(platformNames.ios) }], schemas: [NO_ERRORS_SCHEMA], }).compileComponents(); @@ -77,8 +74,7 @@ describe('Platform filter directives', () => { describe('on Android device', () => { beforeEach(() => { return TestBed.configureTestingModule({ - imports: [], - declarations: DECLARATIONS, + imports: DECLARATIONS, providers: [{ provide: DEVICE, useValue: createDevice(platformNames.android) }], schemas: [NO_ERRORS_SCHEMA], }).compileComponents(); diff --git a/apps/nativescript-demo-ng/src/tests/spans.spec.ts b/apps/nativescript-demo-ng/src/tests/spans.spec.ts index b1d23a8..3057be8 100644 --- a/apps/nativescript-demo-ng/src/tests/spans.spec.ts +++ b/apps/nativescript-demo-ng/src/tests/spans.spec.ts @@ -31,7 +31,9 @@ const configureComponents = (textBaseElementName: string) => { @Component({ template: `<${textBaseElementName} #textBase> - + @if(show) { + + } `, }) @@ -43,7 +45,9 @@ const configureComponents = (textBaseElementName: string) => { template: `<${textBaseElementName} #textBase> - + @if(show) { + + } `, @@ -66,8 +70,7 @@ describe('Spans', () => { const { SpansComponent, DynamicSpansComponent, FormattedStringComponent, DynamicFormattedStringComponent } = configureComponents(textBaseElementName); beforeEach(() => { return TestBed.configureTestingModule({ - declarations: [SpansComponent, DynamicSpansComponent, FormattedStringComponent, DynamicFormattedStringComponent], - imports: [NativeScriptModule], + imports: [NativeScriptModule, SpansComponent, DynamicSpansComponent, FormattedStringComponent, DynamicFormattedStringComponent], schemas: [NO_ERRORS_SCHEMA], }).compileComponents(); }); diff --git a/apps/nativescript-demo-ng/src/tests/textnode.spec.ts b/apps/nativescript-demo-ng/src/tests/textnode.spec.ts index 838fac0..720a360 100644 --- a/apps/nativescript-demo-ng/src/tests/textnode.spec.ts +++ b/apps/nativescript-demo-ng/src/tests/textnode.spec.ts @@ -6,7 +6,6 @@ import { TextBase } from '@nativescript/core'; @Component({ template: ``, schemas: [NO_ERRORS_SCHEMA], - standalone: true, }) class TextNodeComponent { @ViewChild('textElement', { static: true }) textElement: ElementRef; @@ -18,7 +17,6 @@ class TextNodeComponent { >{{ text }}`, schemas: [NO_ERRORS_SCHEMA], - standalone: true, }) class TextNodeSpansComponent { @ViewChild('textElement', { static: true }) textElement: ElementRef; diff --git a/apps/nativescript-demo-ng/tailwind.config.js b/apps/nativescript-demo-ng/tailwind.config.js new file mode 100644 index 0000000..d791c88 --- /dev/null +++ b/apps/nativescript-demo-ng/tailwind.config.js @@ -0,0 +1,29 @@ +// tailwind.config.js +const plugin = require('tailwindcss/plugin'); + +/** @type {import('tailwindcss').Config} */ +module.exports = { + content: ['./app/**/*.{css,xml,html,vue,svelte,ts,tsx}'], + // use the .ns-dark class to control dark mode (applied by NativeScript) - since 'media' (default) is not supported. + darkMode: ['class', '.ns-dark'], + theme: { + extend: {}, + }, + plugins: [ + /** + * A simple inline plugin that adds the ios: and android: variants + * + * Example usage: + * + *