@tamagui/web 1.2.5

package/src/hooks/useMedia.tsx

@@ -0,0 +1,298 @@
+import { startTransition, useEffect, useMemo, useSyncExternalStore } from 'react'
+
+import { getConfig } from '../config'
+import { createProxy } from '../helpers/createProxy'
+import { matchMedia } from '../helpers/matchMedia'
+import {
+  MediaQueries,
+  MediaQueryKey,
+  MediaQueryObject,
+  MediaQueryState,
+  TamaguiInternalConfig,
+} from '../types'
+import { useSafeRef } from './useSafeRef'
+
+export let mediaState: MediaQueryState =
+  // development only safeguard
+  process.env.NODE_ENV === 'development'
+    ? createProxy(
+        {},
+        {
+          get(target, key) {
+            if (
+              typeof key === 'string' &&
+              key[0] === '$' &&
+              // dont error on $$typeof
+              key[1] !== '$'
+            ) {
+              throw new Error(`Access mediaState should not use "$": ${key}`)
+            }
+            return Reflect.get(target, key)
+          },
+        }
+      )
+    : ({} as any)
+
+export const mediaQueryConfig: MediaQueries = {}
+export const getMedia = () => mediaState
+export const mediaKeysWithAndWithout$ = new Set<string>()
+
+// for SSR capture it at time of startup
+let initState: MediaQueryState
+export const getInitialMediaState = () => {
+  return (getConfig().disableSSR ? mediaState : initState) || {}
+}
+
+let mediaKeysOrdered: string[]
+export const getMediaKeyImportance = (key: string) => {
+  if (process.env.NODE_ENV === 'development' && key[0] === '$') {
+    throw new Error('use short key')
+  }
+  // + 2 because we set base usedKeys=1 in getSplitStyles and all media go above 1
+  return mediaKeysOrdered.indexOf(key) + 2
+}
+
+const dispose = new Set<Function>()
+
+export const configureMedia = (config: TamaguiInternalConfig) => {
+  const { media, mediaQueryDefaultActive } = config
+  if (!media) return
+  for (const key in media) {
+    mediaState[key] = mediaQueryDefaultActive?.[key] || false
+    mediaKeysWithAndWithout$.add(key)
+    mediaKeysWithAndWithout$.add(`$${key}`)
+  }
+  Object.assign(mediaQueryConfig, media)
+  initState = { ...mediaState }
+  updateCurrentState()
+  mediaKeysOrdered = Object.keys(media)
+  if (config.disableSSR) {
+    setupMediaListeners()
+  }
+}
+
+function unlisten() {
+  dispose.forEach((cb) => cb())
+  dispose.clear()
+}
+
+/**
+ * Note: This should *not* set the state on the first render!
+ * Because to avoid hydration issues SSR must match the server
+ * *and then* re-render with the actual media query state.
+ */
+let configuredKey = ''
+function setupMediaListeners() {
+  // avoid setting up more than once per config
+  const nextKey = JSON.stringify(mediaQueryConfig)
+  if (nextKey === configuredKey) return
+  configuredKey = nextKey
+
+  // hmr, undo existing before re-binding
+  unlisten()
+
+  for (const key in mediaQueryConfig) {
+    const str = mediaObjectToString(mediaQueryConfig[key])
+    const getMatch = () => matchMedia(str)
+    const match = getMatch()
+    if (!match) {
+      throw new Error('⚠️ No match')
+    }
+    // react native needs these deprecated apis for now
+    match.addListener(update)
+    dispose.add(() => {
+      match.removeListener(update)
+    })
+
+    update()
+
+    function update() {
+      const next = !!getMatch().matches
+      if (next === mediaState[key]) return
+      mediaState = { ...mediaState, [key]: next }
+      updateCurrentState()
+    }
+  }
+}
+
+export function useMediaListeners(config: TamaguiInternalConfig) {
+  if (config.disableSSR) return
+  useEffect(() => {
+    setupMediaListeners()
+  }, [])
+}
+
+const listeners = new Set<any>()
+let flushing = false
+function updateCurrentState() {
+  if (flushing) return
+  flushing = true
+  Promise.resolve().then(() => {
+    flushing = false
+    startTransition(() => {
+      listeners.forEach((cb) => cb(mediaState))
+    })
+  })
+}
+
+type MediaKeysState = {
+  [key: string]: any
+}
+
+type UseMediaState = {
+  [key in MediaQueryKey]: boolean
+}
+
+type UpdateState = {
+  enabled: boolean
+  keys: MediaQueryKey[]
+}
+
+const shouldUpdate = new WeakMap<any, UpdateState>()
+
+export function setMediaShouldUpdate(ref: any, props: UpdateState) {
+  return shouldUpdate.set(ref, props)
+}
+
+type UseMediaInternalState = {
+  prev: MediaKeysState
+  touched?: Set<string>
+}
+
+function subscribe(subscriber: any) {
+  listeners.add(subscriber)
+  return () => listeners.delete(subscriber)
+}
+
+export function useMedia(uid?: any, debug?: any): UseMediaState {
+  const internal = useSafeRef<UseMediaInternalState>(undefined as any)
+  if (!internal.current) {
+    internal.current = {
+      prev: initState,
+    }
+  }
+  const state = useSyncExternalStore<MediaQueryState>(
+    subscribe,
+    () => {
+      const { touched, prev } = internal.current
+      const componentState = uid ? shouldUpdate.get(uid) : undefined
+      if (componentState?.enabled === false) {
+        return prev
+      }
+
+      const testKeys =
+        componentState?.keys ??
+        ((!componentState || componentState.enabled) && touched ? [...touched] : null)
+
+      const hasntUpdated = testKeys?.every((key) => mediaState[key] === prev[key])
+      if (hasntUpdated) {
+        return prev
+      }
+
+      internal.current.prev = mediaState
+      return mediaState
+    },
+    () => initState
+  )
+
+  return useMemo(() => {
+    return new Proxy(state, {
+      get(_, key) {
+        if (typeof key === 'string') {
+          internal.current.touched ||= new Set()
+          internal.current.touched.add(key)
+        }
+        return Reflect.get(state, key)
+      },
+    })
+  }, [state])
+}
+
+/**
+ * Useful for more complex components that need access to the currently active props,
+ * accounting for the currently active media queries.
+ *
+ * Use sparingly, it will loop props and trigger re-render on all media queries.
+ *
+ * */
+export function useMediaPropsActive<A extends Object>(
+  props: A
+): {
+  // remove all media
+  [Key in keyof A extends `$${string}` ? never : keyof A]?: A[Key]
+} {
+  const media = useMedia()
+
+  return useMemo(() => {
+    const next = {} as A
+    const importancesUsed = {}
+    const propNames = Object.keys(props)
+
+    for (let i = propNames.length - 1; i >= 0; i--) {
+      const key = propNames[i]
+      const val = props[key]
+      if (key[0] === '$') {
+        const mediaKey = key.slice(1)
+        if (!media[mediaKey]) continue
+        if (val && typeof val === 'object') {
+          const subKeys = Object.keys(val)
+          for (let j = subKeys.length; j--; j >= 0) {
+            const subKey = subKeys[j]
+            mergeMediaByImportance(next, mediaKey, subKey, val[subKey], importancesUsed)
+          }
+        }
+      } else {
+        mergeMediaByImportance(next, '', key, val, importancesUsed)
+      }
+    }
+
+    return next
+  }, [media, props])
+}
+
+export const getMediaImportanceIfMoreImportant = (
+  mediaKey: string,
+  key: string,
+  importancesUsed: Record<string, number>
+) => {
+  const importance = getMediaKeyImportance(mediaKey)
+  return !importancesUsed[key] || importance > importancesUsed[key] ? importance : null
+}
+
+export function mergeMediaByImportance(
+  onto: Record<string, any>,
+  mediaKey: string,
+  key: string,
+  value: any,
+  importancesUsed: Record<string, number>
+) {
+  const importance = getMediaImportanceIfMoreImportant(mediaKey, key, importancesUsed)
+  if (importance === null) {
+    return false
+  }
+  importancesUsed[key] = importance
+  onto[key] = value
+  return true
+}
+
+function camelToHyphen(str: string) {
+  return str.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`).toLowerCase()
+}
+
+export function mediaObjectToString(query: string | MediaQueryObject) {
+  if (typeof query === 'string') {
+    return query
+  }
+  return Object.entries(query)
+    .map(([feature, value]) => {
+      feature = camelToHyphen(feature)
+      if (typeof value === 'string') {
+        return `(${feature}: ${value})`
+      }
+      if (typeof value === 'number' && /[height|width]$/.test(feature)) {
+        value = `${value}px`
+      }
+      return `(${feature}: ${value})`
+    })
+    .join(' and ')
+}

package/src/hooks/useSafeRef.ts

@@ -0,0 +1,45 @@
+import { useIsomorphicLayoutEffect } from '@tamagui/constants'
+import { useRef } from 'react'
+
+// dai-shi 🙏
+// https://dev.to/uhyo_/a-concurrent-mode-safe-version-of-useref-1325
+// probably can live without it though to save a bit of b
+
+type Raw<T> = {
+  hold: boolean
+  next: T
+  cur: T
+  ref: { current: T }
+}
+
+export const useSafeRef = <T>(initialValue: T) => {
+  const rawRef = useRef<Raw<T>>()
+  if (!rawRef.current) {
+    rawRef.current = {
+      hold: true,
+      next: initialValue,
+      cur: initialValue,
+      ref: {
+        get current() {
+          return raw.hold ? raw.cur : raw.next
+        },
+        set current(v) {
+          if (!raw.hold) {
+            raw.next = v
+          }
+          raw.cur = v
+        },
+      },
+    }
+  }
+
+  const raw: Raw<T> = rawRef.current
+  raw.hold = true
+  raw.cur = raw.next
+  useIsomorphicLayoutEffect(() => {
+    raw.hold = false
+    raw.next = raw.cur
+  })
+
+  return raw.ref
+}

package/src/hooks/useServerHooks.tsx

@@ -0,0 +1,12 @@
+import { isRSC } from '@tamagui/constants'
+import { useRef, useState } from 'react'
+
+export const useServerState = isRSC
+  ? (((val: any) => [val, idFn]) as unknown as typeof useState)
+  : useState
+
+export const useServerRef = isRSC
+  ? (((val: any) => ({ current: val })) as unknown as typeof useRef)
+  : useRef
+
+const idFn = () => {}

package/src/hooks/useStyle.tsx

@@ -0,0 +1,49 @@
+import { isRSC, isWeb } from '@tamagui/constants'
+import { useContext } from 'react'
+
+import { FontLanguageContext } from '../contexts/FontLanguageContext'
+import { TextAncestorContext } from '../contexts/TextAncestorContext'
+import { useSplitStyles } from '../helpers/getSplitStyles'
+import {
+  DebugProp,
+  GetProps,
+  SplitStyleState,
+  TamaguiComponent,
+  TextNonStyleProps,
+} from '../types'
+import { useMedia } from './useMedia'
+import { useTheme } from './useTheme'
+
+export function useStyle<
+  Component extends TamaguiComponent,
+  StyleProps = Omit<GetProps<Component>, keyof TextNonStyleProps>
+>(
+  base: Component,
+  style: StyleProps,
+  options?: Partial<SplitStyleState> & { debug?: DebugProp }
+) {
+  const isText = base.staticConfig.isText
+  const hasTextAncestor = !!(isWeb && isText ? useContext(TextAncestorContext) : false)
+  const languageContext = isRSC ? null : useContext(FontLanguageContext)
+  const theme = useTheme()
+  const media = useMedia()
+  const out = useSplitStyles(
+    style as any,
+    base.staticConfig,
+    theme,
+    {
+      ...(options as any),
+      mediaState: media,
+      hasTextAncestor,
+      resolveVariablesAs: 'auto',
+    },
+    null,
+    languageContext || undefined,
+    isText ? 'span' : 'div',
+    options?.debug
+  )
+  return {
+    style: Object.keys(out.style).length ? out.style : null,
+    classNames: out.classNames,
+  }
+}

package/src/hooks/useTheme.tsx

@@ -0,0 +1,274 @@
+/* eslint-disable no-console */
+import { isClient, isRSC, isServer, isWeb } from '@tamagui/constants'
+import { useContext, useEffect, useMemo, useState } from 'react'
+
+import { getConfig } from '../config'
+import { isDevTools } from '../constants/isDevTools'
+import { createProxy } from '../helpers/createProxy'
+import {
+  ThemeManager,
+  ThemeManagerState,
+  hasNoThemeUpdatingProps,
+} from '../helpers/ThemeManager'
+import { ThemeManagerContext } from '../helpers/ThemeManagerContext'
+import { ThemeParsed, ThemeProps } from '../types'
+import { GetThemeUnwrapped } from './getThemeUnwrapped'
+import { useServerRef } from './useServerHooks'
+
+export type ChangedThemeResponse = {
+  themeManager: ThemeManager | null
+  name: string
+  isNewTheme?: boolean
+  theme?: ThemeParsed | null
+  className?: string
+}
+
+const emptyProps = { name: null }
+
+function getDefaultThemeProxied() {
+  const config = getConfig()
+  const name = Object.keys(config.themes)[0]
+  return getThemeProxied({
+    theme: config.themes[name],
+    name,
+  })
+}
+
+export const useTheme = (props: ThemeProps = emptyProps): ThemeParsed => {
+  return (isRSC ? null : useThemeWithState(props)?.theme) || getDefaultThemeProxied()
+}
+
+export const useThemeWithState = (props: ThemeProps) => {
+  const keys = useServerRef([])
+
+  const changedTheme = useChangeThemeEffect(
+    props,
+    false,
+    isClient
+      ? () => {
+          return props.shouldUpdate?.() ?? keys.current.length === 0
+        }
+      : undefined
+  )
+
+  const { themeManager, isNewTheme, theme, name, className } = changedTheme
+
+  if (process.env.NODE_ENV === 'development') {
+    // ensure we aren't creating too many ThemeManagers
+    // prettier-ignore
+    if (isWeb && isNewTheme && className === themeManager?.parentManager?.state.className) {
+      console.error('Should always change, duplicating ThemeMananger bug', themeManager)
+    }
+    if (props.debug === 'verbose') {
+      console.groupCollapsed('  🔹 useTheme =>', name)
+      const logs = { ...props, name, className, ...(isDevTools && { theme }) }
+      for (const key in logs) {
+        console.log('  ', key, logs[key])
+      }
+      console.groupEnd()
+    }
+  }
+
+  if (!changedTheme.theme) {
+    if (process.env.NODE_ENV === 'development') {
+      console.warn('No theme found', name, props, themeManager)
+    }
+    return null
+  }
+
+  const proxiedTheme = useMemo(() => {
+    return getThemeProxied(changedTheme as any)
+  }, [theme, isNewTheme, name, className, themeManager])
+
+  return {
+    ...changedTheme,
+    theme: proxiedTheme,
+  }
+}
+
+export function getThemeProxied({
+  theme,
+  themeManager,
+  keys,
+}: Partial<ChangedThemeResponse> & {
+  theme: ThemeParsed
+  keys?: React.RefObject<string[]>
+}) {
+  return createProxy(theme, {
+    has(_, key) {
+      if (typeof key === 'string') {
+        if (key[0] === '$') key = key.slice(1)
+        return themeManager?.allKeys.has(key)
+      }
+      return Reflect.has(theme, key)
+    },
+    get(_, key) {
+      if (key === GetThemeUnwrapped) {
+        return theme
+      }
+      if (
+        key === 'undefined' ||
+        key === '__proto__' ||
+        key === '$typeof' ||
+        typeof key !== 'string' ||
+        !themeManager
+      ) {
+        return Reflect.get(_, key)
+      }
+      const keyString = key
+      // auto convert variables to plain
+      if (key[0] === '$') {
+        key = key.slice(1)
+      }
+      const val = themeManager.getValue(key)
+      const currentKeys = keys?.current
+      if (val && currentKeys) {
+        return new Proxy(val as any, {
+          // when they touch the actual value we only track it
+          // if its a variable (web), its ignored!
+          get(_, subkey) {
+            if (subkey === 'val' && !currentKeys.includes(keyString)) {
+              currentKeys.push(keyString)
+            }
+            return Reflect.get(val as any, subkey)
+          },
+        })
+      }
+      return val
+    },
+  })
+}
+
+export const activeThemeManagers = new Set<ThemeManager>()
+
+export const useChangeThemeEffect = (
+  props: ThemeProps,
+  root = false,
+  disableUpdate?: () => boolean
+): ChangedThemeResponse => {
+  if (isRSC) {
+    // we need context working for this to work well
+    return {
+      ...createState().state,
+      themeManager: null,
+    }
+  }
+  const parentManager = useContext(ThemeManagerContext)
+
+  const {
+    debug,
+    // @ts-expect-error internal use only
+    disable,
+  } = props
+
+  if (disable) {
+    if (!parentManager) throw `❌`
+    return {
+      ...parentManager.state,
+      isNewTheme: false,
+      themeManager: parentManager,
+    }
+  }
+
+  type State = {
+    isNewTheme: boolean
+    state: ThemeManagerState
+    themeManager: ThemeManager
+    mounted?: boolean
+  }
+
+  const [themeState, setThemeState] = useState<State>(createState)
+  const { isNewTheme, state, themeManager, mounted } = themeState
+
+  if (!isServer) {
+    useEffect(() => {
+      if (disable) return
+      // SSR safe inverse (because server can't know prefers scheme)
+      // could be done through fancy selectors like how we do prefers-media
+      // but may be a bit of explosion of selectors
+      if (props.inverse && !mounted) {
+        setThemeState({ ...themeState, mounted: true })
+        return
+      }
+      activeThemeManagers.add(themeManager)
+      // const disposeChangeListener = parentManager?.onChangeTheme((name, manager) => {
+      //   // console.log('hi', props, state, name, manager)
+      //   if (state.theme !== manager.state.theme) {
+      //     console.warn('now update to', manager.state.name)
+      //     updateState(manager)
+      //   }
+      // })
+      return () => {
+        activeThemeManagers.delete(themeManager)
+        // disposeChangeListener?.()
+      }
+    }, [disable, state, isNewTheme, debug])
+  }
+
+  const isInversingOnMount = Boolean(!themeState.mounted && props.inverse)
+  const shouldReturnParentState = hasNoThemeUpdatingProps(props) || isInversingOnMount
+
+  if (shouldReturnParentState) {
+    if (!parentManager) throw 'impossible'
+    // prettier-ignore
+    if (process.env.NODE_ENV === 'development' && props.debug === 'verbose') console.log('useTheme hasNoThemeUpdatingProps', parentManager.state.name, 'isInversingOnMount', isInversingOnMount)
+    return {
+      ...parentManager.state,
+      className: isInversingOnMount ? '' : parentManager.state.className,
+      themeManager: parentManager,
+      isNewTheme: false,
+    }
+  }
+
+  // run inline in render
+  updateState()
+
+  return {
+    ...state,
+    isNewTheme,
+    themeManager,
+  }
+
+  function createState(prev?: State) {
+    if (prev && disableUpdate?.()) {
+      return prev
+    }
+    // returns previous theme manager if no change
+    const _ = new ThemeManager(props, root ? 'root' : parentManager)
+    const isNewTheme = _ !== parentManager
+    // prettier-ignore
+
+    // if (prev?.isNewTheme && _.state.theme !== parentManager?.state.theme) {
+    //   console.warn('notify')
+    //   _.notify()
+    // }
+
+    // only inverse relies on this for ssr
+    const mounted = !props.inverse ? true : root || prev?.mounted
+    return {
+      // ThemeManager returns parentManager if no change
+      isNewTheme,
+      state: { ..._.state },
+      themeManager: _,
+      mounted,
+    }
+  }
+
+  function updateState(updatingManager?: ThemeManager) {
+    if (disableUpdate?.()) {
+      return
+    }
+    const manager = updatingManager ?? themeManager
+    const next = manager.getState(props, parentManager)
+    const shouldChange = manager.getStateShouldChange(next, isNewTheme ? state : null)
+    // console.log(`got it`, next, isNewTheme, shouldChange, { ...updatingManager?.state })
+    if (shouldChange) {
+      setThemeState(createState)
+    } else {
+      if (!next && parentManager?.state.name !== state.name) {
+        // were changing back to parent state
+        setThemeState(createState)
+      }
+    }
+  }
+}

package/src/hooks/useThemeName.tsx

@@ -0,0 +1,27 @@
+import { isRSC, useIsomorphicLayoutEffect } from '@tamagui/constants'
+import { useContext, useState } from 'react'
+
+import { getConfig } from '../config'
+import { ThemeManagerContext } from '../helpers/ThemeManagerContext'
+import { ThemeName } from '../types'
+
+export function useThemeName(opts?: { parent?: true }): ThemeName {
+  if (isRSC) {
+    const config = getConfig()
+    return config.themes[Object.keys(config.themes)[0]] as any
+  }
+  const manager = useContext(ThemeManagerContext)
+  const [name, setName] = useState(manager?.state.name || '')
+
+  useIsomorphicLayoutEffect(() => {
+    if (!manager) return
+    setName(manager.state.name)
+    return manager.onChangeTheme((next, manager) => {
+      const name = opts?.parent ? manager.state.parentName || next : next
+      if (!name) return
+      setName(name)
+    })
+  }, [manager?.state.name])
+
+  return name
+}