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

package/src/extractor/ensureImportingConcat.ts

@@ -1,8 +1,6 @@
 import { NodePath } from '@babel/traverse'
 import * as t from '@babel/types'
 
-import { CONCAT_CLASSNAME_IMPORT } from '../constants'
-
 const importConcatPkg = '@tamagui/helpers'
 
 export function ensureImportingConcat(path: NodePath<t.Program>) {
@@ -11,8 +9,8 @@ export function ensureImportingConcat(path: NodePath<t.Program>) {
     (x) => x.isImportDeclaration() && x.node.source.value === importConcatPkg
   ) as any
   const importSpecifier = t.importSpecifier(
-    t.identifier(CONCAT_CLASSNAME_IMPORT),
-    t.identifier(CONCAT_CLASSNAME_IMPORT)
+    t.identifier('concatClassName'),
+    t.identifier('concatClassName')
   )
 
   if (!imported) {
@@ -23,17 +21,12 @@ export function ensureImportingConcat(path: NodePath<t.Program>) {
   const specifiers = imported.node.specifiers
   const alreadyImported = specifiers.some(
     (x) =>
-      t.isImportSpecifier(x) &&
-      t.isIdentifier(x.imported) &&
-      x.imported.name === CONCAT_CLASSNAME_IMPORT
+      t.isImportSpecifier(x) && t.isIdentifier(x.imported) && x.imported.name === 'concatClassName'
   )
 
   if (!alreadyImported) {
     specifiers.push(
-      t.importSpecifier(
-        t.identifier(CONCAT_CLASSNAME_IMPORT),
-        t.identifier(CONCAT_CLASSNAME_IMPORT)
-      )
+      t.importSpecifier(t.identifier('concatClassName'), t.identifier('concatClassName'))
     )
   }
 }

package/src/extractor/evaluateAstNode.ts

@@ -74,7 +74,7 @@ export function evaluateAstNode(
       )
     }
 
-    let ret: string = ''
+    let ret = ''
     for (let idx = -1, len = exprNode.quasis.length; ++idx < len; ) {
       const quasi = exprNode.quasis[idx]
       const expr = exprNode.expressions[idx]

package/src/extractor/extractHelpers.ts

@@ -1,9 +1,14 @@
+import { basename, relative } from 'path'
+
 import generate from '@babel/generator'
 import type { NodePath } from '@babel/traverse'
 import * as t from '@babel/types'
+import findRoot from 'find-root'
+
+import { memoize } from '../helpers/memoize.js'
+import type { ExtractedAttr, TamaguiOptionsWithFileInfo, Ternary } from '../types.js'
 
-import { ExtractedAttr, Ternary } from '../types'
-import { astToLiteral } from './literalToAst'
+// import { astToLiteral } from './literalToAst'
 
 export function isPresent<T extends Object>(input: null | void | undefined | T): input is T {
   return input != null
@@ -53,7 +58,7 @@ export const ternaryStr = (x: Ternary) => {
     ? x.test.name
     : t.isMemberExpression(x.test)
     ? [x.test.object['name'], x.test.property['name']]
-    : generate(x.test).code
+    : generate(x.test as any).code
   return [
     'ternary(',
     conditional,
@@ -68,7 +73,7 @@ export const ternaryStr = (x: Ternary) => {
 const isFilledObj = (obj: any) => obj && Object.keys(obj).length
 
 export function findComponentName(scope) {
-  let componentName = ''
+  const componentName = ''
   let cur = scope.path
   while (cur.parentPath && !t.isProgram(cur.parentPath.parent)) {
     cur = cur.parentPath
@@ -90,6 +95,7 @@ export function findComponentName(scope) {
 }
 
 export function isValidThemeHook(
+  props: TamaguiOptionsWithFileInfo,
   jsxPath: NodePath<t.JSXElement>,
   n: t.MemberExpression,
   sourcePath: string
@@ -106,14 +112,91 @@ export function isValidThemeHook(
   if (init.callee.name !== 'useTheme') return false
   const importNode = binding.scope.getBinding('useTheme')?.path.parent
   if (!t.isImportDeclaration(importNode)) return false
-  if (importNode.source.value !== 'tamagui') {
-    if (!isInsideTamagui(sourcePath)) {
-      return false
-    }
+  if (!isValidImport(props, sourcePath)) {
+    return false
   }
   return true
 }
 
-export const isInsideTamagui = (srcName: string) => {
-  return srcName.includes('/dist/jsx') || srcName.includes('/core/src')
+export const isInsideComponentPackage = (props: TamaguiOptionsWithFileInfo, moduleName: string) => {
+  return getValidComponentsPaths(props).some((path) => {
+    return moduleName.startsWith(path)
+  })
+}
+
+export const isComponentPackage = (props: TamaguiOptionsWithFileInfo, srcName: string) => {
+  return getValidComponentsPaths(props).some((path) => {
+    return srcName.startsWith(path)
+  })
+}
+
+export function getValidComponent(
+  props: TamaguiOptionsWithFileInfo,
+  moduleName: string,
+  componentName: string
+) {
+  // must be uppercase of course
+  if (componentName[0].toUpperCase() !== componentName[0]) {
+    return false
+  }
+
+  for (const loaded of props.allLoadedComponents) {
+    if (!loaded) continue
+    const isInModule = moduleName === '*' || moduleName.startsWith(loaded.moduleName)
+    const foundComponent = loaded.nameToInfo[componentName]
+    // eslint-disable-next-line no-console
+    if (isInModule && foundComponent) {
+      return foundComponent
+    }
+  }
+
+  return null
 }
+
+export const isValidModule = (props: TamaguiOptionsWithFileInfo, moduleName: string) => {
+  if (typeof moduleName !== 'string') {
+    throw new Error(`No module name`)
+  }
+  const isLocal = moduleName.startsWith('.')
+  return {
+    isLocal,
+    isValid: isLocal
+      ? isInsideComponentPackage(props, moduleName)
+      : isComponentPackage(props, moduleName),
+  }
+}
+
+export const getValidImport = (
+  props: TamaguiOptionsWithFileInfo,
+  moduleName: string,
+  componentName?: string
+) => {
+  const { isValid, isLocal } = isValidModule(props, moduleName)
+  if (!isValid || !componentName) {
+    return null
+  }
+  return getValidComponent(props, isLocal ? '*' : moduleName, componentName) || null
+}
+
+export const isValidImport = (
+  props: TamaguiOptionsWithFileInfo,
+  moduleName: string,
+  componentName?: string
+) => {
+  if (!componentName) {
+    return isValidModule(props, moduleName).isValid
+  }
+  return Boolean(getValidImport(props, moduleName, componentName))
+}
+
+const getValidComponentPackages = memoize((props: TamaguiOptionsWithFileInfo) => {
+  // just always look for `tamagui` and `@tamagui/core`
+  return [...new Set(['@tamagui/core', 'tamagui', ...props.components])]
+})
+
+const getValidComponentsPaths = memoize((props: TamaguiOptionsWithFileInfo) => {
+  return getValidComponentPackages(props).map((pkg) => {
+    const root = findRoot(pkg)
+    return basename(root)
+  })
+})

package/src/extractor/extractMediaStyle.ts

@@ -1,13 +1,14 @@
 import { NodePath } from '@babel/traverse'
 import * as t from '@babel/types'
 import { TamaguiInternalConfig, getStylesAtomic, mediaObjectToString } from '@tamagui/core-node'
-import { ViewStyle } from 'react-native'
+import type { ViewStyle } from 'react-native'
 
-import { MEDIA_SEP } from '../constants'
-import { StyleObject, Ternary } from '../types'
-import { isInsideTamagui, isPresent } from './extractHelpers'
+import { MEDIA_SEP } from '../constants.js'
+import type { StyleObject, TamaguiOptionsWithFileInfo, Ternary } from '../types.js'
+import { isPresent, isValidImport } from './extractHelpers.js'
 
 export function extractMediaStyle(
+  props: TamaguiOptionsWithFileInfo,
   ternary: Ternary,
   jsxPath: NodePath<t.JSXElement>,
   tamaguiConfig: TamaguiInternalConfig,
@@ -15,13 +16,14 @@ export function extractMediaStyle(
   importance = 0,
   shouldPrintDebug: boolean | 'verbose' = false
 ) {
-  const mt = getMediaQueryTernary(ternary, jsxPath, sourcePath)
+  const mt = getMediaQueryTernary(props, ternary, jsxPath, sourcePath)
   if (!mt) {
     return null
   }
   const { key } = mt
   const mq = tamaguiConfig.media[key]
   if (!mq) {
+    // eslint-disable-next-line no-console
     console.error(`Media query "${key}" not found: ${Object.keys(tamaguiConfig.media)}`)
     return null
   }
@@ -33,6 +35,7 @@ export function extractMediaStyle(
     getStyleObj(ternary.alternate, true),
   ].filter(isPresent)
   if (shouldPrintDebug && !styleOpts.length) {
+    // eslint-disable-next-line no-console
     console.log('  media query, no styles?')
     return null
   }
@@ -80,6 +83,7 @@ export function extractMediaStyle(
     })
     if (shouldPrintDebug === 'verbose') {
       // prettier-ignore
+      // eslint-disable-next-line no-console
       console.log('  media styles:', importance, styleObj, singleMediaStyles.map(x => x.identifier).join(', '))
     }
     // add to output
@@ -91,6 +95,7 @@ export function extractMediaStyle(
 }
 
 function getMediaQueryTernary(
+  props: TamaguiOptionsWithFileInfo,
   ternary: Ternary,
   jsxPath: NodePath<t.JSXElement>,
   sourcePath: string
@@ -104,6 +109,7 @@ function getMediaQueryTernary(
   if (t.isLogicalExpression(ternary.test) && ternary.test.operator === '&&') {
     // *should* be normalized to always be on left side
     const mediaLeft = getMediaInfoFromExpression(
+      props,
       ternary.test.left,
       jsxPath,
       sourcePath,
@@ -122,6 +128,7 @@ function getMediaQueryTernary(
   // const media = useMedia()
   // ... media.sm
   const result = getMediaInfoFromExpression(
+    props,
     ternary.test,
     jsxPath,
     sourcePath,
@@ -137,6 +144,7 @@ function getMediaQueryTernary(
 }
 
 function getMediaInfoFromExpression(
+  props: TamaguiOptionsWithFileInfo,
   test: t.Expression,
   jsxPath: NodePath<t.JSXElement>,
   sourcePath: string,
@@ -156,20 +164,21 @@ function getMediaInfoFromExpression(
     if (!binding) return false
     const bindingNode = binding.path?.node
     if (!t.isVariableDeclarator(bindingNode) || !bindingNode.init) return false
-    if (!isValidMediaCall(jsxPath, bindingNode.init, sourcePath)) return false
+    if (!isValidMediaCall(props, jsxPath, bindingNode.init, sourcePath)) return false
     return { key, bindingName: name }
   }
   if (t.isIdentifier(test)) {
     const key = test.name
     const node = jsxPath.scope.getBinding(test.name)?.path?.node
     if (!t.isVariableDeclarator(node)) return false
-    if (!node.init || !isValidMediaCall(jsxPath, node.init, sourcePath)) return false
+    if (!node.init || !isValidMediaCall(props, jsxPath, node.init, sourcePath)) return false
     return { key, bindingName: key }
   }
   return null
 }
 
 export function isValidMediaCall(
+  props: TamaguiOptionsWithFileInfo,
   jsxPath: NodePath<t.JSXElement>,
   init: t.Expression,
   sourcePath: string
@@ -183,10 +192,8 @@ export function isValidMediaCall(
   if (!mediaBinding) return false
   const useMediaImport = mediaBinding.path.parent
   if (!t.isImportDeclaration(useMediaImport)) return false
-  if (useMediaImport.source.value !== 'tamagui') {
-    if (!isInsideTamagui(sourcePath)) {
-      return false
-    }
+  if (!isValidImport(props, sourcePath)) {
+    return false
   }
   return true
 }

package/src/extractor/extractToClassNames.ts

@@ -7,20 +7,19 @@ import * as t from '@babel/types'
 import { getStylesAtomic } from '@tamagui/core-node'
 import { concatClassName } from '@tamagui/helpers'
 import invariant from 'invariant'
-import { ViewStyle } from 'react-native'
-
-import { CONCAT_CLASSNAME_IMPORT } from '../constants'
-import { ClassNameObject, StyleObject, TamaguiOptions, Ternary } from '../types'
-import { babelParse } from './babelParse'
-import { buildClassName } from './buildClassName'
-import { Extractor } from './createExtractor'
-import { ensureImportingConcat } from './ensureImportingConcat'
-import { isSimpleSpread } from './extractHelpers'
-import { extractMediaStyle } from './extractMediaStyle'
-import { getPrefixLogs } from './getPrefixLogs'
-import { hoistClassNames } from './hoistClassNames'
-import { logLines } from './logLines'
-import { timer } from './timer'
+import type { ViewStyle } from 'react-native'
+
+import type { ClassNameObject, StyleObject, TamaguiOptions, Ternary } from '../types.js'
+import { babelParse } from './babelParse.js'
+import { buildClassName } from './buildClassName.js'
+import { Extractor } from './createExtractor.js'
+import { ensureImportingConcat } from './ensureImportingConcat.js'
+import { isSimpleSpread } from './extractHelpers.js'
+import { extractMediaStyle } from './extractMediaStyle.js'
+import { getPrefixLogs } from './getPrefixLogs.js'
+import { hoistClassNames } from './hoistClassNames.js'
+import { logLines } from './logLines.js'
+import { timer } from './timer.js'
 
 const mergeStyleGroups = {
   shadowOpacity: true,
@@ -37,19 +36,21 @@ export type ExtractedResponse = {
   map: any // RawSourceMap from 'source-map'
 }
 
-export function extractToClassNames({
-  extractor,
-  source,
-  sourcePath,
-  options,
-  shouldPrintDebug,
-}: {
+export type ExtractToClassNamesProps = {
   extractor: Extractor
   source: string | Buffer
   sourcePath: string
   options: TamaguiOptions
   shouldPrintDebug: boolean | 'verbose'
-}): ExtractedResponse | null {
+}
+
+export async function extractToClassNames({
+  extractor,
+  source,
+  sourcePath,
+  options,
+  shouldPrintDebug,
+}: ExtractToClassNamesProps): Promise<ExtractedResponse | null> {
   const tm = timer()
 
   if (typeof source !== 'string') {
@@ -60,6 +61,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 +74,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,20 +86,26 @@ export function extractToClassNames({
 
   let hasFlattened = false
 
-  const res = extractor.parse(ast, {
-    sourcePath,
+  const res = await extractor.parse(ast, {
     shouldPrintDebug,
     ...options,
+    sourcePath,
     target: 'html',
     extractStyledDefinitions: true,
     onStyleRule(identifier, rules) {
-      cssMap.set(`.${identifier}`, { css: rules.join(';'), commentTexts: [] })
+      const css = rules.join(';')
+      if (shouldPrintDebug) {
+        // eslint-disable-next-line no-console
+        console.log(`adding styled() rule: .${identifier} ${css}`)
+      }
+      cssMap.set(`.${identifier}`, { css, commentTexts: [] })
     },
     getFlattenedNode: ({ tag }) => {
       hasFlattened = true
       return tag
     },
     onExtractTag: ({
+      parserProps,
       attrs,
       node,
       attemptEval,
@@ -104,13 +115,24 @@ export function extractToClassNames({
       lineNumbers,
       programPath,
       isFlattened,
+      completeProps,
+      staticConfig,
     }) => {
+      // bail out of views that don't accept className (falls back to runtime + style={})
+      if (staticConfig.acceptsClassName === false) {
+        if (shouldPrintDebug) {
+          // eslint-disable-next-line no-console
+          console.log(`bail, acceptsClassName is false`)
+        }
+        return
+      }
+
       // reset hasFlattened
       const didFlattenThisTag = hasFlattened
       hasFlattened = false
 
       let finalClassNames: ClassNameObject[] = []
-      let finalAttrs: (t.JSXAttribute | t.JSXSpreadAttribute)[] = []
+      const finalAttrs: (t.JSXAttribute | t.JSXSpreadAttribute)[] = []
       let finalStyles: StyleObject[] = []
 
       let viewStyles = {}
@@ -151,7 +173,7 @@ export function extractToClassNames({
       let lastMediaImportance = 1
       for (const attr of attrs) {
         switch (attr.type) {
-          case 'style':
+          case 'style': {
             if (!isFlattened) {
               const styles = getStylesAtomic(attr.value)
 
@@ -179,7 +201,8 @@ export function extractToClassNames({
             }
 
             break
-          case 'attr':
+          }
+          case 'attr': {
             const val = attr.value
             if (t.isJSXSpreadAttribute(val)) {
               if (isSimpleSpread(val)) {
@@ -205,19 +228,25 @@ export function extractToClassNames({
             }
             finalAttrs.push(val)
             break
-          case 'ternary':
+          }
+          case 'ternary': {
             const mediaExtraction = extractMediaStyle(
+              parserProps,
               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) {
@@ -241,6 +270,7 @@ export function extractToClassNames({
               ]
             }
             break
+          }
         }
       }
 
@@ -263,18 +293,46 @@ 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
 
       if (finalClassNames.length) {
+        const extraClassNames = (() => {
+          let value = ''
+          if (!isFlattened) {
+            return value
+          }
+
+          // helper to see how many get flattened
+          if (process.env.TAMAGUI_DEBUG_OPTIMIZATIONS) {
+            value += `is_tamagui_flattened`
+          }
+
+          // add is_Component className
+          if (staticConfig.componentName) {
+            value += ` is_${staticConfig.componentName}`
+          }
+
+          if (staticConfig.isText) {
+            let family = completeProps.fontFamily
+            if (family[0] === '$') {
+              family = family.slice(1)
+            }
+            value += ` font_${family}`
+          }
+
+          return value
+        })()
+
         // inserts the _cn variable and uses it for className
-        let names = buildClassName(finalClassNames)
-        if (t.isStringLiteral(names)) {
-          names.value = concatClassName(names.value)
-        }
+        const names = buildClassName(finalClassNames, extraClassNames)
+
         const nameExpr = names ? hoistClassNames(jsxPath, existingHoists, names) : null
         let expr = nameExpr
 
@@ -287,7 +345,7 @@ export function extractToClassNames({
             const simpleSpreads = attrs.filter(
               (x) => t.isJSXSpreadAttribute(x.value) && isSimpleSpread(x.value)
             )
-            expr = t.callExpression(t.identifier(CONCAT_CLASSNAME_IMPORT), [
+            expr = t.callExpression(t.identifier('concatClassName'), [
               expr,
               ...simpleSpreads.map((val) => val.value['argument']),
             ])
@@ -310,12 +368,8 @@ export function extractToClassNames({
             cssMap.set(className, val)
           }
         } else if (rules.length) {
-          if (rules.length > 1) {
-            console.log('  rules error', { rules })
-            throw new Error(`Shouldn't have more than one rule`)
-          }
           cssMap.set(className, {
-            css: rules[0],
+            css: rules.join('\n'),
             commentTexts: [comment],
           })
         }
@@ -325,6 +379,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
@@ -336,7 +391,7 @@ export function extractToClassNames({
     .trim()
 
   const result = generate(
-    ast,
+    ast as any,
     {
       concise: false,
       filename: sourcePath,
@@ -349,6 +404,7 @@ export function extractToClassNames({
   )
 
   if (shouldPrintDebug) {
+    // eslint-disable-next-line no-console
     console.log(
       '\n -------- output code ------- \n\n',
       result.code
@@ -356,6 +412,7 @@ export function extractToClassNames({
         .filter((x) => !x.startsWith('//'))
         .join('\n')
     )
+    // eslint-disable-next-line no-console
     console.log('\n -------- output style -------- \n\n', styles)
   }
 
@@ -375,10 +432,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/getPrefixLogs.ts

@@ -1,4 +1,4 @@
-import { TamaguiOptions } from '../types'
+import { TamaguiOptions } from '../types.js'
 
 export function getPrefixLogs(options?: TamaguiOptions) {
   const { TAMAGUI_TARGET } = process.env

package/src/extractor/getPropValueFromAttributes.ts

@@ -1,7 +1,7 @@
 import generate from '@babel/generator'
 import * as t from '@babel/types'
 
-import { accessSafe } from './accessSafe'
+import { accessSafe } from './accessSafe.js'
 
 /**
  * getPropValueFromAttributes gets a prop by name from a list of attributes and accounts for potential spread operators.
@@ -23,7 +23,7 @@ export function getPropValueFromAttributes(
   propName: string,
   attrs: (t.JSXAttribute | t.JSXSpreadAttribute)[]
 ): t.Expression | null {
-  let propIndex: number = -1
+  let propIndex = -1
   let jsxAttr: t.JSXAttribute | null = null
   for (let idx = -1, len = attrs.length; ++idx < len; ) {
     const attr = attrs[idx]
@@ -52,6 +52,7 @@ export function getPropValueFromAttributes(
 
   // TODO how to handle this??
   if (t.isJSXEmptyExpression(propValue)) {
+    // eslint-disable-next-line no-console
     console.error('encountered JSXEmptyExpression')
     return null
   }
@@ -70,7 +71,7 @@ export function getPropValueFromAttributes(
             return false
           }
           throw new Error(
-            `unsupported spread of type "${attr.argument.type}": ${generate(attr).code}`
+            `unsupported spread of type "${attr.argument.type}": ${generate(attr as any).code}`
           )
         }
         return false

package/src/extractor/getSourceModule.ts

@@ -80,10 +80,12 @@ export function getSourceModule(
       }
 
       if (!local || !imported) {
+        // eslint-disable-next-line no-console
         console.error('could not find prop with value `%s`', itemName)
         return null
       }
     } else {
+      // eslint-disable-next-line no-console
       console.error('Unhandled id type: %s', itemNode.id.type)
       return null
     }