@reactvision/react-viro 2.42.0 → 2.43.1

package/fabric-interop/specs/README.md

@@ -0,0 +1,22 @@
+# TurboModule Specifications
+
+This directory contains TurboModule specifications for the Viro Fabric-Interop layer.
+
+## Files
+
+- **ViroEventsTurboModule.ts**: TurboModule specification for event emission and management in React Native's New Architecture.
+
+## Purpose
+
+These TypeScript files define the interfaces for TurboModules that bridge JavaScript and native code in React Native's New Architecture (Fabric). They are used by the codegen system to generate the appropriate native interfaces.
+
+## Usage
+
+These specs are automatically registered with React Native's TurboModule system and provide type-safe interfaces for:
+
+- Event emission from native to JavaScript
+- JSI callback management  
+- Node and scene event handling
+- TurboModule lifecycle management
+
+The native implementations (iOS `.mm` and Android `.java` files) must conform to these interfaces.

package/fabric-interop/specs/ViroEventsTurboModule.ts

@@ -0,0 +1,27 @@
+/**
+ * ViroEventsTurboModule.ts
+ * TurboModule specification for Viro event emission
+ *
+ * This module provides proper event emission for JSI callbacks
+ * in React Native's New Architecture (Fabric + TurboModules)
+ */
+
+import type { TurboModule } from "react-native";
+import { TurboModuleRegistry } from "react-native";
+
+export interface Spec extends TurboModule {
+  // Event listener management
+  addListener(eventName: string): void;
+  removeListeners(count: number): void;
+
+  // Event emission methods
+  emitJSICallback(callbackId: string, eventData: Object): void;
+  emitNodeEvent(nodeId: string, eventName: string, eventData: Object): void;
+  emitSceneEvent(sceneId: string, eventName: string, eventData: Object): void;
+
+  // Utility methods
+  isEventSystemReady(): boolean;
+  getActiveListenerCount(): number;
+}
+
+export default TurboModuleRegistry.getEnforcing<Spec>("ViroEvents");

package/fabric-interop/test/BasicFunctionalityTest.tsx

@@ -0,0 +1,243 @@
+/**
+ * BasicFunctionalityTest - Integration test for fabric-interop layer
+ *
+ * This test verifies the core functionality of the fabric-interop layer
+ * by testing basic operations like node creation, scene management, and events.
+ */
+
+import React, { useEffect, useState } from "react";
+import { View, Text, StyleSheet, Alert } from "react-native";
+import { ViroFabricContainer } from "../ViroFabricContainer";
+import { ViroScene } from "../components/ViroScene";
+import { ViroBox } from "../components/ViroBox";
+import { ViroText } from "../components/ViroText";
+import {
+  isViroJSIAvailable,
+  createScene,
+  createNode,
+  getMemoryStats,
+} from "../NativeViro";
+
+interface TestResult {
+  name: string;
+  passed: boolean;
+  error?: string;
+}
+
+export const BasicFunctionalityTest: React.FC = () => {
+  const [testResults, setTestResults] = useState<TestResult[]>([]);
+  const [isRunning, setIsRunning] = useState(false);
+  const [allTestsPassed, setAllTestsPassed] = useState<boolean | null>(null);
+
+  useEffect(() => {
+    runTests();
+  }, []);
+
+  const addTestResult = (name: string, passed: boolean, error?: string) => {
+    setTestResults((prev) => [...prev, { name, passed, error }]);
+  };
+
+  const runTests = async () => {
+    setIsRunning(true);
+    setTestResults([]);
+
+    try {
+      // Test 1: JSI Availability
+      const jsiAvailable = isViroJSIAvailable();
+      addTestResult(
+        "JSI Available",
+        jsiAvailable,
+        jsiAvailable ? undefined : "JSI bridge not available"
+      );
+
+      if (jsiAvailable) {
+        // Test 2: Scene Creation
+        try {
+          createScene("test_scene", "scene", { background: [0, 0, 0] });
+          addTestResult("Scene Creation", true);
+        } catch (error) {
+          addTestResult("Scene Creation", false, `Error: ${error}`);
+        }
+
+        // Test 3: Node Creation
+        try {
+          createNode("test_box", "box", {
+            position: [0, 0, -1],
+            scale: [0.5, 0.5, 0.5],
+          });
+          addTestResult("Node Creation", true);
+        } catch (error) {
+          addTestResult("Node Creation", false, `Error: ${error}`);
+        }
+
+        // Test 4: Memory Stats
+        try {
+          const stats = getMemoryStats();
+          const hasStats = stats && typeof stats === "object";
+          addTestResult(
+            "Memory Stats",
+            !!hasStats,
+            hasStats ? undefined : "No memory stats returned"
+          );
+        } catch (error) {
+          addTestResult("Memory Stats", false, `Error: ${error}`);
+        }
+
+        // Test 5: Component Rendering (requires actual container)
+        // This will be tested by the component tree below
+        addTestResult(
+          "Component Rendering",
+          true,
+          "Testing via component tree"
+        );
+      }
+
+      // Calculate overall result
+      setTimeout(() => {
+        setIsRunning(false);
+        const passed = testResults.every((result) => result.passed);
+        setAllTestsPassed(passed);
+
+        if (passed) {
+          Alert.alert("Tests Passed", "All basic functionality tests passed!");
+        } else {
+          const failed = testResults.filter((r) => !r.passed);
+          Alert.alert(
+            "Tests Failed",
+            `${failed.length} test(s) failed. Check the log for details.`
+          );
+        }
+      }, 1000);
+    } catch (error) {
+      setIsRunning(false);
+      addTestResult("Test Execution", false, `Fatal error: ${error}`);
+      setAllTestsPassed(false);
+    }
+  };
+
+  const handleInitialized = (success: boolean) => {
+    console.log("ViroFabricContainer initialized:", success);
+    addTestResult(
+      "Container Initialization",
+      success,
+      success ? undefined : "Container failed to initialize"
+    );
+  };
+
+  return (
+    <View style={styles.container}>
+      <Text style={styles.title}>Fabric-Interop Basic Functionality Test</Text>
+
+      <View style={styles.statusContainer}>
+        <Text style={styles.statusText}>
+          Status:{" "}
+          {isRunning
+            ? "Running..."
+            : allTestsPassed === null
+              ? "Not started"
+              : allTestsPassed
+                ? "PASSED"
+                : "FAILED"}
+        </Text>
+      </View>
+
+      <View style={styles.resultsContainer}>
+        <Text style={styles.resultsTitle}>Test Results:</Text>
+        {testResults.map((result, index) => (
+          <View key={index} style={styles.resultItem}>
+            <Text
+              style={[
+                styles.resultText,
+                { color: result.passed ? "green" : "red" },
+              ]}
+            >
+              {result.passed ? "✓" : "✗"} {result.name}
+            </Text>
+            {result.error && (
+              <Text style={styles.errorText}>{result.error}</Text>
+            )}
+          </View>
+        ))}
+      </View>
+
+      <View style={styles.viroContainer}>
+        <ViroFabricContainer
+          style={styles.viroFabric}
+          arEnabled={false}
+          debug={true}
+          onInitialized={handleInitialized}
+        >
+          <ViroScene>
+            <ViroBox
+              position={[0, 0, -1]}
+              scale={[0.3, 0.3, 0.3]}
+              materials={["test_material"]}
+            />
+            <ViroText text="Test Scene" position={[0, 0.5, -1]} />
+          </ViroScene>
+        </ViroFabricContainer>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    padding: 20,
+    backgroundColor: "#f0f0f0",
+  },
+  title: {
+    fontSize: 18,
+    fontWeight: "bold",
+    textAlign: "center",
+    marginBottom: 20,
+  },
+  statusContainer: {
+    backgroundColor: "#e0e0e0",
+    padding: 10,
+    borderRadius: 5,
+    marginBottom: 20,
+  },
+  statusText: {
+    fontSize: 16,
+    fontWeight: "bold",
+    textAlign: "center",
+  },
+  resultsContainer: {
+    backgroundColor: "#ffffff",
+    padding: 15,
+    borderRadius: 5,
+    marginBottom: 20,
+    maxHeight: 200,
+  },
+  resultsTitle: {
+    fontSize: 16,
+    fontWeight: "bold",
+    marginBottom: 10,
+  },
+  resultItem: {
+    marginBottom: 8,
+  },
+  resultText: {
+    fontSize: 14,
+    fontWeight: "bold",
+  },
+  errorText: {
+    fontSize: 12,
+    color: "#666",
+    marginLeft: 20,
+    marginTop: 2,
+  },
+  viroContainer: {
+    flex: 1,
+    backgroundColor: "#000000",
+    borderRadius: 5,
+    overflow: "hidden",
+  },
+  viroFabric: {
+    flex: 1,
+  },
+});
+
+export default BasicFunctionalityTest;

package/fabric-interop/tsconfig.json

@@ -0,0 +1,38 @@
+{
+  "compilerOptions": {
+    "target": "es2018",
+    "module": "commonjs",
+    "lib": ["es2018"],
+    "declaration": true,
+    "declarationMap": true,
+    "sourceMap": true,
+    "outDir": "./dist",
+    "rootDir": "./",
+    "strict": false,
+    "moduleResolution": "node",
+    "baseUrl": "./",
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "jsx": "react-native",
+    "allowSyntheticDefaultImports": true,
+    "noImplicitAny": false,
+    "noEmitOnError": false,
+    "paths": {
+      "*": ["*", "components/*"]
+    }
+  },
+  "include": [
+    "index.ts",
+    "ViroFabricContainer.tsx",
+    "NativeViro.ts",
+    "components/**/*",
+    "global.d.ts"
+  ],
+  "exclude": [
+    "node_modules",
+    "dist",
+    "**/__tests__/*"
+  ]
+}

package/fabric.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Type definitions for Viro React Native Fabric components
+ */
+
+export * from "./fabric-interop";

package/fabric.ts

@@ -0,0 +1,14 @@
+/**
+ * Viro React Native - Fabric (New Architecture) Components
+ *
+ * This entry point provides access to Viro components that are compatible with
+ * React Native's New Architecture (Fabric). Use these components when your app
+ * has the New Architecture enabled.
+ *
+ * @example
+ * ```
+ * import { ViroARScene, Viro3DObject } from '@reactvision/react-viro/fabric';
+ * ```
+ */
+
+export * from "./fabric-interop";

package/ios/ViroReact.podspec

@@ -4,16 +4,56 @@ package = JSON.parse(File.read(File.join(__dir__, '../package.json')))
 
 Pod::Spec.new do |s|
   s.name                = 'ViroReact'
-  s.version             = '1.0'
-  s.summary             = 'Test description'
-  s.source              = { :http => 'https://s3-us-west-2.amazonaws.com/viro-docs/ViroReact.tar.gz'}
-  s.source_files        = 'dist/include'
-  s.public_header_files = 'dist/include/*.h'
-  s.vendored_libraries  = 'dist/lib/libViroReact.a'
-  s.homepage            = 'http://viromedia.com'
-  s.license             = {:type => 'Copyright', :text => "Copyright 2018 ViroMedia, Inc" }
-  s.author              = 'Viro Media'
+  s.version             = package['version']
+  s.summary             = 'Viro React Native library for AR/VR applications'
+  s.source              = { :git => 'https://github.com/ReactVision/viro.git', :tag => "v#{s.version}" }
+  s.homepage            = 'https://github.com/ReactVision/viro'
+  s.license             = { :type => 'MIT', :file => '../LICENSE' }
+  s.author              = 'ReactVision'
   s.requires_arc        = true
-  s.platform            = :ios, '10.0'
-  s.dependency 'React'
+  s.platform            = :ios, '12.0'
+  s.ios.deployment_target = '12.0'
+  
+  # Base source files (always included)
+  s.source_files        = 'ViroReact/**/*.{h,m,mm}', 'ViroFabric/**/*.{h,m,mm}'
+  s.public_header_files = 'ViroReact/**/*.h', 'ViroFabric/**/*.h'
+  
+  # Include dist files if they exist (for release builds)
+  if File.exist?(File.join(__dir__, 'dist/include'))
+    s.source_files += ', dist/include'
+    s.public_header_files += ', dist/include/*.h'
+  end
+  
+  if File.exist?(File.join(__dir__, 'dist/lib/libViroReact.a'))
+    s.vendored_libraries = 'dist/lib/libViroReact.a'
+  end
+  
+  # React Native dependencies
+  s.dependency 'React-Core'
+  
+  # Fabric dependencies
+  s.dependency 'React-RCTFabric'
+  s.dependency 'React-Fabric'
+  s.dependency 'React-FabricComponents'
+  
+  # Fabric-specific build configuration
+  s.pod_target_xcconfig = { 
+    'CLANG_CXX_LANGUAGE_STANDARD' => 'c++17',
+    'HEADER_SEARCH_PATHS' => [
+      '"$(PODS_TARGET_SRCROOT)/ViroFabric"',
+      '"$(PODS_TARGET_SRCROOT)/ViroReact"',
+      '"$(PODS_TARGET_SRCROOT)/dist/include"',
+      '"$(PODS_ROOT)/Headers/Public"',
+      '"$(PODS_ROOT)/Headers/Public/ViroKit"',
+      '"$(PODS_ROOT)/ViroKit/dist/include"',
+      '"$(PODS_ROOT)/ViroKit/Headers"'
+    ].join(' '),
+    'GCC_PREPROCESSOR_DEFINITIONS' => '$(inherited) RCT_NEW_ARCH_ENABLED=1',
+    'OTHER_CPLUSPLUSFLAGS' => '$(inherited) -std=c++17'
+  }
+  
+  # User target configuration for consumers
+  s.user_target_xcconfig = {
+    'HEADER_SEARCH_PATHS' => '"$(PODS_ROOT)/ViroReact/ViroFabric"'
+  }
 end

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@reactvision/react-viro",
-  "main": "dist/index.js",
-  "module": "dist/index.js",
-  "types": "dist/index.d.ts",
-  "version": "2.42.0",
+  "main": "fabric-interop/dist/index.js",
+  "module": "fabric-interop/dist/index.js",
+  "types": "fabric-interop/dist/index.d.ts",
+  "version": "2.43.1",
   "license": "MIT",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -12,22 +12,28 @@
     "type": "git",
     "url": "git+ssh://git@github.com/ReactVision/viro.git"
   },
-  "description": "Maintained version of react-viro",
+  "description": "Maintained version of react-viro - New Architecture (Fabric) required",
   "scripts": {
     "start": "echo 'I dont think you meant to run npm start here.'",
     "test": "jest",
     "tsc": "tsc",
     "prebuild": "node -p \"'export const VIRO_VERSION = ' + JSON.stringify(require('./package.json').version) + ';'\" > components/Utilities/ViroVersion.ts",
-    "build": "tsc && npm run copy-files",
+    "build": "cd fabric-interop && npm run build",
+    "build:legacy": "tsc && npm run copy-files",
+    "build:all": "npm run build && npm run build:legacy",
     "bundle": "./prepare_release.sh",
     "copy-files": "cp -r ./components/Resources/ ./dist/components/Resources/",
-    "clean": "rm -rf ./dist/ *.tgz node_modules/",
+    "clean": "rm -rf ./dist/ *.tgz node_modules/ fabric-interop/dist/",
     "release": "release-it",
-    "after:release": "./prepare_release.sh"
+    "after:release": "./prepare_release.sh",
+    "prepare": "npm run build"
   },
   "peerDependencies": {
-    "expo": "52.0.30",
-    "react-native": "0.76.0"
+    "expo": "~52.0.43",
+    "react-native": ">=0.76.9"
+  },
+  "engines": {
+    "react-native": ">=0.76.9"
   },
   "peerDependenciesMeta": {
     "expo": {
@@ -38,8 +44,15 @@
     "index.d.ts",
     "index.js",
     "index.ts",
+    "fabric.ts",
+    "fabric.d.ts",
+    "dynamic-index.ts",
+    "dynamic-index-source.d.ts",
     "components",
     "dist",
+    "fabric-interop",
+    "scripts",
+    "examples",
     "app.plugin.js",
     "android/react_viro",
     "android/viro_renderer",
@@ -52,7 +65,7 @@
   ],
   "dependencies": {
     "@expo/config-plugins": "^9.0.14",
-    "react": "^18.3.1",
+    "react": "18.3.1",
     "react-native-gradle-plugin": "^0.71.19"
   },
   "devDependencies": {
@@ -60,21 +73,21 @@
     "@babel/preset-env": "^7.25.3",
     "@babel/preset-typescript": "^7.26.0",
     "@jest/globals": "^29.7.0",
-    "@react-native-community/cli": "15.0.1",
-    "@react-native-community/cli-platform-android": "15.0.1",
-    "@react-native-community/cli-platform-ios": "15.0.1",
-    "@react-native/babel-preset": "0.77.0",
-    "@react-native/eslint-config": "0.77.0",
-    "@react-native/metro-config": "0.77.0",
-    "@react-native/typescript-config": "0.77.0",
+    "@react-native-community/cli": "^15.0.1",
+    "@react-native-community/cli-platform-android": "^15.0.1",
+    "@react-native-community/cli-platform-ios": "^15.0.1",
+    "@react-native/babel-preset": "^0.77.0",
+    "@react-native/eslint-config": "^0.77.0",
+    "@react-native/metro-config": "^0.77.0",
+    "@react-native/typescript-config": "^0.77.0",
     "@types/babel__core": "^7.20.5",
     "@types/node": "^22.13.1",
     "@types/react": "^18.3.18",
     "@types/react-native": "^0.73.0",
     "babel-jest": "^29.7.0",
-    "expo": "52.0.30",
+    "expo": ">=52.0.0",
     "jest": "^29.7.0",
-    "react-native": "0.76.0",
+    "react-native": "0.74.7 || 0.75.5 || 0.76.9",
     "release-it": "^17.1.1",
     "ts-node": "^10.9.2",
     "typescript": "^5.3.0"

package/scripts/copy-types.js

@@ -0,0 +1,46 @@
+/**
+ * Script to copy index.d.ts to dynamic-index.d.ts and add global declarations
+ */
+
+const fs = require("fs");
+const path = require("path");
+
+// Paths
+const indexDtsPath = path.join(__dirname, "../dist/index.d.ts");
+const dynamicIndexDtsPath = path.join(__dirname, "../dist/dynamic-index.d.ts");
+
+// Read the index.d.ts file
+let indexDtsContent = fs.readFileSync(indexDtsPath, "utf8");
+
+// Create the dynamic-index.d.ts content
+const dynamicIndexDtsContent = `/**
+ * Type definitions for Viro React Native with dynamic architecture detection
+ *
+ * This file provides type definitions for the dynamic architecture detection.
+ * At runtime, either the legacy or Fabric implementation will be used,
+ * but for TypeScript purposes, we use the legacy implementation's types.
+ */
+
+// Add type declarations for global variables used in New Architecture detection
+declare global {
+  var nativeFabricUIManager: any;
+  var __turboModuleProxy: any;
+}
+
+// Export all types from the legacy implementation
+${indexDtsContent}
+`;
+
+// Write the dynamic-index.d.ts file
+fs.writeFileSync(dynamicIndexDtsPath, dynamicIndexDtsContent);
+
+// Also write to the source file for reference
+const dynamicIndexSourceDtsPath = path.join(
+  __dirname,
+  "../dynamic-index-source.d.ts"
+);
+fs.writeFileSync(dynamicIndexSourceDtsPath, dynamicIndexDtsContent);
+
+console.log(
+  "Successfully copied types from index.d.ts to dynamic-index.d.ts and dynamic-index-source.d.ts"
+);