@tamagui/core 1.0.1-beta.173 → 1.0.1-beta.174

package/src/createComponent.tsx

@@ -709,6 +709,21 @@ export function createComponent<
         fontFamily = fontFamily.slice(1)
       }
 
+      if (process.env.NODE_ENV === 'development') {
+        if (fontFamily?.startsWith(`var(`)) {
+          // eslint-disable-next-line no-console
+          console.warn(
+            `Received variable instead of resolved name of font, this is a bug. Please report on Github.`,
+            {
+              fontFamily,
+              props,
+              splitStyles,
+              staticConfig,
+            }
+          )
+        }
+      }
+
       const classList = [
         componentName ? componentClassName : '',
         fontFamily ? `font_${fontFamily}` : '',

package/src/helpers/ThemeManager.tsx

@@ -89,7 +89,7 @@ export class ThemeManager {
     return Boolean(this.keys.get(uuid)?.size)
   }
 
-  update({ name, theme, className }: SetActiveThemeProps = {}, force = false) {
+  update({ name, theme, className }: SetActiveThemeProps = {}, force = false, notify = true) {
     if (!force) {
       // className compare on web, avoids light/dark re-renders
       const nameChanged = name !== this.name
@@ -100,7 +100,9 @@ export class ThemeManager {
     this.className = className || ''
     this.name = name || ''
     this.theme = theme
-    this.notifyListeners()
+    if (notify) {
+      this.notifyListeners()
+    }
     return true
   }
 

package/src/helpers/createPropMapper.ts

@@ -1,7 +1,7 @@
 import { getConfig } from '../config'
 import { isDevTools } from '../constants/isDevTools'
 import { isWeb } from '../constants/platform'
-import { Variable, isVariable } from '../createVariable'
+import { Variable, getVariableValue, isVariable } from '../createVariable'
 import {
   DebugProp,
   GenericVariantDefinitions,
@@ -57,6 +57,7 @@ export const createPropMapper = (staticConfig: StaticConfigParsed) => {
       props[conf.inverseShorthands.fontFamily] ||
       props.fontFamily ||
       defaultProps.fontFamily ||
+      propsIn.fontFamily ||
       '$body'
 
     const variantValue = resolveVariants(
@@ -72,7 +73,8 @@ export const createPropMapper = (staticConfig: StaticConfigParsed) => {
       staticConfig,
       '',
       languageContext,
-      avoidDefaultProps
+      avoidDefaultProps,
+      debug
     )
 
     if (variantValue) {
@@ -100,7 +102,7 @@ export const createPropMapper = (staticConfig: StaticConfigParsed) => {
           debug
         )
       } else if (isVariable(value)) {
-        value = getVariableValue(key, value, returnVariablesAs)
+        value = resolveVariableValue(key, value, returnVariablesAs)
       }
     }
 
@@ -146,7 +148,10 @@ const resolveVariants: StyleResolver = (
   debug
 ) => {
   const variant = variants && variants[key]
-  if (!variant || value === undefined) return
+  if (!variant || value === undefined) {
+    return
+  }
+
   let variantValue = getVariantDefinition(variant, key, value, conf)
 
   if (!variantValue) {
@@ -176,7 +181,16 @@ const resolveVariants: StyleResolver = (
     )
   }
 
+  let fontFamilyResult: any
+
   if (isObj(variantValue)) {
+    const fontFamilyUpdate =
+      variantValue.fontFamily || variantValue[conf.inverseShorthands.fontFamily]
+
+    if (fontFamilyUpdate) {
+      fontFamilyResult = getFontFamilyFromNameOrVariable(fontFamilyUpdate, conf)
+    }
+
     variantValue = resolveTokensAndVariants(
       key,
       variantValue,
@@ -184,7 +198,7 @@ const resolveVariants: StyleResolver = (
       defaultProps,
       theme,
       variants,
-      fontFamily,
+      fontFamilyResult || fontFamily,
       conf,
       returnVariablesAs,
       staticConfig,
@@ -196,10 +210,56 @@ const resolveVariants: StyleResolver = (
   }
 
   if (variantValue) {
-    return Object.entries(expandStyles(variantValue))
+    const next = Object.entries(expandStyles(variantValue))
+
+    // store any changed font family (only support variables for now)
+    if (fontFamilyResult && fontFamilyResult[0] === '$') {
+      fontFamilyCache.set(next, getVariableValue(fontFamilyResult))
+    }
+
+    return next
   }
 }
 
+// handles finding and resolving the fontFamily to the token name
+// this is used as `font_[name]` in className for nice css variable support
+export function getFontFamilyFromNameOrVariable(input: any, conf: TamaguiInternalConfig) {
+  if (isVariable(input)) {
+    const val = variableToFontNameCache.get(input)
+    if (val) {
+      return val
+    } else {
+      for (const key in conf.fontsParsed) {
+        const familyVariable = conf.fontsParsed[key].family
+        if (isVariable(familyVariable)) {
+          variableToFontNameCache.set(familyVariable, key)
+          if (familyVariable === input) {
+            return key
+          }
+        }
+      }
+    }
+  } else if (typeof input === 'string') {
+    if (input?.[0] === '$') {
+      return input
+    } else {
+      // this could be mapped back to
+      if (process.env.NODE_ENV === 'development') {
+        // eslint-disable-next-line no-console
+        console.log('[tamagui] should map back', input)
+      }
+    }
+  }
+}
+
+const variableToFontNameCache = new WeakMap<Variable, string>()
+
+// special helper for special font family
+const fontFamilyCache = new WeakMap()
+export const getPropMappedFontFamily = (expanded?: any) => {
+  return expanded && fontFamilyCache.get(expanded)
+}
+
 const resolveTokensAndVariants: StyleResolver = (
   key, // we dont use key assume value is object instead
   value,
@@ -220,6 +280,7 @@ const resolveTokensAndVariants: StyleResolver = (
   for (const rKey in value) {
     const fKey = conf.shorthands[rKey] || rKey
     const val = value[rKey]
+
     if (isVariable(val)) {
       res[fKey] = !isWeb || returnVariablesAs === 'value' ? val.val : val.variable
     } else if (variants[fKey]) {
@@ -385,7 +446,7 @@ const getToken = (
       // eslint-disable-next-line no-console
       console.log(`   ﹒ propMapper getToken`, key, valOrVar)
     }
-    return getVariableValue(key, valOrVar, resolveAs)
+    return resolveVariableValue(key, valOrVar, resolveAs)
   }
   if (process.env.NODE_ENV === 'development') {
     if (value && value[0] === '$') {
@@ -407,7 +468,7 @@ Set the debug prop to true to see more detailed debug information.`
   return value
 }
 
-function getVariableValue(
+function resolveVariableValue(
   key: string,
   valOrVar: Variable | any,
   resolveAs: ResolveVariableTypes = 'auto'

package/src/helpers/getSplitStyles.tsx

@@ -19,6 +19,7 @@ import type {
 } from '../types'
 import { FontLanguageProps, LanguageContextType } from '../views/FontLanguage.types'
 import { createMediaStyle } from './createMediaStyle'
+import { getPropMappedFontFamily } from './createPropMapper'
 import { fixStyles } from './expandStyles'
 import { getAtomicStyle, getStylesAtomic, styleToCSS } from './getStylesAtomic'
 import {
@@ -149,10 +150,6 @@ export const getSplitStyles: StyleSplitter = (
       keyInit = expandedKey
     }
 
-    if (keyInit === 'fontFamily' && fontFamily === undefined) {
-      fontFamily = valInit
-    }
-
     if (usedKeys.has(keyInit)) continue
     if (skipProps[keyInit]) continue
     if (!isWeb && keyInit.startsWith('data-')) continue
@@ -280,6 +277,10 @@ export const getSplitStyles: StyleSplitter = (
             debug
           )
 
+    if (!fontFamily) {
+      fontFamily = getPropMappedFontFamily(expanded)
+    }
+
     if (process.env.NODE_ENV === 'development' && debug === 'verbose') {
       // eslint-disable-next-line no-console
       console.log('expanded', expanded)
@@ -431,6 +432,10 @@ export const getSplitStyles: StyleSplitter = (
         continue
       }
 
+      if (key === 'fontFamily' && !fontFamily && valInit && val) {
+        fontFamily = valInit[0] === '$' ? valInit : val
+      }
+
       if (validStyleProps[key]) {
         usedKeys.add(key)
         if (val && val[0] === '_') {

package/src/hooks/useMedia.tsx

@@ -177,6 +177,60 @@ export function useMedia(): {
   )
 }
 
+/**
+ * Useful for more complex components that need access to the currently active props,
+ * accounting for the currently active media queries.
+ *
+ * Use sparingly, is will loop props and trigger re-render on all media queries.
+ *
+ * */
+export function useMediaPropsActive<A extends Object>(
+  props: A
+): {
+  // remove all media
+  [Key in keyof A extends `$${string}` ? never : keyof A]: A[Key]
+} {
+  const media = useMedia()
+
+  return useMemo(() => {
+    const evaluated = {} as A
+    const lastSetImportanceForKey = {}
+    const propNames = Object.keys(props)
+    const mediaKeysOrdered = Object.keys(getMedia())
+
+    function update(k: string, v: any, importance = 0) {
+      if (lastSetImportanceForKey[k] > importance) {
+        return
+      }
+      lastSetImportanceForKey[k] = importance
+      evaluated[k] = v
+    }
+
+    for (let i = propNames.length - 1; i >= 0; i--) {
+      const key = propNames[i]
+      const val = props[key]
+      if (key[0] === '$') {
+        const shortKey = key.slice(1)
+        if (!media[shortKey]) {
+          continue
+        }
+        if (val && typeof val === 'object') {
+          const subPropNames = Object.keys(val)
+          const mediaImportance = mediaKeysOrdered.indexOf(shortKey)
+          for (let j = subPropNames.length; j--; j >= 0) {
+            const skey = subPropNames[j]
+            update(skey, val[skey], mediaImportance)
+          }
+        }
+      } else {
+        update(key, val)
+      }
+    }
+
+    return evaluated
+  }, [media, props])
+}
+
 function camelToHyphen(str: string) {
   return str.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`).toLowerCase()
 }

package/src/hooks/useTheme.tsx

@@ -236,9 +236,20 @@ export const useChangeThemeEffect = (
     return new ThemeManager(next.name, next.className, next.theme, parentManager, reset)
   })
 
+  // not concurrent safe but fixes native (but breaks SSR and not needed on web (i think) so leave only on native)
+  let didChange = false
+  if (process.env.TAMAGUI_TARGET === 'native') {
+    didChange = Boolean(
+      next?.name !== themeManager.name || next?.className !== themeManager.className
+    )
+    if (didChange) {
+      themeManager.update(next, false, false)
+    }
+  }
+
   if (!isServer) {
     useLayoutEffect(() => {
-      themeManager.update(next)
+      themeManager.update(next, didChange)
       activeThemeManagers.add(themeManager)
 
       const disposeParentOnChange = parentManager.onChangeTheme(() => {
@@ -262,7 +273,7 @@ export const useChangeThemeEffect = (
         disposeParentOnChange()
       }
       // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [themes, next?.name, next?.className, componentName, debug])
+    }, [didChange, themes, next?.name, next?.className, componentName, debug])
   }
 
   return {

package/src/index.ts

@@ -53,6 +53,7 @@ export {
   getMedia,
   mediaState,
   useMedia,
+  useMediaPropsActive,
   mediaObjectToString,
   addMediaQueryListener,
   removeMediaQueryListener,

package/types/helpers/ThemeManager.d.ts

@@ -28,7 +28,7 @@ export declare class ThemeManager {
     get fullName(): string;
     getValue(key: string): import("..").Variable<import("..").VariableValue> | undefined;
     isTracking(uuid: Object): boolean;
-    update({ name, theme, className }?: SetActiveThemeProps, force?: boolean): boolean;
+    update({ name, theme, className }?: SetActiveThemeProps, force?: boolean, notify?: boolean): boolean;
     getNextTheme(props?: GetNextThemeProps, debug?: any): {
         name: string;
         theme: ThemeParsed | null;

package/types/helpers/createPropMapper.d.ts

@@ -1,5 +1,7 @@
-import { PropMapper, SplitStyleState, StaticConfigParsed } from '../types';
+import { PropMapper, SplitStyleState, StaticConfigParsed, TamaguiInternalConfig } from '../types';
 export declare type ResolveVariableTypes = 'auto' | 'value' | 'variable' | 'both' | 'non-color-value';
 export declare const getReturnVariablesAs: (props: any, state: Partial<SplitStyleState>) => "auto" | "value" | "non-color-value";
 export declare const createPropMapper: (staticConfig: StaticConfigParsed) => PropMapper;
+export declare function getFontFamilyFromNameOrVariable(input: any, conf: TamaguiInternalConfig): string | undefined;
+export declare const getPropMappedFontFamily: (expanded?: any) => any;
 //# sourceMappingURL=createPropMapper.d.ts.map

package/types/hooks/useMedia.d.ts

@@ -11,6 +11,16 @@ export declare function useMediaQueryListeners(config: TamaguiInternalConfig): v
 export declare function useMedia(): {
     [key in MediaQueryKey]: boolean;
 };
+/**
+ * Useful for more complex components that need access to the currently active props,
+ * accounting for the currently active media queries.
+ *
+ * Use sparingly, is will loop props and trigger re-render on all media queries.
+ *
+ * */
+export declare function useMediaPropsActive<A extends Object>(props: A): {
+    [Key in keyof A extends `$${string}` ? never : keyof A]: A[Key];
+};
 export declare function mediaObjectToString(query: string | MediaQueryObject): string;
 export {};
 //# sourceMappingURL=useMedia.d.ts.map

package/types/index.d.ts

@@ -42,7 +42,7 @@ export * from './hooks/useConstant';
 export * from './hooks/useId';
 export * from './hooks/useIsMounted';
 export * from './hooks/useIsTouchDevice';
-export { configureMedia, getMedia, mediaState, useMedia, mediaObjectToString, addMediaQueryListener, removeMediaQueryListener, mediaQueryConfig, } from './hooks/useMedia';
+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';