@tamagui/core 1.0.0-alpha.0

package/src/helpers/extendStaticConfig.ts

@@ -0,0 +1,68 @@
+import React from 'react'
+
+import { StaticComponent, StaticConfig, StaticConfigParsed } from '../types'
+import { createPropMapper } from './createPropMapper'
+
+export function extendStaticConfig(
+  // can be undefined when loading with @tamagui/fake-react-native
+  // could be fixed a bit cleaner
+  Component?: StaticComponent | React.Component<any>,
+  config: StaticConfig = {}
+): StaticConfigParsed | null {
+  const parent = (Component || {}) as any
+  if (!parent.staticConfig) {
+    // if no static config, we are extending an external component
+    parent.staticConfig = {
+      Component,
+    }
+  }
+
+  const variants = {
+    ...parent.staticConfig.variants,
+  }
+
+  // merge variants without clobbering previous... can we tho (typed??
+  if (config.variants) {
+    for (const key in config.variants) {
+      if (variants[key]) {
+        variants[key] = {
+          ...variants[key],
+          ...config.variants[key],
+        }
+      } else {
+        variants[key] = config.variants[key]
+      }
+    }
+  }
+
+  return parseStaticConfig({
+    ...parent.staticConfig,
+    isZStack: config.isZStack || parent.staticConfig.isZStack,
+    variants,
+    isText: config.isText || parent.staticConfig.isText || false,
+    neverFlatten: config.neverFlatten ?? parent.staticConfig.neverFlatten,
+    ensureOverriddenProp: config.ensureOverriddenProp ?? parent.staticConfig.ensureOverriddenProp,
+    validStyles: config.validStyles
+      ? {
+          ...parent.staticConfig.validStyles,
+          ...config.validStyles,
+        }
+      : parent.staticConfig.validStyles,
+    validPropsExtra: {
+      ...parent.staticConfig.validPropsExtra,
+      ...config.validPropsExtra,
+    },
+    defaultProps: {
+      ...parent.staticConfig.defaultProps,
+      ...config.defaultProps,
+    },
+  })
+}
+
+export const parseStaticConfig = (config: StaticConfig): StaticConfigParsed => {
+  return {
+    ...config,
+    parsed: true,
+    propMapper: createPropMapper(config),
+  }
+}

package/src/helpers/fixNativeShadow.native.tsx

@@ -0,0 +1,27 @@
+const matchRgba =
+  /rgba\(\s*([\d\.]{1,})\s*,\s*([\d\.]{1,})\s*,\s*([\d\.]{1,})\s*,\s*([\d\.]{1,})\s*\)$/
+
+export function fixNativeShadow(props: any) {
+  if (props.shadowColor) {
+    if (!!!('shadowOffset' in props)) {
+      // fixes some broken shadows
+      props.shadowOffset = {
+        width: 0,
+        height: 0,
+      }
+    }
+    if (!!!('shadowOpacity' in props)) {
+      const c = `${props.shadowColor}`
+      // react native has issues sometimes with rgba()
+      if (c[0] === 'r' && c[3] === 'a') {
+        const [_, r, g, b, a] = c.match(matchRgba) || []
+        if (typeof a !== 'string') {
+          console.warn('non valid rgba', c)
+          return props
+        }
+        props.shadowColor = `rgb(${r},${g},${b})`
+        props.shadowOpacity = +a
+      }
+    }
+  }
+}

package/src/helpers/fixNativeShadow.tsx

@@ -0,0 +1,2 @@
+// only native of course
+export const fixNativeShadow = (a: any) => {}

package/src/helpers/getSplitStyles.tsx

@@ -0,0 +1,210 @@
+import {
+  AllRules,
+  stylePropsText,
+  stylePropsTransform,
+  validStyles,
+  validStylesPseudo,
+} from '@tamagui/helpers'
+import { ViewStyle } from 'react-native'
+
+import { isWeb } from '../constants/platform'
+import { mediaQueryConfig } from '../hooks/useMedia'
+import { StaticConfigParsed, ThemeObject } from '../types'
+import { createMediaStyle } from './createMediaStyle'
+import { fixNativeShadow } from './fixNativeShadow'
+import { getStylesAtomic } from './getStylesAtomic'
+import { insertStyleRule } from './insertStyleRule'
+
+export type SplitStyles = ReturnType<typeof getSplitStyles>
+
+// TODO run over this, should be able to cut it down quite a bit
+
+export const getSplitStyles = (
+  props: { [key: string]: any },
+  staticConfig: StaticConfigParsed,
+  theme: ThemeObject,
+  isSplittingDefaultProps?: boolean
+) => {
+  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
+  let classNames: string[] | null = null
+
+  for (const keyInit in props) {
+    // be sure to sync next few lines below to getSubStyle (*1)
+    const valInit = props[keyInit]
+
+    // media
+    if (keyInit[0] === '$') {
+      const mediaKey = keyInit.slice(1)
+
+      if (!mediaQueryConfig[mediaKey]) {
+        // this isn't a media key, pass through
+        viewProps[keyInit] = valInit
+        continue
+      }
+
+      // dont check if media is active, we just apply *all* media styles
+      // we combine the media props on top regular props, could proxy this
+      // TODO test proxy here instead of merge
+      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 })
+        }
+      }
+      for (const style of mediaStyles) {
+        if (isWeb) {
+          const out = createMediaStyle(style, mediaKey, mediaQueryConfig)
+          classNames = classNames || []
+          classNames.push(out.identifier)
+          AllRules.add(out.styleRule)
+          insertStyleRule(out.styleRule)
+          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')
+        }
+      }
+      continue
+    }
+
+    // pseudo
+    if (validStylesPseudo[keyInit]) {
+      if (!valInit) continue
+      pseudos = pseudos || {}
+      pseudos[keyInit] = getSubStyle(valInit, staticConfig, theme, props)
+      continue
+    }
+
+    const out = staticConfig.propMapper(keyInit, valInit, theme, props)
+
+    const expanded = out === true || !out ? [[keyInit, valInit]] : Object.entries(out)
+
+    for (const [key, val] of expanded) {
+      // const val = valueMap(valInit) ?? valInit
+      const keyFirstChar = key[0]
+      if (key === 'style' || (keyFirstChar === '_' && key.startsWith('_style'))) {
+        if (cur) {
+          // process last
+          fixNativeShadow(cur)
+          style.push(cur)
+          cur = null
+        }
+        fixNativeShadow(val)
+        style.push(val)
+        continue
+      }
+      // expand flex so it merged with flexShrink etc properly
+      // TODO this shouldn't be here...
+      if (key === 'flex') {
+        cur = cur || {}
+        // see spec for flex shorthand https://developer.mozilla.org/en-US/docs/Web/CSS/flex
+        // TODO this fixed a behavior but need to find / document / test
+        Object.assign(cur, {
+          flexGrow: val,
+          flexShrink: 1,
+        })
+        continue
+      }
+      if (!isWeb && key === 'pointerEvents') {
+        viewProps[key] = val
+        continue
+      }
+      if (validStyleProps[key]) {
+        // transforms
+        if (key in stylePropsTransform) {
+          cur = cur || {}
+          mergeTransform(cur, key, val)
+          continue
+        }
+        cur = cur || {}
+        cur[key] = val
+        continue
+      }
+      // TODO this blacklist should be configurable + better set up
+      if (!blacklistProps[key]) {
+        viewProps[key] = val
+      }
+    }
+  }
+  // push last style
+  if (cur) {
+    fixNativeShadow(cur)
+    style.push(cur)
+  }
+
+  if (process.env.NODE_ENV === 'development') {
+    if (props['debug']) {
+      console.log(' 🥚 splitProps:', { props, viewProps, style })
+    }
+  }
+
+  return {
+    viewProps,
+    style,
+    pseudos,
+    classNames,
+  }
+}
+
+const getSubStyle = (
+  styleIn: Object,
+  staticConfig: StaticConfigParsed,
+  theme: ThemeObject,
+  props: any
+): ViewStyle => {
+  const styleOut: ViewStyle = {}
+  for (const key in styleIn) {
+    // be sure to sync next few lines below to loop above (*1)
+    const val = styleIn[key]
+    const out = staticConfig.propMapper(key, val, theme, props)
+    const expanded = out === true || !out ? [[key, val]] : Object.entries(out)
+    for (const [skey, sval] of expanded) {
+      // const sval = valueMap(valInit)
+      if (skey in stylePropsTransform) {
+        mergeTransform(styleOut, skey, sval)
+      } else {
+        styleOut[skey] = sval
+      }
+    }
+  }
+  fixNativeShadow(styleOut)
+  return styleOut
+}
+
+const blacklistDefaultProps = {
+  ...validStyles,
+  ...stylePropsText,
+}
+
+const blacklistFinalProps = {
+  ...blacklistDefaultProps,
+  tag: true,
+  debug: true,
+  space: true,
+  hitSlop: true,
+}
+
+const mapTransformKeys = {
+  x: 'translateX',
+  y: 'translateY',
+}
+
+const mergeTransform = (obj: ViewStyle, key: string, val: any) => {
+  const transform: any[] = obj.transform
+    ? Array.isArray(obj.transform)
+      ? obj.transform
+      : [obj.transform]
+    : []
+  transform.push({ [mapTransformKeys[key] || key]: val })
+  obj.transform = transform
+}

package/src/helpers/getStylesAtomic.native.ts

@@ -0,0 +1,3 @@
+export function getStylesAtomic() {
+  console.warn('no-op native')
+}

package/src/helpers/getStylesAtomic.ts

@@ -0,0 +1,103 @@
+import { AllRules, StyleObject } from '@tamagui/helpers'
+import { ViewStyle } from 'react-native'
+
+import { pseudos } from '../constants/pseudos'
+import { rnw } from '../constants/rnw'
+
+const generateStyle = (style: any) => {
+  const { atomic, createCompileableStyle, createReactDOMStyle, i18Style } = rnw
+  return {
+    ...atomic(createCompileableStyle(createReactDOMStyle(i18Style(style)))),
+  }
+}
+
+const borderDefaults = {
+  borderWidth: 'borderStyle',
+  borderBottomWidth: 'borderBottomStyle',
+  borderTopWidth: 'borderTopStyle',
+  borderLeftWidth: 'borderLeftStyle',
+  borderRightWidth: 'borderRightStyle',
+}
+
+export function getStylesAtomic(style: any, avoidCollection = false) {
+  const styles: { [key: string]: ViewStyle } = {
+    base: {},
+  }
+  // split pseudos
+  for (const key in style) {
+    if (!!pseudos[key]) {
+      styles[key] = style[key]
+    } else {
+      styles.base[key] = style[key]
+    }
+  }
+  return Object.keys(styles)
+    .map((key) => {
+      return getAtomicStyle(styles[key], pseudos[key], avoidCollection)
+    })
+    .flat()
+}
+
+const importantRegex = /\!important*/g
+
+function getAtomicStyle(
+  style: ViewStyle,
+  pseudo?: { name: string; priority: number },
+  avoidCollection?: boolean
+): StyleObject[] {
+  if (style == null || typeof style !== 'object') {
+    throw new Error(`Wrong style type: "${typeof style}": ${style}`)
+  }
+
+  // why is this diff from react-native-web!? need to figure out
+  for (const key in borderDefaults) {
+    if (key in style) {
+      style[borderDefaults[key]] = style[borderDefaults[key]] ?? 'solid'
+    }
+  }
+
+  const all = generateStyle(style)
+  return Object.keys(all).map((key) => {
+    const val = all[key]
+    const hash = val.identifier.slice(`${val.identifier}`.lastIndexOf('-') + 1)
+    // pseudos have a `--` to be easier to find with concatClassNames
+    const psuedoPrefix = pseudo ? `-${pseudo.name}-` : ''
+    const identifier = `_${val.property}-${psuedoPrefix}${hash}`
+    const className = `.${identifier}`
+    const rules = val.rules.map((rule) => {
+      if (pseudo) {
+        const psuedoPrefixSelect = [...Array(pseudo.priority)].map(() => ':root').join('') + ' '
+        let res = rule
+          .replace(`.${val.identifier}`, `${psuedoPrefixSelect} ${className}`)
+          .replace('{', `:${pseudo.name}{`)
+
+        if (pseudo.name === 'hover') {
+          // hover styles need to be conditional
+          // perhaps this can be generalized but for now lets just shortcut
+          // and hardcode for hover styles, if we need to later we can
+          // WEIRD SYNTAX, SEE:
+          //   https://stackoverflow.com/questions/40532204/media-query-for-devices-supporting-hover
+          res = `@media not all and (hover: none) { ${res} }`
+        }
+        return res
+      }
+      return rule.replace(`.${val.identifier}`, className).replace(importantRegex, '')
+    })
+
+    if (!avoidCollection) {
+      if (rules.length > 1) {
+        console.warn('have never seen more than one, verifying')
+      }
+      AllRules.add(rules[0])
+    }
+
+    const result: StyleObject = {
+      property: val.property,
+      value: val.value,
+      identifier,
+      className,
+      rules,
+    }
+    return result
+  })
+}

package/src/helpers/insertStyleRule.tsx

@@ -0,0 +1,18 @@
+import { isWeb } from '../constants/platform'
+
+export function insertStyleRule(rule: string) {
+  if (typeof window === 'undefined') {
+    return
+  }
+  if (process.env.NODE_ENV === 'development') {
+    if (!isWeb) {
+      console.warn('non web platform, dont use this')
+      return
+    }
+  }
+  const sheet = window.document.styleSheets[0]
+  if (!sheet) {
+    return
+  }
+  sheet.insertRule(rule, sheet.cssRules.length)
+}

package/src/helpers/isObj.ts

@@ -0,0 +1 @@
+export const isObj = (x: any) => x && !Array.isArray(x) && typeof x === 'object'

package/src/helpers/matchMedia.native.ts

@@ -0,0 +1,3 @@
+import MediaQueryList from '@expo/match-media/build/MediaQueryList.js'
+
+export const matchMedia = (media: string) => new MediaQueryList(media)

package/src/helpers/matchMedia.ts

@@ -0,0 +1,9 @@
+export const matchMedia =
+  (typeof window !== 'undefined' && window.matchMedia) ||
+  (function matchMediaFallback(query: string) {
+    return {
+      addListener() {},
+      removeListener() {},
+      matches: false,
+    }
+  } as any)

package/src/helpers/themeable.tsx

@@ -0,0 +1,42 @@
+import React, { ReactElement, forwardRef } from 'react'
+
+import { Theme } from '../views/Theme'
+import { ThemeInverse } from '../views/ThemeInverse'
+
+export type ThemeableProps = {
+  theme?: string | null
+  themeInverse?: boolean
+}
+
+export const themeable: ThemeableHOC = function graphql<
+  R extends ReactElement<any, any> | null,
+  P extends ThemeableProps = {}
+>(component: (props: P) => R) {
+  const withThemeComponent = forwardRef(function WithTheme({ themeInverse, ...rest }: P, ref) {
+    const el = React.createElement(component, { ...rest, ref } as any) as R
+    if (themeInverse) {
+      return (<ThemeInverse>{el}</ThemeInverse>) as R
+    }
+    if (rest.theme) {
+      return (<Theme name={rest.theme || null}>{el}</Theme>) as R
+    }
+    return el
+  })
+
+  const withTheme: {
+    (props: P): R
+    displayName: string
+  } = withThemeComponent as any
+
+  withTheme.displayName = `Themed(${
+    (component as any)?.displayName || (component as any)?.name || 'Anonymous'
+  })`
+
+  return withTheme
+}
+
+export interface ThemeableHOC {
+  <R extends ReactElement<any, any> | null, P extends ThemeableProps = {}>(
+    component: (props: P) => R
+  ): (props: P) => R
+}

package/src/hooks/useConstant.tsx

@@ -0,0 +1,10 @@
+import { useRef } from 'react'
+
+type ResultBox<T> = { v: T }
+export function useConstant<T>(fn: () => T): T {
+  const ref = useRef<ResultBox<T>>()
+  if (!ref.current) {
+    ref.current = { v: fn() }
+  }
+  return ref.current.v
+}

package/src/hooks/useFeatures.tsx

@@ -0,0 +1,78 @@
+import React from 'react'
+
+import { isWeb, useIsomorphicLayoutEffect } from '../constants/platform'
+import { addMediaQueryListener, removeMediaQueryListener } from './useMedia'
+
+// only needed on native
+// dynamic loading of features to avoid heavy views
+
+const createDefinition = ({ Component, propNames }: { Component; propNames: string[] }) => ({
+  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',
+]
+
+const featureDefinitions = {
+  measureLayout: createDefinition({
+    Component: (props) => {
+      console.log('measure', props)
+      return null
+    },
+    propNames: ['onLayout'],
+  }),
+
+  // 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
+      }
+
+      const keys = mediaQueryPropNames.flatMap((x) => (x in props ? x.slice(1) : []))
+      useIsomorphicLayoutEffect(() => {
+        for (const key of keys) {
+          addMediaQueryListener(key, props._utils.forceUpdate)
+        }
+        return () => {
+          for (const key of keys) {
+            removeMediaQueryListener(key, props._utils.forceUpdate)
+          }
+        }
+      }, [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
+}

package/src/hooks/useForceUpdate.tsx

@@ -0,0 +1,26 @@
+import { useEffect, useRef, useState } from 'react'
+
+// ensures no updates after unmount
+
+export function useForceUpdate() {
+  const setState = useState(0)[1]
+  const internal = useRef<{ update: Function; isMounted: boolean }>()
+  if (!internal.current) {
+    internal.current = {
+      isMounted: true,
+      update: () => {
+        if (internal.current!.isMounted) {
+          setState(Math.random())
+        }
+      },
+    }
+  }
+
+  useEffect(() => {
+    return () => {
+      internal.current!.isMounted = false
+    }
+  }, [])
+
+  return internal.current.update
+}