From 8a476f882da2af2825295f42861da60ae341f891 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Fri, 9 Sep 2022 16:02:26 +0530 Subject: [PATCH 1/3] Remove native memoize --- package.json | 1 + src/utils.ts | 51 ++++++++++++++------------------------------------- yarn.lock | 5 +++++ 3 files changed, 20 insertions(+), 37 deletions(-) diff --git a/package.json b/package.json index 9017a5936..a4eaaea47 100644 --- a/package.json +++ b/package.json @@ -73,6 +73,7 @@ "fast-clone": "^1.5.13", "graphlib": "^2.1.8", "khroma": "^2.0.0", + "micro-memoize": "^4.0.11", "moment-mini": "^2.24.0", "non-layered-tidy-tree-layout": "^2.0.2", "stylis": "^4.0.10" diff --git a/src/utils.ts b/src/utils.ts index f88327367..1eb6561e4 100644 --- a/src/utils.ts +++ b/src/utils.ts @@ -20,6 +20,7 @@ import { log } from './logger'; import { detectType } from './diagram-api/detectType'; import assignWithDepth from './assignWithDepth'; import { MermaidConfig } from './config.type'; +import memoize from 'micro-memoize'; // Effectively an enum of the supported curve types, accessible by name const d3CurveTypes = { @@ -43,10 +44,10 @@ const anyComment = /\s*%%.*\n/gm; /** * @function detectInit Detects the init config object from the text - * * @param config + * * ```mermaid - * %%{init: {"theme": "debug", "logLevel": 1 }}%% + * %%{init: {"theme": "debug", "logLevel": 1 }}%% * graph LR * a-->b * b-->c @@ -165,27 +166,6 @@ export const detectDirective = function (text, type = null) { } }; -/** - * Caches results of functions based on input - * - * @param {Function} fn Function to run - * @param {Function} resolver Function that resolves to an ID given arguments the `fn` takes - * @returns {Function} An optimized caching function - */ -const memoize = (fn, resolver) => { - let cache = {}; - return (...args) => { - let n = resolver ? resolver.apply(this, args) : args[0]; - if (n in cache) { - return cache[n]; - } else { - let result = fn(...args); - cache[n] = result; - return result; - } - }; -}; - /** * @function isSubstringInArray Detects whether a substring in present in a given array * @param {string} str The substring to detect @@ -594,7 +574,7 @@ export const wrapLabel = memoize( return completedLines.filter((line) => line !== '').join(config.joinWith); }, (label, maxWidth, config) => - `${label}-${maxWidth}-${config.fontSize}-${config.fontWeight}-${config.fontFamily}-${config.joinWith}` + `${label}${maxWidth}${config.fontSize}${config.fontWeight}${config.fontFamily}${config.joinWith}` ); const breakString = memoize( @@ -632,7 +612,8 @@ const breakString = memoize( * If the wrapped text text has greater height, we extend the height, so it's value won't overflow. * * @param {any} text The text to measure - * @param {any} config - The config for fontSize, fontFamily, and fontWeight all impacting the resulting size + * @param {any} config - The config for fontSize, fontFamily, and fontWeight all impacting the + * resulting size * @returns {any} - The height for the given text */ export const calculateTextHeight = function (text, config) { @@ -647,7 +628,8 @@ export const calculateTextHeight = function (text, config) { * This calculates the width of the given text, font size and family. * * @param {any} text - The text to calculate the width of - * @param {any} config - The config for fontSize, fontFamily, and fontWeight all impacting the resulting size + * @param {any} config - The config for fontSize, fontFamily, and fontWeight all impacting the + * resulting size * @returns {any} - The width for the given text */ export const calculateTextWidth = function (text, config) { @@ -656,7 +638,8 @@ export const calculateTextWidth = function (text, config) { }; /** - * This calculates the dimensions of the given text, font size, font family, font weight, and margins. + * This calculates the dimensions of the given text, font size, font family, font weight, and + * margins. * * @param {any} text - The text to calculate the width of * @param {any} config - The config for fontSize, fontFamily, fontWeight, and margin all impacting @@ -727,7 +710,8 @@ export const calculateTextDimensions = memoize( * Applys d3 attributes * * @param {any} d3Elem D3 Element to apply the attributes onto - * @param {[string, string][]} attrs Object.keys equivalent format of key to value mapping of attributes + * @param {[string, string][]} attrs Object.keys equivalent format of key to value mapping of + * attributes */ const d3Attrs = function (d3Elem, attrs) { for (let attr of attrs) { @@ -860,18 +844,12 @@ export interface DetailedError { hash: any; } -/** - * - * @param error - */ +/** @param error */ export function isDetailedError(error: unknown): error is DetailedError { return 'str' in error; } -/** - * - * @param error - */ +/** @param error */ export function getErrorMessage(error: unknown): string { if (error instanceof Error) return error.message; return String(error); @@ -894,7 +872,6 @@ export default { getStylesFromArray, generateId, random, - memoize, runFunc, entityDecode, initIdGenerator: initIdGenerator, diff --git a/yarn.lock b/yarn.lock index 148b07402..b8d72a344 100644 --- a/yarn.lock +++ b/yarn.lock @@ -9070,6 +9070,11 @@ methods@~1.1.2: resolved "https://registry.yarnpkg.com/methods/-/methods-1.1.2.tgz#5529a4d67654134edcc5266656835b0f851afcee" integrity sha1-VSmk1nZUE07cxSZmVoNbD4Ua/O4= +micro-memoize@^4.0.11: + version "4.0.11" + resolved "https://registry.yarnpkg.com/micro-memoize/-/micro-memoize-4.0.11.tgz#f664afc8bd8c11cb2838716a7306d6e1ec205d3a" + integrity sha512-CjxsaYe4j43df32DtzzNCwanPqZjZDwuQAZilsCYpa2ZVtSPDjHXbTlR4gsEZRyO9/twHs0b7HLjvy/sowl7sA== + micromark-core-commonmark@^1.0.1: version "1.0.6" resolved "https://registry.yarnpkg.com/micromark-core-commonmark/-/micromark-core-commonmark-1.0.6.tgz#edff4c72e5993d93724a3c206970f5a15b0585ad" From 5aae45dc978ce25947b24e1486ebccfcec3d8aa4 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Fri, 9 Sep 2022 16:34:57 +0530 Subject: [PATCH 2/3] fix: Use lodash memoize --- package.json | 2 +- src/utils.spec.js | 33 ++++++++++++++++++++++----------- src/utils.ts | 9 +++++---- yarn.lock | 10 +++++----- 4 files changed, 33 insertions(+), 21 deletions(-) diff --git a/package.json b/package.json index a4eaaea47..5e321f294 100644 --- a/package.json +++ b/package.json @@ -73,7 +73,6 @@ "fast-clone": "^1.5.13", "graphlib": "^2.1.8", "khroma": "^2.0.0", - "micro-memoize": "^4.0.11", "moment-mini": "^2.24.0", "non-layered-tidy-tree-layout": "^2.0.2", "stylis": "^4.0.10" @@ -89,6 +88,7 @@ "@types/d3": "^7.4.0", "@types/dompurify": "^2.3.4", "@types/jest": "^28.1.7", + "@types/lodash": "^4.14.184", "@types/stylis": "^4.0.2", "@typescript-eslint/eslint-plugin": "^5.36.1", "@typescript-eslint/parser": "^5.36.1", diff --git a/src/utils.spec.js b/src/utils.spec.js index ebaa1415c..6ffbd3af1 100644 --- a/src/utils.spec.js +++ b/src/utils.spec.js @@ -2,6 +2,7 @@ import utils from './utils'; import assignWithDepth from './assignWithDepth'; import { detectType } from './diagram-api/detectType'; import { addDiagrams } from './diagram-api/diagram-orchestration'; +import { memoize } from 'lodash'; addDiagrams(); describe('when assignWithDepth: should merge objects within objects', function () { @@ -121,20 +122,30 @@ describe('when assignWithDepth: should merge objects within objects', function ( }); describe('when memoizing', function () { it('should return the same value', function () { - const fib = utils.memoize(function (n, canary) { - canary.flag = true; - if (n < 2) { - return 1; - } else { - //We'll console.log a loader every time we have to recurse - return fib(n - 2, canary) + fib(n - 1, canary); - } - }); + const fib = memoize( + function (n, x, canary) { + canary.flag = true; + if (n < 2) { + return 1; + } else { + //We'll console.log a loader every time we have to recurse + return fib(n - 2, x, canary) + fib(n - 1, x, canary); + } + }, + (n, x, _) => `${n}${x}` + ); let canary = { flag: false }; - fib(10, canary); + fib(10, 'a', canary); expect(canary.flag).toBe(true); canary = { flag: false }; - fib(10, canary); + fib(10, 'a', canary); + expect(canary.flag).toBe(false); + fib(10, 'b', canary); + fib(10, 'b', canary); + expect(canary.flag).toBe(true); + canary = { flag: false }; + fib(10, 'b', canary); + fib(10, 'a', canary); expect(canary.flag).toBe(false); }); }); diff --git a/src/utils.ts b/src/utils.ts index 1eb6561e4..200032435 100644 --- a/src/utils.ts +++ b/src/utils.ts @@ -20,7 +20,7 @@ import { log } from './logger'; import { detectType } from './diagram-api/detectType'; import assignWithDepth from './assignWithDepth'; import { MermaidConfig } from './config.type'; -import memoize from 'micro-memoize'; +import { memoize } from 'lodash'; // Effectively an enum of the supported curve types, accessible by name const d3CurveTypes = { @@ -47,7 +47,8 @@ const anyComment = /\s*%%.*\n/gm; * @param config * * ```mermaid - * %%{init: {"theme": "debug", "logLevel": 1 }}%% + * + * %%{init: {"theme": "debug", "logLevel": 1 }}%% * graph LR * a-->b * b-->c @@ -602,7 +603,7 @@ const breakString = memoize( return { hyphenatedStrings: lines, remainingWord: currentLine }; }, (word, maxWidth, hyphenCharacter = '-', config) => - `${word}-${maxWidth}-${hyphenCharacter}-${config.fontSize}-${config.fontWeight}-${config.fontFamily}` + `${word}${maxWidth}${hyphenCharacter}${config.fontSize}${config.fontWeight}${config.fontFamily}` ); /** @@ -703,7 +704,7 @@ export const calculateTextDimensions = memoize( : 1; return dims[index]; }, - (text, config) => `${text}-${config.fontSize}-${config.fontWeight}-${config.fontFamily}` + (text, config) => `${text}${config.fontSize}${config.fontWeight}${config.fontFamily}` ); /** diff --git a/yarn.lock b/yarn.lock index b8d72a344..1967b28b1 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2643,6 +2643,11 @@ dependencies: "@types/node" "*" +"@types/lodash@^4.14.184": + version "4.14.184" + resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.184.tgz#23f96cd2a21a28e106dc24d825d4aa966de7a9fe" + integrity sha512-RoZphVtHbxPZizt4IcILciSWiC6dcn+eZ8oX9IWEYfDMcocdd42f7NPI6fQj+6zI8y4E0L7gu2pcZKLGTRaV9Q== + "@types/mdast@^3.0.0": version "3.0.10" resolved "https://registry.yarnpkg.com/@types/mdast/-/mdast-3.0.10.tgz#4724244a82a4598884cbbe9bcfd73dff927ee8af" @@ -9070,11 +9075,6 @@ methods@~1.1.2: resolved "https://registry.yarnpkg.com/methods/-/methods-1.1.2.tgz#5529a4d67654134edcc5266656835b0f851afcee" integrity sha1-VSmk1nZUE07cxSZmVoNbD4Ua/O4= -micro-memoize@^4.0.11: - version "4.0.11" - resolved "https://registry.yarnpkg.com/micro-memoize/-/micro-memoize-4.0.11.tgz#f664afc8bd8c11cb2838716a7306d6e1ec205d3a" - integrity sha512-CjxsaYe4j43df32DtzzNCwanPqZjZDwuQAZilsCYpa2ZVtSPDjHXbTlR4gsEZRyO9/twHs0b7HLjvy/sowl7sA== - micromark-core-commonmark@^1.0.1: version "1.0.6" resolved "https://registry.yarnpkg.com/micromark-core-commonmark/-/micromark-core-commonmark-1.0.6.tgz#edff4c72e5993d93724a3c206970f5a15b0585ad" From d2e7b1e56f551d776e89be077313674141a00103 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Fri, 9 Sep 2022 16:58:48 +0530 Subject: [PATCH 3/3] fix: Support treeshaking --- package.json | 1 + src/utils.spec.js | 2 +- src/utils.ts | 2 +- 3 files changed, 3 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index 5e321f294..e1709730e 100644 --- a/package.json +++ b/package.json @@ -73,6 +73,7 @@ "fast-clone": "^1.5.13", "graphlib": "^2.1.8", "khroma": "^2.0.0", + "lodash": "^4.17.21", "moment-mini": "^2.24.0", "non-layered-tidy-tree-layout": "^2.0.2", "stylis": "^4.0.10" diff --git a/src/utils.spec.js b/src/utils.spec.js index 6ffbd3af1..d024da3db 100644 --- a/src/utils.spec.js +++ b/src/utils.spec.js @@ -2,7 +2,7 @@ import utils from './utils'; import assignWithDepth from './assignWithDepth'; import { detectType } from './diagram-api/detectType'; import { addDiagrams } from './diagram-api/diagram-orchestration'; -import { memoize } from 'lodash'; +import memoize from 'lodash/memoize'; addDiagrams(); describe('when assignWithDepth: should merge objects within objects', function () { diff --git a/src/utils.ts b/src/utils.ts index 200032435..7cd700e85 100644 --- a/src/utils.ts +++ b/src/utils.ts @@ -20,7 +20,7 @@ import { log } from './logger'; import { detectType } from './diagram-api/detectType'; import assignWithDepth from './assignWithDepth'; import { MermaidConfig } from './config.type'; -import { memoize } from 'lodash'; +import memoize from 'lodash/memoize'; // Effectively an enum of the supported curve types, accessible by name const d3CurveTypes = {