feat: apple filter to cover ios and visionos together

Author: NathanWalker

apps/nativescript-demo-ng/src/tests/platform-filter-components.spec.ts

@@ -1,7 +1,7 @@
 // make sure you import mocha-config before @angular/core
 import { Component, ElementRef, NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
 import { TestBed } from '@angular/core/testing';
-import { AndroidFilterComponent, DEVICE, IOSFilterComponent, NativeScriptModule } from '@nativescript/angular';
+import { AndroidFilterComponent, DEVICE, IOSFilterComponent, AppleFilterComponent, NativeScriptModule } from '@nativescript/angular';
 import { platformNames } from '@nativescript/core/platform';
 import { createDevice, dumpView } from './test-utils.spec';
 @Component({
@@ -15,6 +15,17 @@ export class IosSpecificComponent {
   constructor(public elementRef: ElementRef) {}
 }
 
+@Component({
+  template: ` <StackLayout>
+    <apple><Label text="Apple"></Label></apple>
+  </StackLayout>`,
+  imports: [AppleFilterComponent],
+  schemas: [NO_ERRORS_SCHEMA],
+})
+export class AppleSpecificComponent {
+  constructor(public elementRef: ElementRef) {}
+}
+
 @Component({
   template: ` <StackLayout>
     <android><Label text="ANDROID"></Label></android>
@@ -71,6 +82,31 @@ describe('Platform filter directives', () => {
     });
   });
 
+  describe('on Apple device', () => {
+    beforeEach(() => {
+      return TestBed.configureTestingModule({
+        imports: DECLARATIONS,
+        providers: [{ provide: DEVICE, useValue: createDevice(platformNames.ios) }],
+        schemas: [NO_ERRORS_SCHEMA],
+      }).compileComponents();
+    });
+    it('does render apple specific content', () => {
+      const fixture = TestBed.createComponent(AppleSpecificComponent);
+      fixture.detectChanges();
+      const componentRef = fixture.componentRef;
+      const componentRoot = componentRef.instance.elementRef.nativeElement;
+      expect(dumpView(componentRoot, true).indexOf('(label[text=Apple])') >= 0).toBe(true);
+    });
+    it('does not render android specific content', () => {
+      const fixture = TestBed.createComponent(AndroidSpecificComponent);
+      fixture.detectChanges();
+      const componentRef = fixture.componentRef;
+      const componentRoot = componentRef.instance.elementRef.nativeElement;
+      console.log(dumpView(componentRoot, true));
+      expect(dumpView(componentRoot, true).indexOf('label') < 0).toBe(true);
+    });
+  });
+
   describe('on Android device', () => {
     beforeEach(() => {
       return TestBed.configureTestingModule({

packages/angular/src/lib/cdk/platform-filters/apple-filter.component.ts

@@ -0,0 +1,13 @@
+/* eslint-disable @angular-eslint/component-selector */
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'apple',
+  template: `@if (show) { 
+    <ng-content></ng-content>
+  }`,
+  standalone: true,
+})
+export class AppleFilterComponent {
+  public show = __APPLE__;
+}

packages/angular/src/lib/nativescript-common.module.ts

@@ -8,9 +8,10 @@ import { ModalDialogService } from './legacy/directives/dialogs';
 import { TabViewDirective, TabViewItemDirective } from './cdk/tab-view';
 import { AndroidFilterComponent } from './cdk/platform-filters/android-filter.component';
 import { IOSFilterComponent } from './cdk/platform-filters/ios-filter.component';
+import { AppleFilterComponent } from './cdk/platform-filters/apple-filter.component';
 import { VisionOSFilterComponent } from './cdk/platform-filters/vision-filter.component';
 
-const CDK_COMPONENTS = [ActionBarComponent, ActionBarScope, ActionItemDirective, NavigationButtonDirective, ListViewComponent, TemplateKeyDirective, TabViewDirective, TabViewItemDirective, AndroidFilterComponent, IOSFilterComponent, VisionOSFilterComponent];
+const CDK_COMPONENTS = [ActionBarComponent, ActionBarScope, ActionItemDirective, NavigationButtonDirective, ListViewComponent, TemplateKeyDirective, TabViewDirective, TabViewItemDirective, AndroidFilterComponent, IOSFilterComponent, AppleFilterComponent, VisionOSFilterComponent];
 
 registerNativeScriptViewComponents();
 

packages/angular/src/lib/public_api.ts

@@ -32,6 +32,7 @@ export * from './cdk/portal';
 export * from './cdk/dialog';
 export * from './cdk/tab-view';
 export * from './cdk/platform-filters/android-filter.component';
+export * from './cdk/platform-filters/apple-filter.component';
 export * from './cdk/platform-filters/ios-filter.component';
 export * from './cdk/platform-filters/vision-filter.component';
 export * from './file-system';