chore(deps): use the lodash-es dependency

[tbouffard]

Previously, there were 2 CommonJS dependencies: lodash-throttle and lodash-debounce.
It is now replaced by a single ESM dependency: lodash-es.

The change reduces the size of the minified IIFE bundle from 1.2kb.
With the CommonJS lodash dependencies, as the throttle implementation calls debounce, debounce is present in lodash-throttle. In this case, rollup (that generates the bundle) is unable to tree shaked the duplication.
In the resulting bpmn-viusalization IIFE bundle, there are 2 debounce implementation: debounce (from lodash-debounce)and debounce$1 (from lodash-throttle).
Notice that the previous CommonJS dependencies only includes the necessary code to run. The new lodash-es dependency includes the whole lodash code which increases the size at installation on dev machine.

The usage of a ESM dependency also provides a better interoperability for bundlers. For example, Angular 15 warns usage of CommonJS dependencies. In the past, application integrating bpmn-visualization had to add configuration to remove the warning emited because of lodash dependencies.
This also reduces the number of dependencies from 4 (2 libs and their related types) to 2.

Notes

bpmn-visualization.min.js size decrease: 1211b / 1.2kb

bundle	master 006f196	new
bpmn-visualization.js	2 925 511	2 916 533
bpmn-visualization.min.js	986 964	985 753

Resources

• Inspiration: dep: reduce size of node_modules when adding ts-jest kulshekhar/ts-jest#2263 (they use lodash not lodash-es)
• https://www.npmjs.com/package/lodash-es
• https://itnext.io/lodash-es-vs-individual-lodash-utilities-size-comparison-676f14b07568. Published on Mar 28, 2019
• Angular: https://angular.io/guide/build#configuring-commonjs-dependencies pointing to https://web.dev/commonjs-larger-bundles/

Some alternatives to lodash for debounce/throttle:

• https://github.com/sindresorhus/p-debounce
• https://github.com/sindresorhus/p-throttle
• https://github.com/sindresorhus/debounce-fn
• https://github.com/you-dont-need/You-Dont-Need-Lodash-Underscore#_debounce
• https://github.com/you-dont-need/You-Dont-Need-Lodash-Underscore#_throttle

Tasks

• fix Jest errors on test/unit/component/mxgraph/renderer/StyleComputer.test.ts:32:1 and test/unit/component/mxgraph/overlay/OverlayConverter.test.ts:23:1. Fixed by using proposal described in SyntaxError: Unexpected token export when running tests for library that imports lodash-es nrwl/nx#6282 (comment) and SyntaxError: Unexpected token export when running tests for library that imports lodash-es nrwl/nx#6282 (comment) in integration tests and making unit tests not importing classes transitively depending of 'lodash-es' imports.
  `

FAIL  test/unit/component/mxgraph/overlay/OverlayConverter.test.ts
    Jest encountered an unexpected token

    Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax.

    Out of the box Jest supports Babel, which will be used to transform your files into valid JS based on your Babel configuration.

    By default "node_modules" folder is ignored by transformers.

    Here's what you can do:
     • If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/ecmascript-modules for how to enable it.
     • If you are trying to use TypeScript, see https://jestjs.io/docs/getting-started#using-typescript
     • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
     • If you need a custom transformation specify a "transform" option in your config.
     • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

    You'll find more details and examples of these config options in the docs:
    https://jestjs.io/docs/configuration
    For information about custom transformations, see:
    https://jestjs.io/docs/code-transformation

    Details:

    /process-analytics/repo/bpmn-visualization-js/node_modules/lodash-es/lodash.js:10
    export { default as add } from './add.js';
    ^^^^^^

    SyntaxError: Unexpected token 'export'

      18 | import { FitType } from '../options';
      19 | import { ensurePositiveValue, ensureValidZoomConfiguration } from '../helpers/validators';
    > 20 | import { debounce } from 'lodash-es';
         | ^
      21 | import { throttle } from 'lodash-es';
      22 | import { mxgraph } from './initializer';
      23 | import type { mxCellState, mxGraphView, mxPoint } from 'mxgraph';

      at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1495:14)
      at Object.<anonymous> (src/component/mxgraph/BpmnGraph.ts:20:1)
      at Object.<anonymous> (src/component/mxgraph/GraphConfigurator.ts:21:1)
      at Object.<anonymous> (src/component/BpmnVisualization.ts:17:1)
      at Object.<anonymous> (src/bpmn-visualization.ts:22:1)
      at Object.<anonymous> (test/unit/component/mxgraph/overlay/OverlayConverter.test.ts:23:1)

[github-actions]

♻️ PR Preview 70f1ebe has been successfully destroyed since this PR has been closed.

_{🤖 By surge-preview}

[github-actions]

♻️ PR Preview 70f1ebe has been successfully destroyed since this PR has been closed.

_{🤖 By surge-preview}

[sonarcloud]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

100.0% Coverage
0.0% Duplication