@tamagui/core 1.0.1-beta.217 → 1.0.1-beta.219

package/dist/esm/views/ThemeInverse.js

@@ -1,31 +1,36 @@
 import { jsx } from "react/jsx-runtime";
-import { useIsomorphicLayoutEffect } from "@tamagui/constants";
+import { isWeb, useIsomorphicLayoutEffect } from "@tamagui/constants";
 import { useState } from "react";
 import { useDefaultThemeName, useThemeName } from "../hooks/useTheme";
 import { Theme } from "./Theme";
-const ThemeInverse = ({
-  children,
-  disable
-}) => {
+const toggleTheme = (themeName) => {
+  return themeName.startsWith("light") ? "dark" : "light";
+};
+const useThemeInverse = (props = {}) => {
   const themeName = useThemeName();
   const defaultTheme = useDefaultThemeName();
   const [name, setName] = useState(null);
-  useIsomorphicLayoutEffect(() => {
-    if (themeName.startsWith("dark")) {
-      setName("light");
-    } else if (themeName.startsWith("light")) {
-      setName("dark");
-    }
-  }, [defaultTheme, themeName]);
-  if (disable) {
-    return children;
+  if (isWeb) {
+    useIsomorphicLayoutEffect(() => {
+      setName(toggleTheme(themeName || defaultTheme || ""));
+    }, [defaultTheme, themeName]);
   }
+  return props.disable ? null : name;
+};
+const ThemeInverse = ({
+  children,
+  disable
+}) => {
+  const inverseTheme = useThemeInverse({
+    disable
+  });
   return /* @__PURE__ */ jsx(Theme, {
-    name,
+    name: inverseTheme,
     children
   });
 };
 export {
-  ThemeInverse
+  ThemeInverse,
+  useThemeInverse
 };
 //# sourceMappingURL=ThemeInverse.js.map

package/dist/esm/views/ThemeInverse.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/views/ThemeInverse.tsx"],
-  "sourcesContent": ["import { useIsomorphicLayoutEffect } from '@tamagui/constants'\nimport React, { useState } from 'react'\n\nimport { useDefaultThemeName, useThemeName } from '../hooks/useTheme'\nimport { Theme } from './Theme'\n\nexport const ThemeInverse = ({\n  children,\n  disable,\n}: {\n  children: React.ReactNode\n  disable?: boolean\n}) => {\n  const themeName = useThemeName()\n  const defaultTheme = useDefaultThemeName()\n  const [name, setName] = useState<null | string>(null)\n\n  // ssr\n  useIsomorphicLayoutEffect(() => {\n    if (themeName.startsWith('dark')) {\n      setName('light')\n    } else if (themeName.startsWith('light')) {\n      setName('dark')\n    }\n  }, [defaultTheme, themeName])\n\n  if (disable) {\n    return children as JSX.Element\n  }\n\n  return <Theme name={name}>{children}</Theme>\n}\n"],
-  "mappings": "AA8BS;AA9BT,SAAS,iCAAiC;AAC1C,SAAgB,gBAAgB;AAEhC,SAAS,qBAAqB,oBAAoB;AAClD,SAAS,aAAa;AAEf,MAAM,eAAe,CAAC;AAAA,EAC3B;AAAA,EACA;AACF,MAGM;AACJ,QAAM,YAAY,aAAa;AAC/B,QAAM,eAAe,oBAAoB;AACzC,QAAM,CAAC,MAAM,OAAO,IAAI,SAAwB,IAAI;AAGpD,4BAA0B,MAAM;AAC9B,QAAI,UAAU,WAAW,MAAM,GAAG;AAChC,cAAQ,OAAO;AAAA,IACjB,WAAW,UAAU,WAAW,OAAO,GAAG;AACxC,cAAQ,MAAM;AAAA,IAChB;AAAA,EACF,GAAG,CAAC,cAAc,SAAS,CAAC;AAE5B,MAAI,SAAS;AACX,WAAO;AAAA,EACT;AAEA,SAAO,oBAAC;AAAA,IAAM;AAAA,IAAa;AAAA,GAAS;AACtC;",
+  "sourcesContent": ["import { isWeb, useIsomorphicLayoutEffect } from '@tamagui/constants'\nimport React, { useState } from 'react'\n\nimport { useDefaultThemeName, useThemeName } from '../hooks/useTheme'\nimport { Theme } from './Theme'\n\nexport type ThemeInverseProps = {\n  disable?: boolean\n}\n\nconst toggleTheme = (themeName: string) => {\n  return themeName.startsWith('light') ? 'dark' : 'light'\n}\n\nexport const useThemeInverse = (props: ThemeInverseProps = {}) => {\n  const themeName = useThemeName()\n  const defaultTheme = useDefaultThemeName()\n  const [name, setName] = useState<null | string>(null)\n\n  if (isWeb) {\n    // for SSR must be in effect\n    useIsomorphicLayoutEffect(() => {\n      setName(toggleTheme(themeName || defaultTheme || ''))\n    }, [defaultTheme, themeName])\n  }\n\n  return props.disable ? null : name\n}\n\nexport const ThemeInverse = ({\n  children,\n  disable,\n}: ThemeInverseProps & {\n  children: React.ReactNode\n}) => {\n  const inverseTheme = useThemeInverse({\n    disable,\n  })\n  return <Theme name={inverseTheme}>{children}</Theme>\n}\n"],
+  "mappings": "AAsCS;AAtCT,SAAS,OAAO,iCAAiC;AACjD,SAAgB,gBAAgB;AAEhC,SAAS,qBAAqB,oBAAoB;AAClD,SAAS,aAAa;AAMtB,MAAM,cAAc,CAAC,cAAsB;AACzC,SAAO,UAAU,WAAW,OAAO,IAAI,SAAS;AAClD;AAEO,MAAM,kBAAkB,CAAC,QAA2B,CAAC,MAAM;AAChE,QAAM,YAAY,aAAa;AAC/B,QAAM,eAAe,oBAAoB;AACzC,QAAM,CAAC,MAAM,OAAO,IAAI,SAAwB,IAAI;AAEpD,MAAI,OAAO;AAET,8BAA0B,MAAM;AAC9B,cAAQ,YAAY,aAAa,gBAAgB,EAAE,CAAC;AAAA,IACtD,GAAG,CAAC,cAAc,SAAS,CAAC;AAAA,EAC9B;AAEA,SAAO,MAAM,UAAU,OAAO;AAChC;AAEO,MAAM,eAAe,CAAC;AAAA,EAC3B;AAAA,EACA;AACF,MAEM;AACJ,QAAM,eAAe,gBAAgB;AAAA,IACnC;AAAA,EACF,CAAC;AACD,SAAO,oBAAC;AAAA,IAAM,MAAM;AAAA,IAAe;AAAA,GAAS;AAC9C;",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/core",
-  "version": "1.0.1-beta.217",
+  "version": "1.0.1-beta.219",
   "source": "src/index.ts",
   "main": "dist/cjs",
   "module": "dist/esm",
@@ -28,23 +28,23 @@
   ],
   "dependencies": {
     "@expo/match-media": "^0.3.0",
-    "@tamagui/compose-refs": "^1.0.1-beta.217",
-    "@tamagui/constants": "^1.0.1-beta.217",
-    "@tamagui/helpers": "^1.0.1-beta.217",
-    "@tamagui/normalize-css-color-lite": "^1.0.1-beta.217",
-    "@tamagui/react-native-use-pressable": "^1.0.1-beta.217",
-    "@tamagui/react-native-use-responder-events": "^1.0.1-beta.217",
-    "@tamagui/types-react-native": "^1.0.1-beta.217",
-    "@tamagui/use-did-finish-ssr": "^1.0.1-beta.217",
-    "@tamagui/use-event": "^1.0.1-beta.217",
-    "@tamagui/use-force-update": "^1.0.1-beta.217"
+    "@tamagui/compose-refs": "^1.0.1-beta.219",
+    "@tamagui/constants": "^1.0.1-beta.219",
+    "@tamagui/helpers": "^1.0.1-beta.219",
+    "@tamagui/normalize-css-color-lite": "^1.0.1-beta.219",
+    "@tamagui/react-native-use-pressable": "^1.0.1-beta.219",
+    "@tamagui/react-native-use-responder-events": "^1.0.1-beta.219",
+    "@tamagui/types-react-native": "^1.0.1-beta.219",
+    "@tamagui/use-did-finish-ssr": "^1.0.1-beta.219",
+    "@tamagui/use-event": "^1.0.1-beta.219",
+    "@tamagui/use-force-update": "^1.0.1-beta.219"
   },
   "peerDependencies": {
     "react": ">=18",
     "react-dom": ">=18"
   },
   "devDependencies": {
-    "@tamagui/build": "^1.0.1-beta.217",
+    "@tamagui/build": "^1.0.1-beta.219",
     "@types/node": "^16.11.9",
     "@types/react": "^18.0.15",
     "@types/react-native": "^0.69.2",

package/src/createComponent.tsx

@@ -212,8 +212,13 @@ export function createComponent<
       }
     }
 
+    const shouldAvoidClasses =
+      !isWeb || !!(props.animation && avoidClassesWhileAnimating) || !staticConfig.acceptsClassName
+    const shouldForcePseudo = !!propsIn.forceStyle
+    const noClassNames = shouldAvoidClasses || shouldForcePseudo
+
     const forceUpdate = useForceUpdate()
-    const theme = useTheme(props.theme, componentName, props, forceUpdate)
+    const theme = useTheme(props.theme, componentName, props, forceUpdate, !noClassNames)
 
     const shouldSetMounted = needsMount && state.unmounted
     const setMounted = shouldSetMounted
@@ -230,12 +235,7 @@ export function createComponent<
         }
       : undefined
 
-    const shouldAvoidClasses =
-      !isWeb || !!(props.animation && avoidClassesWhileAnimating) || !staticConfig.acceptsClassName
-
-    const shouldForcePseudo = !!propsIn.forceStyle
     const hasTextAncestor = !!(isWeb && isText ? useContext(TextAncestorContext) : false)
-    const noClassNames = shouldAvoidClasses || shouldForcePseudo
     const languageContext = isRSC ? null : useContext(FontLanguageContext)
     const isDisabled = props.disabled ?? props.accessibilityState?.disabled
 
@@ -676,6 +676,8 @@ export function createComponent<
             for (const style of styles) {
               if (style?.fontFamily) {
                 style.fontFamily = overrideFace
+                delete style.fontWeight
+                delete style.fontStyle
               }
             }
           }

package/src/helpers/getSplitStyles.tsx

@@ -196,7 +196,7 @@ export const getSplitStyles: StyleSplitter = (
   const shouldDoClasses =
     staticConfig.acceptsClassName && (isWeb || IS_STATIC) && !state.noClassNames
 
-  const style: ViewStyle = {}
+  let style: ViewStyle = {}
   let flatTransforms: Record<string, any> | undefined
 
   const len = propKeys.length
@@ -537,7 +537,7 @@ export const getSplitStyles: StyleSplitter = (
           conf,
           languageContext,
           true,
-          true
+          state.noClassNames
         )
 
         const descriptor = pseudoDescriptors[key as keyof typeof pseudoDescriptors]
@@ -554,6 +554,7 @@ export const getSplitStyles: StyleSplitter = (
 
         if (shouldDoClasses) {
           const pseudoStyles = getAtomicStyle(pseudoStyleObject, descriptor)
+          if (debug) console.log('pseudoStyles', pseudoStyles)
           for (const psuedoStyle of pseudoStyles) {
             const fullKey = `${psuedoStyle.property}${PROP_SPLIT}${descriptor.name}`
             if (!usedKeys[fullKey]) {
@@ -612,7 +613,7 @@ export const getSplitStyles: StyleSplitter = (
           languageContext,
           // TODO try true like pseudo
           false,
-          true
+          state.noClassNames
         )
 
         if (process.env.NODE_ENV === 'development' && debug === 'verbose') {
@@ -656,7 +657,6 @@ export const getSplitStyles: StyleSplitter = (
       }
 
       if (validStyleProps[key]) {
-        usedKeys[key] = 1
         mergeStyle(key, val)
         continue
       }
@@ -725,6 +725,9 @@ export const getSplitStyles: StyleSplitter = (
           addStyleToInsertRules(rulesToInsert, atomicStyle)
           mergeClassName(transforms, classNames, key, atomicStyle.identifier)
         }
+        if (!IS_STATIC) {
+          style = {}
+        }
       }
     }
 

package/src/helpers/getStylesAtomic.ts

@@ -78,10 +78,8 @@ const generateAtomicStyles = (
   const style = styleIn as Record<string, string | null | undefined>
 
   // transform
-  if (style.transform) {
-    if (Array.isArray(style.transform)) {
-      style.transform = style.transform.map(mapTransform).join(' ')
-    }
+  if (style.transform && Array.isArray(style.transform)) {
+    style.transform = style.transform.map(mapTransform).join(' ')
   }
 
   styleToCSS(style)

package/src/helpers/themeable.tsx

@@ -16,17 +16,13 @@ export function themeable<Component extends (props: any) => any>(
   const withThemeComponent = forwardRef(function WithTheme(props: any, ref) {
     const { themeInverse, theme, ...rest } = props
     const element = React.createElement(component, { ...rest, ref } as any)
-    if (themeInverse) {
-      return <ThemeInverse>{element}</ThemeInverse>
-    }
-    if (theme || opts) {
-      return (
+    return (
+      <ThemeInverse disable={!themeInverse}>
         <Theme componentName={opts?.componentName} name={(theme as any) || null}>
           {element}
         </Theme>
-      )
-    }
-    return element
+      </ThemeInverse>
+    )
   })
 
   const withTheme: any = withThemeComponent

package/src/hooks/useMedia.tsx

@@ -1,5 +1,4 @@
-import { useIsomorphicLayoutEffect } from '@tamagui/constants'
-import { MutableRefObject, useEffect, useMemo, useState, useSyncExternalStore } from 'react'
+import { useEffect, useMemo, useSyncExternalStore } from 'react'
 
 import { getConfig } from '../config'
 import { createProxy } from '../helpers/createProxy'
@@ -140,16 +139,9 @@ export function useMediaListeners(config: TamaguiInternalConfig) {
   }, [])
 }
 
-const nextTick = process.nextTick || setImmediate
 const currentStateListeners = new Set<any>()
-let isUpdating = false
 function updateCurrentState() {
-  if (isUpdating) return
-  isUpdating = true
-  nextTick(() => {
-    currentStateListeners.forEach((cb) => cb(mediaState))
-    isUpdating = false
-  })
+  currentStateListeners.forEach((cb) => cb(mediaState))
 }
 function subscribe(subscriber: any) {
   currentStateListeners.add(subscriber)

package/src/hooks/useTheme.tsx

@@ -37,7 +37,8 @@ export const useTheme = (
   themeName?: string | null,
   componentName?: string,
   props?: ThemeProps,
-  forceUpdate?: any
+  forceUpdate?: any,
+  disableTracking?: boolean
 ): ThemeParsed => {
   // TODO this can use useChangeThemeEffect almost ready
   if (isRSC) {
@@ -99,18 +100,40 @@ export const useTheme = (
   }
 
   return useMemo(() => {
-    return getThemeProxied(theme, name, className, themeManager, state, debugProp)
-  }, [theme, name, className, themeManager, state, debugProp])
+    return getThemeProxied({
+      theme,
+      name,
+      className,
+      themeManager,
+      onStringKeyAccess(key) {
+        if (disableTracking) return
+        if (state) {
+          if (state.current.isRendering && !state.current.keys.has(key)) {
+            state.current.keys.add(key)
+            if (process.env.NODE_ENV === 'development' && debugProp === 'verbose') {
+              // eslint-disable-next-line no-console
+              console.log('  🔸 tracking theme', key)
+            }
+          }
+        }
+      },
+    })
+  }, [theme, name, className, themeManager, debugProp, disableTracking])
 }
 
-function getThemeProxied(
-  theme: any,
-  name: string,
-  className?: string,
-  themeManager?: ThemeManager | null,
-  state?: React.MutableRefObject<UseThemeState>,
-  debugProp?: boolean | 'verbose'
-) {
+function getThemeProxied({
+  theme,
+  name,
+  className,
+  themeManager,
+  onStringKeyAccess,
+}: {
+  theme: any
+  name: string
+  onStringKeyAccess?: (cb: string) => void
+  className?: string
+  themeManager?: ThemeManager | null
+}) {
   return createProxy(theme, {
     has(_, key) {
       if (typeof key === 'string' && key[0] === '$') {
@@ -141,15 +164,7 @@ function getThemeProxied(
       if (!themeManager) {
         return theme[key]
       }
-      if (state) {
-        if (state.current.isRendering && !state.current.keys.has(key)) {
-          state.current.keys.add(key)
-          if (process.env.NODE_ENV === 'development' && debugProp === 'verbose') {
-            // eslint-disable-next-line no-console
-            console.log('  🔸 tracking theme', key)
-          }
-        }
-      }
+      onStringKeyAccess?.(key)
       return themeManager.getValue(key)
     },
   })

package/src/views/ThemeInverse.tsx

@@ -1,32 +1,40 @@
-import { useIsomorphicLayoutEffect } from '@tamagui/constants'
+import { isWeb, useIsomorphicLayoutEffect } from '@tamagui/constants'
 import React, { useState } from 'react'
 
 import { useDefaultThemeName, useThemeName } from '../hooks/useTheme'
 import { Theme } from './Theme'
 
-export const ThemeInverse = ({
-  children,
-  disable,
-}: {
-  children: React.ReactNode
+export type ThemeInverseProps = {
   disable?: boolean
-}) => {
+}
+
+const toggleTheme = (themeName: string) => {
+  return themeName.startsWith('light') ? 'dark' : 'light'
+}
+
+export const useThemeInverse = (props: ThemeInverseProps = {}) => {
   const themeName = useThemeName()
   const defaultTheme = useDefaultThemeName()
   const [name, setName] = useState<null | string>(null)
 
-  // ssr
-  useIsomorphicLayoutEffect(() => {
-    if (themeName.startsWith('dark')) {
-      setName('light')
-    } else if (themeName.startsWith('light')) {
-      setName('dark')
-    }
-  }, [defaultTheme, themeName])
-
-  if (disable) {
-    return children as JSX.Element
+  if (isWeb) {
+    // for SSR must be in effect
+    useIsomorphicLayoutEffect(() => {
+      setName(toggleTheme(themeName || defaultTheme || ''))
+    }, [defaultTheme, themeName])
   }
 
-  return <Theme name={name}>{children}</Theme>
+  return props.disable ? null : name
+}
+
+export const ThemeInverse = ({
+  children,
+  disable,
+}: ThemeInverseProps & {
+  children: React.ReactNode
+}) => {
+  const inverseTheme = useThemeInverse({
+    disable,
+  })
+  return <Theme name={inverseTheme}>{children}</Theme>
 }

package/types/hooks/useTheme.d.ts

@@ -9,7 +9,7 @@ export interface ThemeProps {
     reset?: boolean;
     debug?: boolean | 'verbose';
 }
-export declare const useTheme: (themeName?: string | null, componentName?: string, props?: ThemeProps, forceUpdate?: any) => ThemeParsed;
+export declare const useTheme: (themeName?: string | null, componentName?: string, props?: ThemeProps, forceUpdate?: any, disableTracking?: boolean) => ThemeParsed;
 export declare const getThemeManager: (theme: any) => ThemeManager | undefined;
 export declare function useThemeName(opts?: {
     parent?: true;

package/types/views/ThemeInverse.d.ts

@@ -1,6 +1,9 @@
 import React from 'react';
-export declare const ThemeInverse: ({ children, disable, }: {
+export declare type ThemeInverseProps = {
+    disable?: boolean;
+};
+export declare const useThemeInverse: (props?: ThemeInverseProps) => string | null;
+export declare const ThemeInverse: ({ children, disable, }: ThemeInverseProps & {
     children: React.ReactNode;
-    disable?: boolean | undefined;
 }) => JSX.Element;
 //# sourceMappingURL=ThemeInverse.d.ts.map