@tamagui/cli 1.1.12 → 1.2.0

package/src/dev/createDevServer.ts

@@ -0,0 +1,239 @@
+import { readFile } from 'fs/promises'
+
+import { ResolvedOptions } from '../types.js'
+import { DEFAULT_PORT } from '../utils/constants.js'
+import { Server, createServer } from '../vendor/repack/dev-server/src'
+
+export async function createDevServer(
+  options: ResolvedOptions,
+  {
+    indexJson,
+    getIndexBundle,
+  }: { indexJson: Object; getIndexBundle: () => Promise<string> }
+) {
+  const { start, stop } = await createServer({
+    options: {
+      rootDir: options.root,
+      host: options.host,
+      port: options.port ?? DEFAULT_PORT,
+      // https: args.https
+      //   ? {
+      //       cert: args.cert,
+      //       key: args.key,
+      //     }
+      //   : undefined,
+    },
+
+    delegate: (ctx): Server.Delegate => {
+      // if (args.interactive) {
+      //   bindKeypressInput(ctx)
+      // }
+
+      // if (reversePort && args.port) {
+      //   runAdbReverse(ctx, args.port)
+      // }
+
+      // let lastStats: webpack.StatsCompilation | undefined
+
+      // compiler.on('watchRun', ({ platform }) => {
+      //   ctx.notifyBuildStart(platform)
+      //   if (platform === 'android') {
+      //     runAdbReverse(ctx, args.port ?? DEFAULT_PORT)
+      //   }
+      // })
+
+      // compiler.on('invalid', ({ platform }) => {
+      //   ctx.notifyBuildStart(platform)
+      //   ctx.broadcastToHmrClients({ action: 'building' }, platform)
+      // })
+
+      // compiler.on(
+      //   'done',
+      //   ({ platform, stats }: { platform: string; stats: webpack.StatsCompilation }) => {
+      //     ctx.notifyBuildEnd(platform)
+      //     lastStats = stats
+      //     ctx.broadcastToHmrClients(
+      //       { action: 'built', body: createHmrBody(stats) },
+      //       platform
+      //     )
+      //   }
+      // )
+
+      return {
+        compiler: {
+          getAsset: async (filename, platform, sendProgress) => {
+            console.log('get asset', filename)
+            if (filename === 'index.bundle') {
+              return await getIndexBundle()
+            }
+            return ''
+            // return (await compiler.getAsset(filename, platform, sendProgress)).data
+          },
+
+          getMimeType: (filename) => {
+            console.log('getMimeType', filename)
+            return 'application/javascript'
+            // return compiler.getMimeType(filename)
+          },
+
+          inferPlatform: (uri) => {
+            return 'ios'
+
+            const url = new URL(uri, 'protocol://domain')
+            if (!url.searchParams.get('platform')) {
+              const [, platform] = /^\/(.+)\/.+$/.exec(url.pathname) ?? []
+              return platform
+            }
+
+            return undefined
+          },
+        },
+
+        symbolicator: {
+          getSource: async (fileUrl) => {
+            console.log('get source', fileUrl)
+            // const { filename, platform } = parseFileUrl(fileUrl)
+            // return compiler.getSource(filename, platform)
+            return ''
+          },
+          getSourceMap: async (fileUrl) => {
+            console.log('get source map', fileUrl)
+            // const { filename, platform } = parseFileUrl(fileUrl)
+            // if (!platform) {
+            //   throw new Error('Cannot infer platform for file URL')
+            // }
+
+            // return compiler.getSourceMap(filename, platform)
+            return ''
+          },
+          shouldIncludeFrame: (frame) => {
+            // If the frame points to internal bootstrap/module system logic, skip the code frame.
+            return !/webpack[/\\]runtime[/\\].+\s/.test(frame.file)
+          },
+        },
+
+        hmr: {
+          getUriPath: () => '/__hmr',
+          onClientConnected: (platform, clientId) => {
+            // todo
+            const lastStats = {}
+
+            ctx.broadcastToHmrClients(
+              { action: 'sync', body: createHmrBody(lastStats) },
+              platform,
+              [clientId]
+            )
+          },
+        },
+
+        messages: {
+          getHello: () => indexJson,
+          getStatus: () => 'packager-status:running',
+        },
+
+        logger: {
+          onMessage: (log) => {
+            const logEntry = makeLogEntryFromFastifyLog(log)
+            logEntry.issuer = 'DevServer'
+            console.log(
+              logEntry.type,
+              logEntry.issuer,
+              JSON.stringify(logEntry.message, null, 2)
+            )
+            // reporter.process(logEntry)
+          },
+        },
+
+        api: {
+          // getPlatforms: async () => Object.keys(compiler.workers),
+          getPlatforms: async () => ['ios'],
+          getAssets: async (platform) => {
+            console.log('get assets', platform)
+            return []
+            // return Object.entries(compiler.assetsCache[platform] ?? {}).map(([name, asset]) => ({
+            //   name,
+            //   size: asset.info.size,
+            // })),
+          },
+          getCompilationStats: async (platform) => {
+            return null
+            // return compiler.statsCache[platform] ?? null
+          },
+        },
+      }
+    },
+  })
+
+  await start()
+
+  return async () => {
+    await stop()
+  }
+}
+
+function createHmrBody(stats?: any): HMRMessageBody | null {
+  if (!stats) {
+    return null
+  }
+
+  const modules: Record<string, string> = {}
+  for (const module of stats.modules ?? []) {
+    const { identifier, name } = module
+    if (identifier !== undefined && name) {
+      modules[identifier] = name
+    }
+  }
+
+  return {
+    name: stats.name ?? '',
+    time: stats.time ?? 0,
+    hash: stats.hash ?? '',
+    warnings: stats.warnings || [],
+    errors: stats.errors || [],
+    modules,
+  }
+}
+
+/**
+ * Represent Hot Module Replacement Update body.
+ *
+ * @internal
+ */
+export interface HMRMessageBody {
+  name: string
+  time: number
+  hash: string
+  warnings: any
+  errors: any
+  modules: Record<string, string>
+}
+
+/**
+ * Represent Hot Module Replacement Update message.
+ *
+ * @internal
+ */
+export interface HMRMessage {
+  action: 'building' | 'built' | 'sync'
+  body: HMRMessageBody | null
+}
+
+function makeLogEntryFromFastifyLog(data: any): any {
+  const { level, time, pid, hostname, ...rest } = data
+
+  const levelToTypeMapping: Record<number, any> = {
+    10: 'debug',
+    20: 'debug',
+    30: 'info',
+    40: 'warn',
+    50: 'error',
+    60: 'error',
+  }
+
+  return {
+    type: levelToTypeMapping[level],
+    timestamp: time,
+    issuer: '',
+    message: [rest],
+  }
+}

package/src/dev.ts

@@ -1,24 +1,28 @@
+import { readFile } from 'fs/promises'
 import { AddressInfo } from 'net'
 import { join } from 'path'
 
-import { nativePlugin, tamaguiPlugin } from '@tamagui/vite-plugin'
 import chalk from 'chalk'
-import express from 'express'
-import proxy from 'express-http-proxy'
 import fs from 'fs-extra'
-import killPort from 'kill-port'
-import morgan from 'morgan'
 import { build, createServer } from 'vite'
 
+import { createDevServer } from './dev/createDevServer.js'
 import { watchTamaguiConfig } from './tamaguiConfigUtils.js'
 import { ResolvedOptions } from './types.js'
-import { closeEvent } from './utils.js'
+import { registerDispose } from './utils.js'
 
 export const dev = async (options: ResolvedOptions) => {
   const { root, mode, paths } = options
 
   process.chdir(process.cwd())
 
+  const { tamaguiPlugin, nativePlugin, nativePrebuild } = await import(
+    '@tamagui/vite-plugin'
+  )
+
+  // build react-native
+  await nativePrebuild()
+
   const plugins = [
     tamaguiPlugin({
       components: ['tamagui'],
@@ -26,74 +30,90 @@ export const dev = async (options: ResolvedOptions) => {
     nativePlugin(),
   ]
 
-  const buildOutput = await build({
-    plugins,
-    root,
-  })
-  const outputJsFile = 'output' in buildOutput ? buildOutput.output[0]?.fileName : null
-  if (!outputJsFile) {
-    throw new Error(`No js?`)
+  async function getBundle() {
+    const outputJsPath = join(process.cwd(), '.tamagui', 'bundle.js')
+    const outputCode = await getBundleCode()
+    // debug out each time
+    fs.writeFile(outputJsPath, outputCode)
+    return outputCode
+  }
+
+  async function getBundleCode() {
+    // build app
+    const buildOutput = await build({
+      plugins,
+      appType: 'custom',
+      root: join(root, 'src/index.ts'),
+      build: {
+        ssr: true,
+      },
+      ssr: {
+        format: 'cjs',
+        target: 'node',
+      },
+      mode: 'development',
+      define: {
+        __DEV__: 'true',
+        'process.env.NODE_ENV': `"development"`,
+      },
+    })
+
+    const appCode = 'output' in buildOutput ? buildOutput.output[0].code : null
+
+    if (!appCode) {
+      throw `❌`
+    }
+
+    const [react, reactJsxRuntime, reactNative] = await Promise.all([
+      readFile(join(process.cwd(), 'react.js'), 'utf-8'),
+      readFile(join(process.cwd(), 'react-jsx-runtime.js'), 'utf-8'),
+      readFile(join(process.cwd(), 'react-native.js'), 'utf-8'),
+    ])
+
+    const reactCode = react.replace(
+      `module.exports = require_react_development();`,
+      `return require_react_development()`
+    )
+
+    const reactJSXRuntimeCode = reactJsxRuntime.replace(
+      `module.exports = require_react_jsx_runtime_production_min();`,
+      `return require_react_jsx_runtime_production_min()`
+    )
+
+    const reactNativeCode = reactNative
+      .replace(
+        `module.exports = require_react_native();`,
+        `return require_react_native()`
+      )
+      .replace(
+        `renderable = /* @__PURE__ */ react(RootComponentWithMeaningfulName, null, renderable);`,
+        ``
+      )
+
+    return (await readFile('template.js', 'utf-8'))
+      .replace(`// -- react --`, reactCode)
+      .replace(`// -- react-native --`, reactNativeCode)
+      .replace(`// -- react/jsx-runtime --`, reactJSXRuntimeCode)
+      .replace(`// -- app --`, appCode)
   }
-  const outputJsPath = join(process.cwd(), 'dist', outputJsFile)
 
   const server = await createServer({
-    root,
+    root: root,
+    mode: 'development',
+    plugins,
     server: {
       port: options.port,
       host: options.host || 'localhost',
     },
-    plugins,
   })
 
-  // these can be lazy loaded (eventually should put in own process)
-  await Promise.all([
-    server.listen(),
-    //
-    watchTamaguiConfig(options),
-    // generateTypes(options),
-  ])
+  await server.listen()
+  await watchTamaguiConfig(options)
 
   const info = server.httpServer?.address() as AddressInfo
-  const app = express()
-
-  const cleanup = async () => {
-    console.log('cleaning up')
-    await server.close()
-  }
-
-  process.on(`uncaughtException`, (e) => {
-    console.log('wtdf', e)
-  })
-  ;[`exit`, `SIGINT`, `SIGUSR1`, `SIGUSR2`, `SIGTERM`].forEach((eventType) => {
-    process.on(eventType, cleanup)
-  })
 
   // react native port (it scans 19000 +5)
-  const port = 19000
-
-  app.disable('x-powered-by')
-  app.use(express.static(paths.dotDir, { maxAge: '2h' }))
-  app.use(morgan('tiny'))
-
-  // studio specific - move out eventually to studioPlugin
-
-  app.get('/status', (req, res) => {
-    res.status(200).send()
-  })
-
-  app.get('/conf', async (req, res) => {
-    const conf = await fs.readJSON(paths.conf)
-    res.status(200).json(conf)
-  })
-
-  // /index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=dish.motion:2811:36)
-  app.get('/index.bundle', async (req, res) => {
-    const output = (await fs.readFile(outputJsPath)).toString()
-
-    res.status(200)
-    res.header('Content-Type', 'text/javascript')
-    res.send(output)
-  })
+  const port = 8081
 
   const defaultResponse = {
     name: 'myapp',
@@ -144,18 +164,22 @@ export const dev = async (options: ResolvedOptions) => {
     id: '@anonymous/myapp-473c4543-3c36-4786-9db1-c66a62ac9b78',
   }
 
-  app.get('/', (req, res) => {
-    res.status(200).json(defaultResponse)
+  // new server
+  const dispose = await createDevServer(options, {
+    getIndexBundle: getBundle,
+    indexJson: defaultResponse,
   })
 
-  // app.use('/', proxy(`${info.address}:${info.port}`))
-
-  await killPort(port)
-  app.listen(port)
-
   // eslint-disable-next-line no-console
-  console.log(`Listening on`, chalk.green(`http://localhost:${port}`))
+  console.log(`Listening on:`, chalk.green(`http://localhost:${port}`))
   server.printUrls()
 
-  await closeEvent(server)
+  registerDispose(() => {
+    dispose()
+    server.close()
+  })
+
+  await new Promise((res) => server.httpServer?.on('close', res))
+
+  console.log('closed')
 }

package/src/index.ts

@@ -1,3 +1,11 @@
 #!/usr/bin/env node
 
+process.on('beforeExit', () => {
+  process.stdout.write(`exiting22123??????`)
+})
+
+process.on('SIGINT', () => {
+  process.stdout.write(`exiting33123??????`)
+})
+
 import './cli.js'

package/src/studio.ts

@@ -12,7 +12,6 @@ import { createServer } from 'vite'
 
 import { watchTamaguiConfig } from './tamaguiConfigUtils.js'
 import { ResolvedOptions } from './types.js'
-import { closeEvent } from './utils.js'
 
 const resolve =
   'url' in import.meta ? createRequire(import.meta.url).resolve : require.resolve
@@ -36,12 +35,8 @@ export const studio = async (options: ResolvedOptions) => {
   })
 
   // these can be lazy loaded (eventually should put in own process)
-  await Promise.all([
-    server.listen(),
-    //
-    watchTamaguiConfig(options),
-    // generateTypes(options),
-  ])
+  const serverPromise = server.listen()
+  const configWatchPromise = watchTamaguiConfig(options)
 
   const info = server.httpServer?.address() as AddressInfo
   console.log('devServerInfo', info)
@@ -63,9 +58,19 @@ export const studio = async (options: ResolvedOptions) => {
 
   app.use('/', proxy(`${info.address}:${info.port}`))
 
-  app.listen(port)
+  const appServer = app.listen(port)
 
   console.log(`Listening on`, chalk.green(`http://localhost:${port}`))
 
-  await closeEvent(server)
+  const longRunning = [
+    serverPromise,
+    configWatchPromise,
+    new Promise((res) => appServer.on('close', res)),
+  ]
+
+  setInterval(() => {
+    console.log(longRunning)
+  }, 10_000)
+
+  await Promise.allSettled(longRunning)
 }

package/src/tamaguiConfigUtils.ts

@@ -69,17 +69,28 @@ async function getTamaguiConfig(options: ResolvedOptions) {
 }
 
 export async function watchTamaguiConfig(options: ResolvedOptions) {
+  console.warn('❌ disabling watch conf')
+  return
   if (!options.tamaguiOptions.config) return
   await generateTamaguiConfig(options)
-  await esbuild.build({
+  const context = await esbuild.context({
     entryPoints: [options.tamaguiOptions.config],
     sourcemap: false,
     // dont output just use esbuild as a watcher
     write: false,
-    watch: {
-      onRebuild(err, result) {
-        generateTamaguiConfig(options)
+
+    plugins: [
+      {
+        name: `on-rebuild`,
+        setup({ onEnd }) {
+          onEnd((res) => {
+            generateTamaguiConfig(options)
+          })
+        },
       },
-    },
+    ],
   })
+
+  await context.watch()
+  console.log('done watching')
 }

package/src/utils/constants.ts

@@ -0,0 +1 @@
+export const DEFAULT_PORT = 8081

package/src/utils.ts

@@ -16,17 +16,16 @@ export async function getOptions({
   debug,
 }: Partial<UserOptions> = {}): Promise<ResolvedOptions> {
   const tsConfigFilePath = join(root, tsconfigPath)
-  ensure(
-    await fs.pathExists(tsConfigFilePath),
-    `No tsconfig found: ${tsConfigFilePath}`,
-  )
+  ensure(await fs.pathExists(tsConfigFilePath), `No tsconfig found: ${tsConfigFilePath}`)
   const dotDir = join(root, '.tamagui')
   const pkgJson = await readJSON(join(root, 'package.json'))
 
+  console.log('host', host)
+
   return {
     mode: process.env.NODE_ENV === 'production' ? 'production' : 'development',
     root,
-    host,
+    host: host || '127.0.0.1',
     pkgJson,
     debug,
     tsconfigPath,
@@ -54,9 +53,7 @@ const defaultPaths = ['tamagui.config.ts', join('src', 'tamagui.config.ts')]
 let cachedPath = ''
 async function getDefaultTamaguiConfigPath() {
   if (cachedPath) return cachedPath
-  const existingPaths = await Promise.all(
-    defaultPaths.map((path) => pathExists(path)),
-  )
+  const existingPaths = await Promise.all(defaultPaths.map((path) => pathExists(path)))
   const existing = existingPaths.findIndex((x) => !!x)
   const found = defaultPaths[existing]
   if (!found) {
@@ -68,7 +65,7 @@ async function getDefaultTamaguiConfigPath() {
 
 let cached: TamaguiProjectInfo | null = null
 export const loadTamagui = async (
-  opts: Partial<TamaguiOptions>,
+  opts: Partial<TamaguiOptions>
 ): Promise<TamaguiProjectInfo> => {
   return (cached ??= await loadTamaguiStatic({
     config: await getDefaultTamaguiConfigPath(),
@@ -77,10 +74,12 @@ export const loadTamagui = async (
   }))
 }
 
-export function closeEvent(server: ViteDevServer): Promise<void> {
-  return new Promise((resolve) => {
-    server.ws.on('close', () => {
-      return resolve()
-    })
-  })
+const disposers = new Set<Function>()
+
+export function registerDispose(cb: () => void) {
+  disposers.add(cb)
+}
+
+export function disposeAll() {
+  disposers.forEach((cb) => cb())
 }

package/src/vendor/debugger-app/index.d.ts

@@ -0,0 +1,2 @@
+const debuggerAppPath: string;
+export default debuggerAppPath;

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

@@ -0,0 +1,3 @@
+import { URL, fileURLToPath } from 'url';
+
+export default fileURLToPath(new URL('./dist', import.meta.url));

package/src/vendor/debugger-app/public/index.html

@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="icon" href="data:;base64,iVBORw0KGgo=" />
+    <title>React Native Debugger</title>
+  </head>
+  <body>
+    <!-- <noscript>You need to enable JavaScript to run Learning Lab.</noscript>
+    <div id="root"></div> -->
+    <div class="content">
+      <label for="dark">
+        <input type="checkbox" id="dark" onclick="Page.toggleDarkTheme()" />
+        Dark Theme
+      </label>
+      <label for="maintain-priority">
+        <input
+          type="checkbox"
+          id="maintain-priority"
+          onclick="Page.togglePriorityMaintenance()"
+        />
+        Maintain Priority
+      </label>
+      <p>
+        React Native JS code runs as a web worker inside this tab.
+      </p>
+      <p>
+        Press <kbd id="shortcut" class="shortcut">⌘⌥I</kbd> to open Developer
+        Tools. Enable
+        <a href="https://stackoverflow.com/a/17324511/232122" target="_blank"
+          >Pause On Caught Exceptions</a
+        >
+        for a better debugging experience.
+      </p>
+      <p>
+        You may also install
+        <a href="https://www.npmjs.com/package/react-devtools" target="_blank"
+          >the standalone version of React Developer Tools</a
+        >
+        to inspect the React component hierarchy, their props, and state.
+      </p>
+      <p>Status: <span id="status">Loading...</span></p>
+      <button class="reload-btn" onclick="window.onReloadClicked()">
+        Reload app
+      </button>
+    </div>
+  </body>
+</html>