@sleeperhq/mini-core 1.9.1 → 1.9.3

package/mini_packages.json

@@ -17,7 +17,7 @@
     "@react-navigation/native": "6.1.3",
     "@react-navigation/stack": "6.3.12",
     "@shopify/flash-list": "1.4.1",
-    "@sleeperhq/mini-core": "1.9.1",
+    "@sleeperhq/mini-core": "1.9.3",
     "amazon-cognito-identity-js": "6.3.2",
     "crypto-js": "3.3.0",
     "decimal.js-light": "2.5.1",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sleeperhq/mini-core",
-  "version": "1.9.1",
+  "version": "1.9.3",
   "description": "Core library frameworks for developing Sleeper Mini Apps.",
   "main": "index.ts",
   "types": "index.d.ts",
@@ -50,6 +50,7 @@
     "react-refresh": "0.14.0",
     "react-test-renderer": "17.0.2",
     "regenerator-runtime": "0.13.11",
+    "string-replace-loader": "3.1.0",
     "terser-webpack-plugin": "5.3.6",
     "webpack": "5.75.0"
   },

package/src/common/packet_parser.js

@@ -0,0 +1,79 @@
+class PacketParser {
+  constructor(props) {
+    this.logsEnabled = props.logsEnabled || false;
+    this.messageLength = 0;
+    this.messageType = '';
+    this.messageLength = 0;
+    this.partialMessage = '';
+    this.onMessageRecieved = props.onMessageRecieved;
+  }
+
+  parseMessage(msgString) {
+    while (msgString.length > 0) {
+      if (this.messageLength === 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);
+          this.messageType = headerObject.type;
+          this.messageLength = headerObject.size;
+        } catch (e) {
+          console.log("[Sleeper] Message header malformed, throwing out message.");
+          this.messageLength = 0;
+          this.messageType = '';
+          return;
+        }
+
+        msgString = msgString.substring(delimit + 1);
+      }
+
+      const partialLength = this.messageLength - this.partialMessage.length;
+      if (partialLength < 0) {
+        // We need to wait for more data
+        this.partialMessage += msgString;
+        return;
+      }
+
+      const remainingLength = msgString.length - partialLength;
+      if (remainingLength === 0) {
+        // We have the full message
+        this.partialMessage += msgString;
+        msgString = '';
+        if (this.logsEnabled) console.log("[Sleeper] Message built.", this.partialMessage.length);
+        
+      } else {
+        // We have more than the full message
+        this.partialMessage += msgString.substring(0, partialLength);
+        msgString = msgString.substring(partialLength);
+
+        if (remainingLength <= 0) {
+          // We have less than the full message
+          if (this.logsEnabled) console.log("[Sleeper] Building message: ", this.partialMessage.length, this.messageLength, remainingLength);
+          return;
+        }
+      }
+
+      try {
+        const json = JSON.parse(this.partialMessage);
+        this.partialMessage = '';
+        this.messageLength = 0;
+
+        this.onMessageRecieved({
+          type: this.messageType,
+          data: json,
+        });
+      } catch (e) {
+        console.log("[Sleeper] Failed to parse message: ", e);
+        return;
+      }
+    }
+  }
+
+};
+
+module.exports = PacketParser;

package/src/dev_server/index.tsx

@@ -1,20 +1,19 @@
-import React, {useEffect, useRef, useState} from 'react';
-import {Platform, NativeModules} from 'react-native';
-import {Config, SocketMessage} from '../types';
+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 partialMessage = useRef('');
-  const messageLength = useRef(0);
-  const messageType = useRef('');
   const _retryTimer = useRef<NodeJS.Timeout>();
+  const packetParser = useRef<PacketParser>();
 
   const [data, setData] = useState({
     platform: '',
@@ -29,92 +28,6 @@ const DevServer = props => {
     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._context, handler);
-          props.onContextChanged(context, json._entitlements);
-        } else if (messageType.current === `partialContext`) {
-          // We are updating a partial Context
-          props.onContextUpdated(json._context);
-        } else if (messageType.current === 'entitlements') {
-          props.onEntitlementsUpdated(json._entitlements);
-        }
-
-        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);
@@ -187,9 +100,35 @@ const DevServer = props => {
     // @ts-ignore
     const ipAddress = netInfoDetails?.ipAddress;
 
-    const scriptURL = NativeModules.SourceCode.scriptURL;
-    const address = scriptURL.split('://')[1].split('/')[0];
-    const packagerIP = address.split(':')[0];
+    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.');
@@ -203,15 +142,17 @@ const DevServer = props => {
       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, ...args) => {
-      const handler = proxyHandler(connection.current);
-      const onSocketHandler = onSocket(handler);
-      onSocketHandler(data);
+    connection.current.on('data', (data) => {
+      const msgString: string = data.toString();
+      packetParser.current?.parseMessage(msgString);
     });
     connection.current.on('error', err => {
       return stopSocket();
@@ -223,6 +164,7 @@ const DevServer = props => {
 
   const stopSocket = (retry = true) => {
     _onConnected(false);
+    packetParser.current = undefined;
 
     if (connection.current) {
       connection.current.destroy();

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

@@ -1,23 +1,45 @@
 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 appConfig = await import(appJsonPath);
   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();
-  client.connect(packagerConnectPort, appConfig.remoteIP, () => {
+  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 ?? '',
@@ -30,12 +52,33 @@ const packagerConnect = async (rootPath) => {
         console.log('Error sending message to Sleeper App:', err);
       }
     });
+  });
 
-    client.on('error', () => {
-      client.destroy();
-    });
+  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();
   };

package/start.tsx

@@ -9,6 +9,10 @@ import {
 } from 'react-native';
 import {DevServer, Types} from '.';
 
+const console_modified = global.console as any;
+console_modified.log_mini = (...args: any[]) => { console.log('[MiniLog]', ...args); }
+global.console = console_modified;
+
 import 'root/package_list';
 import config from 'root/app.json';
 import Project from 'app';

package/webpack.config.js

@@ -3,6 +3,7 @@ const TerserPlugin = require('../../../node_modules/terser-webpack-plugin');
 const Repack = require('../../../node_modules/@callstack/repack');
 const config = require('../../../app.json');
 const {dependencies} = require('../../../package.json');
+const {RebuildNotifyPlugin} = require('./src/plugins/rebuildNotifyPlugin')
 
 const {samples, selectedSample} = config;
 const sampleClassPath = `../../../src/${samples[selectedSample]}`;
@@ -220,6 +221,15 @@ module.exports = env => {
             },
           },
         },
+        {
+          test: /\.[jt]sx?$/,
+          include: /src/,
+          loader: 'string-replace-loader',
+          options: {
+            search: 'console.log',
+            replace: 'console.log_mini',
+          }
+        },
         /**
          * This loader handles all static assets (images, video, audio and others), so that you can
          * use (reference) them inside your application.
@@ -304,6 +314,8 @@ module.exports = env => {
         },
       }),
 
+      new RebuildNotifyPlugin(config),
+
       // new Repack.plugins.ChunksToHermesBytecodePlugin({
       //   enabled: !dev,
       //   test: /\.(js)?bundle$/,