@tamagui/core 1.2.4 → 1.2.6

package/src/helpers/ThemeManager.tsx

@@ -1,285 +0,0 @@
-import { getThemes, getTokens } from '../config'
-import { THEME_CLASSNAME_PREFIX, THEME_NAME_SEPARATOR } from '../constants/constants'
-import { getThemeUnwrapped } from '../hooks/getThemeUnwrapped'
-import { ThemeParsed, ThemeProps } from '../types'
-
-type ThemeListener = (name: string | null, themeManager: ThemeManager) => void
-
-export type SetActiveThemeProps = {
-  className?: string
-  parentManager?: ThemeManager | null
-  name?: string | null
-  theme?: any
-  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 {
-  themeListeners = new Set<ThemeListener>()
-  parentManager: ThemeManager | null = null
-  state: ThemeManagerState = emptyState
-
-  constructor(
-    public props: ThemeProps = {},
-    parentManager?: ThemeManager | 'root' | null | undefined
-  ) {
-    if (parentManager === 'root') {
-      this.updateState(props, false)
-      return
-    }
-    if (!parentManager) {
-      if (process.env.NODE_ENV !== 'production') {
-        console.trace()
-        throw new Error(`No parent manager given`)
-      }
-      throw `❌`
-    }
-    // copy over listeners
-    this.themeListeners = parentManager.themeListeners
-
-    // 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
-      }
-      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
-    }
-  }
-
-  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) {
-    return (
-      getState(props, parentManager) ||
-      (process.env.TAMAGUI_TARGET === 'native' ? parentManager?.state || null : null)
-    )
-  }
-
-  _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, state?: ThemeManagerState) {
-    if (!key) return
-    let theme = (state || this.state).theme
-    let manager = this as ThemeManager | null
-    while (theme && manager) {
-      if (key in theme) {
-        return theme[key]
-      }
-      manager = manager.parentManager
-      theme = manager?.state.theme
-    }
-    const tokens = getTokens()
-    if (key in tokens.color) {
-      return tokens.color[key]
-    }
-  }
-
-  notify() {
-    this.themeListeners.forEach((cb) => cb(this.state.name, this))
-  }
-
-  onChangeTheme(cb: ThemeListener) {
-    this.themeListeners.add(cb)
-    return () => {
-      this.themeListeners.delete(cb)
-    }
-  }
-}
-
-function getNextThemeClassName(name: string, isInverting = false) {
-  const next = `${THEME_CLASSNAME_PREFIX}${name}`
-  if (isInverting) {
-    return next
-  }
-  return next.replace('light_', '').replace('dark_', '')
-}
-
-const cache = new WeakMap<ThemeProps, [ThemeManager, ThemeManagerState | null]>()
-
-function getState(
-  props: ThemeProps,
-  parentManager?: ThemeManager | null
-): ThemeManagerState | null {
-  const cached = cache.get(props)
-  if (cached && cached[0] === parentManager) {
-    return cached[1]
-  }
-
-  const themes = getThemes()
-
-  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')
-  }
-
-  let result: ThemeManagerState | null = null
-
-  const nextName = props.reset
-    ? parentManager?.parentManager?.state?.name || ''
-    : props.name || ''
-  const { componentName } = props
-  const parentName = parentManager?.state?.name || ''
-
-  // 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 && !nextName
-      ? max // component name only don't search upwards
-      : 0
-
-  // prettier-ignore
-  // eslint-disable-next-line no-console
-  if (process.env.NODE_ENV === 'development' && props.debug === 'verbose') [ console.groupCollapsed('ThemeManager.getState()', props, { parentName,   parentBaseTheme,   base,   min,   max,   isParentAComponentTheme }), console.trace(), console.groupEnd() ]
-
-  for (let i = max; i >= min; i--) {
-    let prefix = base.slice(0, i).join(THEME_NAME_SEPARATOR)
-    if (props.inverse) {
-      prefix = inverseThemeName(prefix)
-    }
-    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
-      }
-    }
-    if (componentName) {
-      // components only look for component themes
-      if (nextName) {
-        potentials.push(
-          `${prefix.slice(
-            0,
-            prefix.indexOf(THEME_NAME_SEPARATOR)
-          )}_${nextName}_${componentName}`
-        )
-      }
-      potentials.push(`${prefix}_${componentName}`)
-      if (nextName) {
-        potentials.unshift(`${prefix}_${nextName}_${componentName}`)
-      }
-    }
-
-    const found = potentials.find((t) => t in themes)
-
-    // eslint-disable-next-line no-console
-    if (process.env.NODE_ENV === 'development' && props.debug === 'verbose')
-      console.log('getState found', found, 'from', potentials, 'parentName', parentName)
-
-    if (found) {
-      // optimization return null if not changed
-      if (found === parentName) {
-        break
-      }
-      result = {
-        name: found,
-        theme: getThemeUnwrapped(themes[found]),
-        className: getNextThemeClassName(found, props.inverse),
-        parentName,
-      }
-      break
-    }
-  }
-
-  if (parentManager) {
-    cache.set(props, [parentManager, result])
-  }
-
-  return result
-}
-
-const inverseThemeName = (themeName: string) => {
-  return themeName.startsWith('light')
-    ? themeName.replace(/^light/, 'dark')
-    : themeName.replace(/^dark/, 'light')
-}

package/src/helpers/ThemeManagerContext.tsx

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

package/src/helpers/createMediaStyle.ts

@@ -1,56 +0,0 @@
-import { StyleObject } from '@tamagui/helpers'
-
-import { mediaObjectToString } from '../hooks/useMedia'
-import { MediaQueries } from '../types'
-import { PartialStyleObject } from './insertStyleRule'
-
-// TODO have this be used by extractMediaStyle in tamagui static
-// not synced to static/constants for now
-export const MEDIA_SEP = '_'
-
-let prefixes: Record<string, string> | null = null
-let selectors: Record<string, string> | null = null
-
-export const createMediaStyle = (
-  { property, identifier, rules }: StyleObject,
-  mediaKey: string,
-  mediaQueries: MediaQueries,
-  negate?: boolean
-): PartialStyleObject => {
-  if (!(prefixes && selectors)) {
-    // TODO move this into useMedia calc once there and unify w getMediaImportance
-    const mediaKeys = Object.keys(mediaQueries)
-    prefixes = Object.fromEntries(
-      mediaKeys.map((key, index) => [key, new Array(index + 1).fill(':root').join('')])
-    )
-    selectors = Object.fromEntries(
-      mediaKeys.map((key) => [key, mediaObjectToString(mediaQueries[key])])
-    )
-  }
-  const precendencePrefix = prefixes[mediaKey]
-  const mediaSelector = selectors[mediaKey]
-  const negKey = negate ? '0' : ''
-  const ogPrefix = identifier.slice(0, identifier.indexOf('-') + 1)
-  const nextIdentifier = `${identifier.replace(
-    ogPrefix,
-    `${ogPrefix}${MEDIA_SEP}${mediaKey}${negKey}${MEDIA_SEP}`
-  )}`
-  const screenStr = negate ? 'not all and' : ''
-  const mediaQuery = `${screenStr} ${mediaSelector}`
-  const styleInner = rules
-    .map((rule) => rule.replace(identifier, nextIdentifier))
-    .join(';')
-  // combines media queries if they already exist
-  let styleRule = ''
-  if (styleInner.includes('@media')) {
-    // combine
-    styleRule = styleInner.replace('{', ` and ${mediaQuery} {`)
-  } else {
-    styleRule = `@media ${mediaQuery} { ${precendencePrefix} ${styleInner} }`
-  }
-  return {
-    property,
-    rules: [styleRule],
-    identifier: nextIdentifier,
-  }
-}