@tamagui/web 1.2.5

package/src/helpers/isObj.ts

@@ -0,0 +1 @@
+export const isObj = (x: any) => x && !Array.isArray(x) && typeof x === 'object'

package/src/helpers/isTamaguiComponent.tsx

@@ -0,0 +1,11 @@
+import { StaticConfig, StaticConfigParsed } from '../types'
+
+export function isTamaguiComponent<A>(
+  comp: A,
+  name?: string
+): comp is A & {
+  staticConfig: StaticConfig
+} {
+  const config = comp?.['staticConfig'] as StaticConfigParsed | undefined
+  return (config?.parsed && (name ? name === config.componentName : true)) || false
+}

package/src/helpers/isTamaguiElement.tsx

@@ -0,0 +1,11 @@
+import { isValidElement } from 'react'
+
+import { TamaguiReactElement } from '../types'
+import { isTamaguiComponent } from './isTamaguiComponent'
+
+export const isTamaguiElement = (
+  child: any,
+  name?: string
+): child is TamaguiReactElement => {
+  return isValidElement(child) && isTamaguiComponent(child.type, name)
+}

package/src/helpers/matchMedia.native.ts

@@ -0,0 +1,23 @@
+import { MatchMedia, MediaQueryList } from '../types'
+
+let matchMediaImpl: MatchMedia = matchMediaFallback
+
+export const matchMedia: MatchMedia = (...args) => matchMediaImpl(...args)
+
+function matchMediaFallback(query: string): MediaQueryList {
+  if (process.env.NODE_ENV === 'development') {
+    // eslint-disable-next-line no-console
+    console.warn('warning: matchMedia implementation is not provided.')
+  }
+  return {
+    addListener: () => {},
+    removeListener: () => {},
+    matches: false,
+  }
+}
+
+export function setupMatchMedia(_: MatchMedia) {
+  matchMediaImpl = _
+  // @ts-ignore
+  globalThis['matchMedia'] = _
+}

package/src/helpers/matchMedia.ts

@@ -0,0 +1,16 @@
+import { MatchMedia, MediaQueryList } from '../types'
+
+export const matchMedia =
+  (typeof window !== 'undefined' && window.matchMedia) || matchMediaFallback
+
+function matchMediaFallback(_: string): MediaQueryList {
+  return {
+    addListener() {},
+    removeListener() {},
+    matches: false,
+  }
+}
+
+export function setupMatchMedia(_: MatchMedia) {
+  // no-op web
+}

package/src/helpers/mergeProps.ts

@@ -0,0 +1,56 @@
+/**
+ * Preserves prop ordering, so that the order most closely matches the last spread objects
+ * Useful for having { ...defaultProps, ...props } that ensure props ordering is always kept
+ *
+ *    Given:
+ *      mergeProps({ a: 1, b: 2 }, { b: 1, a: 2 })
+ *    The final key order will be:
+ *      b, a
+ *
+ * Handles a couple special tamagui cases
+ *   - classNames can be extracted out separately
+ *   - shorthands can be expanded before merging
+ */
+
+type AnyRecord = Record<string, any>
+
+export const mergeProps = (
+  a: Object,
+  b: Object,
+  leaveOutClassNames = false,
+  inverseShorthands?: AnyRecord
+) => {
+  const out: AnyRecord = {}
+  const outCns: AnyRecord = leaveOutClassNames ? {} : (null as any)
+  for (const key in a) {
+    mergeProp(out, outCns, a, b, key, leaveOutClassNames, inverseShorthands)
+  }
+  for (const key in b) {
+    mergeProp(out, outCns, b, undefined, key, leaveOutClassNames, inverseShorthands)
+  }
+  return [out, outCns] as const
+}
+
+function mergeProp(
+  out: AnyRecord,
+  outCns: AnyRecord,
+  a: Object,
+  b: Object | undefined,
+  key: string,
+  leaveOutClassNames: boolean,
+  inverseShorthands?: AnyRecord
+) {
+  const val = a[key]
+  const shorthand = inverseShorthands?.[key] || null
+  if (b && (key in b || (shorthand && shorthand in b))) {
+    return
+  }
+  if (shorthand) {
+    key = shorthand
+  }
+  if (leaveOutClassNames && val?.[0] === '_') {
+    outCns[key] = val
+  } else {
+    out[key] = val
+  }
+}

package/src/helpers/mergeTransform.ts

@@ -0,0 +1,30 @@
+import type { ViewStyle } from 'react-native'
+
+export type FlatTransforms = Record<string, any>
+
+export const mergeTransform = (
+  obj: ViewStyle,
+  key: string,
+  val: any,
+  backwards = false
+) => {
+  obj.transform ||= []
+  obj.transform[backwards ? 'unshift' : 'push']({
+    [mapTransformKeys[key] || key]: val,
+  } as any)
+}
+
+export const mergeTransforms = (
+  obj: ViewStyle,
+  flatTransforms: FlatTransforms,
+  backwards = false
+) => {
+  Object.entries(flatTransforms).forEach(([key, val]) => {
+    mergeTransform(obj, key, val, backwards)
+  })
+}
+
+export const mapTransformKeys = {
+  x: 'translateX',
+  y: 'translateY',
+}

package/src/helpers/normalizeColor.ts

@@ -0,0 +1,38 @@
+import { isWeb } from '@tamagui/constants'
+import * as NCC from '@tamagui/normalize-css-color'
+
+export const rgba = NCC.rgba
+
+export const normalizeColor = (color?: string | null, opacity?: number) => {
+  if (color === null || color === undefined) {
+    return
+  }
+  if (color === 'transparent') {
+    return `rgba(0,0,0,0)`
+  }
+  if (
+    color[0] === '$' ||
+    (isWeb && (webColors[color] || color[0] === '_' || color.startsWith('var(')))
+  ) {
+    return color
+  }
+  const colorProcessed = NCC.normalizeCSSColor(color)
+  if (colorProcessed !== null) {
+    const { r, g, b, a } = rgba(colorProcessed)
+    return `rgba(${r},${g},${b},${(opacity ?? a).toFixed(2)})`
+  }
+
+  if (isWeb) {
+    return color
+  } else {
+    if (process.env.NODE_ENV === 'development') {
+      console.warn(`Unknown color value: ${color}`)
+    }
+  }
+}
+
+const webColors = {
+  currentColor: true,
+  currentcolor: true,
+  inherit: true,
+}

package/src/helpers/normalizeValueWithProperty.ts

@@ -0,0 +1,129 @@
+/**
+ * Some parts adapted from react-native-web
+ * Copyright (c) Nicolas Gallagher licensed under the MIT license.
+ */
+
+import { isWeb } from '@tamagui/constants'
+
+import { getAllSelectors } from './insertStyleRule'
+import { normalizeColor } from './normalizeColor'
+
+const cache = {}
+
+export function normalizeValueWithProperty(value: any, property?: string): any {
+  const cached = cache[value]
+  if (cached !== undefined) {
+    return cached
+  }
+  if (property && property in unitlessNumbers) {
+    return value
+  }
+  let res = value
+  if (
+    process.env.TAMAGUI_TARGET === 'web' &&
+    typeof value === 'number' &&
+    (property === undefined || !(unitlessNumbers[property] || stringNumbers[property]))
+  ) {
+    res = `${value}px`
+  } else if (isWeb && property !== undefined && stringNumbers[property]) {
+    res = `${res}`
+  } else if (property && property in colorProps) {
+    res = normalizeColor(value)
+    cache[value] = res
+  }
+  return res
+}
+
+// TODO react-native-web-lite
+
+const colorProps = {
+  backgroundColor: true,
+  borderColor: true,
+  borderTopColor: true,
+  borderRightColor: true,
+  borderBottomColor: true,
+  borderLeftColor: true,
+  color: true,
+  shadowColor: true,
+  textDecorationColor: true,
+  textShadowColor: true,
+}
+
+const stringNumbers = {
+  zIndex: true,
+}
+
+const unitlessNumbers = {
+  WebkitLineClamp: true,
+  animationIterationCount: true,
+  aspectRatio: true,
+  borderImageOutset: true,
+  borderImageSlice: true,
+  borderImageWidth: true,
+  columnCount: true,
+  flex: true,
+  flexGrow: true,
+  flexOrder: true,
+  flexPositive: true,
+  flexShrink: true,
+  flexNegative: true,
+  fontWeight: true,
+  gridRow: true,
+  gridRowEnd: true,
+  gridRowGap: true,
+  gridRowStart: true,
+  gridColumn: true,
+  gridColumnEnd: true,
+  gridColumnGap: true,
+  gridColumnStart: true,
+  lineClamp: true,
+  opacity: true,
+  order: true,
+  orphans: true,
+  tabSize: true,
+  widows: true,
+  zoom: true,
+  scale: true,
+  scaleX: true,
+  scaleY: true,
+  scaleZ: true,
+  shadowOpacity: true,
+}
+
+// getting real values for colors for animations (reverse mapped from CSS)
+// this isn't beautiful, but will do relatively fine performance for now
+const rcache = {}
+export function reverseMapClassNameToValue(key: string, className: string) {
+  const selectors = getAllSelectors()
+  const cssRule = selectors[className]
+  if (rcache[cssRule]) return rcache[cssRule]
+  if (!cssRule) {
+    return
+  }
+  const cssVal = cssRule.replace(/.*:/, '').replace(/;.*/, '').trim()
+  let res: any
+  if (cssVal.startsWith('var(')) {
+    res = cssVal
+  } else if (unitlessNumbers[key]) {
+    res = +cssVal
+  } else if (cssVal.endsWith('px')) {
+    res = +cssVal.replace('px', '')
+  } else {
+    res = cssVal
+  }
+  rcache[cssRule] = res
+  if (process.env.NODE_ENV === 'development') {
+    // ensure we are parsing properly
+    if (typeof res === 'number' && isNaN(res)) {
+      // eslint-disable-next-line no-console
+      console.log('Tamagui invalid parsed value, NaN:', {
+        res,
+        cssVal,
+        cssRule,
+        key,
+        className,
+      })
+    }
+  }
+  return res
+}

package/src/helpers/proxyThemeVariables.tsx

@@ -0,0 +1,15 @@
+import { createProxy } from './createProxy'
+
+export function proxyThemeVariables<A extends Object>(obj: A): A {
+  return createProxy<A>(obj || {}, {
+    has(target, key) {
+      return Reflect.has(target, removeStarting$(key))
+    },
+    get(target, key) {
+      return Reflect.get(target, removeStarting$(key))
+    },
+  })
+}
+
+const removeStarting$ = (str: string | symbol) =>
+  typeof str === 'string' && str[0] === '$' ? str.slice(1) : str

package/src/helpers/pseudoDescriptors.ts

@@ -0,0 +1,40 @@
+// *0 order matches to *1
+
+export const pseudoDescriptors: Record<
+  'hoverStyle' | 'pressStyle' | 'focusStyle' | 'enterStyle' | 'exitStyle',
+  PseudoDescriptor
+> = {
+  hoverStyle: {
+    name: 'hover',
+    priority: 1,
+  },
+  pressStyle: {
+    name: 'active',
+    stateKey: 'press',
+    priority: 2,
+  },
+  focusStyle: {
+    name: 'focus',
+    priority: 3,
+  },
+  enterStyle: {
+    name: 'enter',
+    stateKey: 'unmounted',
+    priority: 4,
+  },
+  exitStyle: {
+    name: 'exit',
+    stateKey: 'isExiting',
+    priority: 5,
+  },
+}
+
+export type PseudoDescriptor = {
+  name: string
+  priority: number
+  stateKey?: string
+}
+
+export type PseudoDescriptors = {
+  [Key in keyof typeof pseudoDescriptors]: PseudoDescriptor
+}

package/src/helpers/registerCSSVariable.ts

@@ -0,0 +1,13 @@
+import { Variable, createCSSVariable } from '../createVariable'
+
+export const registerCSSVariable = (v: Variable) => {
+  tokensValueToVariable.set(v.val, v)
+}
+
+export const variableToCSS = (v: Variable) => {
+  return `--${createCSSVariable(v.name, false)}:${
+    typeof v.val === 'number' ? `${v.val}px` : v.val
+  }`
+}
+
+export const tokensValueToVariable = new Map<any, any>()

package/src/helpers/themeable.tsx

@@ -0,0 +1,44 @@
+import React, { forwardRef, useId } from 'react'
+
+import { ThemeName } from '../types'
+import { Theme } from '../views/Theme'
+
+export interface ThemeableProps {
+  theme?: ThemeName | null
+  themeInverse?: boolean
+  themeReset?: boolean
+  componentName?: string
+  debug?: boolean | 'verbose'
+}
+
+export function themeable<Component extends (props: any) => any>(
+  component: Component,
+  opts?: { componentName?: string }
+) {
+  const withThemeComponent = forwardRef(function WithTheme(props: ThemeableProps, ref) {
+    const { themeInverse, theme, componentName, themeReset, ...rest } = props
+    const element = React.createElement(component, { ...rest, ref } as any)
+
+    return (
+      <Theme
+        inverse={themeInverse}
+        componentName={componentName || opts?.componentName}
+        name={(theme as any) || null}
+        data-themeable
+        debug={props.debug}
+        reset={props.themeReset}
+      >
+        {element}
+      </Theme>
+    )
+  })
+
+  const withTheme: any = withThemeComponent
+  withTheme.displayName = `Themed(${
+    (component as any)?.displayName || (component as any)?.name || 'Anonymous'
+  })`
+
+  return withTheme as Component extends (props: infer P) => infer R
+    ? (props: Omit<P, 'theme' | 'themeInverse'> & ThemeableProps) => R
+    : unknown
+}

package/src/helpers/themes.ts

@@ -0,0 +1,67 @@
+import { createVariable, isVariable } from '../createVariable'
+import { GetThemeUnwrapped } from '../hooks/getThemeUnwrapped'
+import { CreateTamaguiProps } from '../types'
+
+// mutates, freeze after
+// shared by createTamagui so extracted here
+export function ensureThemeVariable(theme: any, key: string) {
+  const val = theme[key]
+  const themeKey = key
+  if (!isVariable(val)) {
+    theme[key] = createVariable({
+      key: themeKey,
+      name: themeKey,
+      val,
+    })
+  } else {
+    if (val.name !== themeKey) {
+      // rename to theme name
+      theme[key] = createVariable({
+        key: val.name,
+        name: themeKey,
+        val: val.val,
+      })
+    }
+  }
+}
+
+export function proxyThemeToParents(
+  themeName: string,
+  theme: any,
+  themes: CreateTamaguiProps['themes']
+) {
+  // we could test if this is better as just a straight object spread or fancier proxy
+  const cur: string[] = []
+  // if theme is dark_blue_alt1_Button
+  // this will be the parent names in order: ['dark', 'dark_blue', 'dark_blue_alt1"]
+  const parents = themeName
+    .split('_')
+    .slice(0, -1)
+    .map((part) => {
+      cur.push(part)
+      return cur.join('_')
+    })
+
+  const len = parents.length
+
+  // proxy fallback values to parent theme values
+  return new Proxy(theme, {
+    get(target, key) {
+      if (key === GetThemeUnwrapped) {
+        return theme
+      }
+      if (!len || Reflect.has(target, key)) {
+        return Reflect.get(target, key)
+      }
+      // check parents
+      for (let i = len - 1; i >= 0; i--) {
+        const parent = themes[parents[i]]
+        if (!parent) continue
+        if (Reflect.has(parent, key)) {
+          return Reflect.get(parent, key)
+        }
+      }
+      return Reflect.get(target, key)
+    },
+  })
+}

package/src/helpers/timer.ts

@@ -0,0 +1,9 @@
+const timer = require('@tamagui/timer').timer()
+
+setTimeout(() => {
+  timer.print()
+}, 2000)
+
+export const time = timer.start({
+  quiet: true,
+})

package/src/helpers/useShallowSetState.tsx

@@ -0,0 +1,41 @@
+import React, { startTransition, useCallback } from 'react'
+
+import { DebugProp } from '../types'
+import { TamaguiComponentState } from '..'
+
+export function useShallowSetState<State extends TamaguiComponentState>(
+  setter: React.Dispatch<React.SetStateAction<State>>,
+  debug?: DebugProp,
+  debugName?: string
+) {
+  return useCallback(
+    (next: Partial<State>) => {
+      const shouldTransition = Object.keys(next).every((k) =>
+        transitionKeys.has(k as any)
+      )
+      const run = shouldTransition ? startTransition : (_) => _()
+      run(() => {
+        setter((prev) => {
+          for (const key in next) {
+            if (prev[key] !== next[key]) {
+              if (process.env.NODE_ENV === 'development' && debug === 'verbose') {
+                // eslint-disable-next-line no-console
+                console.log(` ▲ setState ${debugName}`, next)
+              }
+              return { ...prev, ...next }
+            }
+          }
+          return prev
+        })
+      })
+    },
+    [setter]
+  )
+}
+
+const transitionKeys = new Set<keyof TamaguiComponentState>([
+  'press',
+  'pressIn',
+  'focus',
+  'unmounted',
+])

package/src/helpers/warnOnce.tsx

@@ -0,0 +1,11 @@
+let hasWarned
+
+export function warnOnce(key: string, warning: string) {
+  if (process.env.NODE_ENV === 'development') {
+    hasWarned ??= {}
+    if (!hasWarned[key]) {
+      hasWarned[key] = true
+      console.warn(warning)
+    }
+  }
+}

package/src/helpers/withStaticProperties.tsx

@@ -0,0 +1,7 @@
+export const withStaticProperties = function <A extends Function, B>(
+  component: A,
+  staticProps: B
+): A & B {
+  Object.assign(component, staticProps)
+  return component as any
+}

package/src/hooks/getThemeUnwrapped.tsx

@@ -0,0 +1,5 @@
+export const getThemeUnwrapped = (theme: any) => {
+  return theme?.[GetThemeUnwrapped] || theme
+}
+
+export const GetThemeUnwrapped = Symbol()

package/src/hooks/useId.tsx

@@ -0,0 +1 @@
+export { useId } from 'react'

package/src/hooks/useIsTouchDevice.tsx

@@ -0,0 +1,6 @@
+import { isTouchable, isWeb } from '@tamagui/constants'
+import { useDidFinishSSR } from '@tamagui/use-did-finish-ssr'
+
+export const useIsTouchDevice = () => {
+  return !isWeb ? true : useDidFinishSSR() ? isTouchable : false
+}