@tamagui/web 1.123.17 → 1.124.0

package/src/helpers/ThemeManager.tsx

@@ -1,405 +0,0 @@
-import { isClient, isWeb } from '@tamagui/constants'
-
-import { getThemes } from '../config'
-import { THEME_CLASSNAME_PREFIX, THEME_NAME_SEPARATOR } from '../constants/constants'
-import type { ColorScheme, ThemeParsed, ThemeProps } from '../types'
-
-type ThemeListener = (
-  name: string | null,
-  themeManager: ThemeManager,
-  forced: boolean | 'self'
-) => void
-
-export type SetActiveThemeProps = {
-  className?: string
-  parentManager?: ThemeManager | null
-  name?: string | null
-  theme?: any
-  reset?: boolean
-}
-
-export type ThemeManagerState = {
-  name: string
-  parentName?: string
-  theme?: ThemeParsed | null
-  isComponent?: boolean
-
-  // if a theme is fixed to light/dark, we need to track
-  // so that dynamiccolorIOS knows its fixed a certain way
-  isSchemeFixed?: boolean
-
-  className?: string
-  scheme?: ColorScheme
-}
-
-const emptyState: ThemeManagerState = { name: '' }
-
-export function getHasThemeUpdatingProps(props: ThemeProps) {
-  return Boolean(props.name || props.componentName || props.inverse || props.reset)
-}
-
-let uid = 0
-
-export class ThemeManager {
-  id = 0
-  themeListeners = new Set<ThemeListener>()
-  parentManager: ThemeManager | null = null
-  state: ThemeManagerState = emptyState
-
-  constructor(
-    public props: ThemeProps = {},
-    parentManager?: ThemeManager | 'root' | null | undefined
-  ) {
-    uid = (uid + 1) % Number.MAX_VALUE
-    this.id = uid
-
-    if (parentManager === 'root') {
-      this.updateStateFromProps(props, false)
-      return
-    }
-
-    if (!parentManager) {
-      if (process.env.NODE_ENV !== 'production') {
-        throw new Error(
-          `No parent manager given, this is likely due to duplicated Tamagui dependencies. Check your lockfile for mis-matched versions. It could also be from an error somewhere else in your stack causing Tamagui to recieve undefined context, you can try putting some ErrorBoundary components around other areas of your app, or a Suspense boundary.`
-        )
-      }
-      throw `❌ 000`
-    }
-
-    // this is used in updateStateFromProps so must be set
-    this.parentManager = parentManager
-
-    if (this.updateStateFromProps(props, false)) {
-      return
-    }
-
-    return parentManager
-  }
-
-  updateStateFromProps(
-    props: ThemeProps & { forceTheme?: ThemeParsed } = this.props || {},
-    shouldNotify = true
-  ) {
-    this.props = props
-
-    if (props.forceTheme) {
-      this.state.theme = props.forceTheme
-      this.state.name = props.name || ''
-      this.updateState(this.state, true)
-      return this.state
-    }
-
-    const nextState = this.getStateIfChanged(props)
-    if (nextState) {
-      this.updateState(nextState, shouldNotify)
-      return nextState
-    }
-  }
-
-  getParents() {
-    const parents: ThemeManager[] = []
-    let current: ThemeManager | null = this
-    while (current) {
-      parents.push(current)
-      current = current.parentManager
-    }
-    return parents
-  }
-
-  updateState(nextState: ThemeManagerState, shouldNotify = true) {
-    this.state = nextState
-    this._allKeys = null
-    // if (shouldNotify) {
-    //   if (process.env.TAMAGUI_TARGET === 'native') {
-    //     // native is way slower with queueMicrotask
-    //     this.notify()
-    //   } else {
-    //     // web is way faster this way
-    //     queueMicrotask(() => {
-    //       this.notify()
-    //     })
-    //   }
-    // }
-  }
-
-  getStateIfChanged(
-    props = this.props,
-    state: ThemeManagerState | null = this.state,
-    parentManager = this.parentManager
-  ) {
-    const _ = this.getState(props, parentManager)
-
-    // is removing
-    if (state && state !== emptyState && !_) {
-      return parentManager?.state
-    }
-    if (this.getStateShouldChange(_, state)) {
-      return _
-    }
-  }
-
-  getStateShouldChange(
-    nextState: ThemeManagerState | null,
-    state: ThemeManagerState | null = this.state
-  ) {
-    if (!nextState?.theme || nextState.theme === state?.theme) {
-      return false
-    }
-    return true
-  }
-
-  getState(props = this.props, parentManager = this.parentManager) {
-    const next =
-      getState(props, parentManager) ||
-      (process.env.TAMAGUI_TARGET === 'native' ? parentManager?.state || null : null)
-    return next
-  }
-
-  _allKeys: Set<string> | null = null
-  get allKeys() {
-    this._allKeys ||= new Set([
-      ...(this.parentManager?.allKeys || []),
-      ...Object.keys(this.state.theme || {}),
-    ])
-    return this._allKeys
-  }
-
-  notify(forced = false) {
-    this.themeListeners.forEach((cb) => cb(this.state.name, this, forced))
-    if (process.env.NODE_ENV !== 'production') {
-      this['_numChangeEventsSent'] ??= 0
-      this['_numChangeEventsSent']++
-    }
-  }
-
-  _selfListener?: ThemeListener
-
-  selfUpdate() {
-    this._selfListener?.(this.state.name, this, 'self')
-  }
-
-  onChangeTheme(cb: ThemeListener, debugId?: number | true) {
-    if (process.env.NODE_ENV !== 'production' && debugId) {
-      // @ts-ignore
-      this._listeningIds ??= new Set()
-      // @ts-ignore
-      this._listeningIds.add(debugId)
-    }
-
-    if (debugId === true) {
-      this._selfListener = cb
-    }
-
-    this.themeListeners.add(cb)
-    return () => {
-      this.themeListeners.delete(cb)
-    }
-  }
-}
-
-const cache: Record<string, ThemeManagerState | null> = {}
-
-function getState(
-  props: ThemeProps,
-  manager?: ThemeManager | null
-): ThemeManagerState | null {
-  if (!getHasThemeUpdatingProps(props)) {
-    return null
-  }
-  const [allManagers] = getManagers(manager)
-  const cacheKey = `${props.name || ''}${props.componentName || ''}${props.inverse || ''}${props.reset || ''}${allManagers.map((x) => x?.state.name || '.').join('')}`
-  const cached = cache[cacheKey]
-  if (!cached) {
-    const res = getStateUncached(props, manager)
-    cache[cacheKey] = res
-    return res
-  }
-  return cached
-}
-
-function getStateUncached(
-  props: ThemeProps,
-  manager?: ThemeManager | null
-): ThemeManagerState | null {
-  if (props.name && props.reset) {
-    throw new Error(
-      process.env.NODE_ENV === 'production'
-        ? `❌004`
-        : 'Cannot reset and set a new name at the same time.'
-    )
-  }
-
-  const themes = getThemes()
-
-  const [allManagers, componentManagers] = getManagers(manager)
-
-  const isDirectParentAComponentTheme = !!manager?.state.isComponent
-  const startIndex = props.reset && !isDirectParentAComponentTheme ? 1 : 0
-  let baseManager = allManagers[startIndex]
-  let parentManager = allManagers[startIndex + 1]
-
-  if (!baseManager && props.reset) {
-    if (process.env.NODE_ENV !== 'production') {
-      console.warn('Cannot reset, no parent theme exists')
-    }
-    return null
-  }
-
-  const { componentName } = props
-  let result: ThemeManagerState | null = null
-
-  let baseName = baseManager?.state.name || ''
-
-  if (baseManager?.state.isComponent) {
-    // remove component name
-    baseName = baseName.replace(/_[A-Z][A-Za-z]+/, '')
-  }
-
-  const nextName = props.reset ? baseName : props.name || ''
-
-  const allComponentThemes = componentManagers.map((x) => x?.state.name || '')
-  if (isDirectParentAComponentTheme) {
-    allComponentThemes.shift()
-  }
-
-  // components look for most specific, fallback upwards
-  const base = baseName.split(THEME_NAME_SEPARATOR)
-  const max = base.length
-  const min =
-    props.componentName && !nextName
-      ? max // component name only don't search upwards
-      : 0
-
-  for (let i = max; i >= min; i--) {
-    let prefix = base.slice(0, i).join(THEME_NAME_SEPARATOR)
-
-    if (props.inverse) {
-      prefix = inverseThemeName(prefix)
-    }
-
-    let potentials: string[] = []
-
-    if (prefix && prefix !== baseName && prefix.includes(nextName)) {
-      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
-      }
-    }
-
-    if (componentName && !props.reset) {
-      const baseLen = base.length
-      let componentPotentials: string[] = []
-      // components only look for component themes
-      if (nextName && baseLen > 1) {
-        const beforeSeparator = base[0]
-        componentPotentials.push(`${beforeSeparator}_${nextName}_${componentName}`)
-      }
-      componentPotentials.push(`${prefix}_${componentName}`)
-      if (nextName) {
-        // do this one and one level up
-        if (i > baseLen) {
-          const prefixLessOne = base.slice(0, i - 1).join(THEME_NAME_SEPARATOR)
-          if (prefixLessOne) {
-            const lessSpecific = `${prefixLessOne}_${nextName}_${componentName}`
-            componentPotentials.unshift(lessSpecific)
-          }
-        }
-        const moreSpecific = `${prefix}_${nextName}_${componentName}`
-        componentPotentials.unshift(moreSpecific)
-      }
-
-      potentials = [...componentPotentials, ...potentials, ...allComponentThemes]
-    }
-
-    const found = potentials.find((t) => t in themes)
-
-    if (
-      process.env.NODE_ENV !== 'production' &&
-      typeof props.debug === 'string' &&
-      isClient
-    ) {
-      console.info(` 🔷 [${manager?.id}] getState`, {
-        props,
-        found,
-        potentials,
-        baseManager,
-        nextName,
-        baseName,
-        prefix,
-      })
-    }
-
-    if (found) {
-      const names = found.split('_')
-      const [firstName, ...restNames] = names
-      const lastName = names[names.length - 1]
-      const isComponent = lastName[0] === lastName[0].toUpperCase()
-      const scheme =
-        firstName === 'light' ? 'light' : firstName === 'dark' ? 'dark' : undefined
-      const pre = THEME_CLASSNAME_PREFIX
-      const className = !isWeb
-        ? ''
-        : `${pre}sub_theme ${pre}${
-            !scheme || !restNames.length ? firstName : restNames.join('_')
-          }`
-
-      // because its a new theme the baseManager is now the parent
-      const parentState = (baseManager || parentManager)?.state
-      const parentName = parentState?.name
-
-      result = {
-        name: found,
-        parentName,
-        theme: themes[found],
-        className,
-        isComponent,
-        isSchemeFixed: props.name === 'light' || props.name === 'dark',
-        scheme,
-      }
-
-      break
-    }
-  }
-
-  if (process.env.NODE_ENV !== 'production' && props.debug === 'verbose' && isClient) {
-    console.groupCollapsed('ThemeManager.getState()')
-    console.info({ props, baseName, base, min, max })
-    console.warn('result', { result })
-    console.trace()
-    console.groupEnd()
-  }
-
-  return result
-}
-
-const inverseThemeName = (themeName: string) => {
-  return themeName.startsWith('light')
-    ? themeName.replace(/^light/, 'dark')
-    : themeName.replace(/^dark/, 'light')
-}
-
-type MaybeThemeManager = ThemeManager | undefined
-
-// components never inherit from components
-// example <Switch><Switch.Thumb /></Switch>
-// the Switch theme shouldn't be considered parent of Thumb
-export function getManagers(themeManager?: ThemeManager | null) {
-  const comp: MaybeThemeManager[] = []
-  const all: MaybeThemeManager[] = []
-  let cur = themeManager
-  while (cur) {
-    all.push(cur)
-    if (cur.state.isComponent) {
-      comp.push(cur)
-    }
-    cur = cur.parentManager
-  }
-  return [all, comp] as const
-}

package/src/helpers/ThemeManagerContext.tsx

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

package/src/hooks/shouldDeoptDueToParentScheme.native.tsx

@@ -1,37 +0,0 @@
-import { Appearance } from 'react-native'
-import type { ThemeManager } from '../helpers/ThemeManager'
-
-// on iOS for fast scheme change, we assume the root theme name is matching the system
-// but if any intermediate theme is "fixed" to light or dark, we need to opt out
-// optimizing no-rerenders, because it could change by the end-user at any time in the tree
-// but also theres no point in doing a dynamic color in the first place since scheme is fixed one way
-export function shouldDeoptDueToParentScheme(manager?: ThemeManager) {
-  // reverse so we get it from root => child (easier to check)
-  const parents = (manager?.getParents() || []).reverse()
-  const rootScheme = parents[0]?.state.scheme
-
-  // de-opt because the root isn't light/dark
-  if (!rootScheme) {
-    return true
-  }
-
-  // de-opt if root scheme doesn't match system theme
-  // TODO we could be smarter about this and still support fast scheme change
-  // but we'd have to track the inverses which is a bit tricky
-  if (Appearance.getColorScheme() !== rootScheme) {
-    return true
-  }
-
-  // dont count the root theme level as fixed because it will be matching system theme
-  let lastParentScheme = rootScheme
-
-  // we want to return true if a scheme changes anywhere in the tree
-  for (const parent of parents) {
-    if (parent.state.scheme !== lastParentScheme) {
-      return true
-    }
-    lastParentScheme = parent.state.scheme
-  }
-
-  return false
-}

package/src/hooks/shouldDeoptDueToParentScheme.tsx

@@ -1,6 +0,0 @@
-import type { ThemeManager } from '../helpers/ThemeManager'
-
-// web does nothing
-export function shouldDeoptDueToParentScheme(manager?: ThemeManager) {
-  return false
-}

package/types/helpers/ThemeManager.d.ts

@@ -1,45 +0,0 @@
-import type { ColorScheme, ThemeParsed, ThemeProps } from '../types';
-type ThemeListener = (name: string | null, themeManager: ThemeManager, forced: boolean | 'self') => void;
-export type SetActiveThemeProps = {
-    className?: string;
-    parentManager?: ThemeManager | null;
-    name?: string | null;
-    theme?: any;
-    reset?: boolean;
-};
-export type ThemeManagerState = {
-    name: string;
-    parentName?: string;
-    theme?: ThemeParsed | null;
-    isComponent?: boolean;
-    isSchemeFixed?: boolean;
-    className?: string;
-    scheme?: ColorScheme;
-};
-export declare function getHasThemeUpdatingProps(props: ThemeProps): boolean;
-export declare class ThemeManager {
-    props: ThemeProps;
-    id: number;
-    themeListeners: Set<ThemeListener>;
-    parentManager: ThemeManager | null;
-    state: ThemeManagerState;
-    constructor(props?: ThemeProps, parentManager?: ThemeManager | 'root' | null | undefined);
-    updateStateFromProps(props?: ThemeProps & {
-        forceTheme?: ThemeParsed;
-    }, shouldNotify?: boolean): ThemeManagerState | undefined;
-    getParents(): ThemeManager[];
-    updateState(nextState: ThemeManagerState, shouldNotify?: boolean): void;
-    getStateIfChanged(props?: ThemeProps, state?: ThemeManagerState | null, parentManager?: ThemeManager | null): ThemeManagerState | null | undefined;
-    getStateShouldChange(nextState: ThemeManagerState | null, state?: ThemeManagerState | null): boolean;
-    getState(props?: ThemeProps, parentManager?: ThemeManager | null): ThemeManagerState | null;
-    _allKeys: Set<string> | null;
-    get allKeys(): Set<string>;
-    notify(forced?: boolean): void;
-    _selfListener?: ThemeListener;
-    selfUpdate(): void;
-    onChangeTheme(cb: ThemeListener, debugId?: number | true): () => void;
-}
-type MaybeThemeManager = ThemeManager | undefined;
-export declare function getManagers(themeManager?: ThemeManager | null): readonly [MaybeThemeManager[], MaybeThemeManager[]];
-export {};
-//# sourceMappingURL=ThemeManager.d.ts.map

package/types/helpers/ThemeManager.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ThemeManager.d.ts","sourceRoot":"","sources":["../../src/helpers/ThemeManager.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AAEpE,KAAK,aAAa,GAAG,CACnB,IAAI,EAAE,MAAM,GAAG,IAAI,EACnB,YAAY,EAAE,YAAY,EAC1B,MAAM,EAAE,OAAO,GAAG,MAAM,KACrB,IAAI,CAAA;AAET,MAAM,MAAM,mBAAmB,GAAG;IAChC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,aAAa,CAAC,EAAE,YAAY,GAAG,IAAI,CAAA;IACnC,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACpB,KAAK,CAAC,EAAE,GAAG,CAAA;IACX,KAAK,CAAC,EAAE,OAAO,CAAA;CAChB,CAAA;AAED,MAAM,MAAM,iBAAiB,GAAG;IAC9B,IAAI,EAAE,MAAM,CAAA;IACZ,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,KAAK,CAAC,EAAE,WAAW,GAAG,IAAI,CAAA;IAC1B,WAAW,CAAC,EAAE,OAAO,CAAA;IAIrB,aAAa,CAAC,EAAE,OAAO,CAAA;IAEvB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,MAAM,CAAC,EAAE,WAAW,CAAA;CACrB,CAAA;AAID,wBAAgB,wBAAwB,CAAC,KAAK,EAAE,UAAU,WAEzD;AAID,qBAAa,YAAY;IAOd,KAAK,EAAE,UAAU;IAN1B,EAAE,SAAI;IACN,cAAc,qBAA2B;IACzC,aAAa,EAAE,YAAY,GAAG,IAAI,CAAO;IACzC,KAAK,EAAE,iBAAiB,CAAa;gBAG5B,KAAK,GAAE,UAAe,EAC7B,aAAa,CAAC,EAAE,YAAY,GAAG,MAAM,GAAG,IAAI,GAAG,SAAS;IA6B1D,oBAAoB,CAClB,KAAK,GAAE,UAAU,GAAG;QAAE,UAAU,CAAC,EAAE,WAAW,CAAA;KAAqB,EACnE,YAAY,UAAO;IAkBrB,UAAU;IAUV,WAAW,CAAC,SAAS,EAAE,iBAAiB,EAAE,YAAY,UAAO;IAgB7D,iBAAiB,CACf,KAAK,aAAa,EAClB,KAAK,GAAE,iBAAiB,GAAG,IAAiB,EAC5C,aAAa,sBAAqB;IAapC,oBAAoB,CAClB,SAAS,EAAE,iBAAiB,GAAG,IAAI,EACnC,KAAK,GAAE,iBAAiB,GAAG,IAAiB;IAQ9C,QAAQ,CAAC,KAAK,aAAa,EAAE,aAAa,sBAAqB;IAO/D,QAAQ,EAAE,GAAG,CAAC,MAAM,CAAC,GAAG,IAAI,CAAO;IACnC,IAAI,OAAO,gBAMV;IAED,MAAM,CAAC,MAAM,UAAQ;IAQrB,aAAa,CAAC,EAAE,aAAa,CAAA;IAE7B,UAAU;IAIV,aAAa,CAAC,EAAE,EAAE,aAAa,EAAE,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI;CAiBzD;AA6LD,KAAK,iBAAiB,GAAG,YAAY,GAAG,SAAS,CAAA;AAKjD,wBAAgB,WAAW,CAAC,YAAY,CAAC,EAAE,YAAY,GAAG,IAAI,uDAY7D"}

package/types/helpers/ThemeManagerContext.d.ts

@@ -1,4 +0,0 @@
-import React from 'react';
-import type { ThemeManager } from './ThemeManager';
-export declare const ThemeManagerContext: React.Context<ThemeManager | null>;
-//# sourceMappingURL=ThemeManagerContext.d.ts.map

package/types/helpers/ThemeManagerContext.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ThemeManagerContext.d.ts","sourceRoot":"","sources":["../../src/helpers/ThemeManagerContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAElD,eAAO,MAAM,mBAAmB,oCAAiD,CAAA"}

package/types/hooks/shouldDeoptDueToParentScheme.d.ts

@@ -1,3 +0,0 @@
-import type { ThemeManager } from '../helpers/ThemeManager';
-export declare function shouldDeoptDueToParentScheme(manager?: ThemeManager): boolean;
-//# sourceMappingURL=shouldDeoptDueToParentScheme.d.ts.map

package/types/hooks/shouldDeoptDueToParentScheme.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"shouldDeoptDueToParentScheme.d.ts","sourceRoot":"","sources":["../../src/hooks/shouldDeoptDueToParentScheme.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAA;AAG3D,wBAAgB,4BAA4B,CAAC,OAAO,CAAC,EAAE,YAAY,WAElE"}

package/types/hooks/shouldDeoptDueToParentScheme.native.d.ts

@@ -1,3 +0,0 @@
-import type { ThemeManager } from '../helpers/ThemeManager';
-export declare function shouldDeoptDueToParentScheme(manager?: ThemeManager): boolean;
-//# sourceMappingURL=shouldDeoptDueToParentScheme.native.d.ts.map

package/types/hooks/shouldDeoptDueToParentScheme.native.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"shouldDeoptDueToParentScheme.native.d.ts","sourceRoot":"","sources":["../../src/hooks/shouldDeoptDueToParentScheme.native.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAA;AAM3D,wBAAgB,4BAA4B,CAAC,OAAO,CAAC,EAAE,YAAY,WA6BlE"}