diff --git a/CHANGELOG.md b/CHANGELOG.md index 82b761170..e7e0c6b06 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,12 @@ +# [11.2.0](https://github.com/NativeScript/nativescript-angular/compare/11.0.1...11.2.0) (2021-03-24) + + +### Bug Fixes + +* **ivy:** nsRouterLinkActive works on nsRouterLink ([#2322](https://github.com/NativeScript/nativescript-angular/issues/2322)) ([13a3562](https://github.com/NativeScript/nativescript-angular/commit/13a3562146ef8516fea8bb3d988f8e0ddc9617a7)) + + + ## [11.0.1](https://github.com/NativeScript/nativescript-angular/compare/11.0.0...11.0.1) (2021-01-22) diff --git a/README.md b/README.md index b6d86f1a1..8819a1595 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,7 @@ +## Note on repo + +This repo is for Angular <= 11. If looking for 12+ (including 18+, etc) it's maintained here [NativeScript/angular](https://github.com/NativeScript/angular). + # NativeScript Angular [![Build Status](https://travis-ci.org/NativeScript/nativescript-angular.svg?branch=master)](https://travis-ci.org/NativeScript/nativescript-angular) diff --git a/nativescript-angular-package/package.json b/nativescript-angular-package/package.json index 0d2a16f8e..54867bcbb 100644 --- a/nativescript-angular-package/package.json +++ b/nativescript-angular-package/package.json @@ -1,6 +1,6 @@ { "name": "nativescript-angular", - "version": "11.0.0", + "version": "11.2.0", "description": "Compatibility with old style nativescript-angular imports.", "homepage": "https://www.nativescript.org/", "bugs": "https://github.com/NativeScript/nativescript-angular/issues", @@ -30,7 +30,7 @@ "@nativescript/angular": "ns-angular" } }, - "whitelistedNonPeerDependencies": [ + "allowedNonPeerDependencies": [ "." ] }, @@ -45,7 +45,7 @@ "@angular/platform-browser-dynamic": "~11.0.0", "@angular/router": "~11.0.0", "@nativescript/angular": "rc", - "@nativescript/core": "rc", + "@nativescript/core": "~8.0.0", "ng-packagr": "^11.0.0", "rxjs": "~6.6.0", "typescript": "~4.0.0" diff --git a/nativescript-angular/element-registry.ts b/nativescript-angular/element-registry.ts index 33925be70..d42c91259 100644 --- a/nativescript-angular/element-registry.ts +++ b/nativescript-angular/element-registry.ts @@ -1,4 +1,4 @@ -import { View, LayoutBase, Page, Frame, AbsoluteLayout, ActivityIndicator, BottomNavigation, Button, ContentView, DatePicker, DockLayout, GridLayout, HtmlView, Image, Label, ListPicker, ListView, Placeholder, Progress, ProxyViewContainer, Repeater, ScrollView, SearchBar, SegmentedBar, SegmentedBarItem, Slider, StackLayout, FlexboxLayout, Switch, TabView, TabStrip, TabStripItem, TabContentItem, Tabs, TextField, TextView, TimePicker, WebView, WrapLayout, FormattedString, Span } from '@nativescript/core'; +import { View, LayoutBase, Page, Frame, AbsoluteLayout, ActivityIndicator, Button, ContentView, DatePicker, DockLayout, GridLayout, HtmlView, Image, Label, ListPicker, ListView, Placeholder, Progress, ProxyViewContainer, Repeater, ScrollView, SearchBar, SegmentedBar, SegmentedBarItem, Slider, StackLayout, FlexboxLayout, Switch, TabView, TextField, TextView, TimePicker, WebView, WrapLayout, FormattedString, Span, RootLayout } from '@nativescript/core'; export interface ViewClass { new (): View; @@ -164,7 +164,6 @@ const frameMeta: ViewClassMeta = { // Note: ActionBar related components are registerd together with action-bar directives. registerElement('AbsoluteLayout', () => AbsoluteLayout); registerElement('ActivityIndicator', () => ActivityIndicator); -registerElement('BottomNavigation', () => BottomNavigation); registerElement('Button', () => Button); registerElement('ContentView', () => ContentView); registerElement('DatePicker', () => DatePicker); @@ -183,6 +182,7 @@ registerElement('Placeholder', () => Placeholder); registerElement('Progress', () => Progress); registerElement('ProxyViewContainer', () => ProxyViewContainer); registerElement('Repeater', () => Repeater); +registerElement('RootLayout', () => RootLayout); registerElement('ScrollView', () => ScrollView); registerElement('SearchBar', () => SearchBar); registerElement('SegmentedBar', () => SegmentedBar); @@ -192,10 +192,6 @@ registerElement('StackLayout', () => StackLayout); registerElement('FlexboxLayout', () => FlexboxLayout); registerElement('Switch', () => Switch); registerElement('TabView', () => TabView); -registerElement('TabStrip', () => TabStrip); -registerElement('TabStripItem', () => TabStripItem); -registerElement('TabContentItem', () => TabContentItem); -registerElement('Tabs', () => Tabs); registerElement('TextField', () => TextField); registerElement('TextView', () => TextView); registerElement('TimePicker', () => TimePicker); diff --git a/nativescript-angular/package.json b/nativescript-angular/package.json index 8afa82555..574fab819 100644 --- a/nativescript-angular/package.json +++ b/nativescript-angular/package.json @@ -1,6 +1,6 @@ { "name": "@nativescript/angular", - "version": "11.0.1", + "version": "11.8.0", "description": "An Angular renderer that lets you build mobile apps with NativeScript.", "homepage": "https://www.nativescript.org/", "bugs": "https://github.com/NativeScript/nativescript-angular/issues", @@ -52,7 +52,7 @@ "@nativescript/core": "ns-core" } }, - "whitelistedNonPeerDependencies": [ + "allowedNonPeerDependencies": [ "." ] }, @@ -60,32 +60,23 @@ "@nativescript/zone-js": "~1.0.0", "nativescript-intl": "^4.0.0" }, - "peerDependencies": { - "@angular/common": "^11.0.0", - "@angular/compiler": "^11.0.0", - "@angular/core": "^11.0.0", - "@angular/forms": "^11.0.0", - "@angular/platform-browser": "^11.0.0", - "@angular/platform-browser-dynamic": "^11.0.0", - "@angular/router": "^11.0.0" - }, "devDependencies": { - "@angular/animations": "~11.0.0", - "@angular/common": "~11.0.0", - "@angular/compiler": "~11.0.0", - "@angular/compiler-cli": "~11.0.0", - "@angular/core": "~11.0.0", - "@angular/forms": "~11.0.0", - "@angular/platform-browser": "~11.0.0", - "@angular/platform-browser-dynamic": "~11.0.0", - "@angular/router": "~11.0.0", - "@nativescript/core": "~7.1.0", + "@angular/animations": "~11.2.0", + "@angular/common": "~11.2.0", + "@angular/compiler": "~11.2.0", + "@angular/compiler-cli": "~11.2.0", + "@angular/core": "~11.2.0", + "@angular/forms": "~11.2.0", + "@angular/platform-browser": "~11.2.0", + "@angular/platform-browser-dynamic": "~11.2.0", + "@angular/router": "~11.2.0", + "@nativescript/core": "~8.0.0", "codelyzer": "^5.2.0", "conventional-changelog-cli": "^2.0.34", "husky": "^4.2.5", "lint-staged": "^10.2.11", "nativescript-typedoc-theme": "git://github.com/NativeScript/nativescript-typedoc-theme.git#master", - "ng-packagr": "~11.0.0", + "ng-packagr": "~11.2.0", "prettier": "^2.0.5", "rxjs": "~6.6.0", "tslint": "^6.1.2", diff --git a/nativescript-angular/router/ns-router-link-active.ts b/nativescript-angular/router/ns-router-link-active.ts index b00a35679..333cba56d 100644 --- a/nativescript-angular/router/ns-router-link-active.ts +++ b/nativescript-angular/router/ns-router-link-active.ts @@ -1,10 +1,11 @@ -import { AfterContentInit, ContentChildren, Directive, ElementRef, Input, OnChanges, OnDestroy, QueryList, Renderer2 } from '@angular/core'; -import { Subscription } from 'rxjs'; +import { AfterContentInit, ChangeDetectorRef, ContentChildren, Directive, ElementRef, Input, OnChanges, OnDestroy, Optional, QueryList, Renderer2 } from '@angular/core'; +import { from, of, Subscription } from 'rxjs'; import { NavigationEnd, Router, UrlTree } from '@angular/router'; import { containsTree } from './private-imports/router-url-tree'; import { NSRouterLink } from './ns-router-link'; +import { mergeAll } from 'rxjs/operators'; /** * The NSRouterLinkActive directive lets you add a CSS class to an element when the link"s route @@ -54,16 +55,17 @@ import { NSRouterLink } from './ns-router-link'; }) export class NSRouterLinkActive implements OnChanges, OnDestroy, AfterContentInit { // tslint:disable-line:max-line-length directive-class-suffix - @ContentChildren(NSRouterLink) links: QueryList; + @ContentChildren(NSRouterLink, { descendants: true }) links: QueryList; private classes: string[] = []; - private subscription: Subscription; + private routerEventsSubscription: Subscription; + private linkInputChangesSubscription?: Subscription; private active: boolean = false; @Input() nsRouterLinkActiveOptions: { exact: boolean } = { exact: false }; - constructor(private router: Router, private element: ElementRef, private renderer: Renderer2) { - this.subscription = router.events.subscribe((s) => { + constructor(private router: Router, private element: ElementRef, private renderer: Renderer2, private readonly cdr: ChangeDetectorRef, @Optional() private link?: NSRouterLink) { + this.routerEventsSubscription = router.events.subscribe((s) => { if (s instanceof NavigationEnd) { this.update(); } @@ -75,8 +77,25 @@ export class NSRouterLinkActive implements OnChanges, OnDestroy, AfterContentIni } ngAfterContentInit(): void { - this.links.changes.subscribe(() => this.update()); - this.update(); + // `of(null)` is used to force subscribe body to execute once immediately (like `startWith`). + from([this.links.changes, of(null)]) + .pipe(mergeAll()) + .subscribe((_) => { + this.update(); + this.subscribeToEachLinkOnChanges(); + }); + } + + private subscribeToEachLinkOnChanges() { + this.linkInputChangesSubscription?.unsubscribe(); + const allLinkChanges = [...this.links.toArray(), this.link].filter((link): link is NSRouterLink => !!link).map((link) => link.onChanges); + this.linkInputChangesSubscription = from(allLinkChanges) + .pipe(mergeAll()) + .subscribe((link) => { + if (this.isActive !== this.isLinkActive(this.router)(link)) { + this.update(); + } + }); } @Input('nsRouterLinkActive') @@ -92,30 +111,34 @@ export class NSRouterLinkActive implements OnChanges, OnDestroy, AfterContentIni this.update(); } ngOnDestroy(): any { - this.subscription.unsubscribe(); + this.routerEventsSubscription.unsubscribe(); + this.linkInputChangesSubscription?.unsubscribe(); } private update(): void { if (!this.links) { return; } - const hasActiveLinks = this.hasActiveLinks(); - // react only when status has changed to prevent unnecessary dom updates - if (this.active !== hasActiveLinks) { - const currentUrlTree = this.router.parseUrl(this.router.url); - const isActiveLinks = this.reduceList(currentUrlTree, this.links); - this.classes.forEach((c) => { - if (isActiveLinks) { - this.renderer.addClass(this.element.nativeElement, c); - } else { - this.renderer.removeClass(this.element.nativeElement, c); - } - }); - } - Promise.resolve(hasActiveLinks).then((active) => (this.active = active)); + Promise.resolve().then(() => { + const hasActiveLinks = this.hasActiveLinks(); + if (this.active !== hasActiveLinks) { + this.active = hasActiveLinks; + const currentUrlTree = this.router.parseUrl(this.router.url); + const links = this.link ? [...this.links.toArray(), this.link] : this.links; + const isActiveLinks = this.reduceList(currentUrlTree, links); + this.cdr.markForCheck(); + this.classes.forEach((c) => { + if (isActiveLinks) { + this.renderer.addClass(this.element.nativeElement, c); + } else { + this.renderer.removeClass(this.element.nativeElement, c); + } + }); + } + }); } - private reduceList(currentUrlTree: UrlTree, q: QueryList): boolean { + private reduceList(currentUrlTree: UrlTree, q: QueryList | Array): boolean { return q.reduce((res: boolean, link: NSRouterLink) => { return res || containsTree(currentUrlTree, link.urlTree, this.nsRouterLinkActiveOptions.exact); }, false); @@ -126,6 +149,7 @@ export class NSRouterLinkActive implements OnChanges, OnDestroy, AfterContentIni } private hasActiveLinks(): boolean { - return this.links.some(this.isLinkActive(this.router)); + const isActiveCheckFn = this.isLinkActive(this.router); + return (this.link && isActiveCheckFn(this.link)) || this.links.some(isActiveCheckFn); } } diff --git a/nativescript-angular/router/ns-router-link.ts b/nativescript-angular/router/ns-router-link.ts index 02ba34a39..40c0b3a10 100644 --- a/nativescript-angular/router/ns-router-link.ts +++ b/nativescript-angular/router/ns-router-link.ts @@ -1,10 +1,11 @@ -import { Directive, Input, ElementRef, NgZone } from '@angular/core'; +import { Directive, Input, ElementRef, NgZone, OnChanges, SimpleChanges } from '@angular/core'; import { NavigationExtras } from '@angular/router'; import { ActivatedRoute, Router, UrlTree } from '@angular/router'; import { NavigationTransition } from '@nativescript/core'; import { NativeScriptDebug } from '../trace'; import { RouterExtensions } from './router-extensions'; import { NavigationOptions } from './ns-location-utils'; +import { Subject } from 'rxjs'; // Copied from "@angular/router/src/config" export type QueryParamsHandling = 'merge' | 'preserve' | ''; @@ -34,7 +35,7 @@ export type QueryParamsHandling = 'merge' | 'preserve' | ''; * And if the segment begins with `../`, the router will go up one level. */ @Directive({ selector: '[nsRouterLink]' }) -export class NSRouterLink { +export class NSRouterLink implements OnChanges { // tslint:disable-line:directive-class-suffix @Input() target: string; @Input() queryParams: { [k: string]: any }; @@ -50,6 +51,9 @@ export class NSRouterLink { @Input() pageTransition: boolean | string | NavigationTransition = true; @Input() pageTransitionDuration; + /** @internal */ + onChanges = new Subject(); + private commands: any[] = []; constructor(private ngZone: NgZone, private router: Router, private navigator: RouterExtensions, private route: ActivatedRoute, private el: ElementRef) {} @@ -75,6 +79,12 @@ export class NSRouterLink { }); } + ngOnChanges(changes: SimpleChanges) { + // This is subscribed to by `RouterLinkActive` so that it knows to update when there are changes + // to the RouterLinks it's tracking. + this.onChanges.next(this); + } + @Input('nsRouterLink') set params(data: any[] | string) { if (Array.isArray(data)) { diff --git a/nativescript-angular/testing/package.json b/nativescript-angular/testing/package.json index a809f1246..e0ecb51a5 100644 --- a/nativescript-angular/testing/package.json +++ b/nativescript-angular/testing/package.json @@ -6,12 +6,12 @@ "@nativescript/core": "ns-core" } }, - "whitelistedNonPeerDependencies": [ + "allowedNonPeerDependencies": [ "." ] }, "devDependencies": { - "@nativescript/angular": "rc", - "@nativescript/core": "rc" + "@nativescript/angular": "latest", + "@nativescript/core": "~8.0.0" } } diff --git a/nativescript-angular/testing/src/polyfills.ts b/nativescript-angular/testing/src/polyfills.ts new file mode 100644 index 000000000..fb0686283 --- /dev/null +++ b/nativescript-angular/testing/src/polyfills.ts @@ -0,0 +1,4 @@ +if (typeof Node === 'undefined' && !global.Node) { + class DummyNode {} + global.Node = DummyNode as any; +} diff --git a/nativescript-angular/testing/src/public_api.ts b/nativescript-angular/testing/src/public_api.ts index 74b1d5516..66d4aa5f3 100644 --- a/nativescript-angular/testing/src/public_api.ts +++ b/nativescript-angular/testing/src/public_api.ts @@ -1,3 +1,4 @@ +import './polyfills'; export * from './util'; export * from './test-root-view'; export * from './nativescript_test_component_renderer'; diff --git a/tests/package.json b/tests/package.json index 998965df3..405d8317b 100644 --- a/tests/package.json +++ b/tests/package.json @@ -19,23 +19,23 @@ ], "homepage": "http://nativescript.org", "dependencies": { - "@angular/animations": "~9.1.0", - "@angular/common": "~9.1.0", - "@angular/compiler": "~9.1.0", - "@angular/core": "~9.1.0", - "@angular/forms": "~9.1.0", - "@angular/platform-browser": "~9.1.0", - "@angular/platform-browser-dynamic": "~9.1.0", - "@angular/router": "~9.1.0", + "@angular/animations": "~11.2.0", + "@angular/common": "~11.2.0", + "@angular/compiler": "~11.2.0", + "@angular/core": "~11.2.0", + "@angular/forms": "~11.2.0", + "@angular/platform-browser": "~11.2.0", + "@angular/platform-browser-dynamic": "~11.2.0", + "@angular/router": "~11.2.0", "nativescript-angular": "../nativescript-angular-package", "nativescript-unit-test-runner": "0.7.0", "rxjs": "~6.5.5", - "@nativescript/core": "next", + "@nativescript/core": "~8.0.0", "zone.js": "^0.10.3" }, "devDependencies": { - "@angular/compiler-cli": "8.0.0", - "@ngtools/webpack": "8.0.0", + "@angular/compiler-cli": "~11.2.0", + "@ngtools/webpack": "~11.2.0", "@types/chai": "^4.1.4", "@types/karma-chai": "0.1.1", "@types/mocha": "5.2.7", @@ -57,7 +57,7 @@ "remove-strict-webpack-plugin": "~0.1.2", "sinon": "^7.3.2", "tslint": "^4.5.1", - "typescript": "~3.8.3" + "typescript": "~4.0.0" }, "scripts": { "e2e": "tsc -p e2e && mocha --opts ../e2e/config/mocha.opts --recursive e2e --appiumCapsLocation ../e2e/config/appium.capabilities.json",