@tamagui/static 1.0.1-beta.18 → 1.0.1-beta.181

package/src/extractor/loadTamagui.ts

@@ -0,0 +1,377 @@
+/* eslint-disable no-console */
+import { basename, dirname, join, relative, sep } from 'path'
+
+import { Color, colorLog } from '@tamagui/cli-color'
+import { getDefaultTamaguiConfig } from '@tamagui/config-default-node'
+import type { StaticConfig, TamaguiComponent, TamaguiInternalConfig } from '@tamagui/core-node'
+import { createTamagui } from '@tamagui/core-node'
+import esbuild from 'esbuild'
+import { ensureDir, pathExists, stat, writeFile } from 'fs-extra'
+
+import { SHOULD_DEBUG } from '../constants.js'
+import { getNameToPaths, registerRequire, unregisterRequire } from '../require.js'
+
+type NameToPaths = {
+  [key: string]: Set<string>
+}
+
+export type TamaguiProjectInfo = {
+  components: Record<string, TamaguiComponent>
+  tamaguiConfig: TamaguiInternalConfig
+  nameToPaths: NameToPaths
+}
+
+type Props = {
+  components: string[]
+  config?: string
+  forceExports?: boolean
+  bubbleErrors?: boolean
+}
+
+const cache = {}
+
+// TODO needs a plugin for webpack / vite to run this once at startup and not again until changed...
+
+export async function loadTamagui(props: Props): Promise<TamaguiProjectInfo> {
+  const key = JSON.stringify(props)
+  if (cache[key]) {
+    if (cache[key] instanceof Promise) {
+      return await cache[key]
+    }
+    return cache[key]
+  }
+
+  let resolver: Function = () => {}
+  cache[key] = new Promise((res) => {
+    resolver = res
+  })
+
+  const tmpDir = join(process.cwd(), 'dist', 'tamagui-node')
+  const configOutPath = join(tmpDir, `tamagui.config.js`)
+  const includesCore = props.components.includes('@tamagui/core')
+  const baseComponents = props.components.filter((x) => x !== '@tamagui/core')
+  const componentOutPaths = baseComponents.map((componentModule) =>
+    join(
+      tmpDir,
+      `${componentModule
+        .split(sep)
+        .join('-')
+        .replace(/[^a-z0-9]+/gi, '')}-components.config.js`
+    )
+  )
+
+  const external = ['@tamagui/core', '@tamagui/core-node', 'react', 'react-dom']
+  const configEntry = props.config ? join(process.cwd(), props.config) : ''
+
+  if (process.env.DEBUG?.startsWith('tamagui')) {
+    console.log(`Building config entry`, configEntry)
+  }
+
+  // build them to node-compat versions
+  try {
+    await ensureDir(tmpDir)
+  } catch {
+    //
+  }
+
+  colorLog(
+    Color.FgYellow,
+    `
+Tamagui built config and components:`
+  )
+  colorLog(
+    Color.Dim,
+    `
+  - Config: .${sep}${relative(process.cwd(), configOutPath)}
+  - Components: .${sep}${relative(process.cwd(), componentOutPaths.join(', '))}
+`
+  )
+
+  await Promise.all([
+    props.config
+      ? buildTamaguiConfig(props, {
+          entryPoints: [configEntry],
+          external,
+          outfile: configOutPath,
+        })
+      : null,
+    ...baseComponents.map((componentModule, i) => {
+      return buildTamaguiConfig(props, {
+        entryPoints: [componentModule],
+        external,
+        outfile: componentOutPaths[i],
+      })
+    }),
+  ])
+
+  if (process.env.DEBUG?.startsWith('tamagui')) {
+    console.log(`Built configs`)
+  }
+
+  const coreNode = require('@tamagui/core-node')
+
+  registerRequire(props.bubbleErrors)
+  const config = require(configOutPath).default
+  unregisterRequire()
+
+  const components = {
+    ...loadComponents({
+      ...props,
+      components: componentOutPaths,
+    }),
+    ...(includesCore && gatherTamaguiComponentInfo([coreNode])),
+  }
+
+  cache[key] = {
+    components,
+    nameToPaths: {},
+    tamaguiConfig: config,
+  }
+
+  // init core-node
+  createTamagui(cache[key].tamaguiConfig)
+
+  resolver(cache[key])
+
+  return cache[key]
+}
+
+async function buildTamaguiConfig(
+  props: Props,
+  options: Partial<esbuild.BuildOptions> & { outfile: string },
+  aliases?: Record<string, string>
+) {
+  const alias = require('@tamagui/core-node').aliasPlugin
+  // until i do fancier things w plugins:
+  const lockFile = join(dirname(options.outfile), basename(options.outfile, '.lock'))
+  const lockStat = await stat(lockFile).catch(() => {
+    // ok
+  })
+  const lockedMsAgo = !lockStat
+    ? Infinity
+    : new Date().getTime() - new Date(lockStat.mtime).getTime()
+  if (lockedMsAgo < 500) {
+    if (process.env.DEBUG?.startsWith('tamagui')) {
+      console.log(`Waiting for existing build`, options.entryPoints)
+    }
+    let tries = 5
+    while (tries--) {
+      if (await pathExists(options.outfile)) {
+        return
+      } else {
+        await new Promise((res) => setTimeout(res, 50))
+      }
+    }
+  }
+
+  void writeFile(lockFile, '')
+
+  if (process.env.DEBUG?.startsWith('tamagui')) {
+    console.log(`Building`, options.entryPoints)
+  }
+
+  const tsconfig = join(__dirname, '..', '..', 'tamagui.tsconfig.json')
+
+  return esbuild.build({
+    bundle: true,
+    ...options,
+    format: 'cjs',
+    target: 'node18',
+    jsx: 'transform',
+    jsxFactory: 'react',
+    allowOverwrite: true,
+    keepNames: true,
+    platform: 'node',
+    tsconfig,
+    loader: {
+      '.js': 'jsx',
+    },
+    logLevel: 'warning',
+    plugins: [
+      {
+        name: 'external',
+        setup(build) {
+          build.onResolve({ filter: /@tamagui\/core/ }, (args) => {
+            return {
+              path: '@tamagui/core-node',
+              external: true,
+            }
+          })
+
+          build.onResolve({ filter: /^(react-native|react-native\/.*)$/ }, (args) => {
+            return {
+              path: 'react-native-web-lite',
+              external: true,
+            }
+          })
+        },
+      },
+      alias({
+        'react-native-svg': require.resolve('@tamagui/react-native-svg'),
+        'react-native-safe-area-context': require.resolve('@tamagui/fake-react-native'),
+        'react-native-gesture-handler': require.resolve('@tamagui/proxy-worm'),
+        'react-native-reanimated': require.resolve('@tamagui/proxy-worm'),
+        ...aliases,
+      }),
+    ],
+  })
+}
+
+const esbuildOptions: esbuild.BuildOptions = {
+  target: 'es2019',
+  format: 'cjs',
+  jsx: 'transform',
+}
+
+// loads in-process using esbuild-register
+export function loadTamaguiSync(props: Props): TamaguiProjectInfo {
+  const key = JSON.stringify(props)
+  if (cache[key]) {
+    return cache[key]
+  }
+
+  const { unregister } = require('esbuild-register/dist/node').register(esbuildOptions)
+
+  try {
+    registerRequire(props.bubbleErrors)
+
+    // 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'
+    }
+
+    try {
+      // import config
+      let tamaguiConfig: TamaguiInternalConfig | null = null
+
+      if (props.config) {
+        const configPath = join(process.cwd(), props.config)
+        const exp = require(configPath)
+        tamaguiConfig = (exp['default'] || exp) as TamaguiInternalConfig
+        if (!tamaguiConfig || !tamaguiConfig.parsed) {
+          const confPath = require.resolve(configPath)
+          throw new Error(`Can't find valid config in ${confPath}`)
+        }
+      }
+
+      const components = loadComponents(props)
+
+      if (process.env.DEBUG === 'tamagui') {
+        console.log(`components`, components)
+      }
+
+      // undo shims
+      process.env.IS_STATIC = undefined
+
+      // set up core-node
+      if (tamaguiConfig) {
+        createTamagui(tamaguiConfig)
+      }
+
+      cache[key] = {
+        components,
+        tamaguiConfig,
+        nameToPaths: getNameToPaths(),
+      }
+    } catch (err) {
+      if (props.bubbleErrors) {
+        throw err
+      }
+
+      if (err instanceof Error) {
+        console.warn(
+          `Error loading tamagui.config.ts (set DEBUG=tamagui to see full stack), running tamagui without custom config`
+        )
+        console.log(`\n\n    ${err.message}\n\n`)
+        if (SHOULD_DEBUG) {
+          console.log(err.stack)
+        }
+      } else {
+        console.error(`Error loading tamagui.config.ts`, err)
+      }
+      return {
+        components: {},
+        tamaguiConfig: getDefaultTamaguiConfig(),
+        nameToPaths: {},
+      }
+    }
+
+    return cache[key]
+  } catch (err) {
+    if (!props.bubbleErrors) {
+      console.log('Error loading Tamagui', err)
+    }
+    throw err
+  } finally {
+    unregister()
+    unregisterRequire()
+  }
+}
+
+function interopDefaultExport(mod: any) {
+  return mod?.default ?? mod
+}
+
+const cacheComponents = {}
+
+function loadComponents(props: Props) {
+  const componentsModules = props.components
+  const key = componentsModules.join('')
+  if (cacheComponents[key]) {
+    return cacheComponents[key]
+  }
+  try {
+    const requiredModules = componentsModules.map((name) => {
+      return interopDefaultExport(require(name))
+    })
+    const res = gatherTamaguiComponentInfo(requiredModules)
+    cacheComponents[key] = res
+    return res
+  } catch (err: any) {
+    if (props.bubbleErrors) {
+      throw err
+    }
+    console.log(`Tamagui error bundling components`, err.message, err.stack)
+  }
+}
+
+function gatherTamaguiComponentInfo(packages: any[]) {
+  const components = {}
+  for (const exported of packages) {
+    try {
+      for (const componentName in exported) {
+        const found = getTamaguiComponent(componentName, exported[componentName])
+        if (found) {
+          // remove non-stringifyable
+          const { Component, reactNativeWebComponent, ...sc } = found.staticConfig
+          Object.assign(components, { [componentName]: { staticConfig: sc } })
+        }
+      }
+    } catch (err) {
+      console.error(`Tamagui failed getting components`)
+      if (err instanceof Error) {
+        console.error(err.message, err.stack)
+      } else {
+        console.error(err)
+      }
+    }
+  }
+  return components
+}
+
+function getTamaguiComponent(
+  name: string,
+  Component: any
+): undefined | { staticConfig: StaticConfig } {
+  if (name[0].toUpperCase() !== name[0]) {
+    return
+  }
+  const staticConfig = Component?.staticConfig as StaticConfig | undefined
+  if (staticConfig) {
+    return Component
+  }
+}

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.js'
+
+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,29 @@
+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()
+        // eslint-disable-next-line no-console
+        console.log(`Time ${name}: ${took}ms`)
+        if (took > 10) {
+          // eslint-disable-next-line no-console
+          console.log('  long timer')
+        }
+      }
+    },
+    done: (print = false) => {
+      if (print) {
+        const total = Date.now() - start
+        // eslint-disable-next-line no-console
+        console.log(`Total time: ${total}ms`)
+        if (total > 50) {
+          // eslint-disable-next-line no-console
+          console.log('  long timer')
+        }
+      }
+    },
+  }
+}

package/src/extractor/validHTMLAttributes.ts

@@ -0,0 +1,99 @@
+export const validHTMLAttributes = {
+  autocomplete: true,
+  border: true,
+  contenteditable: true,
+  crossorigin: true,
+  dir: true,
+  draggable: true,
+  enctype: true,
+  formenctype: true,
+  formmethod: true,
+  formtarget: true,
+  inputmode: true,
+  kind: true,
+  link: true,
+  method: true,
+  preload: true,
+  referrerpolicy: true,
+  rel: true,
+  rev: true,
+  role: true,
+  sandbox: true,
+  shape: true,
+  spellcheck: true,
+  target: true,
+  translate: true,
+  type: true,
+  wrap: true,
+  'aria-autocomplete': true,
+  'aria-busy': true,
+  'aria-checked': true,
+  'aria-current': true,
+  'aria-disabled': true,
+  'aria-expanded': true,
+  'aria-haspopup': true,
+  'aria-hidden': true,
+  'aria-invalid': true,
+  'aria-polite': true,
+  'aria-modal': true,
+  'aria-multiline': true,
+  'aria-multiselectable': true,
+  'aria-orientation': true,
+  'aria-pressed': true,
+  'aria-readonly': true,
+  'aria-relevant': true,
+  'aria-required': true,
+  'aria-selected': true,
+  'aria-sort': true,
+}
+
+// for moving off react-native-web eventually (unused atm)
+export const validAccessibilityAttributes = {
+  accessibilityRole: true,
+  accessibilityActiveDescendant: true,
+  accessibilityAtomic: true,
+  accessibilityAutoComplete: true,
+  accessibilityBusy: true,
+  accessibilityChecked: true,
+  accessibilityColumnCount: true,
+  accessibilityColumnIndex: true,
+  accessibilityColumnSpan: true,
+  accessibilityControls: true,
+  accessibilityCurrent: true,
+  accessibilityDescribedBy: true,
+  accessibilityDetails: true,
+  disabled: true,
+  accessibilityErrorMessage: true,
+  accessibilityExpanded: true,
+  accessibilityFlowTo: true,
+  accessibilityHasPopup: true,
+  accessibilityHidden: true,
+  accessibilityInvalid: true,
+  accessibilityKeyShortcuts: true,
+  accessibilityLabel: true,
+  accessibilityLabelledBy: true,
+  accessibilityLevel: true,
+  accessibilityLiveRegion: true,
+  accessibilityModal: true,
+  accessibilityMultiline: true,
+  accessibilityMultiSelectable: true,
+  accessibilityOrientation: true,
+  accessibilityOwns: true,
+  accessibilityPlaceholder: true,
+  accessibilityPosInSet: true,
+  accessibilityPressed: true,
+  accessibilityReadOnly: true,
+  accessibilityRequired: true,
+  accessibilityRoleDescription: true,
+  accessibilityRowCount: true,
+  accessibilityRowIndex: true,
+  accessibilityRowSpan: true,
+  accessibilitySelected: true,
+  accessibilitySetSize: true,
+  accessibilitySort: true,
+  accessibilityValueMax: true,
+  accessibilityValueMin: true,
+  accessibilityValueNow: true,
+  accessibilityValueText: true,
+  nativeID: true,
+}

package/src/getPragmaOptions.ts

@@ -0,0 +1,52 @@
+export function getPragmaOptions({
+  source,
+  path,
+  disableCommentCheck,
+}: {
+  source: string
+  path: string
+  disableCommentCheck?: boolean
+}) {
+  if (!disableCommentCheck && !source.startsWith('//') && !source.startsWith('/*')) {
+    return {
+      shouldPrintDebug: false,
+      shouldDisable: false,
+    }
+  }
+
+  let shouldPrintDebug: boolean | 'verbose' = false
+  let shouldDisable = false
+
+  const firstLine = source.split('\n', 1)[0]
+
+  if (firstLine.includes('tamagui-ignore')) {
+    shouldDisable = true
+  }
+
+  if (firstLine.includes('debug')) {
+    shouldPrintDebug = true
+  }
+
+  if (firstLine.includes('debug-verbose')) {
+    shouldPrintDebug = 'verbose'
+  }
+
+  if (process.env.TAMAGUI_DEBUG_FILE) {
+    if (path.includes(process.env.TAMAGUI_DEBUG_FILE)) {
+      shouldPrintDebug = 'verbose'
+    }
+  }
+
+  if (process.env.DEBUG?.includes('tamagui')) {
+    shouldPrintDebug = true
+  }
+
+  if (process.env.DEBUG?.includes('tamagui-verbose')) {
+    shouldPrintDebug = 'verbose'
+  }
+
+  return {
+    shouldPrintDebug,
+    shouldDisable,
+  }
+}