@tamagui/static 1.0.1-beta.192 → 1.0.1-beta.194

package/src/extractor/loadTamagui.ts

@@ -1,22 +1,38 @@
+import { readFileSync } from 'fs'
 /* eslint-disable no-console */
-import { basename, dirname, join, relative, sep } from 'path'
+import { basename, dirname, extname, join, relative, sep } from 'path'
 
+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 { StaticConfig, TamaguiComponent, TamaguiInternalConfig } from '@tamagui/core-node'
+import type { StaticConfigParsed, TamaguiInternalConfig } from '@tamagui/core-node'
 import { createTamagui } from '@tamagui/core-node'
 import esbuild from 'esbuild'
-import { ensureDir, pathExists, stat, writeFile } from 'fs-extra'
+import { ensureDir, existsSync, removeSync, writeFileSync } from 'fs-extra'
 
 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
 }
@@ -46,9 +62,8 @@ export async function loadTamagui(props: Props): Promise<TamaguiProjectInfo> {
     resolver = res
   })
 
-  const tmpDir = join(process.cwd(), 'dist', 'tamagui-node')
+  const tmpDir = join(process.cwd(), '.tamagui', '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(
@@ -89,139 +104,98 @@ Tamagui built config and components:`
 
   await Promise.all([
     props.config
-      ? buildTamaguiConfig(props, {
+      ? bundle({
           entryPoints: [configEntry],
           external,
           outfile: configOutPath,
         })
       : null,
     ...baseComponents.map((componentModule, i) => {
-      return buildTamaguiConfig(props, {
+      return bundle({
         entryPoints: [componentModule],
+        resolvePlatformSpecificEntries: true,
         external,
         outfile: componentOutPaths[i],
       })
     }),
   ])
 
-  const coreNode = require('@tamagui/core-node')
+  try {
+    registerRequire(props.bubbleErrors)
+    const out = require(configOutPath)
+    const config = out.default || out
 
-  registerRequire(props.bubbleErrors)
-  const config = require(configOutPath).default
-  unregisterRequire()
+    if (!config) {
+      throw new Error(`No config: ${config}`)
+    }
 
-  const components = {
-    ...loadComponents({
+    let components = loadComponents({
       ...props,
       components: componentOutPaths,
-    }),
-    ...(includesCore && gatherTamaguiComponentInfo([coreNode])),
-  }
-
-  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)
+    if (!components) {
+      throw new Error(`No components found: ${componentOutPaths.join(', ')}`)
+    }
 
-  resolver(cache[key])
+    // 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`)
+      }
+    }
 
-  return cache[key]
-}
+    // 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]
+    }
 
-async function buildTamaguiConfig(
-  props: Props,
-  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)
+    if (process.env.NODE_ENV === 'development' && process.env.DEBUG?.startsWith('tamagui')) {
+      console.log('Loaded components', components)
     }
-    let tries = 5
-    while (tries--) {
-      if (await pathExists(options.outfile)) {
-        return
-      } else {
-        await new Promise((res) => setTimeout(res, 50))
-      }
+
+    cache[key] = {
+      components,
+      nameToPaths: {},
+      tamaguiConfig: config,
     }
-  }
 
-  void writeFile(lockFile, '')
+    // init core-node
+    createTamagui(cache[key].tamaguiConfig)
 
-  if (process.env.DEBUG?.startsWith('tamagui')) {
-    console.log(`Building`, options.entryPoints)
+    resolver(cache[key])
+
+    return cache[key]
+  } finally {
+    unregisterRequire()
   }
+}
 
-  const tsconfig = join(__dirname, '..', '..', 'tamagui.tsconfig.json')
-
-  return esbuild.build({
-    bundle: true,
-    ...options,
-    format: 'cjs',
-    target: 'node18',
-    jsx: 'transform',
-    jsxFactory: 'react',
-    allowOverwrite: true,
-    keepNames: true,
-    platform: 'node',
-    tsconfig,
-    loader: {
-      '.js': 'jsx',
-    },
-    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|react-native\/.*)$/ }, (args) => {
-            return {
-              path: 'react-native-web-lite',
-              external: true,
-            }
-          })
-        },
-      },
-      alias({
-        'react-native-svg': require.resolve('@tamagui/react-native-svg'),
-        'react-native-safe-area-context': require.resolve('@tamagui/fake-react-native'),
-        'react-native-gesture-handler': require.resolve('@tamagui/proxy-worm'),
-        'react-native-reanimated': require.resolve('@tamagui/proxy-worm'),
-        ...aliases,
-      }),
-    ],
-  })
+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: esbuild.BuildOptions = {
-  target: 'es2019',
+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 {
@@ -238,16 +212,11 @@ export function loadTamaguiSync(props: Props): TamaguiProjectInfo {
     // 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'
-    }
+    globalThis['__DEV__' as any] = process.env.NODE_ENV === 'development'
 
     try {
-      // import config
+      // config
       let tamaguiConfig: TamaguiInternalConfig | null = null
-
       if (props.config) {
         const configPath = join(process.cwd(), props.config)
         const exp = require(configPath)
@@ -260,17 +229,21 @@ export function loadTamaguiSync(props: Props): TamaguiProjectInfo {
         }
       }
 
+      // components
       const components = loadComponents(props)
-
+      if (!components) {
+        throw new Error(`No components loaded`)
+      }
       if (process.env.DEBUG === 'tamagui') {
         console.log(`components`, components)
       }
 
       // undo shims
       process.env.IS_STATIC = undefined
+      delete globalThis['__DEV__' as any]
 
       // set up core-node
-      if (tamaguiConfig) {
+      if (props.config && tamaguiConfig) {
         createTamagui(tamaguiConfig as any)
       }
 
@@ -296,7 +269,7 @@ export function loadTamaguiSync(props: Props): TamaguiProjectInfo {
         console.error(`Error loading tamagui.config.ts`, err)
       }
       return {
-        components: {},
+        components: [],
         tamaguiConfig: getDefaultTamaguiConfig(),
         nameToPaths: {},
       }
@@ -318,49 +291,187 @@ function interopDefaultExport(mod: any) {
   return mod?.default ?? mod
 }
 
-const cacheComponents = {}
+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)
+        }
+      }
+    },
+  })
+
+  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)),
+        ])
+      )
+    },
+  })
 
-function loadComponents(props: Props) {
+  return generate(ast as any, {
+    concise: false,
+    filename: 'test.tsx',
+    retainLines: false,
+    sourceMaps: false,
+  }).code
+}
+
+function loadComponents(props: Props): null | LoadedComponents[] {
   const componentsModules = props.components
   const key = componentsModules.join('')
   if (cacheComponents[key]) {
     return cacheComponents[key]
   }
   try {
-    const requiredModules = componentsModules.map((name) => {
-      return interopDefaultExport(require(name))
+    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 writeTmp = isLocal && !props.config
+      const fileContents = writeTmp ? readFileSync(name, 'utf-8') : ''
+      const loadModule = writeTmp
+        ? join(dirname(name), `.tamagui-dynamic-eval-${basename(name)}.tsx`)
+        : name
+      let writtenContents = fileContents
+      let didBabel = false
+
+      const esbuildit = (src: string, target?: 'modern') =>
+        esbuild.transformSync(src, {
+          ...esbuildOptions,
+          ...(target === 'modern' && {
+            target: 'es2022',
+            jsx: 'transform',
+            loader: 'tsx',
+            platform: 'neutral',
+            format: 'esm',
+          }),
+        }).code
+
+      function attemptLoad({ forceExports = false } = {}) {
+        // need to write to tsx to enable reading it properly (:/ esbuild-register)
+        if (writeTmp) {
+          writtenContents = forceExports
+            ? esbuildit(transformAddExports(babelParse(esbuildit(fileContents, 'modern'))))
+            : esbuildit(fileContents)
+
+          writeFileSync(loadModule, writtenContents)
+        }
+        return {
+          moduleName: name,
+          nameToInfo: getComponentStaticConfigByName(
+            name,
+            interopDefaultExport(require(loadModule))
+          ),
+        }
+      }
+
+      const dispose = () => {
+        writeTmp && removeSync(loadModule)
+      }
+
+      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()
+      }
+
+      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
+
+Quiet this warning with environment variable:
+      
+  TAMAGUI_DISABLE_WARN_DYNAMIC_LOAD=1
+
+`)
+          console.log(err)
+          console.log(
+            `At: ${loadModule}`,
+            `\ndidBabel: ${didBabel}`,
+            `\nIn:`,
+            writtenContents,
+            `\nwriteTmp: `,
+            writeTmp
+          )
+        }
+        return []
+      } finally {
+        dispose()
+      }
     })
-    const res = gatherTamaguiComponentInfo(requiredModules)
-    cacheComponents[key] = res
-    return res
+    cacheComponents[key] = info
+    return info
   } catch (err: any) {
     if (props.bubbleErrors) {
       throw err
     }
     console.log(`Tamagui error bundling components`, err.message, err.stack)
+    return null
   }
 }
 
-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)
+function getComponentStaticConfigByName(name: string, exported: any) {
+  if (!exported || typeof exported !== 'object' || Array.isArray(exported)) {
+    throw new Error(`Invalid export from package ${name}: ${typeof exported}`)
+  }
+  const components: Record<string, { staticConfig: StaticConfigParsed }> = {}
+  try {
+    for (const key in exported) {
+      const found = getTamaguiComponent(key, exported[key])
+      if (found) {
+        // remove non-stringifyable
+        const { Component, reactNativeWebComponent, ...sc } = found.staticConfig
+        components[key] = { 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
 }
@@ -368,11 +479,11 @@ function gatherTamaguiComponentInfo(packages: any[]) {
 function getTamaguiComponent(
   name: string,
   Component: any
-): undefined | { staticConfig: StaticConfig } {
+): undefined | { staticConfig: StaticConfigParsed } {
   if (name[0].toUpperCase() !== name[0]) {
     return
   }
-  const staticConfig = Component?.staticConfig as StaticConfig | undefined
+  const staticConfig = Component?.staticConfig as StaticConfigParsed | undefined
   if (staticConfig) {
     return Component
   }

package/src/extractor/normalizeTernaries.ts

@@ -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/getPragmaOptions.ts

@@ -17,7 +17,8 @@ export function getPragmaOptions({
   let shouldPrintDebug: boolean | 'verbose' = false
   let shouldDisable = false
 
-  const firstLine = source.split('\n', 1)[0]
+  // try and avoid too much parsing but sometimes esbuild adds helpers above..
+  const firstLine = source.slice(0, 800).split('\n')[0]
 
   if (firstLine.includes('tamagui-ignore')) {
     shouldDisable = true

package/src/index.ts

@@ -6,7 +6,6 @@ export { literalToAst } from './extractor/literalToAst.js'
 export * from './constants.js'
 export * from './extractor/extractToClassNames.js'
 export * from './extractor/extractHelpers.js'
-export * from '@tamagui/patch-rnw'
 export * from './extractor/loadTamagui.js'
 export * from './require.js'
 export * from './getPragmaOptions.js'

package/src/require.ts

@@ -1,4 +1,4 @@
-import { sep } from 'path'
+import { relative, sep } from 'path'
 
 import { SHOULD_DEBUG } from './constants.js'
 
@@ -32,7 +32,7 @@ export function registerRequire(bubbleErrors?: boolean) {
       // eslint-disable-next-line no-console
       console.log('tamagui:require', path)
     }
-    if (path.endsWith('.css') || path.endsWith('.json') || path.endsWith('.ttf')) {
+    if (/\.(gif|jpe?g|png|svg|ttf|otf|woff2?|bmp|webp)$/.test(path)) {
       return {}
     }
     if (
@@ -86,11 +86,19 @@ export function registerRequire(bubbleErrors?: boolean) {
 
       // eslint-disable-next-line no-console
       console.error(
-        `Tamagui failed requiring ${path} from your tamagui.config.ts file, ignoring\n`,
-        err.message,
-        err.stack
+        `Tamagui failed loading the pre-built tamagui.config.ts
+
+${err.message}
+${err.stack}
+
+  You can see if it loads in the node repl:
+
+  require("./${relative(process.cwd(), path)}").default
+
+`
       )
-      const max = process.env.TAMAGUI_MAX_ERRORS ? +process.env.TAMAGUI_MAX_ERRORS : 200
+
+      const max = process.env.TAMAGUI_MAX_ERRORS ? +process.env.TAMAGUI_MAX_ERRORS : 50
       if (++tries > max) {
         // eslint-disable-next-line no-console
         console.log(
@@ -99,8 +107,8 @@ export function registerRequire(bubbleErrors?: boolean) {
         // avoid infinite loops
         process.exit(1)
       }
-      // return proxyWorm by default
-      return proxyWorm
+
+      return null
     }
   }
 

package/src/types.ts

@@ -5,6 +5,8 @@ import type { StyleObject } from '@tamagui/helpers'
 import type { TamaguiOptions } from '@tamagui/helpers-node'
 import type { ViewStyle } from 'react-native'
 
+import { LoadedComponents } from './index'
+
 export type { TamaguiOptions } from '@tamagui/helpers-node'
 
 export type { StyleObject } from '@tamagui/helpers'
@@ -49,6 +51,7 @@ export type ExtractedAttr =
   | ExtractedAttrStyle
 
 export type ExtractTagProps = {
+  parserProps: TamaguiOptionsWithFileInfo
   attrs: ExtractedAttr[]
   node: t.JSXOpeningElement
   attemptEval: (exprNode: t.Node, evalFn?: ((node: t.Node) => any) | undefined) => any
@@ -64,9 +67,10 @@ export type ExtractTagProps = {
 
 export type TamaguiOptionsWithFileInfo = TamaguiOptions & {
   sourcePath: string
+  allLoadedComponents: LoadedComponents[]
 }
 
-export type ExtractorParseProps = TamaguiOptionsWithFileInfo & {
+export type ExtractorParseProps = Omit<TamaguiOptionsWithFileInfo, 'allLoadedComponents'> & {
   target: 'native' | 'html'
   shouldPrintDebug?: boolean | 'verbose'
   onExtractTag: (props: ExtractTagProps) => void

package/types/extractor/babelParse.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="node" />
 import * as babelParser from '@babel/parser';
+import * as t from '@babel/types';
 export declare const parserOptions: babelParser.ParserOptions;
-export declare function babelParse(code: string | Buffer): any;
+export declare function babelParse(code: string | Buffer): t.File;
 //# sourceMappingURL=babelParse.d.ts.map

package/types/extractor/bundle.d.ts

@@ -0,0 +1,13 @@
+import esbuild from 'esbuild';
+/**
+ * For internal loading of new files
+ */
+declare type Props = Omit<Partial<esbuild.BuildOptions>, 'entryPoints'> & {
+    outfile: string;
+    entryPoints: string[];
+    resolvePlatformSpecificEntries?: boolean;
+};
+export declare function bundle(props: Props, aliases?: Record<string, string>): Promise<esbuild.BuildResult>;
+export declare function bundleSync(props: Props, aliases?: Record<string, string>): esbuild.BuildResult;
+export {};
+//# sourceMappingURL=bundle.d.ts.map

package/types/extractor/extractHelpers.d.ts

@@ -8,7 +8,17 @@ export declare const objToStr: (obj: any, spacer?: string) => any;
 export declare const ternaryStr: (x: Ternary) => string;
 export declare function findComponentName(scope: any): string | undefined;
 export declare function isValidThemeHook(props: TamaguiOptionsWithFileInfo, jsxPath: NodePath<t.JSXElement>, n: t.MemberExpression, sourcePath: string): boolean;
-export declare const isInsideComponentPackage: (props: TamaguiOptionsWithFileInfo, srcName: string) => boolean;
-export declare const isComponentPackage: (props: TamaguiOptionsWithFileInfo, srcName: string) => boolean;
-export declare const isValidImport: (props: TamaguiOptionsWithFileInfo, srcName: string) => boolean;
+export declare const isInsideComponentPackage: (props: TamaguiOptionsWithFileInfo, moduleName: string) => any;
+export declare const isComponentPackage: (props: TamaguiOptionsWithFileInfo, srcName: string) => any;
+export declare function getValidComponent(props: TamaguiOptionsWithFileInfo, moduleName: string, componentName: string): false | {
+    staticConfig: import("@tamagui/core-node").StaticConfigParsed;
+} | null;
+export declare const isValidModule: (props: TamaguiOptionsWithFileInfo, moduleName: string) => {
+    isLocal: boolean;
+    isValid: any;
+};
+export declare const getValidImport: (props: TamaguiOptionsWithFileInfo, moduleName: string, componentName?: string) => {
+    staticConfig: import("@tamagui/core-node").StaticConfigParsed;
+} | null;
+export declare const isValidImport: (props: TamaguiOptionsWithFileInfo, moduleName: string, componentName?: string) => any;
 //# sourceMappingURL=extractHelpers.d.ts.map