perf: Replace mem with a simpler memoization decorator (#229)

RocketChat · May 18, 2020 · 2de0703 · 2de0703
1 parent 6dc44de
commit 2de0703
Show file tree

Hide file tree

Showing 9 changed files with 45 additions and 30 deletions.
diff --git a/packages/fuselage/package.json b/packages/fuselage/package.json
@@ -46,8 +46,7 @@
     "@rocket.chat/css-in-js": "^0.8.0",
     "@rocket.chat/fuselage-tokens": "^0.8.0",
     "@rocket.chat/icons": "^0.8.0",
-    "invariant": "^2.2.4",
-    "mem": "^6.1.0"
+    "invariant": "^2.2.4"
   },
   "devDependencies": {
     "@babel/core": "^7.4.5",

diff --git a/packages/fuselage/src/helpers/memoize.js b/packages/fuselage/src/helpers/memoize.js
@@ -0,0 +1,28 @@
+const store = new WeakMap();
+
+const getKey = (arg) => arg;
+
+export const memoize = (fn) => {
+  const cache = new Map();
+  const memoized = function(arg) {
+    const key = getKey(arg);
+
+    if (cache.has(key)) {
+      return cache.get(key);
+    }
+
+    const result = fn.call(this, arg);
+
+    cache.set(arg, result);
+
+    return result;
+  };
+  store.set(memoized, cache);
+  return memoized;
+};
+
+export const clear = (fn) => {
+  if (store.has(fn)) {
+    store.get(fn).clear();
+  }
+};
diff --git a/packages/fuselage/src/styles/helpers.js b/packages/fuselage/src/styles/helpers.js
@@ -1,7 +1,8 @@
 import { css } from '@rocket.chat/css-in-js';
-import mem from 'mem';
 
-export const cssSupports = mem((value) => typeof window !== 'undefined' && window.CSS && window.CSS.supports(value));
+import { memoize } from '../helpers/memoize';
+
+export const cssSupports = memoize((value) => typeof window !== 'undefined' && window.CSS && window.CSS.supports(value));
 
 export const createLogicalProperties = ({
   blockPropertyName,

diff --git a/packages/fuselage/src/styles/props/borders.js b/packages/fuselage/src/styles/props/borders.js
@@ -1,6 +1,6 @@
 import { css } from '@rocket.chat/css-in-js';
-import mem from 'mem';
 
+import { memoize } from '../../helpers/memoize';
 import { createLogicalProperties, cssSupports } from '../helpers';
 import { getColorValue } from './colors';
 
@@ -84,7 +84,7 @@ export const [
   inlineEndFallbackPropertyName: 'border-right-color',
 });
 
-export const getBorderWidthValue = mem((propValue) => {
+export const getBorderWidthValue = memoize((propValue) => {
   if (propValue === undefined || propValue === null) {
     return;
   }
@@ -112,7 +112,7 @@ export const getBorderWidthValue = mem((propValue) => {
   }
 });
 
-export const getBorderRadiusValue = mem((propValue) => {
+export const getBorderRadiusValue = memoize((propValue) => {
   if (propValue === undefined || propValue === null) {
     return;
   }

diff --git a/packages/fuselage/src/styles/props/colors.js b/packages/fuselage/src/styles/props/colors.js
@@ -1,8 +1,8 @@
 import { css } from '@rocket.chat/css-in-js';
 import tokenColors from '@rocket.chat/fuselage-tokens/colors';
-import mem from 'mem';
 import invariant from 'invariant';
 
+import { memoize } from '../../helpers/memoize';
 import { cssSupports, createPropType } from '../helpers';
 
 
@@ -65,7 +65,7 @@ const getForegroundColor = (type) => {
 
 const paletteColorRegex = /^(neutral|primary|info|success|warning|danger)-(\d+)(-(\d+))?$/;
 
-export const getColorValue = mem((propValue) => {
+export const getColorValue = memoize((propValue) => {
   if (propValue === undefined || propValue === null || typeof propValue !== 'string') {
     return;
   }

diff --git a/packages/fuselage/src/styles/props/layout.js b/packages/fuselage/src/styles/props/layout.js
@@ -1,9 +1,9 @@
 import { css } from '@rocket.chat/css-in-js';
-import mem from 'mem';
 
+import { memoize } from '../../helpers/memoize';
 import { createPropType } from '../helpers';
 
-export const getSizeValue = mem((propValue) => {
+export const getSizeValue = memoize((propValue) => {
   if (propValue === undefined || propValue === null) {
     return;
   }

diff --git a/packages/fuselage/src/styles/props/position.js b/packages/fuselage/src/styles/props/position.js
@@ -1,10 +1,10 @@
 import { css } from '@rocket.chat/css-in-js';
-import mem from 'mem';
 
+import { memoize } from '../../helpers/memoize';
 import { cssSupports, createLogicalProperties, createPropType } from '../helpers';
 
 
-export const getInsetValue = mem((propValue) => {
+export const getInsetValue = memoize((propValue) => {
   if (propValue === undefined || propValue === null) {
     return;
   }

diff --git a/packages/fuselage/src/styles/props/spaces.js b/packages/fuselage/src/styles/props/spaces.js
@@ -1,10 +1,10 @@
 import { css } from '@rocket.chat/css-in-js';
-import mem from 'mem';
 
+import { memoize } from '../../helpers/memoize';
 import { createPropType, createLogicalProperties } from '../helpers';
 
 
-export const getMarginValue = mem((propValue) => {
+export const getMarginValue = memoize((propValue) => {
   if (propValue === undefined || propValue === null) {
     return;
   }
@@ -54,7 +54,7 @@ const [
   inlineEndFallbackPropertyName: 'margin-right',
 });
 
-export const getPaddingValue = mem((propValue) => {
+export const getPaddingValue = memoize((propValue) => {
   if (propValue === undefined || propValue === null) {
     return;
   }

diff --git a/yarn.lock b/yarn.lock
@@ -11714,7 +11714,7 @@ makeerror@1.0.x:
   dependencies:
     tmpl "1.0.x"
 
-map-age-cleaner@^0.1.1, map-age-cleaner@^0.1.3:
+map-age-cleaner@^0.1.1:
   version "0.1.3"
   resolved "https://registry.yarnpkg.com/map-age-cleaner/-/map-age-cleaner-0.1.3.tgz#7d583a7306434c055fe474b0f45078e6e1b4b92a"
   integrity sha512-bJzx6nMoP6PDLPBFmg7+xRKeFZvFboMrGlxmNj9ClvX53KrmvM5bXFXEWjbz4cz1AFn+jWJ9z/DJSz7hrs0w3w==
@@ -11909,14 +11909,6 @@ mem@^4.0.0:
     mimic-fn "^2.0.0"
     p-is-promise "^2.0.0"
 
-mem@^6.1.0:
-  version "6.1.0"
-  resolved "https://registry.yarnpkg.com/mem/-/mem-6.1.0.tgz#846eca0bd4708a8f04b9c3f3cd769e194ae63c5c"
-  integrity sha512-RlbnLQgRHk5lwqTtpEkBTQ2ll/CG/iB+J4Hy2Wh97PjgZgXgWJWrFF+XXujh3UUVLvR4OOTgZzcWMMwnehlEUg==
-  dependencies:
-    map-age-cleaner "^0.1.3"
-    mimic-fn "^3.0.0"
-
 memoize-one@^5.0.0:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-5.1.1.tgz#047b6e3199b508eaec03504de71229b8eb1d75c0"
@@ -12119,11 +12111,6 @@ mimic-fn@^2.0.0, mimic-fn@^2.1.0:
   resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-2.1.0.tgz#7ed2c2ccccaf84d3ffcb7a69b57711fc2083401b"
   integrity sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==
 
-mimic-fn@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-3.0.0.tgz#76044cfa8818bbf6999c5c9acadf2d3649b14b4b"
-  integrity sha512-PiVO95TKvhiwgSwg1IdLYlCTdul38yZxZMIcnDSFIBUm4BNZha2qpQ4GpJ++15bHoKDtrW2D69lMfFwdFYtNZQ==
-
 min-document@^2.19.0:
   version "2.19.0"
   resolved "https://registry.yarnpkg.com/min-document/-/min-document-2.19.0.tgz#7bd282e3f5842ed295bb748cdd9f1ffa2c824685"