merge platform files

shared/app/global-errors.tsx

@@ -61,7 +61,7 @@ const useData = () => {
     if (error) {
       setExpandedError(error)
     }
-    if (!C.isMobile) {
+    if (!isMobile) {
       clearCountdown()
     }
   }
@@ -74,14 +74,14 @@ const useData = () => {
     const id = setTimeout(
       () => {
         setDetails(detailsForError(error))
-        if (!C.isMobile) {
+        if (!isMobile) {
           setSummary(summaryForError(error))
         }
       },
       error ? 0 : 7000
     ) // if it's set, do it immediately, if it's cleared set it in a bit
     const newError = !!error
-    if (!C.isMobile) {
+    if (!isMobile) {
       if (countdownTimerRef.current) clearTimeout(countdownTimerRef.current)
       countdownTimerRef.current = undefined
       if (newError) {
@@ -121,7 +121,7 @@ const GlobalError = () => {
   }
 
   if (daemonError) {
-    if (C.isMobile) {
+    if (isMobile) {
       return null
     }
     if (ignoreDisconnectOverlay) {
@@ -144,7 +144,7 @@ const GlobalError = () => {
     )
   }
 
-  if (C.isMobile) {
+  if (isMobile) {
     return (
       <Kb.Box2
         direction="vertical"

shared/app/index.native.tsx

@@ -4,7 +4,7 @@ import {useConfigState} from '@/stores/config'
 import {useShellState} from '@/stores/shell'
 import * as Kb from '@/common-adapters'
 import * as React from 'react'
-import Main from './main.native'
+import Main from './main'
 import {KeyboardProvider} from 'react-native-keyboard-controller'
 import Animated, {ReducedMotionConfig, ReduceMotion} from 'react-native-reanimated'
 import {AppRegistry, AppState, Appearance, Keyboard} from 'react-native'
@@ -20,7 +20,7 @@ import {useUnmountAll} from '@/util/debug-react'
 import {darkModeSupported, guiConfig} from 'react-native-kb'
 import {install} from 'react-native-kb'
 import * as DarkMode from '@/stores/darkmode'
-import {initPlatformListener, onEngineConnected, onEngineDisconnected, onEngineIncoming} from '@/constants/init/index.native'
+import {initPlatformListener, onEngineConnected, onEngineDisconnected, onEngineIncoming} from '@/constants/init/index'
 import logger from '@/logger'
 
 logger.info('INIT App index module load')

shared/app/main.native.tsx → shared/app/main.tsx

@@ -1,14 +1,29 @@
 import Router from '@/router-v2/router'
-import {PortalHost} from '@/common-adapters/portal.native'
 import ResetModal from '../login/reset/modal'
 import GlobalError from './global-errors'
 import OutOfDate from './out-of-date'
-import RuntimeStats from './runtime-stats'
-import {BottomSheetModalProvider} from '@gorhom/bottom-sheet'
 import {FsStatusProvider} from '@/fs/common/status'
 import {SystemFileManagerIntegrationProvider} from '@/fs/common/sfmi'
+import RemoteProxies from '../desktop/remote/proxies.desktop'
+import {PortalHost} from '@/common-adapters/portal.native'
+import RuntimeStats from './runtime-stats'
+import {BottomSheetModalProvider} from '@gorhom/bottom-sheet'
+
+const DesktopMain = function DesktopMain() {
+  return (
+    <FsStatusProvider>
+      <SystemFileManagerIntegrationProvider>
+        <RemoteProxies />
+        <Router />
+        <ResetModal />
+        <GlobalError />
+        <OutOfDate />
+      </SystemFileManagerIntegrationProvider>
+    </FsStatusProvider>
+  )
+}
 
-const Main = () => {
+const NativeMain = () => {
   return (
     <FsStatusProvider>
       <SystemFileManagerIntegrationProvider>
@@ -25,4 +40,4 @@ const Main = () => {
   )
 }
 
-export default Main
+export default isMobile ? NativeMain : DesktopMain

shared/app/out-of-date.tsx

@@ -27,7 +27,7 @@ const OutOfDate = () => {
   const [mobileCritical, setMobileCritical] = React.useState(false)
 
   React.useEffect(() => {
-    if (!C.isMobile) {
+    if (!isMobile) {
       return
     }
 
@@ -58,8 +58,8 @@ const OutOfDate = () => {
     }
   }, [])
 
-  const critical = C.isMobile ? mobileCritical : outOfDate.critical
-  const message = C.isMobile ? mobileMessage : outOfDate.message
+  const critical = isMobile ? mobileCritical : outOfDate.critical
+  const message = isMobile ? mobileMessage : outOfDate.message
 
   return !critical ? null : (
     <Kb.Box2 direction="vertical" fullWidth={true} gap="small" style={styles.container}>
@@ -69,7 +69,7 @@ const OutOfDate = () => {
       <Kb.Box2 direction="vertical" style={styles.messageContainer} fullWidth={true}>
         <Kb.Markdown>{message}</Kb.Markdown>
       </Kb.Box2>
-      {Kb.Styles.isMobile && <Kb.Button label="Update" onClick={openAppStore} />}
+      {isMobile && <Kb.Button label="Update" onClick={openAppStore} />}
     </Kb.Box2>
   )
 }

shared/app/runtime-stats.tsx

@@ -182,11 +182,11 @@ const LogStats = (props: {num?: number}) => {
       direction="vertical"
       style={{
         backgroundColor: 'rgba(0,0,0, 0.3)',
-        minHeight: (Kb.Styles.isMobile ? 12 : 20) * maxBuckets,
+        minHeight: (isMobile ? 12 : 20) * maxBuckets,
       }}
       fullWidth={true}
     >
-      {!Kb.Styles.isMobile && (
+      {!isMobile && (
         <Kb.Text type="BodyTinyBold" style={styles.stat}>
           Logs
         </Kb.Text>
@@ -399,7 +399,7 @@ const RuntimeStatsMobile = ({stats}: Props) => {
 const RuntimeStats = () => {
   const stats = useConfigState(s => s.runtimeStats)
   return stats ? (
-    Kb.Styles.isMobile ? (
+    isMobile ? (
       <RuntimeStatsMobile stats={stats} />
     ) : (
       <RuntimeStatsDesktop stats={stats} />

shared/babel.config.js

@@ -1,21 +1,41 @@
 const reactCompilerPlugin = 'babel-plugin-react-compiler'
 const moduleResolverPlugin = ['module-resolver', {alias: {'@': './'}}]
 
-const makeElectronConfig = isTest => ({
+// Replaces platform globals (isMobile, isElectron, isAndroid, isIOS) with boolean
+// literals at Babel transform time. This lets Metro's constant-folding-plugin DCE
+// dead platform branches in production bundles.
+const makePlatformPlugin = defines => babel => {
+  const {types: t} = babel
+  return {
+    name: 'inline-platform-globals',
+    visitor: {
+      Identifier(path) {
+        const {name} = path.node
+        if (!(name in defines) || !path.isReferencedIdentifier()) return
+        if (path.scope.getBinding(name)) return
+        path.replaceWith(t.booleanLiteral(defines[name]))
+      },
+    },
+  }
+}
+
+const makeElectronConfig = (isTest, platformPlugin) => ({
   presets: [
     ['@babel/preset-env', {targets: {node: 'current'}}],
     ...(isTest ? [['@babel/preset-react', {runtime: 'automatic'}], '@babel/preset-flow'] : []),
     '@babel/preset-typescript',
   ],
   plugins: [
     reactCompilerPlugin, // must run first!
+    platformPlugin,
   ],
 })
 
-const makeReactNativeConfig = () => ({
+const makeReactNativeConfig = platformPlugin => ({
   plugins: [
     reactCompilerPlugin, // must run first!
     moduleResolverPlugin,
+    platformPlugin,
   ],
   presets: [['babel-preset-expo', {unstable_transformImportMeta: true, jsxRuntime: 'automatic'}]],
   sourceMaps: true,
@@ -34,20 +54,29 @@ const detectPlatform = (apiEnv, callerName) => {
 module.exports = function (api /*: any */) {
   const apiEnv = api.env()
   const callerName = api.caller(c => c?.name ?? null)
+  const metroPlatform = api.caller(c => c?.platform ?? null) // 'ios' | 'android' | null
   const platform = detectPlatform(apiEnv, callerName)
   const isTest = apiEnv === 'test' || apiEnv === 'test-rn'
 
-  api.cache.using(() => `${apiEnv}:${callerName ?? 'unknown'}:${platform}`)
+  api.cache.using(() => `${apiEnv}:${callerName ?? 'unknown'}:${platform}:${metroPlatform ?? 'none'}`)
+
+  const isRN = platform === 'react-native'
+  const platformPlugin = makePlatformPlugin({
+    isMobile: isRN,
+    isElectron: !isRN,
+    isAndroid: metroPlatform === 'android',
+    isIOS: metroPlatform === 'ios',
+  })
 
-  // console.error('KB babel.config.js ', {apiEnv, callerName, platform})
+  // console.error('KB babel.config.js ', {apiEnv, callerName, platform, metroPlatform})
 
   if (platform === 'electron') {
     // console.error('KB babel.config.js for Electron')
-    return makeElectronConfig(isTest)
+    return makeElectronConfig(isTest, platformPlugin)
   }
   if (platform === 'react-native') {
     // console.error('KB babel.config.js for ReactNative')
-    return makeReactNativeConfig()
+    return makeReactNativeConfig(platformPlugin)
   }
 
   throw new Error(`Unable to determine Babel platform from env/caller: ${apiEnv}/${callerName ?? 'unknown'}`)

shared/chat/audio/audio-player.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react'
 import * as Kb from '@/common-adapters'
-import * as C from '@/constants'
 import AudioVideo from './audio-video'
 import {formatAudioRecordDuration} from '@/util/timestamp'
 
@@ -34,13 +33,13 @@ const AudioVis = (props: VisProps) => {
         style={{
           backgroundColor: index < threshold ? Kb.Styles.globalColors.blue : Kb.Styles.globalColors.black,
           height,
-          marginRight: C.isMobile ? 4 * Kb.Styles.hairlineWidth : 2,
-          width: C.isMobile ? 3 * Kb.Styles.hairlineWidth : 1,
+          marginRight: isMobile ? 4 * Kb.Styles.hairlineWidth : 2,
+          width: isMobile ? 3 * Kb.Styles.hairlineWidth : 1,
         }}
       />
     )
   })
-  return C.isMobile ? (
+  return isMobile ? (
     <Kb.ScrollView
       horizontal={true}
       style={{height: maxHeight, maxWidth: maxWidth}}