refactor: add @expo/dev-server

packages/dev-server/.gitignore

@@ -0,0 +1,2 @@
+node_modules
+build

packages/dev-server/LICENSE

@@ -0,0 +1,22 @@
+The MIT License (MIT)
+
+Copyright (c) 2015-present 650 Industries, Inc. (aka Expo)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+

packages/dev-server/README.md

@@ -0,0 +1 @@
+# dev-server

packages/dev-server/babel.config.js

@@ -0,0 +1,11 @@
+module.exports = function(api) {
+  api.cache(true);
+  return {
+    // Only use this when running tests
+    env: {
+      test: {
+        presets: ['@expo/babel-preset-cli'],
+      },
+    },
+  };
+};

packages/dev-server/package.json

@@ -0,0 +1,58 @@
+{
+  "name": "@expo/dev-server",
+  "version": "0.0.0",
+  "description": "Development servers for starting React Native projects",
+  "main": "build/MetroDevServer.js",
+  "scripts": {
+    "watch": "tsc --watch",
+    "build": "tsc",
+    "prepare": "yarn run clean && yarn build",
+    "clean": "rm -rf build ./tsconfig.tsbuildinfo",
+    "lint": "eslint .",
+    "test": "jest"
+  },
+  "jest": {
+    "testEnvironment": "node",
+    "roots": [
+      "src"
+    ]
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/expo/expo-cli.git",
+    "directory": "packages/dev-server"
+  },
+  "keywords": [
+    "json",
+    "react-native",
+    "expo",
+    "react",
+    "metro",
+    "dev-server",
+    "bundler"
+  ],
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/expo/expo-cli/issues"
+  },
+  "homepage": "https://github.com/expo/expo-cli/tree/master/packages/dev-server#readme",
+  "files": [
+    "build",
+    "external"
+  ],
+  "dependencies": {
+    "@expo/bunyan": "^3.0.2",
+    "@expo/config": "^2.5.0",
+    "@expo/metro-config": "0.0.3",
+    "metro": "^0.58.0"
+  },
+  "devDependencies": {
+    "@expo/babel-preset-cli": "^0.2.1",
+    "body-parser": "^1.19.0",
+    "jest": "^25.3.0",
+    "node-fetch": "^2.6.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

packages/dev-server/src/MetroDevServer.ts

@@ -0,0 +1,45 @@
+import Metro from 'metro';
+import { createDevServerMiddleware } from '@react-native-community/dev-server-api';
+import Log from '@expo/bunyan';
+import * as ExpoMetroConfig from '@expo/metro-config';
+import clientLogsMiddleware from './middleware/clientLogsMiddleware';
+
+export async function runMetroDevServerAsync(
+  projectRoot: string,
+  options: ExpoMetroConfig.LoadOptions & { logger: Log }
+) {
+  let reportEvent: ((event: any) => void) | undefined;
+  // TODO(ville): implement a reporter
+  const reporter = {
+    update(event: any) {
+      const { type, ...data } = event;
+      console.log(`[${event.type}]`, data);
+      if (reportEvent) {
+        reportEvent(event);
+      }
+    },
+  };
+
+  const metroConfig = await ExpoMetroConfig.loadAsync(projectRoot, { reporter, ...options });
+
+  const { middleware, attachToServer } = createDevServerMiddleware({
+    port: metroConfig.server.port,
+    // @ts-ignore can't pass a mutable array
+    watchFolders: metroConfig.watchFolders,
+  });
+  middleware.use(clientLogsMiddleware(options.logger));
+
+  const customEnhanceMiddleware = metroConfig.server.enhanceMiddleware;
+  // @ts-ignore can't mutate readonly config
+  metroConfig.server.enhanceMiddleware = (metroMiddleware: any, server: unknown) => {
+    if (customEnhanceMiddleware) {
+      metroMiddleware = customEnhanceMiddleware(metroMiddleware, server);
+    }
+    return middleware.use(metroMiddleware);
+  };
+
+  const serverInstance = await Metro.runServer(metroConfig, { hmrEnabled: true });
+
+  const { eventsSocket } = attachToServer(serverInstance);
+  reportEvent = eventsSocket.reportEvent;
+}

packages/dev-server/src/middleware/__tests__/__snapshots__/clientLogsMiddleware-test.ts.snap

@@ -0,0 +1,8 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`logs messages from the device 1`] = `
+Array [
+  "iPhone: [info] Hello world!",
+  "iPhone: [error] Something went wrong...",
+]
+`;

packages/dev-server/src/middleware/__tests__/clientLogsMiddleware-test.ts

@@ -0,0 +1,115 @@
+import http from 'http';
+
+import bodyParser from 'body-parser';
+import bunyan from '@expo/bunyan';
+import connect from 'connect';
+import fetch from 'node-fetch';
+
+import clientLogsMiddleware from '../clientLogsMiddleware';
+
+const headers = {
+  'content-type': 'application/json',
+  'device-id': '11111111-CAFE-0000-0000-111111111111',
+  'session-id': '22222222-C0DE-0000-0000-222222222222',
+  'device-name': 'iPhone',
+};
+
+it('logs messages from the device', async () => {
+  const { server, url, logStream } = await createServerAsync();
+  try {
+    const response = await fetch(`${url}/logs`, {
+      method: 'POST',
+      headers,
+      body: JSON.stringify([
+        {
+          count: 1,
+          level: 'info',
+          body: ['Hello world!'],
+          includesStack: false,
+          groupDepth: 0,
+        },
+        {
+          count: 2,
+          level: 'error',
+          body: [
+            {
+              message: 'Something went wrong...',
+              stack: 'App.js:3:12 in <global>',
+            },
+          ],
+          includesStack: true,
+          groupDepth: 0,
+        },
+        {
+          // We want this to be filtered out.
+          count: 3,
+          level: 'info',
+          body: [
+            'BugReporting extraData:',
+            'Object {\n' +
+              '  "AppRegistry.runApplication1": "Running \\"main\\" with yada yada yada",\n' +
+              '}',
+          ],
+          includesStack: false,
+          groupDepth: 0,
+        },
+      ]),
+    });
+    expect(response.ok).toBe(true);
+    expect(logStream.output).toMatchSnapshot();
+  } finally {
+    server.close();
+  }
+});
+
+class TestLogStream {
+  output: string[] = [];
+
+  write(record: any) {
+    const message = record.includesStack ? JSON.parse(record.msg).message : record.msg;
+    const deviceName = record.deviceName ?? '';
+    if (record.level < bunyan.INFO) {
+      this.output.push(`${deviceName}: [debug] ${message}`);
+    } else if (record.level < bunyan.WARN) {
+      this.output.push(`${deviceName}: [info] ${message}`);
+    } else if (record.level < bunyan.ERROR) {
+      this.output.push(`${deviceName}: [warn] ${message}`);
+    } else {
+      this.output.push(`${deviceName}: [error] ${message}`);
+    }
+  }
+}
+
+async function createServerAsync() {
+  const logStream = new TestLogStream();
+  const logger = bunyan.createLogger({
+    name: 'expo-test',
+    streams: [
+      {
+        type: 'raw',
+        stream: logStream,
+        level: 'info',
+      },
+    ],
+  });
+  const app = connect()
+    .use(bodyParser.json())
+    .use(clientLogsMiddleware(logger));
+
+  const server = http.createServer(app);
+  await new Promise((resolve, reject) =>
+    server.listen((error: any) => {
+      if (error) reject(error);
+      else resolve();
+    })
+  );
+
+  const address = server.address();
+  if (!address || typeof address === 'string') throw new Error('server has no port');
+
+  return {
+    server,
+    url: `http://localhost:${address.port}`,
+    logStream,
+  };
+}

packages/dev-server/src/middleware/clientLogsMiddleware.ts

@@ -0,0 +1,83 @@
+import http from 'http';
+import Log from '@expo/bunyan';
+
+export default function clientLogsMiddleware(logger: Log) {
+  return function(
+    req: http.IncomingMessage & { body?: any },
+    res: http.ServerResponse,
+    next: (err?: any) => void
+  ) {
+    try {
+      const deviceId = req.headers['device-id'];
+      const deviceName = req.headers['device-name'];
+      if (deviceId && deviceName && req.body) {
+        _handleDeviceLogs(logger, deviceId.toString(), deviceName.toString(), req.body);
+      }
+    } catch (error) {
+      logger.error({ tag: 'expo' }, `Error getting device logs: ${error} ${error.stack}`);
+      next(error);
+    }
+    res.end('Success');
+  };
+}
+
+function _isIgnorableBugReportingExtraData(body: any[]) {
+  return body.length === 2 && body[0] === 'BugReporting extraData:';
+}
+
+function _isAppRegistryStartupMessage(body: any[]) {
+  return (
+    body.length === 1 &&
+    (/^Running application "main" with appParams:/.test(body[0]) ||
+      /^Running "main" with \{/.test(body[0]))
+  );
+}
+
+type ConsoleLogLevel = 'info' | 'warn' | 'error' | 'debug';
+
+function _handleDeviceLogs(logger: Log, deviceId: string, deviceName: string, logs: any) {
+  for (let i = 0; i < logs.length; i++) {
+    const log = logs[i];
+    let body = typeof log.body === 'string' ? [log.body] : log.body;
+    let { level } = log;
+
+    if (_isIgnorableBugReportingExtraData(body)) {
+      level = 'debug';
+    }
+    if (_isAppRegistryStartupMessage(body)) {
+      body = [`Running application on ${deviceName}.`];
+    }
+
+    const args = body.map((obj: any) => {
+      if (typeof obj === 'undefined') {
+        return 'undefined';
+      }
+      if (obj === 'null') {
+        return 'null';
+      }
+      if (typeof obj === 'string' || typeof obj === 'number' || typeof obj === 'boolean') {
+        return obj;
+      }
+      try {
+        return JSON.stringify(obj);
+      } catch (e) {
+        return obj.toString();
+      }
+    });
+    const logLevel =
+      level === 'info' || level === 'warn' || level === 'error' || level === 'debug'
+        ? (level as ConsoleLogLevel)
+        : 'info';
+    logger[logLevel](
+      {
+        tag: 'device',
+        deviceId,
+        deviceName,
+        groupDepth: log.groupDepth,
+        shouldHide: log.shouldHide,
+        includesStack: log.includesStack,
+      },
+      ...args
+    );
+  }
+}

packages/dev-server/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "@expo/babel-preset-cli/tsconfig.base",
+  "include": ["src/**/*.ts"],
+  "compilerOptions": {
+    "outDir": "build",
+    "rootDir": "src"
+  }
+}