@tamagui/core 1.0.0-alpha.2 → 1.0.0-alpha.20

package/src/createComponent.tsx

@@ -1,4 +1,5 @@
 import { concatClassName, stylePropsView } from '@tamagui/helpers'
+import { useForceUpdate } from '@tamagui/use-force-update'
 import React, {
   Children,
   Fragment,
@@ -20,7 +21,6 @@ import { addStylesUsingClassname, useStylesAsClassname } from './helpers/addStyl
 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,
@@ -68,6 +68,46 @@ export function createComponent<A extends Object = DefaultProps>(
   // see onConfiguredOnce below which attaches a name then to this component
 
   const component = forwardRef<View, A>((props: any, forwardedRef) => {
+    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)
+
+    const theme = (manager.theme as any) || initialTheme
+
+    const {
+      viewProps: viewPropsIn,
+      pseudos,
+      style,
+      classNames,
+    } = getSplitStyles(props, staticConfig, theme)
+
     const {
       tag,
       hitSlop,
@@ -101,40 +141,19 @@ export function createComponent<A extends Object = DefaultProps>(
       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
-      })
+      accessible,
+      accessibilityRole,
 
-    // 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>.`)
-        }
-      })
-    }
+      // TODO feature load layout hook
+      onLayout,
+      ...viewProps
+    } = viewPropsIn
 
-    const hasTextAncestor = isWeb ? useContext(TextAncestorContext) : false
-    const hostRef = useRef(null)
+    if (!isWeb) {
+      if (accessible) viewProps.accessible = accessible
+      if (accessibilityRole) viewProps.accessibilityRole = accessibilityRole
+    }
 
     if (isWeb) {
       // from react-native-web
@@ -160,12 +179,6 @@ export function createComponent<A extends Object = DefaultProps>(
 
     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) {
@@ -228,7 +241,7 @@ export function createComponent<A extends Object = DefaultProps>(
           ]
         : [defaultsClassName, props.className, classNames, stylesClassNames]
 
-      // @ts-expect-error
+      // @ts-ignore we are optimizing using arguments
       const className = concatClassName(...classList)
       if (process.env.NODE_ENV === 'development') {
         if (props['debug']) {
@@ -466,7 +479,7 @@ export function createComponent<A extends Object = DefaultProps>(
     } else {
       if (!hasWarnedOnce) {
         hasWarnedOnce = true
-        console.log('⚠️ we need to account for default styles for media queries')
+        console.log('⚠️ TODO account for default styles for media queries')
       }
     }
     // @ts-ignore
@@ -489,10 +502,14 @@ export function createComponent<A extends Object = DefaultProps>(
   const res = component as any as StaticComponent<A, void>
 
   // add extractable HoC
-  res['extractable'] = (Component: any) => {
+  res['extractable'] = (Component: any, conf?: StaticConfig) => {
     Component['staticConfig'] = extendStaticConfig(res, {
+      ...conf,
       neverFlatten: true,
-      defaultProps: Component.defaultProps,
+      defaultProps: {
+        ...Component.defaultProps,
+        ...conf?.defaultProps,
+      },
     })
     return Component
   }

package/src/createFont.ts

@@ -1,6 +1,11 @@
+import { validateFont } from './helpers/validate'
 import { GenericFont } from './types'
 
 export const createFont = <A extends GenericFont>(font: A): A => {
+  if (process.env.NODE_ENV === 'development') {
+    validateFont(font)
+  }
+
   // fills in any missing values based on size keys being standard
   const sizeKeys = Object.keys(font.size)
 

package/src/createTamagui.ts

@@ -2,6 +2,7 @@ import { getStyleRules } from '@tamagui/helpers'
 
 import { Variable, createVariable, isVariable } from './createVariable'
 import { createTamaguiProvider } from './helpers/createTamaguiProvider'
+import { validateConfig } from './helpers/validate'
 import { configureMedia } from './hooks/useMedia'
 import {
   CreateTamaguiConfig,
@@ -27,7 +28,10 @@ export type CreateTamaguiProps = TamaguiProviderProps &
 let conf: TamaguiInternalConfig | null
 
 export const getHasConfigured = () => !!conf
-export const getTamaguiConfig = () => conf!
+
+export const getTamagui = () => conf!
+export const getTokens = () => conf!.tokensParsed
+export const getThemes = () => conf!.themes
 
 type ConfigListener = (conf: TamaguiInternalConfig) => void
 const configListeners = new Set<ConfigListener>()
@@ -46,6 +50,12 @@ export function createTamagui<Conf extends CreateTamaguiProps>(
 ): Conf extends CreateTamaguiConfig<infer A, infer B, infer C, infer D>
   ? TamaguiInternalConfig<A, B, C, D>
   : unknown {
+  if (process.env.NODE_ENV === 'development') {
+    // config is re-run by the @tamagui/static, dont double validate
+    if (!config['parsed']) {
+      validateConfig(config)
+    }
+  }
   // test env loads a few times as it runs diff tests
   if (conf) {
     console.warn('Called createTamagui twice! Should never do so')
@@ -157,6 +167,7 @@ export function createTamagui<Conf extends CreateTamaguiProps>(
     themeConfig,
     themeParsed,
     tokensParsed,
+    parsed: true,
     getCSS() {
       return `${themeConfig.css}\n${[...getStyleRules()].join('\n')}`
     },

package/src/createTheme.ts

@@ -3,7 +3,8 @@ import { Variable, createVariable } from './createVariable'
 export const createTheme = <Theme extends { [key: string]: string | Variable }>(
   theme: Theme
 ): {
-  [key in keyof Theme]: Variable
+  // allow string | Variable
+  [key in keyof Theme]: Variable | string
 } => {
   const res = {} as any
   for (const key in theme) {
@@ -13,6 +14,8 @@ export const createTheme = <Theme extends { [key: string]: string | Variable }>(
         name: key,
         val,
       })
+    } else {
+      res[key] = val
     }
   }
   return res

package/src/createTokens.ts

@@ -1,9 +1,14 @@
 import { Variable, createVariable } from './createVariable'
+import { validateTokens } from './helpers/validate'
 import { CreateTokens } from './types'
 
-// tokens.color.dark.red ===>{ var: `color-dark-red`, val: '' }
+// tokens.color.dark.red ===> { var: `color-dark-red`, val: '' }
 
 export function createTokens<T extends CreateTokens>(tokens: T): MakeTokens<T> {
+  if (process.env.NODE_ENV === 'development') {
+    validateTokens(tokens)
+  }
+
   return setupTokens(tokens) as any
 }
 

package/src/createVariable.ts

@@ -11,6 +11,10 @@ export class Variable {
     this.name = name
     this.variable = isWeb ? `var(--${name})` : this.val
   }
+
+  toString() {
+    return `${isWeb ? this.variable : this.val}`
+  }
 }
 
 type VariableIn = { val: string | number; name: string }

package/src/helpers/createPropMapper.ts

@@ -1,4 +1,5 @@
-import { getTamaguiConfig } from '../createTamagui'
+import { isWeb } from '../constants/platform'
+import { getTamagui } from '../createTamagui'
 import { Variable } from '../createVariable'
 import { StaticConfig, TamaguiInternalConfig } from '../types'
 import { isObj } from './isObj'
@@ -9,7 +10,7 @@ export const createPropMapper = (c: StaticConfig) => {
   const defaultProps = c.defaultProps || {}
 
   return (key: string, value: any, theme: any, props: any) => {
-    const conf = getTamaguiConfig()
+    const conf = getTamagui()
     if (!conf) {
       console.trace('no conf! err')
       return
@@ -37,7 +38,7 @@ export const createPropMapper = (c: StaticConfig) => {
           : val
 
       if (isObj(res)) {
-        resolveTokens(res, conf, fontFamily)
+        resolveTokens(res, conf, theme, fontFamily)
       }
 
       return res
@@ -53,7 +54,7 @@ export const createPropMapper = (c: StaticConfig) => {
 
     if (value && value[0] === '$') {
       shouldReturn = true
-      value = getToken(key, value, conf, fontFamily)
+      value = getToken(key, value, conf, theme, fontFamily)
     }
 
     if (value instanceof Variable) {
@@ -69,19 +70,19 @@ export const createPropMapper = (c: StaticConfig) => {
   }
 }
 
-const resolveTokens = (res: any, conf: TamaguiInternalConfig, fontFamily: any) => {
+const resolveTokens = (res: any, conf: TamaguiInternalConfig, theme: any, fontFamily: any) => {
   for (const rKey in res) {
     const fKey = conf.shorthands[rKey] || rKey
     const val = res[rKey]
     if (val instanceof Variable) {
       res[fKey] = val.variable
     } else if (typeof val === 'string') {
-      const fVal = val[0] === '$' ? getToken(fKey, val, conf, fontFamily) : val
+      const fVal = val[0] === '$' ? getToken(fKey, val, conf, theme, fontFamily) : val
       res[fKey] = fVal
     } else {
       if (isObj(val)) {
         // for things like shadowOffset which is a sub-object
-        resolveTokens(val, conf, fontFamily)
+        resolveTokens(val, conf, theme, fontFamily)
       }
       // nullish values cant be tokens so need no exrta parsing
     }
@@ -92,10 +93,17 @@ const getToken = (
   key: string,
   value: string,
   { tokensParsed, themeParsed }: TamaguiInternalConfig,
+  theme: any,
   fontFamily: string | undefined = '$body'
 ) => {
   if (themeParsed[value]) {
-    return themeParsed[value].variable
+    if (isWeb && themeParsed[value].variable) {
+      return themeParsed[value].variable
+    } else {
+      if (value && value[0] === '$') {
+        return theme[`${value.slice(1)}`]?.val || themeParsed[value]?.val
+      }
+    }
   }
   let valOrVar: any
   if (key === 'fontFamily') {

package/src/helpers/getSplitStyles.tsx

@@ -8,7 +8,7 @@ import {
 import { ViewStyle } from 'react-native'
 
 import { isWeb } from '../constants/platform'
-import { mediaQueryConfig } from '../hooks/useMedia'
+import { mediaQueryConfig, mediaState } from '../hooks/useMedia'
 import { StaticConfigParsed, ThemeObject } from '../types'
 import { createMediaStyle } from './createMediaStyle'
 import { fixNativeShadow } from './fixNativeShadow'
@@ -28,7 +28,6 @@ export const getSplitStyles = (
   const validStyleProps = staticConfig.isText ? stylePropsText : validStyles
   const viewProps: Record<string, any> = {}
   const style: any[] = []
-  const blacklistProps = isSplittingDefaultProps ? blacklistDefaultProps : blacklistFinalProps
 
   let pseudos: { hoverStyle?: ViewStyle; pressStyle?: ViewStyle } | null = null
   let cur: ViewStyle | null = null
@@ -54,14 +53,15 @@ export const getSplitStyles = (
       const mediaProps = { ...props, ...valInit }
       // TODO media + hover
       const mediaStyle = getSubStyle(valInit, staticConfig, theme, props)
-      const mediaStyles = getStylesAtomic(mediaStyle)
-      if (process.env.NODE_ENV === 'development') {
-        if (props['debug']) {
-          console.log('mediaStyles', keyInit, { mediaProps, mediaStyle, mediaStyles })
+
+      if (isWeb) {
+        const mediaStyles = getStylesAtomic(mediaStyle)
+        if (process.env.NODE_ENV === 'development') {
+          if (props['debug']) {
+            console.log('mediaStyles', keyInit, { mediaProps, mediaStyle, mediaStyles })
+          }
         }
-      }
-      for (const style of mediaStyles) {
-        if (isWeb) {
+        for (const style of mediaStyles) {
           const out = createMediaStyle(style, mediaKey, mediaQueryConfig)
           classNames = classNames || []
           classNames.push(out.identifier)
@@ -70,8 +70,10 @@ export const getSplitStyles = (
           if (process.env.NODE_ENV === 'development' && props['debug']) {
             console.log('mediaProp', style.identifier, out, mediaProps, mediaStyle, mediaStyles)
           }
-        } else {
-          console.log('TODO native media style logic')
+        }
+      } else {
+        if (mediaState[mediaKey]) {
+          style.push(mediaStyle)
         }
       }
       continue
@@ -130,8 +132,9 @@ export const getSplitStyles = (
         cur[key] = val
         continue
       }
-      // TODO this blacklist should be configurable + better set up
-      if (!blacklistProps[key]) {
+
+      // pass to view props
+      if (!staticConfig.variants || !(key in staticConfig.variants)) {
         viewProps[key] = val
       }
     }
@@ -181,19 +184,6 @@ const getSubStyle = (
   return styleOut
 }
 
-const blacklistDefaultProps = {
-  ...validStyles,
-  ...stylePropsText,
-}
-
-const blacklistFinalProps = {
-  ...blacklistDefaultProps,
-  tag: true,
-  debug: true,
-  space: true,
-  hitSlop: true,
-}
-
 const mapTransformKeys = {
   x: 'translateX',
   y: 'translateY',

package/src/helpers/isTamaguiElement.tsx

@@ -0,0 +1,5 @@
+import React, { isValidElement } from 'react'
+
+export const isTamaguiElement = (child: any): child is React.ReactElement => {
+  return isValidElement(child) && !!child.type['staticConfig']?.parsed
+}

package/src/helpers/matchMedia.native.ts

@@ -1,3 +1,6 @@
 import MediaQueryList from '@expo/match-media/build/MediaQueryList.js'
 
 export const matchMedia = (media: string) => new MediaQueryList(media)
+
+// @ts-ignore
+globalThis['matchMedia'] = matchMedia

package/src/helpers/matchMedia.ts

@@ -2,7 +2,15 @@ export const matchMedia =
   (typeof window !== 'undefined' && window.matchMedia) ||
   (function matchMediaFallback(query: string) {
     return {
-      addListener() {},
+      addListener() {
+        if (
+          process.env.NODE_ENV === 'development' &&
+          !process.env.IS_STATIC &&
+          process.env.TAMAGUI_TARGET !== 'web'
+        ) {
+          console.log('warning: matchMedia not loading! Is native picking up .native.js files?')
+        }
+      },
       removeListener() {},
       matches: false,
     }

package/src/helpers/validate.ts

@@ -0,0 +1,59 @@
+// published a patched version that works on native
+import ow from '@tamagui/ow'
+
+export const validateConfig = (conf: any) => {
+  if (!conf) {
+    console.warn('no conf?')
+    return
+  }
+  try {
+    ow(conf, validConfig)
+  } catch (err: any) {
+    console.log('Given config:\n', JSON.stringify(conf, null, 2))
+    throw err
+  }
+}
+
+const validConfig = ow.object.exactShape({
+  defaultTheme: ow.optional.string,
+  disableRootThemeClass: ow.optional.boolean,
+  shorthands: ow.optional.object.valuesOfType(ow.string),
+  themes: ow.object.valuesOfType(ow.object),
+  tokens: ow.object.valuesOfType(ow.object),
+  media: ow.object.valuesOfType(ow.object),
+})
+
+const validFont = ow.object.exactShape({
+  family: ow.string,
+  size: ow.object.nonEmpty.valuesOfType(ow.number),
+  lineHeight: ow.object.nonEmpty.valuesOfType(ow.number),
+  weight: ow.object.nonEmpty.valuesOfType(ow.string),
+  letterSpacing: ow.object.nonEmpty.valuesOfType(ow.number),
+})
+
+const validTokens = ow.object.exactShape({
+  font: ow.object.valuesOfType(validFont),
+  size: ow.object.nonEmpty.valuesOfType(ow.number),
+  space: ow.object.nonEmpty.valuesOfType(ow.number),
+  zIndex: ow.object.nonEmpty.valuesOfType(ow.number),
+  radius: ow.object.nonEmpty.valuesOfType(ow.number),
+  color: ow.object.nonEmpty.valuesOfType(ow.string),
+})
+
+export const validateTokens = (tokens: any) => {
+  try {
+    ow(tokens, validTokens)
+  } catch (err: any) {
+    console.log('Given tokens:\n', JSON.stringify(tokens, null, 2))
+    throw err
+  }
+}
+
+export const validateFont = (font: any) => {
+  try {
+    ow(font, validFont)
+  } catch (err: any) {
+    console.log('Given font:\n', JSON.stringify(font, null, 2))
+    throw err
+  }
+}

package/src/hooks/useFeatures.tsx

@@ -1,51 +1,66 @@
 import React from 'react'
 
 import { isWeb, useIsomorphicLayoutEffect } from '../constants/platform'
-import { addMediaQueryListener, removeMediaQueryListener } from './useMedia'
+import { addMediaQueryListener, mediaState, removeMediaQueryListener } from './useMedia'
 
-// only needed on native
-// dynamic loading of features to avoid heavy views
+type FeatureDefinition = {
+  isEnabled: (props: any) => boolean
+  Component: any
+}
 
-const createDefinition = ({ Component, propNames }: { Component; propNames: string[] }) => ({
+const createDefinition = ({
+  Component,
+  propNames,
+}: {
+  Component: any
+  propNames: string[]
+}): FeatureDefinition => ({
   isEnabled: (props: any) => propNames.some((name) => !!props[name]),
   Component,
 })
 
-const mediaQueryPropNames = [
-  '$xs',
-  '$sm',
-  '$md',
-  '$lg',
-  '$xl',
-  '$xxl',
-  '$pointerCoarse',
-  '$hoverNone',
-  '$tall',
-  '$short',
-  '$gtSm',
-  '$notXs',
-  '$gtMd',
-  '$gtLg',
-]
+let featureDefinitions: Record<string, FeatureDefinition> | null = null
 
-const featureDefinitions = {
-  measureLayout: createDefinition({
-    Component: (props) => {
-      console.log('measure', props)
-      return null
-    },
-    propNames: ['onLayout'],
-  }),
+export const useFeatures = (props: any, utils?: { forceUpdate?: Function }) => {
+  if (!featureDefinitions) {
+    featureDefinitions = loadFeatures()
+  }
+  const features: JSX.Element[] = []
+  for (const name in featureDefinitions) {
+    const { isEnabled, Component } = featureDefinitions[name]
+    if (isEnabled(props) && Component) {
+      features.push(<Component key={name} {...props} _utils={utils} />)
+    }
+  }
+  return features
+}
 
-  // will update the parent whenever media query changes
-  mediaQuery: createDefinition({
-    Component: (props) => {
-      if (isWeb) {
-        // no need for media queries are inserted and run in css
-        return
-      }
+function loadFeatures(): Record<string, FeatureDefinition> {
+  return {
+    // TODO
+    // measureLayout: createDefinition({
+    //   Component: (props) => {
+    //     console.log('measure', props)
+    //     return null
+    //   },
+    //   propNames: ['onLayout'],
+    // }),
+
+    // will update the parent whenever media query changes
+    // no need on web, media queries are inserted and run in css
+    ...(!isWeb && {
+      mediaQuery: loadMediaQueryFeature(),
+    }),
+  }
+}
+
+function loadMediaQueryFeature() {
+  const mediaPropNames = Object.keys(mediaState)
+
+  return createDefinition({
+    Component: (props: any) => {
+      const keys = mediaPropNames.flatMap((x) => (x in props ? x.slice(1) : []))
 
-      const keys = mediaQueryPropNames.flatMap((x) => (x in props ? x.slice(1) : []))
       useIsomorphicLayoutEffect(() => {
         for (const key of keys) {
           addMediaQueryListener(key, props._utils.forceUpdate)
@@ -56,23 +71,9 @@ const featureDefinitions = {
           }
         }
       }, [keys.join(',')])
+
       return null
     },
-    propNames: mediaQueryPropNames,
-  }),
-}
-
-const featureNames = Object.keys(featureDefinitions)
-const numFeatures = featureNames.length
-
-export const useFeatures = (props: any, utils?: { forceUpdate?: Function }) => {
-  const features: JSX.Element[] = []
-  for (let i = 0; i < numFeatures; i++) {
-    const name = featureNames[i]
-    const { isEnabled, Component } = featureDefinitions[name] as any //FeatureDefinition
-    if (isEnabled(props) && Component) {
-      features.push(<Component key={name} {...props} _utils={utils} />)
-    }
-  }
-  return features
+    propNames: mediaPropNames,
+  })
 }

package/src/hooks/useMedia.tsx

@@ -1,3 +1,4 @@
+import { useForceUpdate } from '@tamagui/use-force-update'
 import { useRef } from 'react'
 
 import { useIsomorphicLayoutEffect } from '../constants/platform'
@@ -9,7 +10,6 @@ import {
   MediaQueryState,
 } from '../types'
 import { useConstant } from './useConstant'
-import { useForceUpdate } from './useForceUpdate'
 
 export const mediaState: { [key in keyof MediaQueryState]: boolean } = {} as any
 const mediaQueryListeners: { [key: string]: Set<Function> } = {}
@@ -20,7 +20,7 @@ export const addMediaQueryListener = (key: string, cb: any) => {
 }
 
 export const removeMediaQueryListener = (key: string, cb: any) => {
-  mediaQueryListeners[key].delete(cb)
+  mediaQueryListeners[key]?.delete(cb)
 }
 
 let conf: MediaQueries | null = null
@@ -28,13 +28,15 @@ let conf: MediaQueries | null = null
 export const mediaQueryConfig = new Proxy<MediaQueries>({} as any, {
   get(target, key) {
     if (!conf) {
-      throw new Error(`Be sure to run configureMedia before accessing mediaQueryConfig`)
+      console.warn('Warning: accessing media query before init')
+      return null
     }
     return Reflect.get(conf, key)
   },
   ownKeys() {
     if (!conf) {
-      throw new Error(`Be sure to run configureMedia before accessing mediaQueryConfig`)
+      console.warn('Warning: accessing media query before init')
+      return []
     }
     return Object.keys(conf)
   },