@tamagui/static 1.0.0-alpha.8 → 1.0.0-beta.179

package/src/extractor/ensureImportingConcat.ts

@@ -1,33 +0,0 @@
-import { NodePath } from '@babel/traverse'
-import * as t from '@babel/types'
-
-import { CONCAT_CLASSNAME_IMPORT } from './extractToClassNames'
-
-const importConcatPkg = '@tamagui/helpers'
-
-export function ensureImportingConcat(path: NodePath<t.Program>) {
-  const bodyPath = path.get('body')
-  const imported: NodePath<t.ImportDeclaration> | undefined = bodyPath.find(
-    (x) => x.isImportDeclaration() && x.node.source.value === importConcatPkg
-  ) as any
-  const importSpecifier = t.importSpecifier(
-    t.identifier(CONCAT_CLASSNAME_IMPORT),
-    t.identifier(CONCAT_CLASSNAME_IMPORT)
-  )
-
-  if (!imported) {
-    path.node.body.push(t.importDeclaration([importSpecifier], t.stringLiteral(importConcatPkg)))
-    return
-  }
-
-  const specifiers = imported.node.specifiers
-  const alreadyImported = specifiers.some(
-    (x) => t.isImportSpecifier(x) && t.isIdentifier(x.imported) && x.imported.name === CONCAT_CLASSNAME_IMPORT
-  )
-
-  if (!alreadyImported) {
-    specifiers.push(
-      t.importSpecifier(t.identifier(CONCAT_CLASSNAME_IMPORT), t.identifier(CONCAT_CLASSNAME_IMPORT))
-    )
-  }
-}

package/src/extractor/evaluateAstNode.ts

@@ -1,121 +0,0 @@
-import * as t from '@babel/types'
-
-export function evaluateAstNode(
-  exprNode: t.Node | undefined | null,
-  evalFn?: (node: t.Node) => any,
-  shouldPrintDebug?: boolean
-): any {
-  if (exprNode === undefined) {
-    return undefined
-  }
-
-  // null === boolean true (at least in our use cases for jsx eval)
-  if (exprNode === null) {
-    return true
-  }
-
-  if (t.isJSXExpressionContainer(exprNode)) {
-    return evaluateAstNode(exprNode.expression)
-  }
-
-  // loop through ObjectExpression keys
-  if (t.isObjectExpression(exprNode)) {
-    const ret: Record<string, any> = {}
-    for (let idx = -1, len = exprNode.properties.length; ++idx < len; ) {
-      const value = exprNode.properties[idx]
-
-      if (!t.isObjectProperty(value)) {
-        throw new Error('evaluateAstNode can only evaluate object properties')
-      }
-
-      let key: string | number | null | undefined | boolean
-      if (value.computed) {
-        if (typeof evalFn !== 'function') {
-          throw new Error(
-            'evaluateAstNode does not support computed keys unless an eval function is provided'
-          )
-        }
-        key = evaluateAstNode(value.key, evalFn)
-      } else if (t.isIdentifier(value.key)) {
-        key = value.key.name
-      } else if (t.isStringLiteral(value.key) || t.isNumericLiteral(value.key)) {
-        key = value.key.value
-      } else {
-        throw new Error('Unsupported key type: ' + value.key.type)
-      }
-
-      if (typeof key !== 'string' && typeof key !== 'number') {
-        throw new Error('key must be either a string or a number')
-      }
-
-      ret[key] = evaluateAstNode(value.value, evalFn)
-    }
-    return ret
-  }
-
-  if (t.isArrayExpression(exprNode)) {
-    return exprNode.elements.map((x) => {
-      return evaluateAstNode(x as any, evalFn)
-    })
-  }
-
-  if (t.isUnaryExpression(exprNode) && exprNode.operator === '-') {
-    const ret = evaluateAstNode(exprNode.argument, evalFn)
-    if (ret == null) {
-      return null
-    }
-    return -ret
-  }
-
-  if (t.isTemplateLiteral(exprNode)) {
-    if (typeof evalFn !== 'function') {
-      throw new Error(
-        'evaluateAstNode does not support template literals unless an eval function is provided'
-      )
-    }
-
-    let ret: string = ''
-    for (let idx = -1, len = exprNode.quasis.length; ++idx < len; ) {
-      const quasi = exprNode.quasis[idx]
-      const expr = exprNode.expressions[idx]
-      ret += quasi.value.raw
-      if (expr) {
-        ret += evaluateAstNode(expr, evalFn)
-      }
-    }
-    return ret
-  }
-
-  // In the interest of representing the "evaluated" prop
-  // as the user intended, we support negative null. Why not.
-  if (t.isNullLiteral(exprNode)) {
-    return null
-  }
-
-  if (t.isNumericLiteral(exprNode) || t.isStringLiteral(exprNode) || t.isBooleanLiteral(exprNode)) {
-    // In the interest of representing the "evaluated" prop
-    // as the user intended, we support negative null. Why not.
-    return exprNode.value
-  }
-
-  if (t.isBinaryExpression(exprNode)) {
-    if (exprNode.operator === '+') {
-      return evaluateAstNode(exprNode.left, evalFn) + evaluateAstNode(exprNode.right, evalFn)
-    } else if (exprNode.operator === '-') {
-      return evaluateAstNode(exprNode.left, evalFn) - evaluateAstNode(exprNode.right, evalFn)
-    } else if (exprNode.operator === '*') {
-      return evaluateAstNode(exprNode.left, evalFn) * evaluateAstNode(exprNode.right, evalFn)
-    } else if (exprNode.operator === '/') {
-      return evaluateAstNode(exprNode.left, evalFn) / evaluateAstNode(exprNode.right, evalFn)
-    }
-  }
-
-  // if we've made it this far, the value has to be evaluated
-  if (typeof evalFn !== 'function') {
-    throw new Error(
-      'evaluateAstNode does not support non-literal values unless an eval function is provided'
-    )
-  }
-
-  return evalFn(exprNode)
-}

package/src/extractor/extractHelpers.ts

@@ -1,102 +0,0 @@
-import type { NodePath } from '@babel/traverse'
-import * as t from '@babel/types'
-
-import { ExtractedAttr, Ternary } from '../types'
-
-export function isPresent<T extends Object>(input: null | void | undefined | T): input is T {
-  return input != null
-}
-
-export function isSimpleSpread(node: t.JSXSpreadAttribute) {
-  return t.isIdentifier(node.argument) || t.isMemberExpression(node.argument)
-}
-
-export const attrStr = (attr: ExtractedAttr) => {
-  return attr.type === 'attr'
-    ? getNameAttr(attr.value)
-    : attr.type === 'ternary'
-    ? `...${ternaryStr(attr.value)}`
-    : `${attr.type}(${objToStr(attr.value)})`
-}
-
-export const objToStr = (obj: any) => {
-  return Object.entries(obj)
-    .map(
-      ([k, v]) =>
-        `${k}:${Array.isArray(v) ? `[...]` : v && typeof v === 'object' ? `{${objToStr(v)}}` : v}`
-    )
-    .join(', ')
-}
-
-const getNameAttr = (attr: t.JSXAttribute | t.JSXSpreadAttribute) => {
-  if (t.isJSXSpreadAttribute(attr)) {
-    return `...${attr.argument['name']}`
-  }
-  return 'name' in attr ? attr.name.name : `unknown-${attr['type']}`
-}
-
-export const ternaryStr = (x: Ternary) => {
-  return [
-    'ternary:',
-    t.isIdentifier(x.test)
-      ? x.test.name
-      : t.isMemberExpression(x.test)
-      ? [x.test.object['name'], x.test.property['name']]
-      : x.test,
-    x.consequent ? `  ? ${objToStr(x.consequent)}` : '  ? ⚫️',
-    x.alternate ? `  : ${objToStr(x.alternate)}` : '  : ⚫️',
-  ]
-    .flat()
-    .join('')
-}
-
-export function findComponentName(scope) {
-  let componentName = ''
-  let cur = scope.path
-  while (cur.parentPath && !t.isProgram(cur.parentPath.parent)) {
-    cur = cur.parentPath
-  }
-  let node = cur.parent
-  if (t.isExportNamedDeclaration(node)) {
-    node = node.declaration
-  }
-  if (t.isVariableDeclaration(node)) {
-    const [dec] = node.declarations
-    if (t.isVariableDeclarator(dec) && t.isIdentifier(dec.id)) {
-      return dec.id.name
-    }
-  }
-  if (t.isFunctionDeclaration(node)) {
-    return node.id?.name
-  }
-  return componentName
-}
-
-export function isValidThemeHook(
-  jsxPath: NodePath<t.JSXElement>,
-  n: t.MemberExpression,
-  sourcePath: string
-) {
-  if (!t.isIdentifier(n.object) || !t.isIdentifier(n.property)) return false
-  const bindings = jsxPath.scope.getAllBindings()
-  const binding = bindings[n.object.name]
-  if (!binding?.path) return false
-  if (!binding.path.isVariableDeclarator()) return false
-  const init = binding.path.node.init
-  if (!t.isCallExpression(init)) return false
-  if (!t.isIdentifier(init.callee)) return false
-  // TODO could support renaming useTheme by looking up import first
-  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
-    }
-  }
-  return true
-}
-
-export const isInsideTamagui = (srcName: string) => {
-  return srcName.includes('/tamagui/_jsx') || srcName.includes('/core/src')
-}

package/src/extractor/extractMediaStyle.ts

@@ -1,191 +0,0 @@
-import { NodePath } from '@babel/traverse'
-import * as t from '@babel/types'
-import type { TamaguiInternalConfig } from '@tamagui/core'
-import { getStylesAtomic, mediaObjectToString } from '@tamagui/core-node'
-import { ViewStyle } from 'react-native'
-
-import { MEDIA_SEP } from '../constants'
-import { StyleObject, Ternary } from '../types'
-import { isInsideTamagui, isPresent } from './extractHelpers'
-
-export function extractMediaStyle(
-  ternary: Ternary,
-  jsxPath: NodePath<t.JSXElement>,
-  tamaguiConfig: TamaguiInternalConfig,
-  sourcePath: string,
-  importance = 0,
-  shouldPrintDebug = false
-) {
-  const mt = getMediaQueryTernary(ternary, jsxPath, sourcePath)
-  if (!mt) {
-    return null
-  }
-  const { key } = mt
-  const mq = tamaguiConfig.media[key]
-  if (!mq) {
-    console.error(`Media query "${key}" not found: ${Object.keys(tamaguiConfig.media)}`)
-    return null
-  }
-  const getStyleObj = (styleObj: ViewStyle | null, negate = false) => {
-    return styleObj ? { styleObj, negate } : null
-  }
-  const styleOpts = [
-    getStyleObj(ternary.consequent, false),
-    getStyleObj(ternary.alternate, true),
-  ].filter(isPresent)
-  if (shouldPrintDebug && !styleOpts.length) {
-    console.log('  media query, no styles?')
-    return null
-  }
-  // for now order first strongest
-  const mediaKeys = Object.keys(tamaguiConfig.media)
-  const mediaKeyPrecendence = mediaKeys.reduce((acc, cur, i) => {
-    acc[cur] = new Array(importance + 1).fill(':root').join('')
-    return acc
-  }, {})
-  let mediaStyles: StyleObject[] = []
-  for (const { styleObj, negate } of styleOpts) {
-    const styles = getStylesAtomic(styleObj)
-    const singleMediaStyles = styles.map((style) => {
-      const negKey = negate ? '0' : ''
-      const ogPrefix = style.identifier.slice(0, style.identifier.indexOf('-') + 1)
-      // adds an extra separator before and after to detect later in concatClassName
-      // so it goes from: "_f-[hash]"
-      // to: "_f-_sm0_[hash]" or "_f-_sm_[hash]"
-      const identifier = `${style.identifier.replace(
-        ogPrefix,
-        `${ogPrefix}${MEDIA_SEP}${key}${negKey}${MEDIA_SEP}`
-      )}`
-      const className = `.${identifier}`
-      const mediaSelector = mediaObjectToString(tamaguiConfig.media[key])
-      const screenStr = negate ? 'not all' : 'screen'
-      const mediaQuery = `${screenStr} and ${mediaSelector}`
-      const precendencePrefix = mediaKeyPrecendence[key]
-      const styleInner = style.rules[0].replace(style.identifier, identifier)
-      // combines media queries if they already exist
-      let styleRule = ''
-      if (styleInner.includes('@media')) {
-        // combine
-        styleRule = styleInner.replace('{', ` and ${mediaQuery} {`)
-      } else {
-        styleRule = `@media ${mediaQuery} { ${precendencePrefix} ${styleInner} }`
-      }
-      return {
-        ...style,
-        identifier,
-        className,
-        rules: [styleRule],
-      }
-    })
-    if (shouldPrintDebug) {
-      // prettier-ignore
-      console.log('  media styles:', importance, singleMediaStyles.map(x => x.identifier).join(', '))
-    }
-    // add to output
-    mediaStyles = [...mediaStyles, ...singleMediaStyles]
-  }
-  // filter out
-  ternary.remove()
-  return { mediaStyles, ternaryWithoutMedia: mt.ternaryWithoutMedia }
-}
-
-function getMediaQueryTernary(
-  ternary: Ternary,
-  jsxPath: NodePath<t.JSXElement>,
-  sourcePath: string
-): null | {
-  key: string
-  bindingName: string
-  ternaryWithoutMedia: Ternary | null
-} {
-  // this handles unwrapping logical && media query ternarys
-  // first, unwrap if it has media logicalExpression
-  if (t.isLogicalExpression(ternary.test) && ternary.test.operator === '&&') {
-    // *should* be normalized to always be on left side, TODO verify
-    const mediaLeft = getMediaInfoFromExpression(
-      ternary.test.left,
-      jsxPath,
-      sourcePath,
-      ternary.inlineMediaQuery
-    )
-    if (mediaLeft) {
-      return {
-        ...mediaLeft,
-        ternaryWithoutMedia: {
-          ...ternary,
-          test: ternary.test.right,
-        },
-      }
-    }
-  }
-  // const media = useMedia()
-  // ... media.sm
-  const result = getMediaInfoFromExpression(
-    ternary.test,
-    jsxPath,
-    sourcePath,
-    ternary.inlineMediaQuery
-  )
-  if (result) {
-    return {
-      ...result,
-      ternaryWithoutMedia: null,
-    }
-  }
-  return null
-}
-
-function getMediaInfoFromExpression(
-  test: t.Expression,
-  jsxPath: NodePath<t.JSXElement>,
-  sourcePath: string,
-  inlineMediaQuery?: string
-) {
-  if (inlineMediaQuery) {
-    return {
-      key: inlineMediaQuery,
-      bindingName: inlineMediaQuery,
-    }
-  }
-  if (t.isMemberExpression(test) && t.isIdentifier(test.object) && t.isIdentifier(test.property)) {
-    const name = test.object['name']
-    const key = test.property['name']
-    const bindings = jsxPath.scope.getAllBindings()
-    const binding = bindings[name]
-    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
-    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
-    return { key, bindingName: key }
-  }
-  return null
-}
-
-export function isValidMediaCall(
-  jsxPath: NodePath<t.JSXElement>,
-  init: t.Expression,
-  sourcePath: string
-) {
-  if (!t.isCallExpression(init)) return false
-  if (!t.isIdentifier(init.callee)) return false
-  // TODO could support renaming useMedia by looking up import first
-  if (init.callee.name !== 'useMedia') return false
-  const bindings = jsxPath.scope.getAllBindings()
-  const mediaBinding = bindings['useMedia']
-  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
-    }
-  }
-  return true
-}