fix(clerk-js): Replace Object.fromEntries with fromEntries ponyfill

Author: nikosdouvlis

packages/clerk-js/src/v4/customizables/colorOptionToHslaScale.ts

@@ -1,6 +1,6 @@
 import { ColorScale, CssColorOrScale, HslaColor, HslaColorString } from '@clerk/types';
 
-import { colors } from '../utils';
+import { colors, fromEntries } from '../utils';
 
 type InternalColorScale<T> = ColorScale<T> & Partial<Record<20, T>>;
 
@@ -67,7 +67,7 @@ const mergeFilledIntoUserDefinedScale = (
   userDefined: InternalColorScale<HslaColor>,
 ): InternalColorScale<HslaColor> => {
   // @ts-expect-error
-  return Object.fromEntries(Object.entries(userDefined).map(([k, v]) => [k, v || generated[k]]));
+  return fromEntries(Object.entries(userDefined).map(([k, v]) => [k, v || generated[k]]));
 };
 
 const prefixAndStringifyHslaScale = (
@@ -90,7 +90,7 @@ const userDefinedColorToHslaColorScale = (colorOption: CssColorOrScale): Interna
   const hslaScale = createEmptyColorScale();
   // @ts-expect-error
   const entries = Object.keys(hslaScale).map(k => [k, baseScale[k] ? colors.toHslaColor(baseScale[k]) : undefined]);
-  return Object.fromEntries(entries) as InternalColorScale<HslaColor>;
+  return fromEntries(entries) as InternalColorScale<HslaColor>;
 };
 
 /**

packages/clerk-js/src/v4/customizables/elementDescriptors.ts

@@ -1,6 +1,6 @@
 import { ElementObjectKey, ElementsConfig, IdSelectors, StateSelectors } from '@clerk/types';
 
-import { containsAllOfType } from '../utils';
+import { containsAllOfType, fromEntries } from '../utils';
 
 export const CLASS_PREFIX = 'cl-';
 export const ID_CLASS_PREFIX = 'cl-id-';
@@ -245,7 +245,7 @@ const createDescriptorMap = <K extends keyof ElementsConfig>(keys = APPEARANCE_K
   const entries = keys.map(key => [toObjectKey(key), createElementDescriptor(key)]) as unknown as Array<
     [K, ElementDescriptor<K>]
   >;
-  return Object.fromEntries(entries) as unknown as ElementDescriptors;
+  return fromEntries(entries) as unknown as ElementDescriptors;
 };
 
 export const descriptors = createDescriptorMap();

packages/clerk-js/src/v4/customizables/parseVariables.ts

@@ -2,7 +2,7 @@ import { Theme } from '@clerk/types';
 
 import { spaceScaleKeys } from '../foundations/sizes';
 import { fontSizes, fontWeights } from '../foundations/typography';
-import { colors, removeUndefinedProps } from '../utils';
+import { colors, fromEntries, removeUndefinedProps } from '../utils';
 import { colorOptionToHslaAlphaScale, colorOptionToHslaLightnessScale } from './colorOptionToHslaScale';
 
 export const createColorScales = (theme: Theme) => {
@@ -55,7 +55,7 @@ export const createSpaceScale = (theme: Theme) => {
     return;
   }
   const { numericValue, unit } = splitCssUnit(spacingUnit);
-  return Object.fromEntries(
+  return fromEntries(
     spaceScaleKeys.map(k => {
       const num = Number.parseFloat(k.replace('x', '.'));
       const percentage = (num / 0.5) * 0.125;

packages/clerk-js/src/v4/hooks/useEnabledThirdPartyProviders.tsx

@@ -4,6 +4,7 @@ import { OAUTH_PROVIDERS, WEB3_PROVIDERS } from '@clerk/types/src';
 
 import { svgUrl } from '../../ui/common/constants';
 import { useEnvironment } from '../../ui/contexts/EnvironmentContext';
+import { fromEntries } from '../utils';
 
 type ThirdPartyStrategyToDataMap = {
   [k in Web3Strategy | OAuthStrategy]: { id: Web3Provider | OAuthProvider; iconUrl: string; name: string };
@@ -13,13 +14,13 @@ type ThirdPartyProviderToDataMap = {
   [k in Web3Provider | OAuthProvider]: { strategy: Web3Strategy | OAuthStrategy; iconUrl: string; name: string };
 };
 
-const providerToDisplayData: ThirdPartyProviderToDataMap = Object.fromEntries(
+const providerToDisplayData: ThirdPartyProviderToDataMap = fromEntries(
   [...OAUTH_PROVIDERS, ...WEB3_PROVIDERS].map(p => {
     return [p.provider, { strategy: p.strategy, name: p.name, iconUrl: svgUrl(p.provider) }];
   }),
 ) as ThirdPartyProviderToDataMap;
 
-const strategyToDisplayData: ThirdPartyStrategyToDataMap = Object.fromEntries(
+const strategyToDisplayData: ThirdPartyStrategyToDataMap = fromEntries(
   [...OAUTH_PROVIDERS, ...WEB3_PROVIDERS].map(p => {
     return [p.strategy, { id: p.provider, name: p.name, iconUrl: svgUrl(p.provider) }];
   }),

packages/clerk-js/src/v4/styledSystem/breakpoints.tsx

@@ -1,3 +1,5 @@
+import { fromEntries } from '../utils';
+
 const breakpoints = Object.freeze({
   xs: '21em', // 336px
   sm: '30em', // 480px
@@ -17,5 +19,5 @@ const deviceQueries = {
 
 export const mqu = {
   ...deviceQueries,
-  ...Object.fromEntries(Object.entries(breakpoints).map(([k, v]) => [k, `@media (max-width: ${v})`])),
+  ...fromEntries(Object.entries(breakpoints).map(([k, v]) => [k, `@media (max-width: ${v})`])),
 } as Record<keyof typeof breakpoints | keyof typeof deviceQueries, string>;

packages/clerk-js/src/v4/styledSystem/createCssVariables.ts

@@ -1,7 +1,9 @@
 // eslint-disable-next-line no-restricted-imports
 
+import { fromEntries } from '../utils';
+
 const varHashId = Date.now();
 
 export const createCssVariables = <T extends string[]>(...names: T): { [k in T[number]]: string } => {
-  return Object.fromEntries(names.map(name => [name, `var(--${name})`])) as any;
+  return fromEntries(names.map(name => [name, `var(--${name})`]));
 };

packages/clerk-js/src/v4/utils/fromEntries.ts

@@ -0,0 +1,6 @@
+export const fromEntries = (iterable: Iterable<any>) => {
+  return [...iterable].reduce((obj, [key, val]) => {
+    obj[key] = val;
+    return obj;
+  }, {});
+};

packages/clerk-js/src/v4/utils/index.ts

@@ -15,3 +15,4 @@ export * from './phoneUtils';
 export * from './formatSafeIdentifier';
 export * from './removeUndefinedProps';
 export * from './getIdentifier';
+export * from './fromEntries';