@tamagui/core 1.0.10 → 1.0.12

package/dist/esm/helpers/normalizeColor.js

@@ -14,9 +14,15 @@ const normalizeColor = (color, opacity) => {
   const colorProcessed = normalizeCSSColor(color);
   if (colorProcessed !== null) {
     const { r, g, b, a } = rgba(colorProcessed);
-    return `rgba(${r},${g},${b},${a.toFixed(2)})`;
+    return `rgba(${r},${g},${b},${(opacity ?? a).toFixed(2)})`;
+  }
+  if (isWeb) {
+    return color;
+  } else {
+    if (process.env.NODE_ENV === "development") {
+      console.warn(`Unknown color value: ${color}`);
+    }
   }
-  return color;
 };
 const webColors = {
   currentColor: true,

package/dist/esm/helpers/normalizeColor.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/helpers/normalizeColor.ts"],
-  "sourcesContent": ["import { isWeb } from '@tamagui/constants'\nimport normalizeCSSColor, { rgba } from '@tamagui/normalize-css-color'\n\nexport { rgba } from '@tamagui/normalize-css-color'\n\nexport const normalizeColor = (color?: string | null, opacity?: number) => {\n  if (color === null || color === undefined) {\n    return\n  }\n  if (color === 'transparent') {\n    return `rgba(0,0,0,0)`\n  }\n  if (\n    color[0] === '$' ||\n    (isWeb && (webColors[color] || color[0] === '_' || color.startsWith('var(')))\n  ) {\n    return color\n  }\n  const colorProcessed = normalizeCSSColor(color)\n  if (colorProcessed !== null) {\n    const { r, g, b, a } = rgba(colorProcessed)\n    return `rgba(${r},${g},${b},${a.toFixed(2)})`\n  }\n\n  return color\n}\n\nconst webColors = {\n  currentColor: true,\n  currentcolor: true,\n  inherit: true,\n}\n"],
-  "mappings": "AAAA,SAAS,aAAa;AACtB,OAAO,qBAAqB,YAAY;AAExC,SAAS,QAAAA,aAAY;AAEd,MAAM,iBAAiB,CAAC,OAAuB,YAAqB;AACzE,MAAI,UAAU,QAAQ,UAAU,QAAW;AACzC;AAAA,EACF;AACA,MAAI,UAAU,eAAe;AAC3B,WAAO;AAAA,EACT;AACA,MACE,MAAM,OAAO,OACZ,UAAU,UAAU,UAAU,MAAM,OAAO,OAAO,MAAM,WAAW,MAAM,IAC1E;AACA,WAAO;AAAA,EACT;AACA,QAAM,iBAAiB,kBAAkB,KAAK;AAC9C,MAAI,mBAAmB,MAAM;AAC3B,UAAM,EAAE,GAAG,GAAG,GAAG,EAAE,IAAI,KAAK,cAAc;AAC1C,WAAO,QAAQ,KAAK,KAAK,KAAK,EAAE,QAAQ,CAAC;AAAA,EAC3C;AAEA,SAAO;AACT;AAEA,MAAM,YAAY;AAAA,EAChB,cAAc;AAAA,EACd,cAAc;AAAA,EACd,SAAS;AACX;",
+  "sourcesContent": ["import { isWeb } from '@tamagui/constants'\nimport normalizeCSSColor, { rgba } from '@tamagui/normalize-css-color'\n\nexport { rgba } from '@tamagui/normalize-css-color'\n\nexport const normalizeColor = (color?: string | null, opacity?: number) => {\n  if (color === null || color === undefined) {\n    return\n  }\n  if (color === 'transparent') {\n    return `rgba(0,0,0,0)`\n  }\n  if (\n    color[0] === '$' ||\n    (isWeb && (webColors[color] || color[0] === '_' || color.startsWith('var(')))\n  ) {\n    return color\n  }\n  const colorProcessed = normalizeCSSColor(color)\n  if (colorProcessed !== null) {\n    const { r, g, b, a } = rgba(colorProcessed)\n    return `rgba(${r},${g},${b},${(opacity ?? a).toFixed(2)})`\n  }\n\n  if (isWeb) {\n    return color\n  } else {\n    if (process.env.NODE_ENV === 'development') {\n      console.warn(`Unknown color value: ${color}`)\n    }\n  }\n}\n\nconst webColors = {\n  currentColor: true,\n  currentcolor: true,\n  inherit: true,\n}\n"],
+  "mappings": "AAAA,SAAS,aAAa;AACtB,OAAO,qBAAqB,YAAY;AAExC,SAAS,QAAAA,aAAY;AAEd,MAAM,iBAAiB,CAAC,OAAuB,YAAqB;AACzE,MAAI,UAAU,QAAQ,UAAU,QAAW;AACzC;AAAA,EACF;AACA,MAAI,UAAU,eAAe;AAC3B,WAAO;AAAA,EACT;AACA,MACE,MAAM,OAAO,OACZ,UAAU,UAAU,UAAU,MAAM,OAAO,OAAO,MAAM,WAAW,MAAM,IAC1E;AACA,WAAO;AAAA,EACT;AACA,QAAM,iBAAiB,kBAAkB,KAAK;AAC9C,MAAI,mBAAmB,MAAM;AAC3B,UAAM,EAAE,GAAG,GAAG,GAAG,EAAE,IAAI,KAAK,cAAc;AAC1C,WAAO,QAAQ,KAAK,KAAK,MAAM,WAAW,GAAG,QAAQ,CAAC;AAAA,EACxD;AAEA,MAAI,OAAO;AACT,WAAO;AAAA,EACT,OAAO;AACL,QAAI,QAAQ,IAAI,aAAa,eAAe;AAC1C,cAAQ,KAAK,wBAAwB,OAAO;AAAA,IAC9C;AAAA,EACF;AACF;AAEA,MAAM,YAAY;AAAA,EAChB,cAAc;AAAA,EACd,cAAc;AAAA,EACd,SAAS;AACX;",
   "names": ["rgba"]
 }

package/dist/esm/helpers/useShallowSetState.js

@@ -1,20 +1,29 @@
-import { useCallback } from "react";
-function useShallowSetState(setter, debug, debugName) {
+import { startTransition, useCallback } from "react";
+function useShallowSetState(setter, transition, debug, debugName) {
   return useCallback(
     (next) => {
-      setter((prev) => {
-        for (const key in next) {
-          if (prev[key] !== next[key]) {
-            if (process.env.NODE_ENV === "development") {
-              if (debug === "verbose") {
-                console.log(` \u25B2 setState ${debugName}`, next);
+      const run = () => {
+        setter((prev) => {
+          for (const key in next) {
+            if (prev[key] !== next[key]) {
+              if (process.env.NODE_ENV === "development") {
+                if (debug === "verbose") {
+                  console.log(` \u25B2 setState ${debugName}`, next);
+                }
               }
+              return { ...prev, ...next };
             }
-            return { ...prev, ...next };
           }
-        }
-        return prev;
-      });
+          return prev;
+        });
+      };
+      if (transition) {
+        startTransition(() => {
+          run();
+        });
+      } else {
+        run();
+      }
     },
     [setter]
   );

package/dist/esm/helpers/useShallowSetState.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/helpers/useShallowSetState.tsx"],
-  "sourcesContent": ["import React, { useCallback } from 'react'\n\nimport { DebugProp } from '../types'\n\nexport function useShallowSetState<State extends Object>(\n  setter: React.Dispatch<React.SetStateAction<State>>,\n  debug?: DebugProp,\n  debugName?: string\n) {\n  return useCallback(\n    (next: Partial<State>) => {\n      setter((prev) => {\n        for (const key in next) {\n          if (prev[key] !== next[key]) {\n            if (process.env.NODE_ENV === 'development') {\n              if (debug === 'verbose') {\n                // eslint-disable-next-line no-console\n                console.log(` \u25B2 setState ${debugName}`, next)\n              }\n            }\n            return { ...prev, ...next }\n          }\n        }\n        return prev\n      })\n    },\n    [setter]\n  )\n}\n"],
-  "mappings": "AAAA,SAAgB,mBAAmB;AAI5B,SAAS,mBACd,QACA,OACA,WACA;AACA,SAAO;AAAA,IACL,CAAC,SAAyB;AACxB,aAAO,CAAC,SAAS;AACf,mBAAW,OAAO,MAAM;AACtB,cAAI,KAAK,SAAS,KAAK,MAAM;AAC3B,gBAAI,QAAQ,IAAI,aAAa,eAAe;AAC1C,kBAAI,UAAU,WAAW;AAEvB,wBAAQ,IAAI,oBAAe,aAAa,IAAI;AAAA,cAC9C;AAAA,YACF;AACA,mBAAO,EAAE,GAAG,MAAM,GAAG,KAAK;AAAA,UAC5B;AAAA,QACF;AACA,eAAO;AAAA,MACT,CAAC;AAAA,IACH;AAAA,IACA,CAAC,MAAM;AAAA,EACT;AACF;",
+  "sourcesContent": ["import React, { startTransition, useCallback } from 'react'\n\nimport { DebugProp } from '../types'\n\nexport function useShallowSetState<State extends Object>(\n  setter: React.Dispatch<React.SetStateAction<State>>,\n  transition?: boolean,\n  debug?: DebugProp,\n  debugName?: string\n) {\n  return useCallback(\n    (next: Partial<State>) => {\n      const run = () => {\n        setter((prev) => {\n          for (const key in next) {\n            if (prev[key] !== next[key]) {\n              if (process.env.NODE_ENV === 'development') {\n                if (debug === 'verbose') {\n                  // eslint-disable-next-line no-console\n                  console.log(` \u25B2 setState ${debugName}`, next)\n                }\n              }\n              return { ...prev, ...next }\n            }\n          }\n          return prev\n        })\n      }\n      if (transition) {\n        startTransition(() => {\n          run()\n        })\n      } else {\n        run()\n      }\n    },\n    [setter]\n  )\n}\n"],
+  "mappings": "AAAA,SAAgB,iBAAiB,mBAAmB;AAI7C,SAAS,mBACd,QACA,YACA,OACA,WACA;AACA,SAAO;AAAA,IACL,CAAC,SAAyB;AACxB,YAAM,MAAM,MAAM;AAChB,eAAO,CAAC,SAAS;AACf,qBAAW,OAAO,MAAM;AACtB,gBAAI,KAAK,SAAS,KAAK,MAAM;AAC3B,kBAAI,QAAQ,IAAI,aAAa,eAAe;AAC1C,oBAAI,UAAU,WAAW;AAEvB,0BAAQ,IAAI,oBAAe,aAAa,IAAI;AAAA,gBAC9C;AAAA,cACF;AACA,qBAAO,EAAE,GAAG,MAAM,GAAG,KAAK;AAAA,YAC5B;AAAA,UACF;AACA,iBAAO;AAAA,QACT,CAAC;AAAA,MACH;AACA,UAAI,YAAY;AACd,wBAAgB,MAAM;AACpB,cAAI;AAAA,QACN,CAAC;AAAA,MACH,OAAO;AACL,YAAI;AAAA,MACN;AAAA,IACF;AAAA,IACA,CAAC,MAAM;AAAA,EACT;AACF;",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/core",
-  "version": "1.0.10",
+  "version": "1.0.12",
   "source": "src/index.ts",
   "main": "dist/cjs",
   "module": "dist/esm",
@@ -28,22 +28,22 @@
     "reset.css"
   ],
   "dependencies": {
-    "@tamagui/compose-refs": "^1.0.10",
-    "@tamagui/constants": "^1.0.10",
-    "@tamagui/helpers": "^1.0.10",
-    "@tamagui/normalize-css-color": "^1.0.10",
-    "@tamagui/react-native-use-pressable": "^1.0.10",
-    "@tamagui/react-native-use-responder-events": "^1.0.10",
-    "@tamagui/use-did-finish-ssr": "^1.0.10",
-    "@tamagui/use-event": "^1.0.10",
-    "@tamagui/use-force-update": "^1.0.10"
+    "@tamagui/compose-refs": "^1.0.12",
+    "@tamagui/constants": "^1.0.12",
+    "@tamagui/helpers": "^1.0.12",
+    "@tamagui/normalize-css-color": "^1.0.12",
+    "@tamagui/react-native-use-pressable": "^1.0.12",
+    "@tamagui/react-native-use-responder-events": "^1.0.12",
+    "@tamagui/use-did-finish-ssr": "^1.0.12",
+    "@tamagui/use-event": "^1.0.12",
+    "@tamagui/use-force-update": "^1.0.12"
   },
   "peerDependencies": {
     "react": "*",
     "react-dom": "*"
   },
   "devDependencies": {
-    "@tamagui/build": "^1.0.10",
+    "@tamagui/build": "^1.0.12",
     "@testing-library/react": "^13.4.0",
     "csstype": "^3.0.10",
     "react": "^18.2.0",

package/src/createComponent.tsx

@@ -189,7 +189,7 @@ export function createComponent<
       ? { ...states[0], [propsIn.forceStyle]: true }
       : states[0]
     const setState = states[1]
-    const setStateShallow = useShallowSetState(setState, debugProp, componentName)
+    const setStateShallow = useShallowSetState(setState, true, debugProp, componentName)
 
     // conditional but if ever true stays true
     // [animated, inversed]

package/src/helpers/createPropMapper.ts

@@ -286,10 +286,6 @@ const resolveTokensAndVariants: StyleResolver = (
     const fKey = conf.shorthands[rKey] || rKey
     const val = value[rKey]
 
-    if (debug) {
-      console.log('wtf', key, value, rKey, val)
-    }
-
     if (isVariable(val)) {
       res[fKey] = !isWeb || returnVariablesAs === 'value' ? val.val : val.variable
     } else if (variants[fKey]) {

package/src/helpers/insertStyleRule.tsx

@@ -38,7 +38,8 @@ const isClient = typeof document !== 'undefined'
 
 // multiple sheets could have the same ids so we have to count
 
-const scannedNum = new WeakMap<CSSStyleSheet, number>()
+// only cache tamagui styles
+const scannedCache = new WeakMap<CSSStyleSheet, string>()
 const totalSheetSelectors = new Map<string, number>()
 
 export function listenForSheetChanges() {
@@ -87,17 +88,25 @@ function updateSheetStyles(sheet: CSSStyleSheet, remove = false) {
     return
   }
 
-  const len = rules.length
-  const lastScanned = scannedNum.get(sheet) || 0
+  // not tamagui stylesheet
+  const firstSelector = getTamaguiSelector(rules[0])?.[0]
+  if (!firstSelector) {
+    return
+  }
 
+  const lastSelector = getTamaguiSelector(rules[rules.length - 1])?.[0]
+
+  const cacheKey = `${rules.length}${firstSelector}${lastSelector}`
+  const lastScanned = scannedCache.get(sheet)
   if (!remove) {
-    // avoid work dumb but works
-    if (lastScanned === len) {
+    // avoid re-scanning
+    if (lastScanned === cacheKey) {
       return
     }
   }
 
-  for (let i = lastScanned; i < len; i++) {
+  const len = rules.length
+  for (let i = 0; i < len; i++) {
     const rule = rules[i]
     const response = getTamaguiSelector(rule)
     if (!response) {
@@ -126,7 +135,7 @@ function updateSheetStyles(sheet: CSSStyleSheet, remove = false) {
     }
   }
 
-  scannedNum.set(sheet, len)
+  scannedCache.set(sheet, cacheKey)
 }
 
 function getTamaguiSelector(

package/src/helpers/normalizeColor.ts

@@ -19,10 +19,16 @@ export const normalizeColor = (color?: string | null, opacity?: number) => {
   const colorProcessed = normalizeCSSColor(color)
   if (colorProcessed !== null) {
     const { r, g, b, a } = rgba(colorProcessed)
-    return `rgba(${r},${g},${b},${a.toFixed(2)})`
+    return `rgba(${r},${g},${b},${(opacity ?? a).toFixed(2)})`
   }
 
-  return color
+  if (isWeb) {
+    return color
+  } else {
+    if (process.env.NODE_ENV === 'development') {
+      console.warn(`Unknown color value: ${color}`)
+    }
+  }
 }
 
 const webColors = {

package/src/helpers/useShallowSetState.tsx

@@ -1,28 +1,38 @@
-import React, { useCallback } from 'react'
+import React, { startTransition, useCallback } from 'react'
 
 import { DebugProp } from '../types'
 
 export function useShallowSetState<State extends Object>(
   setter: React.Dispatch<React.SetStateAction<State>>,
+  transition?: boolean,
   debug?: DebugProp,
   debugName?: string
 ) {
   return useCallback(
     (next: Partial<State>) => {
-      setter((prev) => {
-        for (const key in next) {
-          if (prev[key] !== next[key]) {
-            if (process.env.NODE_ENV === 'development') {
-              if (debug === 'verbose') {
-                // eslint-disable-next-line no-console
-                console.log(` ▲ setState ${debugName}`, next)
+      const run = () => {
+        setter((prev) => {
+          for (const key in next) {
+            if (prev[key] !== next[key]) {
+              if (process.env.NODE_ENV === 'development') {
+                if (debug === 'verbose') {
+                  // eslint-disable-next-line no-console
+                  console.log(` ▲ setState ${debugName}`, next)
+                }
               }
+              return { ...prev, ...next }
             }
-            return { ...prev, ...next }
           }
-        }
-        return prev
-      })
+          return prev
+        })
+      }
+      if (transition) {
+        startTransition(() => {
+          run()
+        })
+      } else {
+        run()
+      }
     },
     [setter]
   )

package/types/helpers/useShallowSetState.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { DebugProp } from '../types';
-export declare function useShallowSetState<State extends Object>(setter: React.Dispatch<React.SetStateAction<State>>, debug?: DebugProp, debugName?: string): (next: Partial<State>) => void;
+export declare function useShallowSetState<State extends Object>(setter: React.Dispatch<React.SetStateAction<State>>, transition?: boolean, debug?: DebugProp, debugName?: string): (next: Partial<State>) => void;
 //# sourceMappingURL=useShallowSetState.d.ts.map

package/types/helpers/cache.d.ts

@@ -1,10 +0,0 @@
-type Value = Object | Array<any> | string | number;
-export type Style = {
-    [key: string]: Value;
-};
-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/helpers/getSize.d.ts

@@ -1,4 +0,0 @@
-import { SizeTokens, SpaceTokens } from '../types';
-export declare const getSize: (size?: SizeTokens | undefined, shift?: number, bounds?: number[]) => any;
-export declare const stepTokenUpOrDown: (tokens: Object, current?: SizeTokens | SpaceTokens | string, shift?: number, bounds?: number[]) => any;
-//# sourceMappingURL=getSize.d.ts.map