@tamagui/core 1.0.1-rc.8 → 1.0.1

package/src/createComponent.tsx

@@ -20,7 +20,6 @@ import React, {
   createElement,
   forwardRef,
   memo,
-  startTransition,
   useCallback,
   useContext,
   useEffect,
@@ -61,7 +60,7 @@ import {
 } from './types'
 import { usePressability } from './vendor/Pressability'
 import { Slot, mergeEvent } from './views/Slot'
-import { wrapThemeManagerContext } from './views/Theme'
+import { useThemeManagerContext } from './views/Theme'
 
 // let t
 // import { timer } from '@tamagui/timer'
@@ -558,7 +557,8 @@ export function createComponent<
 
     if (process.env.NODE_ENV === 'development' && !isText && isWeb) {
       Children.toArray(props.children).forEach((item) => {
-        if (typeof item === 'string') {
+        // allow newlines because why not its annoying with mdx
+        if (typeof item === 'string' && item !== '\n') {
           // eslint-disable-next-line no-console
           console.error(
             `Unexpected text node: ${item}. A text node cannot be a child of a <View>.`
@@ -585,10 +585,17 @@ export function createComponent<
     const shouldSetMounted = needsMount && state.unmounted
     useEffect(() => {
       if (!shouldSetMounted) return
+      if (state.unmounted === true && needsMount) {
+        setStateShallow({
+          unmounted: false,
+        })
+        return
+      }
+
       setStateShallow({
         unmounted: false,
       })
-    }, [shouldSetMounted])
+    }, [shouldSetMounted, state.unmounted])
 
     let styles: Record<string, any>[]
 
@@ -618,11 +625,15 @@ export function createComponent<
     const fontFamilyClassName = fontFamily ? `font_${fontFamily}` : ''
 
     const classList = [
+      hasEnterStyle && ((state.unmounted && needsMount) || !isClient)
+        ? 't_will-mount'
+        : '',
       componentName ? componentClassName : '',
       fontFamilyClassName,
       themeIsNew ? theme.className : '',
       classNames ? Object.values(classNames).join(' ') : '',
     ]
+
     const className = classList.join(' ')
 
     if (process.env.TAMAGUI_TARGET === 'web') {
@@ -811,23 +822,20 @@ export function createComponent<
       stateRef.current.themeShouldReset = true
     }
 
-    const childEls =
-      !children || asChild
-        ? children
-        : wrapThemeManagerContext(
-            spacedChildren({
-              separator,
-              children,
-              space,
-              direction: props.spaceDirection || 'both',
-              isZStack,
-            }),
-            // only set context if changed theme
-            stateRef.current.hasProvidedThemeManager ? themeManager : undefined,
-            stateRef.current.themeShouldReset
-          )
+    const innerContent = useThemeManagerContext(
+      spacedChildren({
+        separator,
+        children,
+        space,
+        direction: props.spaceDirection || 'both',
+        isZStack,
+      }),
+      // only set context if changed theme
+      stateRef.current.hasProvidedThemeManager ? themeManager : undefined,
+      stateRef.current.themeShouldReset
+    )
 
-    let content: any
+    let content = !children || asChild ? children : innerContent
 
     if (asChild) {
       elementType = Slot
@@ -865,7 +873,7 @@ export function createComponent<
       }
     }
 
-    content = createElement(elementType, viewProps, childEls)
+    content = createElement(elementType, viewProps, content)
 
     if (process.env.TAMAGUI_TARGET === 'web') {
       if (events || isAnimatedReactNativeWeb) {
@@ -921,7 +929,6 @@ export function createComponent<
             styles,
             pseudos,
             content,
-            childEls,
             shouldAvoidClasses,
             avoidClasses: avoidClassesWhileAnimating,
             animation: props.animation,
@@ -1162,41 +1169,38 @@ export type SpacedChildrenProps = {
   separator?: React.ReactNode
 }
 
-export function spacedChildren({
-  isZStack,
-  children,
-  space,
-  direction,
-  spaceFlex,
-  separator,
-}: SpacedChildrenProps) {
+export function spacedChildren(props: SpacedChildrenProps) {
+  const { isZStack, children, space, direction, spaceFlex, separator } = props
   const hasSpace = !!(space || spaceFlex)
   const hasSeparator = !(separator === undefined || separator === null)
   if (!(hasSpace || hasSeparator || isZStack)) {
     return children
   }
+
   const childrenList = Children.toArray(children)
+
   const len = childrenList.length
-  if (len <= 1 && !isZStack) {
-    if (len === 1) {
-      // forward space! only when one component doesn't make sense to forward space to all children
-      const [onlyChild] = childrenList
-      if (React.isValidElement(onlyChild) && onlyChild.type?.['shouldForwardSpace']) {
-        return React.cloneElement(onlyChild, {
-          space,
-          spaceFlex,
-          separator,
-        } as any)
-      }
-    }
+  if (len <= 1 && !isZStack && !childrenList[0]?.['type']?.['shouldForwardSpace']) {
     return childrenList
   }
+
   const final: React.ReactNode[] = []
-  for (const [index, child] of childrenList.entries()) {
+  for (let [index, child] of childrenList.entries()) {
     const isEmpty =
       child === null ||
       child === undefined ||
       (Array.isArray(child) && child.length === 0)
+
+    // forward space
+    if (!isEmpty && React.isValidElement(child) && child.type?.['shouldForwardSpace']) {
+      child = React.cloneElement(child, {
+        space,
+        spaceFlex,
+        separator,
+        key: child.key,
+      } as any)
+    }
+
     // push them all, but wrap some in Fragment
     if (isEmpty || !child || (child['key'] && !isZStack)) {
       final.push(child)

package/src/createTamagui.ts

@@ -3,7 +3,11 @@ import { isRSC, isWeb } from '@tamagui/constants'
 import { configListeners, setConfig } from './config'
 import { createVariables } from './createVariables'
 import { getThemeCSSRules } from './helpers/getThemeCSSRules'
-import { getAllRules } from './helpers/insertStyleRule'
+import {
+  getAllRules,
+  listenForSheetChanges,
+  scanAllSheets,
+} from './helpers/insertStyleRule'
 import {
   registerCSSVariable,
   tokensValueToVariable,
@@ -42,6 +46,9 @@ export function createTamagui<Conf extends CreateTamaguiProps>(
     }
   }
 
+  scanAllSheets()
+  listenForSheetChanges()
+
   const fontTokens = Object.fromEntries(
     Object.entries(configIn.fonts!).map(([k, v]) => {
       return [k, createVariables(v, 'f', true)]
@@ -205,7 +212,8 @@ export function createTamagui<Conf extends CreateTamaguiProps>(
     tokensParsed,
     parsed: true,
     getCSS: (separator = '\n') => {
-      return `.is_Text .is_Text {display:inline-flex;}
+      return `.t_unmounted .t_will-mount {opacity:0;visibility:hidden;}
+.is_Text .is_Text {display:inline-flex;}
 ._dsp_contents {display:contents;}
 ${themeConfig.cssRuleSets.join(separator)}
 ${themeConfig.themeRuleSets.join(separator)}

package/src/helpers/ThemeManager.tsx

@@ -42,6 +42,10 @@ export class ThemeManager {
     if (!parentManager) {
       throw new Error('Must set up root first')
     }
+
+    // copy over listeners
+    this.themeListeners = parentManager.themeListeners
+
     // no change no props
     if (hasNoThemeUpdatingProps(props)) {
       return parentManager
@@ -101,9 +105,9 @@ export class ThemeManager {
     state: ThemeManagerState | null = this.state
   ) {
     if (!nextState?.theme || nextState.theme === state?.theme) {
-      return null
+      return false
     }
-    return nextState
+    return true
   }
 
   getState(props = this.props, parentManager = this.parentManager) {
@@ -136,6 +140,7 @@ export class ThemeManager {
   }
 
   notify() {
+    console.log('notify', this.themeListeners.size, this.themeListeners)
     this.themeListeners.forEach((cb) => cb(this.state.name, this))
   }
 

package/src/helpers/cache.ts

@@ -2,17 +2,15 @@ type Value = Object | Array<any> | string | number
 
 export type Style = { [key: string]: Value }
 
-class Cache {
-  v: Record<string, any> = {}
+const v: Record<string, any> = {}
 
+export const cache = {
   get(key: string, valStr: string) {
-    return this.v[key]?.[valStr]
-  }
+    return v[key]?.[valStr]
+  },
 
   set(key: string, valStr: string, object: any) {
-    this.v[key] ??= {}
-    this.v[key][valStr] = object
-  }
+    v[key] ??= {}
+    v[key][valStr] = object
+  },
 }
-
-export const cache = new Cache()

package/src/helpers/expandStyle.ts

@@ -30,25 +30,16 @@ export function expandStyle(key: string, value: any) {
 
     // web only
     switch (key) {
-      case 'aspectRatio': {
-        return [[key, value.toString()]]
-      }
-
       case 'textAlignVertical': {
         return [['verticalAlign', value === 'center' ? 'middle' : value]]
       }
-
-      case 'textDecorationLine': {
-        return [['textDecorationLine', value]]
-      }
-
       case 'writingDirection': {
         return [['direction', value]]
       }
     }
   }
 
-  const longKey = STYLE_SHORT_FORM_EXPANSIONS[key]
+  const longKey = EXPANSIONS[key]
   if (longKey) {
     return longKey.map((key) => {
       return [key, value]
@@ -56,41 +47,36 @@ export function expandStyle(key: string, value: any) {
   }
 }
 
-const STYLE_SHORT_FORM_EXPANSIONS: Record<string, string[]> = {
-  borderColor: [
-    'borderTopColor',
-    'borderRightColor',
-    'borderBottomColor',
-    'borderLeftColor',
-  ],
+const all = ['Top', 'Right', 'Bottom', 'Left']
+const horiz = ['Right', 'Left']
+const vert = ['Top', 'Bottom']
+const xy = ['X', 'Y']
+
+const EXPANSIONS: Record<string, string[]> = {
+  borderColor: ['TopColor', 'RightColor', 'BottomColor', 'LeftColor'],
   borderRadius: [
-    'borderTopLeftRadius',
-    'borderTopRightRadius',
-    'borderBottomRightRadius',
-    'borderBottomLeftRadius',
-  ],
-  borderWidth: [
-    'borderTopWidth',
-    'borderRightWidth',
-    'borderBottomWidth',
-    'borderLeftWidth',
+    'TopLeftRadius',
+    'TopRightRadius',
+    'BottomRightRadius',
+    'BottomLeftRadius',
   ],
-  margin: ['marginTop', 'marginRight', 'marginBottom', 'marginLeft'],
-  marginHorizontal: ['marginRight', 'marginLeft'],
-  marginVertical: ['marginTop', 'marginBottom'],
-  overscrollBehavior: ['overscrollBehaviorX', 'overscrollBehaviorY'],
-  padding: ['paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft'],
-  paddingHorizontal: ['paddingRight', 'paddingLeft'],
-  paddingVertical: ['paddingTop', 'paddingBottom'],
+  borderWidth: ['TopWidth', 'RightWidth', 'BottomWidth', 'LeftWidth'],
+  margin: all,
+  marginHorizontal: horiz,
+  marginVertical: vert,
+  overscrollBehavior: xy,
+  padding: all,
+  paddingHorizontal: horiz,
+  paddingVertical: vert,
   ...(isWeb && {
     // react-native only supports borderStyle
-    borderStyle: [
-      'borderTopStyle',
-      'borderRightStyle',
-      'borderBottomStyle',
-      'borderLeftStyle',
-    ],
+    borderStyle: ['TopStyle', 'RightStyle', 'BottomStyle', 'LeftStyle'],
     // react-native doesn't support X / Y
-    overflow: ['overflowX', 'overflowY'],
+    overflow: xy,
   }),
 }
+
+for (const parent in EXPANSIONS) {
+  const prefix = parent.slice(0, /[A-Z]/.exec(parent)?.index ?? parent.length)
+  EXPANSIONS[parent] = EXPANSIONS[parent].map((k) => `${prefix}${k}`)
+}

package/src/helpers/getSplitStyles.tsx

@@ -20,6 +20,7 @@ import { isDevTools } from '../constants/isDevTools'
 import {
   getMediaImportanceIfMoreImportant,
   mediaState as globalMediaState,
+  mediaKeysWithAndWithout$,
   mediaQueryConfig,
   mergeMediaByImportance,
 } from '../hooks/useMedia'
@@ -45,8 +46,8 @@ import {
   RulesToInsert,
   insertStyleRules,
   insertedTransforms,
+  scanAllSheets,
   shouldInsertStyleRules,
-  updateInserted,
   updateRules,
 } from './insertStyleRule'
 import { FlatTransforms, mergeTransform, mergeTransforms } from './mergeTransform'
@@ -205,7 +206,7 @@ const accessibilityRoleToWebRole = {
 //     const classNames = {}
 
 const isMediaKey = (key: string) =>
-  Boolean(key[0] === '$' && mediaQueryConfig[key.slice(1)])
+  Boolean(key[0] === '$' && mediaKeysWithAndWithout$.has(key))
 
 export const getSplitStyles: StyleSplitter = (
   props,
@@ -217,6 +218,10 @@ export const getSplitStyles: StyleSplitter = (
   elementType,
   debug
 ) => {
+  if (cache.has(props)) {
+    return cache.get(props)
+  }
+
   conf = conf || getConfig()
   const { shorthands } = conf
   const {
@@ -320,8 +325,7 @@ export const getSplitStyles: StyleSplitter = (
     const valInit = props[keyInit]
 
     // normalize shorthands up front
-    const expandedKey = keyInit in shorthands
-    if (expandedKey) {
+    if (keyInit in shorthands) {
       keyInit = shorthands[keyInit]
     }
 
@@ -329,8 +333,8 @@ export const getSplitStyles: StyleSplitter = (
     if (keyInit in skipProps) continue
     if (!isWeb && keyInit.startsWith('data-')) continue
 
-    if (validStyleProps[keyInit] || keyInit.includes('-')) {
-      if (valInit && valInit[0] === '_') {
+    if (typeof valInit === 'string' && valInit[0] === '_') {
+      if (keyInit in validStyleProps || keyInit.includes('-')) {
         if (shouldDoClasses) {
           classNames[keyInit] = valInit
         } else {
@@ -425,20 +429,12 @@ export const getSplitStyles: StyleSplitter = (
             }
             break
           }
-          case 'accessibilityControls': {
-            viewProps['aria-controls'] = processIDRefList(valInit)
-            break
-          }
+          case 'accessibilityLabelledBy':
+          case 'accessibilityFlowTo':
+          case 'accessibilityControls':
           case 'accessibilityDescribedBy': {
-            viewProps['aria-describedby'] = processIDRefList(valInit)
-            break
-          }
-          case 'accessibilityFlowTo': {
-            viewProps['aria-flowto'] = processIDRefList(valInit)
-            break
-          }
-          case 'accessibilityLabelledBy': {
-            viewProps['aria-labelledby'] = processIDRefList(valInit)
+            viewProps[`aria-${keyInit.replace('accessibility', '').toLowerCase()}`] =
+              processIDRefList(valInit)
             break
           }
           case 'accessibilityKeyShortcuts': {
@@ -538,7 +534,7 @@ export const getSplitStyles: StyleSplitter = (
       )
     ) {
       // web-only, exclude all other accessibility props not handled above
-      if (isWeb && keyInit.includes('ccessibility')) {
+      if (isWeb && keyInit.indexOf('ccessibility') > 0) {
         continue
       }
       usedKeys[keyInit] = 1
@@ -642,7 +638,24 @@ export const getSplitStyles: StyleSplitter = (
             }
           }
         } else {
-          const isDisabled = !state[descriptor.stateKey || descriptor.name]
+          let isDisabled = !state[descriptor.stateKey || descriptor.name]
+
+          // we never animate in on server side just show the full thing
+          // on client side we use CSS to hide the fully in SSR items, then
+          // un-hide and replay with original animation.
+          if (!isClient && isEnter) {
+            isDisabled = false
+          }
+
+          // console.log(
+          //   'isDisabled',
+          //   state,
+          //   descriptor.stateKey,
+          //   state[descriptor.stateKey || descriptor.name],
+          //   isDisabled,
+          //   descriptor
+          // )
+
           if (!isDisabled) {
             usedKeys[key] ||= 1
           }
@@ -766,7 +779,7 @@ export const getSplitStyles: StyleSplitter = (
         fontFamily = valInit[0] === '$' ? valInit : val
       }
 
-      if (validStyleProps[key]) {
+      if (key in validStyleProps) {
         mergeStyle(styleState, key, val)
         continue
       }
@@ -887,6 +900,7 @@ export const getSplitStyles: StyleSplitter = (
         rulesToInsert,
         parentSplitStyles,
         flatTransforms,
+        result,
       }
       for (const key in { ...result, ...logs }) {
         // eslint-disable-next-line no-console
@@ -897,6 +911,8 @@ export const getSplitStyles: StyleSplitter = (
     }
   }
 
+  cache.set(props, result)
+
   return result
 }
 
@@ -916,7 +932,8 @@ function mergeClassName(
       if (isClient) {
         if (!transform) {
           // HMR or loaded a new chunk
-          updateInserted()
+          console.warn(`got a new ting`)
+          scanAllSheets()
           transform = insertedTransforms[val]
           if (process.env.NODE_ENV === 'development') {
             if (!transform) {

package/src/helpers/getStylesAtomic.ts

@@ -82,7 +82,21 @@ const generateAtomicStyles = (
 
   // transform
   if (style.transform && Array.isArray(style.transform)) {
-    style.transform = style.transform.map(mapTransform).join(' ')
+    style.transform = style.transform
+      .map(
+        // { scale: 2 } => 'scale(2)'
+        // { translateX: 20 } => 'translateX(20px)'
+        // { matrix: [1,2,3,4,5,6] } => 'matrix(1,2,3,4,5,6)'
+        (transform) => {
+          const type = Object.keys(transform)[0]
+          const value = transform[type]
+          if (type === 'matrix' || type === 'matrix3d') {
+            return `${type}(${value.join(',')})`
+          }
+          return `${type}(${normalizeValueWithProperty(value, type)})`
+        }
+      )
+      .join(' ')
   }
 
   styleToCSS(style)
@@ -160,20 +174,6 @@ export function styleToCSS(style: Record<string, any>) {
   }
 }
 
-// { scale: 2 } => 'scale(2)'
-// { translateX: 20 } => 'translateX(20px)'
-// { matrix: [1,2,3,4,5,6] } => 'matrix(1,2,3,4,5,6)'
-const mapTransform = (transform) => {
-  const type = Object.keys(transform)[0]
-  const value = transform[type]
-  if (type === 'matrix' || type === 'matrix3d') {
-    return `${type}(${value.join(',')})`
-  } else {
-    const normalizedValue = normalizeValueWithProperty(value, type)
-    return `${type}(${normalizedValue})`
-  }
-}
-
 function createDeclarationBlock(style: Style, important = false) {
   let next = ''
   for (const key in style) {