@tamagui/core 1.0.1-beta.138 → 1.0.1-beta.141

package/src/hooks/useTheme.tsx

@@ -0,0 +1,218 @@
+import { useForceUpdate } from '@tamagui/use-force-update'
+import React, { useContext, useLayoutEffect, useMemo, useRef, useState } from 'react'
+
+import { getConfig } from '../conf'
+import { isSSR, isWeb, 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'
+
+export type ThemeProps = {
+  className?: string
+  disableThemeClass?: boolean
+  name: Exclude<ThemeName, number> | null
+  componentName?: string
+  children?: any
+  reset?: boolean
+  debug?: boolean | 'verbose'
+}
+
+type UseThemeState = {
+  uuid: Object
+  keys: Set<string>
+  isRendering: boolean
+}
+
+export const useTheme = (
+  themeName?: string | null,
+  componentName?: string,
+  props?: ThemeProps,
+  forceUpdate?: any
+): ThemeObject => {
+  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 = useRef() 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 new Proxy(theme, {
+      has(_, key) {
+        if (typeof key === 'string') {
+          if (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)
+        }
+        if (!themeManager) {
+          console.error('No themeManager')
+          return
+        }
+        // auto convert variables to plain
+        if (key[0] === '$') {
+          key = key.slice(1)
+        }
+        if (state.current.isRendering && !state.current.keys.has(key)) {
+          state.current.keys.add(key)
+          if (process.env.NODE_ENV === 'development' && debugProp === 'verbose') {
+            console.log('  🔸 tracking theme', key)
+          }
+        }
+        return themeManager.getValue(key)
+      },
+    })
+  }, [name, theme, componentName, className, debugProp])
+}
+
+const GetThemeManager = Symbol()
+
+export const getThemeManager = (theme: any): ThemeManager | undefined => {
+  if (!theme) return
+  return theme[GetThemeManager]
+}
+
+export const useThemeName = (opts?: { parent?: true }) => {
+  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
+) => {
+  const debug = props && props['debug']
+  const parentManager = useContext(ThemeManagerContext) || emptyManager
+  const { themes } = useContext(ThemeContext)!
+  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>(() => {
+    // if (!next) return null
+    // RSC test
+    // if (typeof document === 'undefined') return 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,79 @@
+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 './conf'
+
+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/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/insertFont.ts

@@ -0,0 +1,69 @@
+import { setConfigFont } from './conf'
+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,135 @@
+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)
+      }
+      const isReactNativeWeb = parentStaticConfig?.isReactNativeWeb || RNComponents.has(Component)
+      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" />

package/src/types-rnw.tsx

@@ -0,0 +1,162 @@
+// The following list is sourced from:
+// - https://github.com/necolas/react-native-web/blob/0.17.5/packages/react-native-web/src/types/styles.js#L76
+type RNWCursorValue =
+  | 'alias'
+  | 'all-scroll'
+  | 'auto'
+  | 'cell'
+  | 'context-menu'
+  | 'copy'
+  | 'crosshair'
+  | 'default'
+  | 'grab'
+  | 'grabbing'
+  | 'help'
+  | 'pointer'
+  | 'progress'
+  | 'wait'
+  | 'text'
+  | 'vertical-text'
+  | 'move'
+  | 'none'
+  | 'no-drop'
+  | 'not-allowed'
+  | 'zoom-in'
+  | 'zoom-out'
+  | 'col-resize'
+  | 'e-resize'
+  | 'ew-resize'
+  | 'n-resize'
+  | 'ne-resize'
+  | 'ns-resize'
+  | 'nw-resize'
+  | 'row-resize'
+  | 's-resize'
+  | 'se-resize'
+  | 'sw-resize'
+  | 'w-resize'
+  | 'nesw-resize'
+  | 'nwse-resize'
+
+// This list is the combination of the following two lists:
+// - https://github.com/necolas/react-native-web/blob/0.17.5/packages/react-native-web/src/modules/AccessibilityUtil/propsToAriaRole.js#L10
+// - https://github.com/necolas/react-native-web/blob/0.17.5/packages/react-native-web/src/modules/AccessibilityUtil/propsToAccessibilityComponent.js#L12
+// Plus the single hard-coded value "label" from here:
+// - https://github.com/necolas/react-native-web/blob/0.17.5/packages/react-native-web/src/modules/AccessibilityUtil/propsToAccessibilityComponent.js#L36
+type RNWWebAccessibilityRole =
+  | 'adjustable'
+  | 'article'
+  | 'banner'
+  | 'blockquote'
+  | 'button'
+  | 'code'
+  | 'complementary'
+  | 'contentinfo'
+  | 'deletion'
+  | 'emphasis'
+  | 'figure'
+  | 'form'
+  | 'header'
+  | 'image'
+  | 'imagebutton'
+  | 'insertion'
+  | 'keyboardkey'
+  | 'label'
+  | 'link'
+  | 'list'
+  | 'listitem'
+  | 'main'
+  | 'navigation'
+  | 'none'
+  | 'region'
+  | 'search'
+  | 'strong'
+  | 'summary'
+  | 'text'
+
+export interface RNWViewProps {
+  // our internal hack to pass className down (until styleq transition)
+  dataSet?: any
+
+  // TODO get proper types:
+  target?: any
+  rel?: any
+  download?: any
+
+  accessibilityRole?: RNWWebAccessibilityRole
+  href?: string
+  hrefAttrs?: {
+    target?: '_blank' | '_self' | '_top' | 'blank' | 'self' | 'top'
+    rel?: string
+    download?: boolean
+  }
+  onMouseDown?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void
+  onMouseUp?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void
+  onMouseEnter?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void
+  onMouseLeave?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void
+  onFocus?: (event: React.FocusEvent<HTMLDivElement>) => void
+  onScroll?: (event: React.UIEvent<HTMLDivElement, UIEvent>) => void
+  // For compatibility with RNW internals
+  onScrollShouldSetResponder?: unknown
+  onScrollShouldSetResponderCapture?: unknown
+  onSelectionChangeShouldSetResponder?: unknown
+  onSelectionChangeShouldSetResponderCapture?: unknown
+}
+
+export interface RNWTextProps {
+  dir?: 'ltr' | 'rtl' | 'auto'
+  focusable?: boolean
+  accessibilityRole?: RNWWebAccessibilityRole
+  accessibilityState?: {
+    busy?: boolean
+    checked?: boolean | 'mixed'
+    disabled?: boolean
+    expanded?: boolean
+    grabbed?: boolean
+    hidden?: boolean
+    invalid?: boolean
+    pressed?: boolean
+    readonly?: boolean
+    required?: boolean
+    selected?: boolean
+  }
+  href?: string
+  // TODO hrefAttrs or come up with proper html escape hatch
+  // hrefAttrs?: {
+  //   target?: '_blank' | '_self' | '_top' | 'blank' | 'self' | 'top'
+  //   rel?: string
+  //   download?: boolean
+  // }
+  onMouseEnter?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void
+  onMouseLeave?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void
+  onFocus?: (event: React.FocusEvent<HTMLDivElement>) => void
+  // For compatibility with RNW internals
+  onMoveShouldSetResponder?: unknown
+  onMoveShouldSetResponderCapture?: unknown
+  onResponderEnd?: unknown
+  onResponderGrant?: unknown
+  onResponderMove?: unknown
+  onResponderReject?: unknown
+  onResponderRelease?: unknown
+  onResponderStart?: unknown
+  onResponderTerminate?: unknown
+  onResponderTerminationRequest?: unknown
+  onScrollShouldSetResponder?: unknown
+  onScrollShouldSetResponderCapture?: unknown
+  onSelectionChangeShouldSetResponder?: unknown
+  onSelectionChangeShouldSetResponderCapture?: unknown
+  onStartShouldSetResponder?: unknown
+  onStartShouldSetResponderCapture?: unknown
+}
+
+export interface RNWViewStyle {
+  cursor?: RNWCursorValue
+  transitionProperty?: string
+  display?: 'flex' | 'inline-flex' | 'none'
+}
+
+export interface RNWTextStyle {
+  // The following list is sourced from:
+  // - https://github.com/necolas/react-native-web/blob/0.17.5/packages/react-native-web/src/types/styles.js#L128
+  userSelect?: 'all' | 'auto' | 'contain' | 'none' | 'text'
+}