From 8a0ac9c9e14bf6f96e5edf29aac6997da933b573 Mon Sep 17 00:00:00 2001 From: Nemo Grippa Date: Mon, 15 Jan 2024 13:39:06 +0100 Subject: [PATCH] reduce bundle size by using lodash-es. --- package-lock.json | 19 ++++++++++++++----- package.json | 4 ++-- src/constants/baseChar.ts | 5 +++++ src/pages/library/AddToCombat.tsx | 26 ++++++++++++-------------- src/pages/mainTable/row/DealDamage.tsx | 2 +- src/state/State.tsx | 2 +- src/state/StateProvider.tsx | 6 ++---- src/utils/getCharacters.ts | 2 +- 8 files changed, 38 insertions(+), 28 deletions(-) diff --git a/package-lock.json b/package-lock.json index 1626581..e17fa3b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -17,7 +17,7 @@ "date-fns": "^3.2.0", "immer": "^10.0.3", "jest": "^29.7.0", - "lodash": "^4.17.21", + "lodash-es": "^4.17.21", "nanoid": "^5.0.4", "notistack": "^3.0.1", "react": "^18.2.0", @@ -28,7 +28,7 @@ }, "devDependencies": { "@types/jest": "^29.5.11", - "@types/lodash": "^4.14.202", + "@types/lodash-es": "^4.17.12", "@types/node": "^20.11.0", "@types/react": "^18.2.43", "@types/react-dom": "^18.2.17", @@ -2887,6 +2887,15 @@ "integrity": "sha512-OvlIYQK9tNneDlS0VN54LLd5uiPCBOp7gS5Z0f1mjoJYBrtStzgmJBxONW3U6OZqdtNzZPmn9BS/7WI7BFFcFQ==", "dev": true }, + "node_modules/@types/lodash-es": { + "version": "4.17.12", + "resolved": "https://registry.npmjs.org/@types/lodash-es/-/lodash-es-4.17.12.tgz", + "integrity": "sha512-0NgftHUcV4v34VhXm8QBSftKVXtbkBG3ViCjs6+eJ5a6y6Mi/jiFGPc1sC7QK+9BFhWrURE3EOggmWaSxL9OzQ==", + "dev": true, + "dependencies": { + "@types/lodash": "*" + } + }, "node_modules/@types/node": { "version": "20.11.0", "resolved": "https://registry.npmjs.org/@types/node/-/node-20.11.0.tgz", @@ -6831,10 +6840,10 @@ "url": "https://github.com/sponsors/sindresorhus" } }, - "node_modules/lodash": { + "node_modules/lodash-es": { "version": "4.17.21", - "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz", - "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==" + "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz", + "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==" }, "node_modules/lodash.memoize": { "version": "4.1.2", diff --git a/package.json b/package.json index 2c1a550..db62c96 100644 --- a/package.json +++ b/package.json @@ -20,7 +20,7 @@ "date-fns": "^3.2.0", "immer": "^10.0.3", "jest": "^29.7.0", - "lodash": "^4.17.21", + "lodash-es": "^4.17.21", "nanoid": "^5.0.4", "notistack": "^3.0.1", "react": "^18.2.0", @@ -31,7 +31,7 @@ }, "devDependencies": { "@types/jest": "^29.5.11", - "@types/lodash": "^4.14.202", + "@types/lodash-es": "^4.17.12", "@types/node": "^20.11.0", "@types/react": "^18.2.43", "@types/react-dom": "^18.2.17", diff --git a/src/constants/baseChar.ts b/src/constants/baseChar.ts index 55f01ba..a364029 100644 --- a/src/constants/baseChar.ts +++ b/src/constants/baseChar.ts @@ -1,5 +1,7 @@ import { Character } from "../types/Character.ts"; import { nanoid } from "nanoid"; +import { DeepPartial } from "../types/utils.ts"; +import { cloneDeep, merge } from "lodash-es"; export const baseChar: Character = { name: "Untitled", @@ -29,3 +31,6 @@ export const baseChar: Character = { }, isPersistent: true, }; + +export const createChar = (char: DeepPartial): Character => + merge(cloneDeep(baseChar), char); diff --git a/src/pages/library/AddToCombat.tsx b/src/pages/library/AddToCombat.tsx index 17840b6..5b50ec7 100644 --- a/src/pages/library/AddToCombat.tsx +++ b/src/pages/library/AddToCombat.tsx @@ -7,14 +7,13 @@ import { useFieldArray, useForm, } from "react-hook-form"; -import { Character, LibraryCharacter } from "../../types/Character.ts"; +import { LibraryCharacter } from "../../types/Character.ts"; import { nanoid } from "nanoid"; import { FormInput } from "../../components/FormInput.tsx"; import { Box, IconButton } from "@mui/material"; import { useGlobalState } from "../../state/State.tsx"; import DeleteIcon from "@mui/icons-material/Delete"; -import { cloneDeep, merge } from "lodash"; -import { baseChar } from "../../constants/baseChar.ts"; +import { createChar } from "../../constants/baseChar.ts"; type AddToCombatForm = { characters: { @@ -48,17 +47,16 @@ export const AddToCombat = (props: { id: LibraryCharacter["libraryId"] }) => { (c) => c.libraryId === props.id, ); if (!rootCharacter) return; - const newCharacters = usps.map( - (c) => - merge(cloneDeep(baseChar), { - ...rootCharacter, - name: c ? `${rootCharacter.name} (${c})` : rootCharacter.name, - id: nanoid(), - currentHp: rootCharacter.maxHp, - concentrated: false, - initiative: 0, - effects: { preTurn: [], status: [], postTurn: [] }, - }) as Character, + const newCharacters = usps.map((c) => + createChar({ + ...rootCharacter, + name: c ? `${rootCharacter.name} (${c})` : rootCharacter.name, + id: nanoid(), + currentHp: rootCharacter.maxHp, + concentrated: false, + initiative: 0, + effects: { preTurn: [], status: [], postTurn: [] }, + }), ); setCharacters((d) => { newCharacters.forEach((c) => (d[c.id] = c)); diff --git a/src/pages/mainTable/row/DealDamage.tsx b/src/pages/mainTable/row/DealDamage.tsx index 2e90685..240c681 100644 --- a/src/pages/mainTable/row/DealDamage.tsx +++ b/src/pages/mainTable/row/DealDamage.tsx @@ -6,7 +6,7 @@ import { useChar } from "../charContext.ts"; import { SingleExpandedField } from "../../../components/SingleExpandedField.tsx"; import DD from "../../../assets/sword.svg?react"; import { Box, SvgIcon, Typography } from "@mui/material"; -import { clamp } from "lodash"; +import { clamp } from "lodash-es"; import { specialDamageEffects } from "../../../constants/specialDamageEffects.ts"; import { rollDieString } from "../../../dies/rollDieString.ts"; import { useSnackbar } from "notistack"; diff --git a/src/state/State.tsx b/src/state/State.tsx index ba259c0..241b899 100644 --- a/src/state/State.tsx +++ b/src/state/State.tsx @@ -1,6 +1,6 @@ import { createContext, useContext } from "react"; import { Character, LibraryCharacter } from "../types/Character.ts"; -import { noop } from "lodash"; +import { noop } from "lodash-es"; import { Updater } from "use-immer"; import { Options } from "../types/Options.ts"; import { TurnInfo } from "../types/TurnInfo.ts"; diff --git a/src/state/StateProvider.tsx b/src/state/StateProvider.tsx index 59dd544..678b7b6 100644 --- a/src/state/StateProvider.tsx +++ b/src/state/StateProvider.tsx @@ -2,8 +2,7 @@ import { globalState, State } from "./State.tsx"; import { useImmer } from "use-immer"; import { nanoid } from "nanoid"; import { PropsWithChildren, useEffect, useMemo, useState } from "react"; -import { cloneDeep, merge } from "lodash"; -import { baseChar } from "../constants/baseChar.ts"; +import { baseChar, createChar } from "../constants/baseChar.ts"; import { getCharacters } from "../utils/getCharacters.ts"; const zahir = { @@ -69,8 +68,7 @@ const initialChars = { const migrateChars = (chars: State["charactersDict"]) => { Object.keys(chars).forEach((k) => { - const newChar = cloneDeep(baseChar); - chars[k] = merge(newChar, chars[k]); + chars[k] = createChar(chars[k]); }); return chars; }; diff --git a/src/utils/getCharacters.ts b/src/utils/getCharacters.ts index fd6a2b0..c3828d5 100644 --- a/src/utils/getCharacters.ts +++ b/src/utils/getCharacters.ts @@ -1,4 +1,4 @@ -import { orderBy } from "lodash"; +import { orderBy } from "lodash-es"; import { State } from "../state/State.tsx"; export const getCharacters = (