Add Web Sockets And Fix RN App (#1)

This PR fixes the RN app and adds web sockets as a package and uses it in the samples

Author: MelbourneDeveloper

examples/mobile/lib/app.dart

@@ -62,13 +62,18 @@ external void _consoleError(JSAny? message);
 /// Register the app with React Native
 void registerMobileApp() {
   _consoleLog('=== registerMobileApp() STARTING ==='.toJS);
+  _consoleLog('=== Checking global.reactNative ==='.toJS);
   try {
+    _consoleLog('=== About to call app() ==='.toJS);
     final appComponent = app();
-    _consoleLog('=== app() created ==='.toJS);
+    _consoleLog('=== app() returned successfully ==='.toJS);
+    _consoleLog('=== appComponent type: ${appComponent.runtimeType} ==='.toJS);
+    _consoleLog('=== About to call registerApp() ==='.toJS);
     registerApp('main', appComponent);
-    _consoleLog('=== registerApp() completed ==='.toJS);
-  } catch (e) {
+    _consoleLog('=== registerApp() completed successfully ==='.toJS);
+  } catch (e, st) {
     _consoleError('=== ERROR in registerMobileApp ==='.toJS);
-    _consoleError(e.toString().toJS);
+    _consoleError('Error: $e'.toJS);
+    _consoleError('Stack: $st'.toJS);
   }
 }

examples/mobile/rn/app.json

@@ -6,7 +6,7 @@
     "orientation": "portrait",
     "icon": "./assets/icon.png",
     "userInterfaceStyle": "light",
-    "newArchEnabled": true,
+    "newArchEnabled": false,
     "splash": {
       "backgroundColor": "#f5f5f5"
     },

examples/mobile/rn/index.js

@@ -1,9 +1,76 @@
-// Load compiled Dart app
+// Heavy diagnostics for debugging
 console.log('=== INDEX.JS STARTING ===');
+console.log('=== Checking globals ===');
+console.log('typeof global:', typeof global);
+console.log('typeof require:', typeof require);
+
+// Import React and React Native FIRST
+console.log('=== Importing React ===');
+const React = require('react');
+console.log('React loaded:', !!React);
+console.log('React.createElement:', typeof React.createElement);
+
+console.log('=== Importing React Native ===');
+const ReactNative = require('react-native');
+console.log('ReactNative loaded:', !!ReactNative);
+console.log('AppRegistry:', typeof ReactNative.AppRegistry);
+console.log('View:', typeof ReactNative.View);
+console.log('Text:', typeof ReactNative.Text);
+
+// Make React and ReactNative available globally for Dart
+// Dart's @JS() looks at 'self' which the node preamble sets up
+console.log('=== Setting up globals for Dart ===');
+global.React = React;
+global.ReactNative = ReactNative;
+global.reactNative = ReactNative;
+
+// Also set on self/this for Dart JS interop
+if (typeof self !== 'undefined') {
+  console.log('Setting on self...');
+  self.React = React;
+  self.ReactNative = ReactNative;
+  self.reactNative = ReactNative;
+}
+// For React Native, also set on globalThis
+if (typeof globalThis !== 'undefined') {
+  console.log('Setting on globalThis...');
+  globalThis.React = React;
+  globalThis.ReactNative = ReactNative;
+  globalThis.reactNative = ReactNative;
+}
+
+console.log('global.React set:', !!global.React);
+console.log('global.reactNative set:', !!global.reactNative);
+console.log('Checking self.React:', typeof self !== 'undefined' ? !!self.React : 'self undefined');
+console.log('Checking globalThis.React:', typeof globalThis !== 'undefined' ? !!globalThis.React : 'globalThis undefined');
+
+// Load compiled Dart app
+console.log('=== Loading Dart app.js ===');
 try {
-  console.log('Loading app.js...');
   require('../build/app.js');
-  console.log('=== APP.JS LOADED ===');
+  console.log('=== APP.JS LOADED SUCCESSFULLY ===');
 } catch (e) {
-  console.error('=== ERROR LOADING APP.JS ===', e);
+  console.error('=== ERROR LOADING APP.JS ===');
+  console.error('Error:', e.message);
+  console.error('Stack:', e.stack);
+
+  // Register a fallback error component
+  console.log('=== Registering fallback error component ===');
+  const { AppRegistry, View, Text } = ReactNative;
+
+  const ErrorApp = () => {
+    return React.createElement(
+      View,
+      { style: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: 'red' } },
+      React.createElement(
+        Text,
+        { style: { color: 'white', fontSize: 18, textAlign: 'center', padding: 20 } },
+        'Error loading Dart app: ' + e.message
+      )
+    );
+  };
+
+  AppRegistry.registerComponent('DartMobile', () => ErrorApp);
 }
+
+console.log('=== INDEX.JS COMPLETE ===');

packages/dart_node_react_native/lib/src/core.dart

@@ -48,10 +48,20 @@ AppRegistry get appRegistry {
   };
 }
 
+@JS('console.log')
+external void _rnCoreLog(JSAny? message);
+
 /// Register the main app component
 void registerApp(String appName, JSFunction component) {
+  _rnCoreLog('=== registerApp() called with appName: $appName ==='.toJS);
+  _rnCoreLog('=== Getting appRegistry ==='.toJS);
+  final registry = appRegistry;
+  _rnCoreLog('=== Got appRegistry ==='.toJS);
+  _rnCoreLog('=== Creating provider function ==='.toJS);
   final provider = (() => component).toJS;
-  appRegistry.callMethod('registerComponent'.toJS, appName.toJS, provider);
+  _rnCoreLog('=== Calling registerComponent ==='.toJS);
+  registry.callMethod('registerComponent'.toJS, appName.toJS, provider);
+  _rnCoreLog('=== registerComponent called successfully ==='.toJS);
 }
 
 /// Create a React Native element

packages/dart_node_ws/lib/src/websocket_types.dart

@@ -71,12 +71,18 @@ class WebSocketClient {
 
   void onClose(CloseHandler handler) => _ws.on(
         'close',
-        ((int code, JSAny reason) => handler((
+        ((int code, JSAny? reason) => handler((
               code: code,
-              reason: (reason as JSString?)?.toDart ?? '',
+              reason: _extractCloseReason(reason),
             ))).toJS,
       );
 
+  String _extractCloseReason(JSAny? reason) => switch (reason) {
+        null => '',
+        final JSString s => s.toDart,
+        _ => reason.toString(),
+      };
+
   void onError(ErrorHandler handler) =>
       _ws.on('error', ((JSAny error) => handler(error)).toJS);
 }