@sleeperhq/mini-core 1.0.2 → 1.0.4

package/bin/build_mini.js

@@ -0,0 +1,109 @@
+#!/usr/bin/env node
+
+const { spawn } = require('child_process');
+const os = require('os');
+const path = require('path');
+
+const isWindows = os.platform() === 'win32';
+
+const outputFile = 'mini-app';
+const zipFile = `${outputFile}.zip`;
+const assetsDestPath = {
+  ios: path.join(outputFile, 'ios'),
+  android: path.join(outputFile, 'android'),
+};
+const bundleOutputPath = {
+  ios: path.join(assetsDestPath["ios"], 'index.bundle'),
+  android: path.join(assetsDestPath["android"], 'index.bundle'),
+};
+const sourcemapOutputPath = {
+  ios: path.join(assetsDestPath["ios"], 'index.bundle.map'),
+  android: path.join(assetsDestPath["android"], 'index.bundle.map'),
+};
+const reactNativeCliPath = path.join('node_modules', 'react-native', 'cli.js');
+
+const spawnProcess = (command, errorMessage) => {
+  return new Promise((resolve) => {
+    const child = isWindows
+      ? spawn('cmd.exe', ['/c', command])
+      : spawn(command, { shell: true });
+
+    child.stdout.on('data', (data) => {
+      process.stdout.write(data); // output the data to the console
+    });
+
+    child.stderr.on('data', (data) => {
+      process.stderr.write(data); // output the error to the console
+    });
+
+    child.on('close', (code) => {
+      if (code !== 0) {
+        printError(errorMessage || `command exited with non-zero code: ${code}`);
+        process.exit(1);
+      }
+      resolve();
+    });
+  });
+};
+
+const printError = (error) => {
+  console.error("\n\033[91m" + error + "\033[0m");
+};
+
+const printInfo = (message) => {
+  console.log("\n\033[96m" + message + "\033[0m");
+};
+
+const printComplete = (message) => {
+  console.log("\033[92m" + message + "\033[0m");
+};
+
+const getBundleCommand = (platform) => {
+  return `node ${reactNativeCliPath} webpack-bundle \
+  --entry-file index.tsx \
+  --platform ${platform} \
+  --dev false \
+  --reset-cache \
+  --bundle-output ${bundleOutputPath[platform]} \
+  --sourcemap-output ${sourcemapOutputPath[platform]} \
+  --minify false \
+  --assets-dest ${assetsDestPath[platform]}`;
+};
+
+const deleteCommand = (isWindows ? 'rmdir /s /q ' : 'rm -rf ');
+const zipCommand = isWindows ?
+  `powershell Compress-Archive -Path ${outputFile} -DestinationPath ${zipFile}` :
+  `zip -r ${zipFile} ${outputFile}`;
+const openCommand = isWindows ? `start .` : `open .`;
+const cleanIndexCommand = `${deleteCommand} ${bundleOutputPath["ios"]} ${bundleOutputPath["android"]} ${sourcemapOutputPath["ios"]} ${sourcemapOutputPath["android"]}`;
+const cleanAllCommand = `${deleteCommand} ${outputFile} ${zipFile}`;
+const cleanBuildCommand = `${deleteCommand} ${outputFile}`;
+
+const main = async () => {
+  // Clean build folders
+  await spawnProcess(cleanAllCommand, "clean command exited with non-zero code");
+
+  // Build iOS
+  printInfo("Building iOS...");
+  await spawnProcess(getBundleCommand("ios"), "webpack-bundle ios command exited with non-zero code");
+  printComplete("iOS build complete.");
+
+  // Build Android
+  printInfo("Building Android...");
+  await spawnProcess(getBundleCommand("android"), "webpack-bundle android command exited with non-zero code");
+  printComplete("Android build complete.");
+
+  // Create Zip Archive
+  printInfo("Creating zip archive...");
+  await spawnProcess(cleanIndexCommand, "clean command exited with non-zero code");
+  await spawnProcess(zipCommand, "zip command exited with non-zero code");
+  printComplete("Zip archive created successfully at mini-app.zip.");
+
+  // Clean build folders
+  await spawnProcess(cleanBuildCommand, "clean command exited with non-zero code");
+
+  // Open output folder
+  spawnProcess(openCommand);
+};
+
+main();

package/declarations/button/index.d.ts

@@ -1,37 +1,37 @@
-/// <reference types="react" />
-import { GestureResponderEvent } from 'react-native';
-export interface ButtonProps {
-    height?: number;
-    gradient?: (string | number)[];
-    start?: {
-        x: number;
-        y: number;
-    };
-    end?: {
-        x: number;
-        y: number;
-    };
-    disable?: boolean;
-    onPress?: (event: GestureResponderEvent) => void;
-    text?: string;
-}
-declare const Button: {
-    (props: ButtonProps): JSX.Element;
-    defaultProps: {
-        height: number;
-        shadowHeight: number;
-        gradient: string[];
-        type: string;
-        size: string;
-        isForSmallScreen: boolean;
-        start: {
-            x: number;
-            y: number;
-        };
-        end: {
-            x: number;
-            y: number;
-        };
-    };
-};
-export default Button;
+/// <reference types="react" />
+import { GestureResponderEvent } from 'react-native';
+export interface ButtonProps {
+    height?: number;
+    gradient?: (string | number)[];
+    start?: {
+        x: number;
+        y: number;
+    };
+    end?: {
+        x: number;
+        y: number;
+    };
+    disable?: boolean;
+    onPress?: (event: GestureResponderEvent) => void;
+    text?: string;
+}
+declare const Button: {
+    (props: ButtonProps): JSX.Element;
+    defaultProps: {
+        height: number;
+        shadowHeight: number;
+        gradient: string[];
+        type: string;
+        size: string;
+        isForSmallScreen: boolean;
+        start: {
+            x: number;
+            y: number;
+        };
+        end: {
+            x: number;
+            y: number;
+        };
+    };
+};
+export default Button;

package/declarations/index.d.ts

@@ -1,3 +1,4 @@
-export * from './types';
-declare const _default: any;
-export default _default;
+export * from './types';
+export * from './sleeper_message';
+declare const _default: any;
+export default _default;

package/declarations/jersey/index.d.ts

@@ -1,9 +1,9 @@
-import { ColorValue, ViewStyle } from 'react-native';
-import SleeperJersey from 'components/ui/jersey';
-export interface JerseyProps {
-    style: ViewStyle;
-    sport: 'nfl' | 'nba' | 'cbb' | 'cfb' | 'mlb';
-    number: string;
-    fill: ColorValue;
-}
-export default SleeperJersey;
+import { ColorValue, ViewStyle } from 'react-native';
+import SleeperJersey from 'components/ui/jersey';
+export interface JerseyProps {
+    style: ViewStyle;
+    sport: 'nfl' | 'nba' | 'cbb' | 'cfb' | 'mlb';
+    number: string;
+    fill: ColorValue;
+}
+export default SleeperJersey;

package/declarations/sleeper_actions.d.ts

@@ -1,5 +1,5 @@
-import { NavigationType, NavigationTypeId } from './types';
-declare class SleeperActions {
-    navigate: (navType: NavigationType, navTypeId: NavigationTypeId) => void;
-}
-export default SleeperActions;
+import { NavigationType, NavigationTypeId } from './types';
+declare class SleeperActions {
+    navigate: (navType: NavigationType, navTypeId: NavigationTypeId) => void;
+}
+export default SleeperActions;

package/declarations/sleeper_context.d.ts

@@ -1,10 +1,21 @@
-import { User, Navigation, League } from './types';
-import SleeperActions from './sleeper_actions';
-declare class SleeperContext {
-    user: User;
-    navigation: Navigation;
-    league: League;
-    actions: SleeperActions;
-    constructor(user: User, navigation: Navigation, league: League);
-}
-export default SleeperContext;
+import { User, Navigation, League, LeaguesMap, RostersInLeagueMap } from './types';
+import SleeperActions from './sleeper_actions';
+type SleeperContextConfig = {
+    user: User;
+    navigation: Navigation;
+    league: League;
+    userLeagueList: string[];
+    leaguesMap: LeaguesMap;
+    rostersInLeagueMap: RostersInLeagueMap;
+};
+declare class SleeperContext {
+    user: User;
+    navigation: Navigation;
+    league: League;
+    leaguesMap: LeaguesMap;
+    userLeagueList: string[];
+    rostersInLeagueMap: RostersInLeagueMap;
+    actions: SleeperActions;
+    constructor(config: SleeperContextConfig);
+}
+export default SleeperContext;

package/declarations/sleeper_message.d.ts

@@ -0,0 +1,6 @@
+type SocketMessage = {
+    _ip?: string;
+    _webpack?: string;
+    _contextGet?: string;
+};
+export default SocketMessage;

package/declarations/text/index.d.ts

@@ -1,13 +1,13 @@
-import { PureComponent } from 'react';
-import { TextProps } from 'react-native';
-declare type Props = {
-    color?: string;
-    inheritStyles?: boolean;
-    screenShrink?: number;
-} & TextProps;
-export declare type AppTextProps = Props;
-export default class AppText extends PureComponent<Props> {
-    private getStyles;
-    render(): JSX.Element;
-}
-export {};
+import { PureComponent } from 'react';
+import { TextProps } from 'react-native';
+type Props = {
+    color?: string;
+    inheritStyles?: boolean;
+    screenShrink?: number;
+} & TextProps;
+export type AppTextProps = Props;
+export default class AppText extends PureComponent<Props> {
+    private getStyles;
+    render(): JSX.Element;
+}
+export {};

package/declarations/types/index.d.ts

@@ -1,9 +1,15 @@
-import { NAVIGATION_ID, NAVIGATION_TYPE } from './redux/native_nav/constants.d';
-export declare type NavigationType = typeof NAVIGATION_TYPE;
-export declare type NavigationTypeId = typeof NAVIGATION_ID;
-export * from './shared/graphql.d';
-export declare type Navigation = {
-    selectedNavType: NavigationType;
-    selectedNavTypeId: NavigationTypeId;
-    selectedNavData: {};
-};
+import { NAVIGATION_ID, NAVIGATION_TYPE } from './redux/native_nav/constants.d';
+import { League, Roster } from './shared/graphql.d';
+export * from './shared/graphql.d';
+export type NavigationType = typeof NAVIGATION_TYPE[keyof typeof NAVIGATION_TYPE];
+export type NavigationTypeId = typeof NAVIGATION_ID[keyof typeof NAVIGATION_ID];
+export type Navigation = {
+    selectedNavType: NavigationType;
+    selectedNavTypeId: NavigationTypeId;
+    selectedNavData: {};
+};
+export type LeagueId = string;
+export type RosterId = string;
+export type LeaguesMap = Record<LeagueId, League>;
+export type RostersMap = Record<RosterId, Roster>;
+export type RostersInLeagueMap = Record<LeagueId, RostersMap>;

package/declarations/types/redux/native_nav/constants.d.ts

@@ -1,23 +1,23 @@
-export declare const NAVIGATION_TYPE: {
-    readonly DM: "DM";
-    readonly INBOX: "INBOX";
-    readonly MY_FEED: "MY_FEED";
-    readonly FRIENDS: "FRIENDS";
-    readonly LEAGUE: "LEAGUE";
-    readonly ASYNC_SPORT: "ASYNC_SPORT";
-    readonly CREATE_LEAGUE: "CREATE_LEAGUE";
-    readonly LEAGUE_SYNC: "LEAGUE_SYNC";
-    readonly DRAFTBOARDS: "DRAFTBOARDS";
-    readonly SOLO_OVER_UNDER: "SOLO_OVER_UNDER";
-    readonly CHANNEL: "CHANNEL";
-    readonly MANAGE_CHANNELS: "MANAGE_CHANNELS";
-};
-export declare const NAVIGATION_ID: {
-    readonly DRAFTBOARDS: 1;
-    readonly CREATE_DM: 2;
-    readonly DM_SCREEN: 3;
-    readonly CREATE_LEAGUE: 4;
-    readonly MY_FEED: 5;
-    readonly MENTIONS: 6;
-    readonly FRIENDS: 7;
-};
+export declare const NAVIGATION_TYPE: {
+    readonly DM: "DM";
+    readonly INBOX: "INBOX";
+    readonly MY_FEED: "MY_FEED";
+    readonly FRIENDS: "FRIENDS";
+    readonly LEAGUE: "LEAGUE";
+    readonly ASYNC_SPORT: "ASYNC_SPORT";
+    readonly CREATE_LEAGUE: "CREATE_LEAGUE";
+    readonly LEAGUE_SYNC: "LEAGUE_SYNC";
+    readonly DRAFTBOARDS: "DRAFTBOARDS";
+    readonly SOLO_OVER_UNDER: "SOLO_OVER_UNDER";
+    readonly CHANNEL: "CHANNEL";
+    readonly MANAGE_CHANNELS: "MANAGE_CHANNELS";
+};
+export declare const NAVIGATION_ID: {
+    readonly DRAFTBOARDS: 1;
+    readonly CREATE_DM: 2;
+    readonly DM_SCREEN: 3;
+    readonly CREATE_LEAGUE: 4;
+    readonly MY_FEED: 5;
+    readonly MENTIONS: 6;
+    readonly FRIENDS: 7;
+};

package/declarations/types/shared/graphql.d.ts

@@ -1,98 +1,113 @@
-export declare type Maybe<T> = T | null;
-export declare type InputMaybe<T> = Maybe<T>;
-export declare type Exact<T extends {
-    [key: string]: unknown;
-}> = {
-    [K in keyof T]: T[K];
-};
-export declare type MakeOptional<T, K extends keyof T> = Omit<T, K> & {
-    [SubKey in K]?: Maybe<T[SubKey]>;
-};
-export declare type MakeMaybe<T, K extends keyof T> = Omit<T, K> & {
-    [SubKey in K]: Maybe<T[SubKey]>;
-};
-/** All built-in and custom scalars, mapped to their actual values */
-export declare type Scalars = {
-    ID: string;
-    String: string;
-    Boolean: boolean;
-    Int: number;
-    Float: number;
-    /** JSON */
-    Json: {
-        [key: string]: any;
-    };
-    /** Lists */
-    List: string[];
-    /** Map / Dictionary */
-    Map: {
-        [key: string]: any;
-    };
-    MapWithSnowflakeKey: {
-        [key: string]: any;
-    };
-    /** Sets */
-    Set: string[];
-    /** Snowflake ID */
-    Snowflake: string;
-    SnowflakeList: string[];
-    SnowflakeSet: string[];
-};
-export declare type League = {
-    __typename?: 'League';
-    avatar?: Maybe<Scalars['String']>;
-    company_id?: Maybe<Scalars['Snowflake']>;
-    display_order?: Maybe<Scalars['Int']>;
-    draft_id?: Maybe<Scalars['Snowflake']>;
-    group_id?: Maybe<Scalars['Snowflake']>;
-    last_author_avatar?: Maybe<Scalars['String']>;
-    last_author_display_name?: Maybe<Scalars['String']>;
-    last_author_id?: Maybe<Scalars['Snowflake']>;
-    last_author_is_bot?: Maybe<Scalars['Boolean']>;
-    last_message_attachment?: Maybe<Scalars['Json']>;
-    last_message_id?: Maybe<Scalars['Snowflake']>;
-    last_message_text?: Maybe<Scalars['String']>;
-    last_message_text_map?: Maybe<Scalars['Json']>;
-    last_message_time?: Maybe<Scalars['Int']>;
-    last_pinned_message_id?: Maybe<Scalars['Snowflake']>;
-    last_read_id?: Maybe<Scalars['Snowflake']>;
-    last_transaction_id?: Maybe<Scalars['Snowflake']>;
-    league_id?: Maybe<Scalars['Snowflake']>;
-    matchup_legs?: Maybe<Scalars['List']>;
-    metadata?: Maybe<Scalars['Map']>;
-    name?: Maybe<Scalars['String']>;
-    previous_league_id?: Maybe<Scalars['Snowflake']>;
-    roster_positions?: Maybe<Scalars['List']>;
-    scoring_settings?: Maybe<Scalars['Map']>;
-    season?: Maybe<Scalars['String']>;
-    season_type?: Maybe<Scalars['String']>;
-    settings?: Maybe<Scalars['Map']>;
-    sport?: Maybe<Scalars['String']>;
-    status?: Maybe<Scalars['String']>;
-    total_rosters?: Maybe<Scalars['Int']>;
-};
-export declare type User = {
-    __typename?: 'User';
-    async_bundles?: Maybe<Scalars['List']>;
-    avatar?: Maybe<Scalars['String']>;
-    cookies?: Maybe<Scalars['Int']>;
-    created?: Maybe<Scalars['Int']>;
-    currencies?: Maybe<Scalars['Map']>;
-    data_updated?: Maybe<Scalars['Map']>;
-    deleted?: Maybe<Scalars['Int']>;
-    display_name?: Maybe<Scalars['String']>;
-    email?: Maybe<Scalars['String']>;
-    is_bot?: Maybe<Scalars['Boolean']>;
-    metadata?: Maybe<Scalars['Json']>;
-    notifications?: Maybe<Scalars['Map']>;
-    pending?: Maybe<Scalars['Boolean']>;
-    phone?: Maybe<Scalars['String']>;
-    real_name?: Maybe<Scalars['String']>;
-    solicitable?: Maybe<Scalars['Boolean']>;
-    summoner_name?: Maybe<Scalars['String']>;
-    summoner_region?: Maybe<Scalars['String']>;
-    token?: Maybe<Scalars['String']>;
-    user_id?: Maybe<Scalars['Snowflake']>;
-    username?: Maybe<Scalars['String']>;
-    verification?: Maybe<Scalars['String']>;
-};
+export type Maybe<T> = T | null;
+export type InputMaybe<T> = Maybe<T>;
+export type Exact<T extends {
+    [key: string]: unknown;
+}> = {
+    [K in keyof T]: T[K];
+};
+export type MakeOptional<T, K extends keyof T> = Omit<T, K> & {
+    [SubKey in K]?: Maybe<T[SubKey]>;
+};
+export type MakeMaybe<T, K extends keyof T> = Omit<T, K> & {
+    [SubKey in K]: Maybe<T[SubKey]>;
+};
+/** All built-in and custom scalars, mapped to their actual values */
+export type Scalars = {
+    ID: string;
+    String: string;
+    Boolean: boolean;
+    Int: number;
+    Float: number;
+    /** JSON */
+    Json: {
+        [key: string]: any;
+    };
+    /** Lists */
+    List: string[];
+    /** Map / Dictionary */
+    Map: {
+        [key: string]: any;
+    };
+    MapWithSnowflakeKey: {
+        [key: string]: any;
+    };
+    /** Sets */
+    Set: string[];
+    /** Snowflake ID */
+    Snowflake: string;
+    SnowflakeList: string[];
+    SnowflakeSet: string[];
+};
+export type League = {
+    __typename?: 'League';
+    avatar?: Maybe<Scalars['String']>;
+    company_id?: Maybe<Scalars['Snowflake']>;
+    display_order?: Maybe<Scalars['Int']>;
+    draft_id?: Maybe<Scalars['Snowflake']>;
+    group_id?: Maybe<Scalars['Snowflake']>;
+    last_author_avatar?: Maybe<Scalars['String']>;
+    last_author_display_name?: Maybe<Scalars['String']>;
+    last_author_id?: Maybe<Scalars['Snowflake']>;
+    last_author_is_bot?: Maybe<Scalars['Boolean']>;
+    last_message_attachment?: Maybe<Scalars['Json']>;
+    last_message_id?: Maybe<Scalars['Snowflake']>;
+    last_message_text?: Maybe<Scalars['String']>;
+    last_message_text_map?: Maybe<Scalars['Json']>;
+    last_message_time?: Maybe<Scalars['Int']>;
+    last_pinned_message_id?: Maybe<Scalars['Snowflake']>;
+    last_read_id?: Maybe<Scalars['Snowflake']>;
+    last_transaction_id?: Maybe<Scalars['Snowflake']>;
+    league_id?: Maybe<Scalars['Snowflake']>;
+    matchup_legs?: Maybe<Scalars['List']>;
+    metadata?: Maybe<Scalars['Map']>;
+    name?: Maybe<Scalars['String']>;
+    previous_league_id?: Maybe<Scalars['Snowflake']>;
+    roster_positions?: Maybe<Scalars['List']>;
+    scoring_settings?: Maybe<Scalars['Map']>;
+    season?: Maybe<Scalars['String']>;
+    season_type?: Maybe<Scalars['String']>;
+    settings?: Maybe<Scalars['Map']>;
+    sport?: Maybe<Scalars['String']>;
+    status?: Maybe<Scalars['String']>;
+    total_rosters?: Maybe<Scalars['Int']>;
+};
+export type Roster = {
+    __typename?: 'Roster';
+    co_owners?: Maybe<Scalars['SnowflakeSet']>;
+    keepers?: Maybe<Scalars['Set']>;
+    league_id?: Maybe<Scalars['Snowflake']>;
+    metadata?: Maybe<Scalars['Map']>;
+    owner_id?: Maybe<Scalars['Snowflake']>;
+    player_map?: Maybe<Scalars['Map']>;
+    players?: Maybe<Scalars['Set']>;
+    reserve?: Maybe<Scalars['Set']>;
+    roster_id?: Maybe<Scalars['Int']>;
+    settings?: Maybe<Scalars['Map']>;
+    starters?: Maybe<Scalars['List']>;
+    taxi?: Maybe<Scalars['Set']>;
+};
+export type User = {
+    __typename?: 'User';
+    async_bundles?: Maybe<Scalars['List']>;
+    avatar?: Maybe<Scalars['String']>;
+    cookies?: Maybe<Scalars['Int']>;
+    created?: Maybe<Scalars['Int']>;
+    currencies?: Maybe<Scalars['Map']>;
+    data_updated?: Maybe<Scalars['Map']>;
+    deleted?: Maybe<Scalars['Int']>;
+    display_name?: Maybe<Scalars['String']>;
+    email?: Maybe<Scalars['String']>;
+    is_bot?: Maybe<Scalars['Boolean']>;
+    metadata?: Maybe<Scalars['Json']>;
+    notifications?: Maybe<Scalars['Map']>;
+    pending?: Maybe<Scalars['Boolean']>;
+    phone?: Maybe<Scalars['String']>;
+    real_name?: Maybe<Scalars['String']>;
+    solicitable?: Maybe<Scalars['Boolean']>;
+    summoner_name?: Maybe<Scalars['String']>;
+    summoner_region?: Maybe<Scalars['String']>;
+    token?: Maybe<Scalars['String']>;
+    user_id?: Maybe<Scalars['Snowflake']>;
+    username?: Maybe<Scalars['String']>;
+    verification?: Maybe<Scalars['String']>;
+};

package/package.json

@@ -1,9 +1,12 @@
 {
   "name": "@sleeperhq/mini-core",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "description": "Core library frameworks for developing Sleeper Mini Apps.",
   "main": "index.ts",
   "types": "index.d.ts",
+  "bin": {
+    "build-mini": "./bin/build_mini.js"
+  },
   "scripts": {
     "test": "jest",
     "lint": "eslint ."
@@ -30,7 +33,7 @@
     "access": "public"
   },
   "peerDependencies": {
-    "@callstack/repack": "blitzstudios/repack.git#callstack-repack-v2.5.3-gitpkg",
+    "@callstack/repack": "blitzstudios/repack.git#callstack-repack-v2.6.0-gitpkg",
     "@react-native-community/netinfo": "^9.3.7",
     "axios": "0.15.3",
     "lodash": "4.17.21",
@@ -38,7 +41,7 @@
     "react-native": "0.66.5",
     "react-native-linear-gradient": "2.5.6",
     "react-native-svg": "13.7.0",
-    "react-native-udp": "^4.1.6"
+    "react-native-tcp-socket": "^6.0.6"
   },
   "devDependencies": {
     "@babel/core": "^7.12.9",

package/src/dev_server/index.tsx

@@ -1,58 +1,158 @@
-import React, {useEffect} from 'react';
+import React, {useEffect, useRef, useState} from 'react';
 import {Platform} from 'react-native';
-import {Config} from '../types';
+import {Config, SocketMessage} from '../types';
 import {ScriptManager, Federated} from '@callstack/repack/client';
 import NetInfo from '@react-native-community/netinfo';
-import dgram from 'react-native-udp';
+import TcpSocket from 'react-native-tcp-socket';
 import axios from 'axios';
 
 let config: Config;
+const RETRY_TIMER = 5000;
 
 const DevServer = props => {
-  const onSocket = msg => {
-    const json = JSON.parse(msg.toString());
-    if (json?._connected) {
-      return;
-    }
+  const connection = useRef<TcpSocket.Socket>();
+  const partialMessage = useRef('');
+  const _retryTimer = useRef<NodeJS.Timeout>();
 
-    props.onContextChanged(json);
+  const _onConnected = async (value: boolean) => {
+    props.onConnected(value);
   };
 
-  const onError = err => {
-    console.error('[Sleeper] Socket error: ' + err);
+  const onSocket = (handler) => msg => {
+    let json;
+    try {
+      json = JSON.parse(msg);
+    } catch(e) {
+      partialMessage.current += msg;
+    }
+
+    if (partialMessage.current.length > 0) {
+      try {
+        json = JSON.parse(partialMessage.current);
+        partialMessage.current = '';
+      } catch (e) {
+        return;
+      }
+    }
+
+    // We should have a context object now
+    const context = new Proxy(json, handler);
+    props.onContextChanged(context);
   };
 
-  const bindSocket = async socket => {
+  const sendContextRequest = (socket, propertyPath) => {
+    const message: SocketMessage = {_contextGet: propertyPath};
+    const json = JSON.stringify(message);
+    try {
+      socket?.write(json);
+    } catch (e) {
+      console.log("[Sleeper] Failed to send context request: ", e);
+    }
+  }
+
+  const proxyHandler = (socket) => {
+    return {
+      get: (target, property) => {
+        if (property in target && target[property] !== null) {
+          const value = target[property];
+
+          if (typeof value !== 'object' || value._isProxy) {
+            return value;
+          }
+
+          // Adding proxies to objects
+          // Intentionally only going 1 level deep
+          const handler = proxyHandlerLeaf(socket, property);
+          target[property] = new Proxy(value, handler);
+          target[property]._isProxy = true;
+
+          return target[property];
+        }
+
+        // This property is not in the context object yet
+        sendContextRequest(socket, property);
+        return null;
+      }
+    };
+  }
+
+  // This handler is for leaf nodes only
+  const proxyHandlerLeaf = (socket, path) => {
+    return {
+      get: (target, property) => {
+        if (target[property] !== undefined) { // Only checking undefined properites for leaves
+          return target[property];
+        }
+
+        const fullProp = path + '.' + property;
+        sendContextRequest(socket, fullProp);
+        return null;
+      }
+    };
+  }
+
+  const startSocket = async () => {
     const netInfo = await NetInfo.fetch();
     const netInfoDetails = netInfo?.details;
+    const ipAddress = netInfoDetails?.ipAddress;
 
     if (!netInfoDetails || !('ipAddress' in netInfoDetails)) {
       console.error('[Sleeper] Failed to determine local IP address.');
-      return;
+      return stopSocket();
     }
 
-    socket.bind({port: config.localSocketPort, address: netInfoDetails.ipAddress});
-  };
+    connection.current = TcpSocket.createConnection({
+      port: config.remoteSocketPort,
+      host: config.remoteIP,
+      localAddress: ipAddress,
+      reuseAddress: true,
+    }, () => {
+      // When we establish a connection, send the IP address to the server
+      const message: SocketMessage = { _ip: ipAddress };
+      const json = JSON.stringify(message);
+      try {
+        connection.current?.write(json, undefined, (error) => {
+          if (error) {
+            return stopSocket();
+          }
+          console.log('[Sleeper] Connected to the Sleeper App.');
+          _onConnected(true);
+        });
+      } catch (e) {
+        return stopSocket();
+      }
+    });
+  
+    connection.current.on('data', (data, ...args) => {
+      const handler = proxyHandler(connection.current);
+      const onSocketHandler = onSocket(handler);
+      onSocketHandler(data);
+    });
+    connection.current.on('error', err => {
+      return stopSocket();
+    });
+    connection.current.on('close', (hadError) => {
+      return stopSocket();
+    });
+  }
 
-  const pingServer = socket => {
-    // Continue to ping the sleeper app server until it responds.
-    return new Promise(() => {
-      NetInfo.fetch().then(netInfo => {
-        const netInfoDetails = netInfo?.details;
-        if (!netInfoDetails || !('ipAddress' in netInfoDetails)) {
-          console.error('[Sleeper] Failed to determine local IP address.');
-          return;
-        }
+  const stopSocket = (retry = true) => {
+    _onConnected(false);
 
-        const json = JSON.stringify({_ip: netInfoDetails.ipAddress});
+    if (connection.current) {
+      connection.current.destroy();
+      connection.current = undefined;
+    }
 
-        (async function ping() {
-          socket.send(json, undefined, undefined, config.remoteSocketPort, config.remoteIP);
-          setTimeout(ping, 5000);
-        })();
-      });
-    });
-  };
+    // Any time the socket is closed, attempt to connect again.
+    if (retry) {
+      clearTimeout(_retryTimer.current);
+      _retryTimer.current = setTimeout(() => {
+        console.log('[Sleeper] Unable to connect to sleeper, retrying...');
+        startSocket();
+      }, RETRY_TIMER);
+    }
+  }
 
   useEffect(() => {
     if (!config) {
@@ -60,14 +160,10 @@ const DevServer = props => {
       return;
     }
 
-    const socket = dgram.createSocket({type: 'udp4'});
-    bindSocket(socket);
-    pingServer(socket);
+    startSocket();
 
-    socket.on('message', onSocket);
-    socket.on('error', onError);
     return () => {
-      socket.removeAllListeners();
+      stopSocket(false);
     };
   }, []);
 

package/src/types/index.ts

@@ -1,5 +1,6 @@
 export * from '../../declarations/types/index.d';
 export { default as Context } from '../../declarations/sleeper_context.d';
+export { default as SocketMessage } from '../../declarations/sleeper_message.d';
 
 export type Config = {
   name: string,