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

package/src/addTheme.ts

@@ -1,5 +1,6 @@
+import { isWeb } from '@tamagui/constants'
+
 import { getConfig, updateConfig } from './config'
-import { isWeb } from './constants/platform'
 import { getThemeCSSRules } from './helpers/getThemeCSSRules'
 import { ensureThemeVariable, proxyThemeToParents } from './helpers/themes'
 import { ThemeDefinition, ThemeParsed } from './types'

package/src/constants/constants.ts

@@ -1,4 +1,4 @@
-import { isWeb } from './platform'
+import { isWeb } from '@tamagui/constants'
 
 export const THEME_NAME_SEPARATOR = '_'
 export const THEME_CLASSNAME_PREFIX = `t_`

package/src/createComponent.tsx

@@ -1,3 +1,4 @@
+import { isClient, isRSC, isWeb, useIsomorphicLayoutEffect } from '@tamagui/constants'
 /* eslint-disable react-hooks/rules-of-hooks */
 import {
   composeEventHandlers,
@@ -26,7 +27,6 @@ import { Text, View, ViewStyle } from 'react-native'
 
 import { getConfig, onConfiguredOnce } from './config'
 import { stackDefaultStyles } from './constants/constants'
-import { isClient, isRSC, isWeb, useIsomorphicLayoutEffect } from './constants/platform'
 import { FontLanguageContext } from './contexts/FontLanguageContext'
 import { TextAncestorContext } from './contexts/TextAncestorContext'
 import { assignNativePropsToWeb } from './helpers/assignNativePropsToWeb'

package/src/createTamagui.ts

@@ -1,5 +1,6 @@
+import { isRSC, isWeb } from '@tamagui/constants'
+
 import { configListeners, setConfig } from './config'
-import { isRSC, isWeb } from './constants/platform'
 import { createVariables } from './createVariables'
 import { getThemeCSSRules } from './helpers/getThemeCSSRules'
 import { getAllRules } from './helpers/insertStyleRule'

package/src/createVariable.ts

@@ -1,7 +1,7 @@
+import { isWeb } from '@tamagui/constants'
 import { simpleHash } from '@tamagui/helpers'
 
 import { getConfig } from './config'
-import { isWeb } from './constants/platform'
 
 /**
  * Should rename this to Token

package/src/helpers/calc.ts

@@ -1,4 +1,5 @@
-import { isWeb } from '../constants/platform'
+import { isWeb } from '@tamagui/constants'
+
 import { getVariableVariable } from '../createVariable'
 import { FontLineHeightTokens, FontSizeTokens, SizeTokens, SpaceTokens } from '../types'
 

package/src/helpers/createPropMapper.ts

@@ -1,6 +1,7 @@
+import { isWeb } from '@tamagui/constants'
+
 import { getConfig } from '../config'
 import { isDevTools } from '../constants/isDevTools'
-import { isWeb } from '../constants/platform'
 import { Variable, getVariableValue, isVariable } from '../createVariable'
 import {
   DebugProp,

package/src/helpers/expandStyle.ts

@@ -3,7 +3,7 @@
  * Copyright (c) Nicolas Gallagher licensed under the MIT license.
  */
 
-import { isWeb } from '../constants/platform'
+import { isWeb } from '@tamagui/constants'
 
 export function expandStyle(key: string, value: any) {
   if (process.env.TAMAGUI_TARGET === 'web') {

package/src/helpers/expandStyles.ts

@@ -1,5 +1,6 @@
+import { isWeb } from '@tamagui/constants'
+
 import { getConfig } from '../config'
-import { isWeb } from '../constants/platform'
 import { expandStyle } from './expandStyle'
 import { colorToRGBA, normalizeColor } from './normalizeColor'
 import { normalizeValueWithProperty } from './normalizeValueWithProperty.js'

package/src/helpers/getSplitStyles.tsx

@@ -1,10 +1,10 @@
+import { isClient, isRSC, isWeb, useIsomorphicLayoutEffect } from '@tamagui/constants'
 import { stylePropsText, stylePropsTransform, validPseudoKeys, validStyles } from '@tamagui/helpers'
 import { useInsertionEffect } from 'react'
 import type { ViewStyle } from 'react-native'
 
 import { getConfig } from '../config'
 import { isDevTools } from '../constants/isDevTools'
-import { isClient, isRSC, isWeb, useIsomorphicLayoutEffect } from '../constants/platform'
 import { mediaState as globalMediaState, mediaQueryConfig } from '../hooks/useMedia'
 import type {
   DebugProp,

package/src/hooks/useIsMounted.ts

@@ -1,7 +1,6 @@
+import { useIsomorphicLayoutEffect } from '@tamagui/constants'
 import { useRef } from 'react'
 
-import { useIsomorphicLayoutEffect } from '../constants/platform'
-
 export function useIsMounted() {
   const isMounted = useRef(false)
 

package/src/hooks/useIsSSR.tsx

@@ -1,6 +1,6 @@
+import { isServer, isWeb, useIsomorphicLayoutEffect } from '@tamagui/constants'
 import { useState } from 'react'
 
-import { isServer, isWeb, useIsomorphicLayoutEffect } from '../constants/platform'
 import { startTransition } from '../helpers/startTransition'
 
 // because any change before first useEffect causes hydration / mismatch issues

package/src/hooks/useIsTouchDevice.tsx

@@ -1,7 +1,6 @@
+import { isServer, isTouchable, isWeb, useIsomorphicLayoutEffect } from '@tamagui/constants'
 import { useState } from 'react'
 
-import { isServer, isTouchable, isWeb, useIsomorphicLayoutEffect } from '../constants/platform'
-
 // ssr friendly
 
 export const useIsTouchDevice = () => {

package/src/hooks/useMedia.tsx

@@ -1,6 +1,6 @@
+import { useIsomorphicLayoutEffect } from '@tamagui/constants'
 import { startTransition, useEffect, useMemo, useState } from 'react'
 
-import { useIsomorphicLayoutEffect } from '../constants/platform'
 import { matchMedia } from '../helpers/matchMedia'
 import {
   MediaQueries,
@@ -10,6 +10,7 @@ import {
   TamaguiInternalConfig,
 } from '../types'
 import { useSafeRef } from './useSafeRef'
+import { getConfig } from '..'
 
 export const mediaState: MediaQueryState =
   // development time safeguard
@@ -51,6 +52,18 @@ export const getMedia = () => {
   return mediaState
 }
 
+// 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) {
+    return currentMediaState || {}
+  }
+  return initialMediaState || {}
+}
+
 const dispose = new Set<Function>()
 
 export const configureMedia = (config: TamaguiInternalConfig) => {
@@ -61,15 +74,12 @@ export const configureMedia = (config: TamaguiInternalConfig) => {
   }
   Object.assign(mediaQueryConfig, media)
   currentMediaState = { ...mediaState }
+  initialMediaState = currentMediaState
   if (config.disableSSR) {
     setupMediaListeners()
   }
 }
 
-// for SSR capture it at time of startup
-let currentMediaState: MediaQueryState | null
-export const getCurrentMediaState = () => currentMediaState
-
 function unlisten() {
   dispose.forEach((cb) => cb())
   dispose.clear()
@@ -122,6 +132,9 @@ function setupMediaListeners() {
   })
 }
 
+const onIdle =
+  typeof requestIdleCallback === 'undefined' ? (cb) => setTimeout(cb, 100) : requestIdleCallback
+
 export function useMediaQueryListeners(config: TamaguiInternalConfig) {
   if (config.disableSSR) {
     return
@@ -129,6 +142,11 @@ export function useMediaQueryListeners(config: TamaguiInternalConfig) {
 
   useEffect(() => {
     setupMediaListeners()
+
+    onIdle(() => {
+      hasFinishedInitialRender = true
+    })
+
     return unlisten
   }, [])
 }
@@ -136,7 +154,7 @@ export function useMediaQueryListeners(config: TamaguiInternalConfig) {
 export function useMedia(): {
   [key in MediaQueryKey]: boolean
 } {
-  const [state, setState] = useState(currentMediaState || {})
+  const [state, setState] = useState(getCurrentMediaState())
   const keys = useSafeRef({} as Record<string, boolean>)
 
   function updateState() {

package/src/hooks/useSafeRef.ts

@@ -1,7 +1,6 @@
+import { useIsomorphicLayoutEffect } from '@tamagui/constants'
 import { useRef } from 'react'
 
-import { useIsomorphicLayoutEffect } from '../constants/platform'
-
 // dai-shi 🙏
 // https://dev.to/uhyo_/a-concurrent-mode-safe-version-of-useref-1325
 

package/src/hooks/useServerHooks.tsx

@@ -1,7 +1,6 @@
+import { isRSC } from '@tamagui/constants'
 import { useRef, useState } from 'react'
 
-import { isRSC } from '../constants/platform'
-
 export const useServerState = isRSC
   ? (((val: any) => [val, idFn]) as unknown as typeof useState)
   : useState

package/src/hooks/useTheme.tsx

@@ -1,9 +1,9 @@
+import { isRSC, isServer, useIsomorphicLayoutEffect } from '@tamagui/constants'
 import { useForceUpdate } from '@tamagui/use-force-update'
 import React, { useContext, useLayoutEffect, useMemo, useRef, useState } from 'react'
 
 import { getConfig } from '../config'
 import { isDevTools } from '../constants/isDevTools'
-import { isRSC, isServer, useIsomorphicLayoutEffect } from '../constants/platform'
 import { ThemeContext } from '../contexts/ThemeContext'
 import { areEqualSets } from '../helpers/areEqualSets'
 import {

package/src/index.ts

@@ -18,7 +18,7 @@ export type { RNWTextProps, RNWViewProps } from './types-rnw'
 export { getHasConfigured, getConfig, getThemes, getTokens, onConfiguredOnce } from './config'
 
 export * from './constants/constants'
-export * from './constants/platform'
+export * from '@tamagui/constants'
 export { createDOMProps } from '@tamagui/rnw'
 
 export * from './helpers/calc'
@@ -48,6 +48,7 @@ export * from './hooks/useConstant'
 export * from './hooks/useId'
 export * from './hooks/useIsMounted'
 export * from './hooks/useIsTouchDevice'
+
 export {
   configureMedia,
   getMedia,

package/src/views/Slot.tsx

@@ -1,10 +1,9 @@
 // via radix
 
 import { composeRefs } from '@tamagui/compose-refs'
+import { isWeb } from '@tamagui/constants'
 import * as React from 'react'
 
-import { isWeb } from '../constants/platform'
-
 /* -------------------------------------------------------------------------------------------------
  * Slot
  * -----------------------------------------------------------------------------------------------*/

package/src/views/TamaguiProvider.tsx

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

package/src/views/Text.tsx

@@ -1,7 +1,7 @@
+import { isWeb } from '@tamagui/constants'
 import { stylePropsTextOnly, validStyles } from '@tamagui/helpers'
 import { Text as TextView } from 'react-native'
 
-import { isWeb } from '../constants/platform'
 import { createComponent } from '../createComponent'
 import { TextProps, TextPropsBase } from '../types'
 

package/src/views/Theme.tsx

@@ -1,6 +1,6 @@
+import { isWeb } from '@tamagui/constants'
 import React, { memo, useMemo } from 'react'
 
-import { isWeb } from '../constants/platform'
 import { variableToString } from '../createVariable'
 import { ThemeManager, ThemeManagerContext } from '../helpers/ThemeManager'
 import { ThemeProps, useChangeThemeEffect } from '../hooks/useTheme'

package/src/views/ThemeInverse.tsx

@@ -1,6 +1,6 @@
+import { useIsomorphicLayoutEffect } from '@tamagui/constants'
 import React, { useState } from 'react'
 
-import { useIsomorphicLayoutEffect } from '../constants/platform'
 import { useDefaultThemeName, useThemeName } from '../hooks/useTheme'
 import { Theme } from './Theme'
 

package/src/views/ThemeReset.tsx

@@ -1,6 +1,6 @@
+import { isWeb } from '@tamagui/constants'
 import React, { useContext, useLayoutEffect, useState } from 'react'
 
-import { isWeb } from '../constants/platform'
 import { ThemeManagerContext } from '../helpers/ThemeManager'
 import { Theme } from './Theme'
 

package/types/constants/platform.d.ts

@@ -1,4 +1,4 @@
-import { useEffect } from 'react';
+import { useLayoutEffect } from 'react';
 export declare const isAndroid: boolean;
 export declare const isIOS: boolean;
 export declare const isWeb: boolean;
@@ -6,7 +6,7 @@ export declare const isWindowDefined: boolean;
 export declare const isServer: boolean;
 export declare const isClient: boolean;
 export declare const isRSC: any;
-export declare const useIsomorphicLayoutEffect: typeof useEffect;
+export declare const useIsomorphicLayoutEffect: typeof useLayoutEffect;
 export declare const isChrome: boolean;
 export declare const isWebTouchable: boolean;
 export declare const isTouchable: boolean;

package/types/hooks/useDidFinishSSR.d.ts

@@ -0,0 +1,3 @@
+export declare function useSetupHasSSRRendered(): void;
+export declare function useDidFinishSSR(): boolean;
+//# sourceMappingURL=useDidFinishSSR.d.ts.map

package/types/hooks/useMedia.d.ts

@@ -5,8 +5,8 @@ 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 configureMedia: (config: TamaguiInternalConfig) => void;
-export declare const getCurrentMediaState: () => MediaQueryState | null;
 export declare function useMediaQueryListeners(config: TamaguiInternalConfig): void;
 export declare function useMedia(): {
     [key in MediaQueryKey]: boolean;

package/types/index.d.ts

@@ -15,7 +15,7 @@ export * from './types';
 export type { RNWTextProps, RNWViewProps } from './types-rnw';
 export { getHasConfigured, getConfig, getThemes, getTokens, onConfiguredOnce } from './config';
 export * from './constants/constants';
-export * from './constants/platform';
+export * from '@tamagui/constants';
 export { createDOMProps } from '@tamagui/rnw';
 export * from './helpers/calc';
 export * from './helpers/useShallowSetState';