@tamagui/core 1.0.1-beta.21 → 1.0.1-beta.211

package/src/hooks/useMedia.tsx

@@ -0,0 +1,265 @@
+import { useIsomorphicLayoutEffect } from '@tamagui/constants'
+import { MutableRefObject, useEffect, useMemo, useState } 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 const mediaState: MediaQueryState =
+  // development time 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)
+
+type MediaListener = (next: boolean) => void
+
+const listeners: { [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`)
+  }
+  listeners[key] = listeners[key] || new Set()
+  listeners[key].add(cb)
+  return () => removeMediaQueryListener(key, cb)
+}
+
+export function removeMediaQueryListener(key: MediaQueryKey, cb: MediaListener) {
+  listeners[key]?.delete(cb)
+}
+
+export const mediaQueryConfig: MediaQueries = {}
+
+export const getMedia = () => {
+  return mediaState
+}
+
+// for SSR capture it at time of startup
+let curState: MediaQueryState
+let initState: MediaQueryState
+export const getInitialMediaState = () => {
+  return (getConfig().disableSSR ? curState : initState) || {}
+}
+
+let mediaKeysOrdered: string[]
+export const getMediaKeyImportance = (key: string) =>
+  // + 2 because we set base usedKeys=1 in getSplitStyles and all media go above 1
+  mediaKeysOrdered.indexOf(key[0] === '$' ? key.slice(1) : 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
+  }
+  Object.assign(mediaQueryConfig, media)
+  curState = { ...mediaState }
+  initState = curState
+  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[key] = next
+      curState = { ...mediaState }
+      const cur = listeners[key]
+      if (cur?.size) {
+        cur.forEach((cb) => cb(next))
+      }
+    }
+  }
+}
+
+export function useMediaListeners(config: TamaguiInternalConfig) {
+  if (config.disableSSR) return
+  useEffect(() => {
+    setupMediaListeners()
+    return unlisten
+  }, [])
+}
+
+export function useMedia(): {
+  [key in MediaQueryKey]: boolean
+} {
+  const keys = useSafeRef({} as Record<string, boolean>)
+  const [state, setState] = useState<MediaQueryState>(() => getMediaState(initState || {}, keys))
+
+  function updateState() {
+    setState((prev) => {
+      for (const key in keys.current) {
+        if (prev[key] !== mediaState[key]) {
+          return getMediaState({ ...mediaState }, keys)
+        }
+      }
+      return prev
+    })
+  }
+
+  useIsomorphicLayoutEffect(() => {
+    updateState()
+    const disposers = Object.keys(keys.current).map((key) =>
+      addMediaQueryListener(key, updateState)
+    )
+    return () => {
+      disposers.forEach((cb) => cb())
+    }
+  }, [keys.current])
+
+  return state
+}
+
+function getMediaState(state: MediaQueryState, keys: MutableRefObject<Record<string, boolean>>) {
+  return new Proxy(state, {
+    get(_, key: string) {
+      if (!keys.current[key]) {
+        keys.current[key] = true
+      }
+      return Reflect.get(state, key)
+    },
+  })
+}
+
+/**
+ * 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 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] === '$') {
+        if (!media[key.slice(1)]) {
+          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, subKey, val[subKey], importancesUsed)
+          }
+        }
+      } else {
+        mergeMediaByImportance(next, key, val, importancesUsed)
+      }
+    }
+
+    return next
+  }, [media, props])
+}
+
+export function mergeMediaByImportance(
+  onto: Record<string, any>,
+  key: string,
+  value: any,
+  importancesUsed: Record<string, number>
+) {
+  const importance = getMediaKeyImportance(key)
+  if (importancesUsed[key] > importance) {
+    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,48 @@
+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>>()
+
+  const raw: Raw<T> =
+    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
+        },
+      },
+    })
+
+  raw.hold = true
+  Promise.resolve().then(() => {
+    raw.hold = false
+  })
+  raw.cur = raw.next
+
+  useIsomorphicLayoutEffect(() => {
+    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/useTheme.tsx

@@ -0,0 +1,300 @@
+import { isRSC, isServer, useIsomorphicLayoutEffect } from '@tamagui/constants'
+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 { ThemeContext } from '../contexts/ThemeContext'
+import { areEqualSets } from '../helpers/areEqualSets'
+import { createProxy } from '../helpers/createProxy'
+import {
+  GetNextThemeProps,
+  ThemeManager,
+  ThemeManagerContext,
+  emptyManager,
+} from '../helpers/ThemeManager'
+import { ThemeName, ThemeParsed } from '../types'
+import { GetThemeUnwrapped } from './getThemeUnwrapped'
+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[Object.keys(themes)[0]]
+  }
+
+  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 createProxy(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 function useThemeName(opts?: { parent?: true }): ThemeName {
+  if (isRSC) {
+    const config = getConfig()
+    return config.themes[Object.keys(config.themes)[0]] as any
+  }
+  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 rendering.`
+      )
+    }
+  }
+
+  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 = useMemo(() => {
+    return new ThemeManager(next.name, next.className, next.theme, parentManager, reset)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  // 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/index.ts

@@ -0,0 +1,74 @@
+export * from './Tamagui'
+export * from './createComponent'
+export * from './createShorthands'
+export * from './createTheme'
+export * from './createTamagui'
+export * from './createFont'
+export * from './createTokens'
+export * from './createVariable'
+export * from './createVariables'
+export * from './insertFont'
+export * from './addTheme'
+export * from './updateTheme'
+export * from './styled'
+export * from './types'
+export * from './setupReactNative'
+
+// for type portability
+export type { RNWTextProps, RNWViewProps } from './types-rnw'
+export { getHasConfigured, getConfig, getThemes, getTokens, onConfiguredOnce } from './config'
+
+export * from './constants/constants'
+
+export * from './helpers/useShallowSetState'
+export * from './helpers/getVariantExtras'
+export * from './helpers/getAnimationDriver'
+export * from './helpers/getExpandedShorthands'
+export * from './helpers/getSize'
+export * from './helpers/getSplitStyles'
+export * from './helpers/getStylesAtomic'
+export * from './helpers/pseudoDescriptors'
+export * from './helpers/mergeProps'
+export * from './helpers/expandStyles'
+export * from './helpers/isTamaguiElement'
+export * from './helpers/isTamaguiComponent'
+export * from './helpers/matchMedia'
+export * from './helpers/themeable'
+export * from './helpers/withStaticProperties'
+
+export * from './contexts/ButtonInsideButtonContext'
+
+export * from './hooks/useId'
+export * from './hooks/useIsTouchDevice'
+
+export {
+  configureMedia,
+  getMedia,
+  mediaState,
+  useMedia,
+  useMediaPropsActive,
+  mediaObjectToString,
+  addMediaQueryListener,
+  removeMediaQueryListener,
+  mediaQueryConfig,
+} from './hooks/useMedia'
+export * from './hooks/useTheme'
+export * from './hooks/useSafeRef'
+
+export * from './views/Slot'
+export * from './views/Stack'
+export * from './views/Text'
+export * from './contexts/TextAncestorContext'
+export * from './views/Theme'
+export * from './views/ThemeInverse'
+export * from './views/ThemeProvider'
+export * from './views/ThemeReset'
+export * from './views/FontLanguage'
+export * from './views/TamaguiProvider'
+
+export * from '@tamagui/use-force-update'
+export * from '@tamagui/use-did-finish-ssr'
+export * from '@tamagui/use-event'
+export * from '@tamagui/compose-refs'
+export * from '@tamagui/helpers'
+export * from '@tamagui/constants'