Use lodash-es and upgrade to TS@4.4 (#3589)

michael-yx-wu · web-flow · commit 2ae4d07055a9 · 2021-11-17T16:50:41.000-05:00
diff --git a/package.json b/package.json
@@ -32,6 +32,8 @@
   "devDependencies": {
     "@types/chai": "^3.4.34",
     "@types/d3-selection-multi": "1.0.4",
+    "@types/lodash": "^4.14.109",
+    "@types/lodash-es": "^4.17.3",
     "@types/mocha": "^2.2.27",
     "@types/sinon": "^1.16.36",
     "awesome-typescript-loader": "^3.4.1",
@@ -54,7 +56,7 @@
     "requirejs": "2.1.18",
     "sinon": "^2.1.0",
     "tslint": "5.18.0",
-    "typescript": "~2.7",
+    "typescript": "~4.4",
     "webpack": "2.6.1",
     "webpack-dev-server": "2.11.1",
     "webpack-merge": "^4.1.0"
@@ -63,13 +65,12 @@
     "@types/d3": "^4.13.0",
     "@types/d3-shape": "^1.2.5",
     "@types/is-plain-object": "^0.0.2",
-    "@types/lodash": "^4.14.109",
     "d3": "^4.13.0",
     "d3-ease": "^1.0.0",
     "d3-shape": "^1.0.0",
     "is-plain-object": "^2.0.4",
-    "lodash": "^4.17.10",
-    "tslib": "~1.8.0",
+    "lodash-es": "^4.17.15",
+    "tslib": "~2.3.1",
     "typesettable": "4.1.0"
   }
 }
diff --git a/src/components/component.ts b/src/components/component.ts
@@ -9,7 +9,7 @@ import { Bounds, Point, SimpleSelection, SpaceRequest } from "../core/interfaces
 import * as RenderController from "../core/renderController";
 import * as Utils from "../utils";
 
-import { isElement } from "lodash";
+import { isElement } from "lodash-es";
 import { coerceExternalD3 } from "../utils/coerceD3";
 import { makeEnum } from "../utils/makeEnum";
 import { ComponentContainer } from "./componentContainer";
diff --git a/src/drawers/symbolDrawer.ts b/src/drawers/symbolDrawer.ts
@@ -56,7 +56,7 @@ export function makeSymbolCanvasDrawStep(
 
             // check attributes and symbol type
             const attrsSame = isAttributeValuesEqual(prevAttrs, attrs, ContextStyleAttrs);
-            const symbolGenerator = symbolAccessor(datum, index, this._dataset);
+            const symbolGenerator = symbolAccessor(datum, index, dataset);
             if (attrsSame && prevSymbolSize == symbolSize && prevSymbolGenerator == symbolGenerator) {
                 // no-op;
             } else {
diff --git a/src/memoize/memoizeProjectors.ts b/src/memoize/memoizeProjectors.ts
@@ -1,5 +1,5 @@
-
-import { MapCache, memoize as lodashMemoize } from "lodash";
+import type { MapCache } from "lodash";
+import { memoize } from "lodash-es";
 
 import { Dataset } from "../core/dataset";
 import { AttributeToProjector, Projector } from "../core/interfaces";
@@ -76,7 +76,7 @@ class DatasetIndexCache implements MapCache {
 }
 
 export function memoizeProjector(projector: Projector): Projector {
-    const memo = lodashMemoize(projector, DatasetIndexCache.resolver);
+    const memo = memoize(projector, DatasetIndexCache.resolver);
     (memo as any).cache = new DatasetIndexCache();
     return memo;
 }
diff --git a/src/plots/barPlot.ts b/src/plots/barPlot.ts
@@ -73,7 +73,7 @@ export class Bar<X, Y> extends XYPlot<X, Y> {
   protected _isVertical: boolean;
   private _labelFormatter: DatumFormatter = Formatters.identity();
   private _labelsEnabled = false;
-  private _labelsPosition = LabelsPosition.end;
+  private _labelsPosition: LabelsPosition = LabelsPosition.end;
   protected _labelFontSize = Label._DEFAULT_FONT_SIZE_PX;
   private _hideBarsIfAnyAreTooWide = true;
   private _labelConfig: Utils.Map<Dataset, LabelConfig>;
@@ -862,7 +862,7 @@ export class Bar<X, Y> extends XYPlot<X, Y> {
    * same as the "pixel point" because they are always at the top/left of the
    * bar.
    */
-  protected _pixelBounds(datum: any, index: number, dataset: Dataset) {
+  protected _pixelBounds(datum: any, index: number, dataset: Dataset): Pick<DOMRect, "x" | "y" | "width" | "height"> {
     const attrToProjector = this._getAttrToProjector();
     return {
       x: attrToProjector["x"](datum, index, dataset),
diff --git a/src/plots/rectanglePlot.ts b/src/plots/rectanglePlot.ts
@@ -270,7 +270,7 @@ export class Rectangle<X, Y> extends XYPlot<X, Y> {
     return this._entityBBox(datum, index, dataset, this._getAttrToProjector());
   }
 
-  private _entityBBox(datum: any, index: number, dataset: Dataset, attrToProjector: AttributeToProjector): SVGRect {
+  private _entityBBox(datum: any, index: number, dataset: Dataset, attrToProjector: AttributeToProjector): Pick<SVGRect, "x" | "y" | "width" | "height"> {
     return {
       x: attrToProjector["x"](datum, index, dataset),
       y: attrToProjector["y"](datum, index, dataset),
diff --git a/src/plots/scatterPlot.ts b/src/plots/scatterPlot.ts
@@ -188,7 +188,7 @@ export class Scatter<X, Y> extends XYPlot<X, Y> {
     };
   }
 
-  protected _entityBounds(entity: ILightweightScatterPlotEntity) {
+  protected _entityBounds(entity: ILightweightScatterPlotEntity): Pick<DOMRect, "x" | "y"| "width" | "height"> {
     return {
       x: entity.position.x - entity.diameter / 2,
       y: entity.position.y - entity.diameter / 2,
diff --git a/src/scales/interpolatedColorScale.ts b/src/scales/interpolatedColorScale.ts
@@ -9,7 +9,7 @@ import * as Utils from "../utils";
 
 import { Scale } from "./scale";
 
-type supportedScale = d3.ScaleLinear<number, string> | d3.ScaleLogarithmic<number, string> | d3.ScalePower<number, string>;
+type SupportedScale = d3.ScaleLinear<number, string> | d3.ScaleLogarithmic<number, string> | d3.ScalePower<number, string>;
 
 export class InterpolatedColor extends Scale<number, string> {
   public static REDS = [
@@ -54,8 +54,8 @@ export class InterpolatedColor extends Scale<number, string> {
     "#B10026", // red
   ];
   private _colorRange: string[];
-  private _colorScale: supportedScale;
-  private _d3Scale: supportedScale;
+  private _colorScale: SupportedScale;
+  private _d3Scale: SupportedScale;
 
   /**
    * An InterpolatedColor Scale maps numbers to color hex values, expressed as strings.
@@ -96,8 +96,8 @@ export class InterpolatedColor extends Scale<number, string> {
   /**
    * Generates the converted QuantitativeScale.
    */
-  private _d3InterpolatedScale() {
-    return this._colorScale.range([0, 1]).interpolate(this._interpolateColors());
+  private _d3InterpolatedScale(): SupportedScale {
+    return (this._colorScale.range([0, 1]) as SupportedScale).interpolate(this._interpolateColors()) as SupportedScale;
   }
 
   /**
diff --git a/src/utils/domUtils.ts b/src/utils/domUtils.ts
@@ -27,8 +27,8 @@ export function contains(parent: Element, child: Element): boolean {
  * @param {d3.Selection} element
  * @returns {SVGRed} The bounding box.
  */
-export function elementBBox(element: SimpleSelection<any>) {
-  let bbox: SVGRect;
+export function elementBBox(element: SimpleSelection<any>): Pick<SVGRect, "x" | "y" | "width" | "height"> {
+  let bbox: Pick<SVGRect, "x" | "y" | "width" | "height">;
   // HACKHACK: Firefox won't correctly measure nodes with style "display: none" or their descendents (FF Bug 612118).
   try {
     bbox = (<any> element.node()).getBBox();
@@ -186,7 +186,7 @@ export function expandRect(rect: ClientRect, amount: number) {
     bottom: rect.bottom + amount,
     width: rect.width + amount * 2,
     height: rect.height + amount * 2,
-  };
+  } as ClientRect;
 }
 
 /**
@@ -219,7 +219,7 @@ export function clientRectInside(innerClientRect: ClientRect, outerClientRect: C
  */
 export function intersectsBBox(xValOrRange: number | Range,
                                yValOrRange: number | Range,
-                               bbox: SVGRect,
+                               bbox: Pick<SVGRect, "x" | "y" | "width" | "height">,
                                tolerance = 0.5) {
   const xRange = _parseRange(xValOrRange);
   const yRange = _parseRange(yValOrRange);
diff --git a/src/utils/objectUtils.ts b/src/utils/objectUtils.ts
@@ -7,11 +7,11 @@
  * Polyfill for Object.assign
  */
 export function assign<T extends Record<any, any>>(...objs: Partial<T>[]): T {
-    const result = {} as Partial<T>;
+    const result: Partial<T> = {};
     for(const obj of objs) {
         const keys = Object.keys(obj);
         for (const key of keys) {
-            result[key] = obj[key];
+            result[key as keyof T] = obj[key];
         }
     }
     return result as T;
diff --git a/src/utils/stackingUtils.ts b/src/utils/stackingUtils.ts
@@ -8,7 +8,8 @@ import * as d3 from "d3";
 import { Dataset } from "../core/dataset";
 import { IAccessor } from "../core/interfaces";
 
-import { memoize, MemoizedFunction } from "lodash";
+import type { MemoizedFunction } from "lodash";
+import { memoize } from "lodash-es";
 import * as Utils from "./";
 import { makeEnum } from "./makeEnum";
 
diff --git a/test/testMethods.ts b/test/testMethods.ts
@@ -223,7 +223,7 @@ export function triggerFakeWheelEvent(type: string, target: SimpleSelection<void
   let event: WheelEvent;
   if (isIE()) {
     event = document.createEvent("WheelEvent");
-    event.initWheelEvent("wheel", true, true, window, 1, xPos, yPos, xPos, yPos, 0, null, null, 0, deltaY, 0, 0);
+    (event as any).initWheelEvent("wheel", true, true, window, 1, xPos, yPos, xPos, yPos, 0, null, null, 0, deltaY, 0, 0);
   } else {
     // HACKHACK anycasting constructor to allow for the dictionary argument
     // https://github.com/Microsoft/TypeScript/issues/2416
diff --git a/test/window.d.ts b/test/window.d.ts
@@ -4,4 +4,4 @@ declare interface Window {
   Pixel_CloseTo_Requirement: number;
 }
 
-declare var window: Window;
+declare var window: Window & typeof globalThis;
diff --git a/yarn.lock b/yarn.lock
@@ -248,10 +248,17 @@
   resolved "https://registry.npmjs.org/@types/is-plain-object/-/is-plain-object-0.0.2.tgz#25bca7b656ba23fb03799a060dba201a7952103d"
   integrity sha1-Jbyntla6I/sDeZoGDbogGnlSED0=
 
-"@types/lodash@^4.14.109":
-  version "4.14.109"
-  resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.109.tgz#b1c4442239730bf35cabaf493c772b18c045886d"
-  integrity sha512-hop8SdPUEzbcJm6aTsmuwjIYQo1tqLseKCM+s2bBqTU2gErwI4fE+aqUVOlscPSQbKHKgtMMPoC+h4AIGOJYvw==
+"@types/lodash-es@^4.17.3":
+  version "4.17.5"
+  resolved "https://registry.yarnpkg.com/@types/lodash-es/-/lodash-es-4.17.5.tgz#1c3fdd16849d84aea43890b1c60da379fb501353"
+  integrity sha512-SHBoI8/0aoMQWAgUHMQ599VM6ZiSKg8sh/0cFqqlQQMyY9uEplc0ULU5yQNzcvdR4ZKa0ey8+vFmahuRbOCT1A==
+  dependencies:
+    "@types/lodash" "*"
+
+"@types/lodash@*", "@types/lodash@^4.14.109":
+  version "4.14.177"
+  resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.177.tgz#f70c0d19c30fab101cad46b52be60363c43c4578"
+  integrity sha512-0fDwydE2clKe9MNfvXHBHF9WEahRuj+msTuQqOmAApNORFvhMYZKNGGJdCzuhheVjMps/ti0Ak/iJPACMaevvw==
 
 "@types/mocha@^2.2.27":
   version "2.2.40"
@@ -4470,6 +4477,11 @@ locate-path@^2.0.0:
     p-locate "^2.0.0"
     path-exists "^3.0.0"
 
+lodash-es@^4.17.15:
+  version "4.17.15"
+  resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.15.tgz#21bd96839354412f23d7a10340e5eac6ee455d78"
+  integrity sha512-rlrc3yU3+JNOpZ9zj5pQtxnx2THmvRykwL4Xlxoa8I9lHBlVbbyPhgyPMioxVZ4NqyxaVVtaJnzsyOidQIhyyQ==
+
 lodash._arraycopy@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/lodash._arraycopy/-/lodash._arraycopy-3.0.0.tgz#76e7b7c1f1fb92547374878a562ed06a3e50f6e1"
@@ -4703,7 +4715,7 @@ lodash@^3.10.0, lodash@^3.3.1, lodash@^3.5.0, lodash@^3.7.0, lodash@^3.9.0, loda
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-3.10.1.tgz#5bf45e8e49ba4189e17d482789dfd15bd140b7b6"
   integrity sha1-W/Rejkm6QYnhfUgnid/RW9FAt7Y=
 
-lodash@^4.14.0, lodash@^4.17.10, lodash@^4.17.2, lodash@^4.17.4:
+lodash@^4.14.0, lodash@^4.17.2, lodash@^4.17.4:
   version "4.17.21"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
@@ -7168,10 +7180,10 @@ tslib@^1.8.0, tslib@^1.8.1:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.10.0.tgz#c3c19f95973fb0a62973fb09d90d961ee43e5c8a"
   integrity sha512-qOebF53frne81cf0S9B41ByenJ3/IuH8yJKngAX35CmiZySA0khhkovshKK+jGCaMnVomla7gVlIcc3EvKPbTQ==
 
-tslib@~1.8.0:
-  version "1.8.0"
-  resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.8.0.tgz#dc604ebad64bcbf696d613da6c954aa0e7ea1eb6"
-  integrity sha512-ymKWWZJST0/CkgduC2qkzjMOWr4bouhuURNXCn/inEX0L57BnRG6FhX76o7FOnsjHazCjfU2LKeSrlS2sIKQJg==
+tslib@~2.3.1:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.3.1.tgz#e8a335add5ceae51aa261d32a490158ef042ef01"
+  integrity sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==
 
 tslint@5.18.0:
   version "5.18.0"
@@ -7249,10 +7261,10 @@ typedarray@^0.0.6, typedarray@~0.0.5:
   resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
   integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=
 
-typescript@~2.7:
-  version "2.7.2"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-2.7.2.tgz#2d615a1ef4aee4f574425cdff7026edf81919836"
-  integrity sha512-p5TCYZDAO0m4G344hD+wx/LATebLWZNkkh2asWUFqSsD2OrDNhbAHuSjobrmsUmdzjJjEeZVU9g1h3O6vpstnw==
+typescript@~4.4:
+  version "4.4.4"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.4.4.tgz#2cd01a1a1f160704d3101fd5a58ff0f9fcb8030c"
+  integrity sha512-DqGhF5IKoBl8WNf8C1gu8q0xZSInh9j1kJJMqT3a94w1JzVaBU4EXOSMrz9yDqMT0xt3selp83fuFMQ0uzv6qA==
 
 typesettable@4.1.0:
   version "4.1.0"

Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,5 @@`
`1`		`-`
`2`		`-import { MapCache, memoize as lodashMemoize } from "lodash";`
	`1`	`+import type { MapCache } from "lodash";`
	`2`	`+import { memoize } from "lodash-es";`
`3`	`3`
`4`	`4`	`import { Dataset } from "../core/dataset";`
`5`	`5`	`import { AttributeToProjector, Projector } from "../core/interfaces";`
`@@ -76,7 +76,7 @@ class DatasetIndexCache implements MapCache {`
`76`	`76`	`}`
`77`	`77`
`78`	`78`	`export function memoizeProjector(projector: Projector): Projector {`
`79`		`- const memo = lodashMemoize(projector, DatasetIndexCache.resolver);`
	`79`	`+ const memo = memoize(projector, DatasetIndexCache.resolver);`
`80`	`80`	`(memo as any).cache = new DatasetIndexCache();`
`81`	`81`	`return memo;`
`82`	`82`	`}`
Original file line number	Diff line number	Diff line change
`@@ -270,7 +270,7 @@ export class Rectangle<X, Y> extends XYPlot<X, Y> {`
`270`	`270`	`return this._entityBBox(datum, index, dataset, this._getAttrToProjector());`
`271`	`271`	`}`
`272`	`272`
`273`		`- private _entityBBox(datum: any, index: number, dataset: Dataset, attrToProjector: AttributeToProjector): SVGRect {`
	`273`	`+ private _entityBBox(datum: any, index: number, dataset: Dataset, attrToProjector: AttributeToProjector): Pick<SVGRect, "x" \| "y" \| "width" \| "height"> {`
`274`	`274`	`return {`
`275`	`275`	`x: attrToProjector["x"](datum, index, dataset),`
`276`	`276`	`y: attrToProjector["y"](datum, index, dataset),`
Original file line number	Diff line number	Diff line change
`@@ -188,7 +188,7 @@ export class Scatter<X, Y> extends XYPlot<X, Y> {`
`188`	`188`	`};`
`189`	`189`	`}`
`190`	`190`
`191`		`- protected _entityBounds(entity: ILightweightScatterPlotEntity) {`
	`191`	`+ protected _entityBounds(entity: ILightweightScatterPlotEntity): Pick<DOMRect, "x" \| "y"\| "width" \| "height"> {`
`192`	`192`	`return {`
`193`	`193`	`x: entity.position.x - entity.diameter / 2,`
`194`	`194`	`y: entity.position.y - entity.diameter / 2,`
Original file line number	Diff line number	Diff line change
`@@ -7,11 +7,11 @@`
`7`	`7`	`* Polyfill for Object.assign`
`8`	`8`	`*/`
`9`	`9`	`export function assign<T extends Record<any, any>>(...objs: Partial<T>[]): T {`
`10`		`- const result = {} as Partial<T>;`
	`10`	`+ const result: Partial<T> = {};`
`11`	`11`	`for(const obj of objs) {`
`12`	`12`	`const keys = Object.keys(obj);`
`13`	`13`	`for (const key of keys) {`
`14`		`- result[key] = obj[key];`
	`14`	`+ result[key as keyof T] = obj[key];`
`15`	`15`	`}`
`16`	`16`	`}`
`17`	`17`	`return result as T;`
Original file line number	Diff line number	Diff line change
`@@ -4,4 +4,4 @@ declare interface Window {`
`4`	`4`	`Pixel_CloseTo_Requirement: number;`
`5`	`5`	`}`
`6`	`6`
`7`		`-declare var window: Window;`
	`7`	`+declare var window: Window & typeof globalThis;`