feat: visionOS & SPM

CanvasNative.podspec

@@ -13,7 +13,7 @@ Pod::Spec.new do |s|
 
     s.author       = { "Osei Fortune" => "fortune.osei@yahoo.com" }
 
-    s.platform     = :ios, "13.0"
+    s.platforms    = { :ios => "13.0", :visionos => "1.0" }
 
     s.source       = { :git => "https://github.com/nativescript/canvas.git", :tag => "#{s.version}" }
 

Cargo.toml

@@ -74,7 +74,7 @@ canvas-webgl = { path = "./crates/canvas-webgl" }
 canvas-svg = { path = "./crates/canvas-svg" }
 gl-bindings = { path = "./crates/gl-bindings" }
 canvas-c = { path = "./crates/canvas-c" }
-skia-safe = { version = "0.97.0", features = ["textlayout"] }
+skia-safe = { git = "https://github.com/triniwiz/rust-skia", rev = "d4c4011", features = ["textlayout"] }
 itertools = "0.14.0"
 ustr = "1.1.0"
 wgpu-core = { git = "https://github.com/triniwiz/wgpu", rev = "7e0f39f", features = ["wgsl"] }

Makefile

@@ -1,4 +1,5 @@
 ARCHS_IOS = x86_64-apple-ios aarch64-apple-ios aarch64-apple-ios-sim
+ARCHS_VISIONOS = aarch64-apple-visionos aarch64-apple-visionos-sim
 ARCHS_ANDROID = i686-linux-android x86_64-linux-android aarch64-linux-android armv7-linux-androideabi
 
 XCFRAMEWORK = CanvasNative.xcframework
@@ -8,17 +9,22 @@ all: GENERATE_HEADERS ios android
 
 ios: $(XCFRAMEWORK)
 
+visionos: $(ARCHS_VISIONOS)
+
 android: GENERATE_ANDROID
 
 ios-svg: GENERATE_IOS_SVG
 
+visionos-svg: GENERATE_VISIONOS_SVG
+
+svg: GENERATE_IOS_SVG GENERATE_VISIONOS_SVG
+
 android-svg: GENERATE_ANDROID_SVG
 
 .PHONY: GENERATE_HEADERS
 GENERATE_HEADERS:
 	./tools/scripts/build-headers.sh
 
-# --- iOS builds ---
 .PHONY: $(ARCHS_IOS)
 $(ARCHS_IOS): %:
 	RUSTFLAGS="-Zlocation-detail=none -Zunstable-options -Cpanic=immediate-abort" \
@@ -27,15 +33,19 @@ $(ARCHS_IOS): %:
 
 $(XCFRAMEWORK): $(ARCHS_IOS)
 
-# --- Android builds ---
+.PHONY: $(ARCHS_VISIONOS)
+$(ARCHS_VISIONOS): %:
+	RUSTFLAGS="-Zlocation-detail=none -Zunstable-options -Cpanic=immediate-abort" \
+	cargo +nightly build -Z build-std='std,panic_abort' \
+	    --target $@ --release -p canvas-ios
+
 .PHONY: $(ARCHS_ANDROID)
 $(ARCHS_ANDROID): %:
 	./tools/scripts/build-android.sh $@
 
 .PHONY: GENERATE_ANDROID
 GENERATE_ANDROID: $(ARCHS_ANDROID)
 
-# --- iOS SVG builds ---
 .PHONY: $(addsuffix _svg,$(ARCHS_IOS))
 $(addsuffix _svg,$(ARCHS_IOS)): %_svg:
 	RUSTFLAGS="-Zlocation-detail=none -Zunstable-options -Cpanic=immediate-abort" \
@@ -45,15 +55,24 @@ $(addsuffix _svg,$(ARCHS_IOS)): %_svg:
 .PHONY: GENERATE_IOS_SVG
 GENERATE_IOS_SVG: $(addsuffix _svg,$(ARCHS_IOS))
 
-# --- Android SVG builds ---
+.PHONY: $(addsuffix _svg,$(ARCHS_VISIONOS))
+$(addsuffix _svg,$(ARCHS_VISIONOS)): %_svg:
+	RUSTFLAGS="-Zlocation-detail=none -Zunstable-options -Cpanic=immediate-abort" \
+	cargo +nightly build -Z build-std='std,panic_abort' \
+	    --target $* --release -p canvas-svg-ios
+
+.PHONY: GENERATE_VISIONOS_SVG
+GENERATE_VISIONOS_SVG: $(addsuffix _svg,$(ARCHS_VISIONOS))
+
+.PHONY: ios-svg visionos-svg svg
+
 .PHONY: $(addsuffix _svg,$(ARCHS_ANDROID))
 $(addsuffix _svg,$(ARCHS_ANDROID)): %_svg:
 	./tools/scripts/build-svg-android.sh $* svg
 
 .PHONY: GENERATE_ANDROID_SVG
 GENERATE_ANDROID_SVG: $(addsuffix _svg,$(ARCHS_ANDROID))
 
-# --- Debug targets ---
 .PHONY: ios_debug
 ios_debug: $(addsuffix _debug,$(ARCHS_IOS))
 
@@ -64,11 +83,17 @@ android_debug: $(addsuffix _debug,$(ARCHS_ANDROID))
 $(addsuffix _debug,$(ARCHS_IOS)): %_debug:
 	cargo +nightly build --target $* -p canvas-ios
 
+.PHONY: visionos_debug
+visionos_debug: $(addsuffix _debug,$(ARCHS_VISIONOS))
+
+.PHONY: $(addsuffix _debug,$(ARCHS_VISIONOS))
+$(addsuffix _debug,$(ARCHS_VISIONOS)): %_debug:
+	cargo +nightly build -Z build-std='std,panic_abort' --target $* -p canvas-ios
+
 .PHONY: $(addsuffix _debug,$(ARCHS_ANDROID))
 $(addsuffix _debug,$(ARCHS_ANDROID)): %_debug:
 	./tools/scripts/build-android.sh $* debug
 
-# --- Clean ---
 .PHONY: clean
 clean:
 	rm -rf target

NativeScript.podspec

@@ -0,0 +1,21 @@
+Pod::Spec.new do |s|
+    s.name         = "NativeScript"
+    s.version      = '1.0.0'
+    s.summary      = "V8 + NativeScript runtime headers for canvas and audio-context"
+    s.license      = "MIT"
+
+    s.authors      = "Osei Fortune"
+    s.homepage     = "https://github.com/NativeScript/canvas"
+    s.platforms    = { :ios => "12.0", :visionos => "1.0" }
+
+    # Both canvas and audio-context can depend on this pod from the same repo:
+    #   pod 'NativeScript', :git => 'https://github.com/NativeScript/canvas.git', :tag => 'v1.0.0'
+    s.source       = { :git => "https://github.com/NativeScript/canvas.git", :tag => "v#{s.version}" }
+    s.cocoapods_version = ">= 1.10.1"
+
+    # Headers-only — the NativeScript.xcframework binary is provided by the
+    # NativeScript runtime at app build time, not by this pod.
+    s.source_files        = "nativescript-v8/Headers/**/*.h"
+    s.header_mappings_dir = "nativescript-v8/Headers"
+    s.xcconfig = { 'HEADER_SEARCH_PATHS' => '$(inherited) "${PODS_ROOT}/Headers/Public/NativeScript"' }
+end

Package.swift

@@ -1,28 +1,18 @@
-// swift-tools-version:5.3
-// The swift-tools-version declares the minimum version of Swift required to build this package.
-
+// swift-tools-version:5.9
 import PackageDescription
 
 let package = Package(
     name: "CanvasNative",
+    platforms: [.iOS(.v12), .visionOS(.v1)],
     products: [
-        // Products define the executables and libraries a package produces, and make them visible to other packages.
-        .library(
-            name: "CanvasNative",
-            targets: ["CanvasNative"]),
-    ],
-    dependencies: [
-        // Dependencies declare other packages that this package depends on.
-        // .package(url: /* package url */, from: "1.0.0"),
+        .library(name: "NativeScriptV8", targets: ["NativeScriptV8"]),
     ],
     targets: [
-        // Targets are the basic building blocks of a package. A target can define a module or a test suite.
-        // Targets can depend on other targets in this package, and on products in packages this package depends on.
         .target(
-            name: "CanvasNative",
-            dependencies: []),
-        .testTarget(
-            name: "CanvasNativeTests",
-            dependencies: ["CanvasNative"]),
+            name: "NativeScriptV8",
+            path: "nativescript-v8",
+            sources: ["Sources"],
+            publicHeadersPath: "Headers"
+        ),
     ]
 )

apps/demo/nativescript.config.ts

@@ -10,9 +10,16 @@ export default {
 	},
 	appPath: 'src',
 	ios: {
-		discardUncaughtJsExceptions: false
+		discardUncaughtJsExceptions: false,
+		SPMPackages: [
+			{
+				name: 'CanvasNative',
+				libs: ['NativeScriptV8'],
+				path: '../../nativescript-v8',
+			},
+		],
 	},
 	cli: {
-		packageManager: 'npm'
-	}
+		packageManager: 'npm',
+	},
 } as NativeScriptConfig;

apps/demo/package.json

@@ -14,7 +14,7 @@
 		"@nativescript/canvas-polyfill": "file:../../packages/canvas-polyfill",
 		"@nativescript/canvas-svg": "file:../../packages/canvas-svg",
 		"@nativescript/canvas-three": "file:../../packages/canvas-three",
-		"@nativescript/core": "file:../../node_modules/@nativescript/core",
+		"@nativescript/core": "9.0.20",
 		"@pixi-essentials/svg": "file:../../node_modules/@pixi-essentials/svg",
 		"babylonjs": "file:../../node_modules/babylonjs",
 		"babylonjs-materials": "file:../../node_modules/babylonjs-materials",
@@ -35,6 +35,6 @@
 		"@nativescript/android": "~8.9.0",
 		"@nativescript/devtools": "~0.0.1",
 		"@nativescript/ios": "~8.9.0",
-		"@nativescript/visionos": "~8.9.0"
+		"@nativescript/visionos": "~9.0.1"
 	}
 }

apps/demo/src/app-root.xml

@@ -2,3 +2,6 @@
 </Frame>
 <!-- <Frame defaultPage="plugin-demos/canvas-three">
 </Frame> -->
+
+<!-- <Frame defaultPage="plugin-demos/canvas">
+</Frame> -->

apps/demo/src/app.ts

@@ -9,6 +9,31 @@ import { Canvas } from '@nativescript/canvas';
 // 	const canvas = new Canvas();
 // }
 
+const font = new FontFace('Serifa-Bold', 'url(~/fonts/Serifa-Bold.otf)', {
+	weight: 'bold',
+});
+
+document.fonts.add(font);
+
+document.fonts.addEventListener('loading', (event) => {
+	console.log('loading');
+});
+document.fonts.addEventListener('loadingerror', (event) => {
+	console.log('loadingerror');
+});
+document.fonts.addEventListener('loadingdone', (event) => {
+	console.log('loadingdone', event.fontfaces);
+});
+
+document.fonts
+	.load('12px Serifa-Bold')
+	.then((fonts) => {
+		console.log(document.fonts.check('12px Serifa-Bold'));
+	})
+	.catch(() => {
+		console.log('error');
+	});
+
 /*
 
 
@@ -153,7 +178,7 @@ Application.on('launch', (args) => {
 	//require('@nativescript/canvas-polyfill');
 	if (__ANDROID__) {
 		jp.wasabeef.takt.Takt.stock(Utils.android.getApplicationContext()).seat(jp.wasabeef.takt.Seat.TOP_CENTER).color(-65536);
-	} else {
+	} else if (__IOS__) {
 		monitor = GDPerformanceMonitor.new();
 		monitor.startMonitoringWithConfiguration((label) => {
 			label.backgroundColor = UIColor.blackColor;

apps/demo/src/plugin-demos/audio-context.ts

@@ -16,7 +16,7 @@ export function canvasReady(args: EventData) {
 export function playSample(args: EventData) {
 	const page = (<any>args.object).page as Page;
 	const ctx = page.bindingContext as any;
-	const testPath = __IOS__ ? '~/assets/file-assets/audio/sine441stereo.mp3' : '~/assets/file-assets/audio/gs-16b-1c-44100hz.wav';
+	const testPath = __APPLE__ ? '~/assets/file-assets/audio/sine441stereo.mp3' : '~/assets/file-assets/audio/gs-16b-1c-44100hz.wav';
 	const resolvedPath = testPath.startsWith('~/') ? testPath.replace('~/', knownFolders.currentApp().path + '/') : testPath;
 	if (ctx && ctx.playUrl) {
 		const p = ctx.playUrl(resolvedPath);

apps/demo/src/plugin-demos/canvas-three.ts

@@ -8,7 +8,7 @@ export function navigatingTo(args: EventData) {
 }
 
 export function pageLoaded(args) {
-	if (__IOS__) {
+	if (__APPLE__) {
 		if (parseFloat(Device.osVersion) >= 26.0) {
 			args.object.viewController.navigationController.interactiveContentPopGestureRecognizer.enabled = false;
 		}

apps/demo/src/plugin-demos/canvas.ts

@@ -9,7 +9,7 @@ export function navigatingTo(args: EventData) {
 }
 
 export function pageLoaded(args) {
-	if (__IOS__) {
+	if (__APPLE__) {
 		if (parseFloat(Device.osVersion) >= 26.0) {
 			args.object.viewController.navigationController.interactiveContentPopGestureRecognizer.enabled = false;
 		}

apps/demo/src/plugin-demos/canvas.xml

@@ -1,10 +1,10 @@
-<Page loaded="pageLoaded" enableSwipeBackNavigation="false" xmlns:canvas="@nativescript/canvas"  xmlns:ui="@nativescript/canvas/dom/index" xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo" class="page">
+<Page  androidOverflowEdge="top,bottom" loaded="pageLoaded" enableSwipeBackNavigation="false" actionBarHidden="true" xmlns:canvas="@nativescript/canvas"  xmlns:ui="@nativescript/canvas/dom/index" xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo" class="page">
     <Page.actionBar>
         <ActionBar title="Canvas 2.0" icon="" class="action-bar">
         </ActionBar>
     </Page.actionBar>
 
-  <GridLayout rows="*" columns="*" loaded="{{ gridLoaded }}" iosOverflowSafeArea="false" style="width:100%; height:100%">
+  <GridLayout iosOverflowSafeArea="false" rows="*" columns="*" loaded="{{ gridLoaded }}" style="width:100%; height:100%">
 
 
 <!-- <ui:Dom rowSpan="2" colSpan="2" loaded="{{ domLoaded }}">

crates/canvas-2d/Cargo.toml

@@ -26,7 +26,7 @@ raw-window-handle.workspace = true
 bitflags = "2.6.0"
 regex-lite = { workspace = true }
 
-[target.'cfg(any(target_os = "ios", target_os="macos"))'.dependencies]
+[target.'cfg(any(target_os = "ios", target_os="macos", target_os = "visionos"))'.dependencies]
 foreign-types-shared = "0.3.1"
 objc2 = {workspace = true}
 objc2-foundation = { workspace = true }

crates/canvas-2d/src/context/drawing_images/mod.rs

@@ -191,7 +191,7 @@ impl Context {
     }
 
     pub fn draw_image_dx_dy(&mut self, image: &Image, x: f32, y: f32) {
-        #[cfg(any(target_os = "macos", target_os = "ios"))]
+        #[cfg(any(target_os = "macos", target_os = "ios", target_os = "visionos"))]
         let _ = unsafe { objc2_foundation::NSAutoreleasePool::new() };
         #[cfg(feature = "gl")]
         {
@@ -221,7 +221,7 @@ impl Context {
     }
 
     fn draw_image(&mut self, image: &Image, src_rect: impl Into<Rect>, dst_rect: impl Into<Rect>) {
-        #[cfg(any(target_os = "macos", target_os = "ios"))]
+        #[cfg(any(target_os = "macos", target_os = "ios", target_os = "visionos"))]
         let _ = unsafe { objc2_foundation::NSAutoreleasePool::new() };
         #[cfg(feature = "gl")]
         {
@@ -259,7 +259,7 @@ impl Context {
     }
 
     fn draw_image_with_rect(&mut self, image: &Image, dst_rect: impl Into<Rect>) {
-        #[cfg(any(target_os = "macos", target_os = "ios"))]
+        #[cfg(any(target_os = "macos", target_os = "ios", target_os = "visionos"))]
         let _ = unsafe { objc2_foundation::NSAutoreleasePool::new() };
         #[cfg(feature = "gl")]
         {

crates/canvas-2d/src/context/drawing_paths/mod.rs

@@ -12,7 +12,7 @@ impl Context {
         path: Option<&mut Path>,
         fill_rule: Option<FillRule>,
     ) {
-        #[cfg(any(target_os = "macos", target_os = "ios"))]
+        #[cfg(any(target_os = "macos", target_os = "ios", target_os = "visionos"))]
         let _ = unsafe { objc2_foundation::NSAutoreleasePool::new() };
 
         #[cfg(feature = "gl")]

crates/canvas-2d/src/lib.rs

@@ -101,7 +101,7 @@ pub fn bytes_to_data_n32_url(
     encoded_prefix.push_str(format);
     encoded_prefix.push_str(";base64,");
 
-    #[cfg(any(target_os = "ios", target_os = "macos"))]
+    #[cfg(any(target_os = "ios", target_os = "macos", target_os = "visionos"))]
     let fmt = ColorType::BGRA8888;
 
     #[cfg(any(target_os = "android"))]

crates/canvas-c/Cargo.toml

@@ -42,6 +42,17 @@ wgpu-core = { workspace = true, features = ["wgsl", "metal"] }
 wgpu-hal = { workspace = true, features = ["metal"] }
 objc2-metal = { workspace = true }
 
+# visionOS: display-link 0.2 is gated to ios/macos only, so RAF uses a CADisplayLink
+# shim (see src/raf/visionos.rs) built directly on objc2-quartz-core instead.
+[target.'cfg(target_os="visionos")'.dependencies]
+wgpu-core = { workspace = true, features = ["wgsl", "metal"] }
+wgpu-hal = { workspace = true, features = ["metal"] }
+objc2 = { workspace = true, features = ["std"] }
+objc2-foundation = { workspace = true }
+objc2-metal = { workspace = true }
+objc2-quartz-core = { workspace = true, features = ["CADisplayLink", "objc2-core-foundation"] }
+objc2-core-foundation = { workspace = true }
+
 [target.'cfg(target_os="android")'.dependencies]
 ndk = { version = "0.7.0", features = ["bitmap"] }
 wgpu-core = { workspace = true, features = ["wgsl", "vulkan"] }

crates/canvas-c/cbindgen.toml

@@ -21,6 +21,9 @@ mangle.remove_underscores = true
 "target_os = ios" = "TARGET_OS_IOS"
 "target_os = macos" = "TARGET_OS_MACOS"
 "target_os = android" = "TARGET_OS_ANDROID"
+# Apple's <TargetConditionals.h> defines TARGET_OS_VISION (1 on visionOS), so
+# any(ios, visionos) items get declared on both iOS and visionOS builds.
+"target_os = visionos" = "TARGET_OS_VISION"
 
 [enum]
 prefix_with_name = true