@sleeperhq/mini-core 1.2.3 → 1.2.5

package/index.ts

@@ -1,6 +1,6 @@
 import * as Sleeper from './src/components';
 import DevServer from './src/dev_server';
 import * as Types from './src/types';
-import './src/packages';
+import * as Styles from './src/styles';
 
-export {Sleeper, DevServer, Types};
+export {Sleeper, DevServer, Types, Styles};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sleeperhq/mini-core",
-  "version": "1.2.3",
+  "version": "1.2.5",
   "description": "Core library frameworks for developing Sleeper Mini Apps.",
   "main": "index.ts",
   "types": "index.d.ts",
@@ -34,7 +34,7 @@
     "access": "public"
   },
   "peerDependencies": {
-    "@callstack/repack": "blitzstudios/repack.git#callstack-repack-v2.6.1-gitpkg",
+    "@callstack/repack": "blitzstudios/repack.git#callstack-repack-v2.6.3-gitpkg",
     "@react-native-community/netinfo": "9.3.7",
     "axios": "0.15.3",
     "lodash": "4.17.21",

package/src/styles/fonts.ts

@@ -0,0 +1,174 @@
+const SHARED = {
+  INTER_EXTRALIGHT: 'Inter-ExtraLight',
+  INTER_THIN: 'Inter-Thin',
+  INTER_LIGHT: 'Inter-Light',
+  INTER_REGULAR: 'Inter-Regular',
+  INTER_MEDIUM: 'Inter-Medium',
+  INTER_SEMIBOLD: 'Inter-SemiBold',
+  INTER_BOLD: 'Inter-Bold',
+  INTER_BLACK: 'Inter-Black',
+  INTER_EXTRABOLD: 'Inter-ExtraBold',
+
+  POPPINS_THIN: 'Poppins-Thin',
+  POPPINS_LIGHT: 'Poppins-Light',
+  POPPINS_REGULAR: 'Poppins-Regular',
+  POPPINS_MEDIUM: 'Poppins-Medium',
+  POPPINS_SEMIBOLD: 'Poppins-SemiBold',
+  POPPINS_BOLD: 'Poppins-Bold',
+  POPPINS_BLACK: 'Poppins-Black',
+  POPPINS_EXTRABOLD: 'Poppins-ExtraBold',
+} as const;
+
+const Fonts = {
+  THIN: 'Lato-Thin',
+  LIGHT: 'Lato-Light',
+  REGULAR: 'Lato-Regular',
+  MEDIUM: 'Lato-Medium',
+  BOLD: 'Lato-Bold',
+  HEAVY: 'Lato-Heavy',
+  BLACK: 'Lato-Black',
+
+  MULI_THIN: 'Muli-ExtraLight',
+  MULI_LIGHT: 'Muli-Light',
+  MULI_REGULAR: 'Muli-Regular',
+  MULI_MEDIUM: 'Muli-SemiBold',
+  MULI_BOLD: 'Muli-Bold',
+  MULI_BLACK: 'Muli-Black',
+  MULI_EXTRABOLD: 'Muli-ExtraBold',
+
+  OSWALD__EXTRA_LIGHT: 'Oswald-ExtraLight',
+  OSWALD_LIGHT: 'Oswald-Light',
+  OSWALD_REGULAR: 'Oswald-Regular',
+  OSWALD_MEDIUM: 'Oswald-Medium',
+  OSWALD_SEMIBOLD: 'Oswald-SemiBold',
+  OSWALD_BOLD: 'Oswald-Bold',
+
+  DRUK_SUPERITALIC: 'Druk-SuperItalic',
+  CHANEY_EXTENDED: 'Chaney-Extended',
+
+  ...SHARED,
+
+  Styles: {
+    H1: {
+      fontFamily: SHARED.POPPINS_EXTRABOLD,
+      fontSize: 32,
+      // lineHeight: 48,
+    },
+    H2: {
+      fontFamily: SHARED.POPPINS_EXTRABOLD,
+      fontSize: 28,
+      // lineHeight: 48,
+    },
+    H3: {
+      fontFamily: SHARED.POPPINS_BOLD,
+      fontSize: 24,
+      // lineHeight: 32,
+    },
+    H4: {
+      fontFamily: SHARED.POPPINS_BOLD,
+      fontSize: 20,
+      // lineHeight: 26,
+    },
+    Title: {
+      fontFamily: SHARED.POPPINS_SEMIBOLD,
+      fontSize: 18,
+      // lineHeight: 24,
+    },
+    Subhead: {
+      fontFamily: SHARED.POPPINS_SEMIBOLD,
+      fontSize: 16,
+      // lineHeight: 20,
+    },
+    Menu: {
+      fontFamily: SHARED.POPPINS_SEMIBOLD,
+      fontSize: 12,
+      // lineHeight: 16,
+      letterSpacing: 0.5,
+    },
+    ButtonLarge: {
+      fontFamily: SHARED.POPPINS_SEMIBOLD,
+      fontSize: 14,
+      // lineHeight: 16, // Cuts off the text at 14
+      letterSpacing: 1,
+    },
+    ButtonSmall: {
+      fontFamily: SHARED.POPPINS_SEMIBOLD,
+      fontSize: 12,
+      // lineHeight: 14, // Cuts off the text at 12
+      letterSpacing: 1,
+    },
+    TextCtaLarge: {
+      fontFamily: SHARED.POPPINS_SEMIBOLD,
+      fontSize: 14,
+      // lineHeight: 14,
+      letterSpacing: 1,
+    },
+    TextCtaSmall: {
+      fontFamily: SHARED.POPPINS_SEMIBOLD,
+      fontSize: 12,
+      // lineHeight: 12,
+      letterSpacing: 1,
+    },
+    Body1: {
+      fontFamily: SHARED.INTER_REGULAR,
+      fontSize: 16,
+      // lineHeight: 20,
+      letterSpacing: -0.15,
+    },
+    Body1Bold: {
+      fontFamily: SHARED.INTER_SEMIBOLD,
+      fontSize: 16,
+      // lineHeight: 20,
+      letterSpacing: -0.15,
+    },
+    Body2: {
+      fontFamily: SHARED.INTER_REGULAR,
+      fontSize: 14,
+      // lineHeight: 18,
+      letterSpacing: -0.25,
+    },
+    Body2Bold: {
+      fontFamily: SHARED.INTER_SEMIBOLD,
+      fontSize: 14,
+      // lineHeight: 18,
+      letterSpacing: -0.25,
+    },
+    Body3: {
+      fontFamily: SHARED.INTER_REGULAR,
+      fontSize: 12,
+      // lineHeight: 16,
+      letterSpacing: -0.15,
+    },
+    Body3Bold: {
+      fontFamily: SHARED.INTER_SEMIBOLD,
+      fontSize: 12,
+      // lineHeight: 16,
+      letterSpacing: -0.25,
+    },
+    Caption1: {
+      fontFamily: SHARED.INTER_REGULAR,
+      fontSize: 10,
+      // lineHeight: 12,
+      letterSpacing: -0.25,
+    },
+    Caption1Bold: {
+      fontFamily: SHARED.INTER_BOLD,
+      fontSize: 10,
+      // lineHeight: 12,
+      letterSpacing: -0.15,
+    },
+    Overline: {
+      fontFamily: SHARED.POPPINS_BOLD,
+      fontSize: 10,
+      letterSpacing: 0.25,
+    },
+    Footnote: {
+      fontFamily: SHARED.INTER_REGULAR,
+      fontSize: 9,
+      // lineHeight: 12,
+      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: '#d8e2ed',
+  gray300: '#a3bbd3',
+  gray400: '#606f8c',
+  gray500: '#4a5870',
+  gray600: '#344054',
+
+  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/dev_server/useContext.tsx

@@ -1,317 +0,0 @@
-import React, {useEffect, useRef, useState} from 'react';
-import {Platform} from 'react-native';
-import {Config, SocketMessage} from '../types';
-import { ScriptLocatorResolver, ScriptManager, Federated } from '@callstack/repack/client';
-import NetInfo from '@react-native-community/netinfo';
-import TcpSocket from 'react-native-tcp-socket';
-import { fetchMainVersionMap, getMainUrl } from './url_resolver';
-
-let config: Config;
-const RETRY_TIMER = 5000;
-
-const DevServer = props => {
-  const connection = useRef<TcpSocket.Socket>();
-  const partialMessage = useRef('');
-  const messageLength = useRef(0);
-  const messageType = useRef('');
-  const _retryTimer = useRef<NodeJS.Timeout>();
-
-  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 onSocket = (handler) => msg => {
-    let msgString: string = msg.toString();
-    while (msgString.length > 0) {
-      if (messageLength.current === 0) {
-        const delimit = msgString.indexOf('\n');
-        if (delimit === -1) {
-          console.log("[Sleeper] Message header not found, throwing out message.");
-          return;
-        }
-
-        const header = msgString.substring(0, delimit);
-        try {
-          const headerObject = JSON.parse(header);
-          messageType.current = headerObject.type;
-          messageLength.current = headerObject.size;
-        } catch (e) {
-          console.log("[Sleeper] Message header malformed, throwing out message.");
-          messageLength.current = 0;
-          messageType.current = '';
-          return;
-        }
-
-        msgString = msgString.substring(delimit + 1);
-      }
-
-      const partialLength = messageLength.current - partialMessage.current.length;
-      if (partialLength < 0) {
-        // We need to wait for more data
-        partialMessage.current += msgString;
-        return;
-      }
-
-      const remainingLength = msgString.length - partialLength;
-      if (remainingLength === 0) {
-        // We have the full message
-        partialMessage.current += msgString;
-        msgString = '';
-        if (config.logsEnabled) console.log("[Sleeper] Message built.", partialMessage.current.length);
-        
-      } else {
-        // We have more than the full message
-        partialMessage.current += msgString.substring(0, partialLength);
-        msgString = msgString.substring(partialLength);
-
-        if (remainingLength <= 0) {
-          // We have less than the full message
-          if (config.logsEnabled) console.log("[Sleeper] Building message: ", partialMessage.current.length, messageLength.current, remainingLength);
-          return;
-        }
-      }
-
-      try {
-        const json = JSON.parse(partialMessage.current);
-        partialMessage.current = '';
-        messageLength.current = 0;
-
-        // 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 (messageType.current === 'context') {
-          // We should have a context object now
-          const context = new Proxy(json, handler);
-          props.onContextChanged(context);
-        } else if (messageType.current === `partialContext`) {
-          // We are updating a partial Context
-          props.onContextUpdated(json)
-        }
-
-        messageType.current = '';
-      } catch (e) {
-        console.log("[Sleeper] Failed to parse message: ", e);
-        return;
-      }
-    }
-  };
-
-  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 = 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 stopSocket();
-    }
-
-    connection.current = TcpSocket.createConnection({
-      port: config.remoteSocketPort || 9092,
-      host: config.remoteIP,
-      localAddress: ipAddress,
-      reuseAddress: true,
-    }, () => {
-      // When we establish a connection, send the IP address to the server
-      const message: SocketMessage = { 
-        _ip: ipAddress, 
-        _name: config.name, 
-      };
-      const json = JSON.stringify(message);
-      console.log('[Sleeper] Send IP address: ', ipAddress, config.name);
-      try {
-        connection.current?.write(json + '\n', "utf8", (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 stopSocket = (retry = true) => {
-    _onConnected(false);
-
-    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) {
-          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/packages/index.ts

@@ -1,4 +0,0 @@
-// preload shared packages that require initialization during startup
-import 'lodash';
-import 'react-native-svg';
-import 'react-native-linear-gradient';