@tamagui/static 1.0.0-alpha.5 → 1.0.0-alpha.53

package/src/extractor/getStaticBindingsForScope.ts

@@ -1,173 +0,0 @@
-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)) {
-      // TODO we can clear this when we see updates on it later on
-      return require(file)
-    }
-  }
-  return null
-}
-
-export function getStaticBindingsForScope(
-  scope: NodePath<t.JSXElement>['scope'],
-  whitelist: string[] = [],
-  sourcePath: string,
-  bindingCache: Record<string, string | null>,
-  shouldPrintDebug: boolean
-): 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

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

@@ -1,32 +0,0 @@
-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]))
-          })
-      )
-  }
-}

package/src/extractor/loadTamagui.ts

@@ -1,61 +0,0 @@
-import { join } from 'path'
-
-import type { StaticComponent, TamaguiInternalConfig } from '@tamagui/core'
-import { createTamagui } from '@tamagui/core-node'
-
-let loadedTamagui: any = null
-
-export function loadTamagui(props: { components: string[]; config: string }): {
-  components: Record<string, StaticComponent>
-  tamaguiConfig: TamaguiInternalConfig
-} {
-  if (loadedTamagui) {
-    return loadedTamagui
-  }
-
-  // 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'
-  const proxyWorm = require('@tamagui/fake-react-native')
-  const Mod = require('module')
-  const og = Mod.prototype.require
-  Mod.prototype.require = function (path: string) {
-    if (
-      path.startsWith('react-native') &&
-      // allow our rnw.tsx imports through
-      !path.startsWith('react-native-web/dist/cjs/exports')
-    ) {
-      return proxyWorm
-    }
-    return og.apply(this, arguments)
-  }
-
-  // import config
-  const configPath = join(process.cwd(), props.config)
-  const tamaguiConfigExport = require(configPath)
-  // TODO validate its the right config
-  const tamaguiConfig = (tamaguiConfigExport['default'] ||
-    tamaguiConfigExport) as TamaguiInternalConfig
-
-  // import components
-  const components = {}
-  for (const module of props.components) {
-    const exported = require(module)
-    // TODO check if overwriting and warn
-    Object.assign(components, exported)
-  }
-
-  // undo shims
-  process.env.IS_STATIC = undefined
-  Mod.prototype.require = og
-
-  // set up core-node
-  createTamagui(tamaguiConfig)
-
-  loadedTamagui = {
-    components,
-    tamaguiConfig,
-  }
-
-  return loadedTamagui
-}

package/src/extractor/normalizeTernaries.ts

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

@@ -1,76 +0,0 @@
-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) {
-  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/index.ts

@@ -1,9 +0,0 @@
-process.env.TAMAGUI_COMPILE_PROCESS = '1'
-
-export { TamaguiOptions } from './types'
-export { createExtractor } from './extractor/createExtractor'
-export { literalToAst } from './extractor/literalToAst'
-export * from './constants'
-export * from './extractor/extractToClassNames'
-export * from './extractor/extractHelpers'
-export * from './patchReactNativeWeb'

package/src/patchReactNativeWeb.ts

@@ -1,107 +0,0 @@
-import * as fs from 'fs'
-import path from 'path'
-
-// were patching react-native-web so we can use some internal methods
-// we do it this way because we need to rely on webpack or bundler config to determine cjs vs esm
-// so we can't just require it all directly
-// would be nice in the future to be able to eject from react-native-web entirely optionally
-
-// keep it sync
-export function patchReactNativeWeb() {
-  const rootDir = require.resolve('react-native-web').replace(/\/dist.*/, '')
-
-  // write our export files
-  fs.writeFileSync(path.join(rootDir, 'dist', 'tamagui-exports.js'), moduleExports)
-  fs.writeFileSync(path.join(rootDir, 'dist', 'cjs', 'tamagui-exports.js'), cjsExports)
-
-  // if entry files not patched, patch them:
-  const moduleEntry = path.join(rootDir, 'dist', 'index.js')
-  const moduleEntrySrc = fs.readFileSync(moduleEntry, 'utf-8')
-  if (!moduleEntrySrc.includes('// tamagui-patch-v4')) {
-    fs.writeFileSync(
-      moduleEntry,
-      `${removePatch(moduleEntrySrc)}
-
-// tamagui-patch-v4
-import * as TExports from './tamagui-exports'
-export const TamaguiExports = TExports
-// tamagui-patch-end
-`
-    )
-  }
-  const cjsEntry = path.join(rootDir, 'dist', 'cjs', 'index.js')
-  const cjsEntrySrc = fs.readFileSync(cjsEntry, 'utf-8')
-  if (!cjsEntrySrc.includes('// tamagui-patch-v4')) {
-    fs.writeFileSync(
-      cjsEntry,
-      `${removePatch(cjsEntrySrc)}
-
-// tamagui-patch-v4
-exports.TamaguiExports = _interopRequireDefault(require("./tamagui-exports"));
-// tamagui-patch-end
-`
-    )
-
-    console.log(`Tamagui patched react-native-web`)
-  }
-}
-
-function removePatch(source: string) {
-  return source.replace(/\/\/ tamagui-patch([.\s\S]*)/g, '')
-}
-
-// view exports/View.ts
-const forwardedPropsObj = `{
-  ...fwdProps.defaultProps,
-  ...fwdProps.accessibilityProps,
-  ...fwdProps.clickProps,
-  ...fwdProps.focusProps,
-  ...fwdProps.keyboardProps,
-  ...fwdProps.mouseProps,
-  ...fwdProps.touchProps,
-  ...fwdProps.styleProps,
-  href: true,
-  lang: true,
-  onScroll: true,
-  onWheel: true,
-  pointerEvents: true
-}
-`
-
-const moduleExports = `
-export { atomic } from './exports/StyleSheet/compile'
-export { default as createCompileableStyle } from './exports/StyleSheet/createCompileableStyle'
-export { default as createReactDOMStyle } from './exports/StyleSheet/createReactDOMStyle'
-export { default as i18Style } from './exports/StyleSheet/i18nStyle'
-export { default as createDOMProps } from './modules/createDOMProps'
-export { default as AccessibilityUtil } from './modules/AccessibilityUtil'
-export { default as createElement } from './exports/createElement'
-export { default as css } from './exports/StyleSheet/css'
-export { default as TextAncestorContext } from './exports/Text/TextAncestorContext'
-export { default as pick } from './modules/pick'
-export { default as useElementLayout } from './modules/useElementLayout'
-export { default as useMergeRefs } from './modules/useMergeRefs'
-export { default as usePlatformMethods } from './modules/usePlatformMethods'
-export { default as useResponderEvents } from './modules/useResponderEvents'
-import * as fwdProps from './modules/forwardedProps'
-export const forwardedProps = ${forwardedPropsObj}
-`
-
-const cjsExports = `
-exports.atomic = require('./exports/StyleSheet/compile').atomic
-exports.createCompileableStyle = require('./exports/StyleSheet/createCompileableStyle')
-exports.createReactDOMStyle = require('./exports/StyleSheet/createReactDOMStyle')
-exports.i18Style = require('./exports/StyleSheet/i18nStyle')
-exports.createDOMProps = require('./modules/createDOMProps')
-exports.AccessibilityUtil = require('./modules/AccessibilityUtil')
-exports.createElement = require('./exports/createElement')
-exports.css = require('./exports/StyleSheet/css')
-exports.TextAncestorContext = require('./exports/Text/TextAncestorContext')
-exports.pick = require('./modules/pick')
-exports.useElementLayout = require('./modules/useElementLayout')
-exports.useMergeRefs = require('./modules/useMergeRefs')
-exports.usePlatformMethods = require('./modules/usePlatformMethods')
-exports.useResponderEvents = require('./modules/useResponderEvents')
-const fwdProps = require('./modules/forwardedProps')
-exports.forwardedProps = ${forwardedPropsObj}
-`

package/src/types.ts

@@ -1,80 +0,0 @@
-import { NodePath } from '@babel/traverse'
-import * as t from '@babel/types'
-
-export type ClassNameObject = t.StringLiteral | t.Expression
-
-export interface CacheObject {
-  [key: string]: any
-}
-
-export interface TamaguiOptions {
-  // module paths you want to compile with tamagui (for example ['tamagui'])
-  components: string[]
-  // your tamagui.config.ts
-  config?: string
-  evaluateVars?: boolean
-  importsWhitelist?: string[]
-  disableExtraction?: boolean
-  exclude?: RegExp
-  logTimings?: boolean
-
-  // probably non user options
-  cssPath?: string
-  cssData?: any
-  deoptProps?: Set<string>
-  excludeProps?: string[]
-}
-
-export type ExtractedAttrAttr = {
-  type: 'attr'
-  value: t.JSXAttribute | t.JSXSpreadAttribute
-}
-
-export type ExtractedAttrStyle = { type: 'style'; value: Object }
-
-export type ExtractedAttr = ExtractedAttrAttr | { type: 'ternary'; value: Ternary } | ExtractedAttrStyle
-
-export type ExtractTagProps = {
-  attrs: ExtractedAttr[]
-  node: t.JSXOpeningElement
-  attemptEval: (exprNode: t.Node, evalFn?: ((node: t.Node) => any) | undefined) => any
-  jsxPath: NodePath<t.JSXElement>
-  programPath: NodePath<t.Program>
-  originalNodeName: string
-  lineNumbers: string
-  filePath: string
-  isFlattened: boolean
-}
-
-export type ExtractorParseProps = TamaguiOptions & {
-  sourcePath?: string
-  shouldPrintDebug?: boolean
-  onExtractTag: (props: ExtractTagProps) => void
-  getFlattenedNode: (props: { isTextView: boolean; tag: string }) => string
-  onDidFlatten?: () => void
-}
-
-export interface Ternary {
-  test: t.Expression
-  // shorthand props that don't use hooks
-  inlineMediaQuery?: string
-  remove: Function
-  consequent: Object | null
-  alternate: Object | null
-}
-
-export type StyleObject = {
-  property: string
-  value: string
-  className: string
-  identifier: string
-  rules: string[]
-}
-
-export type ClassNameToStyleObj = {
-  [key: string]: StyleObject
-}
-
-export interface PluginContext {
-  write: (path: string, rules: { [key: string]: string }) => any
-}