chore: merge main

Author: NathanWalker

.github/workflows/build.yml

@@ -6,9 +6,9 @@ env:
 
 on:
   push:
-    branches: [ "main" ]
+    branches: ["main"]
   pull_request:
-    branches: [ "main" ]
+    branches: ["main"]
 
 jobs:
   build:
@@ -17,14 +17,15 @@ jobs:
 
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v6
         with:
           fetch-depth: 0
-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@v6
         with:
           node-version: lts/*
-      - uses: nrwl/nx-set-shas@v3
+          cache: npm
+      - uses: nrwl/nx-set-shas@v5
       - name: npm install
-        run: npm install --legacy-peer-deps
+        run: npm install --force
       - name: Build.all affected
-        run: npx nx affected --target=build --exclude nativescript-demo-ng
+        run: npx nx affected --target=build,test --exclude nativescript-demo-ng

.gitignore

@@ -51,3 +51,7 @@ Thumbs.db
 .nx/workspace-data
 .cursor/rules/nx-rules.mdc
 .github/instructions/nx.instructions.md
+
+.claude/worktrees
+.nx/polygraph
+.nx/self-healing

.prettierignore

@@ -20,4 +20,5 @@ packages/angular/dist
 **/xplat/nativescript/scss/fonticons/*.css
 **/xplat/nativescript*/plugins/**/*
 /.nx/cache
-/.nx/workspace-data
+/.nx/workspace-data
+.nx/self-healing

apps/nativescript-demo-ng/.eslintrc.json

@@ -10,15 +10,15 @@
       },
       "rules": {
         "@angular-eslint/directive-selector": [
-          "error",
+          "warn",
           {
             "type": "attribute",
             "prefix": "",
             "style": "camelCase"
           }
         ],
         "@angular-eslint/component-selector": [
-          "error",
+          "warn",
           {
             "type": "element",
             "prefix": "",

apps/nativescript-demo-ng/src/app/app.routes.ts

@@ -1,6 +1,7 @@
 import { Routes } from '@angular/router';
 import { ItemDetailComponent } from './item/item-detail.component';
 import { ItemsComponent } from './item/items.component';
+import { InputBindingDemoComponent } from './input-binding-demo/input-binding-demo.component';
 import { ListViewStickyComponent } from './list-view-sticky/list-view-sticky.component';
 import { SPLIT_VIEW_ROUTES } from './split-view-demo/split-view.routes';
 // import { HomeComponent } from './home/home.component';
@@ -10,6 +11,14 @@ export const routes: Routes = [
   { path: '', redirectTo: '/rootlazy', pathMatch: 'full' },
   { path: 'items', component: ItemsComponent },
   { path: 'item/:id', component: ItemDetailComponent },
+  {
+    path: 'input-binding-demo/:name',
+    component: InputBindingDemoComponent,
+    data: { title: 'Demo Page' },
+    resolve: {
+      timestamp: () => new Date().toISOString(),
+    },
+  },
   { path: 'item2', loadChildren: () => import('./item2/item2.routes').then((m) => m.ITEM2_ROUTES) },
   { path: 'rootlazy', loadChildren: () => import('./item3/item3.module').then((m) => m.Item3Module) },
   {

apps/nativescript-demo-ng/src/app/input-binding-demo/input-binding-demo.component.ts

@@ -0,0 +1,32 @@
+import { Component, input, NO_ERRORS_SCHEMA } from '@angular/core';
+import { NativeScriptCommonModule } from '@nativescript/angular';
+
+@Component({
+  selector: 'ns-input-binding-demo',
+  template: `
+    <ActionBar title="Input Binding Demo" class="action-bar"></ActionBar>
+    <StackLayout class="p-4">
+      <Label text="Route Input Binding Demo" class="text-2xl font-bold text-center"></Label>
+
+      <Label class="mt-4 text-lg font-bold" text="Route Param:"></Label>
+      <Label class="text-base" [text]="'name = ' + name()"></Label>
+
+      <Label class="mt-4 text-lg font-bold" text="Query Param:"></Label>
+      <Label class="text-base" [text]="'language = ' + language()"></Label>
+
+      <Label class="mt-4 text-lg font-bold" text="Resolver Data:"></Label>
+      <Label class="text-base" [text]="'timestamp = ' + timestamp()"></Label>
+
+      <Label class="mt-4 text-lg font-bold" text="Static Route Data:"></Label>
+      <Label class="text-base" [text]="'title = ' + title()"></Label>
+    </StackLayout>
+  `,
+  imports: [NativeScriptCommonModule],
+  schemas: [NO_ERRORS_SCHEMA],
+})
+export class InputBindingDemoComponent {
+  name = input<string>();
+  language = input<string>();
+  timestamp = input<string>();
+  title = input<string>();
+}

apps/nativescript-demo-ng/src/app/item3/items.component.html

@@ -44,6 +44,16 @@
       backgroundColor="#00d2ff"
       class="text-white mt-2 w-full font-bold h-[50]"
     ></Button>
+    <Button
+      [nsRouterLink]="['/input-binding-demo', 'Angular']"
+      [queryParams]="{ language: 'en' }"
+      text="Input Binding Demo"
+      [borderRadius]="borderRadius"
+      [fontSize]="fontSize"
+      padding="0"
+      backgroundColor="#4CAF50"
+      class="text-white mt-2 w-full font-bold h-[50]"
+    ></Button>
   </StackLayout>
   <ListView row="1" [items]="items" backgroundColor="#efefef">
     <ng-template let-item="item">

apps/nativescript-demo-ng/src/main.ts

@@ -4,6 +4,7 @@ import {
   provideNativeScriptNgZone,
   provideNativeScriptRouter,
   runNativeScriptAngularApp,
+  provideComponentInputBinding,
 } from '@nativescript/angular';
 import { Trace, Utils, SplitView } from '@nativescript/core';
 
@@ -38,6 +39,7 @@ runNativeScriptAngularApp({
       providers: [
         provideNativeScriptHttpClient(withInterceptorsFromDi()),
         provideNativeScriptRouter(routes),
+        provideComponentInputBinding(),
         // provideNativeScriptRouter(SPLIT_VIEW_ROUTES),
         ZONELESS ? provideZonelessChangeDetection() : provideNativeScriptNgZone(),
       ],

apps/nativescript-demo-ng/src/tests/ns-router-link.spec.ts

@@ -1,47 +1,61 @@
-import { NSRouterLink } from '@nativescript/angular';
-import { ActivatedRoute, Router } from '@angular/router';
+import { NSRouterLink, NativeScriptRouterModule } from '@nativescript/angular';
 import { RouterExtensions } from '@nativescript/angular';
-import { fake, spy, stub } from './test-config.spec';
-import { SinonStub } from 'sinon';
-import { Label } from '@nativescript/core';
+import { fake } from './test-config.spec';
+import { Component, ViewChild } from '@angular/core';
+import { TestBed, ComponentFixture } from '@angular/core/testing';
+import { NativeScriptModule } from '@nativescript/angular';
 
-describe('NSRouterLink', () => {
-  const mockRouter = {} as Router;
-  const mockRouterExtensions = {
-    navigateByUrl: fake(),
-    navigate: fake(),
-  };
-  const mockActivatedRoute = {} as ActivatedRoute;
-  let nsRouterLink: NSRouterLink;
-  let urlTreeStub: SinonStub;
+@Component({
+  imports: [NativeScriptRouterModule, NSRouterLink],
+  template: `<Label nsRouterLink="/test" text="Test"></Label>`,
+})
+class RouterLinkTestComponent {
+  @ViewChild(NSRouterLink, { static: false }) nsRouterLink: NSRouterLink;
+}
 
-  beforeEach(() => {
-    const el = {
-      nativeElement: new Label(),
-    };
-    nsRouterLink = new NSRouterLink(null, mockRouter, mockRouterExtensions as unknown as RouterExtensions, mockActivatedRoute, el);
-    urlTreeStub = stub(nsRouterLink, 'urlTree').get(() => null);
-  });
+describe('NSRouterLink', () => {
+  let mockNavigate: ReturnType<typeof fake>;
+  let fixture: ComponentFixture<RouterLinkTestComponent>;
 
-  afterEach(() => {
-    urlTreeStub.restore();
+  beforeEach(async () => {
+    mockNavigate = fake();
+    TestBed.configureTestingModule({
+      imports: [
+        NativeScriptModule,
+        NativeScriptRouterModule.forRoot([{ path: 'test', component: RouterLinkTestComponent }]),
+        RouterLinkTestComponent,
+      ],
+      providers: [
+        {
+          provide: RouterExtensions,
+          useValue: {
+            navigateByUrl: fake(),
+            navigate: mockNavigate,
+          },
+        },
+      ],
+    });
+    await TestBed.compileComponents();
+    fixture = TestBed.createComponent(RouterLinkTestComponent);
+    fixture.detectChanges();
+    await fixture.whenStable();
   });
 
   it('#tap should call navigate with undefined transition in extras when boolean is given for pageTransition input', () => {
-    nsRouterLink.pageTransition = false;
-    nsRouterLink.onTap();
-    expect(mockRouterExtensions.navigate.lastCall.args[1].transition).toBeUndefined();
-    // assert.isUndefined(mockRouterExtensions.navigateByUrl.lastCall.args[1].transition);
+    const directive = fixture.componentInstance.nsRouterLink;
+    directive.pageTransition = false;
+    directive['onTap']();
+    expect(mockNavigate.lastCall.args[1].transition).toBeUndefined();
   });
 
   it('#tap should call navigate with correct transition in extras when NavigationTransition object is given for pageTransition input', () => {
     const pageTransition = {
       name: 'slide',
       duration: 500,
     };
-    nsRouterLink.pageTransition = pageTransition;
-    stub(nsRouterLink, 'urlTree').get(() => null);
-    nsRouterLink.onTap();
-    expect(mockRouterExtensions.navigate.lastCall.args[1].transition).toBe(pageTransition);
+    const directive = fixture.componentInstance.nsRouterLink;
+    directive.pageTransition = pageTransition;
+    directive['onTap']();
+    expect(mockNavigate.lastCall.args[1].transition).toBe(pageTransition);
   });
 });