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", pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy