@tamagui/core 1.0.0-alpha.0

package/src/constants/rnw.tsx

@@ -0,0 +1,20 @@
+const interopRequire = (src: any) => ('default' in src ? src.default : src)
+
+export const rnw: Record<string, any> = {}
+
+// in static mode, require them directly since we can't import react-native-web at all (it has flow stuff in it)
+if (process.env.IS_STATIC === 'is_static') {
+  const createCompileableStyle = require('react-native-web/dist/cjs/exports/StyleSheet/createCompileableStyle')
+  const createReactDOMStyle = require('react-native-web/dist/cjs/exports/StyleSheet/createReactDOMStyle')
+  const i18Style = require('react-native-web/dist/cjs/exports/StyleSheet/i18nStyle')
+  const atomic = require('react-native-web/dist/cjs/exports/StyleSheet/compile').atomic
+  Object.assign(rnw, {
+    createCompileableStyle,
+    createReactDOMStyle,
+    i18Style,
+    atomic,
+  })
+} else if (process.env.TAMAGUI_TARGET === 'web') {
+  // when targeting web (client) import it like so
+  Object.assign(rnw, interopRequire(require('react-native-web').TamaguiExports))
+}

package/src/createComponent.tsx

@@ -0,0 +1,596 @@
+import { concatClassName, stylePropsView } from '@tamagui/helpers'
+import React, {
+  Children,
+  Fragment,
+  createElement,
+  forwardRef,
+  useCallback,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+} from 'react'
+import { StyleSheet, Text, View, ViewStyle } from 'react-native'
+
+import { stackDefaultStyles } from './constants/constants'
+import { isTouchDevice, isWeb } from './constants/platform'
+import { rnw } from './constants/rnw'
+import { onConfiguredOnce } from './createTamagui'
+import { addStylesUsingClassname, useStylesAsClassname } from './helpers/addStylesUsingClassname'
+import { extendStaticConfig, parseStaticConfig } from './helpers/extendStaticConfig'
+import { getSplitStyles } from './helpers/getSplitStyles'
+import { useFeatures } from './hooks/useFeatures'
+import { useForceUpdate } from './hooks/useForceUpdate'
+import { usePressable } from './hooks/usePressable'
+import {
+  SpaceTokens,
+  StaticComponent,
+  StaticConfig,
+  StaticConfigParsed,
+  TamaguiInternalConfig,
+} from './types'
+import { TextAncestorContext } from './views/TextAncestorContext'
+import { ThemeManagerContext } from './views/ThemeManagerContext'
+
+export const mouseUps = new Set<Function>()
+
+if (typeof document !== 'undefined') {
+  document.addEventListener('mouseup', () => {
+    mouseUps.forEach((x) => x())
+    mouseUps.clear()
+  })
+}
+
+type DefaultProps = {}
+
+export function createComponent<A extends Object = DefaultProps>(
+  configIn: Partial<StaticConfig> | StaticConfigParsed
+) {
+  let staticConfig: StaticConfigParsed
+  if ('parsed' in configIn) {
+    staticConfig = configIn
+  } else {
+    staticConfig = parseStaticConfig(configIn)
+  }
+
+  const { Component, validStyles, isText, isZStack } = staticConfig
+  const validStyleProps = validStyles ?? stylePropsView
+
+  // split out default styles vs props so we can assign it to component.defaultProps
+  let defaultProps = null as any
+  let tamaguiConfig: TamaguiInternalConfig
+
+  // web uses className, native uses style
+  let defaultsStyle: any
+  let defaultsClassName = ''
+  let initialTheme: any
+
+  // see onConfiguredOnce below which attaches a name then to this component
+
+  const component = forwardRef<View, A>((props: any, forwardedRef) => {
+    const {
+      tag,
+      hitSlop,
+      children,
+      pointerEvents,
+      onPress,
+      onPressIn,
+      onPressOut,
+      onHoverIn,
+      onHoverOut,
+      space,
+      disabled,
+      onMouseEnter,
+      onMouseLeave,
+      hrefAttrs,
+      onMoveShouldSetResponder,
+      onMoveShouldSetResponderCapture,
+      onResponderEnd,
+      onResponderGrant,
+      onResponderMove,
+      onResponderReject,
+      onResponderRelease,
+      onResponderStart,
+      onResponderTerminate,
+      onResponderTerminationRequest,
+      onScrollShouldSetResponder,
+      onScrollShouldSetResponderCapture,
+      onSelectionChangeShouldSetResponder,
+      onSelectionChangeShouldSetResponderCapture,
+      onStartShouldSetResponder,
+      onStartShouldSetResponderCapture,
+      onMouseDown,
+      onClick,
+      // TODO feature load layou hook
+      onLayout,
+    } = props
+
+    const forceUpdate = useForceUpdate()
+    const features = useFeatures(props, { forceUpdate })
+    const manager = useContext(ThemeManagerContext)
+    const [state, set_] = useState(() => ({
+      hover: false,
+      press: false,
+      pressIn: false,
+      theme: manager.name,
+    }))
+    const set = (next: Partial<typeof state>) =>
+      set_((prev) => {
+        for (const key in next) {
+          if (prev[key] !== next[key]) {
+            return { ...prev, ...next }
+          }
+        }
+        return prev
+      })
+
+    // from react-native-web
+    if (process.env.NODE_ENV === 'development' && !isText && isWeb) {
+      Children.toArray(props.children).forEach((item) => {
+        if (typeof item === 'string') {
+          console.error(`Unexpected text node: ${item}. A text node cannot be a child of a <View>.`)
+        }
+      })
+    }
+
+    const hasTextAncestor = isWeb ? useContext(TextAncestorContext) : false
+    const hostRef = useRef(null)
+
+    if (isWeb) {
+      // from react-native-web
+      rnw.useResponderEvents(hostRef, {
+        onMoveShouldSetResponder,
+        onMoveShouldSetResponderCapture,
+        onResponderEnd,
+        onResponderGrant,
+        onResponderMove,
+        onResponderReject,
+        onResponderRelease,
+        onResponderStart,
+        onResponderTerminate,
+        onResponderTerminationRequest,
+        onScrollShouldSetResponder,
+        onScrollShouldSetResponderCapture,
+        onSelectionChangeShouldSetResponder,
+        onSelectionChangeShouldSetResponderCapture,
+        onStartShouldSetResponder,
+        onStartShouldSetResponderCapture,
+      })
+    }
+
+    const isTracking = useRef(false)
+
+    const { viewProps, pseudos, style, classNames } = getSplitStyles(
+      props,
+      staticConfig,
+      (manager.theme as any) || initialTheme
+    )
+
+    // hasEverHadEvents prevents repareting if you remove onPress or similar...
+    const internal = useRef<{ isMounted: boolean; hasEverHadEvents?: boolean }>()
+    if (!internal.current) {
+      internal.current = {
+        isMounted: true,
+      }
+    }
+
+    useEffect(() => {
+      internal.current!.isMounted = true
+      const dispose = manager?.onChangeTheme((name) => {
+        if (isTracking.current) {
+          set({ theme: name })
+        }
+      })
+      return () => {
+        dispose()
+        mouseUps.delete(unPress)
+        isTracking.current = false
+        internal.current!.isMounted = false
+      }
+    }, [manager])
+
+    // element
+    const element = isWeb
+      ? !Component || typeof Component === 'string'
+        ? // default to tag, fallback to component (when both strings)
+          tag || Component
+        : Component
+      : Component
+    const ReactView = !isWeb ? View : element || (hasTextAncestor ? 'span' : 'div')
+    const ReactText = !isWeb ? Text : element || 'span'
+    const ViewComponent = isText ? ReactText : ReactView
+
+    // styles
+    const isHovering = !isTouchDevice && !disabled && pseudos && state.hover
+    const isPressing = !disabled && pseudos && state.press
+
+    const styles = [
+      // parity w react-native-web, only for text in text
+      // TODO this should be able to be done w css to replicate after extraction:
+      //  (.text .text { display: inline-flex; }) (but if they set display we'd need stronger precendence)
+      // isText && hasTextAncestor && isWeb ? { display: 'inline-flex' } : null,
+      style,
+      isHovering ? pseudos.hoverStyle || null : null,
+      isPressing ? pseudos.pressStyle || null : null,
+    ]
+
+    if (isWeb) {
+      const stylesClassNames = useStylesAsClassname(styles)
+      const classList = isText
+        ? [
+            defaultsClassName,
+            // hasTextAncestor === true && cssText.textHasAncestor,
+            // TODO MOVE TO VARIANTS [number] [any]
+            // numberOfLines != null && numberOfLines > 1 && cssText.textMultiLine,
+            classNames,
+            stylesClassNames,
+            props.className,
+          ]
+        : [defaultsClassName, props.className, classNames, stylesClassNames]
+
+      const className = concatClassName(...classList)
+      if (process.env.NODE_ENV === 'development') {
+        if (props['debug']) {
+          // prettier-ignore
+          console.log('🥚 className', { style, styles, classList, stylesClassNames, className })
+        }
+      }
+      viewProps.className = className
+    } else {
+      viewProps.style = styles
+    }
+
+    if (pointerEvents) {
+      viewProps.pointerEvents = pointerEvents
+    }
+
+    if (isWeb) {
+      // from react-native-web
+      const platformMethodsRef = rnw.usePlatformMethods(viewProps)
+      const setRef = rnw.useMergeRefs(hostRef, platformMethodsRef, forwardedRef)
+      viewProps.ref = setRef
+      if (props.href != null && hrefAttrs != null) {
+        const { download, rel, target } = hrefAttrs
+        if (download != null) {
+          viewProps.download = download
+        }
+        if (rel != null) {
+          viewProps.rel = rel
+        }
+        if (typeof target === 'string') {
+          viewProps.target = target.charAt(0) !== '_' ? '_' + target : target
+        }
+      }
+    } else {
+      if (forwardedRef) {
+        viewProps.ref = forwardedRef
+      }
+    }
+
+    const attachPress = !!(
+      (pseudos && pseudos.pressStyle) ||
+      onPress ||
+      onPressOut ||
+      onPressIn ||
+      onClick
+    )
+    const attachHover =
+      isWeb &&
+      !isTouchDevice &&
+      !!((pseudos && pseudos.hoverStyle) || onHoverIn || onHoverOut || onMouseEnter || onMouseLeave)
+
+    // check presence to prevent reparenting bugs, allows for onPress={x ? function : undefined} usage
+    // while avoiding reparenting...
+    // once proper reparenting is supported, we can remove this and use that...
+    const shouldAttach =
+      internal.current.hasEverHadEvents ||
+      attachPress ||
+      attachHover ||
+      'pressStyle' in props ||
+      'onPress' in props ||
+      'onPressIn' in props ||
+      'onPressOut' in props ||
+      (isWeb &&
+        ('hoverStyle' in props ||
+          'onClick' in props ||
+          'onHoverIn' in props ||
+          'onHoverOut' in props ||
+          'onMouseEnter' in props ||
+          'onMouseLeave' in props))
+
+    // never remove events as we wrap in a div (for now, may be able to remove..)
+    if (shouldAttach) {
+      internal.current.hasEverHadEvents = true
+    }
+
+    const unPress = useCallback(() => {
+      if (!internal.current!.isMounted) return
+      set({
+        press: false,
+        pressIn: false,
+      })
+    }, [])
+
+    const events = shouldAttach
+      ? {
+          ...(!isWeb && {
+            // non web
+            onPressOut: (e) => {
+              unPress()
+              onPressOut?.(e)
+            },
+          }),
+          ...(isWeb &&
+            !isTouchDevice && {
+              onMouseEnter:
+                attachHover || attachPress
+                  ? (e) => {
+                      let next: Partial<typeof state> = {}
+                      if (attachHover) {
+                        next.hover = true
+                      }
+                      if (state.pressIn) {
+                        next.press = true
+                      }
+                      if (Object.keys(next).length) {
+                        set(next)
+                      }
+                      onHoverIn?.(e)
+                      onMouseEnter?.(e)
+                    }
+                  : undefined,
+              onMouseLeave:
+                attachHover || attachPress
+                  ? (e) => {
+                      let next: Partial<typeof state> = {}
+                      mouseUps.add(unPress)
+                      if (attachHover) {
+                        next.hover = false
+                      }
+                      if (state.pressIn) {
+                        next.press = false
+                        next.pressIn = false
+                      }
+                      if (Object.keys(next).length) {
+                        set(next)
+                      }
+                      onHoverOut?.(e)
+                      onMouseLeave?.(e)
+                    }
+                  : undefined,
+            }),
+          onMouseDown: attachPress
+            ? (e) => {
+                set({
+                  press: true,
+                  pressIn: true,
+                })
+                onPressIn?.(e)
+                onMouseDown?.(e)
+              }
+            : (onPressIn as any),
+          onClick: attachPress
+            ? (e) => {
+                // this caused issue with next.js passing href
+                // e.preventDefault()
+                onPress?.(e)
+                onClick?.(e)
+                unPress()
+                onPressOut?.(e)
+              }
+            : (onPressOut as any),
+        }
+      : null
+
+    if (events) {
+      if (typeof ViewComponent !== 'string') {
+        // TODO once we do the above we can then rely entirely on pressStyle returned here isntead of above pressStyle logic
+        const [pressProps] = usePressable({
+          disabled,
+          hitSlop,
+          onPressIn: events.onMouseDown,
+          onPressOut: events.onPressOut,
+          onPress: events.onClick,
+        })
+        Object.assign(viewProps, pressProps)
+      } else {
+        Object.assign(viewProps, events)
+      }
+    }
+
+    const childEls = spacedChildren({
+      children,
+      space,
+      flexDirection: props.flexDirection || defaultProps?.flexDirection,
+      isZStack: isZStack,
+    })
+
+    let content: any
+
+    // replicate react-native-web's `createElement`
+    if (isWeb && rnw) {
+      const domProps = rnw.createDOMProps(viewProps)
+      const className =
+        domProps.className && domProps.className !== viewProps.className
+          ? `${domProps.className} ${viewProps.className}`
+          : viewProps.className
+      Object.assign(viewProps, domProps)
+      viewProps.className = className
+      content = createElement(ViewComponent, viewProps, childEls)
+    } else {
+      content = createElement(ViewComponent, viewProps, childEls)
+    }
+
+    const shouldWrapTextAncestor = isWeb && isText && !hasTextAncestor
+    if (shouldWrapTextAncestor) {
+      // from react-native-web
+      // @ts-ignore
+      content = createElement(TextAncestorContext.Provider, { value: true }, content)
+    }
+
+    if (process.env.NODE_ENV === 'development') {
+      if (props['debug']) {
+        viewProps['debug'] = true
+        console.log('🥚 props in:', props)
+        console.log('🥚 props out:', viewProps)
+        console.log(props.onClick?.toString())
+        // prettier-ignore
+        console.log('🥚 etc:', { shouldAttach, ViewComponent, viewProps, styles, pseudos, content, childEls })
+        // only on browser because node expands it huge
+        if (isWeb) {
+          console.log('🥚 component info', { staticConfig, tamaguiConfig })
+        }
+      }
+    }
+
+    return (
+      <>
+        {features}
+        {content}
+      </>
+    )
+  })
+
+  // Once configuration is run and all components are registered
+  // get default props + className and analyze styles
+  onConfiguredOnce((conf) => {
+    tamaguiConfig = conf
+    initialTheme = conf.themes[conf.defaultTheme || Object.keys(conf.themes)[0]]
+    const next = getSplitStyles(staticConfig.defaultProps, staticConfig, initialTheme, true)
+    if (isWeb) {
+      if (next.classNames) {
+        defaultsClassName += next.classNames + ' '
+      }
+      defaultsClassName += addStylesUsingClassname([next.style, next.pseudos])
+    } else {
+      if (!hasWarnedOnce) {
+        hasWarnedOnce = true
+        console.log('⚠️ we need to account for default styles for media queries')
+      }
+    }
+    // @ts-ignore
+    component.defaultProps = {
+      ...next.viewProps,
+      ...component.defaultProps,
+    }
+    if (process.env.NODE_ENV === 'development') {
+      if (staticConfig.defaultProps?.debug) {
+        console.log('tamagui debug component:', next, defaultsClassName, component.defaultProps)
+      }
+    }
+  })
+
+  component['staticConfig'] = {
+    validStyles: validStyleProps,
+    ...staticConfig,
+  }
+
+  const res = component as any as StaticComponent<A, void>
+
+  // add extractable HoC
+  res['extractable'] = (Component: any) => {
+    Component['staticConfig'] = extendStaticConfig(res, {
+      neverFlatten: true,
+      defaultProps: Component.defaultProps,
+    })
+    return Component
+  }
+
+  return res
+}
+
+let hasWarnedOnce = false
+
+// dont used styled() here to avoid circular deps
+// keep inline to avoid circular deps
+
+export const Spacer = createComponent<{ size?: number | SpaceTokens; flex?: boolean | number }>({
+  defaultProps: {
+    ...stackDefaultStyles,
+    size: true,
+  },
+  variants: {
+    size: {
+      '...size': (size, { tokens }) => {
+        size = size == true ? '$true' : size
+        return {
+          width: tokens.size[size] ?? size,
+          height: tokens.size[size] ?? size,
+        }
+      },
+    },
+
+    direction: {
+      horizontal: {
+        height: 0,
+      },
+      vertical: {
+        width: 0,
+      },
+    },
+  },
+})
+
+export function spacedChildren({
+  isZStack,
+  children,
+  space,
+  flexDirection,
+}: {
+  isZStack?: boolean
+  children: any
+  space?: any
+  flexDirection?: ViewStyle['flexDirection']
+}) {
+  if (!space && !isZStack) {
+    return children
+  }
+  const childrenList = Children.toArray(children)
+  const len = childrenList.length
+  if (len === 1) {
+    return children
+  }
+  const next: any[] = []
+  for (const [index, child] of childrenList.entries()) {
+    if (child === null || child === undefined) {
+      continue
+    }
+
+    const key = `${child?.['key'] ?? index}`
+
+    next.push(<Fragment key={key}>{isZStack ? <Absolute>{child}</Absolute> : child}</Fragment>)
+
+    // allows for custom visually hidden components that dont insert spacing
+    if (child?.['type']?.['isVisuallyHidden']) {
+      continue
+    }
+
+    if (index !== len - 1) {
+      if (space) {
+        next.push(
+          <Spacer
+            key={`${key}_spacer`}
+            // @ts-ignore TODO
+            direction={
+              flexDirection === 'row' || flexDirection === 'row-reverse' ? 'horizontal' : 'vertical'
+            }
+            size={space}
+          />
+        )
+      }
+    }
+  }
+  return next
+}
+
+// for now not so "tamagui-y"
+const Absolute = ({ children }) => <View style={sheet.fullscreen}>{children}</View>
+const sheet = StyleSheet.create({
+  fullscreen: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+  },
+})

package/src/createFont.ts

@@ -0,0 +1,26 @@
+import { GenericFont } from './types'
+
+export const createFont = <A extends GenericFont>(font: A): A => {
+  // fills in any missing values based on size keys being standard
+  const sizeKeys = Object.keys(font.size)
+
+  for (const key in font) {
+    if (key === 'size' || key === 'family') continue
+    const section = font[key]
+    const keys = Object.keys(section)
+
+    // fill with first filled in value to start
+    let fillVal = section[keys[0]]
+
+    for (const sKey of sizeKeys) {
+      if (!(sKey in section)) {
+        section[sKey] = fillVal
+      } else {
+        // if exists, set as the fillVal
+        fillVal = section[sKey]
+      }
+    }
+  }
+
+  return Object.freeze(font)
+}

package/src/createShorthands.ts

@@ -0,0 +1,5 @@
+// type helper
+
+export function createShorthands<A extends Record<string, string>>(shorthands: A): A {
+  return Object.freeze(shorthands) as any
+}