@tamagui/core 1.0.1-beta.139 → 1.0.1-beta.142

package/src/hooks/useTheme.tsx

@@ -0,0 +1,264 @@
+import { useForceUpdate } from '@tamagui/use-force-update'
+import React, { useContext, useLayoutEffect, useMemo, useRef, useState } from 'react'
+
+import { getConfig } from '../config'
+import { isRSC, isSSR, useIsomorphicLayoutEffect } from '../constants/platform'
+import { ThemeContext } from '../contexts/ThemeContext'
+import { areEqualSets } from '../helpers/areEqualSets'
+import {
+  GetNextThemeProps,
+  ThemeManager,
+  ThemeManagerContext,
+  emptyManager,
+} from '../helpers/ThemeManager'
+import { ThemeName, ThemeObject } from '../types'
+import { GetThemeUnwrapped } from './getThemeUnwrapped'
+import { useConstant } from './useConstant'
+import { useServerRef } from './useServerHooks'
+
+export interface ThemeProps {
+  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
+): ThemeObject => {
+  // TODO this can use useChangeThemeEffect almost ready
+  if (isRSC) {
+    const config = getConfig()
+    // @ts-ignore
+    return getThemeProxied(config.themes[config.defaultTheme], config.defaultTheme)
+  }
+
+  const { name, theme, themes, themeManager, className } = useChangeThemeEffect(
+    themeName,
+    componentName,
+    props,
+    forceUpdate
+  )
+
+  if (process.env.NODE_ENV === 'development') {
+    if (props?.debug === 'verbose') {
+      // eslint-disable-next-line no-console
+      console.log('  🔹 useTheme', { themeName, componentName, name, className })
+    }
+  }
+
+  const state = useServerRef() as React.MutableRefObject<UseThemeState>
+  if (!state.current) {
+    state.current = {
+      uuid: {},
+      keys: new Set(),
+      isRendering: true,
+    }
+  }
+  state.current.isRendering = true
+
+  // track usage
+  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)
+    }
+    return themes[getConfig().defaultTheme || 'light']
+  }
+
+  return useMemo(() => {
+    return getThemeProxied(theme, name, className, themeManager, state, debugProp)
+  }, [theme, name, themeManager, className, debugProp])
+}
+
+function getThemeProxied(
+  theme: any,
+  name: string,
+  className?: string,
+  themeManager?: ThemeManager | null,
+  state?: React.MutableRefObject<UseThemeState>,
+  debugProp?: boolean | 'verbose'
+) {
+  return new Proxy(theme, {
+    has(_, key) {
+      if (typeof key === 'string' && key[0] === '$') {
+        key = key.slice(1)
+      }
+      return Reflect.has(theme, key)
+    },
+    get(_, key) {
+      if (key === GetThemeUnwrapped) {
+        return theme
+      }
+      if (key === GetThemeManager) {
+        return themeManager
+      }
+      if (key === 'name') {
+        return name
+      }
+      if (key === 'className') {
+        return className
+      }
+      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 (!themeManager) {
+        return theme[key]
+      }
+      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)
+          }
+        }
+      }
+      return themeManager.getValue(key)
+    },
+  })
+}
+
+const GetThemeManager = Symbol()
+
+export const getThemeManager = (theme: any): ThemeManager | undefined => {
+  if (!theme) return
+  return theme[GetThemeManager]
+}
+
+export const useThemeName = (opts?: { parent?: true }) => {
+  if (isRSC) {
+    const config = getConfig()
+    return config.defaultTheme || 'light'
+  }
+  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 activeThemeManagers = new Set<ThemeManager>()
+
+export const useChangeThemeEffect = (
+  name?: string | null,
+  componentName?: string,
+  props?: ThemeProps,
+  forceUpdateProp?: any
+): {
+  themes: Record<string, ThemeObject>
+  themeManager: ThemeManager | null
+  name: string
+  theme: ThemeObject | null
+  className?: string
+} => {
+  const { themes } = getConfig()
+  if (isRSC) {
+    // we need context working for this to work well
+    const parentManager = new ThemeManager('light', themes.light)
+    const next = parentManager.getNextTheme({
+      name,
+      componentName,
+      themes,
+      reset: props?.reset,
+    })
+    return {
+      ...next,
+      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,
+  }
+  const next = parentManager.getNextTheme(getThemeProps, debug)
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const forceUpdate = forceUpdateProp || useForceUpdate()
+
+  const themeManager = useConstant<ThemeManager | null>(() => {
+    return new ThemeManager(next.name, next.theme, parentManager, reset)
+  })
+
+  // if not SSR
+  if (!isSSR) {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useLayoutEffect(() => {
+      if (!themeManager) return
+
+      activeThemeManagers.add(themeManager)
+
+      if (next?.name) {
+        themeManager.update(next)
+      }
+
+      const disposeParentOnChange = parentManager.onChangeTheme(() => {
+        const next = parentManager.getNextTheme(getThemeProps, debug)
+        if (!next) return
+        if (themeManager.update(next)) {
+          forceUpdate()
+        }
+      })
+
+      return () => {
+        activeThemeManagers.delete(themeManager)
+        disposeParentOnChange()
+      }
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [themes, name, componentName, debug, next?.name])
+  }
+
+  return {
+    ...(parentManager && {
+      name: parentManager.name,
+      theme: parentManager.theme,
+    }),
+    ...next,
+    themes,
+    themeManager,
+  }
+}

package/src/hooks/useUnmountEffect.ts

@@ -0,0 +1,5 @@
+import { useEffect } from 'react'
+
+export function useUnmountEffect(callback: () => void) {
+  return useEffect(() => () => callback(), [])
+}

package/src/index.ts

@@ -0,0 +1,80 @@
+export * from './Tamagui'
+export * from './createComponent'
+export * from './createShorthands'
+export * from './createTheme'
+export * from './createTamagui'
+export * from './createFont'
+export * from './createTokens'
+export * from './createVariable'
+export * from './createVariables'
+export * from './insertFont'
+export * from './addTheme'
+export * from './updateTheme'
+export * from './styled'
+export * from './types'
+
+// for type portability
+export type { RNWTextProps, RNWViewProps } from './types-rnw'
+export { getHasConfigured, getConfig, getThemes, getTokens, onConfiguredOnce } from './config'
+
+export * from './constants/constants'
+export * from './constants/platform'
+export { createDOMProps } from '@tamagui/rnw'
+
+export * from './helpers/calc'
+export * from './helpers/createShallowUpdate'
+export * from './helpers/getStackSize'
+export * from './helpers/getVariantExtras'
+export * from './helpers/getAnimationDriver'
+export * from './helpers/getExpandedShorthands'
+export * from './helpers/getSize'
+export * from './helpers/getSplitStyles'
+export * from './helpers/getStylesAtomic'
+export * from './helpers/pseudoDescriptors'
+export * from './helpers/mergeProps'
+export * from './helpers/expandStyles'
+export * from './helpers/getFont'
+export * from './helpers/isObj'
+export * from './helpers/isTamaguiElement'
+export * from './helpers/isTamaguiComponent'
+export * from './helpers/matchMedia'
+export * from './helpers/startTransition'
+export * from './helpers/themeable'
+export * from './helpers/withStaticProperties'
+
+export * from './contexts/ButtonInsideButtonContext'
+
+export * from './hooks/useConstant'
+export * from './hooks/useId'
+export * from './hooks/useIsMounted'
+export * from './hooks/useIsTouchDevice'
+export {
+  configureMedia,
+  getMedia,
+  mediaState,
+  useMedia,
+  mediaObjectToString,
+  addMediaQueryListener,
+  removeMediaQueryListener,
+  mediaQueryConfig,
+} from './hooks/useMedia'
+export * from './hooks/usePressable'
+export * from './hooks/useTheme'
+export * from './hooks/useIsSSR'
+export * from './hooks/useUnmountEffect'
+export * from './hooks/useSafeRef'
+
+export * from './views/Slot'
+export * from './views/Stack'
+export * from './views/Text'
+export { TextAncestorProvider, TextAncestorContext } 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'
+
+export * from '@tamagui/use-force-update'
+export * from '@tamagui/use-event'
+export * from '@tamagui/helpers'

package/src/injectStyles.ts

@@ -0,0 +1,20 @@
+// for vite dev mode
+
+const stylesheets: Record<string, HTMLElement> = {}
+
+interface InjectStylesOptions {
+  filePath: string
+  css: string
+}
+
+export const injectStyles = ({ filePath, css }: InjectStylesOptions) => {
+  let stylesheet = stylesheets[filePath]
+  if (!stylesheet) {
+    const styleEl = document.createElement('style')
+    styleEl.setAttribute('data-file', filePath)
+    styleEl.setAttribute('type', 'text/css')
+    stylesheet = stylesheets[filePath] = styleEl
+    document.head.appendChild(styleEl)
+  }
+  stylesheet.innerHTML = css
+}

package/src/insertFont.ts

@@ -0,0 +1,69 @@
+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') {
+      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 === '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/static.ts

@@ -0,0 +1,15 @@
+// only stuff that gets extracted or needed by tamagui-static
+
+export * from './index'
+
+// for static
+
+export {
+  createDOMProps,
+  useElementLayout,
+  useMergeRefs,
+  usePlatformMethods,
+  useResponderEvents,
+} from '@tamagui/rnw'
+
+export * from './helpers/proxyThemeVariables'

package/src/styled.tsx

@@ -0,0 +1,149 @@
+import { Image, Text, TextInput } from 'react-native'
+
+import { createComponent } from './createComponent'
+import { RNComponents } from './helpers/RNComponents'
+import {
+  GetProps,
+  GetVariantValues,
+  MediaProps,
+  PseudoProps,
+  StaticConfig,
+  StylableComponent,
+  TamaguiComponent,
+  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 }
+}
+
+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 }
+  },
+  staticExtractionOptions?: Partial<StaticConfig>
+) {
+  const staticConfigProps = (() => {
+    const parentStaticConfig =
+      'staticConfig' in Component ? (Component.staticConfig as StaticConfig) : null
+    if (options) {
+      const { variants, name, defaultVariants, ...defaultProps } = options
+      if (defaultVariants) {
+        Object.assign(defaultProps, defaultVariants)
+      }
+      let isReactNativeWeb = parentStaticConfig?.isReactNativeWeb || RNComponents.has(Component)
+      // this can happen due to smart-ness in fake-react-native, rough heuristic here to ensure we match (could be better..)
+      if (!('staticConfig' in Component) && !isReactNativeWeb) {
+        if (RNComponents.has(Component['displayName'])) {
+          RNComponents.add(Component)
+          isReactNativeWeb = true
+        } else {
+          if (process.env.NODE_ENV === 'development') {
+            // eslint-disable-next-line no-console
+            console.warn(
+              `Invalid styled() component: Tamagui only accepts react-native Text, View, Image, TextInput, or another styled Tamagui view`
+            )
+          }
+        }
+      }
+      const reactNativeWebComponent = isReactNativeWeb
+        ? parentStaticConfig?.reactNativeWebComponent || Component
+        : null
+      const isTamagui = !isReactNativeWeb && !!parentStaticConfig
+      const Comp = reactNativeWebComponent || (Component as any)
+      const isImage = !!(defaultProps.isImage || (!isTamagui ? Comp === Image : false))
+      const isInput = !!(defaultProps.isInput || (!isTamagui ? Comp === TextInput : false))
+      const isText = !!(defaultProps.isText || (!isTamagui ? isInput || Comp === Text : false))
+
+      const conf: Partial<StaticConfig> = {
+        ...staticExtractionOptions,
+        ...(!isTamagui && {
+          Component: Comp,
+        }),
+        isTamagui,
+        // this type gets messed up by options?: Partial<GetProps<ParentComponent>> above
+        // take away the Partial<> and it's fine
+        variants,
+        defaultProps,
+        defaultVariants,
+        componentName: name,
+        isReactNativeWeb,
+        // for nesting multiple levels of rnw styled() need keep use the OG component
+        reactNativeWebComponent,
+        isInput,
+        isText,
+        isImage,
+      }
+
+      return conf
+    }
+    return {}
+  })()
+
+  const component = createComponent(staticConfigProps, Component)
+
+  // get parent props without pseudos and medias so we can rebuild both with new variants
+  type ParentPropsBase = ParentComponent extends TamaguiComponent<any, any, infer P>
+    ? P
+    : GetProps<ParentComponent>
+  type ParentVariants = ParentComponent extends TamaguiComponent<any, any, any, infer V> ? V : {}
+
+  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>>
+
+  return component as TamaguiComponent<
+    Props,
+    // TODO infer ref
+    any,
+    ParentPropsBase,
+    ParentVariants & OurVariants
+  >
+}
+
+// import { Stack } from './views/Stack'
+// const X = styled(Stack, {
+//   variants: {
+//     size: {
+//       '...size': (val) => {
+//         return {}
+//       }
+//     },
+//     disabled: {
+//       true: {
+//         opacity: 0.5,
+//         pointerEvents: 'none',
+//       },
+//     },
+//   }
+// })
+// type variants = GetStyledVariants<typeof X>
+// const y = <X disabled size="$10" />