@tamagui/core 1.0.1-beta.220 → 1.0.1-beta.221

package/src/hooks/useTheme.tsx

@@ -1,124 +1,70 @@
-import { isRSC, isServer, useIsomorphicLayoutEffect } from '@tamagui/constants'
-import { useForceUpdate } from '@tamagui/use-force-update'
-import React, { useContext, useLayoutEffect, useMemo, useRef, useState } from 'react'
+/* 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 { 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 { ThemeManager, ThemeManagerState, hasNoThemeUpdatingProps } from '../helpers/ThemeManager'
+import { ThemeManagerContext } from '../helpers/ThemeManagerContext'
+import { ThemeParsed, ThemeProps } from '../types'
 import { GetThemeUnwrapped } from './getThemeUnwrapped'
-import { useServerRef } from './useServerHooks'
 
-export interface ThemeProps {
+export type ChangedThemeResponse = {
+  themes: Record<string, ThemeParsed>
+  themeManager: ThemeManager | null
+  name: string
+  isNewTheme?: boolean
+  theme?: ThemeParsed | null
   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,
-  disableTracking?: boolean
-): ThemeParsed => {
-  // TODO this can use useChangeThemeEffect almost ready
+const emptyProps = { name: null }
+export const useTheme = (props: ThemeProps = emptyProps): ThemeParsed => {
   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 = Object.keys(config.themes)[0]
+    return getThemeProxied({
+      theme: config.themes[name],
+      name,
+    })
   }
 
-  const { name, theme, themes, themeManager, className } = useChangeThemeEffect(
-    themeName,
-    componentName,
-    props,
-    forceUpdate,
-    state.current.uuid
-  )
+  const { name, theme, themes, themeManager, className, isNewTheme } = useChangeThemeEffect(props)
 
   if (process.env.NODE_ENV === 'development') {
-    if (props?.debug === 'verbose') {
-      // eslint-disable-next-line no-console
+    // 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 = { themeName, componentName, name, className, ...(isDevTools && { theme }) }
+      const logs = { ...props, 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)
+      console.warn('No theme found', name, props, themeManager)
     }
     return themes[Object.keys(themes)[0]]
   }
 
   return useMemo(() => {
     return getThemeProxied({
+      isNewTheme,
       theme,
       name,
       className,
       themeManager,
-      onStringKeyAccess(key) {
-        if (disableTracking) return
-        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)
-            }
-          }
-        }
-      },
     })
-  }, [theme, name, className, themeManager, debugProp, disableTracking])
+  }, [theme, isNewTheme, name, className, themeManager])
 }
 
 function getThemeProxied({
@@ -126,190 +72,171 @@ function getThemeProxied({
   name,
   className,
   themeManager,
-  onStringKeyAccess,
+  isNewTheme,
 }: {
   theme: any
   name: string
-  onStringKeyAccess?: (cb: string) => void
   className?: string
   themeManager?: ThemeManager | null
+  isNewTheme?: boolean
 }) {
   return createProxy(theme, {
     has(_, key) {
-      if (typeof key === 'string' && key[0] === '$') {
-        key = key.slice(1)
+      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
-      }
-      if (key === GetThemeManager) {
+      } else if (key === GetThemeManager) {
         return themeManager
-      }
-      if (key === 'name') {
+      } else if (key === GetIsNewTheme) {
+        return isNewTheme
+      } else if (key === 'name') {
         return name
-      }
-      if (key === 'className') {
+      } else if (key === 'className') {
         return className
-      }
-      if (!name || key === '__proto__' || typeof key === 'symbol' || key === '$typeof') {
+      } 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 (key[0] === '$') key = key.slice(1)
       if (!themeManager) {
         return theme[key]
       }
-      onStringKeyAccess?.(key)
       return themeManager.getValue(key)
     },
   })
 }
 
 const GetThemeManager = Symbol()
+const GetIsNewTheme = 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 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 = (
-  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
-} => {
+export const useChangeThemeEffect = (props: ThemeProps, root = false): ChangedThemeResponse => {
+  const parentManager = useContext(ThemeManagerContext)
   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 { debug } = props
+  // @ts-expect-error internal use only
+  const disable = props.disable
   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,
+      ...createState().state,
       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,
+  if (disable) {
+    if (!parentManager) throw new Error(`Disable topmost`)
+    return {
+      ...parentManager.state,
+      isNewTheme: false,
+      themes,
+      themeManager: parentManager,
+    }
   }
-  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)
-    }
+  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(() => {
-      themeManager.update(next, didChange)
+      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 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()
+      const disposeChangeListener = parentManager?.onChangeTheme(() => {
+        if (!isNewTheme && !isWeb) {
+          setThemeState({
+            ...themeState,
+            state: { ...themeManager.state },
+            isNewTheme: false,
+          })
+        } else {
+          updateState()
         }
       })
-
       return () => {
         activeThemeManagers.delete(themeManager)
-        disposeParentOnChange()
+        disposeChangeListener?.()
       }
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [didChange, themes, next?.name, next?.className, componentName, debug])
+    }, [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)) {
+    if (!parentManager) throw new Error(`Nada`)
+    return {
+      ...parentManager.state,
+      themes,
+      themeManager: parentManager,
+      isNewTheme: false,
+    }
+  }
+
+  // run inline in render
+  updateState()
+
+  if (!mounted && !parentManager) {
+    throw new Error(`Impossible`)
   }
 
   return {
-    ...(parentManager && {
-      name: parentManager.name,
-      theme: parentManager.theme,
-    }),
-    ...next,
-    className: next.className === parentManager.className ? undefined : next.className,
+    ...state,
+    isNewTheme,
     themes,
     themeManager,
+    ...(!mounted &&
+      parentManager && {
+        ...parentManager.state,
+        isNewTheme: false,
+        themeManager: parentManager,
+      }),
+  }
+
+  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() {
+    if (themeManager.getStateIfChanged(props, state, parentManager)) {
+      setThemeState(createState)
+    }
   }
 }

package/src/hooks/useThemeName.tsx

@@ -0,0 +1,25 @@
+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(() => {
+    return manager?.onChangeTheme((next, manager) => {
+      const name = opts?.parent ? manager.state.parentName || next : next
+      if (!name) return
+      setName(name)
+    })
+  }, [manager])
+
+  return name
+}

package/src/index.ts

@@ -16,7 +16,7 @@ export * from './setupReactNative'
 
 // for type portability
 export type { RNWTextProps, RNWViewProps } from './types-rnw'
-export { getHasConfigured, getConfig, getThemes, getTokens, onConfiguredOnce } from './config'
+export { getConfig, getThemes, getTokens, onConfiguredOnce } from './config'
 
 export * from './constants/constants'
 
@@ -36,7 +36,7 @@ export * from './helpers/matchMedia'
 export * from './helpers/themeable'
 export * from './helpers/withStaticProperties'
 
-export * from './contexts/ButtonInsideButtonContext'
+export * from './contexts/ButtonNestingContext'
 
 export * from './hooks/useId'
 export * from './hooks/useIsTouchDevice'
@@ -53,6 +53,7 @@ export {
   mediaQueryConfig,
 } from './hooks/useMedia'
 export * from './hooks/useTheme'
+export * from './hooks/useThemeName'
 export * from './hooks/useSafeRef'
 
 export * from './views/Slot'
@@ -60,9 +61,7 @@ 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'
 

package/src/setupReactNative.ts

@@ -1,9 +1,20 @@
-let rn
+import { StaticConfig } from './types'
 
-export function getReactNative() {
-  return rn
+export const ReactNativeStaticConfigs = new WeakMap<any, Partial<StaticConfig> | null>()
+
+export function getReactNativeConfig(Component: any) {
+  return ReactNativeStaticConfigs.get(Component)
 }
 
-export function setupReactNative(_) {
-  rn = _
+export function setupReactNative(rnExports: Record<string, any>) {
+  for (const key in rnExports) {
+    if (key[0].toLowerCase() === key[0]) continue
+    if (!rnExports[key]) continue
+    ReactNativeStaticConfigs.set(rnExports[key], {
+      isReactNative: true,
+      isText: key === 'Text' || key === 'TextInput',
+      isInput: key === 'TextInput',
+      inlineProps: key === 'Image' ? new Set(['src', 'width', 'height']) : undefined,
+    })
+  }
 }

package/src/styled.tsx

@@ -1,6 +1,5 @@
-import { getConfig } from './config'
 import { createComponent } from './createComponent'
-import { getReactNative } from './setupReactNative'
+import { ReactNativeStaticConfigs } from './setupReactNative'
 import {
   GetProps,
   GetVariantValues,
@@ -35,8 +34,6 @@ type GetVariantProps<A extends StylableComponent> =
   //   :
   A extends TamaguiComponent<any, any, any, infer V> ? V : {}
 
-let RNComponentConfigs: WeakMap<any, Partial<StaticConfig>> | null = null
-
 export function styled<
   ParentComponent extends StylableComponent,
   Variants extends VariantDefinitions<ParentComponent> | void = VariantDefinitions<ParentComponent> | void
@@ -62,21 +59,6 @@ export function styled<
   //   }
   // }
 
-  const RN = getReactNative()
-  if (RN && typeof RN === 'object' && !RNComponentConfigs) {
-    RNComponentConfigs = new WeakMap()
-    for (const key in RN) {
-      const val = RN[key]
-      if (!val) continue
-      if (key[0].toLowerCase() === key[0]) continue
-      RNComponentConfigs.set(val, {
-        isReactNative: true,
-        isText: key === 'Text' || key === 'TextInput',
-        inlineProps: key === 'Image' ? new Set(['src', 'width', 'height']) : undefined,
-      })
-    }
-  }
-
   const staticConfigProps = (() => {
     const parentStaticConfig =
       'staticConfig' in Component ? (Component.staticConfig as StaticConfig) : null
@@ -105,16 +87,15 @@ export function styled<
         Object.assign(defaultProps, defaultVariants)
       }
       const isReactNative = Boolean(
-        (RNComponentConfigs &&
-          (RNComponentConfigs.has(Component) ||
-            RNComponentConfigs.has(parentStaticConfig?.Component))) ||
+        ReactNativeStaticConfigs.has(Component) ||
+          ReactNativeStaticConfigs.has(parentStaticConfig?.Component) ||
           parentStaticConfig?.isReactNative ||
           staticExtractionOptions?.isReactNative
       )
       const isTamagui = !isReactNative && !!parentStaticConfig
 
       const Comp = isReactNative ? parentStaticConfig?.Component || Component : (Component as any)
-      const nativeConf = (isReactNative && RNComponentConfigs?.get(Comp)) || null
+      const nativeConf = (isReactNative && ReactNativeStaticConfigs.get(Comp)) || null
 
       const isText = Boolean(staticExtractionOptions?.isText || parentStaticConfig?.isText)
       const acceptsClassName = acceptsClassNameProp ?? (isTamagui || isReactNative)