@tamagui/static 1.0.1-beta.56 → 1.0.1-beta.60

package/src/extractor/ensureImportingConcat.ts

@@ -0,0 +1,39 @@
+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>) {
+  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

@@ -0,0 +1,121 @@
+import * as t from '@babel/types'
+
+export function evaluateAstNode(
+  exprNode: t.Node | undefined | null,
+  evalFn?: (node: t.Node) => any,
+  shouldPrintDebug?: boolean | 'verbose'
+): 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

@@ -0,0 +1,119 @@
+import generate from '@babel/generator'
+import type { NodePath } from '@babel/traverse'
+import * as t from '@babel/types'
+
+import { ExtractedAttr, Ternary } from '../types'
+import { astToLiteral } from './literalToAst'
+
+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
+    ? ''
+    : attr.type === 'attr'
+    ? getNameAttr(attr.value)
+    : attr.type === 'ternary'
+    ? `...${ternaryStr(attr.value)}`
+    : `${attr.type}(${objToStr(attr.value)})`
+}
+
+export const objToStr = (obj: any, spacer = ', ') => {
+  if (!obj) {
+    return `${obj}`
+  }
+  return `{${Object.entries(obj)
+    .map(
+      ([k, v]) =>
+        `${k}:${
+          Array.isArray(v)
+            ? `[...]`
+            : v && typeof v === 'object'
+            ? `${objToStr(v, ',')}`
+            : JSON.stringify(v)
+        }`
+    )
+    .join(spacer)}}`
+}
+
+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) => {
+  const conditional = t.isIdentifier(x.test)
+    ? x.test.name
+    : t.isMemberExpression(x.test)
+    ? [x.test.object['name'], x.test.property['name']]
+    : generate(x.test).code
+  return [
+    'ternary(',
+    conditional,
+    isFilledObj(x.consequent) ? ` ? ${objToStr(x.consequent)}` : ' ? 🚫',
+    isFilledObj(x.alternate) ? ` : ${objToStr(x.alternate)}` : ' : 🚫',
+    ')',
+  ]
+    .flat()
+    .join('')
+}
+
+const isFilledObj = (obj: any) => obj && Object.keys(obj).length
+
+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('/dist/jsx') || srcName.includes('/core/src')
+}

package/src/extractor/extractMediaStyle.ts

@@ -0,0 +1,190 @@
+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 { 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: boolean | 'verbose' = 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 === 'verbose') {
+      // prettier-ignore
+      console.log('  media styles:', importance, styleObj, 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
+    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
+}