@tamagui/core 1.2.4 → 1.2.6

package/src/helpers/themes.ts

@@ -1,67 +0,0 @@
-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

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

package/src/helpers/useShallowSetState.tsx

@@ -1,41 +0,0 @@
-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

@@ -1,11 +0,0 @@
-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

@@ -1,7 +0,0 @@
-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

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

package/src/hooks/useId.tsx

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

package/src/hooks/useIsTouchDevice.tsx

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

package/src/hooks/useMedia.tsx

@@ -1,298 +0,0 @@
-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

@@ -1,45 +0,0 @@
-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

@@ -1,12 +0,0 @@
-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

@@ -1,49 +0,0 @@
-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,
-  }
-}