feat: apple view filter to cover ios and visionos together (#148)

NathanWalker · web-flow · commit f5431bd2564f · 2025-01-28T18:53:58.000-08:00
diff --git a/apps/nativescript-demo-ng/App_Resources/visionOS/Assets.xcassets/AppIcon.solidimagestack/Back.solidimagestacklayer/Content.imageset/Back.png b/apps/nativescript-demo-ng/App_Resources/visionOS/Assets.xcassets/AppIcon.solidimagestack/Back.solidimagestacklayer/Content.imageset/Back.png
diff --git a/apps/nativescript-demo-ng/App_Resources/visionOS/Assets.xcassets/AppIcon.solidimagestack/Back.solidimagestacklayer/Content.imageset/Contents.json b/apps/nativescript-demo-ng/App_Resources/visionOS/Assets.xcassets/AppIcon.solidimagestack/Back.solidimagestacklayer/Content.imageset/Contents.json
@@ -0,0 +1,13 @@
+{
+  "images" : [
+    {
+      "filename" : "Back.png",
+      "idiom" : "reality",
+      "scale" : "2x"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}
diff --git a/apps/nativescript-demo-ng/App_Resources/visionOS/Assets.xcassets/AppIcon.solidimagestack/Back.solidimagestacklayer/Contents.json b/apps/nativescript-demo-ng/App_Resources/visionOS/Assets.xcassets/AppIcon.solidimagestack/Back.solidimagestacklayer/Contents.json
@@ -0,0 +1,6 @@
+{
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}
diff --git a/apps/nativescript-demo-ng/App_Resources/visionOS/Assets.xcassets/AppIcon.solidimagestack/Contents.json b/apps/nativescript-demo-ng/App_Resources/visionOS/Assets.xcassets/AppIcon.solidimagestack/Contents.json
@@ -0,0 +1,17 @@
+{
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  },
+  "layers" : [
+    {
+      "filename" : "Front.solidimagestacklayer"
+    },
+    {
+      "filename" : "Middle.solidimagestacklayer"
+    },
+    {
+      "filename" : "Back.solidimagestacklayer"
+    }
+  ]
+}
diff --git a/apps/nativescript-demo-ng/App_Resources/visionOS/Assets.xcassets/AppIcon.solidimagestack/Front.solidimagestacklayer/Content.imageset/Contents.json b/apps/nativescript-demo-ng/App_Resources/visionOS/Assets.xcassets/AppIcon.solidimagestack/Front.solidimagestacklayer/Content.imageset/Contents.json
@@ -0,0 +1,13 @@
+{
+  "images" : [
+    {
+      "filename" : "Front.png",
+      "idiom" : "reality",
+      "scale" : "2x"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}
diff --git a/apps/nativescript-demo-ng/App_Resources/visionOS/Assets.xcassets/AppIcon.solidimagestack/Front.solidimagestacklayer/Content.imageset/Front.png b/apps/nativescript-demo-ng/App_Resources/visionOS/Assets.xcassets/AppIcon.solidimagestack/Front.solidimagestacklayer/Content.imageset/Front.png
diff --git a/apps/nativescript-demo-ng/App_Resources/visionOS/Assets.xcassets/AppIcon.solidimagestack/Front.solidimagestacklayer/Contents.json b/apps/nativescript-demo-ng/App_Resources/visionOS/Assets.xcassets/AppIcon.solidimagestack/Front.solidimagestacklayer/Contents.json
@@ -0,0 +1,6 @@
+{
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}
diff --git a/apps/nativescript-demo-ng/App_Resources/visionOS/Assets.xcassets/AppIcon.solidimagestack/Middle.solidimagestacklayer/Content.imageset/Contents.json b/apps/nativescript-demo-ng/App_Resources/visionOS/Assets.xcassets/AppIcon.solidimagestack/Middle.solidimagestacklayer/Content.imageset/Contents.json
@@ -0,0 +1,13 @@
+{
+  "images" : [
+    {
+      "filename" : "Middle.png",
+      "idiom" : "reality",
+      "scale" : "2x"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}
diff --git a/apps/nativescript-demo-ng/App_Resources/visionOS/Assets.xcassets/AppIcon.solidimagestack/Middle.solidimagestacklayer/Content.imageset/Middle.png b/apps/nativescript-demo-ng/App_Resources/visionOS/Assets.xcassets/AppIcon.solidimagestack/Middle.solidimagestacklayer/Content.imageset/Middle.png
diff --git a/apps/nativescript-demo-ng/App_Resources/visionOS/Assets.xcassets/AppIcon.solidimagestack/Middle.solidimagestacklayer/Contents.json b/apps/nativescript-demo-ng/App_Resources/visionOS/Assets.xcassets/AppIcon.solidimagestack/Middle.solidimagestacklayer/Contents.json
@@ -0,0 +1,6 @@
+{
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}
diff --git a/apps/nativescript-demo-ng/App_Resources/visionOS/Assets.xcassets/Contents.json b/apps/nativescript-demo-ng/App_Resources/visionOS/Assets.xcassets/Contents.json
@@ -0,0 +1,6 @@
+{
+  "info" : {
+    "version" : 1,
+    "author" : "xcode"
+  }
+}
diff --git a/apps/nativescript-demo-ng/App_Resources/visionOS/Info.plist b/apps/nativescript-demo-ng/App_Resources/visionOS/Info.plist
@@ -0,0 +1,58 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+	<dict>
+		<key>CFBundleDevelopmentRegion</key>
+		<string>en</string>
+		<key>CFBundleDisplayName</key>
+		<string>${PRODUCT_NAME}</string>
+		<key>CFBundleExecutable</key>
+		<string>${EXECUTABLE_NAME}</string>
+		<key>CFBundleInfoDictionaryVersion</key>
+		<string>6.0</string>
+		<key>CFBundleName</key>
+		<string>${PRODUCT_NAME}</string>
+		<key>CFBundlePackageType</key>
+		<string>APPL</string>
+		<key>CFBundleShortVersionString</key>
+		<string>1.0</string>
+		<key>CFBundleSignature</key>
+		<string>????</string>
+		<key>CFBundleVersion</key>∂
+		<string>1.0</string>
+		<key>LSRequiresIPhoneOS</key>
+		<true/>
+		<key>UIRequiresFullScreen</key>
+		<true/>
+		<key>UIRequiredDeviceCapabilities</key>
+		<array>
+			<string>armv7</string>
+		</array>
+		<key>UISupportedInterfaceOrientations</key>
+		<array>
+			<string>UIInterfaceOrientationPortrait</string>
+			<string>UIInterfaceOrientationLandscapeLeft</string>
+			<string>UIInterfaceOrientationLandscapeRight</string>
+		</array>
+		<key>UISupportedInterfaceOrientations~ipad</key>
+		<array>
+			<string>UIInterfaceOrientationPortrait</string>
+			<string>UIInterfaceOrientationPortraitUpsideDown</string>
+			<string>UIInterfaceOrientationLandscapeLeft</string>
+			<string>UIInterfaceOrientationLandscapeRight</string>
+		</array>
+		<key>NSHandsTrackingUsageDescription</key>
+		<string>Use your hands to adjust lighting positions.</string>
+		<key>NSWorldSensingUsageDescription</key>
+		<string>To be able to place virtual contents in your surroundings.</string>
+		<key>UIApplicationSceneManifest</key>
+		<dict>
+			<key>UIApplicationPreferredDefaultSceneSessionRole</key>
+			<string>UIWindowSceneSessionRoleApplication</string>
+			<key>UIApplicationSupportsMultipleScenes</key>
+			<true/>
+			<key>UISceneConfigurations</key>
+			<dict/>
+		</dict>
+	</dict>
+</plist>
diff --git a/apps/nativescript-demo-ng/App_Resources/visionOS/build.xcconfig b/apps/nativescript-demo-ng/App_Resources/visionOS/build.xcconfig
@@ -0,0 +1,3 @@
+// DEVELOPMENT_TEAM = YOUR_TEAM_ID;
+ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
+IPHONEOS_DEPLOYMENT_TARGET = 17.0;
diff --git a/apps/nativescript-demo-ng/App_Resources/visionOS/src/NativeScriptApp.swift b/apps/nativescript-demo-ng/App_Resources/visionOS/src/NativeScriptApp.swift
@@ -0,0 +1,9 @@
+import SwiftUI
+
+@main
+struct NativeScriptApp: App {
+
+    var body: some Scene {
+        NativeScriptMainWindow()
+    }
+}
diff --git a/apps/nativescript-demo-ng/package.json b/apps/nativescript-demo-ng/package.json
@@ -3,13 +3,13 @@
   "main": "./src/main.ts",
   "description": "NativeScript Application",
   "dependencies": {
-    "@nativescript/core": "file:../../node_modules/@nativescript/core",
-    "@nativescript-community/ui-material-bottom-navigation": "^7.2.0"
+    "@nativescript/core": "file:../../node_modules/@nativescript/core"
   },
   "devDependencies": {
     "@nativescript/android": "~8.8.0",
     "@nativescript/ios": "~8.8.0",
     "@nativescript/tailwind": "^2.1.0",
-    "@nativescript/unit-test-runner": "^3.0.1"
+    "@nativescript/unit-test-runner": "^3.0.1",
+    "@nativescript/visionos": "8.8.1"
   }
 }
diff --git a/apps/nativescript-demo-ng/src/app/item3/items.component.html b/apps/nativescript-demo-ng/src/app/item3/items.component.html
@@ -27,8 +27,23 @@
     <Label [text]="message" class="text-3xl font-bold text-center text-blue-500"></Label>
     <Image src="~/assets/angular.png" class="w-[200] h-center mb-2 align-top"></Image>
     <!-- <Button (tap)="openModal()" text="Taste the Rainbow 🌈" [borderRadius]="borderRadius" [fontSize]="fontSize" backgroundColor="#00d2ff" color="#fff" margin="0" width="100%" fontWeight="bold" height="50"></Button> -->
-    <Button (tap)="openModal()" text="Open Modal" [borderRadius]="borderRadius" [fontSize]="fontSize" backgroundColor="#00d2ff" class="text-white w-full font-bold h-[50]"></Button>
-    <Button (tap)="fetchTodos()" text="Make a native Http networking request" [borderRadius]="borderRadius" [fontSize]="fontSize" padding="0" backgroundColor="#00d2ff" class="text-white mt-2 w-full font-bold h-[50]"></Button>
+    <Button
+      (tap)="openModal()"
+      text="Open Modal"
+      [borderRadius]="borderRadius"
+      [fontSize]="fontSize"
+      backgroundColor="#00d2ff"
+      class="text-white w-full font-bold h-[50]"
+    ></Button>
+    <Button
+      (tap)="fetchTodos()"
+      text="Make a native Http networking request"
+      [borderRadius]="borderRadius"
+      [fontSize]="fontSize"
+      padding="0"
+      backgroundColor="#00d2ff"
+      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">
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
@@ -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({
diff --git a/package.json b/package.json
@@ -31,7 +31,8 @@
     "workspace-generator": "nx workspace-generator",
     "demo.android": "nx debug nativescript-demo-ng android -c=prod",
     "demo.ios": "nx debug nativescript-demo-ng ios -c=prod",
-    "demo.clean": "nx clean nativescript-demo-ng clean",
+    "demo.vision": "nx debug nativescript-demo-ng visionos -c=prod",
+    "demo.clean": "nx clean nativescript-demo-ng",
     "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s"
   },
   "dependencies": {
diff --git a/packages/angular/src/lib/cdk/platform-filters/apple-filter.component.ts b/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__;
+}
diff --git a/packages/angular/src/lib/nativescript-common.module.ts b/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();
 
diff --git a/packages/angular/src/lib/public_api.ts b/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';
