@tamagui/cli 1.52.3 → 1.52.5

package/src/dev/createDevServer.ts

@@ -1,14 +1,23 @@
 import { CLIResolvedOptions } from '@tamagui/types'
+import mime from 'mime/lite'
 
 import { DEFAULT_PORT } from '../utils/constants'
 import { Server, createServer } from '../vendor/repack/dev-server/src'
+import { HMRListener } from './types'
 
 export async function createDevServer(
   options: CLIResolvedOptions,
   {
     indexJson,
+    listenForHMR,
     getIndexBundle,
-  }: { indexJson: Object; getIndexBundle: () => Promise<string> }
+    hotUpdatedCJSFiles,
+  }: {
+    indexJson: Object
+    getIndexBundle: () => Promise<string>
+    listenForHMR: (cb: HMRListener) => void
+    hotUpdatedCJSFiles: Map<string, string>
+  }
 ) {
   const { start, stop } = await createServer({
     options: {
@@ -46,19 +55,34 @@ export async function createDevServer(
       //   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
-      //     )
-      //   }
-      // )
+      const platform = 'ios'
+      listenForHMR((update) => {
+        ctx.notifyBuildEnd(platform)
+        ctx.broadcastToHmrClients(
+          {
+            action: 'built',
+            body: createHmrBody({
+              errors: [],
+              warnings: [],
+              hash: `${Math.random()}`,
+              modules: {},
+              name: '',
+              time: 0,
+            }),
+          },
+          platform
+        )
+      })
 
       return {
+        hotFiles: {
+          getSource: (path) => {
+            const next = hotUpdatedCJSFiles.get(path)
+            hotUpdatedCJSFiles.delete(path) // memory leak prevent
+            return next || ''
+          },
+        },
+
         compiler: {
           getAsset: async (filename, platform, sendProgress) => {
             console.log('[GET] - ', filename)
@@ -70,9 +94,7 @@ export async function createDevServer(
           },
 
           getMimeType: (filename) => {
-            console.log('getMimeType', filename)
-            return 'application/javascript'
-            // return compiler.getMimeType(filename)
+            return mime.getType(filename) || 'application/javascript'
           },
 
           inferPlatform: (uri) => {
@@ -96,7 +118,6 @@ export async function createDevServer(
             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')
@@ -112,18 +133,16 @@ export async function createDevServer(
         },
 
         hmr: {
-          getUriPath: () => '/hot',
+          getUriPath: () => '/__hmr',
           onClientConnected: (platform, clientId) => {
             // rome-ignore lint/nursery/noConsoleLog: <explanation>
-            console.log('client connected to hot')
             // todo
-            const lastStats = {}
-
-            ctx.broadcastToHmrClients(
-              { action: 'sync', body: createHmrBody(lastStats) },
-              platform,
-              [clientId]
-            )
+            // const lastStats = {}
+            // ctx.broadcastToHmrClients(
+            //   { action: 'sync', body: createHmrBody(lastStats) },
+            //   platform,
+            //   [clientId]
+            // )
           },
         },
 
@@ -136,9 +155,21 @@ export async function createDevServer(
           onMessage: (log) => {
             const logEntry = makeLogEntryFromFastifyLog(log)
             logEntry.issuer = 'DevServer'
+
+            // ignore for now
+            if (logEntry.type === 'debug') return
+
             // error DevServer, warn DevServer
             // rome-ignore lint/nursery/noConsoleLog: <explanation>
-            console.log('[logger]', logEntry.type, logEntry.issuer, logEntry.message)
+            console.log(
+              '[logger]',
+              logEntry.type === 'info' ? '' : logEntry.type,
+              logEntry.message
+                .map((m) => {
+                  return `${m.msg}`
+                })
+                .join(', ')
+            )
             // reporter.process(logEntry)
           },
         },
@@ -170,27 +201,8 @@ export async function createDevServer(
   }
 }
 
-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,
-  }
+function createHmrBody(body: HMRMessageBody): HMRMessageBody | null {
+  return body
 }
 
 /**

package/src/dev/types.ts

@@ -0,0 +1 @@
+export type HMRListener = (update: { file: string; contents: string }) => void

package/src/dev.ts

@@ -1,122 +1,164 @@
 import { readFile } from 'fs/promises'
-import { AddressInfo } from 'net'
 import { join } from 'path'
 
 import { CLIResolvedOptions } from '@tamagui/types'
-import { nativePlugin, nativePrebuild, tamaguiPlugin } from '@tamagui/vite-plugin'
+import viteReactPlugin, { swcTransform } from '@tamagui/vite-native-swc'
+import { nativeBabelTransform, nativePlugin, nativePrebuild } from '@tamagui/vite-plugin'
 import chalk from 'chalk'
-import fs, { ensureDir, pathExists } from 'fs-extra'
-import { build, createServer } from 'vite'
+import fs, { pathExists } from 'fs-extra'
+import { InlineConfig, build, createServer, resolveConfig } from 'vite'
 
+import { clientInjectionsPlugin } from './dev/clientInjectPlugin'
 import { createDevServer } from './dev/createDevServer'
+import { HMRListener } from './dev/types'
 import { registerDispose } from './utils'
 
 export const dev = async (options: CLIResolvedOptions) => {
   const { root, mode, paths } = options
-
-  process.chdir(process.cwd())
+  const projectRoot = root
 
   const packageRootDir = join(__dirname, '..')
 
   // build react-native
   await nativePrebuild()
 
+  // react native port (it scans 19000 +5)
+  const port = options.port || 8081
+
   const plugins = [
     // tamaguiPlugin({
     //   components: ['tamagui'],
     //   target: 'native',
     // }),
-    nativePlugin(),
+    viteReactPlugin({
+      tsDecorators: true,
+    }),
+    nativePlugin({
+      port,
+    }),
   ]
 
-  const rootFile = join(root, 'src/test-tamagui-stack.tsx')
-
-  console.log('root', root, rootFile)
+  const hmrListeners: HMRListener[] = []
+  const hotUpdatedCJSFiles = new Map<string, string>()
 
-  const server = await createServer({
-    root: rootFile,
+  let serverConfig = {
+    root,
     mode: 'development',
-    plugins,
+    clearScreen: false,
+    plugins: [
+      ...plugins,
+
+      {
+        name: `tamagui-hot-update`,
+        async handleHotUpdate({ file, read, modules }) {
+          // idk why but its giving me dist asset stuff
+          if (!file.includes('/src/')) {
+            return
+          }
+
+          const id = modules[0]?.url || file.replace(root, '')
+
+          if (!id) {
+            console.log('⚠️ no modules?', file)
+            return
+          }
+
+          try {
+            const raw = await read()
+
+            // swc isnt applied here weird
+            const swcout = await swcTransform(
+              file,
+              raw,
+              {
+                tsDecorators: true,
+              },
+              true
+            )
+
+            if (!swcout) {
+              throw 'sadsad'
+            }
+
+            let contents = await nativeBabelTransform(swcout.code)
+
+            contents = `exports = ((exports) => { ${contents}; return exports })({})`
+
+            // set here to be fetched next
+            // i'd have just sent it in the websocket but maybe theres some size limits
+            hotUpdatedCJSFiles.set(id, contents)
+
+            // for (const listener of hmrListeners) {
+            //   listener({
+            //     file,
+            //     contents,
+            //   })
+            // }
+          } catch (err) {
+            console.log('error hmring', err)
+          }
+        },
+      },
+    ],
     server: {
+      cors: true,
       port: options.port,
-      host: options.host || 'localhost',
+      host: options.host || '127.0.0.1',
     },
-  })
+  } satisfies InlineConfig
 
-  await server.listen()
+  // first resolve config so we can pass into client plugin, then add client plugin:
+  const resolvedConfig = await resolveConfig(serverConfig, 'serve')
+  const viteRNClient = clientInjectionsPlugin(resolvedConfig)
 
-  await ensureDir(options.paths.dotDir)
-  // const res = await watchTamaguiConfig(options.tamaguiOptions)
+  plugins.push(viteRNClient)
 
-  const info = server.httpServer?.address() as AddressInfo
+  serverConfig = {
+    ...serverConfig,
+    plugins: [...serverConfig.plugins],
+  }
 
-  // react native port (it scans 19000 +5)
-  const port = 8081
+  const server = await createServer(serverConfig)
 
-  const defaultResponse = {
-    name: 'myapp',
-    slug: 'myapp',
-    scheme: 'myapp',
-    version: '1.0.0',
-    jsEngine: 'jsc',
-    orientation: 'portrait',
-    icon: './assets/icon.png',
-    userInterfaceStyle: 'light',
-    splash: {
-      image: './assets/splash.png',
-      resizeMode: 'contain',
-      backgroundColor: '#ffffff',
-      imageUrl: 'http://127.0.0.1:8081/assets/./assets/splash.png',
-    },
-    updates: { fallbackToCacheTimeout: 0 },
-    assetBundlePatterns: ['**/*'],
-    ios: { supportsTablet: true, bundleIdentifier: 'com.natew.myapp' },
-    android: {
-      package: 'com.tamagui.myapp',
-      adaptiveIcon: {
-        foregroundImage: './assets/adaptive-icon.png',
-        backgroundColor: '#FFFFFF',
-        foregroundImageUrl: 'http://127.0.0.1:8081/assets/./assets/adaptive-icon.png',
-      },
-    },
-    web: { favicon: './assets/favicon.png' },
-    extra: { eas: { projectId: '061b4470-78c7-4d6a-b850-8167fb0a3434' } },
-    _internal: {
-      isDebug: false,
-      projectRoot: '/Users/n8/tamagui/apps/kitchen-sink',
-      dynamicConfigPath: null,
-      staticConfigPath: '/Users/n8/tamagui/apps/kitchen-sink/app.json',
-      packageJsonPath: '/Users/n8/tamagui/apps/kitchen-sink/package.json',
-    },
-    sdkVersion: '47.0.0',
-    platforms: ['ios', 'android', 'web'],
-    iconUrl: `http://127.0.0.1:${port}/assets/./assets/icon.png`,
-    debuggerHost: `127.0.0.1:${port}`,
-    logUrl: `http://127.0.0.1:${port}/logs`,
-    developer: { tool: 'expo-cli', projectRoot: '/Users/n8/tamagui/apps/kitchen-sink' },
-    packagerOpts: { dev: true },
-    mainModuleName: 'index',
-    __flipperHack: 'React Native packager is running',
-    hostUri: `127.0.0.1:${port}`,
-    bundleUrl: `http://127.0.0.1:${port}/index.bundle?platform=ios&dev=true&hot=false&lazy=true`,
-    id: '@anonymous/myapp-473c4543-3c36-4786-9db1-c66a62ac9b78',
-  }
+  await server.listen()
 
-  // new server
-  const outputJsPath = join(process.cwd(), '.tamagui', 'bundle.js')
+  // need to simulate browser fetching a file so vite loads module into module graph and hmr works
+  // no luck yet:
+
+  // trying to see whats going on with this:
+  // server.moduleGraph = new Proxy(server.moduleGraph, {
+  //   get(t, p) {
+  //     console.log('get', p)
+  //     const out = Reflect.get(t, p)
+  //     if (typeof out === 'function') {
+  //       return new Proxy(out, {
+  //         apply(a, b, c) {
+  //           console.log('apply', p, c)
+  //           return Reflect.apply(a as any, b, c)
+  //         },
+  //       })
+  //     }
+  //     return out
+  //   },
+  // })
+
+  // server.moduleGraph.resolveUrl('/src/App.tsx')
+  // server.moduleGraph.getModuleByUrl('/src/App.tsx')
+  // server.moduleGraph.ensureEntryFromUrl('/src/App.tsx', false)
+  // await ensureDir(options.paths.dotDir)
+  // const res = await watchTamaguiConfig(options.tamaguiOptions)
 
   const dispose = await createDevServer(options, {
+    hotUpdatedCJSFiles,
+    listenForHMR(cb) {
+      hmrListeners.push(cb)
+    },
     getIndexBundle: async function getBundle() {
       const outputCode = await getBundleCode()
 
-      // so you can debug output easier
-      setTimeout(() => {
-        fs.writeFile(outputJsPath, outputCode)
-      })
-
       return outputCode
     },
-    indexJson: defaultResponse,
+    indexJson: getIndexJsonReponse({ port, root }),
   })
 
   // rome-ignore lint/nursery/noConsoleLog: ok
@@ -132,10 +174,13 @@ export const dev = async (options: CLIResolvedOptions) => {
 
   async function getBundleCode() {
     // for easier quick testing things:
-    const tmpBundle = join(packageRootDir, 'bundle.tmp.js')
+    const tmpBundle = join(process.cwd(), 'bundle.tmp.js')
     if (await pathExists(tmpBundle)) {
       // rome-ignore lint/nursery/noConsoleLog: <explanation>
-      console.log('returning temp bundle', tmpBundle)
+      console.log(
+        '⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️ returning temp bundle ⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️',
+        tmpBundle
+      )
       return await readFile(tmpBundle, 'utf-8')
     }
 
@@ -145,12 +190,9 @@ export const dev = async (options: CLIResolvedOptions) => {
       plugins,
       appType: 'custom',
       root,
+      clearScreen: false,
       build: {
-        ssr: true,
-      },
-      ssr: {
-        format: 'cjs',
-        target: 'node',
+        ssr: false,
       },
       mode: 'development',
       define: {
@@ -159,17 +201,23 @@ export const dev = async (options: CLIResolvedOptions) => {
       },
     })
 
-    const appCode = 'output' in buildOutput ? buildOutput.output[0].code : null
+    const appCodeIn = 'output' in buildOutput ? buildOutput.output[0].code : null
 
-    if (!appCode) {
+    if (!appCodeIn) {
       throw `❌`
     }
 
-    const [react, reactJsxRuntime, reactNative] = await Promise.all([
-      readFile(join(process.cwd(), 'testing-area', 'react.js'), 'utf-8'),
-      readFile(join(process.cwd(), 'testing-area', 'react-jsx-runtime.js'), 'utf-8'),
-      readFile(join(process.cwd(), 'testing-area', 'react-native.js'), 'utf-8'),
-    ])
+    const appCode = await nativeBabelTransform(appCodeIn)
+
+    const paths = [
+      join(process.cwd(), 'testing-area', 'react.js'),
+      join(process.cwd(), 'testing-area', 'react-jsx-runtime.js'),
+      join(process.cwd(), 'testing-area', 'react-native.js'),
+    ]
+
+    const [react, reactJsxRuntime, reactNative] = await Promise.all(
+      paths.map((p) => readFile(p, 'utf-8'))
+    )
 
     const reactCode = react.replace(
       `module.exports = require_react_development();`,
@@ -179,16 +227,19 @@ export const dev = async (options: CLIResolvedOptions) => {
     const reactJSXRuntimeCode = reactJsxRuntime.replace(
       `module.exports = require_react_jsx_runtime_production_min();`,
       `return require_react_jsx_runtime_production_min()`
+      // `module.exports = require_react_jsx_dev_runtime_development();`,
+      // `return require_react_jsx_dev_runtime_development();`
     )
 
     const reactNativeCode = reactNative
       .replace(
         `module.exports = require_react_native();`,
-        `return require_react_native()`
+        `require_ReactNative(); return require_react_native()`
       )
+      // forcing onto global so i can re-thread it into require
       .replace(
-        `renderable = /* @__PURE__ */ react(RootComponentWithMeaningfulName, null, renderable);`,
-        ``
+        `ReactRefreshRuntime.injectIntoGlobalHook(global);`,
+        `globalThis['_ReactRefreshRuntime'] = ReactRefreshRuntime; ReactRefreshRuntime.injectIntoGlobalHook(global);`
       )
 
     const templateFile = join(packageRootDir, 'react-native-template.js')
@@ -197,6 +248,57 @@ export const dev = async (options: CLIResolvedOptions) => {
       .replace(`// -- react --`, reactCode)
       .replace(`// -- react-native --`, reactNativeCode)
       .replace(`// -- react/jsx-runtime --`, reactJSXRuntimeCode)
-      .replace(`// -- app --`, appCode)
+      .replace(`// -- app --`, appCode.replace('"use strict";', ''))
+  }
+}
+
+function getIndexJsonReponse({ port, root }: { port: number | string; root }) {
+  return {
+    name: 'myapp',
+    slug: 'myapp',
+    scheme: 'myapp',
+    version: '1.0.0',
+    jsEngine: 'jsc',
+    orientation: 'portrait',
+    icon: './assets/icon.png',
+    userInterfaceStyle: 'light',
+    splash: {
+      image: './assets/splash.png',
+      resizeMode: 'contain',
+      backgroundColor: '#ffffff',
+      imageUrl: 'http://127.0.0.1:8081/assets/./assets/splash.png',
+    },
+    updates: { fallbackToCacheTimeout: 0 },
+    assetBundlePatterns: ['**/*'],
+    ios: { supportsTablet: true, bundleIdentifier: 'com.natew.myapp' },
+    android: {
+      package: 'com.tamagui.myapp',
+      adaptiveIcon: {
+        foregroundImage: './assets/adaptive-icon.png',
+        backgroundColor: '#FFFFFF',
+        foregroundImageUrl: 'http://127.0.0.1:8081/assets/./assets/adaptive-icon.png',
+      },
+    },
+    web: { favicon: './assets/favicon.png' },
+    extra: { eas: { projectId: '061b4470-78c7-4d6a-b850-8167fb0a3434' } },
+    _internal: {
+      isDebug: false,
+      projectRoot: root,
+      dynamicConfigPath: null,
+      staticConfigPath: join(root, 'app.json'),
+      packageJsonPath: join(root, 'package.json'),
+    },
+    sdkVersion: '47.0.0',
+    platforms: ['ios', 'android', 'web'],
+    iconUrl: `http://127.0.0.1:${port}/assets/./assets/icon.png`,
+    debuggerHost: `127.0.0.1:${port}`,
+    logUrl: `http://127.0.0.1:${port}/logs`,
+    developer: { tool: 'expo-cli', projectRoot: root },
+    packagerOpts: { dev: true },
+    mainModuleName: 'index',
+    __flipperHack: 'React Native packager is running',
+    hostUri: `127.0.0.1:${port}`,
+    bundleUrl: `http://127.0.0.1:${port}/index.bundle?platform=ios&dev=true&hot=false&lazy=true`,
+    id: '@anonymous/myapp-473c4543-3c36-4786-9db1-c66a62ac9b78',
   }
 }

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

@@ -61,6 +61,16 @@ export async function createServer(config: Server.Config) {
     },
   })
 
+  // fuck delegates
+  instance.register(async (inst) => {
+    inst.get('/file', async (req, reply) => {
+      const query = req.query as Record<string, string>
+      console.log('getting', query.file)
+      const source = delegate.hotFiles.getSource(query.file)
+      reply.send(source)
+    })
+  })
+
   // Register plugins
   await instance.register(fastifySensible)
   await instance.register(wssPlugin, {
@@ -82,12 +92,13 @@ export async function createServer(config: Server.Config) {
     options: config.options,
   })
 
-  console.warn('disable debugger-ui + favicon for now')
-  // await instance.register(fastifyStatic, {
-  //   root: debuggerAppPath,
-  //   prefix: '/debugger-ui',
-  //   prefixAvoidTrailingSlash: true,
-  // })
+  const debuggerAppPath = (await import('@callstack/repack-debugger-app')).default
+
+  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
@@ -105,7 +116,6 @@ export async function createServer(config: Server.Config) {
   })
 
   // Register routes
-  instance.head('/', async () => '')
   instance.get('/', async () => delegate.messages.getHello())
   instance.get('/status', async () => delegate.messages.getStatus())
 

package/src/vendor/repack/dev-server/src/plugins/wss/WebSocketRouter.ts

@@ -33,20 +33,16 @@ export class WebSocketRouter {
         let matched = false
 
         if (pathname === '/inspector/device') {
+          // ignore
           // rome-ignore lint/nursery/noConsoleLog: <explanation>
-          console.log('ignoring', pathname)
           // socket.destroy()
           return
         }
 
-        // rome-ignore lint/nursery/noConsoleLog: <explanation>
-        console.log('check for upgrade', pathname)
-
         for (const server of this.servers) {
           if (server.shouldUpgrade(pathname)) {
             matched = true
             // rome-ignore lint/nursery/noConsoleLog: <explanation>
-            console.log('matched', pathname)
             server.upgrade(request, socket, head)
             break
           }

package/src/vendor/repack/dev-server/src/plugins/wss/servers/HermesInspectorProxy.ts

@@ -2,9 +2,9 @@ import type { IncomingMessage } from 'http'
 import { URL } from 'url'
 
 import type { FastifyInstance, FastifyReply, FastifyRequest, LogLevel } from 'fastify'
+import Device from 'metro-inspector-proxy/src/Device'
 import WebSocket from 'ws'
 
-import Device from '../../../../vendor/metro-inspector-proxy/src/Device'
 import { Server } from '../../../types'
 import { WebSocketServer } from '../WebSocketServer'
 

package/src/vendor/repack/dev-server/src/plugins/wss/servers/WebSocketApiServer.ts

@@ -60,7 +60,10 @@ export class WebSocketApiServer extends WebSocketServer {
       this.clients.delete(clientId)
     }
 
-    socket.addEventListener('error', onClose)
+    socket.addEventListener('error', () => {
+      console.log('error1')
+      onClose()
+    })
     socket.addEventListener('close', onClose)
   }
 }

package/src/vendor/repack/dev-server/src/plugins/wss/servers/WebSocketEventsServer.ts

@@ -69,6 +69,9 @@ export class WebSocketEventsServer extends WebSocketServer {
   parseMessage(data: string): Command | undefined {
     try {
       const message = JSON.parse(data)
+
+      console.log('event message', message)
+
       if (message.version === WebSocketEventsServer.PROTOCOL_VERSION) {
         return message
       }

package/src/vendor/repack/dev-server/src/plugins/wss/servers/WebSocketHMRServer.ts

@@ -42,7 +42,7 @@ export class WebSocketHMRServer extends WebSocketServer {
         key.platform !== platform ||
         !(clientIds ?? [key.clientId]).includes(key.clientId)
       ) {
-        return
+        continue
       }
 
       try {
@@ -65,7 +65,7 @@ export class WebSocketHMRServer extends WebSocketServer {
    */
   onConnection(socket: WebSocket, request: IncomingMessage) {
     const { searchParams } = new URL(request.url || '', 'http://localhost')
-    const platform = searchParams.get('platform')
+    const platform = searchParams.get('platform') || 'ios'
 
     if (!platform) {
       this.fastify.log.info({