@zendeskgarden/react-theming - npm Package Compare versions

Comparing version 9.0.0 to 9.1.0

dist/esm/utils/getColor.js

@@ -185,3 +185,12 @@ /**
 };
-const getColor = memoize(_ref => {
+const CACHE = new WeakMap();
+const KEYS = {
+  colors: 0,
+  palette: 0,
+  opacity: 0
+};
+CACHE.set(DEFAULT_THEME.colors, KEYS.colors);
+CACHE.set(DEFAULT_THEME.palette, KEYS.palette);
+CACHE.set(DEFAULT_THEME.opacity, KEYS.opacity);
+const toKey = _ref => {
   let {
@@ -197,2 +206,52 @@ dark,
   } = _ref;
+  let themeColorsKey = CACHE.get(theme.colors);
+  if (themeColorsKey === undefined) {
+    themeColorsKey = ++KEYS.colors;
+    CACHE.set(theme.colors, themeColorsKey);
+  }
+  let themeOpacityKey = CACHE.get(theme.opacity);
+  if (themeOpacityKey === undefined) {
+    themeOpacityKey = ++KEYS.opacity;
+    CACHE.set(theme.opacity, themeOpacityKey);
+  }
+  let themePaletteKey = CACHE.get(theme.palette);
+  if (themePaletteKey === undefined) {
+    themePaletteKey = ++KEYS.palette;
+    CACHE.set(theme.palette, themePaletteKey);
+  }
+  let retVal = `{${themeColorsKey},${themePaletteKey},${themeOpacityKey}}`;
+  if (variable !== undefined) {
+    retVal += `,${variable}`;
+  }
+  if (hue !== undefined) {
+    retVal += `,${hue}`;
+  }
+  if (shade !== undefined) {
+    retVal += `,${shade}`;
+  }
+  if (offset !== undefined) {
+    retVal += `,${offset}`;
+  }
+  if (transparency !== undefined) {
+    retVal += `,${transparency}`;
+  }
+  if (dark !== undefined) {
+    retVal += `,${JSON.stringify(dark)}`;
+  }
+  if (light !== undefined) {
+    retVal += `,${JSON.stringify(light)}`;
+  }
+  return retVal;
+};
+const getColor = memoize(_ref2 => {
+  let {
+    dark,
+    hue,
+    light,
+    offset,
+    shade,
+    theme,
+    transparency,
+    variable
+  } = _ref2;
   let retVal;
@@ -226,3 +285,3 @@ const palette = theme.palette && Object.keys(theme.palette).length > 0 ? theme.palette : DEFAULT_THEME.palette;
   return retVal;
-}, _ref2 => {
+}, _ref3 => {
   let {
@@ -237,4 +296,4 @@ dark,
     variable
-  } = _ref2;
-  return JSON.stringify({
+  } = _ref3;
+  return toKey({
     dark,
@@ -245,5 +304,3 @@ hue,
     shade,
-    colors: theme.colors,
-    palette: theme.palette,
-    opacity: theme.opacity,
+    theme,
     transparency,
@@ -250,0 +307,0 @@ variable

dist/esm/utils/getColorV8.js

@@ -20,2 +20,38 @@ /**
 };
+const CACHE = new WeakMap();
+const KEYS = {
+  colors: 0,
+  palette: 0
+};
+CACHE.set(DEFAULT_THEME.colors, KEYS.colors);
+CACHE.set(DEFAULT_THEME.palette, KEYS.palette);
+const toKey = _ref => {
+  let {
+    hue,
+    shade,
+    theme,
+    transparency
+  } = _ref;
+  let retVal = `${hue}`;
+  if (shade !== undefined) {
+    retVal += `,${shade}`;
+  }
+  if (theme !== undefined) {
+    let themeColorsKey = CACHE.get(theme.colors);
+    if (themeColorsKey === undefined) {
+      themeColorsKey = ++KEYS.colors;
+      CACHE.set(theme.colors, themeColorsKey);
+    }
+    let themePaletteKey = CACHE.get(theme.palette);
+    if (themePaletteKey === undefined) {
+      themePaletteKey = ++KEYS.palette;
+      CACHE.set(theme.palette, themePaletteKey);
+    }
+    retVal += `,{${themeColorsKey},${themePaletteKey}}`;
+  }
+  if (transparency !== undefined) {
+    retVal += `,${transparency}`;
+  }
+  return retVal;
+};
 const getColorV8 = memoize(function (hue) {
@@ -65,7 +101,6 @@ let shade = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : DEFAULT_SHADE;
   return retVal;
-}, (hue, shade, theme, transparency) => JSON.stringify({
+}, (hue, shade, theme, transparency) => toKey({
   hue,
   shade,
-  palette: theme?.palette,
-  colors: theme?.colors,
+  theme,
   transparency
@@ -72,0 +107,0 @@ }));

dist/index.cjs.js

@@ -726,3 +726,12 @@ /**
 };
-const getColor = memoize__default.default(_ref => {
+const CACHE$1 = new WeakMap();
+const KEYS$1 = {
+  colors: 0,
+  palette: 0,
+  opacity: 0
+};
+CACHE$1.set(DEFAULT_THEME.colors, KEYS$1.colors);
+CACHE$1.set(DEFAULT_THEME.palette, KEYS$1.palette);
+CACHE$1.set(DEFAULT_THEME.opacity, KEYS$1.opacity);
+const toKey$1 = _ref => {
   let {
@@ -738,2 +747,52 @@ dark,
   } = _ref;
+  let themeColorsKey = CACHE$1.get(theme.colors);
+  if (themeColorsKey === undefined) {
+    themeColorsKey = ++KEYS$1.colors;
+    CACHE$1.set(theme.colors, themeColorsKey);
+  }
+  let themeOpacityKey = CACHE$1.get(theme.opacity);
+  if (themeOpacityKey === undefined) {
+    themeOpacityKey = ++KEYS$1.opacity;
+    CACHE$1.set(theme.opacity, themeOpacityKey);
+  }
+  let themePaletteKey = CACHE$1.get(theme.palette);
+  if (themePaletteKey === undefined) {
+    themePaletteKey = ++KEYS$1.palette;
+    CACHE$1.set(theme.palette, themePaletteKey);
+  }
+  let retVal = `{${themeColorsKey},${themePaletteKey},${themeOpacityKey}}`;
+  if (variable !== undefined) {
+    retVal += `,${variable}`;
+  }
+  if (hue !== undefined) {
+    retVal += `,${hue}`;
+  }
+  if (shade !== undefined) {
+    retVal += `,${shade}`;
+  }
+  if (offset !== undefined) {
+    retVal += `,${offset}`;
+  }
+  if (transparency !== undefined) {
+    retVal += `,${transparency}`;
+  }
+  if (dark !== undefined) {
+    retVal += `,${JSON.stringify(dark)}`;
+  }
+  if (light !== undefined) {
+    retVal += `,${JSON.stringify(light)}`;
+  }
+  return retVal;
+};
+const getColor = memoize__default.default(_ref2 => {
+  let {
+    dark,
+    hue,
+    light,
+    offset,
+    shade,
+    theme,
+    transparency,
+    variable
+  } = _ref2;
   let retVal;
@@ -767,3 +826,3 @@ const palette = theme.palette && Object.keys(theme.palette).length > 0 ? theme.palette : DEFAULT_THEME.palette;
   return retVal;
-}, _ref2 => {
+}, _ref3 => {
   let {
@@ -778,4 +837,4 @@ dark,
     variable
-  } = _ref2;
-  return JSON.stringify({
+  } = _ref3;
+  return toKey$1({
     dark,
@@ -786,5 +845,3 @@ hue,
     shade,
-    colors: theme.colors,
-    palette: theme.palette,
-    opacity: theme.opacity,
+    theme,
     transparency,
@@ -976,2 +1033,38 @@ variable
 };
+const CACHE = new WeakMap();
+const KEYS = {
+  colors: 0,
+  palette: 0
+};
+CACHE.set(DEFAULT_THEME.colors, KEYS.colors);
+CACHE.set(DEFAULT_THEME.palette, KEYS.palette);
+const toKey = _ref => {
+  let {
+    hue,
+    shade,
+    theme,
+    transparency
+  } = _ref;
+  let retVal = `${hue}`;
+  if (shade !== undefined) {
+    retVal += `,${shade}`;
+  }
+  if (theme !== undefined) {
+    let themeColorsKey = CACHE.get(theme.colors);
+    if (themeColorsKey === undefined) {
+      themeColorsKey = ++KEYS.colors;
+      CACHE.set(theme.colors, themeColorsKey);
+    }
+    let themePaletteKey = CACHE.get(theme.palette);
+    if (themePaletteKey === undefined) {
+      themePaletteKey = ++KEYS.palette;
+      CACHE.set(theme.palette, themePaletteKey);
+    }
+    retVal += `,{${themeColorsKey},${themePaletteKey}}`;
+  }
+  if (transparency !== undefined) {
+    retVal += `,${transparency}`;
+  }
+  return retVal;
+};
 const getColorV8 = memoize__default.default(function (hue) {
@@ -1021,7 +1114,6 @@ let shade = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : DEFAULT_SHADE;
   return retVal;
-}, (hue, shade, theme, transparency) => JSON.stringify({
+}, (hue, shade, theme, transparency) => toKey({
   hue,
   shade,
-  palette: theme?.palette,
-  colors: theme?.colors,
+  theme,
   transparency
@@ -1028,0 +1120,0 @@ }));

package.json

 {
   "name": "@zendeskgarden/react-theming",
-  "version": "9.0.0",
+  "version": "9.1.0",
   "description": "Theming utilities and components within the Garden Design System",
@@ -49,3 +49,4 @@ "license": "Apache-2.0",
   },
-  "zendeskgarden:src": "src/index.ts"
+  "zendeskgarden:src": "src/index.ts",
+  "gitHead": "a2842d18615ad057d75988fde4df5a0c79d2714e"
 }

No alert changes

Improved metrics

Total package byte prevSize

136085

increased by12.13%

Number of package files

50

increased by2.04%

Lines of code

4085

increased by4.72%

No dependency changes