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

package/src/helpers/ThemeManager.tsx

@@ -1,9 +1,9 @@
-import { createContext } from 'react'
+import { isWeb } from '@tamagui/constants'
 
 import { getThemes } from '../config'
 import { THEME_CLASSNAME_PREFIX, THEME_NAME_SEPARATOR } from '../constants/constants'
 import { getThemeUnwrapped } from '../hooks/getThemeUnwrapped'
-import { ThemeParsed, Themes } from '../types'
+import { ThemeParsed, ThemeProps } from '../types'
 
 type ThemeListener = (name: string | null, themeManager: ThemeManager) => void
 
@@ -12,216 +12,221 @@ export type SetActiveThemeProps = {
   parentManager?: ThemeManager | null
   name?: string | null
   theme?: any
+  reset?: boolean
 }
 
-export type GetNextThemeProps = {
-  themes?: Themes
-  name?: string | null
-  componentName?: string | null
-  reset?: boolean
+export type ThemeManagerState = {
+  name: string
+  theme?: ThemeParsed | null
+  className?: string
+  parentName?: string
+}
+
+const emptyState: ThemeManagerState = { name: '' }
+
+export function hasNoThemeUpdatingProps(props: ThemeProps) {
+  return !props.name && !props.componentName && !props.inverse && !props.reset
 }
 
 export class ThemeManager {
-  keys = new Map<any, Set<string>>()
-  listeners = new Map<any, Function>()
   themeListeners = new Set<ThemeListener>()
+  parentManager: ThemeManager | null = null
+  state: ThemeManagerState = emptyState
 
   constructor(
-    public name: string = '',
-    public className: string = '',
-    public theme: ThemeParsed | null = null,
-    public parentManager: ThemeManager | null = null,
-    public reset: boolean = false
+    public props: ThemeProps = {},
+    parentManager?: ThemeManager | 'root' | null | undefined
   ) {
-    // find the nearest different parentManager
-    let parent = parentManager
-    let tries = 0
-    while (true) {
-      tries++
-      if (tries > 10) {
-        throw new Error(`Nested 10 of the same theme in a row, likely error`)
+    if (parentManager === 'root') {
+      this.updateState(props, false)
+      return
+    }
+    if (!parentManager) {
+      throw new Error(`Must set up root first`)
+    }
+    // no change no props
+    if (hasNoThemeUpdatingProps(props)) {
+      return parentManager
+    }
+    if (parentManager) {
+      this.parentManager = parentManager
+    }
+    const updatedState = this.getStateIfChanged(props)
+    if (updatedState) {
+      this.state = updatedState
+      return
+    }
+    return parentManager || this
+  }
+
+  updateState(props: ThemeProps & { forceTheme?: ThemeParsed } = this.props || {}, notify = true) {
+    const shouldFlush = (() => {
+      if (props.forceTheme) {
+        this.state.theme = props.forceTheme
+        this.state.name = props.name || ''
+        return true
       }
-      if (!parent) break
-      if (parent.name === name) {
-        // go up if same
-        parent = parent.parentManager
-      } else {
-        this.parentManager = parent
-        break
+      const nextState = this.getStateIfChanged(props)
+      if (nextState) {
+        this.state = nextState
+        return true
       }
+    })()
+    if (shouldFlush) {
+      // reset any derived state
+      this.#allKeys = null
+      notify && this.notify()
+      return this.state
     }
   }
 
-  get didChangeTheme() {
-    return this.parentManager && this.name !== this.parentManager.fullName
+  getStateIfChanged(props = this.props, state = this.state, parentManager = this.parentManager) {
+    const _ =
+      getState(props, parentManager) ||
+      (process.env.TAMAGUI_TARGET === 'native' ? parentManager?.state : undefined)
+    if (!_ || !_.theme || _.theme === state.theme) {
+      return null
+    }
+    return _
   }
 
-  get parentName() {
-    return this.parentManager?.name || null
+  getState(props = this.props) {
+    return getState(props, this.parentManager)
   }
 
-  get fullName(): string {
-    return this.getNextTheme().name || this.name || ''
-    // const parentName = this.parentManager?.fullName || ''
-    // const name = this.name || ''
-    // const parts = [...new Set([...`${parentName}_${name}`.split('_')])].filter(Boolean)
-    // return parts.join('_')
+  #allKeys: Set<string> | null = null
+  get allKeys() {
+    this.#allKeys ??= new Set([
+      ...(this.parentManager?.allKeys || []),
+      ...Object.keys(this.state.theme || {}),
+    ])
+    return this.#allKeys
   }
 
   // gets value going up to parents
-  getValue(key: string) {
-    let theme = this.theme
+  getValue(key: string, state?: ThemeManagerState) {
+    let theme = (state || this.state).theme
     let manager = this as ThemeManager | null
-    while (true) {
-      if (!theme) return
+    while (theme && manager) {
       if (key in theme) {
         return theme[key]
       }
-      manager = this.parentManager
-      if (!manager || manager.theme === theme) {
-        return
-      }
-      theme = manager.theme
+      manager = manager.parentManager
+      theme = manager?.state.theme
     }
   }
 
-  isTracking(uuid: Object) {
-    return Boolean(this.keys.get(uuid)?.size)
+  notify() {
+    this.themeListeners.forEach((cb) => cb(this.state.name, this))
   }
 
-  update({ name, theme, className }: SetActiveThemeProps = {}, force = false, notify = true) {
-    if (!force) {
-      // className compare on web, avoids light/dark re-renders
-      const nameChanged = name !== this.name
-      if (!nameChanged) {
-        return false
-      }
-    }
-    this.className = className || ''
-    this.name = name || ''
-    this.theme = theme
-    if (notify) {
-      this.notify()
+  onChangeTheme(cb: ThemeListener) {
+    this.themeListeners.add(cb)
+    return () => {
+      this.themeListeners.delete(cb)
     }
-    return true
   }
+}
 
-  getNextTheme(
-    props: GetNextThemeProps = {},
-    debug?: any
-  ): {
-    name: string
-    theme: ThemeParsed | null
-    className: string | undefined
-  } {
-    const { themes = getThemes(), name, componentName } = props
-
-    if (props.reset && name) {
-      return {
-        name: name,
-        theme: themes[name] as ThemeParsed,
-        className: this.getCN(name),
-      }
-    }
+function getNextThemeClassName(name: string, isInverting = false) {
+  const next = `${THEME_CLASSNAME_PREFIX}${name}`
+  if (isInverting) {
+    return next
+  }
+  return next.replace('light_', '').replace('dark_', '')
+}
 
-    const parentIsReset = this.parentManager?.reset
-
-    if (!name) {
-      if (componentName) {
-        // allow for _Card_Button or just _Button
-        const names = [
-          `${this.name}_${componentName}`,
-          `${withoutComponentName(this.name)}_${componentName}`,
-        ]
-        for (const name of names) {
-          if (name in themes) {
-            const className = this.getCN(name)
-            return { name, theme: themes[name], className }
-          }
-        }
-      }
-      return {
-        name: this.name,
-        theme: this.theme,
-        className: this.className,
-      }
-    }
+function getState(
+  props: ThemeProps,
+  parentManager?: ThemeManager | null
+): ThemeManagerState | null {
+  const themes = getThemes()
 
-    let nextName = name || this.name || ''
-    let parentName = parentIsReset ? this.parentName || this.fullName : this.fullName
-
-    while (true) {
-      if (nextName in themes) break
-      nextName = `${parentName}_${name}`
-      if (nextName in themes) break
-      // this is fine - some themes can not have parents
-      if (!parentName.includes(THEME_NAME_SEPARATOR)) break
-      // go up one
-      parentName = parentName.slice(0, parentName.lastIndexOf(THEME_NAME_SEPARATOR))
-    }
+  if (props.name && props.reset) {
+    throw new Error(`Cannot reset + set new name`)
+  }
+  if (props.reset && !parentManager?.parentManager) {
+    throw new Error(`Cannot reset no grandparent exists`)
+  }
 
-    if (componentName) {
-      // allow for _Card_Button or just _Button
-      const names = [
-        `${nextName}_${componentName}`,
-        `${withoutComponentName(nextName)}_${componentName}`,
-      ]
-      for (const name of names) {
-        if (name in themes) {
-          nextName = name
-        }
-      }
-    }
+  const nextName = props.reset ? parentManager?.parentManager?.state?.name || '' : props.name || ''
+  const { componentName } = props
+  const parentName = parentManager?.state?.name || ''
 
-    let theme = themes[nextName]
-    if (!theme) {
-      theme = themes[`light_${nextName}`]
+  // components look for most specific, fallback upwards
+  const base = parentName.split(THEME_NAME_SEPARATOR)
+  const lastSegment = base[base.length - 1]
+  const isParentAComponentTheme = parentName && lastSegment[0].toUpperCase() === lastSegment[0]
+  if (isParentAComponentTheme) {
+    base.pop() // always remove componentName they can't nest
+  }
+  const parentBaseTheme = isParentAComponentTheme
+    ? base.slice(0, base.length).join(THEME_NAME_SEPARATOR)
+    : parentName
+  const max = base.length
+  const min = componentName
+    ? max // component themes don't search upwards
+    : 0
+
+  // prettier-ignore
+  // eslint-disable-next-line no-console
+  if (process.env.NODE_ENV === 'development' && props.debug === 'verbose') console.log('getState', props, { parentName, parentBaseTheme, base, min, max, isParentAComponentTheme, parentManager })
+
+  for (let i = max; i >= min; i--) {
+    let prefix = base.slice(0, i).join(THEME_NAME_SEPARATOR)
+    if (props.inverse) {
+      prefix = inverseThemeName(prefix)
     }
-
-    if (process.env.NODE_ENV === 'development') {
-      if (debug) {
-        // eslint-disable-next-line no-console
-        console.log('getNextTheme', this.getCN(nextName), { props, nextName, parentName })
+    const potentials: string[] = []
+    if (prefix && prefix !== parentBaseTheme) {
+      potentials.push(prefix)
+    }
+    if (nextName) {
+      potentials.unshift(prefix ? `${prefix}_${nextName}` : nextName)
+    }
+    if (i === 1) {
+      const lastSegment = potentials.findIndex((x) => !x.includes('_'))
+      if (lastSegment > 0) {
+        potentials.splice(lastSegment, 0, nextName) // last try prefer our new name to parent
       }
     }
-
-    return {
-      name: nextName,
-      theme: getThemeUnwrapped(theme),
-      className: this.getCN(nextName),
+    if (componentName) {
+      // components only look for component themes
+      if (nextName) {
+        potentials.push(`${prefix.replace(/_.*$/, '')}_${nextName}_${componentName}`)
+      }
+      potentials.push(`${prefix}_${componentName}`)
+      if (nextName) {
+        potentials.unshift(`${prefix}_${nextName}_${componentName}`)
+      }
     }
-  }
-
-  getCN(name: string) {
-    return `${THEME_CLASSNAME_PREFIX}${name} t_Theme`.replace('light_', '').replace('dark_', '')
-  }
 
-  track(uuid: any, keys: Set<string>) {
-    if (!this.name) return
-    this.keys.set(uuid, keys)
-  }
+    // prettier-ignore
+    // eslint-disable-next-line no-console
+    if (process.env.NODE_ENV === 'development' && props.debug === 'verbose') console.log('getState potentials', potentials)
 
-  notify() {
-    if (!this.name) {
-      this.keys.clear()
-    }
-    for (const [uuid, keys] of this.keys.entries()) {
-      if (keys.size) {
-        this.listeners.get(uuid)?.()
+    const found = potentials.find((t) => t in themes)
+    if (found) {
+      // optimization return null if not changed
+      if (found === parentName) {
+        return null
+      }
+      const theme = themes[found]
+      return {
+        // need to put concurrent safe things here
+        name: found,
+        theme: getThemeUnwrapped(theme),
+        className: getNextThemeClassName(found, props.inverse),
+        parentName,
       }
     }
-    this.themeListeners.forEach((cb) => cb(this.name, this))
   }
 
-  onChangeTheme(cb: ThemeListener) {
-    this.themeListeners.add(cb)
-    return () => {
-      this.themeListeners.delete(cb)
-    }
-  }
+  return null
 }
 
-export const ThemeManagerContext = createContext<ThemeManager | null>(null)
-export const emptyManager = new ThemeManager()
-
-const withoutComponentName = (name: string) => name.replace(/(_[A-Z][a-zA-Z]+)+$/g, '')
+const inverseThemeName = (themeName: string) => {
+  return themeName.startsWith('light')
+    ? themeName.replace(/^light/, 'dark')
+    : themeName.replace(/^dark/, 'light')
+}

package/src/helpers/ThemeManagerContext.tsx

@@ -0,0 +1,5 @@
+import { createContext } from 'react'
+
+import { ThemeManager } from './ThemeManager'
+
+export const ThemeManagerContext = createContext<ThemeManager | null>(null)

package/src/helpers/createPropMapper.ts

@@ -412,7 +412,7 @@ const getToken = (
     : conf.fontsParsed
   let valOrVar: any
   let hasSet = false
-  if (theme[value]) {
+  if (value in theme) {
     valOrVar = theme[value]
     hasSet = true
   } else {
@@ -449,15 +449,15 @@ const getToken = (
   if (hasSet) {
     if (process.env.NODE_ENV === 'development' && isDevTools && debug === 'verbose') {
       // eslint-disable-next-line no-console
-      console.log(`   ﹒ propMapper getToken`, key, valOrVar)
+      console.log(`   ﹒ propMapper getToken`, key, valOrVar, theme)
     }
     return resolveVariableValue(key, valOrVar, resolveAs)
   }
   if (process.env.NODE_ENV === 'development') {
     if (value && value[0] === '$') {
       // eslint-disable-next-line no-console
-      console.trace(
-        `⚠️ You've passed the value "${value}" to the style property "${key}", but there's no theme or token with the key "${value}". Using theme "${theme.name}".
+      console.warn(
+        `⚠️ You passed the value "${value}" to the style property "${key}", but there's no theme or token with the key "${value}". Using theme "${theme.name}".
 
 Set the debug prop to true to see more detailed debug information.`
       )

package/src/helpers/extendStaticConfig.ts

@@ -34,15 +34,15 @@ export function extendStaticConfig(config: Partial<StaticConfig>, parent?: Styla
     parentNames.push(parentStaticConf.componentName)
   }
 
+  const deoptProps = config.deoptProps || new Set<string>()
+  // deoptProps.add('style')
+
   return parseStaticConfig({
     ...parentStaticConf,
     ...config,
+    deoptProps,
     variants,
     parentNames,
-    isZStack: config.isZStack || parentStaticConf.isZStack,
-    isText: config.isText || parentStaticConf.isText || false,
-    neverFlatten: config.neverFlatten || parentStaticConf.neverFlatten,
-    ensureOverriddenProp: config.ensureOverriddenProp ?? parentStaticConf.ensureOverriddenProp,
     validStyles: config.validStyles
       ? {
           ...parentStaticConf.validStyles,

package/src/helpers/getBoundingClientRect.tsx

@@ -0,0 +1,7 @@
+export const getBoundingClientRect = (node: HTMLElement | null): void | DOMRect => {
+  if (!node) return
+  if (node.nodeType !== 1) return
+  if (node.getBoundingClientRect) {
+    return node.getBoundingClientRect()
+  }
+}

package/src/helpers/getRect.tsx

@@ -0,0 +1,8 @@
+import { getBoundingClientRect } from './getBoundingClientRect'
+
+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 }
+}