feat(bara): add HOC

src/App.tsx

@@ -1,13 +1,9 @@
 import { useBarn } from 'bara'
-import React, { Component, ReactNode, useState, useEffect } from 'react'
+import React, { useState, useEffect } from 'react'
 
 import { StyleSheet } from 'react-native'
 
-import { BaraProvider } from './lib/context'
-import { Touchable } from './lib/exports/Touchable'
-import { View } from './lib/exports/View'
-import { Text } from './lib/exports/Text'
-import { TouchableOpacity } from './lib/exports/TouchableOpacity'
+import { Touchable, View, Text, TouchableOpacity } from './lib'
 import { WelcomeText } from './examples/components/WelcomeText'
 
 const styles = StyleSheet.create({
@@ -34,24 +30,22 @@ const App = () => {
   }, [version])
 
   return (
-    <BaraProvider>
-      <View name="main-container" style={styles.view}>
-        <Text name="version">Version: {version}</Text>
-        <View style={styles.button}>
-          <Touchable name="welcome-button">
-            <Text>Welcome!</Text>
-          </Touchable>
-        </View>
-        <View style={styles.button}>
-          <TouchableOpacity name="greet-button">
-            <Text>No Greet</Text>
-          </TouchableOpacity>
-        </View>
-        <View>
-          <WelcomeText />
-        </View>
+    <View name="main-container" style={styles.view}>
+      <Text name="version">Version: {version}</Text>
+      <View style={styles.button}>
+        <Touchable name="welcome-button">
+          <Text>Welcome!</Text>
+        </Touchable>
       </View>
-    </BaraProvider>
+      <View style={styles.button}>
+        <TouchableOpacity name="greet-button">
+          <Text>No Greet</Text>
+        </TouchableOpacity>
+      </View>
+      <View>
+        <WelcomeText />
+      </View>
+    </View>
   )
 }
 

src/lib/bara.tsx

@@ -0,0 +1,78 @@
+import { EventType, register, useInit, useEmitter, createEmitter, createEventType, useStream } from 'bara'
+import React, { ComponentType, useEffect } from 'react'
+import { AppRegistry } from 'react-native'
+
+import { BaraProvider } from './context'
+
+export const REACT_APP_STREAM_ID = 'dev.barajs.react'
+export const REACT_APP_MOUNTED = createEventType('REACT_APP_MOUNTED')
+
+export const withBara = (App: ComponentType, baraRegisters?: () => void) => {
+  if (baraRegisters) {
+    register(() => {
+
+      const appEmitter = createEmitter(({ setName, addEventType }) => {
+        setName(REACT_APP_STREAM_ID)
+        addEventType(REACT_APP_MOUNTED)
+      })
+
+      useStream(({ emit, setName, addEventType }) => {
+        setName(REACT_APP_STREAM_ID)
+        addEventType(REACT_APP_MOUNTED)
+
+        const onMounted = appEmitter.addListener(REACT_APP_MOUNTED, () => {
+          emit(REACT_APP_MOUNTED)
+        })
+
+        return () => {
+          onMounted.remove()
+        }
+      })
+
+      baraRegisters()
+    })
+  }
+
+  const getEmitter = (which: EventType) => {
+    const emit = useEmitter(which)
+    if (typeof emit === 'function') {
+      return emit
+    }
+    return () => { }
+  }
+
+  return () => {
+    useEffect(() => {
+      getEmitter(REACT_APP_MOUNTED)()
+    }, [])
+
+    return (
+      <BaraProvider>
+        <App />
+      </BaraProvider>
+    )
+  }
+}
+
+export interface UseReactAppConfig {
+  name: string
+  App: ComponentType
+  isNative?: boolean
+  rootHTML?: string
+}
+
+export const useReactApp = ({
+  name,
+  App,
+  isNative = false,
+  rootHTML = 'root',
+}: UseReactAppConfig) => {
+  useInit(() => {
+    AppRegistry.registerComponent(name, () => withBara(App))
+    if (!isNative) {
+      AppRegistry.runApplication(name, {
+        rootTag: document.getElementById(rootHTML),
+      })
+    }
+  })
+}

src/lib/index.ts

@@ -1,34 +1,5 @@
-import { register, useInit, useStream } from 'bara'
-import React, { ComponentType } from 'react'
-
-import { AppRegistry } from 'react-native'
-
-const BaraApp = (AppComponent: ComponentType) => () => AppComponent
-
-export interface UseReactAppConfig {
-  name: string
-  App: ComponentType
-  isNative?: boolean
-  rootHTML?: string
-}
-
-export const useReactApp = ({
-  name,
-  App,
-  isNative = false,
-  rootHTML = 'root',
-}: UseReactAppConfig) => {
-  useInit(() => {
-    AppRegistry.registerComponent(name, BaraApp(App))
-    if (!isNative) {
-      AppRegistry.runApplication(name, {
-        rootTag: document.getElementById(rootHTML),
-      })
-    }
-  })
-}
-
+export * from './bara'
 export * from './exports'
 export * from './functions'
 export * from './models'
-export * from './context'
+export * from './context'