@tamagui/web 1.130.1 → 1.130.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/web",
-  "version": "1.130.1",
+  "version": "1.130.3",
   "source": "src/index.ts",
   "main": "dist/cjs",
   "module": "dist/esm",
@@ -27,16 +27,16 @@
     "reset.css"
   ],
   "dependencies": {
-    "@tamagui/compose-refs": "1.130.1",
-    "@tamagui/constants": "1.130.1",
-    "@tamagui/helpers": "1.130.1",
-    "@tamagui/is-equal-shallow": "1.130.1",
-    "@tamagui/normalize-css-color": "1.130.1",
-    "@tamagui/timer": "1.130.1",
-    "@tamagui/types": "1.130.1",
-    "@tamagui/use-did-finish-ssr": "1.130.1",
-    "@tamagui/use-event": "1.130.1",
-    "@tamagui/use-force-update": "1.130.1"
+    "@tamagui/compose-refs": "1.130.3",
+    "@tamagui/constants": "1.130.3",
+    "@tamagui/helpers": "1.130.3",
+    "@tamagui/is-equal-shallow": "1.130.3",
+    "@tamagui/normalize-css-color": "1.130.3",
+    "@tamagui/timer": "1.130.3",
+    "@tamagui/types": "1.130.3",
+    "@tamagui/use-did-finish-ssr": "1.130.3",
+    "@tamagui/use-event": "1.130.3",
+    "@tamagui/use-force-update": "1.130.3"
   },
   "peerDependencies": {
     "react": "*",
@@ -44,7 +44,7 @@
     "react-native": "*"
   },
   "devDependencies": {
-    "@tamagui/build": "1.130.1",
+    "@tamagui/build": "1.130.3",
     "@testing-library/react": "^16.1.0",
     "csstype": "^3.0.10",
     "react": "*",

package/src/createComponent.tsx

@@ -652,96 +652,93 @@ export function createComponent<
 
     // avoids re-rendering if animation driver supports it
     // TODO believe we need to set some sort of "pendingState" in case it re-renders
-    if (splitStyles) {
-      if ((!hasAnimationProp || groupName) && animationDriver?.avoidReRenders) {
-        const useStyleListener = stateRef.current.useStyleListener
-        const ogSetStateShallow = setStateShallow
-
-        stateRef.current.setStateShallow = (nextOrGetNext) => {
-          const prev = NextState.get(stateRef) || state
-          const next =
-            typeof nextOrGetNext === 'function' ? nextOrGetNext(prev) : nextOrGetNext
-
-          if (next === prev || isEqualShallow(prev, next)) {
-            return
-          }
+    if (
+      splitStyles &&
+      (hasAnimationProp || groupName) &&
+      animationDriver?.avoidReRenders
+    ) {
+      const useStyleListener = stateRef.current.useStyleListener
+      const ogSetStateShallow = setStateShallow
 
-          // one thing we have to handle here and where it gets a bit more complex is group styles
-          const canAvoidReRender = Object.keys(next).every((key) =>
-            avoidReRenderKeys.has(key)
-          )
+      stateRef.current.setStateShallow = (nextOrGetNext) => {
+        const prev = NextState.get(stateRef) || state
+        const next =
+          typeof nextOrGetNext === 'function' ? nextOrGetNext(prev) : nextOrGetNext
 
-          if (canAvoidReRender) {
-            const updatedState = {
-              ...prev,
-              ...next,
-            }
-            NextState.set(stateRef, updatedState)
-
-            if (
-              process.env.NODE_ENV === 'development' &&
-              debugProp &&
-              debugProp !== 'profile'
-            ) {
-              console.groupCollapsed(`[⚡️] avoid setState`, next, { updatedState, props })
-              console.info(stateRef.current.host)
-              console.groupEnd()
-            }
+        if (next === prev || isEqualShallow(prev, next)) {
+          return
+        }
 
-            const {
-              group,
-              hasDynGroupChildren,
-              unmounted,
-              animation,
-              ...childrenGroupState
-            } = updatedState
-
-            // update before getting styles
-            if (groupContext) {
-              notifyGroupSubscribers(
-                groupContext,
-                stateRef.current.group || null,
-                childrenGroupState
-              )
-            }
+        // one thing we have to handle here and where it gets a bit more complex is group styles
+        const canAvoidReRender = Object.keys(next).every((key) =>
+          avoidReRenderKeys.has(key)
+        )
 
-            // we just emit and return for group without animation ^
-            if (!hasAnimationProp || !useStyleListener) {
-              return
-            }
+        if (canAvoidReRender) {
+          const updatedState = {
+            ...prev,
+            ...next,
+          }
+          NextState.set(stateRef, updatedState)
+
+          if (
+            process.env.NODE_ENV === 'development' &&
+            debugProp &&
+            debugProp !== 'profile'
+          ) {
+            console.groupCollapsed(`[⚡️] avoid setState`, next, { updatedState, props })
+            console.info(stateRef.current.host)
+            console.groupEnd()
+          }
 
-            const nextStyles = getSplitStyles(
-              props,
-              staticConfig,
-              theme,
-              themeName,
-              updatedState,
-              styleProps,
-              null,
-              componentContext,
-              allGroupContexts,
-              elementType,
-              startedUnhydrated,
-              debugProp
+          const {
+            group,
+            hasDynGroupChildren,
+            unmounted,
+            animation,
+            ...childrenGroupState
+          } = updatedState
+
+          // update before getting styles
+          if (groupContext) {
+            notifyGroupSubscribers(
+              groupContext,
+              stateRef.current.group || null,
+              childrenGroupState
             )
+          }
 
-            useStyleListener((nextStyles?.style || {}) as any)
-          } else {
-            if (
-              process.env.NODE_ENV === 'development' &&
-              debugProp &&
-              debugProp !== 'profile'
-            ) {
-              console.info(`[🐌] re-render`, { canAvoidReRender, next })
-            }
-            ogSetStateShallow(next)
+          const nextStyles = getSplitStyles(
+            props,
+            staticConfig,
+            theme,
+            themeName,
+            updatedState,
+            styleProps,
+            null,
+            componentContext,
+            allGroupContexts,
+            elementType,
+            startedUnhydrated,
+            debugProp
+          )
+
+          useStyleListener?.((nextStyles?.style || {}) as any)
+        } else {
+          if (
+            process.env.NODE_ENV === 'development' &&
+            debugProp &&
+            debugProp !== 'profile'
+          ) {
+            console.info(`[🐌] re-render`, { canAvoidReRender, next })
           }
+          ogSetStateShallow(next)
         }
+      }
 
-        // needs to capture latest props (it's called from memoized `events`)
-        setStateShallow = (state) => {
-          stateRef.current.setStateShallow?.(state)
-        }
+      // needs to capture latest props (it's called from memoized `events`)
+      setStateShallow = (state) => {
+        stateRef.current.setStateShallow?.(state)
       }
     }
 

package/src/hooks/useTheme.tsx

@@ -23,7 +23,7 @@ export const useThemeWithState = (
   const themeState = useThemeState(props, isRoot, keys)
 
   if (process.env.NODE_ENV === 'development') {
-    if (!themeState?.theme) {
+    if (!props.passThrough && !themeState?.theme) {
       if (process.env.TAMAGUI_DISABLE_NO_THEME_WARNING !== '1') {
         console.error(
           `[tamagui] No theme found, this could be due to an invalid theme name (given theme props ${JSON.stringify(
@@ -34,7 +34,7 @@ export const useThemeWithState = (
     }
   }
 
-  const themeProxied = getThemeProxied(props, themeState, keys)
+  const themeProxied = props.passThrough ? {} : getThemeProxied(props, themeState, keys)
 
   return [themeProxied, themeState]
 }

package/src/hooks/useThemeState.ts

@@ -205,7 +205,7 @@ const getNextState = (
   const parentState = states.get(parentId)
 
   if (props.passThrough) {
-    return [false, lastState ?? parentState!]
+    return [false, lastState || parentState || ({ name: '' } as any)]
   }
 
   if (!themes) {

package/src/views/Theme.tsx

@@ -141,7 +141,7 @@ export function getThemedChildren(
   }
 
   if (process.env.NODE_ENV === 'development') {
-    if (props.debug) {
+    if (!passThrough && props.debug) {
       console.warn(` getThemedChildren`, {
         requiresExtraWrapper,
         forceClassName,
@@ -157,7 +157,9 @@ export function getThemedChildren(
   }
 
   if (isWeb) {
-    const { className, style } = getThemeClassNameAndStyle(themeState, props, isRoot)
+    const { className = '', style } = passThrough
+      ? {}
+      : getThemeClassNameAndStyle(themeState, props, isRoot)
 
     children = (
       <span

package/types/createComponent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"createComponent.d.ts","sourceRoot":"","sources":["../src/createComponent.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAkB,MAAM,OAAO,CAAA;AAoBtC,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,oCAAoC,CAAA;AAG/E,OAAO,KAAK,EAGV,SAAS,EAMT,cAAc,EACd,WAAW,EACX,gBAAgB,EAChB,UAAU,EACV,kBAAkB,EAElB,YAAY,EAEZ,gBAAgB,EAChB,cAAc,EAOf,MAAM,SAAS,CAAA;AAahB,KAAK,iBAAiB,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,qBAAqB,CAAC,CAAC,CAAA;AAEpF,eAAO,MAAM,kBAAkB,wBAA+B,CAAA;AA8G9D,wBAAgB,eAAe,CAC7B,kBAAkB,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,EAAE,EACnD,GAAG,SAAS,cAAc,GAAG,cAAc,EAC3C,SAAS,GAAG,KAAK,EACjB,UAAU,SAAS,MAAM,GAAG,KAAK,EACjC,YAAY,EAAE,YAAY,wEAo1C3B;AAoBD,wBAAgB,QAAQ,CAAC,KAAK,EAAE;IAAE,QAAQ,CAAC,EAAE,GAAG,CAAA;CAAE,OAEjD;yBAFe,QAAQ;;;AAkBxB,eAAO,MAAM,MAAM,yFA0CjB,CAAA;AAEF,MAAM,MAAM,mBAAmB,GAAG;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,KAAK,CAAC,EAAE,UAAU,CAAA;IAClB,SAAS,CAAC,EAAE,OAAO,GAAG,MAAM,CAAA;IAC5B,SAAS,CAAC,EAAE,cAAc,GAAG,OAAO,CAAA;IACpC,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC3B,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,KAAK,CAAC,EAAE,SAAS,CAAA;CAClB,CAAA;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,mBAgGxD"}
+{"version":3,"file":"createComponent.d.ts","sourceRoot":"","sources":["../src/createComponent.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAkB,MAAM,OAAO,CAAA;AAoBtC,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,oCAAoC,CAAA;AAG/E,OAAO,KAAK,EAGV,SAAS,EAMT,cAAc,EACd,WAAW,EACX,gBAAgB,EAChB,UAAU,EACV,kBAAkB,EAElB,YAAY,EAEZ,gBAAgB,EAChB,cAAc,EAOf,MAAM,SAAS,CAAA;AAahB,KAAK,iBAAiB,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,qBAAqB,CAAC,CAAC,CAAA;AAEpF,eAAO,MAAM,kBAAkB,wBAA+B,CAAA;AA8G9D,wBAAgB,eAAe,CAC7B,kBAAkB,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,EAAE,EACnD,GAAG,SAAS,cAAc,GAAG,cAAc,EAC3C,SAAS,GAAG,KAAK,EACjB,UAAU,SAAS,MAAM,GAAG,KAAK,EACjC,YAAY,EAAE,YAAY,wEAi1C3B;AAoBD,wBAAgB,QAAQ,CAAC,KAAK,EAAE;IAAE,QAAQ,CAAC,EAAE,GAAG,CAAA;CAAE,OAEjD;yBAFe,QAAQ;;;AAkBxB,eAAO,MAAM,MAAM,yFA0CjB,CAAA;AAEF,MAAM,MAAM,mBAAmB,GAAG;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,KAAK,CAAC,EAAE,UAAU,CAAA;IAClB,SAAS,CAAC,EAAE,OAAO,GAAG,MAAM,CAAA;IAC5B,SAAS,CAAC,EAAE,cAAc,GAAG,OAAO,CAAA;IACpC,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC3B,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,KAAK,CAAC,EAAE,SAAS,CAAA;CAClB,CAAA;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,mBAgGxD"}

package/types/views/Theme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Theme.d.ts","sourceRoot":"","sources":["../../src/views/Theme.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,OAAO,CAAA;AAC7C,OAAO,KAAqE,MAAM,OAAO,CAAA;AAIzF,OAAO,EAIL,KAAK,UAAU,EAChB,MAAM,wBAAwB,CAAA;AAC/B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AAK1C,eAAO,MAAM,KAAK;kBACoB,OAAO;iCA4C3C,CAAA;AAIF,wBAAgB,iBAAiB,CAC/B,UAAU,EAAE,UAAU,EACtB,QAAQ,EAAE,GAAG,EACb,KAAK,EAAE,UAAU,EACjB,MAAM,qBAAQ,EACd,QAAQ,EAAE,gBAAgB,CAAC;IAAE,aAAa,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;CAAE,CAAC,EACnE,WAAW,UAAQ,OAwHpB"}
+{"version":3,"file":"Theme.d.ts","sourceRoot":"","sources":["../../src/views/Theme.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,OAAO,CAAA;AAC7C,OAAO,KAAqE,MAAM,OAAO,CAAA;AAIzF,OAAO,EAIL,KAAK,UAAU,EAChB,MAAM,wBAAwB,CAAA;AAC/B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AAK1C,eAAO,MAAM,KAAK;kBACoB,OAAO;iCA4C3C,CAAA;AAIF,wBAAgB,iBAAiB,CAC/B,UAAU,EAAE,UAAU,EACtB,QAAQ,EAAE,GAAG,EACb,KAAK,EAAE,UAAU,EACjB,MAAM,qBAAQ,EACd,QAAQ,EAAE,gBAAgB,CAAC;IAAE,aAAa,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;CAAE,CAAC,EACnE,WAAW,UAAQ,OA0HpB"}