@tamagui/core 1.0.1-beta.18 → 1.0.1-beta.180

package/src/hooks/useMedia.tsx

@@ -0,0 +1,254 @@
+import { useEffect, useMemo, useState } from 'react'
+
+import { useIsomorphicLayoutEffect } from '../constants/platform'
+import { matchMedia } from '../helpers/matchMedia'
+import {
+  MediaQueries,
+  MediaQueryKey,
+  MediaQueryObject,
+  MediaQueryState,
+  TamaguiInternalConfig,
+} from '../types'
+import { useSafeRef } from './useSafeRef'
+
+export const mediaState: MediaQueryState =
+  // development time safeguard
+  process.env.NODE_ENV === 'development'
+    ? new Proxy(
+        {},
+        {
+          get(target, key) {
+            if (typeof key === 'string' && key[0] === '$') {
+              throw new Error(`Access of mediaState should never include $`)
+            }
+            return Reflect.get(target, key)
+          },
+        }
+      )
+    : ({} as any)
+
+type MediaListener = (next: boolean) => void
+
+const mediaQueryListeners: { [key: string]: Set<MediaListener> } = {}
+
+export function addMediaQueryListener(key: MediaQueryKey, cb: MediaListener) {
+  if (process.env.NODE_ENV === 'development' && key[0] === '$') {
+    // eslint-disable-next-line no-console
+    console.warn(`Warning, listening to media queries shouldn't use the "$" prefix`)
+  }
+  mediaQueryListeners[key] = mediaQueryListeners[key] || new Set()
+  mediaQueryListeners[key].add(cb)
+  return () => removeMediaQueryListener(key, cb)
+}
+
+export function removeMediaQueryListener(key: MediaQueryKey, cb: MediaListener) {
+  mediaQueryListeners[key]?.delete(cb)
+}
+
+export const mediaQueryConfig: MediaQueries = {}
+
+export const getMedia = () => {
+  return mediaState
+}
+
+const dispose = new Set<Function>()
+
+// for SSR capture it at time of startup
+let initialMediaState: MediaQueryState | null
+
+export const configureMedia = (config: TamaguiInternalConfig) => {
+  const { media, mediaQueryDefaultActive } = config
+  if (!media) return
+  for (const key in media) {
+    mediaState[key] = mediaQueryDefaultActive?.[key] || false
+  }
+  Object.assign(mediaQueryConfig, media)
+  initialMediaState = { ...mediaState }
+  if (config.disableSSR) {
+    setupMediaListeners()
+  }
+}
+
+export const getInitialMediaState = () => initialMediaState
+
+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[key] = next
+      const listeners = mediaQueryListeners[key]
+      if (listeners?.size) {
+        listeners.forEach((cb) => cb(next))
+      }
+    }
+  }
+}
+
+export function useMediaQueryListeners(config: TamaguiInternalConfig) {
+  if (config.disableSSR) {
+    return
+  }
+
+  useEffect(() => {
+    setupMediaListeners()
+    return unlisten
+  }, [])
+}
+
+export function useMedia(): {
+  [key in MediaQueryKey]: boolean
+} {
+  const [state, setState] = useState(initialMediaState || {})
+  const keys = useSafeRef({} as Record<string, boolean>)
+
+  function updateState() {
+    setState((prev) => {
+      for (const key in keys.current) {
+        if (prev[key] !== mediaState[key]) {
+          return { ...mediaState }
+        }
+      }
+      return prev
+    })
+  }
+
+  useIsomorphicLayoutEffect(() => {
+    const disposes: Function[] = Object.keys(keys.current).map((key) =>
+      addMediaQueryListener(key, updateState)
+    )
+    updateState()
+    return () => {
+      disposes.forEach((cb) => cb())
+    }
+  })
+
+  return useMemo(
+    () =>
+      new Proxy(state, {
+        get(_, key: string) {
+          if (process.env.NODE_ENV === 'development') {
+            if (!initialMediaState) {
+              throw new Error(
+                `To use useMedia() you must pass in media configuration to createTamagui, none was found.`
+              )
+            }
+          }
+          if (!keys.current[key]) {
+            keys.current[key] = true
+          }
+          return Reflect.get(state, key)
+        },
+      }),
+    [state, keys]
+  )
+}
+
+/**
+ * Useful for more complex components that need access to the currently active props,
+ * accounting for the currently active media queries.
+ *
+ * Use sparingly, is 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 evaluated = {} as A
+    const lastSetImportanceForKey = {}
+    const propNames = Object.keys(props)
+    const mediaKeysOrdered = Object.keys(getMedia())
+
+    function update(k: string, v: any, importance = 0) {
+      if (lastSetImportanceForKey[k] > importance) {
+        return
+      }
+      lastSetImportanceForKey[k] = importance
+      evaluated[k] = v
+    }
+
+    for (let i = propNames.length - 1; i >= 0; i--) {
+      const key = propNames[i]
+      const val = props[key]
+      if (key[0] === '$') {
+        const shortKey = key.slice(1)
+        if (!media[shortKey]) {
+          continue
+        }
+        if (val && typeof val === 'object') {
+          const subPropNames = Object.keys(val)
+          const mediaImportance = mediaKeysOrdered.indexOf(shortKey)
+          for (let j = subPropNames.length; j--; j >= 0) {
+            const skey = subPropNames[j]
+            update(skey, val[skey], mediaImportance)
+          }
+        }
+      } else {
+        update(key, val)
+      }
+    }
+
+    return evaluated
+  }, [media, props])
+}
+
+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/usePressable.tsx

@@ -0,0 +1,9 @@
+import { Pressable, PressableProps } from 'react-native'
+
+const getPressable = Pressable?.['type']?.['render']
+
+export const usePressable = (props: PressableProps) => {
+  const out = getPressable(props)
+  const { children, style, ...pressableProps } = out.props
+  return [pressableProps, style] as const
+}

package/src/hooks/useSafeRef.ts

@@ -0,0 +1,50 @@
+import { useRef } from 'react'
+
+import { useIsomorphicLayoutEffect } from '../constants/platform'
+
+// dai-shi 🙏
+// https://dev.to/uhyo_/a-concurrent-mode-safe-version-of-useref-1325
+
+type Raw<T> = {
+  isRendering: boolean
+  comittedValue: T
+  currentValue: T
+  ref: { current: T }
+}
+
+export const useSafeRef = <T>(initialValue: T) => {
+  const rawRef = useRef<Raw<T>>()
+
+  const raw: Raw<T> =
+    rawRef.current ??
+    (rawRef.current = {
+      isRendering: true,
+      comittedValue: initialValue,
+      currentValue: initialValue,
+      ref: {
+        get current() {
+          if (raw.isRendering) {
+            return raw.currentValue
+          } else {
+            return raw.comittedValue
+          }
+        },
+        set current(v) {
+          if (!raw.isRendering) {
+            raw.comittedValue = v
+          }
+          raw.currentValue = v
+        },
+      },
+    })
+
+  raw.isRendering = true
+  Promise.resolve().then(() => (raw.isRendering = false))
+  raw.currentValue = raw.comittedValue
+
+  useIsomorphicLayoutEffect(() => {
+    raw.comittedValue = raw.currentValue
+  })
+
+  return raw.ref
+}

package/src/hooks/useServerHooks.tsx

@@ -0,0 +1,13 @@
+import { useRef, useState } from 'react'
+
+import { isRSC } from '../constants/platform'
+
+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/useTheme.tsx

@@ -0,0 +1,299 @@
+import { useForceUpdate } from '@tamagui/use-force-update'
+import React, { useContext, useLayoutEffect, useMemo, useRef, useState } from 'react'
+
+import { getConfig } from '../config'
+import { isDevTools } from '../constants/isDevTools'
+import { isRSC, isServer, useIsomorphicLayoutEffect } from '../constants/platform'
+import { ThemeContext } from '../contexts/ThemeContext'
+import { areEqualSets } from '../helpers/areEqualSets'
+import {
+  GetNextThemeProps,
+  ThemeManager,
+  ThemeManagerContext,
+  emptyManager,
+} from '../helpers/ThemeManager'
+import { ThemeName, ThemeParsed } from '../types'
+import { GetThemeUnwrapped } from './getThemeUnwrapped'
+import { useConstant } from './useConstant'
+import { useServerRef } from './useServerHooks'
+
+export interface ThemeProps {
+  className?: string
+  disableThemeClass?: boolean
+  name: Exclude<ThemeName, number> | null
+  componentName?: string
+  children?: any
+  reset?: boolean
+  debug?: boolean | 'verbose'
+}
+
+interface UseThemeState {
+  uuid: Object
+  keys: Set<string>
+  isRendering: boolean
+}
+
+export const useTheme = (
+  themeName?: string | null,
+  componentName?: string,
+  props?: ThemeProps,
+  forceUpdate?: any
+): ThemeParsed => {
+  // TODO this can use useChangeThemeEffect almost ready
+  if (isRSC) {
+    const config = getConfig()
+    // @ts-ignore
+    return getThemeProxied(config.themes[config.defaultTheme], config.defaultTheme)
+  }
+
+  const state = useServerRef() as React.MutableRefObject<UseThemeState>
+  if (!state.current) {
+    state.current = {
+      uuid: {},
+      keys: new Set(),
+      isRendering: true,
+    }
+  }
+
+  const { name, theme, themes, themeManager, className } = useChangeThemeEffect(
+    themeName,
+    componentName,
+    props,
+    forceUpdate,
+    state.current.uuid
+  )
+
+  if (process.env.NODE_ENV === 'development') {
+    if (props?.debug === 'verbose') {
+      // eslint-disable-next-line no-console
+      console.groupCollapsed('  🔹 useTheme =>', name)
+      const logs = { themeName, componentName, name, className, ...(isDevTools && { theme }) }
+      for (const key in logs) {
+        // eslint-disable-next-line no-console
+        console.log('  ', key, logs[key])
+      }
+      // eslint-disable-next-line no-console
+      console.groupEnd()
+    }
+  }
+
+  // track usage
+  state.current.isRendering = true
+  useIsomorphicLayoutEffect(() => {
+    const st = state.current
+    st.isRendering = false
+    const cur = themeManager?.keys.get(st.uuid)
+    if (!cur || !areEqualSets(st.keys, cur)) {
+      themeManager?.track(st.uuid, st.keys)
+    }
+  })
+
+  const debugProp = props && props['debug']
+
+  if (!theme) {
+    if (process.env.NODE_ENV === 'development') {
+      // eslint-disable-next-line no-console
+      console.warn('No theme with name', themeName)
+    }
+    return themes[getConfig().defaultTheme || 'light']
+  }
+
+  return useMemo(() => {
+    return getThemeProxied(theme, name, className, themeManager, state, debugProp)
+  }, [theme, name, className, themeManager, state, debugProp])
+}
+
+function getThemeProxied(
+  theme: any,
+  name: string,
+  className?: string,
+  themeManager?: ThemeManager | null,
+  state?: React.MutableRefObject<UseThemeState>,
+  debugProp?: boolean | 'verbose'
+) {
+  return new Proxy(theme, {
+    has(_, key) {
+      if (typeof key === 'string' && key[0] === '$') {
+        key = key.slice(1)
+      }
+      return Reflect.has(theme, key)
+    },
+    get(_, key) {
+      if (key === GetThemeUnwrapped) {
+        return theme
+      }
+      if (key === GetThemeManager) {
+        return themeManager
+      }
+      if (key === 'name') {
+        return name
+      }
+      if (key === 'className') {
+        return className
+      }
+      if (!name || key === '__proto__' || typeof key === 'symbol' || key === '$typeof') {
+        return Reflect.get(_, key)
+      }
+      // auto convert variables to plain
+      if (key[0] === '$') {
+        key = key.slice(1)
+      }
+      if (!themeManager) {
+        return theme[key]
+      }
+      if (state) {
+        if (state.current.isRendering && !state.current.keys.has(key)) {
+          state.current.keys.add(key)
+          if (process.env.NODE_ENV === 'development' && debugProp === 'verbose') {
+            // eslint-disable-next-line no-console
+            console.log('  🔸 tracking theme', key)
+          }
+        }
+      }
+      return themeManager.getValue(key)
+    },
+  })
+}
+
+const GetThemeManager = Symbol()
+
+export const getThemeManager = (theme: any): ThemeManager | undefined => {
+  if (!theme) return
+  return theme[GetThemeManager]
+}
+
+export const useThemeName = (opts?: { parent?: true }) => {
+  if (isRSC) {
+    const config = getConfig()
+    return config.defaultTheme || 'light'
+  }
+  const parent = useContext(ThemeManagerContext)
+  const [name, setName] = useState(parent?.name || '')
+
+  useIsomorphicLayoutEffect(() => {
+    if (!parent) return
+    return parent.onChangeTheme((next, manager) => {
+      const name = opts?.parent ? manager.parentName || next : next
+      if (!name) return
+      setName(name)
+    })
+  }, [parent])
+
+  return name
+}
+
+export const useDefaultThemeName = () => {
+  return useContext(ThemeContext)?.defaultTheme
+}
+
+export const activeThemeManagers = new Set<ThemeManager>()
+
+export const useChangeThemeEffect = (
+  name?: string | null,
+  componentName?: string,
+  props?: ThemeProps,
+  forceUpdateProp?: any,
+  uuid?: Object
+): {
+  themes: Record<string, ThemeParsed>
+  themeManager: ThemeManager | null
+  name: string
+  theme: ThemeParsed | null
+  className?: string
+} => {
+  const config = getConfig()
+
+  if (process.env.NODE_ENV === 'development') {
+    if (!config) {
+      throw new Error(
+        `Missing tamagui config, you either have a duplicate config, or haven't set it up. Be sure createTamagui is called before renderig.`
+      )
+    }
+  }
+
+  const { themes } = config
+
+  if (isRSC) {
+    // we need context working for this to work well
+    const parentManager = new ThemeManager('light', 'light', themes.light)
+    const next = parentManager.getNextTheme({
+      name,
+      componentName,
+      themes,
+      reset: props?.reset,
+    })
+    return {
+      ...next,
+      themes,
+      themeManager: null,
+    }
+  }
+
+  const debug = props && props['debug']
+  const parentManager = useContext(ThemeManagerContext) || emptyManager
+  const reset = props?.reset || false
+  const getThemeProps: GetNextThemeProps = {
+    name,
+    componentName,
+    themes,
+    reset,
+  }
+  const next = parentManager.getNextTheme(getThemeProps, debug)
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const forceUpdate = forceUpdateProp || useForceUpdate()
+
+  const themeManager = useConstant(() => {
+    return new ThemeManager(next.name, next.className, next.theme, parentManager, reset)
+  })
+
+  // not concurrent safe but fixes native (but breaks SSR and not needed on web (i think) so leave only on native)
+  let didChange = false
+  if (process.env.TAMAGUI_TARGET === 'native') {
+    didChange = Boolean(
+      next?.name !== themeManager.name || next?.className !== themeManager.className
+    )
+    if (didChange) {
+      themeManager.update(next, false, false)
+    }
+  }
+
+  if (!isServer) {
+    useLayoutEffect(() => {
+      themeManager.update(next, didChange)
+      activeThemeManagers.add(themeManager)
+
+      const disposeParentOnChange = parentManager.onChangeTheme(() => {
+        const next = parentManager.getNextTheme(getThemeProps, debug)
+        if (!next) return
+        if (themeManager.update(next)) {
+          if (uuid && !themeManager.isTracking(uuid)) {
+            // no need to re-render if not tracking any keys
+            return
+          }
+          if (process.env.NODE_ENV === 'development' && debug) {
+            // eslint-disable-next-line no-console
+            console.log('Changed theme', componentName, next, { props })
+          }
+          forceUpdate()
+        }
+      })
+
+      return () => {
+        activeThemeManagers.delete(themeManager)
+        disposeParentOnChange()
+      }
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [didChange, themes, next?.name, next?.className, componentName, debug])
+  }
+
+  return {
+    ...(parentManager && {
+      name: parentManager.name,
+      theme: parentManager.theme,
+    }),
+    ...next,
+    className: next.className === parentManager.className ? undefined : next.className,
+    themes,
+    themeManager,
+  }
+}

package/src/hooks/useUnmountEffect.ts

@@ -0,0 +1,5 @@
+import { useEffect } from 'react'
+
+export function useUnmountEffect(callback: () => void) {
+  return useEffect(() => () => callback(), [])
+}