@sleeperhq/mini-core 1.4.0 → 1.4.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sleeperhq/mini-core",
-  "version": "1.4.0",
+  "version": "1.4.1",
   "description": "Core library frameworks for developing Sleeper Mini Apps.",
   "main": "index.ts",
   "types": "index.d.ts",

package/start.tsx

@@ -0,0 +1,87 @@
+import React, {useCallback, useState} from 'react';
+import {
+  AppRegistry,
+  ActivityIndicator,
+  Text,
+  View,
+  StyleSheet,
+  SafeAreaView,
+} from 'react-native';
+import {DevServer, Types} from '.';
+
+import 'root/package_list';
+import config from 'root/app.json';
+import Project from 'app';
+
+DevServer.init(config);
+
+const Root = () => {
+  const [context, setContext] = useState<Types.Context>({} as Types.Context);
+  const [connected, setConnected] = useState<boolean>(false);
+  const [, updateState] = React.useState<any>();
+  const forceUpdate = React.useCallback(() => updateState({}), []);
+
+  const _onContextChanged = useCallback((data: Types.Context) => {
+    setContext(data);
+  }, []);
+
+  const _onContextUpdated = useCallback(
+    (data: any) => {
+      setContext(existing => {
+        for (const key in data) {
+          existing[key] = data[key];
+        }
+        return existing;
+      });
+      forceUpdate();
+    },
+    [forceUpdate],
+  );
+
+  const _onConnected = useCallback((value: boolean) => {
+    setConnected(value);
+  }, []);
+
+  const _renderWaitingForConnection = () => {
+    return (
+      <View style={styles.loadingContainer}>
+        <Text style={styles.loadingText}>Waiting for connection...</Text>
+        <ActivityIndicator size={50} />
+        <Text style={styles.loadingText}>
+          Make sure to update app.json with your phone's IP address.
+        </Text>
+      </View>
+    );
+  };
+
+  return (
+    <SafeAreaView style={styles.container}>
+      <DevServer
+        onContextChanged={_onContextChanged}
+        onContextUpdated={_onContextUpdated}
+        onConnected={_onConnected}
+      />
+      {connected && <Project context={context} />}
+      {!connected && _renderWaitingForConnection()}
+    </SafeAreaView>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#18202f',
+  },
+  loadingText: {
+    color: 'white',
+    fontSize: 20,
+    textAlign: 'center',
+  },
+  loadingContainer: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});
+
+AppRegistry.registerComponent(config.name, () => Root);

package/webpack.config.js

@@ -31,8 +31,8 @@ const sampleClassPathLocal = `./src/${samples[selectedSample]}`
 module.exports = env => {
   const {
     mode = 'development',
-    context = __dirname,
-    entry = './index.tsx',
+    context = path.resolve(__dirname, '..', '..', '..'),
+    entry = './node_modules/@sleeperhq/mini-core/start.tsx',
     platform,
     minimize = mode === 'production',
     devServer = undefined,
@@ -109,6 +109,7 @@ module.exports = env => {
       // },
       alias: {
         app: path.resolve(__dirname, sampleClassPath),
+        root: path.resolve(__dirname, '..', '..', '..'),
       },
     },
     /**