@sleeperhq/mini-core 0.0.2

package/src/dev_server/index.tsx

@@ -0,0 +1,253 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { Platform } from 'react-native';
+import { Config, SocketMessage } from '../types';
+import { ScriptLocatorResolver, ScriptManager } from '@callstack/repack/client';
+import NetInfo, { NetInfoState } from '@react-native-community/netinfo';
+import TcpSocket from 'react-native-tcp-socket';
+import { fetchMainVersionMap, getMainUrl } from './url_resolver';
+import PacketParser from '../common/packet_parser';
+
+let config: Config;
+const RETRY_TIMER = 5000;
+
+const DevServer = props => {
+  const connection = useRef<TcpSocket.Socket>();
+  const _retryTimer = useRef<NodeJS.Timeout>();
+  const packetParser = useRef<PacketParser>();
+
+  const [data, setData] = useState({
+    platform: '',
+    binaryVersion: '',
+    dist: '',
+    isStaging: false,
+  });
+  const _dataRef = useRef<typeof data>();
+  const _versionMap = useRef<Record<string, string>>();
+
+  const _onConnected = async (value: boolean) => {
+    props.onConnected(value);
+  };
+
+  const sendContextRequest = (socket, propertyPath) => {
+    const message: SocketMessage = {_contextGet: propertyPath};
+    const json = JSON.stringify(message);
+    try {
+      socket?.write(json + '\n');
+    } catch (e) {
+      console.log("[Sleeper] Failed to send context request: ", e);
+    }
+  }
+
+  const proxyHandler = (socket) => {
+    return {
+      get: (target, property) => {
+        let value = Reflect.get(target, property);
+
+        // Check if we need to add a proxy to this object
+        if (!!value && typeof value === 'object' && !value._isProxy && value._isProxyInternal) {
+          const isLeaf = !value._continueProxy;
+          // Adding proxies to objects
+          const handler = proxyHandlerChild(socket, property, isLeaf);
+          const proxiedValue = new Proxy(value, handler);
+          Reflect.set(target, property, proxiedValue);
+          value = proxiedValue;
+        }
+
+        return value;
+      }
+    };
+  }
+
+  const proxyHandlerChild = (socket, path, isLeaf) => {
+    return {
+      get: (target, property) => {
+        // Check if a proxy was already added to this object
+        if (property === '_isProxy') {
+          return true;
+        }
+
+        const value = Reflect.get(target, property);
+        const fullPropertyPath = `${path}.${property}`;
+
+        // If the value is undefined, we need to request it from the server
+        if (value === undefined && isLeaf) {
+          if (config.logsEnabled) console.log("[Sleeper] Requesting context value: ", fullPropertyPath);
+          sendContextRequest(socket, fullPropertyPath);
+        }
+
+        // Check if we need to add a second layer proxy to this object
+        if (!isLeaf && !value?._isProxy) {
+          const nextLeaf = true; // Currently we only support 2 layers of proxies
+          // Adding proxies to objects
+          // These proxies aren't stored in the context object so we will regenerate them every time
+          const handler = proxyHandlerChild(socket, fullPropertyPath, nextLeaf);
+          if (value === undefined) {
+            return new Proxy({}, handler);
+          } else {
+            return new Proxy(value, handler);
+          }
+        }
+
+        return value;
+      }
+    };
+  }
+
+  const startSocket = async () => {
+    const netInfo: NetInfoState = await NetInfo.fetch();
+
+    const netInfoDetails = netInfo?.details;
+    // @ts-ignore
+    const ipAddress = netInfoDetails?.ipAddress;
+
+    const createPacketParser = (handler) => {
+      return new PacketParser({
+        logsEnabled: false,
+        onMessageRecieved: (msg) => {
+          const json = msg.data;
+          // Set connection data
+          if (json._platform || json._binaryVersion || json._dist || json._isStaging) {
+            if (config.logsEnabled) console.log("[Sleeper] Processing context data:", json._platform, json._binaryVersion, json._dist, json._isStaging);
+            setData({
+              platform: json._platform,
+              binaryVersion: json._binaryVersion,
+              dist: json._dist,
+              isStaging: json._isStaging,
+            });
+          }
+    
+          if (msg.type === 'context') {
+            // We should have a context object now
+            const context = new Proxy(json._context, handler);
+            props.onContextChanged(context, json._entitlements);
+          } else if (msg.type === `partialContext`) {
+            // We are updating a partial Context
+            props.onContextUpdated(json._context);
+          } else if (msg.type === 'entitlements') {
+            props.onEntitlementsUpdated(json._entitlements);
+          }
+        }
+      });
+    };
+
+    if (!netInfoDetails || !('ipAddress' in netInfoDetails)) {
+      console.error('[Sleeper] Failed to determine local IP address.');
+      return stopSocket();
+    }
+
+    connection.current = TcpSocket.createConnection({
+      port: config.remoteSocketPort || 9092,
+      host: config.remoteIP,
+      localAddress: ipAddress,
+      reuseAddress: true,
+    }, () => {
+      console.log('[Sleeper] Connected to the Sleeper App.');
+      const handler = proxyHandler(connection.current);
+      packetParser.current = createPacketParser(handler);
+
+      // When we establish a connection, request context
+      sendContextRequest(connection.current, "");
+      _onConnected(true);
+    });
+  
+    connection.current.on('data', (data) => {
+      const msgString: string = data.toString();
+      packetParser.current?.parseMessage(msgString);
+    });
+    connection.current.on('error', err => {
+      return stopSocket();
+    });
+    connection.current.on('close', (hadError) => {
+      return stopSocket();
+    });
+  }
+
+  const stopSocket = (retry = true) => {
+    _onConnected(false);
+    packetParser.current = undefined;
+
+    if (connection.current) {
+      connection.current.destroy();
+      connection.current = undefined;
+    }
+
+    // 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);
+    }
+  }
+
+  const _waitForInitialization = () => {
+    return new Promise<void>((resolve) => {
+      (function checkData() {
+        let isInitialized = !!_dataRef.current?.dist;
+
+        // Non-staging builds also require a version map to be defined.
+        if (!_dataRef.current?.isStaging && !config.dev) {
+          isInitialized = !!_versionMap.current;
+        }
+
+        if (isInitialized) return resolve();
+        setTimeout(checkData, 1000);
+      })();
+    });
+  };
+
+  const _resolveRemoteChunk: ScriptLocatorResolver = async (scriptId: string, caller: string) => {
+    await _waitForInitialization();
+
+    const bundleName = !caller ? `${scriptId}.container.bundle` : `${scriptId}.chunk.bundle`;
+    
+    // Try to resolve URL based on scriptId and caller
+    const url = getMainUrl(scriptId, caller, {
+      platform: _dataRef.current?.platform,
+      bundleVersion: _versionMap.current?.[bundleName],
+      binaryVersion: _dataRef.current?.binaryVersion,
+      dist: _dataRef.current?.dist,
+      isStaging: _dataRef.current?.isStaging,
+      remoteIP: config.remoteIP,
+      dev: config.dev,
+    });
+    const query = config.dev ? {platform: Platform.OS} : undefined;
+
+    if (config.logsEnabled) console.log('[Sleeper] load script:', scriptId, caller, url);
+    return {url, query};
+  }
+
+  const _fetchVersionMap = async (platform, binaryVersion, dist) => {
+    _versionMap.current = await fetchMainVersionMap(platform, binaryVersion, dist);
+  }
+
+  useEffect(() => {
+    _dataRef.current = data;
+    if (!data.platform || !data.binaryVersion || !data.dist) return;
+    
+    _fetchVersionMap(data.platform, data.binaryVersion, data.dist);
+  }, [data.platform, data.binaryVersion, data.dist, data.isStaging]);
+
+  useEffect(() => {
+    if (!config) {
+      console.error('[Sleeper] No config file specified. Please make sure you call DevServer.init() early in the app lifecycle.');
+      return;
+    }
+
+    ScriptManager.shared.addResolver(_resolveRemoteChunk.bind(this));
+    startSocket();
+
+    return () => {
+      stopSocket(false);
+    };
+  }, []);
+
+  return <></>;
+};
+
+DevServer.init = (_config: Config) => {
+  config = _config;
+}
+
+export default DevServer;

package/src/dev_server/url_resolver.tsx

@@ -0,0 +1,72 @@
+import axios, { AxiosPromise, AxiosRequestConfig } from 'axios';
+import { 
+  getWebpackContext,
+  Federated,
+} from '@callstack/repack/client';
+import { Platform } from 'react-native';
+
+export type MainPlatformData = {
+  // Received from socket
+  platform?: string,
+  bundleVersion?: string,
+  binaryVersion?: string,
+  dist?: string,
+  isStaging?: boolean,
+
+  // From app.json
+  remoteIP: string,
+  dev?: boolean,
+}
+
+const PROD_CDN = "https://sleepercdn.com/bundles";
+const TEST_CDN = "https://test.sleepercdn.com/bundles";
+
+// Query a list of urls, and grab the first one that returns a 200 response.
+const _fetchFirstAvailable = (config: AxiosRequestConfig, ...urls: string[]) => {
+  return new Promise<any>((resolve) => {
+    (async function fetchMap() {
+      const promises = urls.map((url) => axios.get(url, config).catch(() => null));
+      const responses = await Promise.all<AxiosPromise>(promises);
+      
+      const successfulResponse = responses.find((response) => response?.status === 200);
+      if (config?.method === 'HEAD') {
+        successfulResponse ? resolve({ url: successfulResponse.config.url }) : setTimeout(fetchMap, 5000);
+      } else {
+        successfulResponse ? resolve(successfulResponse.data) : setTimeout(fetchMap, 5000);
+      }
+    })();
+  });
+}
+
+export const fetchMainVersionMap = (platform: string, binaryVersion: string, dist: string) => {
+  const baseUrl = `${PROD_CDN}/version_maps/${platform}/${binaryVersion}/${dist}.json`;
+  const codepushUrl = `${PROD_CDN}/version_maps/${platform}/codepush/${dist}.json`;
+
+  return _fetchFirstAvailable({}, baseUrl, codepushUrl);
+}
+
+export const getMainUrl = (scriptId: string, caller: string, config: MainPlatformData) => {
+  let sleeper: string;
+
+  if (config.dev) {
+    sleeper = `http://${config.remoteIP}:8081/`;
+  } else if (config.isStaging) {
+    if (config.dist === '0') {
+      sleeper = `${TEST_CDN}/${config.platform}/${config.binaryVersion}/${config.dist}/`;
+    } else {
+      sleeper = `${TEST_CDN}/${config.platform}/codepush/${config.dist}/`;
+    }
+  } else {
+    const platform = config.platform?.split('-')[0];
+    sleeper = `${PROD_CDN}/data/${platform}/${config.bundleVersion}/`;
+  }
+
+  const resolveURL = Federated.createURLResolver({
+    containers: {
+      sleeper: `${sleeper}[name][ext]`,
+    } 
+  });
+  const bundleLocation = resolveURL(scriptId, caller);
+
+  return bundleLocation;
+}

package/src/plugins/rebuildNotifyPlugin.js

@@ -0,0 +1,37 @@
+var net = require('net');
+/**
+ * @category Webpack Plugin
+ */
+class RebuildNotifyPlugin {
+
+  constructor(config) {
+    this.config = config;
+  }
+  /**
+   * Apply the plugin.
+   *
+   * @param compiler Webpack compiler instance.
+   */
+  apply(compiler) {
+    compiler.hooks.done.tap('RebuildNotifyPlugin', (stats) => {
+      if (stats.hasErrors()) {
+        return;
+      }
+
+      console.log('Rebuild finished. Notifying the app...');
+      // Notify the app that the rebuild has finished
+
+      const client = new net.Socket();
+      client.connect(9093, this.config.remoteIP, () => {
+        const json = JSON.stringify({ _webpack: 'built' });
+        client.write(json);
+        client.destroy();
+      });
+      client.on('error', () => {
+        client.destroy();
+      });
+    });
+  }
+}
+
+exports.RebuildNotifyPlugin = RebuildNotifyPlugin;

package/src/plugins/send_events.mjs

@@ -0,0 +1,87 @@
+import { Socket } from 'net';
+import path from 'path';
+import PacketParser from '../common/packet_parser.js';
+
+const appJsonFilename = 'app.json';
+const packagerConnectPort = 9092;
+const refreshTimeout = 5000; //milliseconds
+
+const socketConnect = (client, appConfig) => {
+  client.connect(packagerConnectPort, appConfig.remoteIP);
+};
+
+const packagerConnect = async (rootPath) => {
+  const appJsonPath = path.join(rootPath, appJsonFilename);
+  const { default: appConfig } = await import(appJsonPath, { assert: { type: "json" } });
+
+  if (!appConfig.remoteIP) {
+    throw new Error(appJsonFilename + ' is missing remoteIP field');
+  }
+
+  console.log('Attempting to connect to Sleeper App at ', appConfig.remoteIP);
+
+  const client = new Socket();
+  const packetParser = new PacketParser({
+    logsEnabled: false,
+    onMessageRecieved: (msg) => {
+      switch (msg?.type) {
+        case 'consoleLog':
+          console.log('[MiniLog]', msg.data?._consoleLog);
+          break;
+        default:
+          break;
+      }
+    }
+  });
+
+  client.on('connect', () => {
+    console.log('Connected to Sleeper App at ', appConfig.remoteIP);
+
+    client.setEncoding('utf8');
+    client.setKeepAlive(true);
+
+    const json = JSON.stringify({
+      _webpack: 'packager_connect',
+      _name: appConfig.name ?? '',
+      _entitlements: appConfig.entitlements,
+      _headerOptions: appConfig.headerOptions,
+    });
+
+    client.write(json, (err) => {
+      if (err) {
+        console.log('Error sending message to Sleeper App:', err);
+      }
+    });
+  });
+
+  client.on('error', (error) => {
+    if (error?.code === 'ECONNREFUSED' && error?.syscall === 'connect') {
+      // We don't care about this error since we will retry the connection
+      return;
+    }
+
+    console.log('Socket Error: ', error);
+  });
+
+  client.on('data', (data) => {
+    const msgString = data.toString();
+    packetParser.parseMessage(msgString);
+  });
+
+  client.on('close', (hadError) => {
+    if (!hadError) {
+      console.log('Connection to Sleeper App closed, retrying...');
+    }
+
+    // Retry connection
+    setTimeout(socketConnect, refreshTimeout, client, appConfig);
+  });
+
+  socketConnect(client, appConfig);
+
+  return () => {
+    client.destroy();
+  };
+};
+
+export default packagerConnect;

package/src/styles/fonts.ts

@@ -0,0 +1,139 @@
+const SHARED = {
+  INTER_REGULAR: 'Inter-Regular',
+  INTER_MEDIUM: 'Inter-Medium',
+  INTER_SEMIBOLD: 'Inter-SemiBold',
+  INTER_BOLD: 'Inter-Bold',
+  INTER_BLACK: 'Inter-Black',
+
+  POPPINS_REGULAR: 'Poppins-Regular',
+  POPPINS_MEDIUM: 'Poppins-Medium',
+  POPPINS_SEMIBOLD: 'Poppins-SemiBold',
+  POPPINS_BOLD: 'Poppins-Bold',
+  POPPINS_BLACK: 'Poppins-Black',
+  POPPINS_EXTRABOLD: 'Poppins-ExtraBold',
+
+  OSWALD_MEDIUM: 'Oswald-Medium',
+  OSWALD_BOLD: 'Oswald-Bold',
+} as const;
+
+const Fonts = {
+  DRUK_SUPERITALIC: 'Druk-SuperItalic',
+  DRUK_REGULAR: 'Druk-Medium',
+  CHANEY_EXTENDED: 'Chaney-Extended',
+
+  ...SHARED,
+
+  Styles: {
+    H1: {
+      fontFamily: SHARED.POPPINS_EXTRABOLD,
+      fontSize: 32,
+    },
+    H2: {
+      fontFamily: SHARED.POPPINS_EXTRABOLD,
+      fontSize: 28,
+    },
+    H3: {
+      fontFamily: SHARED.POPPINS_BOLD,
+      fontSize: 24,
+    },
+    H4: {
+      fontFamily: SHARED.POPPINS_BOLD,
+      fontSize: 20,
+    },
+    Title: {
+      fontFamily: SHARED.POPPINS_SEMIBOLD,
+      fontSize: 18,
+    },
+    Subhead: {
+      fontFamily: SHARED.POPPINS_SEMIBOLD,
+      fontSize: 16,
+    },
+    Menu: {
+      fontFamily: SHARED.POPPINS_SEMIBOLD,
+      fontSize: 12,
+      letterSpacing: 0.5,
+    },
+    ButtonLarge: {
+      fontFamily: SHARED.POPPINS_SEMIBOLD,
+      fontSize: 14,
+      letterSpacing: 1,
+    },
+    ButtonXLarge: {
+      fontFamily: SHARED.POPPINS_SEMIBOLD,
+      fontSize: 16,
+      letterSpacing: 1,
+    },
+    ButtonSmall: {
+      fontFamily: SHARED.POPPINS_SEMIBOLD,
+      fontSize: 12,
+      letterSpacing: 1,
+    },
+    TextCtaLarge: {
+      fontFamily: SHARED.POPPINS_SEMIBOLD,
+      fontSize: 14,
+      letterSpacing: 1,
+    },
+    TextCtaSmall: {
+      fontFamily: SHARED.POPPINS_SEMIBOLD,
+      fontSize: 12,
+      letterSpacing: 1,
+    },
+    Body1: {
+      fontFamily: SHARED.INTER_REGULAR,
+      fontSize: 16,
+      letterSpacing: -0.15,
+    },
+    Body1Bold: {
+      fontFamily: SHARED.INTER_SEMIBOLD,
+      fontSize: 16,
+      letterSpacing: -0.15,
+    },
+    Body2: {
+      fontFamily: SHARED.INTER_REGULAR,
+      fontSize: 14,
+      letterSpacing: -0.25,
+    },
+    Body2Bold: {
+      fontFamily: SHARED.INTER_SEMIBOLD,
+      fontSize: 14,
+      letterSpacing: -0.25,
+    },
+    Body3: {
+      fontFamily: SHARED.INTER_REGULAR,
+      fontSize: 12,
+      letterSpacing: -0.15,
+    },
+    Body3Bold: {
+      fontFamily: SHARED.INTER_SEMIBOLD,
+      fontSize: 12,
+      letterSpacing: -0.25,
+    },
+    Caption1: {
+      fontFamily: SHARED.INTER_REGULAR,
+      fontSize: 10,
+      letterSpacing: -0.25,
+    },
+    Caption1Bold: {
+      fontFamily: SHARED.INTER_BOLD,
+      fontSize: 10,
+      letterSpacing: -0.15,
+    },
+    Overline: {
+      fontFamily: SHARED.POPPINS_BOLD,
+      fontSize: 10,
+      letterSpacing: 0.25,
+    },
+    Footnote: {
+      fontFamily: SHARED.INTER_REGULAR,
+      fontSize: 9,
+      letterSpacing: -0.25,
+    },
+    FootnoteBold: {
+      fontFamily: SHARED.INTER_BOLD,
+      fontSize: 9,
+      letterSpacing: -0.25,
+    },
+  },
+} as const;
+
+export default Fonts;

package/src/styles/index.ts

@@ -0,0 +1,2 @@
+export { default as Theme } from './theme';
+export { default as Fonts } from './fonts';

package/src/styles/theme.ts

@@ -0,0 +1,69 @@
+const Theme = {
+  name: 'dark',
+
+  backgroundBase: '#030616',
+  backgroundDark: '#15182d',
+  backgroundCard: '#252942',
+  backgroundIce: '#fbfbfb',
+  backgroundWhite: '#ffffff',
+
+  primaryText: '#ffffff',
+  secondaryText: '#a3bbd3', // gray300
+
+  gray100: '#eef2f7',
+  gray200: '#D8DEED',
+  gray300: '#A3B1D3',
+  gray400: '#60648C',
+  gray500: '#414566',
+  gray600: '#343855',
+
+  aqua: '#00baff',
+  blue: '#046ae0',
+  cypress: '#019494',
+  green: '#45e8a7',
+  lavender: '#b8bfff',
+  lilac: '#bd66ff',
+  mint: '#00ceb8',
+  orange: '#ff5c00',
+  pink: '#ff7db6',
+  purple: '#6e7df5',
+  red: '#ff2b6d',
+  salmon: '#ff6086',
+  yam: '#8e66ff',
+  yellow: '#ffae58',
+  white: '#ffffff',
+  black: '#000000',
+  dark: '#022047',
+
+  gradients: {
+    // The `LinearGradient` component explicitly expects an array of color string, so casting in advance.
+    primary: ['#4ce2a7', '#00b7b3'] as string[],
+    success: ['#4ce2b8', '#07c5ff'] as string[],
+    cheer: ['#ffaa7f', '#ff3a6e'] as string[],
+    alert: ['#ffae58', '#ff4542'] as string[],
+    purple: ['#89a5fb', '#635ee4'] as string[],
+    lilac: ['#db84ff', '#9139ff'] as string[],
+    blue: ['#7cdaf9', '#5e73e4'] as string[],
+    gray: ['#e6effa', '#a3bbd3'] as string[],
+    darkgray: ['#a3bbd3', '#3a465b'] as string[],
+    background: ['#55609f', '#101c5a'] as string[],
+  },
+
+  getColorForSport(sport: string) {
+    if (sport === 'cbb') {
+      return Theme.orange;
+    }
+
+    if (sport === 'nba') {
+      return Theme.yellow;
+    }
+
+    if (sport === 'lcs' || sport === 'lol') {
+      return Theme.aqua;
+    }
+
+    return Theme.mint;
+  },
+} as const;
+
+export default Theme;

package/src/types/index.ts

@@ -0,0 +1,17 @@
+import type { HeaderOptions, Entitlement } from '../../declarations/types';
+
+export * from '../../declarations/types/index.d';
+export type { default as Context } from '../../declarations/sleeper_context.d';
+export type { default as SocketMessage } from '../../declarations/sleeper_message.d';
+export type { SleeperActions as Actions } from '../../declarations/sleeper_actions.d'
+
+export type Config = {
+  name: string,
+  displayName: string,
+  remoteIP: string,
+  remoteSocketPort?: number,
+  dev?: boolean,
+  logsEnabled?: boolean,
+  entitlements?: Entitlement[],
+  headerOptions?: HeaderOptions,
+};