jfs-components 0.0.61 → 0.0.63

package/lib/module/design-tokens/JFSThemeProvider.js

@@ -1,8 +1,7 @@
 "use strict";
 
-import React, { createContext, useContext, useMemo, useState, useEffect } from 'react';
+import React, { createContext, useContext, useMemo } from 'react';
 import { getVariableByName } from './figma-variables-resolver';
-import * as Font from 'expo-font';
 
 /**
  * Shape of the TokenContext
@@ -53,36 +52,4 @@ export const useTokens = () => {
     };
   }
   return context;
-};
-
-/**
- * Returns the JFS font map. The TTF is encapsulated within the package at
- * src/assets/fonts/JioType Var.ttf (included via package.json "files").
- * Call this inside load functions to avoid top-level require errors if font missing.
- */
-export const getJFSFonts = () => ({
-  'JioType Var': require('../assets/fonts/JioType Var.ttf')
-});
-
-/**
- * Hook for loading JFS fonts using expo-font. This improves Android font support by explicitly registering
- * the custom 'JioType Var' font (encapsulated in the package) via Font.loadAsync before components render.
- * Without it, Android defaults to Roboto. Call at app root (e.g. before JFSThemeProvider). Returns loaded state.
- * See getJFSFonts() for direct use with Font.loadAsync. Handles missing font gracefully for web/Storybook.
- */
-export function useJFSFonts() {
-  const [fontsLoaded, setFontsLoaded] = useState(false);
-  useEffect(() => {
-    async function loadJFSFonts() {
-      try {
-        await Font.loadAsync(getJFSFonts());
-        setFontsLoaded(true);
-      } catch (error) {
-        console.warn('Failed to load JFS fonts (this is common in web/Storybook or if font file missing):', error);
-        setFontsLoaded(true);
-      }
-    }
-    loadJFSFonts();
-  }, []);
-  return fontsLoaded;
-}
+};

package/lib/module/design-tokens/figma-variables-resolver.js

@@ -187,14 +187,32 @@ function resolveVariable(variableId, modesByCollectionName = {}) {
   return value;
 }
 
+// Per-object serialization cache. Most callers pass the same `modes` object
+// many times in a single render (e.g. one Button does ~21 token lookups with
+// the same `modes`); with a stable identity from the caller (see
+// `EMPTY_MODES` in `utils/react-utils.ts`) this collapses to a single
+// sort+join per modes object across the whole app.
+const serializedModesCache = new WeakMap();
+
 // Serialize modes object to create a stable cache key
 function serializeModes(modes) {
-  if (!modes || Object.keys(modes).length === 0) {
+  if (!modes || typeof modes !== 'object') {
+    return '';
+  }
+  const cached = serializedModesCache.get(modes);
+  if (cached !== undefined) {
+    return cached;
+  }
+  const keys = Object.keys(modes);
+  if (keys.length === 0) {
+    serializedModesCache.set(modes, '');
     return '';
   }
   // Sort keys for consistent serialization
-  const sortedKeys = Object.keys(modes).sort();
-  return sortedKeys.map(key => `${key}:${modes[key]}`).join('|');
+  keys.sort();
+  const result = keys.map(key => `${key}:${modes[key]}`).join('|');
+  serializedModesCache.set(modes, result);
+  return result;
 }
 
 // Get variable by name with dynamic mode resolution (optimized with O(1) lookup)