Replace lodash memoize with memoize package

Author: techniq

packages/layerchart/package.json

@@ -110,6 +110,7 @@
     "d3-tile": "^1.0.0",
     "d3-time": "^3.1.0",
     "lodash-es": "^4.17.21",
+    "memoize": "^10.1.0",
     "runed": "^0.28.0"
   },
   "peerDependencies": {

packages/layerchart/src/lib/utils/canvas.ts

@@ -1,6 +1,6 @@
-import { cls } from '@layerstack/tailwind';
-import { memoize } from 'lodash-es';
 import type { ClassValue } from 'svelte/elements';
+import memoize from 'memoize';
+import { cls } from '@layerstack/tailwind';
 import type { PatternShape } from '$lib/components/Pattern.svelte';
 
 export const DEFAULT_FILL = 'rgb(0, 0, 0)';
@@ -332,20 +332,9 @@ export function _createLinearGradient(
 }
 
 /** Create linear gradient and memoize result to fix reactivity */
-export const createLinearGradient = memoize(
-  _createLinearGradient,
-  (
-    ctx: CanvasRenderingContext2D,
-    x0: number,
-    y0: number,
-    x1: number,
-    y1: number,
-    stops: { offset: number; color: string }[]
-  ) => {
-    const key = JSON.stringify({ x0, y0, x1, y1, stops });
-    return key;
-  }
-);
+export const createLinearGradient = memoize(_createLinearGradient, {
+  cacheKey: (args) => JSON.stringify(args.slice(1)), // Ignore `ctx` argument
+});
 
 export function _createPattern(
   ctx: CanvasRenderingContext2D,
@@ -395,16 +384,6 @@ export function _createPattern(
 }
 
 /** Create pattern and memoize result to fix reactivity */
-export const createPattern = memoize(
-  _createPattern,
-  (
-    ctx: CanvasRenderingContext2D,
-    width: number,
-    height: number,
-    shapes: PatternShape[],
-    background?: string
-  ) => {
-    const key = JSON.stringify({ width, height, shapes, background });
-    return key;
-  }
-);
+export const createPattern = memoize(_createPattern, {
+  cacheKey: (args) => JSON.stringify(args.slice(1)), // Ignore `ctx` argument
+});

packages/layerchart/src/lib/utils/string.ts

@@ -1,4 +1,4 @@
-import { memoize } from 'lodash-es';
+import memoize from 'memoize';
 
 const MEASUREMENT_ELEMENT_ID = '__text_measurement_id';
 
@@ -29,10 +29,9 @@ function _getStringWidth(str: string, style?: CSSStyleDeclaration) {
   }
 }
 
-export const getStringWidth = memoize(
-  _getStringWidth,
-  (str, style) => `${str}_${JSON.stringify(style)}`
-);
+export const getStringWidth = memoize(_getStringWidth, {
+  cacheKey: ([str, style]) => `${str}_${JSON.stringify(style)}`,
+});
 
 export type RasterizeTextOptions = {
   fontSize?: string;