/** * Copyright (c) Facebook, Inc. and its affiliates. * * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. * * @format */ const electronBinary: string = require('electron') as any; import codeFrame from '@babel/code-frame'; import socketIo from 'socket.io'; import express, {Express} from 'express'; import detect from 'detect-port'; import child from 'child_process'; import AnsiToHtmlConverter from 'ansi-to-html'; import chalk from 'chalk'; import http from 'http'; import path from 'path'; import fs from 'fs-extra'; import {compileMain} from './build-utils'; import Watchman from '../static/watchman'; import Metro from 'metro'; import MetroResolver from 'metro-resolver'; import getAppWatchFolders from './get-app-watch-folders'; import {staticDir, appDir, babelTransformationsDir} from './paths'; import isFB from './isFB'; const ansiToHtmlConverter = new AnsiToHtmlConverter(); const DEFAULT_PORT = (process.env.PORT || 3000) as number; let shutdownElectron: (() => void) | undefined = undefined; function launchElectron({ devServerURL, bundleURL, electronURL, }: { devServerURL: string; bundleURL: string; electronURL: string; }) { if (process.argv.includes('--no-embedded-plugins')) { process.env.FLIPPER_NO_EMBEDDED_PLUGINS = 'true'; } const args = [ path.join(staticDir, 'index.js'), '--remote-debugging-port=9222', ...process.argv, ]; const proc = child.spawn(electronBinary, args, { cwd: staticDir, env: { ...process.env, SONAR_ROOT: process.cwd(), BUNDLE_URL: bundleURL, ELECTRON_URL: electronURL, DEV_SERVER_URL: devServerURL, }, stdio: 'inherit', }); const electronCloseListener = () => { process.exit(); }; const processExitListener = () => { proc.kill(); }; proc.on('close', electronCloseListener); process.on('exit', processExitListener); return () => { proc.off('close', electronCloseListener); process.off('exit', processExitListener); proc.kill(); }; } async function startMetroServer(app: Express) { const watchFolders = await getAppWatchFolders(); const metroBundlerServer = await Metro.runMetro({ projectRoot: appDir, watchFolders, transformer: { babelTransformerPath: path.join(babelTransformationsDir, 'transform-app'), }, resolver: { resolverMainFields: ['flipper:source', 'module', 'main'], blacklistRE: /\.native\.js$/, resolveRequest: (context: any, moduleName: string, platform: string) => { if (moduleName.startsWith('./localhost:3000')) { moduleName = moduleName.replace('./localhost:3000', '.'); } return MetroResolver.resolve( {...context, resolveRequest: null}, moduleName, platform, ); }, }, watch: true, }); app.use(metroBundlerServer.processRequest.bind(metroBundlerServer)); } function startAssetServer( port: number, ): Promise<{app: Express; server: http.Server}> { const app = express(); app.use((req, res, next) => { if (knownErrors[req.url] != null) { delete knownErrors[req.url]; outputScreen(); } next(); }); app.use((req, res, next) => { res.header('Cache-Control', 'private, no-cache, no-store, must-revalidate'); res.header('Expires', '-1'); res.header('Pragma', 'no-cache'); next(); }); app.post('/_restartElectron', (req, res) => { if (shutdownElectron) { shutdownElectron(); } shutdownElectron = launchElectron({ devServerURL: `http://localhost:${port}`, bundleURL: `http://localhost:${port}/src/init.bundle`, electronURL: `http://localhost:${port}/index.dev.html`, }); res.end(); }); app.get('/', (req, res) => { fs.readFile(path.join(staticDir, 'index.dev.html'), (err, content) => { res.end(content); }); }); app.use(express.static(staticDir)); app.use(function (err: any, req: any, res: any, _next: any) { knownErrors[req.url] = err; outputScreen(); res.status(500).send('Something broke, check the console!'); }); const server = http.createServer(app); return new Promise((resolve) => { server.listen(port, 'localhost', () => resolve({app, server})); }); } async function addWebsocket(server: http.Server) { const io = socketIo(server); // notify connected clients that there's errors in the console io.on('connection', (client) => { if (hasErrors()) { client.emit('hasErrors', ansiToHtmlConverter.toHtml(buildErrorScreen())); } }); // refresh the app on changes to the src folder // this can be removed once metroServer notifies us about file changes try { const watchman = new Watchman(path.resolve(__dirname, '..')); await watchman.initialize(); await Promise.all( ['app', 'pkg', 'doctor'].map((dir) => watchman.startWatchFiles( dir, () => { io.emit('refresh'); }, { excludes: ['**/__tests__/**/*', '**/node_modules/**/*', '**/.*'], }, ), ), ); } catch (err) { console.error( 'Failed to start watching for changes using Watchman, continue without hot reloading', err, ); } return io; } const knownErrors: {[key: string]: any} = {}; function hasErrors() { return Object.keys(knownErrors).length > 0; } function buildErrorScreen() { const lines = [ chalk.red(`✖ Found ${Object.keys(knownErrors).length} errors`), '', ]; for (const url in knownErrors) { const err = knownErrors[url]; if (err.filename != null && err.lineNumber != null && err.column != null) { lines.push(chalk.inverse(err.filename)); lines.push(); lines.push(err.message); lines.push( codeFrame( fs.readFileSync(err.filename, 'utf8'), err.lineNumber, err.column, ), ); } else { lines.push(err.stack); } lines.push(''); } return lines.join('\n'); } function outputScreen(socket?: socketIo.Server) { // output screen if (hasErrors()) { const errorScreen = buildErrorScreen(); console.error(errorScreen); // notify live clients of errors socket?.emit('hasErrors', ansiToHtmlConverter.toHtml(errorScreen)); } else { // eslint-disable-next-line no-console console.log(chalk.green('✔ No known errors')); } } (async () => { if (isFB && process.env.FLIPPER_FB === undefined) { process.env.FLIPPER_FB = 'true'; } const port = await detect(DEFAULT_PORT); const {app, server} = await startAssetServer(port); const socket = await addWebsocket(server); await startMetroServer(app); outputScreen(socket); await compileMain(); shutdownElectron = launchElectron({ devServerURL: `http://localhost:${port}`, bundleURL: `http://localhost:${port}/src/init.bundle`, electronURL: `http://localhost:${port}/index.dev.html`, }); })();