Content
View differences
Updated by Alexander Coles 1 day ago
Much functionality provided by Lodash is now part of ES6. ES6.
[https://youmightnotneed.com/lodash](https://youmightnotneed.com/lodash) provides a guide to various methods.
For those useful methods that ES6 does not yet provide, or which would be too cumbersome and risky to hand-roll, we can migrate to lodash-es, an ESM version of lodash which provides enhanced TypeScript support as well as support for tree-shaking.
### Goal
* Reduce complexity, duplication - and improve type safety.
* Reduce bundle size (longer-term).
(longer-term)
### Why now?
* Follows on directly from the recent jQuery removal.
* The global `_` is an implicit, ambient dependency - it hides usage from the bundler and defeats tree-shaking.
* Most methods we used already have native ES6+ equivalents: faster, fully typed, no bundle cost.
* Encourages good practice now - explicit imports over reaching for an ambient global.
* Prerequisite for the eventual tree-shaking win once transitive consumers drop lodash.
### Breakdown
Each sub-task migrated one bucket of helpers, in its own reviewable PR:
* ###OP-19541
* ###OP-19542
* ###OP-19543
* ###OP-19544
* ###OP-19545
* ###OP-19546
* ###OP-19547
`lodash-es` (and `@types/lodash-es`) remain - they back the handful of helpers with no native equivalent (`isEqual`, `merge`, `debounce`, …).
### Caveats
**Please note that lodash is still a transitive dependency of two dependencies in our stack,** `**i18n-js**` **and** `**@xeokit/xeokit-bim-viewe**`**.** As with the recent jQuery migration, we will not be able to take advantage of tree-shaking until we eliminate the transitive dependencies (although [OP-19600](https://community.openproject.org/work_packages/OP-19600) may help mitigate). Upstream PR to migrate i18n-js to lodash-es: https://github.com/fnando/i18n/pull/125
### Hints for QA
No behavioural change is intended anywhere - this is pure cleanup, so a general General smoke test is most valuable. The affected screens are almost entirely Angular-built UI, concentrated in:
* **Work package table and timeline (Gantt)** - grouping, hierarchy, selecting and dragging rows, relation rows, and timeline/milestone bars.
* **Table configuration modal** - the columns, sort-by, group-by, filters, highlighting and timelines tabs; check column ordering and multi-criteria sorting.
* **Filters** - adding, removing and clearing filter values.
* **Baseline comparison** - baseline highlighting and the added/removed/changed markers.
* **Inline editing** - editing and saving fields on the full view and in the table, including single/multi-select fields.
* **Date pickers and the progress field** - watch the live preview as you type.
* **Autocompleters** - project, user and work package search.
* **Rich text editing** - comments and descriptions, paste, and macros.
* **Boards and team planner**, the **notifications centre**, **card view**, **relations tab** and **embedded graphs**.
* **Module tabs** - GitHub PRs, GitLab issues/MRs, and the Costs module.
would be helpful.
[https://youmightnotneed.com/lodash](https://youmightnotneed.com/lodash) provides a guide to various methods.
For those useful methods that ES6 does not yet provide, or which would be too cumbersome and risky to hand-roll, we can migrate to lodash-es, an ESM version of lodash which provides enhanced TypeScript support as well as support for tree-shaking.
### Goal
* Reduce complexity, duplication - and improve type safety.
* Follows on directly from the recent jQuery removal.
* The global `_` is an implicit, ambient dependency - it hides usage from the bundler and defeats tree-shaking.
* Most methods we used already have native ES6+ equivalents: faster, fully typed, no bundle cost.
* Encourages good practice now - explicit imports over reaching for an ambient global.
* Prerequisite for the eventual tree-shaking win once transitive consumers drop lodash.
### Breakdown
Each sub-task migrated one bucket of helpers, in its own reviewable PR:
* ###OP-19541
* ###OP-19542
* ###OP-19543
* ###OP-19544
* ###OP-19545
* ###OP-19546
* ###OP-19547
`lodash-es` (and `@types/lodash-es`) remain - they back the handful of helpers with no native equivalent (`isEqual`, `merge`, `debounce`, …).
### Caveats
**Please note that lodash is still a transitive dependency of two dependencies in our stack,** `**i18n-js**` **and** `**@xeokit/xeokit-bim-viewe**`**.** As with the recent jQuery migration, we will not be able to take advantage of tree-shaking until we eliminate the transitive dependencies (although [OP-19600](https://community.openproject.org/work_packages/OP-19600) may help mitigate). Upstream PR to migrate i18n-js to lodash-es: https://github.com/fnando/i18n/pull/125
### Hints for QA
No behavioural change is intended anywhere - this is pure cleanup, so a general
* **Work package table and timeline (Gantt)** - grouping, hierarchy, selecting and dragging rows, relation rows, and timeline/milestone bars.
* **Table configuration modal** - the columns, sort-by, group-by, filters, highlighting and timelines tabs; check column ordering and multi-criteria sorting.
* **Filters** - adding, removing and clearing filter values.
* **Baseline comparison** - baseline highlighting and the added/removed/changed markers.
* **Inline editing** - editing and saving fields on the full view and in the table, including single/multi-select fields.
* **Date pickers and the progress field** - watch the live preview as you type.
* **Autocompleters** - project, user and work package search.
* **Rich text editing** - comments and descriptions, paste, and macros.
* **Boards and team planner**, the **notifications centre**, **card view**, **relations tab** and **embedded graphs**.
* **Module tabs** - GitHub PRs, GitLab issues/MRs, and the Costs module.