Remove lodash deps to reduce bundle size more

resources/scripts/components/dashboard/search/SearchModal.tsx

@@ -3,7 +3,7 @@ import Modal, { RequiredModalProps } from '@/components/elements/Modal';
 import { Field, Form, Formik, FormikHelpers, useFormikContext } from 'formik';
 import { Actions, useStoreActions, useStoreState } from 'easy-peasy';
 import { object, string } from 'yup';
-import { debounce } from 'lodash-es';
+import debounce from 'debounce';
 import FormikFieldWrapper from '@/components/elements/FormikFieldWrapper';
 import InputSpinner from '@/components/elements/InputSpinner';
 import getServers from '@/api/getServers';
@@ -57,6 +57,7 @@ export default ({ ...props }: Props) => {
         setLoading(true);
         setSubmitting(false);
         clearFlashes('search');
+
         getServers(term)
             .then(servers => setServers(servers.items.filter((_, index) => index < 5)))
             .catch(error => {

resources/scripts/components/elements/InputError.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
-import capitalize from 'lodash-es/capitalize';
 import { FormikErrors, FormikTouched } from 'formik';
 import tw from 'twin.macro';
+import { capitalize } from '@/helpers';
 
 interface Props {
     errors: FormikErrors<any>;

resources/scripts/components/server/StatGraphs.tsx

@@ -2,7 +2,7 @@ import React, { useCallback, useEffect, useState } from 'react';
 import Chart, { ChartConfiguration } from 'chart.js';
 import { ServerContext } from '@/state/server';
 import { bytesToMegabytes } from '@/helpers';
-import merge from 'lodash-es/merge';
+import merge from 'deepmerge';
 import TitledGreyBox from '@/components/elements/TitledGreyBox';
 import { faMemory, faMicrochip } from '@fortawesome/free-solid-svg-icons';
 import tw from 'twin.macro';
@@ -59,7 +59,7 @@ const chartDefaults: ChartConfiguration = {
 };
 
 const createDefaultChart = (ctx: CanvasRenderingContext2D, options?: ChartConfiguration): Chart => new Chart(ctx, {
-    ...merge({}, chartDefaults, options),
+    ...merge(chartDefaults, options || {}),
     data: {
         labels: Array(20).fill(''),
         datasets: [

resources/scripts/helpers.ts

@@ -13,3 +13,5 @@ export const bytesToMegabytes = (bytes: number) => Math.floor(bytes / 1000 / 100
 export const randomInt = (low: number, high: number) => Math.floor(Math.random() * (high - low) + low);
 
 export const cleanDirectoryPath = (path: string) => path.replace(/(^#\/*)|(\/(\/*))|(^$)/g, '/');
+
+export const capitalize = (s: string) => s.charAt(0).toUpperCase() + s.slice(1).toLowerCase();

resources/scripts/plugins/useDeepMemo.ts

@@ -1,5 +1,5 @@
 import { useRef } from 'react';
-import isEqual from 'lodash-es/isEqual';
+import isEqual from 'react-fast-compare';
 
 export const useDeepMemo = <T, K> (fn: () => T, key: K): T => {
     const ref = useRef<{ key: K, value: T }>();