@tamagui/static 1.0.1-beta.99 → 1.0.1-rc.0

package/src/extractor/loadTamagui.ts

@@ -1,145 +1,490 @@
-import { join } from 'path'
+import { readFileSync } from 'fs'
+/* eslint-disable no-console */
+import { basename, dirname, extname, join, relative, sep } from 'path'
 
-import type { StaticConfig, TamaguiComponent, TamaguiInternalConfig } from '@tamagui/core'
+import generate from '@babel/generator'
+import traverse from '@babel/traverse'
+import * as t from '@babel/types'
+import { Color, colorLog } from '@tamagui/cli-color'
+import { getDefaultTamaguiConfig } from '@tamagui/config-default-node'
+import type { StaticConfigParsed, TamaguiInternalConfig } from '@tamagui/core-node'
 import { createTamagui } from '@tamagui/core-node'
+import esbuild from 'esbuild'
+import { ensureDir, existsSync, removeSync, writeFileSync } from 'fs-extra'
 
-let loadedTamagui: any = null
+import { SHOULD_DEBUG } from '../constants.js'
+import { getNameToPaths, registerRequire, unregisterRequire } from '../require.js'
+import { babelParse } from './babelParse'
+import { bundle } from './bundle'
 
 type NameToPaths = {
   [key: string]: Set<string>
 }
 
+export type LoadedComponents = {
+  moduleName: string
+  nameToInfo: Record<
+    string,
+    {
+      staticConfig: StaticConfigParsed
+    }
+  >
+}
+
 export type TamaguiProjectInfo = {
-  components: Record<string, TamaguiComponent>
+  components: LoadedComponents[]
   tamaguiConfig: TamaguiInternalConfig
   nameToPaths: NameToPaths
 }
 
-export function loadTamagui(props: { components: string[]; config: string }): TamaguiProjectInfo {
-  if (loadedTamagui) {
-    return loadedTamagui
-  }
+type Props = {
+  components: string[]
+  config?: string
+  forceExports?: boolean
+}
+
+const cache = {}
 
-  const configPath = join(process.cwd(), props.config)
+// TODO needs a plugin for webpack / vite to run this once at startup and not again until changed...
 
-  const { unregister } = require('esbuild-register/dist/node').register({
-    target: 'es2019',
-    format: 'cjs',
+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(), '.tamagui')
+  const configOutPath = join(tmpDir, `tamagui.config.js`)
+  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', 'react-native-svg']
+  const configEntry = props.config ? join(process.cwd(), props.config) : ''
+
+  if (process.env.NODE_ENV === 'development' && process.env.DEBUG?.startsWith('tamagui')) {
+    console.log(`Building config entry`, configEntry)
+  }
+
+  // build them to node-compat versions
+  try {
+    await ensureDir(tmpDir)
+  } catch {
+    //
+  }
+
+  colorLog(
+    Color.FgYellow,
+    `
+Tamagui built config and components:`
+  )
+  colorLog(
+    Color.Dim,
+    `
+  Config     .${sep}${relative(process.cwd(), configOutPath)}
+  Components ${componentOutPaths
+    .map((p) => `.${sep}${relative(process.cwd(), p)}`)
+    .join('\n             ')}
+`
+  )
+
+  await Promise.all([
+    props.config
+      ? bundle({
+          entryPoints: [configEntry],
+          external,
+          outfile: configOutPath,
+        })
+      : null,
+    ...baseComponents.map((componentModule, i) => {
+      return bundle({
+        entryPoints: [componentModule],
+        resolvePlatformSpecificEntries: true,
+        external,
+        outfile: componentOutPaths[i],
+      })
+    }),
+  ])
+
   try {
+    registerRequire()
+    const out = require(configOutPath)
+    const config = out.default || out
+
+    if (!config) {
+      throw new Error(`No config: ${config}`)
+    }
+
+    let components = loadComponents({
+      ...props,
+      components: componentOutPaths,
+    })
+
+    if (!components) {
+      throw new Error(`No components found: ${componentOutPaths.join(', ')}`)
+    }
+
+    // map from built back to original module names
+    for (const component of components) {
+      component.moduleName = baseComponents[componentOutPaths.indexOf(component.moduleName)]
+      if (!component.moduleName) {
+        throw new Error(`Tamagui internal err`)
+      }
+    }
+
+    // always load core so we can optimize if directly importing
+    const coreComponents = loadComponents({
+      ...props,
+      components: ['@tamagui/core-node'],
+    })
+    if (coreComponents) {
+      coreComponents[0].moduleName = '@tamagui/core'
+      components = [...components, ...coreComponents]
+    }
+
+    if (process.env.NODE_ENV === 'development' && process.env.DEBUG?.startsWith('tamagui')) {
+      console.log('Loaded components', components)
+    }
+
+    cache[key] = {
+      components,
+      nameToPaths: {},
+      tamaguiConfig: config,
+    }
+
+    // init core-node
+    createTamagui(cache[key].tamaguiConfig)
+
+    resolver(cache[key])
+
+    return cache[key]
+  } finally {
+    unregisterRequire()
+  }
+}
+
+export function resolveWebOrNativeSpecificEntry(entry: string) {
+  const resolved = require.resolve(entry)
+  const ext = extname(resolved)
+  const fileName = basename(resolved).replace(ext, '')
+  const specificExt = process.env.TAMAGUI_TARGET === 'web' ? 'web' : 'native'
+  const specificFile = join(dirname(resolved), fileName + '.' + specificExt + ext)
+  if (existsSync(specificFile)) {
+    return specificFile
+  }
+  return entry
+}
+
+const esbuildOptions = {
+  loader: 'tsx',
+  target: 'es2018',
+  format: 'cjs',
+  jsx: 'transform',
+  platform: 'node',
+} as const
+
+// 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(esbuildOptions)
+
+  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'
-    // @ts-ignore
-    if (typeof globalThis['__DEV__'] === 'undefined') {
-      // @ts-ignore
-      globalThis['__DEV__'] = process.env.NODE_ENV === 'development'
-    }
+    const devValueOG = globalThis['__DEV__' as any]
+    globalThis['__DEV__' as any] = process.env.NODE_ENV === 'development'
 
-    const proxyWorm = require('@tamagui/proxy-worm')
-    const rnw = require('react-native-web')
-    const Mod = require('module')
-    const og = Mod.prototype.require
-    const nameToPaths: NameToPaths = {}
+    try {
+      // config
+      let tamaguiConfig: TamaguiInternalConfig | null = null
+      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}:
+          
+  Be sure you "export default" the config.`)
+        }
+      }
 
-    Mod.prototype.require = function (path: string) {
-      if (path.endsWith('.css')) {
-        return {}
+      // components
+      const components = loadComponents(props)
+      if (!components) {
+        throw new Error(`No components loaded`)
       }
-      if (
-        path === '@gorhom/bottom-sheet' ||
-        path.startsWith('react-native-reanimated') ||
-        path === 'expo-linear-gradient'
-      ) {
-        return proxyWorm
+      if (process.env.DEBUG === 'tamagui') {
+        console.log(`components`, components)
       }
-      if (
-        path.startsWith('react-native') &&
-        // allow our rnw.tsx imports through
-        !path.startsWith('react-native-web/dist/cjs/exports')
-      ) {
-        return rnw
+
+      // undo shims
+      process.env.IS_STATIC = undefined
+      globalThis['__DEV__' as any] = devValueOG
+
+      // set up core-node
+      if (props.config && tamaguiConfig) {
+        createTamagui(tamaguiConfig as any)
       }
-      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
-              }
-            }
-          }
+
+      cache[key] = {
+        components,
+        tamaguiConfig,
+        nameToPaths: getNameToPaths(),
+      }
+    } catch (err) {
+      if (err instanceof Error) {
+        console.warn(
+          `Error loading tamagui.config.ts (set DEBUG=tamagui to see full stack), running tamagui without custom config`
+        )
+        console.log(`\n\n    ${err.message}\n\n`)
+        if (SHOULD_DEBUG) {
+          console.log(err.stack)
         }
-        return out
-      } catch (err: any) {
-        console.error('Tamagui error loading file:\n', path, err.message, '\n', err.stack)
-        // avoid infinite loops
-        process.exit(1)
+      } else {
+        console.error(`Error loading tamagui.config.ts`, err)
+      }
+      return {
+        components: [],
+        tamaguiConfig: getDefaultTamaguiConfig(),
+        nameToPaths: {},
       }
     }
 
-    // import config
-    const exp = require(configPath)
-    const tamaguiConfig = (exp['default'] || exp) as TamaguiInternalConfig
+    return cache[key]
+  } finally {
+    unregister()
+    unregisterRequire()
+  }
+}
 
-    if (!tamaguiConfig || !tamaguiConfig.parsed) {
-      try {
-        const confPath = require.resolve(configPath)
-        console.log(`Received:`, tamaguiConfig)
-        throw new Error(`Can't find valid config in ${confPath}`)
-      } catch (err) {
-        throw err
+function interopDefaultExport(mod: any) {
+  return mod?.default ?? mod
+}
+
+const cacheComponents: Record<string, LoadedComponents[]> = {}
+
+function transformAddExports(ast: t.File) {
+  const usedNames = new Set<string>()
+
+  // avoid clobbering
+  traverse(ast, {
+    ExportNamedDeclaration(nodePath) {
+      if (nodePath.node.specifiers) {
+        for (const spec of nodePath.node.specifiers) {
+          usedNames.add(t.isIdentifier(spec.exported) ? spec.exported.name : spec.exported.value)
+        }
       }
-    }
+    },
+  })
 
-    // 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 } })
+  traverse(ast, {
+    VariableDeclaration(nodePath) {
+      // top level only
+      if (!t.isProgram(nodePath.parent)) return
+      const decs = nodePath.node.declarations
+      if (decs.length > 1) return
+      const [dec] = decs
+      if (!t.isIdentifier(dec.id)) return
+      if (!dec.init) return
+      if (usedNames.has(dec.id.name)) return
+      usedNames.add(dec.id.name)
+      nodePath.replaceWith(
+        t.exportNamedDeclaration(t.variableDeclaration('let', [dec]), [
+          t.exportSpecifier(t.identifier(dec.id.name), t.identifier(dec.id.name)),
+        ])
+      )
+    },
+  })
+
+  return generate(ast as any, {
+    concise: false,
+    filename: 'test.tsx',
+    retainLines: false,
+    sourceMaps: false,
+  }).code
+}
+
+const esbuildit = (src: string, target?: 'modern') =>
+  esbuild.transformSync(src, {
+    ...esbuildOptions,
+    ...(target === 'modern' && {
+      target: 'es2022',
+      jsx: 'transform',
+      loader: 'tsx',
+      platform: 'neutral',
+      format: 'esm',
+    }),
+  }).code
+
+function loadComponents(props: Props): null | LoadedComponents[] {
+  const componentsModules = props.components
+  const key = componentsModules.join('')
+  if (cacheComponents[key]) {
+    return cacheComponents[key]
+  }
+  try {
+    const info: LoadedComponents[] = componentsModules.flatMap((name) => {
+      const extension = extname(name)
+      const isLocal = Boolean(extension)
+      // during props.config pass we are passing in pre-bundled stuff
+      const isDynamic = isLocal && !props.config
+
+      if (isDynamic && !process.env.TAMAGUI_ENABLE_DYNAMIC_LOAD) {
+        return []
+      }
+
+      const fileContents = isDynamic ? readFileSync(name, 'utf-8') : ''
+      const loadModule = isDynamic
+        ? join(dirname(name), `.tamagui-dynamic-eval-${basename(name)}.tsx`)
+        : name
+      let writtenContents = fileContents
+      let didBabel = false
+
+      function attemptLoad({ forceExports = false } = {}) {
+        // need to write to tsx to enable reading it properly (:/ esbuild-register)
+        if (isDynamic) {
+          writtenContents = forceExports
+            ? esbuildit(transformAddExports(babelParse(esbuildit(fileContents, 'modern'))))
+            : esbuildit(fileContents)
+
+          writeFileSync(loadModule, writtenContents)
+        }
+
+        if (process.env.DEBUG === 'tamagui') {
+          console.log(`loadModule`, loadModule, require.resolve(loadModule))
+        }
+
+        return {
+          moduleName: name,
+          nameToInfo: getComponentStaticConfigByName(
+            name,
+            interopDefaultExport(require(loadModule))
+          ),
         }
       }
-    }
 
-    // undo shims
-    process.env.IS_STATIC = undefined
-    Mod.prototype.require = og
+      const dispose = () => {
+        isDynamic && removeSync(loadModule)
+      }
 
-    // set up core-node
-    createTamagui(tamaguiConfig as any)
+      try {
+        const res = attemptLoad({
+          forceExports: true,
+        })
+        didBabel = true
+        return res
+      } catch (err) {
+        console.log('babel err', err, writtenContents)
+        // ok
+        writtenContents = fileContents
+        if (process.env.DEBUG?.startsWith('tamagui')) {
+          console.log(`Error parsing babel likely`, err)
+        }
+      } finally {
+        dispose()
+      }
 
-    loadedTamagui = {
-      components,
-      tamaguiConfig,
-      nameToPaths,
-    }
+      try {
+        return attemptLoad({
+          forceExports: false,
+        })
+      } catch (err) {
+        if (!process.env.TAMAGUI_DISABLE_WARN_DYNAMIC_LOAD) {
+          console.log(`
+
+Tamagui attempted but failed to dynamically load components in:
+  ${name}
+
+This will leave some styled() tags unoptimized.
+Disable this file (or dynamic loading altogether):
+
+  disableExtractFoundComponents: ['${name}'] | true
 
-    return loadedTamagui
+Quiet this warning with environment variable:
+      
+  TAMAGUI_DISABLE_WARN_DYNAMIC_LOAD=1
+
+`)
+          console.log(err)
+          console.log(
+            `At: ${loadModule}`,
+            `\ndidBabel: ${didBabel}`,
+            `\nIn:`,
+            writtenContents,
+            `\nisDynamic: `,
+            isDynamic
+          )
+        }
+        return []
+      } finally {
+        dispose()
+      }
+    })
+    cacheComponents[key] = info
+    return info
+  } catch (err: any) {
+    console.log(`Tamagui error bundling components`, err.message, err.stack)
+    return null
+  }
+}
+
+function getComponentStaticConfigByName(name: string, exported: any) {
+  const components: Record<string, { staticConfig: StaticConfigParsed }> = {}
+  try {
+    if (!exported || typeof exported !== 'object' || Array.isArray(exported)) {
+      throw new Error(`Invalid export from package ${name}: ${typeof exported}`)
+    }
+    for (const key in exported) {
+      const found = getTamaguiComponent(key, exported[key])
+      if (found) {
+        // remove non-stringifyable
+        const { Component, ...sc } = found.staticConfig
+        components[key] = { staticConfig: sc }
+      }
+    }
   } catch (err) {
-    console.log('Error loading Tamagui', err)
-    throw err
-  } finally {
-    unregister()
+    if (process.env.TAMAGUI_DISABLE_WARN_DYNAMIC_LOAD !== '1') {
+      console.error(
+        `Tamagui failed getting from ${name} (Disable error by setting environment variable TAMAGUI_DISABLE_WARN_DYNAMIC_LOAD=1)`
+      )
+      console.error(err)
+    }
+  }
+  return components
+}
+
+function getTamaguiComponent(
+  name: string,
+  Component: any
+): undefined | { staticConfig: StaticConfigParsed } {
+  if (name[0].toUpperCase() !== name[0]) {
+    return
+  }
+  const staticConfig = Component?.staticConfig as StaticConfigParsed | undefined
+  if (staticConfig) {
+    return Component
   }
 }

package/src/extractor/logLines.ts

@@ -4,7 +4,7 @@ export const logLines = (str: string, singleLine = false) => {
   if (singleLine) {
     return prefix + str.split(' ').join(`\n${prefix}`)
   }
-  let lines: string[] = ['']
+  const lines: string[] = ['']
   const items = str.split(' ')
   for (const item of items) {
     if (item.length + lines[lines.length - 1].length > 85) {

package/src/extractor/normalizeTernaries.ts

@@ -2,7 +2,7 @@ import generate from '@babel/generator'
 import * as t from '@babel/types'
 import invariant from 'invariant'
 
-import { Ternary } from '../types'
+import { Ternary } from '../types.js'
 
 export function normalizeTernaries(ternaries: Ternary[]) {
   invariant(
@@ -38,7 +38,7 @@ export function normalizeTernaries(ternaries: Ternary[]) {
       }
     }
 
-    const key = generate(ternaryTest).code
+    const key = generate(ternaryTest as any).code
 
     if (!ternariesByKey[key]) {
       ternariesByKey[key] = {

package/src/extractor/removeUnusedHooks.ts

@@ -11,6 +11,7 @@ export function removeUnusedHooks(compFn: NodePath<any>, shouldPrintDebug: boole
   // check the top level statements
   let bodyStatements = compFn?.get('body')
   if (!bodyStatements) {
+    // eslint-disable-next-line no-console
     console.log('no body statemnts?', compFn)
     return
   }
@@ -68,6 +69,7 @@ export function removeUnusedHooks(compFn: NodePath<any>, shouldPrintDebug: boole
       if (shouldRemove) {
         declarator.remove()
         if (shouldPrintDebug) {
+          // eslint-disable-next-line no-console
           console.log(`  [🪝] removed ${id.node['name'] ?? ''}`)
         }
       }

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')
+        }
       }
     },
   }