@tamagui/core 1.0.1-rc.9 → 1.0.2

package/src/helpers/getStylesAtomic.ts

@@ -56,16 +56,8 @@ export function getAtomicStyle(
     if (!style || typeof style !== 'object') {
       throw new Error(`Wrong style type: "${typeof style}": ${style}`)
     }
-  } else {
-    if (!style) {
-      if (process.env.NODE_ENV === 'development') {
-        // eslint-disable-next-line no-console
-        console.warn('Invalid style')
-      }
-      return []
-    }
   }
-
+  if (!style) return []
   return generateAtomicStyles(style, pseudo)
 }
 
@@ -82,7 +74,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 +166,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/helpers/isTamaguiComponent.tsx

@@ -6,10 +6,6 @@ export function isTamaguiComponent<A>(
 ): comp is A & {
   staticConfig: StaticConfig
 } {
-  const config = comp && (comp['staticConfig'] as StaticConfigParsed | undefined)
-  if (!config?.parsed) return false
-  if (name) {
-    return name === config.componentName
-  }
-  return true
+  const config = comp?.['staticConfig'] as StaticConfigParsed | undefined
+  return (config?.parsed && (name ? name === config.componentName : true)) || false
 }

package/src/helpers/mergeProps.ts

@@ -41,7 +41,7 @@ function mergeProp(
   inverseShorthands?: AnyRecord
 ) {
   const val = a[key]
-  const shorthand = inverseShorthands ? inverseShorthands[key] : null
+  const shorthand = inverseShorthands?.[key] || null
   if (b && (key in b || (shorthand && shorthand in b))) {
     return
   }

package/src/hooks/getThemeUnwrapped.tsx

@@ -1,7 +1,5 @@
 export const getThemeUnwrapped = (theme: any) => {
-  if (!theme) return null
-  const first = theme[GetThemeUnwrapped]
-  return first || theme
+  return theme?.[GetThemeUnwrapped] || theme
 }
 
 export const GetThemeUnwrapped = Symbol()

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/styled.tsx

@@ -1,4 +1,4 @@
-import { stylePropsAll, validStyles } from '@tamagui/helpers'
+import { stylePropsAll } from '@tamagui/helpers'
 
 import { createComponent } from './createComponent'
 import { ReactNativeStaticConfigs } from './setupReactNative'

package/src/views/FontLanguage.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { FontLanguageProps } from './FontLanguage.types'
 
 export const FontLanguage = ({ children, ...props }: FontLanguageProps) => {

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/Text.tsx

@@ -69,12 +69,6 @@ export const Text = createComponent<TextProps, TextView, TextPropsBase>({
       },
     },
 
-    pressable: {
-      true: {
-        cursor: 'pointer',
-      },
-    },
-
     ellipse: {
       true: isWeb
         ? ellipseStyle

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/src/views/ThemeProvider.tsx

@@ -32,15 +32,15 @@ export const ThemeProvider = (props: ThemeProviderProps) => {
     }, [props.defaultTheme, props.disableRootThemeClass, props.themeClassNameOnRoot])
   }
 
-  const value = useMemo(() => {
-    return {
-      defaultTheme: props.defaultTheme,
-    }
-    // NOTE DON'T CHANGE THIS ITS ONLY USED BY useThemeName for SSR safety for now...
-  }, [])
-
   return (
-    <ThemeProviderRootContext.Provider value={value}>
+    <ThemeProviderRootContext.Provider
+      value={useMemo(() => {
+        return {
+          defaultTheme: props.defaultTheme,
+        }
+        // NOTE DON'T CHANGE THIS ITS ONLY USED BY useThemeName for SSR safety for now...
+      }, [])}
+    >
       <Theme
         className={props.className}
         name={props.defaultTheme}

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>;
-    get(key: string, valStr: string): any;
-    set(key: string, valStr: string, object: any): void;
-}
-export declare const cache: Cache;
+export declare const cache: {
+    get: (key: string, valStr: string) => any;
+    set: (key: string, valStr: string, object: any) => void;
+};
 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