☂️ React Native Compatibility Tracker 2.0

[leotm]

• ☂️ React Native Compatibility Tracker #1 (ses@0.15.9) continued with ses@0.18.1 and beyond 🚀

Priority matrix

• SES: module / lockdown shim
• JS engine: JSC* / V8 (debug) / Hermes / more
• JS transformer: Babel / SWC, react-codemod
• JS features: BigInt / Promises / etc, libs
• RN version: <=0.66.x / 0.66.5* metamask-mobile / 0.69.x* / 0.70.x / 0.71.x metamask-mobile / 0.72.x / 0.73.x
  • min: platform :ios, '11.0' 0.69+: 12.4
• RN bundler: Metro / Re.Pack / rn-esbuild, bundling / sourcemaps
• RN platform: Android / iOS / rn-web / rn-macos / rn-windows
• RN variant* mode: debug / release
• RN arch: old / new**
• SES integration: entry file / RN core

* undergoing retirement
** 3rd party libs not yet mature, but issues prioritised

Tracker

• RN 0.66.5 + npm SES 0.18.1: Babel fails to ignore ses.cjs #10
• RN + SES: TypeError: undefined is not a function (near '...globalThis.process.on...') #11
  • iOS JSC/V8: Functional RN 0.66.5 app with Promise warnings only 🎉 (no errors seen prev in ses@0.15.9)
  • RN/MMM + SES: 20 Promise warnings #13 expected
  • [V8] RN 0.66.5 + SES 0.18.1: 31 warnings #14 expected
• RN 0.66.5 + RN CLI: PhaseScriptExecution error (not with Xcode) #15
• RN 0.66.5 + SES 0.18.1: Error failed to del intrinsics.%AsyncGenerator%.length #16
  • Prev ses@0.15.9 Promise errors Proof of Concept Insights - Removing the Promise Polyfill at RN #5
  • React Native Incompatibility: "failed to delete intrinsics.[object Object]syncGenerator%6length" endojs/endo#660
  • • Non-standard ownProperty length on AsyncGenerator and AsyncFunctionPrototype react-native-community/jsc-android-buildscripts#181 we're no longer using android-jsc but Hermes instead
  • Add length (number) prop to whitelist AsyncGenerator and AsyncFunctionPrototype endojs/endo#1511
• RN + SES: TypeError: undefined is not a function (near '...globalThis.process.on...') #11
  • we use rn-nodeify in mm-mobile so this isn't an issue
  • but vanilla RN shouldn't need a Node process shim
  • nb: trusted shim valid cases for deps reflect-metadata, pos Sentry
• Create scripts for debug/release Android/iOS building/bundling/running
• QA [RN 0.66.5 + SES 0.18.2patched] bundling and sourcemap gen
  • iOS: debug-mode / release-mode (prod pods) runtime
  • Android: debug-mode / release-mode runtime
  • iOS: Generate and check debug/release bundles with sourcemaps
  • Android: Generate and check debug/release bundles with sourcemaps
  • SES warnings only
• Proof of Concept Insights - lockdown() options #3
• Proof of Concept Insights - Removing the Promise Polyfill at RN #5
• [RN 0.71.6+, SES module / lockdown shim, 0.18.1+, Android/iOS, JSC/V8] with Promises
  • iOS JSC: 29 warnings
    • Promises: TypeError: Promise constructor's argument is not a function
  • iOS JSC shim: TypeError: undefined is not an object (evaluating 'getPrototypeOf(AsyncGeneratorPrototype)')
  • iOS V8: 32 warnings
    • Promises: TypeError: Promise constructor's argument is not a function
  • iOS V8 shim: TypeError: Cannot convert undefined or null to object debug via Chrome
  • iOS JSC/V8 BigInt: 1n+2n, BigInt(1) + BigInt(2)
  • Android JSC BigInt: 1n [SyntaxError: No identifiers allowed directly after numeric literal] x2 no stack x2, BigInt(1) + BigInt(2) ReferenceError: Can't find variable: BigInt
    • big-integer shim testing on android-jsc MetaMask/metamask-mobile#6221
    • feat: Upgrade jsc-android from 250230.2.1 to 294992.0.0 (@next) for BigInt MetaMask/metamask-mobile#6314
  • Android V8 BigInt: 1n+2n, BigInt(1) + BigInt(2)
  • Android JSC: 20 warnings
    • Promises: TypeError: Promise constructor's argument is not a function
  • Android V8: same as iOS
  • Android JSC shim: same as iOS (stacktrace)
  • Android V8 shim: same as iOS
• metamask-mobile RN 0.67 support RN 0.71 support
  • as seen in (4) past issues
  • as seen in [WIP] SES lockdown() - LavaMoat Compatibility MetaMask/metamask-mobile#3794
  • React Native Incompatibility: TypeError: (0 , _getPrototypeOf2.default) is not a function endojs/endo#699 solved since below
    • Proof of Concept Insights - Removing Babel Plugins #4 getPrototypeOf only
  • iOS JSC: UI TypeError: undefined is not an object (evaluating 'state.engine.backgroundState.NetworkController.network') w/o polyfillPromise (prev: immediate error, fewer warnings) 22 warnings, 3->6 errors (and remaining libraries)
  • iOS V8: (prev UI TypeError: Cannot read properties of undefined (reading 'network')), 3->5 errors, 3 Sentry warnings, SES intrinsics removed warnings below (and remaining libraries)
    • 18-20 warnings (w/o polyfillPromise, prev: immediate error): 4-6 Object, 2 Reflect, 7 %ArrayPrototype%, 2 %StringPrototype%, 1 %RegExpPrototype%, 3 %TypedArrayPrototype%
    • 18 warnings (w polyfillPromise): 7 Promise, 4 %PromisePrototype%; 7 undeletable tolerated (4 Promise.x.prototype, 3 %PromisePrototype%.x.prototype)
    • 2 errors stemming from redux-persist
    • SES_UNHANDLED_REJECTION: missing Exception error msg
  • RN upgrade from 0.66.5 to 0.71.6
    • Upgrade/react native/0.71.6 (v8 Android-only) MetaMask/metamask-mobile#6119
    • Upgrade React Native to 0.71.6 MetaMask/metamask-mobile#6220
  • feat: SES lockdown v0.18.8 (iOS JSC) MetaMask/metamask-mobile#6586
  • Deprecate JSC support, unless for backward-compat only
• RN 0.72.0-rc.1 + RN CLI: ❌ Installing (RubyGems) Bundler #17
• Close ☂️ React Native Compatibility Tracker #1
• nb: npx react-native@latest init RN0720RC0 --version 0.72.0-rc.0 now requires Node 16 to init
• Hermes support
  • Feature Request: local eval for SES (Secure EcmaScript) support facebook/hermes#957 not happening anytime soon
  • Feature Request: with statement for SES (Secure EcmaScript) support facebook/hermes#1056 not happening anytime soon
  • SES lockdown Hermes compat tracking issue endojs/endo#1891 codemod
    • feat: SES lockdown v1.1.0 on Android (Hermes) MetaMask/metamask-mobile#8009
    • feat: SES lockdown v1.0.0 (Android Hermes) MetaMask/metamask-mobile#8161
• QA: [RN 0.72.x + SES/lockdown 0.18.x + Android/iOS + Hermes + debug/release + Bundling + Promises]
• fix: regenerator-runtime and reenable SES (v1.1.0) on iOS (JSC) MetaMask/metamask-mobile#8033
• Road to 0.73.0 reactwg/react-native-releases#64
  • nb: Update Node.js to v16 in all RN packages facebook/react-native#37073
• Build/compiler time protection
  • policy generation (RN android/ios deps aren't within LavaMoat JS ecosystem)
  • allow-list for RN native deps
  • Building our RN app under lockdown
  • Build our RN app under LavaMoat Node
• Runtime protection
  • Running under lockdown above ^
  • Runtime protection under LavaMoat Node
• Close React Native Compat Tracking Issue endojs/endo#661
• React Native New Architecture support
  • RN 0.7x.x + npm SES 0.18.x
    • Add Discussion post
  • metamask-mobile integration
• Sample/demo repo's
  • react-native-lavamoat-lockdown repo (since this is beyond /docs now) w CI matrix? lavamoat/RN/node vers
  • migration sample repo like RNNewArchitectureApp
• Official integration into React Native core?
  • After no more warnings milestone
• Detect if ses is being transformed endojs/endo#662
• allow-scripts setup for yarn berry LavaMoat#349
  • nb: https://yarnpkg.com/advanced/lifecycle-scripts
• Bundlers support
  • Metro
  • Re.Pack (Webpack-based) support
  • ESBuild support, Not flexible enough atm
    • from sync this morn (9/3/23), maybe viable
• Transformers support
  • Babel
  • SWC
• Static transformers support
  • react-codemod
• React Native backward-compat pre-0.66.5
  • React Native Releases > Releases Support Policy > which-versions-are-currently-supported
• Expo support (babel-preset-expo)
  • extends metro-react-native-babel-preset
• Further JS engine support
  • On RN New Arch (JSI)
• 🚀 Breaking changes for Yarn 4 yarnpkg/berry#3591
• Future-proofing
  • RN Nightlies
  • test262.report
  • react-native-template-new-architecture
• endojs/Jessie for RN
• Cross-platform support
  • Flutter
  • KMM

metamask-mobile

• LogBox.ignoreLogs([...])
• deps (Sentry, eth...)
• e2e (Detox/(Appium))
  • 4.3. Enabling unencrypted traffic for Detox

    For Detox to work, its native code running on Android device has to be able to connect to the Node.js host running tests. It sends an unencrypted HTTP traffic via virtual localhost interface, that's why you need to create a new file which adds a couple of exceptions to the security rules.
    If properly configured, this approach in no way compromises the security settings of your app. For more details, refer to Android’s security-config guide and the dedicated article in the Android developers blog.

Notes

RN 0.66.5 types (globals.d.ts) (js global objects)

android-jsc (fbarchive) (debug-mode, release-mode)
"jsc-android": "^250231.0.0" (WebKitGTK 2.26.1) pre-RN 0.72
jscFlavor = 'org.webkit:android-jsc:+' (or jscFlavor = 'org.webkit:android-jsc-intl:+')
pre-release: v294992.0.0 (WebKitGTK 2.36.3) (only jscFlavor = 'org.webkit:android-jsc-intl:+')
Moved out of package.json in 0.72-stable | RN Monorepo | Migrate to package

v8-android (debug-mode: Remote JS Debugging, opt-in: release-mode)
v11.110.1 (jit/aot, intl/nointl)

Simplified model of moving parts (todo: interactive diagram)

javascript-environment: RN JS engines (3), transforms (~37), polyfills (11)

JavaScriptCore does not use JIT due to the absence of writable executable memory in iOS apps

When using Chrome debugging, all JavaScript code runs within Chrome itself, communicating with native code via WebSockets. Chrome uses V8 as its JavaScript engine

RN JS features per engine/platform table (excluding with)

metro-react-native-babel-preset v0.76.0
facebook/metro@e5950ae: [Breaking]: Increase minimum Node version from 14 to 16
package.json: 36 plugins
main.js: 23 extraPlugins.push
babel > packages

tc39: terminology glossary

Node (debug via cli-doctor)

• Metro bundle (+ sourcemaps)
• iOS (Codegen)
  • ☂️ Improving Codegen facebook/react-native#34872
  • Xcode: find-node-for-xcode.sh, react_native_pods_utils/script_phases.sh
• Android
  • Gradle: android/app/build.gradle
• Jest
• Detox

https://drive.google.com/file/d/1mgKxKlpgjm2_KX4TP-G7hUti-JKjR2Xv/view

https://tmikov.blogspot.com/2023/09/how-to-speed-up-micro-benchmark-300x.html

https://www.youtube.com/watch?v=q-xKYA0EO-c

Join the convo 🌍

• https://app.element.io/#/room/#hardenedreactnative:matrix.org
• https://ocapjs.org