@tamagui/core 1.0.1-rc.9 → 1.0.1

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

@@ -429,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': {
@@ -646,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
           }

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) {

package/src/helpers/insertStyleRule.tsx

@@ -40,13 +40,11 @@ const isClient = typeof document !== 'undefined'
 
 const scannedNum = new WeakMap<CSSStyleSheet, number>()
 const totalSheetSelectors = new Map<string, number>()
-const referencesInSheet = new WeakMap<CSSStyleSheet>()
 
 export function listenForSheetChanges() {
   if (!isClient) return
   function handleNode(node: Node, remove = false) {
     if (node instanceof HTMLStyleElement && node.sheet) {
-      console.warn('update', node.sheet)
       updateSheetStyles(node.sheet, remove)
     }
   }

package/src/hooks/useTheme.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable no-console */
 import { isClient, isRSC, isServer, isWeb } from '@tamagui/constants'
-import { useContext, useEffect, useLayoutEffect, useMemo, useState } from 'react'
+import { useContext, useEffect, useMemo, useState } from 'react'
 
 import { getConfig } from '../config'
 import { isDevTools } from '../constants/isDevTools'
@@ -13,6 +13,7 @@ import {
 import { ThemeManagerContext } from '../helpers/ThemeManagerContext'
 import { ThemeParsed, ThemeProps } from '../types'
 import { GetThemeUnwrapped } from './getThemeUnwrapped'
+import { useServerRef } from './useServerHooks'
 
 export type ChangedThemeResponse = {
   themeManager: ThemeManager | null
@@ -33,12 +34,28 @@ function getDefaultThemeProxied() {
   })
 }
 
+interface UseThemeState {
+  keys: Set<string>
+}
+
 export const useTheme = (props: ThemeProps = emptyProps): ThemeParsed => {
   if (isRSC) {
     return getDefaultThemeProxied()
   }
 
-  const { name, theme, themeManager, className, isNewTheme } = useChangeThemeEffect(props)
+  const state = useServerRef() as React.MutableRefObject<UseThemeState>
+  if (isClient && !state.current) {
+    state.current = {
+      keys: new Set(),
+    }
+  }
+  state.current?.keys.clear()
+
+  const { name, theme, themeManager, className, isNewTheme } = useChangeThemeEffect(
+    props,
+    false,
+    isClient ? () => state.current.keys.size === 0 : undefined
+  )
 
   if (process.env.NODE_ENV === 'development') {
     // ensure we aren't creating too many ThemeManagers
@@ -73,6 +90,7 @@ export const useTheme = (props: ThemeProps = emptyProps): ThemeParsed => {
       name,
       className,
       themeManager,
+      state,
     })
   }, [theme, isNewTheme, name, className, themeManager])
 }
@@ -83,12 +101,14 @@ function getThemeProxied({
   className,
   themeManager,
   isNewTheme,
+  state,
 }: {
   theme: any
   name: string
   className?: string
   themeManager?: ThemeManager | null
   isNewTheme?: boolean
+  state?: React.RefObject<UseThemeState>
 }) {
   return createProxy(theme, {
     has(_, key) {
@@ -122,7 +142,20 @@ function getThemeProxied({
       if (!themeManager) {
         return theme[key]
       }
-      return themeManager.getValue(key)
+      const val = themeManager.getValue(key)
+      if (val && state) {
+        if (isClient) {
+          return new Proxy(val as any, {
+            get(_, subkey) {
+              if (subkey === 'val') {
+                state.current!.keys.add(key as any)
+              }
+              return Reflect.get(val, subkey)
+            },
+          })
+        }
+      }
+      return val
     },
   })
 }
@@ -139,7 +172,8 @@ export const activeThemeManagers = new Set<ThemeManager>()
 
 export const useChangeThemeEffect = (
   props: ThemeProps,
-  root = false
+  root = false,
+  disableUpdate?: () => boolean
 ): ChangedThemeResponse => {
   if (isRSC) {
     // we need context working for this to work well
@@ -186,20 +220,16 @@ export const useChangeThemeEffect = (
         return
       }
       activeThemeManagers.add(themeManager)
-      const disposeChangeListener = parentManager?.onChangeTheme(() => {
-        if (!(isNewTheme || isWeb)) {
-          setThemeState({
-            ...themeState,
-            state: { ...themeManager.state },
-            isNewTheme: false,
-          })
-        } else {
-          updateState()
-        }
-      })
+      // const disposeChangeListener = parentManager?.onChangeTheme((name, manager) => {
+      //   // console.log('hi', props, state, name, manager)
+      //   if (state.theme !== manager.state.theme) {
+      //     console.warn('now update to', manager.state.name)
+      //     updateState(manager)
+      //   }
+      // })
       return () => {
         activeThemeManagers.delete(themeManager)
-        disposeChangeListener?.()
+        // disposeChangeListener?.()
       }
     }, [disable, state, isNewTheme, debug])
   }
@@ -209,13 +239,8 @@ export const useChangeThemeEffect = (
 
   if (shouldReturnParentState) {
     if (!parentManager) throw 'impossible'
-    if (process.env.NODE_ENV === 'development' && props.debug === 'verbose')
-      console.log(
-        'useTheme hasNoThemeUpdatingProps',
-        parentManager.state.name,
-        'isInversingOnMount',
-        isInversingOnMount
-      )
+    // prettier-ignore
+    if (process.env.NODE_ENV === 'development' && props.debug === 'verbose') console.log('useTheme hasNoThemeUpdatingProps', parentManager.state.name, 'isInversingOnMount', isInversingOnMount)
     return {
       ...parentManager.state,
       className: isInversingOnMount ? '' : parentManager.state.className,
@@ -234,27 +259,19 @@ export const useChangeThemeEffect = (
   }
 
   function createState(prev?: State) {
+    if (prev && disableUpdate?.()) {
+      return prev
+    }
+    // returns previous theme manager if no change
     const _ = new ThemeManager(props, root ? 'root' : parentManager)
     const isNewTheme = _ !== parentManager
-    if (process.env.NODE_ENV === 'development' && debug)
-      [
-        console.groupCollapsed('useTheme create() isNewTheme', isNewTheme),
-        console.log(
-          'parent.state.name',
-          parentManager?.state.name,
-          '\n',
-          'props',
-          props,
-          '\n',
-          isClient ? parentManager : '',
-          'getState',
-          isNewTheme && isClient ? _.getState(props) : '',
-          '\n',
-          'state',
-          isClient ? { ..._.state } : ''
-        ),
-        console.groupEnd(),
-      ]
+    // prettier-ignore
+
+    // if (prev?.isNewTheme && _.state.theme !== parentManager?.state.theme) {
+    //   console.warn('notify')
+    //   _.notify()
+    // }
+
     // only inverse relies on this for ssr
     const mounted = !props.inverse ? true : root || prev?.mounted
     return {
@@ -266,12 +283,14 @@ export const useChangeThemeEffect = (
     }
   }
 
-  function updateState() {
-    const next = themeManager.getState(props, parentManager)
-    const shouldChange = themeManager.getStateShouldChange(
-      next,
-      isNewTheme ? state : null
-    )
+  function updateState(updatingManager?: ThemeManager) {
+    if (disableUpdate?.()) {
+      return
+    }
+    const manager = updatingManager ?? themeManager
+    const next = manager.getState(props, parentManager)
+    const shouldChange = manager.getStateShouldChange(next, isNewTheme ? state : null)
+    // console.log(`got it`, next, isNewTheme, shouldChange, { ...updatingManager?.state })
     if (shouldChange) {
       setThemeState(createState)
     } else {

package/src/views/TamaguiProvider.tsx

@@ -32,6 +32,12 @@ export function TamaguiProvider({
     // inject CSS if asked to (not SSR compliant)
     // eslint-disable-next-line react-hooks/rules-of-hooks
     React.useLayoutEffect(() => {
+      // for easier support of hidden-until-js mount animations
+      // user must set t_unmounted on documentElement from SSR
+      if (document.documentElement.classList.contains('t_unmounted')) {
+        document.documentElement.classList.remove('t_unmounted')
+      }
+
       if (disableInjectCSS) return
       const style = document.createElement('style')
       style.appendChild(document.createTextNode(config.getCSS()))

package/src/views/Theme.tsx

@@ -1,5 +1,5 @@
 import { isWeb } from '@tamagui/constants'
-import React, { useMemo } from 'react'
+import React, { Children, cloneElement, useMemo } from 'react'
 
 import { variableToString } from '../createVariable'
 import { ThemeManager } from '../helpers/ThemeManager'
@@ -14,23 +14,20 @@ export function Theme(props: ThemeProps) {
   }
 
   const isRoot = !!props['_isRoot']
-  const { name, theme, themeManager, isNewTheme, className } = useChangeThemeEffect(
-    props,
-    isRoot
-  )
-
+  const { name, theme, themeManager, className } = useChangeThemeEffect(props, isRoot)
   const disableThemeClass = props.disableThemeClass
   const missingTheme = !(name && theme)
 
   // memo here, changing theme without re-rendering all children is a critical optimization
   // may require some effort of end user to memoize but without this memo they'd have no option
-  let contents = useMemo(() => {
-    const next = props['data-themeable']
-      ? React.cloneElement(props.children, { ['data-themeable']: true })
-      : props.children
-
-    return missingTheme ? next : wrapThemeManagerContext(next, themeManager)
-  }, [missingTheme, props.children, themeManager])
+  let contents = useThemeManagerContext(
+    props['data-themeable']
+      ? Children.map(props.children, (child) =>
+          cloneElement(child, { ['data-themeable']: true })
+        )
+      : props.children,
+    themeManager
+  )
 
   if (process.env.NODE_ENV === 'development' && missingTheme) {
     // eslint-disable-next-line no-console
@@ -60,15 +57,15 @@ export function Theme(props: ThemeProps) {
   return contents
 }
 
-export function wrapThemeManagerContext(
+export function useThemeManagerContext(
   children: any,
   themeManager?: ThemeManager | null,
   shouldReset?: boolean
 ) {
+  // disabled super memoize it - listener first strategy
+  const value = themeManager // useMemo(() => themeManager, [!!themeManager])
   // be sure to memoize themeManager to avoid reparenting
-  if (!themeManager) {
-    return children
-  }
+  if (!value) return children
   // be sure to memoize shouldReset to avoid reparenting
   let next = children
   // TODO likely not necessary if we do reset logic now in useTheme?
@@ -76,9 +73,5 @@ export function wrapThemeManagerContext(
   if (shouldReset && themeManager) {
     next = <Theme name={themeManager.state.parentName}>{next}</Theme>
   }
-  return (
-    <ThemeManagerContext.Provider value={themeManager}>
-      {next}
-    </ThemeManagerContext.Provider>
-  )
+  return <ThemeManagerContext.Provider value={value}>{next}</ThemeManagerContext.Provider>
 }

package/types/createComponent.d.ts

@@ -17,5 +17,5 @@ export type SpacedChildrenProps = {
     direction?: SpaceDirection;
     separator?: React.ReactNode;
 };
-export declare function spacedChildren({ isZStack, children, space, direction, spaceFlex, separator, }: SpacedChildrenProps): React.ReactNode;
+export declare function spacedChildren(props: SpacedChildrenProps): React.ReactNode;
 //# sourceMappingURL=createComponent.d.ts.map

package/types/helpers/ThemeManager.d.ts

@@ -25,7 +25,7 @@ export declare class ThemeManager {
         forceTheme?: ThemeParsed;
     }, notify?: boolean): ThemeManagerState | undefined;
     getStateIfChanged(props?: ThemeProps, state?: ThemeManagerState | null, parentManager?: ThemeManager | null): ThemeManagerState | null | undefined;
-    getStateShouldChange(nextState: ThemeManagerState | null, state?: ThemeManagerState | null): ThemeManagerState | null;
+    getStateShouldChange(nextState: ThemeManagerState | null, state?: ThemeManagerState | null): boolean;
     getState(props?: ThemeProps, parentManager?: ThemeManager | null): ThemeManagerState | null;
     get allKeys(): Set<string>;
     getValue(key: string, state?: ThemeManagerState): import("..").Variable<any> | undefined;

package/types/helpers/cache.d.ts

@@ -2,11 +2,9 @@ type Value = Object | Array<any> | string | number;
 export type Style = {
     [key: string]: Value;
 };
-declare class Cache {
-    v: Record<string, any>;
+export declare const cache: {
     get(key: string, valStr: string): any;
     set(key: string, valStr: string, object: any): void;
-}
-export declare const cache: Cache;
+};
 export {};
 //# sourceMappingURL=cache.d.ts.map

package/types/hooks/useTheme.d.ts

@@ -11,5 +11,5 @@ export declare const useTheme: (props?: ThemeProps) => ThemeParsed;
 export declare const getThemeManager: (theme: any) => ThemeManager | undefined;
 export declare const getThemeIsNewTheme: (theme: any) => ThemeManager | undefined;
 export declare const activeThemeManagers: Set<ThemeManager>;
-export declare const useChangeThemeEffect: (props: ThemeProps, root?: boolean) => ChangedThemeResponse;
+export declare const useChangeThemeEffect: (props: ThemeProps, root?: boolean, disableUpdate?: () => boolean) => ChangedThemeResponse;
 //# sourceMappingURL=useTheme.d.ts.map

package/types/views/Theme.d.ts

@@ -1,5 +1,5 @@
 import { ThemeManager } from '../helpers/ThemeManager';
 import { ThemeProps } from '../types';
 export declare function Theme(props: ThemeProps): any;
-export declare function wrapThemeManagerContext(children: any, themeManager?: ThemeManager | null, shouldReset?: boolean): any;
+export declare function useThemeManagerContext(children: any, themeManager?: ThemeManager | null, shouldReset?: boolean): any;
 //# sourceMappingURL=Theme.d.ts.map