@tamagui/static 1.0.0-beta.8 → 1.0.1-beta.100

package/src/extractor/getStaticBindingsForScope.ts

@@ -0,0 +1,183 @@
+import { dirname, extname, resolve } from 'path'
+
+import { Binding, NodePath } from '@babel/traverse'
+import * as t from '@babel/types'
+import { existsSync } from 'fs-extra'
+
+import { evaluateAstNode } from './evaluateAstNode'
+import { getSourceModule } from './getSourceModule'
+
+const isLocalImport = (path: string) => path.startsWith('.') || path.startsWith('/')
+
+function resolveImportPath(sourcePath: string, path: string) {
+  const sourceDir = dirname(sourcePath)
+  if (isLocalImport(path)) {
+    if (extname(path) === '') {
+      path += '.js'
+    }
+    return resolve(sourceDir, path)
+  }
+  return path
+}
+
+function importModule(path: string) {
+  const filenames = [path.replace('.js', '.tsx'), path.replace('.js', '.ts'), path]
+  for (const file of filenames) {
+    if (existsSync(file)) {
+      const { unregister } = require('esbuild-register/dist/node').register({
+        target: 'es2019',
+        format: 'cjs',
+      })
+      try {
+        // TODO we can clear this when we see updates on it later on
+        return require(file)
+      } catch {
+        // doesn't exists
+      } finally {
+        unregister()
+      }
+    }
+  }
+  return null
+}
+
+export function getStaticBindingsForScope(
+  scope: NodePath<t.JSXElement>['scope'],
+  whitelist: string[] = [],
+  sourcePath: string,
+  bindingCache: Record<string, string | null>,
+  shouldPrintDebug: boolean | 'verbose'
+): Record<string, any> {
+  const bindings: Record<string, Binding> = scope.getAllBindings() as any
+  const ret: Record<string, any> = {}
+
+  if (shouldPrintDebug) {
+    // prettier-ignore
+    console.log('  ', Object.keys(bindings).length, 'variables in scope')
+    // .map(x => bindings[x].identifier?.name).join(', ')
+  }
+
+  // on react native at least it doesnt find some bindings? not sure why
+  // lets add in whitelisted imports if they exist
+  const program = scope.getProgramParent().block as t.Program
+  for (const node of program.body) {
+    if (t.isImportDeclaration(node)) {
+      const importPath = node.source.value
+      if (!node.specifiers.length) continue
+      if (!isLocalImport(importPath)) {
+        continue
+      }
+      const moduleName = resolveImportPath(sourcePath, importPath)
+      const isOnWhitelist = whitelist.some((test) => moduleName.endsWith(test))
+      if (!isOnWhitelist) continue
+      const src = importModule(moduleName)
+      if (!src) continue
+      for (const specifier of node.specifiers) {
+        if (t.isImportSpecifier(specifier) && t.isIdentifier(specifier.imported)) {
+          if (typeof src[specifier.imported.name] !== 'undefined') {
+            const val = src[specifier.local.name]
+            ret[specifier.local.name] = val
+          }
+        }
+      }
+    }
+  }
+
+  if (!bindingCache) {
+    throw new Error('bindingCache is a required param')
+  }
+
+  for (const k in bindings) {
+    const binding = bindings[k]
+
+    // check to see if the item is a module
+    const sourceModule = getSourceModule(k, binding)
+    if (sourceModule) {
+      if (!sourceModule.sourceModule) {
+        continue
+      }
+
+      const moduleName = resolveImportPath(sourcePath, sourceModule.sourceModule)
+      const isOnWhitelist = whitelist.some((test) => moduleName.endsWith(test))
+
+      // TODO we could cache this at the file level.. and check if its been touched since
+
+      if (isOnWhitelist) {
+        const src = importModule(moduleName)
+        if (!src) {
+          console.log(
+            `⚠️ missing file ${moduleName} via ${sourcePath} import ${sourceModule.sourceModule}?`
+          )
+          return {}
+        }
+        if (sourceModule.destructured) {
+          if (sourceModule.imported) {
+            ret[k] = src[sourceModule.imported]
+          }
+        } else {
+          // crude esmodule check
+          // TODO: make sure this actually works
+          // if (src && src.__esModule) {
+          //   ret[k] = src.default
+          // } else {
+          ret[k] = src
+          // }
+        }
+      }
+      continue
+    }
+
+    const { parent, parentPath } = binding.path
+
+    if (!t.isVariableDeclaration(parent) || parent.kind !== 'const') {
+      continue
+    }
+
+    // pick out the right variable declarator
+    const dec = parent.declarations.find((d) => t.isIdentifier(d.id) && d.id.name === k)
+
+    // if init is not set, there's nothing to evaluate
+    // TODO: handle spread syntax
+    if (!dec || !dec.init) {
+      continue
+    }
+
+    // missing start/end will break caching
+    if (typeof dec.id.start !== 'number' || typeof dec.id.end !== 'number') {
+      console.error('dec.id.start/end is not a number')
+      continue
+    }
+
+    if (!t.isIdentifier(dec.id)) {
+      console.error('dec is not an identifier')
+      continue
+    }
+
+    const cacheKey = `${dec.id.name}_${dec.id.start}-${dec.id.end}`
+
+    // retrieve value from cache
+    if (bindingCache.hasOwnProperty(cacheKey)) {
+      ret[k] = bindingCache[cacheKey]
+      continue
+    }
+    // retrieve value from cache
+    if (bindingCache.hasOwnProperty(cacheKey)) {
+      ret[k] = bindingCache[cacheKey]
+      continue
+    }
+
+    // evaluate
+    try {
+      ret[k] = evaluateAstNode(dec.init, undefined, shouldPrintDebug)
+      bindingCache[cacheKey] = ret[k]
+      continue
+    } catch (e) {
+      // skip
+      // if (shouldPrintDebug) {
+      //   console.error('[🐇] cant eval, skipping', cacheKey) //, e.message)
+      // }
+    }
+  }
+
+  return ret
+}

package/src/extractor/hoistClassNames.ts

@@ -0,0 +1,45 @@
+import { NodePath } from '@babel/traverse'
+import * as t from '@babel/types'
+
+export function hoistClassNames(
+  path: NodePath<t.JSXElement>,
+  existing: { [key: string]: t.Identifier },
+  expr: t.Expression
+) {
+  const hoist = hoistClassNames.bind(null, path, existing)
+  if (t.isStringLiteral(expr)) {
+    if (expr.value.trim() === '') {
+      return expr
+    }
+    if (existing[expr.value]) {
+      return existing[expr.value]
+    }
+    const identifier = replaceStringWithVariable(expr)
+    existing[expr.value] = identifier
+    return identifier
+  }
+  if (t.isBinaryExpression(expr)) {
+    return t.binaryExpression(expr.operator, hoist(expr.left), hoist(expr.right))
+  }
+  if (t.isLogicalExpression(expr)) {
+    return t.logicalExpression(expr.operator, hoist(expr.left), hoist(expr.right))
+  }
+  if (t.isConditionalExpression(expr)) {
+    return t.conditionalExpression(expr.test, hoist(expr.consequent), hoist(expr.alternate))
+  }
+  return expr
+
+  function replaceStringWithVariable(str: t.StringLiteral): t.Identifier {
+    // hoist outside fn!
+    const uid = path.scope.generateUidIdentifier('cn')
+    const parent = path.findParent((path) => path.isProgram())
+    if (!parent) throw new Error(`no program?`)
+    const variable = t.variableDeclaration('const', [
+      // adding a space for extra safety
+      t.variableDeclarator(uid, t.stringLiteral(` ${str.value}`)),
+    ])
+    // @ts-ignore
+    parent.unshiftContainer('body', variable)
+    return uid
+  }
+}

package/src/extractor/literalToAst.ts

@@ -0,0 +1,84 @@
+import * as t from '@babel/types'
+
+export function literalToAst(literal: any): t.Expression {
+  if (literal === null) {
+    return t.nullLiteral()
+  }
+  switch (typeof literal) {
+    case 'function':
+      throw new Error('Unsupported')
+    case 'number':
+      return t.numericLiteral(literal)
+    case 'string':
+      return t.stringLiteral(literal)
+    case 'boolean':
+      return t.booleanLiteral(literal)
+    case 'undefined':
+      return t.unaryExpression('void', t.numericLiteral(0), true)
+    default:
+      if (Array.isArray(literal)) {
+        return t.arrayExpression(literal.map(literalToAst))
+      }
+      return t.objectExpression(
+        Object.keys(literal)
+          .filter((k) => {
+            return typeof literal[k] !== 'undefined'
+          })
+          .map((k) => {
+            return t.objectProperty(t.stringLiteral(k), literalToAst(literal[k]))
+          })
+      )
+  }
+}
+
+const easyPeasies = ['BooleanLiteral', 'StringLiteral', 'NumericLiteral']
+
+export function astToLiteral(node: any) {
+  if (!node) {
+    return
+  }
+  if (easyPeasies.includes(node.type)) {
+    return node.value
+  }
+  if (node.name === 'undefined' && !node.value) {
+    return undefined
+  }
+  if (t.isNullLiteral(node)) {
+    return null
+  }
+  if (t.isObjectExpression(node)) {
+    return computeProps(node.properties)
+  }
+  if (t.isArrayExpression(node)) {
+    return node.elements.reduce(
+      // @ts-ignore
+      (acc, element) => [
+        ...acc,
+        ...(element?.type === 'SpreadElement'
+          ? astToLiteral(element.argument)
+          : [astToLiteral(element)]),
+      ],
+      []
+    )
+  }
+}
+
+function computeProps(props) {
+  return props.reduce((acc, prop) => {
+    if (prop.type === 'SpreadElement') {
+      return {
+        ...acc,
+        ...astToLiteral(prop.argument),
+      }
+    } else if (prop.type !== 'ObjectMethod') {
+      const val = astToLiteral(prop.value)
+      if (val !== undefined) {
+        return {
+          ...acc,
+          [prop.key.name]: val,
+        }
+      }
+    }
+    return acc
+  }, {})
+}

package/src/extractor/loadTamagui.ts

@@ -0,0 +1,145 @@
+import { join } from 'path'
+
+import type { StaticConfig, TamaguiComponent, TamaguiInternalConfig } from '@tamagui/core'
+import { createTamagui } from '@tamagui/core-node'
+
+let loadedTamagui: any = null
+
+type NameToPaths = {
+  [key: string]: Set<string>
+}
+
+export type TamaguiProjectInfo = {
+  components: Record<string, TamaguiComponent>
+  tamaguiConfig: TamaguiInternalConfig
+  nameToPaths: NameToPaths
+}
+
+export function loadTamagui(props: { components: string[]; config: string }): TamaguiProjectInfo {
+  if (loadedTamagui) {
+    return loadedTamagui
+  }
+
+  const configPath = join(process.cwd(), props.config)
+
+  const { unregister } = require('esbuild-register/dist/node').register({
+    target: 'es2019',
+    format: 'cjs',
+  })
+
+  try {
+    // lets shim require and avoid importing react-native + react-native-web
+    // we just need to read the config around them
+    process.env.IS_STATIC = 'is_static'
+    // @ts-ignore
+    if (typeof globalThis['__DEV__'] === 'undefined') {
+      // @ts-ignore
+      globalThis['__DEV__'] = process.env.NODE_ENV === 'development'
+    }
+
+    const proxyWorm = require('@tamagui/proxy-worm')
+    const rnw = require('react-native-web')
+    const Mod = require('module')
+    const og = Mod.prototype.require
+    const nameToPaths: NameToPaths = {}
+
+    Mod.prototype.require = function (path: string) {
+      if (path.endsWith('.css')) {
+        return {}
+      }
+      if (
+        path === '@gorhom/bottom-sheet' ||
+        path.startsWith('react-native-reanimated') ||
+        path === 'expo-linear-gradient'
+      ) {
+        return proxyWorm
+      }
+      if (
+        path.startsWith('react-native') &&
+        // allow our rnw.tsx imports through
+        !path.startsWith('react-native-web/dist/cjs/exports')
+      ) {
+        return rnw
+      }
+      try {
+        const out = og.apply(this, arguments)
+        if (!nameToPaths[path]) {
+          if (out && typeof out === 'object') {
+            for (const key in out) {
+              try {
+                const conf = out[key]?.staticConfig as StaticConfig
+                if (conf) {
+                  if (conf.componentName) {
+                    nameToPaths[conf.componentName] ??= new Set()
+                    const fullName = path.startsWith('.')
+                      ? join(`${this.path.replace(/dist(\/cjs)?/, 'src')}`, path)
+                      : path
+                    nameToPaths[conf.componentName].add(fullName)
+                  } else {
+                    // console.log('no name component', path)
+                  }
+                }
+              } catch {
+                // ok
+              }
+            }
+          }
+        }
+        return out
+      } catch (err: any) {
+        console.error('Tamagui error loading file:\n', path, err.message, '\n', err.stack)
+        // avoid infinite loops
+        process.exit(1)
+      }
+    }
+
+    // import config
+    const exp = require(configPath)
+    const tamaguiConfig = (exp['default'] || exp) as TamaguiInternalConfig
+
+    if (!tamaguiConfig || !tamaguiConfig.parsed) {
+      try {
+        const confPath = require.resolve(configPath)
+        console.log(`Received:`, tamaguiConfig)
+        throw new Error(`Can't find valid config in ${confPath}`)
+      } catch (err) {
+        throw err
+      }
+    }
+
+    // import components
+    const components = {}
+    for (const moduleName of props.components) {
+      const exported = require(moduleName)
+      for (const Name in exported) {
+        const val = exported[Name]
+        const staticConfig = val?.staticConfig as StaticConfig | undefined
+        if (staticConfig) {
+          // remove non-stringifyable
+          const { Component, reactNativeWebComponent, ...sc } = staticConfig
+          Object.assign(components, { [Name]: { staticConfig: sc } })
+        }
+      }
+    }
+
+    // undo shims
+    process.env.IS_STATIC = undefined
+    Mod.prototype.require = og
+
+    // set up core-node
+    createTamagui(tamaguiConfig as any)
+
+    loadedTamagui = {
+      components,
+      tamaguiConfig,
+      nameToPaths,
+    }
+
+    return loadedTamagui
+  } catch (err) {
+    console.log('Error loading Tamagui', err)
+    throw err
+  } finally {
+    unregister()
+  }
+}

package/src/extractor/logLines.ts

@@ -0,0 +1,16 @@
+const prefix = '           '
+
+export const logLines = (str: string, singleLine = false) => {
+  if (singleLine) {
+    return prefix + str.split(' ').join(`\n${prefix}`)
+  }
+  let lines: string[] = ['']
+  const items = str.split(' ')
+  for (const item of items) {
+    if (item.length + lines[lines.length - 1].length > 85) {
+      lines.push('')
+    }
+    lines[lines.length - 1] += item + ' '
+  }
+  return lines.map((line, i) => prefix + (i == 0 ? '' : ' ') + line.trim()).join('\n')
+}

package/src/extractor/normalizeTernaries.ts

@@ -0,0 +1,63 @@
+import generate from '@babel/generator'
+import * as t from '@babel/types'
+import invariant from 'invariant'
+
+import { Ternary } from '../types'
+
+export function normalizeTernaries(ternaries: Ternary[]) {
+  invariant(
+    Array.isArray(ternaries),
+    'extractStaticTernaries expects param 1 to be an array of ternaries'
+  )
+
+  if (ternaries.length === 0) {
+    return []
+  }
+
+  const ternariesByKey: { [key: string]: Ternary } = {}
+
+  for (let idx = -1, len = ternaries.length; ++idx < len; ) {
+    const { test, consequent, alternate, remove, ...rest } = ternaries[idx]
+
+    let ternaryTest = test
+
+    // strip parens
+    if (t.isExpressionStatement(test)) {
+      ternaryTest = (test as any).expression
+    }
+
+    // convert `!thing` to `thing` with swapped consequent and alternate
+    let shouldSwap = false
+    if (t.isUnaryExpression(test) && test.operator === '!') {
+      ternaryTest = test.argument
+      shouldSwap = true
+    } else if (t.isBinaryExpression(test)) {
+      if (test.operator === '!==' || test.operator === '!=') {
+        ternaryTest = t.binaryExpression(test.operator, test.left, test.right)
+        shouldSwap = true
+      }
+    }
+
+    const key = generate(ternaryTest).code
+
+    if (!ternariesByKey[key]) {
+      ternariesByKey[key] = {
+        ...rest,
+        alternate: {},
+        consequent: {},
+        test: ternaryTest,
+        remove,
+      }
+    }
+    const altStyle = (shouldSwap ? consequent : alternate) ?? {}
+    const consStyle = (shouldSwap ? alternate : consequent) ?? {}
+    Object.assign(ternariesByKey[key].alternate!, altStyle)
+    Object.assign(ternariesByKey[key].consequent!, consStyle)
+  }
+
+  const ternaryExpression = Object.keys(ternariesByKey).map((key) => {
+    return ternariesByKey[key]
+  })
+
+  return ternaryExpression
+}

package/src/extractor/removeUnusedHooks.ts

@@ -0,0 +1,76 @@
+import { NodePath } from '@babel/traverse'
+import * as t from '@babel/types'
+
+const hooks = {
+  useMedia: true,
+  useTheme: true,
+}
+
+export function removeUnusedHooks(compFn: NodePath<any>, shouldPrintDebug: boolean | 'verbose') {
+  compFn.scope.crawl()
+  // check the top level statements
+  let bodyStatements = compFn?.get('body')
+  if (!bodyStatements) {
+    console.log('no body statemnts?', compFn)
+    return
+  }
+  if (!Array.isArray(bodyStatements)) {
+    if (bodyStatements.isFunctionExpression()) {
+      bodyStatements = bodyStatements.scope.path.get('body')
+    } else {
+      bodyStatements = bodyStatements.get('body')
+    }
+  }
+  if (!bodyStatements || !Array.isArray(bodyStatements)) {
+    return
+  }
+  const statements = bodyStatements as NodePath<any>[]
+  for (const statement of statements) {
+    if (!statement.isVariableDeclaration()) {
+      continue
+    }
+    const declarations = statement.get('declarations')
+    if (!Array.isArray(declarations)) {
+      continue
+    }
+    const isBindingReferenced = (name: string) => {
+      return !!statement.scope.getBinding(name)?.referenced
+    }
+    for (const declarator of declarations) {
+      const id = declarator.get('id')
+      const init = declarator.node.init
+      if (Array.isArray(id) || Array.isArray(init)) {
+        continue
+      }
+      const shouldRemove = (() => {
+        const isHook =
+          t.isCallExpression(init) && t.isIdentifier(init.callee) && hooks[init.callee.name]
+        if (!isHook) {
+          return false
+        }
+        if (t.isIdentifier(id.node)) {
+          // remove "const media = useMedia()"
+          const name = id.node.name
+          return !isBindingReferenced(name)
+        } else if (t.isObjectPattern(id.node)) {
+          // remove "const { sm } = useMedia()"
+          const propPaths = id.get('properties') as NodePath<any>[]
+          return propPaths.every((prop) => {
+            if (!prop.isObjectProperty()) return false
+            const value = prop.get('value')
+            if (Array.isArray(value) || !value.isIdentifier()) return false
+            const name = value.node.name
+            return !isBindingReferenced(name)
+          })
+        }
+        return false
+      })()
+      if (shouldRemove) {
+        declarator.remove()
+        if (shouldPrintDebug) {
+          console.log(`  [🪝] removed ${id.node['name'] ?? ''}`)
+        }
+      }
+    }
+  }
+}

package/src/extractor/timer.ts

@@ -0,0 +1,18 @@
+export const timer = () => {
+  const start = Date.now()
+  let last = start
+  return {
+    mark: (name: string, print = false) => {
+      if (print) {
+        const took = Date.now() - last
+        last = Date.now()
+        console.log(`Time ${name}: ${took}ms`)
+      }
+    },
+    done: (print = false) => {
+      if (print) {
+        console.log(`Total time: ${Date.now() - start}ms`)
+      }
+    },
+  }
+}