@tamagui/core 1.0.1-rc.8 → 1.0.1

package/src/helpers/insertStyleRule.tsx

@@ -1,7 +1,3 @@
-// this needs to check if its inserted already? 99% of the time it is
-// this should avoid re-inserts, but need to test the perf trade-offs
-// i tested with the site itself and the initial insert was trivial
-
 import type { StyleObject } from '@tamagui/helpers'
 
 const allSelectors: Record<string, string> = {}
@@ -17,18 +13,7 @@ function addTransform(identifier: string, css: string, rule?: CSSRule) {
   const s = css.indexOf('transform:')
   if (s === -1) {
     if (process.env.NODE_ENV === 'development') {
-      // eslint-disable-next-line no-console
-      console.groupCollapsed(
-        `❌ Invalid transform, likely used deg/% improperly ${identifier}`
-      )
-      // eslint-disable-next-line no-console
-      console.log('rule:', rule)
-      // eslint-disable-next-line no-console
-      console.trace()
-      // eslint-disable-next-line no-console
-      console.groupEnd()
-    } else {
-      // missing transform
+      console.error(`❌ Invalid transform, likely used deg/% improperly ${identifier}`)
     }
     return false
   }
@@ -50,9 +35,31 @@ const isClient = typeof document !== 'undefined'
 //   1. debugging at dev time
 //   2. avoid duplicate insert styles at runtime
 //   3. used now for merging transforms atomically
+
+// multiple sheets could have the same ids so we have to count
+
 const scannedNum = new WeakMap<CSSStyleSheet, number>()
+const totalSheetSelectors = new Map<string, number>()
+
+export function listenForSheetChanges() {
+  if (!isClient) return
+  function handleNode(node: Node, remove = false) {
+    if (node instanceof HTMLStyleElement && node.sheet) {
+      updateSheetStyles(node.sheet, remove)
+    }
+  }
+  const mo = new MutationObserver((entries) => {
+    for (const entry of entries) {
+      entry.addedNodes.forEach((node) => handleNode(node))
+      entry.removedNodes.forEach((node) => handleNode(node, true))
+    }
+  })
+  mo.observe(document.head, {
+    childList: true,
+  })
+}
 
-export function updateInserted() {
+export function scanAllSheets() {
   if (process.env.NODE_ENV === 'test') return
   if (!isClient) return
   const sheets = document.styleSheets
@@ -60,28 +67,53 @@ export function updateInserted() {
   for (let i = 0; i < sheets.length; i++) {
     const sheet = sheets[i]
     if (!sheet) continue
+    updateSheetStyles(sheet)
+  }
+}
 
-    // avoid errors on cross origin sheets
-    // https://stackoverflow.com/questions/49993633/uncaught-domexception-failed-to-read-the-cssrules-property
-    let rules: CSSRuleList
-    try {
-      rules = sheet.cssRules
-    } catch {
-      continue
-    }
+function track(id: string, remove = false) {
+  const next = (totalSheetSelectors.get(id) || 0) + (remove ? -1 : 1)
+  totalSheetSelectors.set(id, next)
+  return next
+}
 
-    const len = rules.length
-    const lastScanned = scannedNum.get(sheet) ?? 0
+function updateSheetStyles(sheet: CSSStyleSheet, remove = false) {
+  // avoid errors on cross origin sheets
+  // https://stackoverflow.com/questions/49993633/uncaught-domexception-failed-to-read-the-cssrules-property
+  let rules: CSSRuleList
+  try {
+    rules = sheet.cssRules
+  } catch {
+    return
+  }
+
+  const len = rules.length
+  const lastScanned = scannedNum.get(sheet) || 0
+
+  if (!remove) {
+    // avoid work dumb but works
     if (lastScanned === len) {
-      continue
+      return
+    }
+  }
+
+  for (let i = lastScanned; i < len; i++) {
+    const rule = rules[i]
+    const response = getTamaguiSelector(rule)
+    if (!response) {
+      return
     }
-    for (let i = lastScanned; i < len; i++) {
-      const rule = rules[i]
-      const response = getTamaguiSelector(rule)
-      if (!response) {
-        continue
+
+    const [identifier, cssRule] = response
+
+    // track references
+    const total = track(identifier, remove)
+
+    if (remove) {
+      if (total === 0) {
+        delete allSelectors[identifier]
       }
-      const [identifier, cssRule] = response
+    } else {
       if (!(identifier in allSelectors)) {
         const isTransform = identifier.startsWith('_transform')
         const shouldInsert = isTransform
@@ -92,8 +124,9 @@ export function updateInserted() {
         }
       }
     }
-    scannedNum.set(sheet, i)
   }
+
+  scannedNum.set(sheet, len)
 }
 
 function getTamaguiSelector(
@@ -122,9 +155,6 @@ const getIdentifierFromTamaguiSelector = (selector: string) =>
     .replace(/:[a-z]+$/, '')
     .slice(1)
 
-// move this to probably inside createTamagui
-updateInserted()
-
 const sheet = isClient
   ? document.head.appendChild(document.createElement('style')).sheet
   : null

package/src/helpers/normalizeValueWithProperty.ts

@@ -11,13 +11,13 @@ import { normalizeColor } from './normalizeColor'
 const cache = {}
 
 export function normalizeValueWithProperty(value: any, property?: string): any {
-  if (property && unitlessNumbers[property]) {
-    return value
-  }
   const cached = cache[value]
   if (cached !== undefined) {
     return cached
   }
+  if (property && property in unitlessNumbers) {
+    return value
+  }
   let res = value
   if (
     process.env.TAMAGUI_TARGET === 'web' &&

package/src/helpers/themeable.tsx

@@ -6,9 +6,9 @@ import { Theme } from '../views/Theme'
 export interface ThemeableProps {
   theme?: ThemeName | null
   themeInverse?: boolean
+  themeReset?: boolean
   componentName?: string
   debug?: boolean | 'verbose'
-  reset?: boolean
 }
 
 export function themeable<Component extends (props: any) => any>(
@@ -16,7 +16,7 @@ export function themeable<Component extends (props: any) => any>(
   opts?: { componentName?: string }
 ) {
   const withThemeComponent = forwardRef(function WithTheme(props: ThemeableProps, ref) {
-    const { themeInverse, theme, componentName, reset, ...rest } = props
+    const { themeInverse, theme, componentName, themeReset, ...rest } = props
     const element = React.createElement(component, { ...rest, ref } as any)
 
     return (
@@ -26,7 +26,7 @@ export function themeable<Component extends (props: any) => any>(
         name={(theme as any) || null}
         data-themeable
         debug={props.debug}
-        reset={props.reset}
+        reset={props.themeReset}
       >
         {element}
       </Theme>

package/src/hooks/useElementLayout.tsx

@@ -73,7 +73,7 @@ export function useElementLayout(
   // Observing is done in a separate effect to avoid this effect running
   // when 'onLayout' changes.
   useIsomorphicLayoutEffect(() => {
-    if (!(resizeObserver && hasLayoutEvent)) return
+    if (!resizeObserver || !hasLayoutEvent) return
     const node = ref.current
     if (!node) return
     LayoutHandlers.set(node, onLayoutEvent)

package/src/hooks/useMedia.tsx

@@ -35,6 +35,7 @@ export const mediaState: MediaQueryState =
 
 export const mediaQueryConfig: MediaQueries = {}
 export const getMedia = () => mediaState
+export const mediaKeysWithAndWithout$ = new Set<string>()
 
 // for SSR capture it at time of startup
 let initState: MediaQueryState
@@ -58,6 +59,8 @@ export const configureMedia = (config: TamaguiInternalConfig) => {
   if (!media) return
   for (const key in media) {
     mediaState[key] = mediaQueryDefaultActive?.[key] || false
+    mediaKeysWithAndWithout$.add(key)
+    mediaKeysWithAndWithout$.add(`$${key}`)
   }
   Object.assign(mediaQueryConfig, media)
   initState = { ...mediaState }

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,3 +1,5 @@
+import { stylePropsAll, validStyles } from '@tamagui/helpers'
+
 import { createComponent } from './createComponent'
 import { ReactNativeStaticConfigs } from './setupReactNative'
 import {
@@ -60,6 +62,19 @@ export function styled<
   //   }
   // }
 
+  // validate not using a variant over an existing valid style
+  if (process.env.NODE_ENV === 'development') {
+    if (options?.variants) {
+      for (const key in options.variants) {
+        if (key in stylePropsAll) {
+          console.error(
+            `Invalid variant key overlaps with style key: ${key}. Tamagui prevents defining variants that use valid style keys to reduce implementation complexity.`
+          )
+        }
+      }
+    }
+  }
+
   const staticConfigProps = (() => {
     const parentStaticConfig =
       'staticConfig' in Component ? (Component.staticConfig as StaticConfig) : null

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/helpers/insertStyleRule.d.ts

@@ -3,7 +3,8 @@ export declare const insertedTransforms: {};
 export declare const getAllSelectors: () => Record<string, string>;
 export declare const getAllRules: () => string[];
 export declare const getAllTransforms: () => {};
-export declare function updateInserted(): void;
+export declare function listenForSheetChanges(): void;
+export declare function scanAllSheets(): void;
 export declare function updateRules(identifier: string, rules: string[]): boolean;
 export type PartialStyleObject = Pick<StyleObject, 'identifier' | 'property' | 'rules'>;
 export type RulesToInsert = PartialStyleObject[];

package/types/helpers/themeable.d.ts

@@ -2,9 +2,9 @@ import { ThemeName } from '../types';
 export interface ThemeableProps {
     theme?: ThemeName | null;
     themeInverse?: boolean;
+    themeReset?: boolean;
     componentName?: string;
     debug?: boolean | 'verbose';
-    reset?: boolean;
 }
 export declare function themeable<Component extends (props: any) => any>(component: Component, opts?: {
     componentName?: string;

package/types/hooks/useMedia.d.ts

@@ -2,6 +2,7 @@ import { MediaQueries, MediaQueryKey, MediaQueryObject, MediaQueryState, Tamagui
 export declare const mediaState: MediaQueryState;
 export declare const mediaQueryConfig: MediaQueries;
 export declare const getMedia: () => MediaQueryState;
+export declare const mediaKeysWithAndWithout$: Set<string>;
 export declare const getInitialMediaState: () => MediaQueryState;
 export declare const getMediaKeyImportance: (key: string) => number;
 export declare const configureMedia: (config: TamaguiInternalConfig) => void;

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