@tamagui/core 1.0.1-beta.192 → 1.0.1-beta.194

package/src/helpers/getStylesAtomic.ts

@@ -4,11 +4,11 @@
  */
 
 import { StyleObject, simpleHash } from '@tamagui/helpers'
-import hyphenateStyleName from 'hyphenate-style-name'
-import type { TextStyle, ViewStyle } from 'react-native'
+import type { TextStyle, ViewStyle } from '@tamagui/types-react-native'
 
 import { getConfig } from '../config'
 import { TamaguiInternalConfig } from '../types'
+import { Style, cache } from './cache'
 import { defaultOffset } from './expandStyles'
 import { normalizeValueWithProperty } from './normalizeValueWithProperty.js'
 import { PseudoDescriptor, pseudoDescriptors } from './pseudoDescriptors'
@@ -166,31 +166,23 @@ const mapTransform = (transform) => {
   }
 }
 
-// cache
-type Value = Object | Array<any> | string | number
-export type Style = { [key: string]: Value }
-class Cache {
-  values: Record<string, any> = {}
-
-  get(key: string, valStr: string) {
-    return this.values[key]?.[valStr]
-  }
-
-  set(key: string, valStr: string, object: any) {
-    this.values[key] ??= {}
-    this.values[key][valStr] = object
-  }
-}
-const cache = new Cache()
-
 function createDeclarationBlock(style: Style, important = false) {
-  let declarations = ''
+  let next = ''
   for (const key in style) {
     const prop = hyphenateStyleName(key)
     const value = style[key]
-    declarations += `${prop}:${value}${important ? ` !important` : ''};`
+    next += `${prop}:${value}${important ? ` !important` : ''};`
   }
-  return `{${declarations}}`
+  return `{${next}}`
+}
+
+const hcache = {}
+const toHyphenLower = (match: string) => `-${match.toLowerCase()}`
+const hyphenateStyleName = (key: string) => {
+  let val = hcache[key]
+  if (val) return val
+  hcache[key] = val = key.replace(/[A-Z]/g, toHyphenLower)
+  return val
 }
 
 const pseudoSelectorPrefixes = (() => {
@@ -239,7 +231,6 @@ function createAtomicRules(
     }
 
     // Polyfill for additional 'pointer-events' values
-    // See d13f78622b233a0afc0c7a200c0a0792c8ca9e58
     case 'pointerEvents': {
       let finalValue = value
       if (value === 'auto' || value === 'box-only') {
@@ -258,17 +249,6 @@ function createAtomicRules(
       break
     }
 
-    // Polyfill for draft spec
-    // https://drafts.csswg.org/css-scrollbars-1/
-    case 'scrollbarWidth': {
-      if (value === 'none') {
-        rules.push(`${selector}::-webkit-scrollbar{display:none}`)
-      }
-      const block = createDeclarationBlock({ scrollbarWidth: value }, important)
-      rules.push(`${selector}${block}`)
-      break
-    }
-
     default: {
       const block = createDeclarationBlock({ [property]: value }, important)
       rules.push(`${selector}${block}`)

package/src/helpers/getVariantExtras.tsx

@@ -1,6 +1,7 @@
 import { getConfig } from '../config'
 import { GenericFonts } from '../types'
 import { LanguageContextType } from '../views/FontLanguage.types'
+import { createProxy } from './createProxy'
 
 const extrasCache = new WeakMap()
 
@@ -30,7 +31,7 @@ export function getVariantExtras(
     // we avoid passing in default props for media queries because that would confuse things like SizableText.size:
     props: avoidDefaultProps
       ? props
-      : new Proxy(props, {
+      : createProxy(props, {
           // handles shorthands
           get(target, key) {
             const shorthand = conf.inverseShorthands[key as any]

package/src/helpers/insertStyleRule.tsx

@@ -4,8 +4,8 @@
 
 import type { StyleObject } from '@tamagui/helpers'
 
-const allSelectors = {}
-const allRules = {}
+const allSelectors: Record<string, string> = {}
+const allRules: Record<string, boolean | string[]> = {}
 export const insertedTransforms = {}
 
 export const getAllSelectors = () => allSelectors
@@ -84,7 +84,7 @@ export function updateInserted() {
         const isTransform = identifier.startsWith('_transform')
         const shouldInsert = isTransform ? addTransform(identifier, cssRule.cssText, cssRule) : true
         if (shouldInsert) {
-          allSelectors[identifier] = process.env.NODE_ENV === 'development' ? cssRule.cssText : true
+          allSelectors[identifier] = cssRule.cssText
         }
       }
     }
@@ -134,13 +134,21 @@ export type PartialStyleObject = Pick<StyleObject, 'identifier' | 'property' | '
 export type RulesToInsert = PartialStyleObject[]
 
 export function insertStyleRules(rulesToInsert: RulesToInsert) {
-  // // pointerevents can have more than one, others could to needs some refactor
+  if (isClient && !sheet) {
+    if (process.env.NODE_ENV === 'development') {
+      // eslint-disable-next-line no-console
+      console.warn(`Missing sheet`)
+    }
+    return
+  }
   for (const { identifier, rules } of rulesToInsert) {
-    if (allSelectors[identifier] || !sheet) return
-    allSelectors[identifier] = process.env.NODE_ENV === 'development' ? rules : true
+    if (allSelectors[identifier]) continue
+    allSelectors[identifier] = process.env.NODE_ENV === 'development' ? rules.join('\n') : ''
     updateRules(identifier, rules)
-    for (const rule of rules) {
-      sheet.insertRule(rule, sheet.cssRules.length)
+    if (sheet) {
+      for (const rule of rules) {
+        sheet.insertRule(rule, sheet.cssRules.length)
+      }
     }
   }
 }

package/src/helpers/matchMedia.ts

@@ -6,6 +6,7 @@ function matchMediaFallback(query: string): MediaQueryList {
     !process.env.IS_STATIC &&
     process.env.TAMAGUI_TARGET !== 'web'
   ) {
+    // eslint-disable-next-line no-console
     console.log('warning: matchMedia not loading! Native not picking up .native.js files?')
   }
   return {

package/src/helpers/mergeTransform.ts

@@ -1,4 +1,4 @@
-import type { ViewStyle } from 'react-native'
+import type { ViewStyle } from '@tamagui/types-react-native'
 
 export const mergeTransform = (obj: ViewStyle, key: string, val: any, backwards = false) => {
   obj.transform ||= []

package/src/helpers/normalizeValueWithProperty.ts

@@ -3,11 +3,15 @@
  * Copyright (c) Nicolas Gallagher licensed under the MIT license.
  */
 
+import { getAllSelectors } from './insertStyleRule'
 import { normalizeColor } from './normalizeColor'
 
 const cache = {}
 
 export function normalizeValueWithProperty(value: any, property?: string): any {
+  if (property && unitlessNumbers[property]) {
+    return value
+  }
   const cached = cache[value]
   if (cached) {
     return cached
@@ -78,3 +82,29 @@ const unitlessNumbers = {
   scaleZ: true,
   shadowOpacity: true,
 }
+
+// getting real values for colors for animations (reverse mapped from CSS)
+// this isn't beautiful, but will do relatively fine performance for now
+const rcache = {}
+export function reverseMapClassNameToValue(key: string, className: string) {
+  const selectors = getAllSelectors()
+  const cssRule = selectors[className]
+  if (rcache[cssRule]) return rcache[cssRule]
+  if (!cssRule) {
+    return
+  }
+  const cssVal = cssRule.replace(/.*:/, '').replace(/;.*/, '')
+  let res: any
+  if (unitlessNumbers[key]) {
+    res = +cssVal
+  } else if (cssVal.endsWith('px')) {
+    res = +cssVal.replace('px', '')
+  } else {
+    res = cssVal
+  }
+  if (typeof res === 'string') {
+    res = res.trim()
+  }
+  rcache[cssRule] = res
+  return res
+}

package/src/helpers/proxyThemeVariables.tsx

@@ -1,12 +1,7 @@
+import { createProxy } from './createProxy'
+
 export function proxyThemeVariables<A extends Object>(obj: A): A {
-  if (process.env.NODE_ENV === 'development') {
-    if (!obj || typeof obj !== 'object') {
-      // eslint-disable-next-line no-console
-      console.trace(`Empty value for proxyThemeVariables, broken config`, obj)
-      return obj
-    }
-  }
-  return new Proxy<A>(obj || {}, {
+  return createProxy<A>(obj || {}, {
     has(target, key) {
       return Reflect.has(target, removeStarting$(key))
     },

package/src/helpers/useShallowSetState.tsx

@@ -3,7 +3,6 @@ import React, { useCallback } from 'react'
 export function useShallowSetState<State extends Object>(
   setter: React.Dispatch<React.SetStateAction<State>>
 ) {
-  // eslint-disable-next-line react-hooks/rules-of-hooks
   return useCallback(
     (next: Partial<State>) => {
       setter((prev) => {

package/src/hooks/getThemeUnwrapped.tsx

@@ -1,8 +1,7 @@
 export const getThemeUnwrapped = (theme: any) => {
   if (!theme) return null
   const first = theme[GetThemeUnwrapped]
-  if (first) return first[GetThemeUnwrapped] || first
-  return theme
+  return first?.[GetThemeUnwrapped] || first || theme
 }
 
 export const GetThemeUnwrapped = Symbol()

package/src/hooks/useElementLayout.tsx

@@ -0,0 +1,90 @@
+import { useIsomorphicLayoutEffect } from '@tamagui/constants'
+import { getBoundingClientRect } from '@tamagui/react-native-use-responder-events'
+import { useEvent } from '@tamagui/use-event'
+import { RefObject } from 'react'
+
+const LayoutHandlers = new WeakMap<Element, Function>()
+
+export type LayoutValue = {
+  x: number
+  y: number
+  width: number
+  height: number
+  left: number
+  top: number
+}
+
+export type LayoutEvent = {
+  nativeEvent: {
+    layout: LayoutValue
+    target: any
+  }
+  timeStamp: number
+}
+
+let resizeObserver: ResizeObserver | null = null
+
+if (typeof window !== 'undefined' && 'ResizeObserver' in window) {
+  resizeObserver = new ResizeObserver((entries) => {
+    for (const { target } of entries) {
+      const onLayout = LayoutHandlers.get(target)
+      if (typeof onLayout !== 'function') return
+      measureLayout(target as HTMLElement, null, (x, y, width, height, left, top) => {
+        onLayout({
+          nativeEvent: {
+            layout: { x, y, width, height, left, top },
+            target,
+          },
+          timeStamp: Date.now(),
+        })
+      })
+    }
+  })
+}
+
+export const getRect = (node: HTMLElement) => {
+  const rect = getBoundingClientRect(node)
+  if (!rect) return
+  const { x, y, top, left } = rect
+  return { x, y, width: node.offsetWidth, height: node.offsetHeight, top, left }
+}
+
+export const measureLayout = (
+  node: HTMLElement,
+  relativeTo: HTMLElement | null,
+  callback: Function
+) => {
+  const relativeNode = relativeTo || node?.parentNode
+  if (relativeNode instanceof HTMLElement) {
+    setTimeout(() => {
+      const relativeRect = getBoundingClientRect(relativeNode)!
+      const { height, left, top, width } = getRect(node)!
+      const x = left - relativeRect.left
+      const y = top - relativeRect.top
+      callback(x, y, width, height, left, top)
+    }, 0)
+  }
+}
+
+const idFn = () => {}
+
+export function useElementLayout(
+  ref: RefObject<Element>,
+  onLayout?: ((e: LayoutEvent) => void) | null
+) {
+  const hasLayoutEvent = !!onLayout
+  const onLayoutEvent = useEvent(onLayout || idFn)
+
+  // Observing is done in a separate effect to avoid this effect running
+  // when 'onLayout' changes.
+  useIsomorphicLayoutEffect(() => {
+    if (!resizeObserver || !hasLayoutEvent) return
+    const node = ref.current
+    if (!node) return
+    LayoutHandlers.set(node, onLayoutEvent)
+    resizeObserver.observe(node)
+    return () => {
+      resizeObserver?.unobserve(node)
+    }
+  }, [ref, hasLayoutEvent])
+}

package/src/hooks/useIsTouchDevice.tsx

@@ -1,20 +1,6 @@
-import { isServer, isTouchable, isWeb, useIsomorphicLayoutEffect } from '@tamagui/constants'
-import { useState } from 'react'
-
-// ssr friendly
+import { isTouchable, isWeb } from '@tamagui/constants'
+import { useDidFinishSSR } from '@tamagui/use-did-finish-ssr'
 
 export const useIsTouchDevice = () => {
-  const [touchOnly, setTouchOnly] = useState(false)
-
-  if (isWeb && !isServer) {
-    // only ever false on web SSR (env), so run effect conditionally
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    useIsomorphicLayoutEffect(() => {
-      if (isTouchable) {
-        setTouchOnly(true)
-      }
-    }, [])
-  }
-
-  return touchOnly
+  return !isWeb ? true : useDidFinishSSR() ? isTouchable : false
 }

package/src/hooks/useMedia.tsx

@@ -1,7 +1,8 @@
 import { useIsomorphicLayoutEffect } from '@tamagui/constants'
-import { startTransition, useEffect, useMemo, useState } from 'react'
+import { MutableRefObject, useEffect, useMemo, useState } from 'react'
 
 import { getConfig } from '../config'
+import { createProxy } from '../helpers/createProxy'
 import { matchMedia } from '../helpers/matchMedia'
 import {
   MediaQueries,
@@ -15,7 +16,7 @@ import { useSafeRef } from './useSafeRef'
 export const mediaState: MediaQueryState =
   // development time safeguard
   process.env.NODE_ENV === 'development'
-    ? new Proxy(
+    ? createProxy(
         {},
         {
           get(target, key) {
@@ -30,20 +31,20 @@ export const mediaState: MediaQueryState =
 
 type MediaListener = (next: boolean) => void
 
-const mediaQueryListeners: { [key: string]: Set<MediaListener> } = {}
+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`)
   }
-  mediaQueryListeners[key] = mediaQueryListeners[key] || new Set()
-  mediaQueryListeners[key].add(cb)
+  listeners[key] = listeners[key] || new Set()
+  listeners[key].add(cb)
   return () => removeMediaQueryListener(key, cb)
 }
 
 export function removeMediaQueryListener(key: MediaQueryKey, cb: MediaListener) {
-  mediaQueryListeners[key]?.delete(cb)
+  listeners[key]?.delete(cb)
 }
 
 export const mediaQueryConfig: MediaQueries = {}
@@ -53,16 +54,17 @@ export const getMedia = () => {
 }
 
 // for SSR capture it at time of startup
-let currentMediaState: MediaQueryState | null
-let initialMediaState: MediaQueryState | null
-
+let curState: MediaQueryState
+let initState: MediaQueryState
 export const getInitialMediaState = () => {
-  if (getConfig().disableSSR) {
-    return currentMediaState || {}
-  }
-  return initialMediaState || {}
+  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) => {
@@ -72,8 +74,9 @@ export const configureMedia = (config: TamaguiInternalConfig) => {
     mediaState[key] = mediaQueryDefaultActive?.[key] || false
   }
   Object.assign(mediaQueryConfig, media)
-  currentMediaState = { ...mediaState }
-  initialMediaState = currentMediaState
+  curState = { ...mediaState }
+  initState = curState
+  mediaKeysOrdered = Object.keys(media)
   if (config.disableSSR) {
     setupMediaListeners()
   }
@@ -101,40 +104,34 @@ function setupMediaListeners() {
   // hmr, undo existing before re-binding
   unlisten()
 
-  // theoretically this should make media reactions smoother but potentially delayed?
-  // but i believe consistent, so that's a nicer default (we'll see)
-  startTransition(() => {
-    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))
+  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()
+    update()
 
-      function update() {
-        const next = !!getMatch().matches
-        if (next === mediaState[key]) return
-        mediaState[key] = next
-        currentMediaState = { ...mediaState }
-        const listeners = mediaQueryListeners[key]
-        if (listeners?.size) {
-          listeners.forEach((cb) => cb(next))
-        }
+    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 useMediaQueryListeners(config: TamaguiInternalConfig) {
-  if (config.disableSSR) {
-    return
-  }
+export function useMediaListeners(config: TamaguiInternalConfig) {
+  if (config.disableSSR) return
   useEffect(() => {
     setupMediaListeners()
     return unlisten
@@ -144,14 +141,14 @@ export function useMediaQueryListeners(config: TamaguiInternalConfig) {
 export function useMedia(): {
   [key in MediaQueryKey]: boolean
 } {
-  const [state, setState] = useState<MediaQueryState>(initialMediaState || {})
   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 { ...mediaState }
+          return getMediaState({ ...mediaState }, keys)
         }
       }
       return prev
@@ -159,34 +156,27 @@ export function useMedia(): {
   }
 
   useIsomorphicLayoutEffect(() => {
-    const disposes: Function[] = Object.keys(keys.current).map((key) =>
+    updateState()
+    const disposers = Object.keys(keys.current).map((key) =>
       addMediaQueryListener(key, updateState)
     )
-    updateState()
     return () => {
-      disposes.forEach((cb) => cb())
+      disposers.forEach((cb) => cb())
     }
-  })
+  }, [keys.current])
 
-  return useMemo(
-    () =>
-      new Proxy(state, {
-        get(_, key: string) {
-          if (process.env.NODE_ENV === 'development') {
-            if (!currentMediaState) {
-              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]
-  )
+  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)
+    },
+  })
 }
 
 /**
@@ -205,44 +195,48 @@ export function useMediaPropsActive<A extends Object>(
   const media = useMedia()
 
   return useMemo(() => {
-    const evaluated = {} as A
-    const lastSetImportanceForKey = {}
+    const next = {} as A
+    const importancesUsed = {}
     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]) {
+        if (!media[key.slice(1)]) {
           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)
+          const subKeys = Object.keys(val)
+          for (let j = subKeys.length; j--; j >= 0) {
+            const subKey = subKeys[j]
+            mergeMediaByImportance(next, subKey, val[subKey], importancesUsed)
           }
         }
       } else {
-        update(key, val)
+        mergeMediaByImportance(next, key, val, importancesUsed)
       }
     }
 
-    return evaluated
+    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()
 }