@tamagui/core 1.2.4 → 1.2.6

package/src/hooks/useTheme.tsx

@@ -1,274 +0,0 @@
-/* eslint-disable no-console */
-import { isClient, isRSC, isServer, isWeb } from '@tamagui/constants'
-import { useContext, useEffect, useMemo, useState } from 'react'
-
-import { getConfig } from '../config'
-import { isDevTools } from '../constants/isDevTools'
-import { createProxy } from '../helpers/createProxy'
-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 type ChangedThemeResponse = {
-  themeManager: ThemeManager | null
-  name: string
-  isNewTheme?: boolean
-  theme?: ThemeParsed | null
-  className?: string
-}
-
-const emptyProps = { name: null }
-
-function getDefaultThemeProxied() {
-  const config = getConfig()
-  const name = Object.keys(config.themes)[0]
-  return getThemeProxied({
-    theme: config.themes[name],
-    name,
-  })
-}
-
-export const useTheme = (props: ThemeProps = emptyProps): ThemeParsed => {
-  return (isRSC ? null : useThemeWithState(props)?.theme) || getDefaultThemeProxied()
-}
-
-export const useThemeWithState = (props: ThemeProps) => {
-  const keys = useServerRef([])
-
-  const changedTheme = useChangeThemeEffect(
-    props,
-    false,
-    isClient
-      ? () => {
-          return props.shouldUpdate?.() ?? keys.current.length === 0
-        }
-      : undefined
-  )
-
-  const { themeManager, isNewTheme, theme, name, className } = changedTheme
-
-  if (process.env.NODE_ENV === 'development') {
-    // ensure we aren't creating too many ThemeManagers
-    // prettier-ignore
-    if (isWeb && isNewTheme && className === themeManager?.parentManager?.state.className) {
-      console.error('Should always change, duplicating ThemeMananger bug', themeManager)
-    }
-    if (props.debug === 'verbose') {
-      console.groupCollapsed('  🔹 useTheme =>', name)
-      const logs = { ...props, name, className, ...(isDevTools && { theme }) }
-      for (const key in logs) {
-        console.log('  ', key, logs[key])
-      }
-      console.groupEnd()
-    }
-  }
-
-  if (!changedTheme.theme) {
-    if (process.env.NODE_ENV === 'development') {
-      console.warn('No theme found', name, props, themeManager)
-    }
-    return null
-  }
-
-  const proxiedTheme = useMemo(() => {
-    return getThemeProxied(changedTheme as any)
-  }, [theme, isNewTheme, name, className, themeManager])
-
-  return {
-    ...changedTheme,
-    theme: proxiedTheme,
-  }
-}
-
-export function getThemeProxied({
-  theme,
-  themeManager,
-  keys,
-}: Partial<ChangedThemeResponse> & {
-  theme: ThemeParsed
-  keys?: React.RefObject<string[]>
-}) {
-  return createProxy(theme, {
-    has(_, key) {
-      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 === 'undefined' ||
-        key === '__proto__' ||
-        key === '$typeof' ||
-        typeof key !== 'string' ||
-        !themeManager
-      ) {
-        return Reflect.get(_, key)
-      }
-      const keyString = key
-      // auto convert variables to plain
-      if (key[0] === '$') {
-        key = key.slice(1)
-      }
-      const val = themeManager.getValue(key)
-      const currentKeys = keys?.current
-      if (val && currentKeys) {
-        return new Proxy(val as any, {
-          // when they touch the actual value we only track it
-          // if its a variable (web), its ignored!
-          get(_, subkey) {
-            if (subkey === 'val' && !currentKeys.includes(keyString)) {
-              currentKeys.push(keyString)
-            }
-            return Reflect.get(val as any, subkey)
-          },
-        })
-      }
-      return val
-    },
-  })
-}
-
-export const activeThemeManagers = new Set<ThemeManager>()
-
-export const useChangeThemeEffect = (
-  props: ThemeProps,
-  root = false,
-  disableUpdate?: () => boolean
-): ChangedThemeResponse => {
-  if (isRSC) {
-    // we need context working for this to work well
-    return {
-      ...createState().state,
-      themeManager: null,
-    }
-  }
-  const parentManager = useContext(ThemeManagerContext)
-
-  const {
-    debug,
-    // @ts-expect-error internal use only
-    disable,
-  } = props
-
-  if (disable) {
-    if (!parentManager) throw `❌`
-    return {
-      ...parentManager.state,
-      isNewTheme: false,
-      themeManager: parentManager,
-    }
-  }
-
-  type State = {
-    isNewTheme: boolean
-    state: ThemeManagerState
-    themeManager: ThemeManager
-    mounted?: boolean
-  }
-
-  const [themeState, setThemeState] = useState<State>(createState)
-  const { isNewTheme, state, themeManager, mounted } = themeState
-
-  if (!isServer) {
-    useEffect(() => {
-      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 disposeChangeListener = parentManager?.onChangeTheme((name, manager) => {
-      //   // console.log('hi', props, state, name, manager)
-      //   if (state.theme !== manager.state.theme) {
-      //     console.warn('now update to', manager.state.name)
-      //     updateState(manager)
-      //   }
-      // })
-      return () => {
-        activeThemeManagers.delete(themeManager)
-        // disposeChangeListener?.()
-      }
-    }, [disable, state, isNewTheme, debug])
-  }
-
-  const isInversingOnMount = Boolean(!themeState.mounted && props.inverse)
-  const shouldReturnParentState = hasNoThemeUpdatingProps(props) || isInversingOnMount
-
-  if (shouldReturnParentState) {
-    if (!parentManager) throw 'impossible'
-    // prettier-ignore
-    if (process.env.NODE_ENV === 'development' && props.debug === 'verbose') console.log('useTheme hasNoThemeUpdatingProps', parentManager.state.name, 'isInversingOnMount', isInversingOnMount)
-    return {
-      ...parentManager.state,
-      className: isInversingOnMount ? '' : parentManager.state.className,
-      themeManager: parentManager,
-      isNewTheme: false,
-    }
-  }
-
-  // run inline in render
-  updateState()
-
-  return {
-    ...state,
-    isNewTheme,
-    themeManager,
-  }
-
-  function createState(prev?: State) {
-    if (prev && disableUpdate?.()) {
-      return prev
-    }
-    // returns previous theme manager if no change
-    const _ = new ThemeManager(props, root ? 'root' : parentManager)
-    const isNewTheme = _ !== parentManager
-    // prettier-ignore
-
-    // if (prev?.isNewTheme && _.state.theme !== parentManager?.state.theme) {
-    //   console.warn('notify')
-    //   _.notify()
-    // }
-
-    // only inverse relies on this for ssr
-    const mounted = !props.inverse ? true : root || prev?.mounted
-    return {
-      // ThemeManager returns parentManager if no change
-      isNewTheme,
-      state: { ..._.state },
-      themeManager: _,
-      mounted,
-    }
-  }
-
-  function updateState(updatingManager?: ThemeManager) {
-    if (disableUpdate?.()) {
-      return
-    }
-    const manager = updatingManager ?? themeManager
-    const next = manager.getState(props, parentManager)
-    const shouldChange = manager.getStateShouldChange(next, isNewTheme ? state : null)
-    // console.log(`got it`, next, isNewTheme, shouldChange, { ...updatingManager?.state })
-    if (shouldChange) {
-      setThemeState(createState)
-    } else {
-      if (!next && parentManager?.state.name !== state.name) {
-        // were changing back to parent state
-        setThemeState(createState)
-      }
-    }
-  }
-}

package/src/hooks/useThemeName.tsx

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

package/src/insertFont.ts

@@ -1,73 +0,0 @@
-import { setConfigFont } from './config'
-import { createFont } from './createFont'
-import { Variable } from './createVariable'
-import { DeepVariableObject, createVariables } from './createVariables'
-import { registerCSSVariable, variableToCSS } from './helpers/registerCSSVariable'
-import { GenericFont } from './types'
-
-/**
- * Runtime dynamic insert font
- */
-export function insertFont<A extends GenericFont>(
-  name: string,
-  fontIn: A
-): DeepVariableObject<A> {
-  const font = createFont(fontIn)
-  const tokened = createVariables(font, name) as GenericFont
-  const parsed = parseFont(tokened) as DeepVariableObject<A>
-  if (process.env.TAMAGUI_TARGET === 'web' && typeof document !== 'undefined') {
-    const fontVars = registerFontVariables(parsed)
-    const style = document.createElement('style')
-    style.innerText = `:root .font_${name} {${fontVars.join(';')}}`
-    style.setAttribute('data-tamagui-font', name)
-    document.head.appendChild(style)
-  }
-  setConfigFont(name, tokened, parsed)
-  return parsed
-}
-
-export function parseFont<A extends GenericFont>(definition: A): DeepVariableObject<A> {
-  const parsed: any = {}
-  for (const attrKey in definition) {
-    const attr = definition[attrKey]
-    if (attrKey === 'family' || attrKey === 'face') {
-      parsed[attrKey] = attr
-      continue
-    }
-    parsed[attrKey] = {}
-    for (const key in attr) {
-      let val = attr[key] as any
-      // is a theme reference
-      if (val.val?.[0] === '$') {
-        val = val.val
-      }
-      parsed[attrKey][`$${key}`] = val
-    }
-  }
-  return parsed
-}
-
-export function registerFontVariables(parsedFont: any) {
-  const response: string[] = []
-
-  for (const fkey in parsedFont) {
-    if (fkey === 'face') continue
-    if (fkey === 'family') {
-      const val = parsedFont[fkey] as Variable
-      registerCSSVariable(val)
-      response.push(variableToCSS(val))
-    } else {
-      for (const fskey in parsedFont[fkey]) {
-        const fval = parsedFont[fkey][fskey]
-        if (typeof fval === 'string') {
-          // no need to add its a theme reference like "$borderColor"
-        } else {
-          const val = parsedFont[fkey][fskey] as Variable
-          registerCSSVariable(val)
-          response.push(variableToCSS(val))
-        }
-      }
-    }
-  }
-  return response
-}

package/src/setupReactNative.ts

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

package/src/static.ts

@@ -1,5 +0,0 @@
-// only stuff that gets extracted or needed by tamagui-static
-export * from './index'
-
-// for static
-export * from './helpers/proxyThemeVariables'

package/src/styled.tsx

@@ -1,195 +0,0 @@
-import { stylePropsAll } from '@tamagui/helpers'
-
-import { createComponent } from './createComponent'
-import { ReactNativeStaticConfigs } from './setupReactNative'
-import {
-  GetProps,
-  GetVariantValues,
-  MediaProps,
-  PseudoProps,
-  StaticConfig,
-  StylableComponent,
-  TamaguiComponent,
-  TamaguiElement,
-  VariantDefinitions,
-  VariantSpreadFunction,
-} from './types'
-
-// TODO may be able to use this in the options?: arg below directly
-export type StyledOptions<ParentComponent extends StylableComponent> =
-  GetProps<ParentComponent> & {
-    name?: string
-    variants?: VariantDefinitions<ParentComponent> | undefined
-    defaultVariants?: { [key: string]: any }
-  }
-
-type GetBaseProps<A extends StylableComponent> = A extends TamaguiComponent<
-  any,
-  any,
-  infer P
->
-  ? P
-  : GetProps<A>
-
-type GetVariantProps<A extends StylableComponent> = A extends TamaguiComponent<
-  any,
-  any,
-  any,
-  infer V
->
-  ? V
-  : {}
-
-export function styled<
-  ParentComponent extends StylableComponent,
-  Variants extends VariantDefinitions<ParentComponent> | void = VariantDefinitions<ParentComponent> | void
->(
-  Component: ParentComponent,
-  // this should be Partial<GetProps<ParentComponent>> but causes excessively deep type issues
-  options?: GetProps<ParentComponent> & {
-    name?: string
-    variants?: Variants | undefined
-    // thought i had this typed, but can't get it linked
-    defaultVariants?: { [key: string]: any }
-    acceptsClassName?: boolean
-  },
-  staticExtractionOptions?: Partial<StaticConfig>
-) {
-  // validate not using a variant over an existing valid style
-  if (process.env.NODE_ENV !== 'production') {
-    if (!Component) {
-      throw new Error(`No component given to styled()`)
-    }
-    if (options?.variants) {
-      for (const key in options.variants) {
-        if (key in stylePropsAll) {
-          console.error(
-            `Invalid variant key overlaps with style key: ${key}. Tamagui prevents defining variants that use valid style keys to reduce implementation complexity.`
-          )
-        }
-      }
-    }
-  }
-
-  const staticConfigProps = (() => {
-    const parentStaticConfig =
-      'staticConfig' in Component ? (Component.staticConfig as StaticConfig) : null
-
-    if (options) {
-      const {
-        variants,
-        name,
-        defaultVariants,
-        acceptsClassName: acceptsClassNameProp,
-        ...defaultProps
-      } = options
-      if (defaultVariants) {
-        Object.assign(defaultProps, defaultVariants)
-      }
-      const isReactNative = Boolean(
-        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 && ReactNativeStaticConfigs.get(Comp)) || null
-
-      const isText = Boolean(
-        staticExtractionOptions?.isText || parentStaticConfig?.isText
-      )
-      const acceptsClassName = acceptsClassNameProp ?? (isTamagui || isReactNative)
-
-      const conf: Partial<StaticConfig> = {
-        ...staticExtractionOptions,
-        ...(!isTamagui && {
-          Component: Comp,
-        }),
-        // this type gets messed up by options?: Partial<GetProps<ParentComponent>> above
-        // take away the Partial<> and it's fine
-        variants,
-        defaultProps,
-        defaultVariants,
-        componentName: name,
-        isReactNative,
-        isText,
-        acceptsClassName,
-        ...nativeConf,
-      }
-
-      // bail on non className views as well
-      if (defaultProps.children || !acceptsClassName) {
-        conf.neverFlatten = true
-      }
-
-      return conf
-    }
-    return {}
-  })()
-
-  const component = createComponent(staticConfigProps, Component)
-
-  // get parent props without pseudos and medias so we can rebuild both with new variants
-  // get parent props without pseudos and medias so we can rebuild both with new variants
-  type ParentPropsBase = GetBaseProps<ParentComponent>
-  type ParentVariants = GetVariantProps<ParentComponent>
-
-  type OurVariants = Variants extends void
-    ? {}
-    : {
-        [Key in keyof Variants]?: Variants[Key] extends VariantSpreadFunction<
-          any,
-          infer Val
-        >
-          ? Val
-          : GetVariantValues<keyof Variants[Key]>
-      }
-
-  type VariantProps = Omit<ParentVariants, keyof OurVariants> & OurVariants
-  type OurPropsBase = ParentPropsBase & VariantProps
-
-  type Props = Variants extends void
-    ? GetProps<ParentComponent>
-    : // start with base props
-      OurPropsBase &
-        // add in media (+ pseudos nested)
-        MediaProps<Partial<OurPropsBase>> &
-        // add in pseudos
-        PseudoProps<Partial<OurPropsBase>>
-
-  type StyledComponent = TamaguiComponent<
-    Props,
-    TamaguiElement,
-    ParentPropsBase,
-    ParentVariants & OurVariants
-  >
-
-  return component as StyledComponent
-}
-
-// sanity check types
-// import { Stack } from './views/Stack'
-// const X = styled(Stack, {
-//   variants: {
-//     size: {
-//       '...size': (val) => {
-//         return {
-//           pointerEvents: 'auto'
-//         }
-//       }
-//     },
-//     disabled: {
-//       true: {
-//         alignContent: 'center',
-//         opacity: 0.5,
-//         pointerEvents: 'none',
-//       },
-//     },
-//   } as const
-// })
-// // type variants = GetStyledVariants<typeof X>
-// const y = <X disabled size="$10" />