@tamagui/cli 1.1.12 → 1.1.13

package/src/vendor/debugger-app/src/debuggerWorker.js

@@ -0,0 +1,84 @@
+/**
+ * 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.
+ *
+ */
+
+/* global __fbBatchedBridge, importScripts */
+/* eslint no-unused-vars: 0 */
+/* eslint no-restricted-globals: 0 */
+
+onmessage = (function () {
+  var visibilityState;
+  var showVisibilityWarning = (function () {
+    var hasWarned = false;
+    return function () {
+      // Wait until `YellowBox` gets initialized before displaying the warning.
+      if (hasWarned || console.warn.toString().includes('[native code]')) {
+        return;
+      }
+      hasWarned = true;
+      console.warn(
+        'Remote debugger is in a background tab which may cause apps to ' +
+          'perform slowly. Fix this by foregrounding the tab (or opening it in ' +
+          'a separate window).'
+      );
+    };
+  })();
+
+  var messageHandlers = {
+    executeApplicationScript: function (message, sendReply) {
+      for (var key in message.inject) {
+        self[key] = JSON.parse(message.inject[key]);
+      }
+      var error;
+      try {
+        importScripts(message.url);
+      } catch (err) {
+        error = err.message;
+      }
+      sendReply(null /* result */, error);
+    },
+    setDebuggerVisibility: function (message) {
+      visibilityState = message.visibilityState;
+    },
+  };
+
+  return function (message) {
+    if (visibilityState === 'hidden') {
+      showVisibilityWarning();
+    }
+
+    var object = message.data;
+
+    var sendReply = function (result, error) {
+      postMessage({ replyID: object.id, result: result, error: error });
+    };
+
+    var handler = messageHandlers[object.method];
+    if (handler) {
+      // Special cased handlers
+      handler(object, sendReply);
+    } else {
+      // Other methods get called on the bridge
+      var returnValue = [[], [], [], 0];
+      var error;
+      try {
+        if (typeof __fbBatchedBridge === 'object') {
+          returnValue = __fbBatchedBridge[object.method].apply(
+            null,
+            object.arguments
+          );
+        } else {
+          error = 'Failed to call function, __fbBatchedBridge is undefined';
+        }
+      } catch (err) {
+        error = err.message;
+      } finally {
+        sendReply(JSON.stringify(returnValue), error);
+      }
+    }
+  };
+})();

package/src/vendor/debugger-app/src/index.css

@@ -0,0 +1,37 @@
+html,
+body {
+  font-family: Helvetica, Verdana, sans-serif;
+  font-size: large;
+  font-weight: 200;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+}
+.shortcut {
+  border-radius: 4px;
+  color: #eee;
+  background-color: #333;
+  font-family: 'Monaco', monospace;
+  font-size: medium;
+  letter-spacing: 3px;
+  padding: 4px;
+}
+.content {
+  padding: 10px;
+}
+.reload-btn {
+  padding: 5px 10px;
+}
+body.dark {
+  background-color: #242424;
+  color: #afafaf;
+}
+.dark .shortcut {
+  color: #c1c1c1;
+}
+.dark a {
+  color: #3b99fc;
+}
+input[type='checkbox'] {
+  vertical-align: middle;
+}

package/src/vendor/debugger-app/src/index.js

@@ -0,0 +1,195 @@
+/**
+ * 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.
+ *
+ */
+
+/* eslint-env browser */
+import './index.css';
+import blueIcon from './assets/blue-icon.png';
+import grayIcon from './assets/gray-icon.png';
+import orangeIcon from './assets/orange-icon.png';
+import DebuggerWorker from './debuggerWorker.js';
+
+const isMacLike = /(Mac|iPhone|iPod|iPad)/i.test(navigator.platform);
+const refreshShortcut = isMacLike ? '⌘R' : 'Ctrl R';
+window.onload = function () {
+  if (!isMacLike) {
+    document.getElementById('shortcut').innerHTML = 'Ctrl⇧J';
+  }
+  Page.render();
+};
+
+window.onReloadClicked = function () {
+  var xhr = new XMLHttpRequest();
+  xhr.open('GET', `${window.location.origin}/reload`, true);
+  xhr.send();
+};
+
+const Page = (window.Page = {
+  state: {
+    isDark:
+      localStorage.getItem('darkTheme') === null
+        ? window.matchMedia('(prefers-color-scheme: dark)').matches
+        : localStorage.getItem('darkTheme') === 'on',
+    isPriorityMaintained: localStorage.getItem('maintainPriority') === 'on',
+    status: { type: 'disconnected' },
+    visibilityState: document.visibilityState,
+  },
+
+  setState(partialState) {
+    Page.state = Object.assign({}, Page.state, partialState);
+    Page.render();
+  },
+
+  render() {
+    const { isDark, isPriorityMaintained, status, visibilityState } =
+      Page.state;
+
+    const statusNode = document.getElementById('status');
+    switch (status.type) {
+      case 'connected':
+        statusNode.innerHTML = 'Debugger session #' + status.id + ' active.';
+        break;
+      case 'error':
+        statusNode.innerHTML =
+          status.error.reason ||
+          'Disconnected from proxy. Attempting reconnection. Is node server running?';
+        break;
+      case 'connecting':
+      case 'disconnected':
+      // Fall through.
+      default:
+        statusNode.innerHTML =
+          'Waiting, press <span class="shortcut">' +
+          refreshShortcut +
+          '</span> in simulator to reload and connect.';
+        break;
+    }
+
+    const linkNode = document.querySelector('link[rel=icon]');
+    if (status.type === 'disconnected' || status.type === 'error') {
+      linkNode.href = grayIcon;
+    } else {
+      if (visibilityState === 'visible' || isPriorityMaintained) {
+        linkNode.href = blueIcon;
+      } else {
+        linkNode.href = orangeIcon;
+      }
+    }
+
+    const darkCheckbox = document.getElementById('dark');
+    document.body.classList.toggle('dark', isDark);
+    darkCheckbox.checked = isDark;
+    localStorage.setItem('darkTheme', isDark ? 'on' : '');
+
+    const maintainPriorityCheckbox =
+      document.getElementById('maintain-priority');
+    maintainPriorityCheckbox.checked = isPriorityMaintained;
+    localStorage.setItem('maintainPriority', isPriorityMaintained ? 'on' : '');
+  },
+
+  toggleDarkTheme() {
+    Page.setState({ isDark: !Page.state.isDark });
+  },
+
+  togglePriorityMaintenance() {
+    Page.setState({ isPriorityMaintained: !Page.state.isPriorityMaintained });
+  },
+});
+
+function connectToDebuggerProxy() {
+  const ws = new WebSocket(
+    'ws://' + window.location.host + '/debugger-proxy?role=debugger&name=Chrome'
+  );
+  let worker;
+
+  function createJSRuntime() {
+    // This worker will run the application JavaScript code,
+    // making sure that it's run in an environment without a global
+    // document, to make it consistent with the JSC executor environment.
+    worker = new DebuggerWorker();
+    worker.onmessage = function (message) {
+      ws.send(JSON.stringify(message.data));
+    };
+    window.onbeforeunload = function () {
+      return (
+        'If you reload this page, it is going to break the debugging session. ' +
+        'Press ' +
+        refreshShortcut +
+        ' on the device to reload.'
+      );
+    };
+    updateVisibility();
+  }
+
+  function shutdownJSRuntime() {
+    if (worker) {
+      worker.terminate();
+      worker = null;
+      window.onbeforeunload = null;
+    }
+  }
+
+  function updateVisibility() {
+    if (worker && !Page.state.isPriorityMaintained) {
+      worker.postMessage({
+        method: 'setDebuggerVisibility',
+        visibilityState: document.visibilityState,
+      });
+    }
+    Page.setState({ visibilityState: document.visibilityState });
+  }
+
+  ws.onopen = function () {
+    Page.setState({ status: { type: 'connecting' } });
+  };
+
+  ws.onmessage = function (message) {
+    if (!message.data) {
+      return;
+    }
+    const object = JSON.parse(message.data);
+
+    if (object.$event === 'client-disconnected') {
+      shutdownJSRuntime();
+      Page.setState({ status: { type: 'disconnected' } });
+      return;
+    }
+
+    if (!object.method) {
+      return;
+    }
+
+    // Special message that asks for a new JS runtime
+    if (object.method === 'prepareJSRuntime') {
+      shutdownJSRuntime();
+      console.clear();
+      createJSRuntime();
+      ws.send(JSON.stringify({ replyID: object.id }));
+      Page.setState({ status: { type: 'connected', id: object.id } });
+    } else if (object.method === '$disconnected') {
+      shutdownJSRuntime();
+      Page.setState({ status: { type: 'disconnected' } });
+    } else {
+      worker.postMessage(object);
+    }
+  };
+
+  ws.onclose = function (error) {
+    shutdownJSRuntime();
+    Page.setState({ status: { type: 'error', error } });
+    if (error.reason) {
+      console.warn(error.reason);
+    }
+    setTimeout(connectToDebuggerProxy, 500);
+  };
+
+  // Let debuggerWorker.js know when we're not visible so that we can warn about
+  // poor performance when using remote debugging.
+  document.addEventListener('visibilitychange', updateVisibility, false);
+}
+
+connectToDebuggerProxy();

package/src/vendor/debugger-app/webpack.config.cjs

@@ -0,0 +1,73 @@
+const path = require('path');
+const webpack = require('webpack');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+
+/**
+ * Webpack config for building client dashboard including debugger UI.
+ */
+
+const mode = process.env.NODE_ENV || 'development';
+
+module.exports = {
+  mode,
+  devtool: mode === 'development' ? 'cheap-module-source-map' : 'source-map',
+  context: __dirname,
+  entry: './src/index.js',
+  output: {
+    path: path.join(__dirname, 'dist'),
+    clean: true,
+    filename: 'static/js/[name].[contenthash:8].js',
+    publicPath: '/debugger-ui/',
+  },
+  module: {
+    rules: [
+      {
+        test: /debuggerWorker.js$/,
+        use: { loader: 'worker-loader' },
+      },
+      {
+        test: /\.(ts|js)x?$/,
+        loader: 'babel-loader',
+        options: {
+          babelrc: false,
+          configFile: require.resolve('./babel.config.cjs'),
+        },
+      },
+      {
+        test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
+        loader: require.resolve('url-loader'),
+        options: {
+          limit: 10000,
+          name: 'static/media/[name].[hash:8].[ext]',
+        },
+      },
+      {
+        test: /\.css$/,
+        use: [
+          {
+            loader: MiniCssExtractPlugin.loader,
+          },
+          {
+            loader: 'css-loader',
+            options: { importLoaders: 1 },
+          },
+        ],
+        sideEffects: true,
+      },
+    ],
+  },
+  plugins: [
+    new HtmlWebpackPlugin({
+      inject: true,
+      template: path.join(__dirname, './public/index.html'),
+    }),
+    new webpack.DefinePlugin({
+      'process.env.NODE_ENV': JSON.stringify(mode),
+    }),
+    new MiniCssExtractPlugin({
+      filename: 'static/css/[name].[contenthash:8].css',
+      chunkFilename: 'static/css/[name].[contenthash:8].chunk.css',
+    }),
+  ],
+};

package/src/vendor/repack/dev-server/src/createServer.ts

@@ -0,0 +1,127 @@
+import { Writable } from 'stream'
+
+// import debuggerAppPath from '@callstack/repack-debugger-app'
+import fastifySensible from '@fastify/sensible'
+import fastifyStatic from '@fastify/static'
+import Fastify from 'fastify'
+
+import apiPlugin from './plugins/api'
+import compilerPlugin from './plugins/compiler'
+import devtoolsPlugin from './plugins/devtools'
+// import faviconPlugin from './plugins/favicon'
+import multipartPlugin from './plugins/multipart'
+import symbolicatePlugin from './plugins/symbolicate'
+import wssPlugin from './plugins/wss'
+import { Internal, Server } from './types'
+
+/**
+ * Create instance of development server, powered by Fastify.
+ *
+ * @param config Server configuration.
+ * @returns `start` and `stop` functions as well as an underlying Fastify `instance`.
+ */
+export async function createServer(config: Server.Config) {
+  let delegate: Server.Delegate
+
+  /** Fastify instance powering the development server. */
+  const instance = Fastify({
+    logger: {
+      level: 'trace',
+      stream: new Writable({
+        write: (chunk, _encoding, callback) => {
+          const log = JSON.parse(chunk.toString())
+          delegate?.logger.onMessage(log)
+          instance.wss?.apiServer.send(log)
+          callback()
+        },
+      }),
+    },
+    ...(config.options.https ? { https: config.options.https } : undefined),
+  })
+
+  delegate = config.delegate({
+    log: instance.log,
+    notifyBuildStart: (platform) => {
+      instance.wss.apiServer.send({
+        event: Internal.EventTypes.BuildStart,
+        platform,
+      })
+    },
+    notifyBuildEnd: (platform) => {
+      instance.wss.apiServer.send({
+        event: Internal.EventTypes.BuildEnd,
+        platform,
+      })
+    },
+    broadcastToHmrClients: (event, platform, clientIds) => {
+      instance.wss.hmrServer.send(event, platform, clientIds)
+    },
+    broadcastToMessageClients: ({ method, params }) => {
+      instance.wss.messageServer.broadcast(method, params)
+    },
+  })
+
+  // Register plugins
+  await instance.register(fastifySensible)
+  await instance.register(wssPlugin, {
+    options: config.options,
+    delegate,
+  })
+  await instance.register(multipartPlugin)
+  await instance.register(apiPlugin, {
+    delegate,
+    prefix: '/api',
+  })
+  await instance.register(compilerPlugin, {
+    delegate,
+  })
+  await instance.register(symbolicatePlugin, {
+    delegate,
+  })
+  await instance.register(devtoolsPlugin, {
+    options: config.options,
+  })
+
+  console.warn('disable debugger-ui + favicon for now')
+  // await instance.register(fastifyStatic, {
+  //   root: debuggerAppPath,
+  //   prefix: '/debugger-ui',
+  //   prefixAvoidTrailingSlash: true,
+  // })
+
+  // below is to prevent showing `GET 400 /favicon.ico`
+  // errors in console when requesting the bundle via browser
+  // await instance.register(faviconPlugin)
+
+  instance.addHook('onSend', async (request, reply, payload) => {
+    reply.header('X-Content-Type-Options', 'nosniff')
+
+    const [pathname] = request.url.split('?')
+    if (pathname.endsWith('.map')) {
+      reply.header('Access-Control-Allow-Origin', 'devtools://devtools')
+    }
+
+    return payload
+  })
+
+  // Register routes
+  instance.head('/', async () => '')
+  instance.get('/', async () => delegate.messages.getHello())
+  instance.get('/status', async () => delegate.messages.getStatus())
+
+  /** Start the development server. */
+  async function start() {
+    await instance.listen(config.options.port, config.options.host)
+  }
+
+  /** Stop the development server. */
+  async function stop() {
+    await instance.close()
+  }
+
+  return {
+    start,
+    stop,
+    instance,
+  }
+}

package/src/vendor/repack/dev-server/src/index.ts

@@ -0,0 +1,2 @@
+export * from './createServer'
+export * from './types'

package/src/vendor/repack/dev-server/src/plugins/api/apiPlugin.ts

@@ -0,0 +1,50 @@
+import type { FastifyInstance } from 'fastify'
+
+import type { Server } from '../../types'
+
+const paramsSchema = {
+  type: 'object',
+  properties: {
+    platform: {
+      type: 'string',
+    },
+  },
+  required: ['platform'],
+}
+
+type Params = { platform: string }
+
+async function apiPlugin(
+  instance: FastifyInstance,
+  { delegate }: { delegate: Server.Delegate }
+) {
+  instance.get('/platforms', async (_request, reply) =>
+    delegate.api
+      ? reply.send({ data: await delegate.api.getPlatforms() })
+      : reply.notImplemented('Missing API delegate implementation')
+  )
+
+  instance.get<{ Params: Params }>(
+    '/:platform/assets',
+    { schema: { params: paramsSchema } },
+    async (request, reply) =>
+      delegate.api
+        ? reply.send({
+            data: await delegate.api.getAssets(request.params.platform),
+          })
+        : reply.notImplemented('Missing API delegate implementation')
+  )
+
+  instance.get<{ Params: Params }>(
+    '/:platform/stats',
+    { schema: { params: paramsSchema } },
+    async (request, reply) =>
+      delegate.api
+        ? reply.send({
+            data: await delegate.api?.getCompilationStats(request.params.platform),
+          })
+        : reply.notImplemented('Missing API delegate implementation')
+  )
+}
+
+export default apiPlugin

package/src/vendor/repack/dev-server/src/plugins/api/index.ts

@@ -0,0 +1 @@
+export { default } from './apiPlugin'

package/src/vendor/repack/dev-server/src/plugins/compiler/compilerPlugin.ts

@@ -0,0 +1,84 @@
+import type { FastifyInstance } from 'fastify'
+import fastifyPlugin from 'fastify-plugin'
+
+import type { Server } from '../../types'
+import type { SendProgress } from '../../types'
+
+async function compilerPlugin(
+  instance: FastifyInstance,
+  { delegate }: { delegate: Server.Delegate }
+) {
+  instance.route({
+    method: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS', 'HEAD'],
+    url: '/*',
+    schema: {
+      querystring: {
+        type: 'object',
+        properties: {
+          platform: {
+            type: 'string',
+          },
+        },
+      },
+    },
+
+    handler: async (request, reply) => {
+      let file = (request.params as { '*'?: string })['*']
+      let { platform } = request.query as { platform?: string }
+
+      if (!file) {
+        // This technically should never happen - this route should not be called if file is missing.
+        request.log.error(`File was not provided`)
+        return reply.notFound()
+      }
+
+      // Let consumer infer the platform. If function is not provided fallback
+      // to platform query param.
+      platform = delegate.compiler.inferPlatform?.(request.url) ?? platform
+
+      if (!platform) {
+        request.log.error('Cannot detect platform')
+        return reply.badRequest('Cannot detect platform')
+      }
+
+      // If platform happens to be in front of an asset remove it.
+      if (file.startsWith(`${platform}/`)) {
+        file = file.replace(`${platform}/`, '')
+      }
+
+      const multipart = reply.asMultipart()
+
+      const sendProgress: SendProgress = ({ completed, total }) => {
+        multipart?.writeChunk(
+          { 'Content-Type': 'application/json' },
+          JSON.stringify({
+            done: completed,
+            total,
+          })
+        )
+      }
+
+      try {
+        const asset = await delegate.compiler.getAsset(file, platform, sendProgress)
+        const mimeType = delegate.compiler.getMimeType(file, platform, asset)
+
+        if (multipart) {
+          const buffer = Buffer.isBuffer(asset) ? asset : Buffer.from(asset)
+          multipart.setHeader('Content-Type', `${mimeType}; charset=UTF-8`)
+          multipart.setHeader('Content-Length', String(Buffer.byteLength(buffer)))
+          multipart.end(buffer)
+        } else {
+          return reply.code(200).type(mimeType).send(asset)
+        }
+      } catch (error) {
+        request.log.error(error)
+        return reply.notFound((error as Error).message)
+      }
+    },
+  })
+}
+
+export default fastifyPlugin(compilerPlugin, {
+  name: 'compiler-plugin',
+  dependencies: ['fastify-sensible', 'multipart-plugin'],
+})

package/src/vendor/repack/dev-server/src/plugins/compiler/index.ts

@@ -0,0 +1,2 @@
+export { default } from './compilerPlugin'
+export * from './types'

package/src/vendor/repack/dev-server/src/plugins/compiler/types.ts

@@ -0,0 +1,37 @@
+import type { SendProgress } from '../../types'
+
+/**
+ * Delegate with implementation for compiler-specific functions.
+ */
+export interface CompilerDelegate {
+  /**
+   * Get compiled asset content.
+   *
+   * If the compilation is in progress, it should wait until compilation finishes and then return the asset.
+   *
+   * @param filename Filename of the asset to get.
+   * @param platform Platform of the asset to get.
+   * @param sendProgress Function to notify the client who requested the asset about compilation progress.
+   */
+  getAsset: (
+    filename: string,
+    platform: string,
+    sendProgress?: SendProgress
+  ) => Promise<string | Buffer>
+
+  /**
+   * Detect MIME type of the asset from `filename`, `platform` or `data` (or from combination of either).
+   *
+   * @param filename Filename of the asset.
+   * @param platform Platform of the asset.
+   * @param data Asset's content.
+   */
+  getMimeType: (filename: string, platform: string, data: string | Buffer) => string
+
+  /**
+   * Detect the platform from the URI - either from filename, query params or both.
+   *
+   * @param uri URI string.
+   */
+  inferPlatform?: (uri: string) => string | undefined
+}