How to use metro - 10 common examples

const { createBlacklist } = require('metro');
// const { mergeConfig } = require('metro-config');

const rootDir = resolve(__dirname, '..');
const packagesDir = resolve(rootDir, 'packages');

const isDirectory = source => statSync(source).isDirectory() && !source.includes('/template');
const firebaseModules = readdirSync(packagesDir)
  .map(name => join(packagesDir, name))
  .filter(isDirectory);

const config = {
  projectRoot: __dirname,
  resolver: {
    useWatchman: !process.env.TEAMCITY_VERSION,
    blackListRE: createBlacklist([
      /.*\/__fixtures__\/.*/,
      /.*\/template\/project\/node_modules\/react-native\/.*/,
      new RegExp(`^${escape(resolve(rootDir, 'docs'))}\\/.*$`),
      new RegExp(`^${escape(resolve(rootDir, 'tests/ios'))}\\/.*$`),
      new RegExp(`^${escape(resolve(rootDir, 'packages/template/project'))}\\/.*$`),
      new RegExp(`^${escape(resolve(rootDir, 'packages/template/project/node_modules'))}\\/.*$`),
      new RegExp(
        `^${escape(resolve(rootDir, 'packages/template/project/node_modules/react-native'))}\\/.*$`,
      ),
      new RegExp(`^${escape(resolve(rootDir, 'tests/e2e'))}\\/.*$`),
      new RegExp(`^${escape(resolve(rootDir, 'tests/android'))}\\/.*$`),
      new RegExp(`^${escape(resolve(rootDir, 'tests/functions'))}\\/.*$`),
    ]),
    extraNodeModules: new Proxy(
      {},
      {

const { resolve, join } = require("path");
const { createBlacklist } = require("metro");
const { mergeConfig } = require("metro-config");
const { DEFAULT } = require("react-native/local-cli/util/Config");

// https://github.com/facebook/react-native/blob/master/local-cli/core/Constants.js
// https://github.com/facebook/react-native/blob/master/local-cli/util/Config.js
const config = {
  resolver: {
    blackListRE: createBlacklist([
      new RegExp(
        `^${escape(resolve(__dirname, "..", "..", "node_modules"))}\\/.*$`
      )
    ]),
    extraNodeModules: new Proxy(
      {},
      {
        get: (target, name) => {
          if (name === "react-native-location") {
            return join(__dirname, `../../src`);
          }
          return join(__dirname, `node_modules/${name}`);
        }
      }
    ),
    platforms: ["android", "ios"]

const out = path.join(pluginCache, fileName);
  const result = Object.assign({}, packageJSON, {rootDir, name, entry, out});
  // check if plugin needs to be compiled
  const rootDirCtime = await mostRecentlyChanged(rootDir);
  if (
    !options.force &&
    fs.existsSync(out) &&
    rootDirCtime < fs.lstatSync(out).ctime
  ) {
    // eslint-disable-next-line no-console
    console.log(`🥫  Using cached version of ${name}...`);
    return result;
  } else {
    console.log(`⚙️  Compiling ${name}...`); // eslint-disable-line no-console
    try {
      await Metro.runBuild(
        {
          reporter: {update: () => {}},
          projectRoot: rootDir,
          watchFolders: [__dirname, rootDir],
          serializer: {
            getRunModuleStatement: moduleID =>
              `module.exports = global.__r(${moduleID}).default;`,
            createModuleIdFactory,
          },
          transformer: {
            babelTransformerPath: path.join(
              __dirname,
              'transforms',
              'index.js',
            ),
          },

const middlewareManager = new MiddlewareManager({
    host: args.host,
    port: metroConfig.server.port,
    watchFolders: metroConfig.watchFolders,
  });

  middlewareManager.getConnectInstance().use(morgan('combined'));

  metroConfig.watchFolders.forEach(
    middlewareManager.serveStatic.bind(middlewareManager)
  );

  metroConfig.server.enhanceMiddleware = middleware =>
    middlewareManager.getConnectInstance().use(middleware);

  const serverInstance = await Metro.runServer(metroConfig, {
    host: args.host,
    secure: args.https,
    secureCert: args.cert,
    secureKey: args.key,
    hmrEnabled: true,
  });

  const wsProxy = webSocketProxy.attachToServer(
    serverInstance,
    '/debugger-proxy'
  );
  const ms = messageSocket.attachToServer(serverInstance, '/message');
  middlewareManager.attachDevToolsSocket(wsProxy);
  middlewareManager.attachDevToolsSocket(ms);

  // In Node 8, the default keep-alive for an HTTP connection is 5 seconds. In

module.exports = async function metro(data) {
  const config = await configure(data);

  //
  // Metro inconsistencies:
  //
  // You can configure the `host` through the server config object, but not
  // the port number. They are extracting that from `config.server` object.
  // To provide consistency in the configuration we're going to forcefully
  // override the config.server with our own config data:
  //
  config.server.port = data.port;
  config.server.enableVisualizer = false;
  config.server.runInspectorProxy = false;

  const server = await Metro.runServer(config, {
    hmrEnabled: false,
    host: data.hostname
  });

  //
  // Ideally we want to piggyback the WebSocket servers that Metro creates,
  // but unfortunately there is no way to get into their instances, and they
  // don't listen to responses from the server, which is something that we
  // need in order to stream back the test results.
  //
  const ws = new WebSocketServer({
    path: '/ekke',
    server
  });

  return { ws, server };

const options = {
    platform: args.platform,
    entryFile: relativePath,
    dev: args.dev,
    minify: false,
    generateSourceMaps: !args.dev,
  };

  const writeToFile = args.output;
  const outStream = writeToFile
    ? fs.createWriteStream(args.output)
    : process.stdout;

  const deps = packagerInstance
    ? await packagerInstance.getOrderedDependencyPaths(options)
    : await Metro.getOrderedDependencyPaths(config, options);

  deps.forEach(modulePath => {
    // Temporary hack to disable listing dependencies not under this directory.
    // Long term, we need either
    // (a) JS code to not depend on anything outside this directory, or
    // (b) Come up with a way to declare this dependency in Buck.
    const isInsideProjectRoots =
      config.watchFolders.filter(root => modulePath.startsWith(root)).length >
      0;

    if (isInsideProjectRoots) {
      outStream.write(`${modulePath}\n`);
    }
  });
  return writeToFile
    ? denodeify(outStream.end).bind(outStream)()

const options = {
    platform: args.platform,
    entryFile: relativePath,
    dev: args.dev,
    minify: false,
    generateSourceMaps: !args.dev,
  };

  const writeToFile = args.output;
  const outStream = writeToFile
    ? fs.createWriteStream(args.output)
    : process.stdout;

  const deps = packagerInstance
    ? await packagerInstance.getOrderedDependencyPaths(options)
    : await Metro.getOrderedDependencyPaths(config, options);

  deps.forEach(modulePath => {
    // Temporary hack to disable listing dependencies not under this directory.
    // Long term, we need either
    // (a) JS code to not depend on anything outside this directory, or
    // (b) Come up with a way to declare this dependency in Buck.
    const isInsideProjectRoots =
      config.watchFolders.filter(root => modulePath.startsWith(root)).length >
      0;

    if (isInsideProjectRoots) {
      outStream.write(`${modulePath}\n`);
    }
  });
  return writeToFile
    ? denodeify(outStream.end).bind(outStream)()

sourceMapUrl,
    dev: args.dev,
    minify: args.minify !== undefined ? args.minify : !args.dev,
    platform: args.platform,
  };

  const server = new Server(config);

  try {
    const bundle = await output.build(server, requestOpts);

    await output.save(bundle, args, logger.info);

    // Save the assets of the bundle
    const outputAssets: AssetData[] = await server.getAssets({
      ...Server.DEFAULT_BUNDLE_OPTIONS,
      ...requestOpts,
      bundleType: 'todo',
    });

    // When we're done saving bundle output and the assets, we're done.
    return await saveAssets(outputAssets, args.platform, args.assetsDest);
  } finally {
    server.end();
  }
}

function setup() {
  var client = new HmrClient(
    // TODO: make the URL/Entrypoint configurable
    `ws://localhost:8082/hot?bundleEntry=src/index.js`,
  );
  client.enable();

  client.on('update', function() {
    if (lastError) {
      clearOutdatedErrors();
      ErrorOverlay.dismissBuildError();
    }
    lastError = null;
  });
  client.on('error', function(error) {
    lastError = error;
    clearOutdatedErrors();
    ErrorOverlay.reportBuildError(error.message);

process.env.NODE_ENV = args.dev ? 'development' : 'production';

  let sourceMapUrl = args.sourcemapOutput;
  if (sourceMapUrl && !args.sourcemapUseAbsolutePath) {
    sourceMapUrl = path.basename(sourceMapUrl);
  }

  const requestOpts: RequestOptions = {
    entryFile: args.entryFile,
    sourceMapUrl,
    dev: args.dev,
    minify: args.minify !== undefined ? args.minify : !args.dev,
    platform: args.platform,
  };

  const server = new Server(config);

  try {
    const bundle = await output.build(server, requestOpts);

    await output.save(bundle, args, logger.info);

    // Save the assets of the bundle
    const outputAssets: AssetData[] = await server.getAssets({
      ...Server.DEFAULT_BUNDLE_OPTIONS,
      ...requestOpts,
      bundleType: 'todo',
    });

    // When we're done saving bundle output and the assets, we're done.
    return await saveAssets(outputAssets, args.platform, args.assetsDest);
  } finally {