@tamagui/core 1.0.1-beta.99 → 1.0.1-rc.0

package/src/hooks/useMedia.tsx

@@ -0,0 +1,265 @@
+import { useDeferredValue, 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 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 = () => mediaState
+
+// 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) =>
+  // + 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)
+  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[key] = next
+      updateCurrentState()
+      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
+  }, [])
+}
+
+const currentStateListeners = new Set<any>()
+function updateCurrentState() {
+  currentStateListeners.forEach((cb) => cb(mediaState))
+}
+function subscribe(subscriber: any) {
+  currentStateListeners.add(subscriber)
+  return () => currentStateListeners.delete(subscriber)
+}
+
+type MediaKeysState = {
+  [key: string]: any
+}
+
+export function useMedia(): {
+  [key in MediaQueryKey]: boolean
+} {
+  const keys = useSafeRef<MediaKeysState>({ prev: initState })
+  const stateSync = useSyncExternalStore<MediaQueryState>(
+    subscribe,
+    () => {
+      const { prev, ...curKeys } = keys.current
+      const shouldUpdate = !prev || Object.keys(curKeys).some((k) => mediaState[k] !== prev[k])
+      if (shouldUpdate) {
+        const next = { ...mediaState }
+        keys.current.prev = next
+        return next
+      }
+      return prev
+    },
+    () => initState
+  )
+  const state = useDeferredValue(stateSync)
+
+  return useMemo(() => {
+    return new Proxy(state, {
+      get(_, key: string) {
+        if (!keys.current[key]) {
+          keys.current[key] = true
+        }
+        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, 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,243 @@
+/* eslint-disable no-console */
+import { isClient, isRSC, isServer, isWeb } from '@tamagui/constants'
+import { useContext, useLayoutEffect, 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'
+
+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 => {
+  if (isRSC) {
+    return getDefaultThemeProxied()
+  }
+
+  const { name, theme, themeManager, className, isNewTheme } = useChangeThemeEffect(props)
+
+  if (process.env.NODE_ENV === 'development') {
+    // ensure we aren't creating too many ThemeManagers
+    if (isWeb && isNewTheme && className === themeManager?.parentManager?.state.className) {
+      console.error(`Should always change, duplicating ThemeMananger bug`, themeManager)
+      // eslint-disable-next-line no-debugger
+      debugger
+    }
+    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 (!theme) {
+    if (process.env.NODE_ENV === 'development') {
+      console.warn('No theme found', name, props, themeManager)
+    }
+    return getDefaultThemeProxied()
+  }
+
+  return useMemo(() => {
+    return getThemeProxied({
+      isNewTheme,
+      theme,
+      name,
+      className,
+      themeManager,
+    })
+  }, [theme, isNewTheme, name, className, themeManager])
+}
+
+function getThemeProxied({
+  theme,
+  name,
+  className,
+  themeManager,
+  isNewTheme,
+}: {
+  theme: any
+  name: string
+  className?: string
+  themeManager?: ThemeManager | null
+  isNewTheme?: boolean
+}) {
+  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
+      } else if (key === GetThemeManager) {
+        return themeManager
+      } else if (key === GetIsNewTheme) {
+        return isNewTheme
+      } else if (key === 'name') {
+        return name
+      } else if (key === 'className') {
+        return className
+      } else 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]
+      }
+      return themeManager.getValue(key)
+    },
+  })
+}
+
+const GetThemeManager = Symbol()
+const GetIsNewTheme = Symbol()
+
+export const getThemeManager = (theme: any): ThemeManager | undefined => theme?.[GetThemeManager]
+export const getThemeIsNewTheme = (theme: any): ThemeManager | undefined => theme?.[GetIsNewTheme]
+
+export const activeThemeManagers = new Set<ThemeManager>()
+
+export const useChangeThemeEffect = (props: ThemeProps, root = false): 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 new Error(`Disable topmost`)
+    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) {
+    useLayoutEffect(() => {
+      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(() => {
+        if (!isNewTheme && !isWeb) {
+          setThemeState({
+            ...themeState,
+            state: { ...themeManager.state },
+            isNewTheme: false,
+          })
+        } else {
+          updateState()
+        }
+      })
+      return () => {
+        activeThemeManagers.delete(themeManager)
+        disposeChangeListener?.()
+      }
+    }, [disable, state, isNewTheme, debug])
+  }
+
+  // prettier-ignore
+  if (process.env.NODE_ENV === 'development' && debug) console.log('useTheme.render isNewTheme', isNewTheme, props, themeManager.state.name, parentManager?.state.name)
+
+  // this seems unnecessary
+  if (hasNoThemeUpdatingProps(props) || (!mounted && parentManager)) {
+    if (!parentManager) throw `impossible`
+    // prettier-ignore
+    if (process.env.NODE_ENV === 'development' && props.debug === 'verbose') console.log('useTheme hasNoThemeUpdatingProps', parentManager.state)
+    return {
+      ...parentManager.state,
+      themeManager: parentManager,
+      isNewTheme: false,
+    }
+  }
+
+  // run inline in render
+  updateState()
+
+  return {
+    ...state,
+    isNewTheme,
+    themeManager,
+  }
+
+  function createState(prev?: State) {
+    const _ = new ThemeManager(props, root ? 'root' : parentManager)
+    const isNewTheme = _ !== parentManager
+    // prettier-ignore
+    if (process.env.NODE_ENV === 'development' && debug) [console.groupCollapsed('useTheme create() isNewTheme', isNewTheme), console.log('parent.state.name', parentManager?.state.name, '\n', 'props', props, '\n', isClient ? parentManager : '', 'getState', isNewTheme && isClient ? _.getState(props) : '', '\n', 'state', isClient ? { ..._.state } : ''), console.groupEnd()]
+    // only inverse relies on this for ssr
+    const mounted = !props.inverse ? true : root || prev?.mounted || false
+    return {
+      // ThemeManager returns parentManager if no change
+      isNewTheme,
+      state: { ..._.state },
+      themeManager: _,
+      mounted,
+    }
+  }
+
+  function updateState() {
+    const next = themeManager.getState(props, parentManager)
+    const shouldChange = themeManager.getStateShouldChange(next, isNewTheme ? state : null)
+    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
+}

package/src/index.ts

@@ -0,0 +1,73 @@
+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 { 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/ButtonNestingContext'
+
+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/useThemeName'
+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/ThemeProvider'
+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'

package/src/inject-styles.ts

@@ -0,0 +1,20 @@
+// for vite dev mode
+
+const stylesheets: Record<string, HTMLElement> = {}
+
+interface InjectStylesOptions {
+  filePath: string
+  css: string
+}
+
+export const injectStyles = ({ filePath, css }: InjectStylesOptions) => {
+  let stylesheet = stylesheets[filePath]
+  if (!stylesheet) {
+    const styleEl = document.createElement('style')
+    styleEl.setAttribute('data-file', filePath)
+    styleEl.setAttribute('type', 'text/css')
+    stylesheet = stylesheets[filePath] = styleEl
+    document.head.appendChild(styleEl)
+  }
+  stylesheet.innerHTML = css
+}