@tamagui/static 1.0.0-alpha.9 → 1.0.0-beta.0

package/src/extractor/extractToClassNames.ts

@@ -1,323 +0,0 @@
-import * as path from 'path'
-import { basename } from 'path'
-import * as util from 'util'
-
-import generate from '@babel/generator'
-import * as t from '@babel/types'
-import { getStylesAtomic } from '@tamagui/core-node'
-import { concatClassName } from '@tamagui/helpers'
-import invariant from 'invariant'
-import { getRemainingRequest } from 'loader-utils'
-import { ViewStyle } from 'react-native'
-
-import { ClassNameObject, StyleObject, TamaguiOptions } 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 { hoistClassNames } from './hoistClassNames'
-import { logLines } from './logLines'
-
-export const CONCAT_CLASSNAME_IMPORT = 'concatClassName'
-
-const mergeStyleGroups = {
-  shadowOpacity: true,
-  shadowRadius: true,
-  shadowColor: true,
-  shadowOffset: true,
-}
-
-export function extractToClassNames({
-  loader,
-  extractor,
-  source,
-  sourcePath,
-  options,
-  shouldPrintDebug,
-  threaded,
-  cssPath,
-}: {
-  loader: any
-  extractor: Extractor
-  source: string | Buffer
-  sourcePath: string
-  options: TamaguiOptions
-  shouldPrintDebug: boolean
-  cssPath: string
-  threaded?: boolean
-}): null | {
-  js: string | Buffer
-  styles: string
-  stylesPath?: string
-  ast: t.File
-  map: any // RawSourceMap from 'source-map'
-} {
-  if (typeof source !== 'string') {
-    throw new Error('`source` must be a string of javascript')
-  }
-  invariant(
-    typeof sourcePath === 'string' && path.isAbsolute(sourcePath),
-    '`sourcePath` must be an absolute path to a .js file'
-  )
-
-  const shouldLogTiming = shouldPrintDebug || options.logTimings
-  const start = Date.now()
-  const mem = shouldLogTiming ? process.memoryUsage() : null
-
-  // Using a map for (officially supported) guaranteed insertion order
-  let ast: t.File
-
-  try {
-    // @ts-ignore
-    ast = babelParse(source)
-  } catch (err) {
-    console.error('babel parse error:', sourcePath)
-    throw err
-  }
-
-  const cssMap = new Map<string, { css: string; commentTexts: string[] }>()
-  const existingHoists: { [key: string]: t.Identifier } = {}
-
-  const res = extractor.parse(ast, {
-    sourcePath,
-    shouldPrintDebug,
-    ...options,
-    getFlattenedNode: ({ tag }) => tag,
-    onExtractTag: ({
-      attrs,
-      node,
-      attemptEval,
-      jsxPath,
-      originalNodeName,
-      filePath,
-      lineNumbers,
-      programPath,
-    }) => {
-      let finalClassNames: ClassNameObject[] = []
-      let finalAttrs: (t.JSXAttribute | t.JSXSpreadAttribute)[] = []
-      let finalStyles: StyleObject[] = []
-
-      const viewStyles = {}
-      for (const attr of attrs) {
-        if (attr.type === 'style') {
-          Object.assign(viewStyles, attr.value)
-        }
-      }
-
-      const ensureNeededPrevStyle = (style: ViewStyle) => {
-        // ensure all group keys are merged
-        const keys = Object.keys(style)
-        if (!keys.some((key) => mergeStyleGroups[key])) {
-          return style
-        }
-        for (const k in mergeStyleGroups) {
-          if (k in viewStyles) {
-            style[k] = style[k] ?? viewStyles[k]
-          }
-        }
-        return style
-      }
-
-      const addStyles = (style: ViewStyle | null) => {
-        if (!style) return []
-        const styleWithPrev = ensureNeededPrevStyle(style)
-        const res = getStylesAtomic(styleWithPrev)
-        if (res.length) {
-          finalStyles = [...finalStyles, ...res]
-        }
-        return res
-      }
-
-      // 1 to start above any :hover styles
-      let lastMediaImportance = 1
-      for (const attr of attrs) {
-        switch (attr.type) {
-          case 'style':
-            const styles = addStyles(attr.value)
-            const newClassNames = concatClassName(styles.map((x) => x.identifier).join(' '))
-            // prettier-ignore
-            const existing = finalClassNames.find((x) => x.type == 'StringLiteral') as t.StringLiteral | null
-            if (existing) {
-              existing.value = `${existing.value} ${newClassNames}`
-            } else {
-              finalClassNames = [...finalClassNames, t.stringLiteral(newClassNames)]
-            }
-            if (shouldPrintDebug) {
-              // prettier-ignore
-              console.log('  classnames (after)\n', logLines(finalClassNames.map(x => x['value']).join(' ')))
-            }
-            break
-          case 'attr':
-            const val = attr.value
-            if (t.isJSXSpreadAttribute(val)) {
-              if (isSimpleSpread(val)) {
-                finalClassNames.push(
-                  t.logicalExpression(
-                    '&&',
-                    val.argument,
-                    t.memberExpression(val.argument, t.identifier('className'))
-                  )
-                )
-              }
-            } else if (val.name.name === 'className') {
-              const value = val.value
-              if (value) {
-                try {
-                  const evaluatedValue = attemptEval(value)
-                  finalClassNames.push(t.stringLiteral(evaluatedValue))
-                } catch (e) {
-                  finalClassNames.push(value['expression'])
-                }
-              }
-              continue
-            }
-            finalAttrs.push(val)
-            break
-          case 'ternary':
-            const mediaExtraction = extractMediaStyle(
-              attr.value,
-              jsxPath,
-              extractor.getTamagui(),
-              sourcePath,
-              lastMediaImportance,
-              shouldPrintDebug
-            )
-            if (mediaExtraction) {
-              lastMediaImportance++
-              finalStyles = [...finalStyles, ...mediaExtraction.mediaStyles]
-              finalClassNames = [
-                ...finalClassNames,
-                ...mediaExtraction.mediaStyles.map((x) => t.stringLiteral(x.identifier)),
-              ]
-              if (!mediaExtraction.ternaryWithoutMedia) {
-                continue
-              }
-            }
-            const ternary = mediaExtraction?.ternaryWithoutMedia || attr.value
-            const consInfo = addStyles(ternary.consequent)
-            const altInfo = addStyles(ternary.alternate)
-            const cCN = consInfo.map((x) => x.identifier).join(' ')
-            const aCN = altInfo.map((x) => x.identifier).join(' ')
-            if (consInfo.length && altInfo.length) {
-              finalClassNames.push(
-                t.conditionalExpression(ternary.test, t.stringLiteral(cCN), t.stringLiteral(aCN))
-              )
-            } else {
-              finalClassNames.push(
-                t.conditionalExpression(
-                  ternary.test,
-                  t.stringLiteral(' ' + cCN),
-                  t.stringLiteral(' ' + aCN)
-                )
-              )
-            }
-            break
-        }
-      }
-
-      node.attributes = finalAttrs
-
-      if (finalClassNames.length) {
-        // inserts the _cn variable and uses it for className
-        const names = buildClassName(finalClassNames)
-        const nameExpr = names ? hoistClassNames(jsxPath, existingHoists, names) : null
-        let expr = nameExpr
-
-        // if has some spreads, use concat helper
-        if (nameExpr && !t.isIdentifier(nameExpr)) {
-          ensureImportingConcat(programPath)
-          const simpleSpreads = attrs.filter(
-            (x) => t.isJSXSpreadAttribute(x.value) && isSimpleSpread(x.value)
-          )
-          expr = t.callExpression(t.identifier(CONCAT_CLASSNAME_IMPORT), [
-            expr,
-            ...simpleSpreads.map((val) => val.value['argument']),
-          ])
-        }
-
-        node.attributes.push(
-          t.jsxAttribute(t.jsxIdentifier('className'), t.jsxExpressionContainer(expr))
-        )
-      }
-
-      const comment = util.format('/* %s:%s (%s) */', filePath, lineNumbers, originalNodeName)
-
-      for (const { className, rules } of finalStyles) {
-        if (cssMap.has(className)) {
-          if (comment) {
-            const val = cssMap.get(className)!
-            val.commentTexts.push(comment)
-            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],
-            commentTexts: [comment],
-          })
-        }
-      }
-    },
-  })
-
-  if (!res || !res.modified) {
-    return null
-  }
-
-  const styles = Array.from(cssMap.values())
-    .map((x) => x.css)
-    .join('\n')
-    .trim()
-
-  if (styles) {
-    const cssQuery = threaded
-      ? `cssData=${Buffer.from(styles).toString('base64')}`
-      : `cssPath=${cssPath}`
-    const remReq = getRemainingRequest(loader)
-    const importPath = `${cssPath}!=!tamagui-loader?${cssQuery}!${remReq}`
-    ast.program.body.unshift(t.importDeclaration([], t.stringLiteral(importPath)))
-  }
-
-  const result = generate(
-    ast,
-    {
-      concise: false,
-      filename: sourcePath,
-      retainLines: false,
-      sourceFileName: sourcePath,
-      sourceMaps: true,
-    },
-    source
-  )
-
-  if (shouldPrintDebug) {
-    console.log(
-      '\n -------- output code ------- \n\n',
-      result.code
-        .split('\n')
-        .filter((x) => !x.startsWith('//'))
-        .join('\n')
-    )
-    console.log('\n -------- output style -------- \n\n', styles)
-  }
-
-  if (shouldLogTiming && mem) {
-    // console.log(`${parseTime} / ${traverseTime} / ${generateTime}`)
-    const memUsed =
-      Math.round(((process.memoryUsage().heapUsed - mem.heapUsed) / 1024 / 1204) * 10) / 10
-    // prettier-ignore
-    console.log(`  🥚 ${basename(sourcePath).padStart(40)} ${`${Date.now() - start}`.padStart(3)}ms ׁ· ${`${res.optimized}`.padStart(4)} optimized · ${res.flattened} flattened ${memUsed > 10 ? `used ${memUsed}MB` : ''}`)
-  }
-
-  return {
-    ast,
-    styles,
-    js: result.code,
-    map: result.map,
-  }
-}

package/src/extractor/findTopmostFunction.ts

@@ -1,22 +0,0 @@
-import { NodePath } from '@babel/traverse'
-import * as t from '@babel/types'
-
-export function findTopmostFunction(jsxPath: NodePath<t.JSXElement>) {
-  // get topmost fn
-  const isFunction = (path: NodePath<any>) =>
-    path.isArrowFunctionExpression() || path.isFunctionDeclaration() || path.isFunctionExpression()
-  let compFn: NodePath<any> | null = jsxPath.findParent(isFunction)
-  while (compFn) {
-    const parent = compFn.findParent(isFunction)
-    if (parent) {
-      compFn = parent
-    } else {
-      break
-    }
-  }
-  if (!compFn) {
-    // console.error(`Couldn't find a topmost function for media query extraction`)
-    return null
-  }
-  return compFn
-}

package/src/extractor/generatedUid.ts

@@ -1,43 +0,0 @@
-import * as t from '@babel/types'
-import invariant from 'invariant'
-
-// TODO: open a PR upstream
-declare module '@babel/types' {
-  export function toIdentifier(input: string): string
-}
-
-// A clone of path.scope.generateUid that doesn't prepend underscores
-export function generateUid(scope: any, name: string): string {
-  invariant(typeof scope === 'object', 'generateUid expects a scope object as its first parameter')
-  invariant(
-    typeof name === 'string' && name !== '',
-    'generateUid expects a valid name as its second parameter'
-  )
-
-  name = t
-    .toIdentifier(name)
-    .replace(/^_+/, '')
-    .replace(/[0-9]+$/g, '')
-
-  let uid
-  let i = 0
-  do {
-    if (i > 1) {
-      uid = name + i
-    } else {
-      uid = name
-    }
-    i++
-  } while (
-    scope.hasLabel(uid) ||
-    scope.hasBinding(uid) ||
-    scope.hasGlobal(uid) ||
-    scope.hasReference(uid)
-  )
-
-  const program = scope.getProgramParent()
-  program.references[uid] = true
-  program.uids[uid] = true
-
-  return uid
-}

package/src/extractor/getPropValueFromAttributes.ts

@@ -1,92 +0,0 @@
-import generate from '@babel/generator'
-import * as t from '@babel/types'
-
-import { accessSafe } from './accessSafe'
-
-/**
- * getPropValueFromAttributes gets a prop by name from a list of attributes and accounts for potential spread operators.
- * Here's an example. Given this component:
- * ```
- * <Block coolProp="wow" {...spread1} neatProp="ok" {...spread2} />```
- * getPropValueFromAttributes will return the following:
- * - for propName `coolProp`:
- *   ```
- * accessSafe(spread1, 'coolProp') || accessSafe(spread2, 'coolProp') || 'wow'```
- * - for propName `neatProp`:
- *   ```
- * accessSafe(spread2, 'neatProp') || 'ok'```
- * - for propName `notPresent`: `null`
- *
- * The returned value should (obviously) be placed after spread operators.
- */
-export function getPropValueFromAttributes(
-  propName: string,
-  attrs: (t.JSXAttribute | t.JSXSpreadAttribute)[]
-): t.Expression | null {
-  let propIndex: number = -1
-  let jsxAttr: t.JSXAttribute | null = null
-  for (let idx = -1, len = attrs.length; ++idx < len; ) {
-    const attr = attrs[idx]
-    if (t.isJSXAttribute(attr) && attr.name && attr.name.name === propName) {
-      propIndex = idx
-      jsxAttr = attr
-      break
-    }
-  }
-
-  if (!jsxAttr || jsxAttr.value == null) {
-    return null
-  }
-
-  let propValue:
-    | t.JSXElement
-    | t.JSXFragment
-    | t.StringLiteral
-    | t.JSXExpressionContainer
-    | t.JSXEmptyExpression
-    | t.Expression = jsxAttr.value
-
-  if (t.isJSXExpressionContainer(propValue)) {
-    propValue = propValue.expression
-  }
-
-  // TODO how to handle this??
-  if (t.isJSXEmptyExpression(propValue)) {
-    console.error('encountered JSXEmptyExpression')
-    return null
-  }
-
-  // filter out spread props that occur before propValue
-  const applicableSpreads = attrs
-    .filter(
-      // 1. idx is greater than propValue prop index
-      // 2. attr is a spread operator
-      (attr, idx): attr is t.JSXSpreadAttribute => {
-        if (t.isJSXSpreadAttribute(attr)) {
-          if (t.isIdentifier(attr.argument) || t.isMemberExpression(attr.argument)) {
-            return idx > propIndex
-          }
-          if (t.isLogicalExpression(attr.argument)) {
-            return false
-          }
-          throw new Error(
-            `unsupported spread of type "${attr.argument.type}": ${generate(attr).code}`
-          )
-        }
-        return false
-      }
-    )
-    .map((attr) => attr.argument)
-
-  // if spread operators occur after propValue, create a binary expression for each operator
-  // i.e. before1.propValue || before2.propValue || propValue
-  // TODO: figure out how to do this without all the extra parens
-  if (applicableSpreads.length > 0) {
-    propValue = applicableSpreads.reduce<t.Expression>(
-      (acc, val) => t.logicalExpression('||', accessSafe(val, propName), acc),
-      propValue
-    )
-  }
-
-  return propValue
-}

package/src/extractor/getSourceModule.ts

@@ -1,101 +0,0 @@
-import * as t from '@babel/types'
-
-export interface SourceModule {
-  sourceModule?: string
-  imported?: string
-  local?: string
-  destructured?: boolean
-  usesImportSyntax: boolean
-}
-
-export function getSourceModule(
-  itemName: string,
-  itemBinding: {
-    constant?: boolean
-    path: { node: t.Node; parent: any }
-  }
-): SourceModule | null {
-  // TODO: deal with reassignment
-  if (!itemBinding.constant) {
-    return null
-  }
-
-  let sourceModule: string | undefined
-  let imported: string | undefined
-  let local: string | undefined
-  let destructured: boolean | undefined
-  let usesImportSyntax = false
-
-  const itemNode = itemBinding.path.node
-
-  if (
-    // import x from 'y';
-    t.isImportDefaultSpecifier(itemNode) ||
-    // import {x} from 'y';
-    t.isImportSpecifier(itemNode)
-  ) {
-    if (t.isImportDeclaration(itemBinding.path.parent)) {
-      sourceModule = itemBinding.path.parent.source.value
-      local = itemNode.local.name
-      usesImportSyntax = true
-      if (t.isImportSpecifier(itemNode)) {
-        imported = itemNode.imported['name']
-        destructured = true
-      } else {
-        imported = itemNode.local.name
-        destructured = false
-      }
-    }
-  } else if (
-    t.isVariableDeclarator(itemNode) &&
-    itemNode.init != null &&
-    t.isCallExpression(itemNode.init) &&
-    t.isIdentifier(itemNode.init.callee) &&
-    itemNode.init.callee.name === 'require' &&
-    itemNode.init.arguments.length === 1
-  ) {
-    const firstArg = itemNode.init.arguments[0]
-    if (!t.isStringLiteral(firstArg)) {
-      return null
-    }
-    sourceModule = firstArg.value
-
-    if (t.isIdentifier(itemNode.id)) {
-      local = itemNode.id.name
-      imported = itemNode.id.name
-      destructured = false
-    } else if (t.isObjectPattern(itemNode.id)) {
-      for (const objProp of itemNode.id.properties) {
-        if (
-          t.isObjectProperty(objProp) &&
-          t.isIdentifier(objProp.value) &&
-          objProp.value.name === itemName
-        ) {
-          local = objProp.value.name
-          // @ts-ignore TODO remove this is only an issue on CI
-          imported = objProp.key.name
-          destructured = true
-          break
-        }
-      }
-
-      if (!local || !imported) {
-        console.error('could not find prop with value `%s`', itemName)
-        return null
-      }
-    } else {
-      console.error('Unhandled id type: %s', itemNode.id.type)
-      return null
-    }
-  } else {
-    return null
-  }
-
-  return {
-    destructured,
-    imported,
-    local,
-    sourceModule,
-    usesImportSyntax,
-  }
-}