@tamagui/static 1.0.1-beta.59 → 1.0.1-beta.62

package/src/extractor/extractToClassNames.ts

@@ -0,0 +1,426 @@
+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 { ViewStyle } from 'react-native'
+import { LoaderContext } from 'webpack'
+
+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 { literalToAst } from './literalToAst'
+import { logLines } from './logLines'
+import { timer } from './timer'
+
+const mergeStyleGroups = {
+  shadowOpacity: true,
+  shadowRadius: true,
+  shadowColor: true,
+  shadowOffset: true,
+}
+
+export type ExtractedResponse = {
+  js: string | Buffer
+  styles: string
+  stylesPath?: string
+  ast: t.File
+  map: any // RawSourceMap from 'source-map'
+}
+
+export function extractToClassNames({
+  loader,
+  extractor,
+  source,
+  sourcePath,
+  options,
+  shouldPrintDebug,
+  cssLoaderPath,
+  threaded,
+  cssPath,
+}: {
+  loader: LoaderContext<any>
+  cssLoaderPath: string
+  extractor: Extractor
+  source: string | Buffer
+  sourcePath: string
+  options: TamaguiOptions
+  shouldPrintDebug: boolean | 'verbose'
+  cssPath: string
+  threaded?: boolean
+}): ExtractedResponse | null {
+  const tm = timer()
+
+  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 = options.logTimings ?? true
+  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
+  }
+
+  tm.mark(`babel-parse`, shouldPrintDebug === 'verbose')
+
+  const cssMap = new Map<string, { css: string; commentTexts: string[] }>()
+  const existingHoists: { [key: string]: t.Identifier } = {}
+
+  let hasFlattened = false
+
+  const res = extractor.parse(ast, {
+    sourcePath,
+    shouldPrintDebug,
+    ...options,
+    target: 'html',
+    getFlattenedNode: ({ tag }) => {
+      hasFlattened = true
+      return tag
+    },
+    onExtractTag: ({
+      attrs,
+      node,
+      attemptEval,
+      jsxPath,
+      originalNodeName,
+      filePath,
+      lineNumbers,
+      programPath,
+      isFlattened,
+    }) => {
+      let finalClassNames: ClassNameObject[] = []
+      let finalAttrs: (t.JSXAttribute | t.JSXSpreadAttribute)[] = []
+      let finalStyles: StyleObject[] = []
+
+      let viewStyles = {}
+      for (const attr of attrs) {
+        if (attr.type === 'style') {
+          viewStyles = {
+            ...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): StyleObject[] => {
+        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':
+            if (!isFlattened) {
+              // only ever one at a time i believe so we can be lazy with this access
+              const { hoverStyle, pressStyle, focusStyle } = attr.value
+              const pseudos = [
+                ['hoverStyle', hoverStyle],
+                ['pressStyle', pressStyle],
+                ['focusStyle', focusStyle],
+              ] as const
+
+              const styles = getStylesAtomic(attr.value, {
+                splitTransforms: true,
+              })
+              finalStyles = [...finalStyles, ...styles]
+
+              for (const [key, value] of pseudos) {
+                if (value && Object.keys(value).length) {
+                  finalAttrs.push(
+                    t.jsxAttribute(
+                      t.jsxIdentifier(key),
+                      t.jsxExpressionContainer(literalToAst(value))
+                    )
+                  )
+                }
+              }
+
+              for (const style of styles) {
+                if (style.pseudo) {
+                  continue
+                }
+                //  leave them  as attributes
+                finalAttrs.push(
+                  t.jsxAttribute(t.jsxIdentifier(style.property), t.stringLiteral(style.identifier))
+                )
+              }
+            } else {
+              const styles = addStyles(attr.value)
+              const newClassNames = concatClassName(styles.map((x) => x.identifier).join(' '))
+              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)]
+              }
+            }
+
+            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 (shouldPrintDebug) {
+              if (mediaExtraction) {
+                // prettier-ignore
+                console.log('ternary (mediaStyles)', mediaExtraction.ternaryWithoutMedia?.inlineMediaQuery ?? '', mediaExtraction.mediaStyles.map((x) => x.identifier).join('.'))
+              }
+            }
+            if (!mediaExtraction) {
+              addTernaryStyle(
+                attr.value,
+                addStyles(attr.value.consequent),
+                addStyles(attr.value.alternate)
+              )
+              continue
+            }
+            lastMediaImportance++
+            if (mediaExtraction.mediaStyles) {
+              finalStyles = [...finalStyles, ...mediaExtraction.mediaStyles]
+            }
+            if (mediaExtraction.ternaryWithoutMedia) {
+              addTernaryStyle(mediaExtraction.ternaryWithoutMedia, mediaExtraction.mediaStyles, [])
+            } else {
+              finalClassNames = [
+                ...finalClassNames,
+                ...mediaExtraction.mediaStyles.map((x) => t.stringLiteral(x.identifier)),
+              ]
+            }
+            break
+        }
+      }
+
+      function addTernaryStyle(ternary: Ternary, a: any, b: any) {
+        const cCN = a.map((x) => x.identifier).join(' ')
+        const aCN = b.map((x) => x.identifier).join(' ')
+        if (a.length && b.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)
+            )
+          )
+        }
+      }
+
+      if (shouldPrintDebug) {
+        // prettier-ignore
+        console.log('  finalClassNames\n', logLines(finalClassNames.map(x => x['value']).join(' ')))
+      }
+
+      node.attributes = finalAttrs
+
+      if (finalClassNames.length) {
+        // inserts the _cn variable and uses it for className
+        let names = buildClassName(finalClassNames)
+        if (t.isStringLiteral(names)) {
+          names.value = concatClassName(names.value)
+        }
+        const nameExpr = names ? hoistClassNames(jsxPath, existingHoists, names) : null
+        let expr = nameExpr
+
+        // if has some spreads, use concat helper
+        if (nameExpr && !t.isIdentifier(nameExpr)) {
+          if (!hasFlattened) {
+            // not flat
+          } else {
+            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 && !res.optimized && !res.flattened)) {
+    if (shouldPrintDebug) {
+      console.log('no res or none modified', res)
+    }
+    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 = loader.remainingRequest
+    const importPath = `${cssPath}!=!${cssLoaderPath}?${cssQuery}!${remReq}`
+    ast.program.body.unshift(t.importDeclaration([], t.stringLiteral(importPath)))
+  }
+
+  const result = generate(
+    ast,
+    {
+      concise: false,
+      filename: sourcePath,
+      // this makes the debug output terrible, and i think sourcemap works already
+      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) {
+    const memUsed = mem
+      ? Math.round(((process.memoryUsage().heapUsed - mem.heapUsed) / 1024 / 1204) * 10) / 10
+      : 0
+    const path = basename(sourcePath)
+      .replace(/\.[jt]sx?$/, '')
+      .slice(0, 22)
+      .trim()
+      .padStart(24)
+    const numOptimized = `${res.optimized}`.padStart(3)
+    const numFound = `${res.found}`.padStart(3)
+    const numFlattened = `${res.flattened}`.padStart(3)
+    const memory = process.env.DEBUG && memUsed > 10 ? ` ${memUsed}MB` : ''
+    const timing = Date.now() - start
+    const timingWarning = timing > 50 ? '⚠️' : timing > 150 ? '☢️' : ''
+    const timingStr = `${timing}ms${timingWarning}`.padStart(6)
+    console.log(
+      `${getPrefixLogs(
+        options
+      )} ${path}  ${numFound}   · ${numOptimized}   · ${numFlattened}  ${timingStr} ${
+        memory ? `(${memory})` : ''
+      }`
+    )
+  }
+
+  return {
+    ast,
+    styles,
+    js: result.code,
+    map: result.map,
+  }
+}

package/src/extractor/findTopmostFunction.ts

@@ -0,0 +1,22 @@
+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

@@ -0,0 +1,43 @@
+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/getPrefixLogs.ts

@@ -0,0 +1,6 @@
+import { TamaguiOptions } from '../types'
+
+export function getPrefixLogs(options?: TamaguiOptions) {
+  const { TAMAGUI_TARGET } = process.env
+  return options?.prefixLogs ?? ` ${TAMAGUI_TARGET}  | `
+}

package/src/extractor/getPropValueFromAttributes.ts

@@ -0,0 +1,92 @@
+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

@@ -0,0 +1,101 @@
+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,
+  }
+}