@tamagui/static 1.0.1-beta.141 → 1.0.1-beta.142

package/src/extractor/extractToClassNames.ts

@@ -37,7 +37,7 @@ export type ExtractedResponse = {
   map: any // RawSourceMap from 'source-map'
 }
 
-export function extractToClassNames({
+export async function extractToClassNames({
   extractor,
   source,
   sourcePath,
@@ -49,7 +49,7 @@ export function extractToClassNames({
   sourcePath: string
   options: TamaguiOptions
   shouldPrintDebug: boolean | 'verbose'
-}): ExtractedResponse | null {
+}): Promise<ExtractedResponse | null> {
   const tm = timer()
 
   if (typeof source !== 'string') {
@@ -60,6 +60,9 @@ export function extractToClassNames({
     '`sourcePath` must be an absolute path to a .js file'
   )
 
+  // dont include loading in timing of parsing (one time cost)
+  await extractor.loadTamagui(options)
+
   const shouldLogTiming = options.logTimings ?? true
   const start = Date.now()
   const mem = shouldLogTiming ? process.memoryUsage() : null
@@ -70,6 +73,7 @@ export function extractToClassNames({
   try {
     ast = babelParse(source)
   } catch (err) {
+    // eslint-disable-next-line no-console
     console.error('babel parse error:', sourcePath)
     throw err
   }
@@ -81,7 +85,7 @@ export function extractToClassNames({
 
   let hasFlattened = false
 
-  const res = extractor.parse(ast, {
+  const res = await extractor.parse(ast, {
     sourcePath,
     shouldPrintDebug,
     ...options,
@@ -213,15 +217,19 @@ export function extractToClassNames({
             const mediaExtraction = extractMediaStyle(
               attr.value,
               jsxPath,
-              extractor.getTamagui(),
+              extractor.getTamagui()!,
               sourcePath,
               lastMediaImportance,
               shouldPrintDebug
             )
             if (shouldPrintDebug) {
               if (mediaExtraction) {
-                // prettier-ignore
-                console.log('ternary (mediaStyles)', mediaExtraction.ternaryWithoutMedia?.inlineMediaQuery ?? '', mediaExtraction.mediaStyles.map((x) => x.identifier).join('.'))
+                // eslint-disable-next-line no-console
+                console.log(
+                  'ternary (mediaStyles)',
+                  mediaExtraction.ternaryWithoutMedia?.inlineMediaQuery ?? '',
+                  mediaExtraction.mediaStyles.map((x) => x.identifier).join('.')
+                )
               }
             }
             if (!mediaExtraction) {
@@ -268,8 +276,11 @@ export function extractToClassNames({
       }
 
       if (shouldPrintDebug) {
-        // prettier-ignore
-        console.log('  finalClassNames\n', logLines(finalClassNames.map(x => x['value']).join(' ')))
+        // eslint-disable-next-line no-console
+        console.log(
+          '  finalClassNames\n',
+          logLines(finalClassNames.map((x) => x['value']).join(' '))
+        )
       }
 
       node.attributes = finalAttrs
@@ -350,6 +361,7 @@ export function extractToClassNames({
           }
         } else if (rules.length) {
           if (rules.length > 1) {
+            // eslint-disable-next-line no-console
             console.log('  rules error', { rules })
             throw new Error(`Shouldn't have more than one rule`)
           }
@@ -364,6 +376,7 @@ export function extractToClassNames({
 
   if (!res || (!res.modified && !res.optimized && !res.flattened && !res.styled)) {
     if (shouldPrintDebug) {
+      // eslint-disable-next-line no-console
       console.log('no res or none modified', res)
     }
     return null
@@ -388,6 +401,7 @@ export function extractToClassNames({
   )
 
   if (shouldPrintDebug) {
+    // eslint-disable-next-line no-console
     console.log(
       '\n -------- output code ------- \n\n',
       result.code
@@ -395,6 +409,7 @@ export function extractToClassNames({
         .filter((x) => !x.startsWith('//'))
         .join('\n')
     )
+    // eslint-disable-next-line no-console
     console.log('\n -------- output style -------- \n\n', styles)
   }
 
@@ -414,10 +429,10 @@ export function extractToClassNames({
     const numFlattened = `${res.flattened}`.padStart(3)
     const memory = process.env.DEBUG && memUsed > 10 ? ` ${memUsed}MB` : ''
     const timing = Date.now() - start
-    const timingWarning = timing > 150 ? '⚠️' : timing > 150 ? '☢️' : ''
-    const timingStr = `${timing}ms ${timingWarning}`.padStart(6)
+    const timingStr = `${timing}ms`.padStart(6)
     const pre = getPrefixLogs(options)
     const memStr = memory ? `(${memory})` : ''
+    // eslint-disable-next-line no-console
     console.log(
       `${pre} ${path}  ${numFound} · ${numOptimized} · ${numFlattened} · ${numStyled}  ${timingStr} ${memStr}`
     )

package/src/extractor/getStaticBindingsForScope.ts

@@ -1,10 +1,8 @@
-import { fork, spawn } from 'child_process'
+import { fork } from 'child_process'
 import { dirname, extname, join, resolve } from 'path'
 
 import { Binding, NodePath } from '@babel/traverse'
 import * as t from '@babel/types'
-import esbuild from 'esbuild'
-import { existsSync } from 'fs-extra'
 
 import { evaluateAstNode } from './evaluateAstNode'
 import { getSourceModule } from './getSourceModule'
@@ -31,10 +29,27 @@ setInterval(() => {
 }, 10)
 
 const loadCmd = `${join(__dirname, 'loadFile.js')}`
+
+let exited = false
 const child = fork(loadCmd, [], {
   execArgv: ['-r', 'esbuild-register'],
+  detached: true,
+  stdio: 'ignore',
 })
 
+export function cleanupBeforeExit() {
+  if (exited) return
+  child.removeAllListeners()
+  child.unref()
+  child.disconnect()
+  child.kill()
+  exited = true
+}
+
+process.once('SIGTERM', cleanupBeforeExit)
+process.once('SIGINT', cleanupBeforeExit)
+process.once('beforeExit', cleanupBeforeExit)
+
 function importModule(path: string) {
   if (pending.has(path)) {
     return pending.get(path)
@@ -72,9 +87,11 @@ export async function getStaticBindingsForScope(
   const bindings: Record<string, Binding> = scope.getAllBindings() as any
   const ret: Record<string, any> = {}
 
-  if (shouldPrintDebug) {
+  if (
+    shouldPrintDebug
+  ) {
     // prettier-ignore
-    console.log('  ', Object.keys(bindings).length, 'variables in scope')
+    // console.log('  ', Object.keys(bindings).length, 'variables in scope')
     // .map(x => bindings[x].identifier?.name).join(', ')
   }
 

package/src/extractor/loadTamagui.ts

@@ -1,15 +1,15 @@
 /* eslint-disable no-console */
-import { join } from 'path'
+import { basename, dirname, join, sep } from 'path'
 
 import { getDefaultTamaguiConfig } from '@tamagui/config-default-node'
 import type { StaticConfig, TamaguiComponent, TamaguiInternalConfig } from '@tamagui/core-node'
 import { createTamagui } from '@tamagui/core-node'
+import esbuild from 'esbuild'
+import { ensureDir, pathExists, remove, stat, writeFile } from 'fs-extra'
 
 import { SHOULD_DEBUG } from '../constants'
 import { getNameToPaths, registerRequire, unregisterRequire } from '../require'
 
-let loadedTamagui: any = null
-
 type NameToPaths = {
   [key: string]: Set<string>
 }
@@ -20,12 +20,177 @@ export type TamaguiProjectInfo = {
   nameToPaths: NameToPaths
 }
 
-export function loadTamagui(props: { components: string[]; config: string }): TamaguiProjectInfo {
-  if (loadedTamagui) {
-    return loadedTamagui
+type Props = { components: string[]; config?: string }
+
+const cache = {}
+
+// TODO needs a plugin for webpack / vite to run this once at startup and not again until changed...
+
+export async function loadTamagui(props: Props): Promise<TamaguiProjectInfo> {
+  const key = JSON.stringify(props)
+  if (cache[key]) {
+    if (cache[key] instanceof Promise) {
+      return await cache[key]
+    }
+    return cache[key]
+  }
+
+  let resolver: Function = () => {}
+  cache[key] = new Promise((res) => {
+    resolver = res
+  })
+
+  const tmpDir = join(process.cwd(), 'dist', 'tamagui-node')
+  const configOutPath = join(tmpDir, `tamagui.config.js`)
+  const includesCore = props.components.includes('@tamagui/core')
+  const baseComponents = props.components.filter((x) => x !== '@tamagui/core')
+  const componentOutPaths = baseComponents.map((componentModule) =>
+    join(
+      tmpDir,
+      `${componentModule
+        .split(sep)
+        .join('-')
+        .replace(/[^a-z0-9]+/gi, '')}-components.config.js`
+    )
+  )
+
+  const external = ['@tamagui/core', '@tamagui/core-node', 'react', 'react-dom']
+  const configEntry = props.config ? join(process.cwd(), props.config) : ''
+
+  if (process.env.DEBUG?.startsWith('tamagui')) {
+    console.log(`Building config entry`, configEntry)
+  }
+
+  // build them to node-compat versions
+  try {
+    await ensureDir(tmpDir)
+  } catch {
+    //
+  }
+
+  await Promise.all([
+    props.config
+      ? buildTamaguiConfig({
+          entryPoints: [configEntry],
+          external,
+          outfile: configOutPath,
+        })
+      : null,
+    ...baseComponents.map((componentModule, i) => {
+      return buildTamaguiConfig({
+        entryPoints: [componentModule],
+        external,
+        outfile: componentOutPaths[i],
+      })
+    }),
+  ])
+
+  if (process.env.DEBUG?.startsWith('tamagui')) {
+    console.log(`Built configs`)
+  }
+
+  const coreNode = require('@tamagui/core-node')
+
+  registerRequire()
+  const config = require(configOutPath).default
+  unregisterRequire()
+
+  const components = {
+    ...loadComponents(componentOutPaths),
+    ...(includesCore && gatherTamaguiComponentInfo([coreNode])),
+  }
+
+  cache[key] = {
+    components,
+    nameToPaths: {},
+    tamaguiConfig: config,
   }
 
-  const configPath = join(process.cwd(), props.config)
+  // init core-node
+  createTamagui(cache[key].tamaguiConfig)
+
+  resolver(cache[key])
+
+  return cache[key]
+}
+
+async function buildTamaguiConfig(
+  options: Partial<esbuild.BuildOptions> & { outfile: string },
+  aliases?: Record<string, string>
+) {
+  const alias = require('@tamagui/core-node').aliasPlugin
+  // until i do fancier things w plugins:
+  const lockFile = join(dirname(options.outfile), basename(options.outfile, '.lock'))
+  const lockStat = await stat(lockFile).catch(() => {
+    // ok
+  })
+  const lockedMsAgo = !lockStat
+    ? Infinity
+    : new Date().getTime() - new Date(lockStat.mtime).getTime()
+  if (lockedMsAgo < 500) {
+    if (process.env.DEBUG?.startsWith('tamagui')) {
+      console.log(`Waiting for existing build`, options.entryPoints)
+    }
+    let tries = 5
+    while (tries--) {
+      if (await pathExists(options.outfile)) {
+        return
+      } else {
+        await new Promise((res) => setTimeout(res, 50))
+      }
+    }
+  }
+  writeFile(lockFile, '')
+  if (process.env.DEBUG?.startsWith('tamagui')) {
+    console.log(`Building`, options.entryPoints)
+  }
+  return esbuild.build({
+    bundle: true,
+    ...options,
+    format: 'cjs',
+    target: 'node18',
+    keepNames: true,
+    platform: 'node',
+    loader: {
+      '.js': 'jsx',
+    },
+    allowOverwrite: true,
+    logLevel: 'warning',
+    plugins: [
+      {
+        name: 'external',
+        setup(build) {
+          build.onResolve({ filter: /@tamagui\/core/ }, (args) => {
+            return {
+              path: '@tamagui/core-node',
+              external: true,
+            }
+          })
+
+          build.onResolve({ filter: /^(react-native)$/ }, (args) => {
+            return {
+              path: 'react-native-web-lite',
+              external: true,
+            }
+          })
+        },
+      },
+      alias({
+        'react-native-svg': require.resolve('react-native-svg-web'),
+        'react-native-safe-area-context': require.resolve('@tamagui/fake-react-native'),
+        'react-native-gesture-handler': require.resolve('@tamagui/proxy-worm'),
+        ...aliases,
+      }),
+    ],
+  })
+}
+
+// loads in-process using esbuild-register
+export function loadTamaguiSync(props: Props): TamaguiProjectInfo {
+  const key = JSON.stringify(props)
+  if (cache[key]) {
+    return cache[key]
+  }
 
   const { unregister } = require('esbuild-register/dist/node').register({
     target: 'es2019',
@@ -33,6 +198,8 @@ export function loadTamagui(props: { components: string[]; config: string }): Ta
   })
 
   try {
+    registerRequire()
+
     // lets shim require and avoid importing react-native + react-native-web
     // we just need to read the config around them
     process.env.IS_STATIC = 'is_static'
@@ -42,41 +209,31 @@ export function loadTamagui(props: { components: string[]; config: string }): Ta
       globalThis['__DEV__'] = process.env.NODE_ENV === 'development'
     }
 
-    registerRequire()
-
     try {
       // import config
-      const exp = require(configPath)
-      const tamaguiConfig = (exp['default'] || exp) as TamaguiInternalConfig
-
-      if (!tamaguiConfig || !tamaguiConfig.parsed) {
-        const confPath = require.resolve(configPath)
-        console.log(`Received:`, tamaguiConfig)
-        throw new Error(`Can't find valid config in ${confPath}`)
-      }
+      let tamaguiConfig: TamaguiInternalConfig | null = null
 
-      // import components
-      const components = {}
-      for (const moduleName of props.components) {
-        const exported = require(moduleName)
-        for (const Name in exported) {
-          const val = exported[Name]
-          const staticConfig = val?.staticConfig as StaticConfig | undefined
-          if (staticConfig) {
-            // remove non-stringifyable
-            const { Component, reactNativeWebComponent, ...sc } = staticConfig
-            Object.assign(components, { [Name]: { staticConfig: sc } })
-          }
+      if (props.config) {
+        const configPath = join(process.cwd(), props.config)
+        const exp = require(configPath)
+        tamaguiConfig = (exp['default'] || exp) as TamaguiInternalConfig
+        if (!tamaguiConfig || !tamaguiConfig.parsed) {
+          const confPath = require.resolve(configPath)
+          throw new Error(`Can't find valid config in ${confPath}`)
         }
       }
 
+      const components = loadComponents(props.components)
+
       // undo shims
       process.env.IS_STATIC = undefined
 
       // set up core-node
-      createTamagui(tamaguiConfig as any)
+      if (tamaguiConfig) {
+        createTamagui(tamaguiConfig)
+      }
 
-      loadedTamagui = {
+      cache[key] = {
         components,
         tamaguiConfig,
         nameToPaths: getNameToPaths(),
@@ -100,7 +257,7 @@ export function loadTamagui(props: { components: string[]; config: string }): Ta
       }
     }
 
-    return loadedTamagui
+    return cache[key]
   } catch (err) {
     console.log('Error loading Tamagui', err)
     throw err
@@ -109,3 +266,63 @@ export function loadTamagui(props: { components: string[]; config: string }): Ta
     unregisterRequire()
   }
 }
+
+function interopDefaultExport(mod: any) {
+  return mod?.default ?? mod
+}
+
+const cacheComponents = {}
+
+function loadComponents(componentsModules: string[]) {
+  const key = componentsModules.join('')
+  if (cacheComponents[key]) {
+    return cacheComponents[key]
+  }
+  try {
+    const requiredModules = componentsModules.map((name) => {
+      return interopDefaultExport(require(name))
+    })
+    const res = gatherTamaguiComponentInfo(requiredModules)
+    cacheComponents[key] = res
+    return res
+  } catch (err: any) {
+    console.log(`Tamagui error bundling components`, err.message, err.stack)
+  }
+}
+
+function gatherTamaguiComponentInfo(packages: any[]) {
+  const components = {}
+  for (const exported of packages) {
+    try {
+      for (const componentName in exported) {
+        const found = getTamaguiComponent(componentName, exported[componentName])
+        if (found) {
+          // remove non-stringifyable
+          const { Component, reactNativeWebComponent, ...sc } = found.staticConfig
+          Object.assign(components, { [componentName]: { staticConfig: sc } })
+        }
+      }
+    } catch (err) {
+      console.error(`Tamagui failed getting components`)
+      if (err instanceof Error) {
+        console.error(err.message, err.stack)
+      } else {
+        console.error(err)
+      }
+    }
+  }
+  return components
+}
+
+function getTamaguiComponent(
+  name: string,
+  Component: any
+): undefined | { staticConfig: StaticConfig } {
+  if (name[0].toUpperCase() !== name[0]) {
+    return
+  }
+  const staticConfig = Component?.staticConfig as StaticConfig | undefined
+  if (staticConfig) {
+    return Component
+  }
+}

package/src/extractor/timer.ts

@@ -6,12 +6,23 @@ export const timer = () => {
       if (print) {
         const took = Date.now() - last
         last = Date.now()
+        // eslint-disable-next-line no-console
         console.log(`Time ${name}: ${took}ms`)
+        if (took > 10) {
+          // eslint-disable-next-line no-console
+          console.log('  long timer')
+        }
       }
     },
     done: (print = false) => {
       if (print) {
-        console.log(`Total time: ${Date.now() - start}ms`)
+        const total = Date.now() - start
+        // eslint-disable-next-line no-console
+        console.log(`Total time: ${total}ms`)
+        if (total > 50) {
+          // eslint-disable-next-line no-console
+          console.log('  long timer')
+        }
       }
     },
   }

package/src/getPragmaOptions.ts

@@ -0,0 +1,52 @@
+export function getPragmaOptions({
+  source,
+  path,
+  disableCommentCheck,
+}: {
+  source: string
+  path: string
+  disableCommentCheck?: boolean
+}) {
+  if (!disableCommentCheck && !source.startsWith('//') && !source.startsWith('/*')) {
+    return {
+      shouldPrintDebug: false,
+      shouldDisable: false,
+    }
+  }
+
+  let shouldPrintDebug: boolean | 'verbose' = false
+  let shouldDisable = false
+
+  const firstLine = source.split('\n', 1)[0]
+
+  if (firstLine.includes('tamagui-ignore')) {
+    shouldDisable = true
+  }
+
+  if (firstLine.includes('debug')) {
+    shouldPrintDebug = true
+  }
+
+  if (firstLine.includes('debug-verbose')) {
+    shouldPrintDebug = 'verbose'
+  }
+
+  if (process.env.TAMAGUI_DEBUG_FILE) {
+    if (path.includes(process.env.TAMAGUI_DEBUG_FILE)) {
+      shouldPrintDebug = 'verbose'
+    }
+  }
+
+  if (process.env.DEBUG?.includes('tamagui')) {
+    shouldPrintDebug = true
+  }
+
+  if (process.env.DEBUG?.includes('tamagui-verbose')) {
+    shouldPrintDebug = 'verbose'
+  }
+
+  return {
+    shouldPrintDebug,
+    shouldDisable,
+  }
+}

package/src/index.ts

@@ -9,3 +9,5 @@ export * from './extractor/extractHelpers'
 export * from '@tamagui/patch-rnw'
 export * from './extractor/loadTamagui'
 export * from './require'
+export * from './getPragmaOptions'
+// export * from './webpackPlugin'

package/src/require.ts

@@ -19,17 +19,20 @@ setInterval(() => {
 
 export function registerRequire() {
   if (Module.prototype.require !== globalThis['ogRequire']) {
+    // eslint-disable-next-line no-console
     console.warn('didnt unregister before re-registering')
     process.exit(1)
   }
 
   const proxyWorm = require('@tamagui/proxy-worm')
+  // TODO can swap with react-native-web-lite
   const rnw = require('react-native-web')
   const core = require('@tamagui/core-node')
 
   Module.prototype.require = function (path: string) {
     if (SHOULD_DEBUG) {
-      console.log('tamagui require', path)
+      // eslint-disable-next-line no-console
+      console.log('tamagui:require', path)
     }
     if (path.endsWith('.css') || path.endsWith('.json') || path.endsWith('.ttf')) {
       return {}
@@ -48,38 +51,39 @@ export function registerRequire() {
       !path.startsWith('react-native-web/dist/cjs/exports'.replace(/\//g, sep))
     ) {
       return rnw
-      // return og('react-native-web')
     }
     if (path === '@tamagui/core') {
       return core
     }
     try {
       const out = og.apply(this, arguments)
-      if (!nameToPaths[path]) {
-        if (out && typeof out === 'object') {
-          for (const key in out) {
-            try {
-              const conf = out[key]?.staticConfig as StaticConfig
-              if (conf) {
-                if (conf.componentName) {
-                  nameToPaths[conf.componentName] ??= new Set()
-                  const fullName = path.startsWith('.')
-                    ? join(`${this.path.replace(/dist(\/cjs)?/, 'src')}`, path)
-                    : path
-                  nameToPaths[conf.componentName].add(fullName)
-                } else {
-                  // console.log('no name component', path)
-                }
-              }
-            } catch {
-              // ok
-            }
-          }
-        }
-      }
+      // only for studio disable for now
+      // if (!nameToPaths[path]) {
+      //   if (out && typeof out === 'object') {
+      //     for (const key in out) {
+      //       try {
+      //         const conf = out[key]?.staticConfig as StaticConfig
+      //         if (conf) {
+      //           if (conf.componentName) {
+      //             nameToPaths[conf.componentName] ??= new Set()
+      //             const fullName = path.startsWith('.')
+      //               ? join(`${this.path.replace(/dist(\/cjs)?/, 'src')}`, path)
+      //               : path
+      //             nameToPaths[conf.componentName].add(fullName)
+      //           } else {
+      //             // console.log('no name component', path)
+      //           }
+      //         }
+      //       } catch {
+      //         // ok
+      //       }
+      //     }
+      //   }
+      // }
       return out
     } catch (err: any) {
       if (SHOULD_DEBUG) {
+        // eslint-disable-next-line no-console
         console.error(
           `Tamagui failed requiring ${path} from your tamagui.config.ts file, ignoring\n`,
           err.message,
@@ -88,6 +92,7 @@ export function registerRequire() {
       }
       const max = process.env.TAMAGUI_MAX_ERRORS ? +process.env.TAMAGUI_MAX_ERRORS : 200
       if (++tries > max) {
+        // eslint-disable-next-line no-console
         console.log(
           `Too many errors loading design system, exiting (set TAMAGUI_MAX_ERRORS to override)..`
         )