@tamagui/static 1.15.32 → 1.15.34

package/src/extractor/bundleConfig.ts

@@ -9,6 +9,8 @@ import type { StaticConfigParsed, TamaguiInternalConfig } from '@tamagui/web'
 import esbuild from 'esbuild'
 import { ensureDir, removeSync, writeFileSync } from 'fs-extra'
 
+import { registerRequire } from '../require.js'
+import { TamaguiOptions } from '../types.js'
 import { babelParse } from './babelParse.js'
 import { bundle } from './bundle.js'
 
@@ -34,12 +36,6 @@ export type TamaguiProjectInfo = {
   nameToPaths: NameToPaths
 }
 
-export type Props = {
-  components: string[]
-  config?: string
-  forceExports?: boolean
-}
-
 const external = [
   '@tamagui/core',
   '@tamagui/web',
@@ -57,123 +53,176 @@ export const esbuildOptions = {
   platform: 'node',
 } as const
 
-export async function bundleConfig(props: Props) {
-  const configEntry = props.config ? join(process.cwd(), props.config) : ''
-  const tmpDir = join(process.cwd(), '.tamagui')
-  const configOutPath = join(tmpDir, `tamagui.config.cjs`)
-  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.cjs`
-    )
-  )
+export type BundledConfig = Awaited<ReturnType<typeof bundleConfig>>
 
-  if (
-    process.env.NODE_ENV === 'development' &&
-    process.env.DEBUG?.startsWith('tamagui')
-  ) {
-    console.log(`Building config entry`, configEntry)
+// will use cached one if watching
+let currentConfig: BundledConfig
+let isBundling = false
+const waitForBundle = new Set<Function>()
+
+let last: BundledConfig | undefined
+export async function hasBundledConfigChanged() {
+  if (last === currentConfig) {
+    return false
   }
+  last = currentConfig
+  return true
+}
 
-  // build them to node-compat versions
-  try {
-    await ensureDir(tmpDir)
-  } catch {
-    //
+export async function getBundledConfig(props: TamaguiOptions, rebuild = false) {
+  if (isBundling) {
+    await new Promise((res) => {
+      waitForBundle.add(res)
+    })
+  } else if (!currentConfig || rebuild) {
+    await bundleConfig(props)
   }
+  return currentConfig
+}
 
-  if (!loggedOutputInfo) {
-    loggedOutputInfo = true
-    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             ')}
-        `
+export async function bundleConfig(props: TamaguiOptions) {
+  try {
+    isBundling = true
+
+    const configEntry = props.config ? join(process.cwd(), props.config) : ''
+    const tmpDir = join(process.cwd(), '.tamagui')
+
+    const configOutPath = join(tmpDir, `tamagui.config.cjs`)
+
+    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.cjs`
+      )
     )
-  }
 
-  await Promise.all([
-    props.config
-      ? bundle({
-          entryPoints: [configEntry],
+    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 {
+      //
+    }
+
+    const start = Date.now()
+
+    await Promise.all([
+      props.config
+        ? bundle({
+            entryPoints: [configEntry],
+            external,
+            outfile: configOutPath,
+          })
+        : null,
+      ...baseComponents.map((componentModule, i) => {
+        return bundle({
+          entryPoints: [componentModule],
+          resolvePlatformSpecificEntries: true,
           external,
-          outfile: configOutPath,
+          outfile: componentOutPaths[i],
         })
-      : null,
-    ...baseComponents.map((componentModule, i) => {
-      return bundle({
-        entryPoints: [componentModule],
-        resolvePlatformSpecificEntries: true,
-        external,
-        outfile: componentOutPaths[i],
-      })
-    }),
-  ])
+      }),
+    ])
+
+    if (!loggedOutputInfo) {
+      loggedOutputInfo = true
+      colorLog(
+        Color.FgYellow,
+        `
+        Tamagui built config and components (${Date.now() - start}ms):`
+      )
+      colorLog(
+        Color.Dim,
+        `
+          Config     .${sep}${relative(process.cwd(), configOutPath)}
+          Components ${[
+            ...componentOutPaths.map((p) => `.${sep}${relative(process.cwd(), p)}`),
+          ].join('\n             ')}
+          `
+      )
+    }
 
-  // get around node.js's module cache to get the new config...
-  delete require.cache[path.resolve(configOutPath)]
+    // get around node.js's module cache to get the new config...
+    delete require.cache[path.resolve(configOutPath)]
 
-  const out = require(configOutPath)
+    const out = require(configOutPath)
 
-  const config = out.default || out
-  if (!config) {
-    throw new Error(`No config: ${config}`)
-  }
+    const config = out.default || out
+    if (!config) {
+      throw new Error(`No config: ${config}`)
+    }
 
-  let components = loadComponents({
-    ...props,
-    components: componentOutPaths,
-  })
+    let components = loadComponents({
+      ...props,
+      components: componentOutPaths,
+    })
 
-  if (!components) {
-    throw new Error(`No components found: ${componentOutPaths.join(', ')}`)
-  }
+    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)]
+    // map from built back to original module names
+    for (const component of components) {
+      component.moduleName =
+        baseComponents[componentOutPaths.indexOf(component.moduleName)]
+
+      if (!component.moduleName) {
+        console.warn(
+          `⚠️ no module name found: ${component.moduleName} ${JSON.stringify(
+            baseComponents
+          )} in ${JSON.stringify(componentOutPaths)}`
+        )
+      }
 
-    // if (!component.moduleName) {
-    //   throw new Error(`Tamagui internal err`)
-    // }
-  }
+      // 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]
-  }
+    // 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)
-  }
-  return {
-    components,
-    nameToPaths: {},
-    tamaguiConfig: config,
+    if (
+      process.env.NODE_ENV === 'development' &&
+      process.env.DEBUG?.startsWith('tamagui')
+    ) {
+      console.log('Loaded components', components)
+    }
+
+    const res = {
+      components,
+      nameToPaths: {},
+      tamaguiConfig: config,
+    }
+
+    currentConfig = res
+
+    return res
+  } finally {
+    isBundling = false
+    waitForBundle.forEach((cb) => cb())
+    waitForBundle.clear()
   }
 }
 
-export function loadComponents(props: Props): null | LoadedComponents[] {
+export function loadComponents(props: TamaguiOptions): null | LoadedComponents[] {
   const componentsModules = props.components
   const key = componentsModules.join('')
   if (cacheComponents[key]) {
@@ -213,12 +262,19 @@ export function loadComponents(props: Props): null | LoadedComponents[] {
           console.log(`loadModule`, loadModule, require.resolve(loadModule))
         }
 
-        return {
-          moduleName: name,
-          nameToInfo: getComponentStaticConfigByName(
+        const unregister = registerRequire()
+        try {
+          const nameToInfo = getComponentStaticConfigByName(
             name,
             interopDefaultExport(require(loadModule))
-          ),
+          )
+
+          return {
+            moduleName: name,
+            nameToInfo,
+          }
+        } finally {
+          unregister()
         }
       }
 

package/src/extractor/createExtractor.ts

@@ -105,17 +105,11 @@ export function createExtractor(
   // otherwise we'd import `rnw` and cause it to evaluate react-native-web which causes errors
 
   function loadSync(props: TamaguiOptions) {
-    return (projectInfo ||= loadTamaguiSync({
-      config: props.config || 'tamagui.config.ts',
-      components: props.components || ['tamagui'],
-    }))
+    return (projectInfo ||= loadTamaguiSync(props))
   }
 
   async function load(props: TamaguiOptions) {
-    return (projectInfo ||= await loadTamagui({
-      config: props.config || 'tamagui.config.ts',
-      components: props.components || ['tamagui'],
-    }))
+    return (projectInfo ||= await loadTamagui(props))
   }
 
   return {
@@ -196,8 +190,8 @@ export function createExtractor(
         return false
       }
       return !!(
-        !!staticConfig.validStyles?.[name] ||
-        !!pseudoDescriptors[name] ||
+        staticConfig.validStyles?.[name] ||
+        pseudoDescriptors[name] ||
         // dont disable variants or else you lose many things flattening
         staticConfig.variants?.[name] ||
         projectInfo?.tamaguiConfig.shorthands[name] ||
@@ -231,14 +225,12 @@ export function createExtractor(
         )
       }
       if (process.env.DEBUG?.startsWith('tamagui')) {
-        const next = [...propsWithFileInfo.allLoadedComponents].map((info) => {
-          const nameToInfo = { ...info.nameToInfo }
-          for (const key in nameToInfo) {
-            delete nameToInfo[key].staticConfig.validStyles
-          }
-          return { ...info, nameToInfo }
-        })
-        logger.info(['loaded:', JSON.stringify(next, null, 2)].join('\n'))
+        logger.info(
+          [
+            'loaded:',
+            JSON.stringify(propsWithFileInfo.allLoadedComponents, null, 2),
+          ].join('\n')
+        )
       }
     }
 
@@ -328,9 +320,9 @@ export function createExtractor(
         )
         if (shouldPrintDebug === 'verbose') {
           logger.info(
-            `import ${names.join(
+            ` - import ${isValidComponent ? '✅' : '⇣'} - ${names.join(
               ', '
-            )} from ${moduleName} isValidComponent ${isValidComponent}`
+            )} from '${moduleName}'`
           )
         }
         if (isValidComponent) {
@@ -342,7 +334,7 @@ export function createExtractor(
 
     if (shouldPrintDebug) {
       logger.info(
-        `file: ${sourcePath} ${JSON.stringify({ doesUseValidImport, hasImportedTheme })}`
+        `${JSON.stringify({ doesUseValidImport, hasImportedTheme }, null, 2)}\n`
       )
     }
 

package/src/extractor/generateTamaguiStudioConfig.ts

@@ -0,0 +1,99 @@
+import { join } from 'path'
+
+import { getVariableValue } from '@tamagui/core-node'
+import { TamaguiOptions } from '@tamagui/types'
+import fs from 'fs-extra'
+
+import { BundledConfig, getBundledConfig } from './bundleConfig.js'
+
+const confFile = join(process.cwd(), '.tamagui', 'tamagui.config.json')
+
+/**
+ * Sort of a super-set of bundleConfig(), this code needs some refactoring ideally
+ */
+
+export async function generateTamaguiStudioConfig(
+  tamaguiOptions: TamaguiOptions,
+  configIn?: BundledConfig | null,
+  rebuild = false
+) {
+  const config = configIn ?? (await getBundledConfig(tamaguiOptions, rebuild))
+  await fs.writeJSON(
+    confFile,
+    {
+      ...config,
+      tamaguiConfig: transformConfig(config),
+    },
+    {
+      spaces: 2,
+    }
+  )
+}
+
+export function generateTamaguiStudioConfigSync(
+  _tamaguiOptions: TamaguiOptions,
+  config: BundledConfig
+) {
+  fs.writeJSONSync(
+    confFile,
+    {
+      ...config,
+      tamaguiConfig: transformConfig(config),
+    },
+    {
+      spaces: 2,
+    }
+  )
+}
+
+function transformConfig(config: BundledConfig) {
+  // ensure we don't mangle anything in the original
+  const next = JSON.parse(JSON.stringify(config))
+
+  const { components, nameToPaths } = next
+  const { themes, tokens } = next.tamaguiConfig
+
+  // reduce down to usable, smaller json
+
+  // slim themes, add name
+  for (const key in themes) {
+    const theme = themes[key]
+    // @ts-ignore
+    theme.id = key
+    for (const tkey in theme) {
+      theme[tkey] = getVariableValue(theme[tkey])
+    }
+  }
+
+  // flatten variables
+  for (const key in tokens) {
+    const token = { ...tokens[key] }
+    for (const tkey in token) {
+      token[tkey] = getVariableValue(token[tkey])
+    }
+  }
+
+  // remove bulky stuff in components
+  for (const component of components) {
+    for (const _ in component.nameToInfo) {
+      // avoid mutating
+      const compDefinition = { ...component.nameToInfo[_] }
+      component.nameToInfo[_] = compDefinition
+
+      const { parentStaticConfig, ...rest } = compDefinition.staticConfig
+      compDefinition.staticConfig = rest
+    }
+  }
+
+  // set to array
+  for (const key in nameToPaths) {
+    // @ts-ignore
+    nameToPaths[key] = [...nameToPaths[key]]
+  }
+
+  // remove stuff we dont need to send
+  const { fontsParsed, getCSS, tokensParsed, themeConfig, ...cleanedConfig } =
+    next.tamaguiConfig
+
+  return cleanedConfig
+}