@tamagui/core 1.0.1-beta.187 → 1.0.1-beta.189

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/core",
-  "version": "1.0.1-beta.187",
+  "version": "1.0.1-beta.189",
   "source": "src/index.ts",
   "main": "dist/cjs",
   "module": "dist/esm",
@@ -28,15 +28,15 @@
   ],
   "dependencies": {
     "@expo/match-media": "^0.3.0",
-    "@tamagui/compose-refs": "^1.0.1-beta.187",
-    "@tamagui/constants": "^1.0.1-beta.187",
-    "@tamagui/helpers": "^1.0.1-beta.187",
-    "@tamagui/normalize-css-color-lite": "^1.0.1-beta.187",
-    "@tamagui/rnw": "^1.0.1-beta.187",
-    "@tamagui/rnw-lite": "^1.0.1-beta.187",
-    "@tamagui/use-debounce": "^1.0.1-beta.187",
-    "@tamagui/use-event": "^1.0.1-beta.187",
-    "@tamagui/use-force-update": "^1.0.1-beta.187",
+    "@tamagui/compose-refs": "^1.0.1-beta.189",
+    "@tamagui/constants": "^1.0.1-beta.189",
+    "@tamagui/helpers": "^1.0.1-beta.189",
+    "@tamagui/normalize-css-color-lite": "^1.0.1-beta.189",
+    "@tamagui/rnw": "^1.0.1-beta.189",
+    "@tamagui/rnw-lite": "^1.0.1-beta.189",
+    "@tamagui/use-did-finish-ssr": "^1.0.1-beta.189",
+    "@tamagui/use-event": "^1.0.1-beta.189",
+    "@tamagui/use-force-update": "^1.0.1-beta.189",
     "expo-screen-orientation": "^4.3.0",
     "hyphenate-style-name": "^1.0.4"
   },
@@ -45,7 +45,7 @@
     "react-dom": "*"
   },
   "devDependencies": {
-    "@tamagui/build": "^1.0.1-beta.187",
+    "@tamagui/build": "^1.0.1-beta.189",
     "@types/node": "^16.11.9",
     "@types/react": "^18.0.15",
     "csstype": "^3.0.10",

package/src/createComponent.tsx

@@ -42,7 +42,7 @@ import { getAllSelectors } from './helpers/insertStyleRule'
 import { mergeProps } from './helpers/mergeProps'
 import { proxyThemeVariables } from './helpers/proxyThemeVariables'
 import { useShallowSetState } from './helpers/useShallowSetState'
-import { addMediaQueryListener, getCurrentMediaState } from './hooks/useMedia'
+import { addMediaQueryListener, getInitialMediaState } from './hooks/useMedia'
 import { usePressable } from './hooks/usePressable'
 import { useServerRef, useServerState } from './hooks/useServerHooks'
 import { getThemeManager, useTheme } from './hooks/useTheme'
@@ -68,6 +68,7 @@ import { wrapThemeManagerContext } from './views/Theme'
 React['keep']
 
 let defaultComponentState: TamaguiComponentState | null = null
+
 export const mouseUps = new Set<Function>()
 if (typeof document !== 'undefined') {
   const cancelTouches = () => {
@@ -1099,7 +1100,7 @@ export function createComponent<
         // only used by enterStyle
         mounted: false,
         animation: null,
-        mediaState: getCurrentMediaState(),
+        mediaState: getInitialMediaState(),
       })
     }
 

package/src/hooks/useMedia.tsx

@@ -1,6 +1,7 @@
 import { useIsomorphicLayoutEffect } from '@tamagui/constants'
 import { startTransition, useEffect, useMemo, useState } from 'react'
 
+import { getConfig } from '../config'
 import { matchMedia } from '../helpers/matchMedia'
 import {
   MediaQueries,
@@ -10,7 +11,6 @@ import {
   TamaguiInternalConfig,
 } from '../types'
 import { useSafeRef } from './useSafeRef'
-import { getConfig } from '..'
 
 export const mediaState: MediaQueryState =
   // development time safeguard
@@ -55,10 +55,9 @@ export const getMedia = () => {
 // for SSR capture it at time of startup
 let currentMediaState: MediaQueryState | null
 let initialMediaState: MediaQueryState | null
-// fairly concurrent mode sketchy but such an edge case ok for now
-let hasFinishedInitialRender = false
-export const getCurrentMediaState = () => {
-  if (getConfig().disableSSR || hasFinishedInitialRender) {
+
+export const getInitialMediaState = () => {
+  if (getConfig().disableSSR) {
     return currentMediaState || {}
   }
   return initialMediaState || {}
@@ -132,21 +131,12 @@ function setupMediaListeners() {
   })
 }
 
-const onIdle =
-  typeof requestIdleCallback === 'undefined' ? (cb) => setTimeout(cb, 100) : requestIdleCallback
-
 export function useMediaQueryListeners(config: TamaguiInternalConfig) {
   if (config.disableSSR) {
     return
   }
-
   useEffect(() => {
     setupMediaListeners()
-
-    onIdle(() => {
-      hasFinishedInitialRender = true
-    })
-
     return unlisten
   }, [])
 }
@@ -154,7 +144,7 @@ export function useMediaQueryListeners(config: TamaguiInternalConfig) {
 export function useMedia(): {
   [key in MediaQueryKey]: boolean
 } {
-  const [state, setState] = useState(getCurrentMediaState())
+  const [state, setState] = useState<MediaQueryState>(initialMediaState || {})
   const keys = useSafeRef({} as Record<string, boolean>)
 
   function updateState() {

package/src/index.ts

@@ -18,7 +18,6 @@ export type { RNWTextProps, RNWViewProps } from './types-rnw'
 export { getHasConfigured, getConfig, getThemes, getTokens, onConfiguredOnce } from './config'
 
 export * from './constants/constants'
-export * from '@tamagui/constants'
 export { createDOMProps } from '@tamagui/rnw'
 
 export * from './helpers/calc'
@@ -62,7 +61,6 @@ export {
 } from './hooks/useMedia'
 export * from './hooks/usePressable'
 export * from './hooks/useTheme'
-export * from './hooks/useIsSSR'
 export * from './hooks/useUnmountEffect'
 export * from './hooks/useSafeRef'
 
@@ -78,5 +76,8 @@ export * from './views/FontLanguage'
 export * from './views/TamaguiProvider'
 
 export * from '@tamagui/use-force-update'
+export * from '@tamagui/use-did-finish-ssr'
 export * from '@tamagui/use-event'
+export * from '@tamagui/compose-refs'
 export * from '@tamagui/helpers'
+export * from '@tamagui/constants'

package/src/views/TamaguiProvider.tsx

@@ -1,5 +1,4 @@
 import { isClient, isRSC, isServer } from '@tamagui/constants'
-import { useSetupHasSSRRendered } from '@tamagui/use-did-finish-ssr'
 import * as React from 'react'
 
 import { ButtonInsideButtonContext } from '../contexts/ButtonInsideButtonContext'
@@ -23,7 +22,6 @@ export function TamaguiProvider({
   }
 
   if (!isServer) {
-    useSetupHasSSRRendered()
     useMediaQueryListeners(config)
   }
 

package/types/hooks/useMedia.d.ts

@@ -5,7 +5,7 @@ export declare function addMediaQueryListener(key: MediaQueryKey, cb: MediaListe
 export declare function removeMediaQueryListener(key: MediaQueryKey, cb: MediaListener): void;
 export declare const mediaQueryConfig: MediaQueries;
 export declare const getMedia: () => MediaQueryState;
-export declare const getCurrentMediaState: () => MediaQueryState;
+export declare const getInitialMediaState: () => MediaQueryState;
 export declare const configureMedia: (config: TamaguiInternalConfig) => void;
 export declare function useMediaQueryListeners(config: TamaguiInternalConfig): void;
 export declare function useMedia(): {

package/types/index.d.ts

@@ -15,7 +15,6 @@ export * from './types';
 export type { RNWTextProps, RNWViewProps } from './types-rnw';
 export { getHasConfigured, getConfig, getThemes, getTokens, onConfiguredOnce } from './config';
 export * from './constants/constants';
-export * from '@tamagui/constants';
 export { createDOMProps } from '@tamagui/rnw';
 export * from './helpers/calc';
 export * from './helpers/useShallowSetState';
@@ -45,7 +44,6 @@ export * from './hooks/useIsTouchDevice';
 export { configureMedia, getMedia, mediaState, useMedia, useMediaPropsActive, mediaObjectToString, addMediaQueryListener, removeMediaQueryListener, mediaQueryConfig, } from './hooks/useMedia';
 export * from './hooks/usePressable';
 export * from './hooks/useTheme';
-export * from './hooks/useIsSSR';
 export * from './hooks/useUnmountEffect';
 export * from './hooks/useSafeRef';
 export * from './views/Slot';
@@ -59,6 +57,9 @@ export * from './views/ThemeReset';
 export * from './views/FontLanguage';
 export * from './views/TamaguiProvider';
 export * from '@tamagui/use-force-update';
+export * from '@tamagui/use-did-finish-ssr';
 export * from '@tamagui/use-event';
+export * from '@tamagui/compose-refs';
 export * from '@tamagui/helpers';
+export * from '@tamagui/constants';
 //# sourceMappingURL=index.d.ts.map

package/src/hooks/useIsSSR.tsx

@@ -1,25 +0,0 @@
-import { isServer, isWeb, useIsomorphicLayoutEffect } from '@tamagui/constants'
-import { useState } from 'react'
-
-import { startTransition } from '../helpers/startTransition'
-
-// because any change before first useEffect causes hydration / mismatch issues
-
-export const useIsSSR = (props?: { immediate?: boolean }) => {
-  const [val, setVal] = useState(true)
-
-  if (isWeb && !isServer) {
-    useIsomorphicLayoutEffect(() => {
-      // could also have a global tamagui `config.immediateSSRTransition`
-      if (props?.immediate) {
-        setVal(false)
-      } else {
-        startTransition(() => {
-          setVal(false)
-        })
-      }
-    }, [])
-  }
-
-  return val
-}