remove lodash to reduce bundle size by 100kb

commafeed-client/package-lock.json

@@ -25,7 +25,6 @@
                 "axios": "^1.4.0",
                 "dayjs": "^1.11.7",
                 "interweave": "^13.1.0",
-        "lodash": "^4.17.21",
                 "mousetrap": "^1.6.5",
                 "react": "^18.2.0",
                 "react-async-hook": "^4.0.0",
@@ -38,6 +37,7 @@
                 "react-router-dom": "^6.11.1",
                 "react-swipeable": "^7.0.0",
                 "swagger-ui-react": "^4.18.3",
+                "throttle-debounce": "^5.0.0",
                 "tinycon": "^0.6.8",
                 "use-local-storage": "^3.0.0",
                 "websocket-heartbeat-js": "^1.1.2"
@@ -46,12 +46,12 @@
                 "@lingui/cli": "^4.0.0",
                 "@lingui/vite-plugin": "^4.0.0",
                 "@types/eslint": "^8.37.0",
-        "@types/lodash": "^4.14.194",
                 "@types/mousetrap": "^1.6.11",
                 "@types/react": "^18.2.6",
                 "@types/react-dom": "^18.2.4",
                 "@types/react-infinite-scroller": "^1.2.3",
                 "@types/swagger-ui-react": "^4.18.0",
+                "@types/throttle-debounce": "^5.0.0",
                 "@types/tinycon": "^0.6.3",
                 "@typescript-eslint/eslint-plugin": "^5.59.2",
                 "@typescript-eslint/parser": "^5.59.2",
@@ -4252,12 +4252,6 @@
             "integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==",
             "dev": true
         },
-    "node_modules/@types/lodash": {
-      "version": "4.14.194",
-      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.194.tgz",
-      "integrity": "sha512-r22s9tAS7imvBt2lyHC9B8AGwWnXaYb1tY09oyLkXDs4vArpYJzw09nj8MLx5VfciBPGIb+ZwG0ssYnEPJxn/g==",
-      "dev": true
-    },
         "node_modules/@types/mousetrap": {
             "version": "1.6.11",
             "resolved": "https://registry.npmjs.org/@types/mousetrap/-/mousetrap-1.6.11.tgz",
@@ -4335,6 +4329,12 @@
                 "@types/react": "*"
             }
         },
+        "node_modules/@types/throttle-debounce": {
+            "version": "5.0.0",
+            "resolved": "https://registry.npmjs.org/@types/throttle-debounce/-/throttle-debounce-5.0.0.tgz",
+            "integrity": "sha512-Pb7k35iCGFcGPECoNE4DYp3Oyf2xcTd3FbFQxXUI9hEYKUl6YX+KLf7HrBmgVcD05nl50LIH6i+80js4iYmWbw==",
+            "dev": true
+        },
         "node_modules/@types/tinycon": {
             "version": "0.6.3",
             "resolved": "https://registry.npmjs.org/@types/tinycon/-/tinycon-0.6.3.tgz",
@@ -10962,6 +10962,14 @@
             "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==",
             "dev": true
         },
+        "node_modules/throttle-debounce": {
+            "version": "5.0.0",
+            "resolved": "https://registry.npmjs.org/throttle-debounce/-/throttle-debounce-5.0.0.tgz",
+            "integrity": "sha512-2iQTSgkkc1Zyk0MeVrt/3BvuOXYPl/R8Z0U2xxo9rjwNciaHDG3R+Lm6dh4EeUci49DanvBnuqI6jshoQQRGEg==",
+            "engines": {
+                "node": ">=12.22"
+            }
+        },
         "node_modules/through": {
             "version": "2.3.8",
             "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",

commafeed-client/package.json

@@ -33,7 +33,6 @@
         "axios": "^1.4.0",
         "dayjs": "^1.11.7",
         "interweave": "^13.1.0",
-    "lodash": "^4.17.21",
         "mousetrap": "^1.6.5",
         "react": "^18.2.0",
         "react-async-hook": "^4.0.0",
@@ -46,6 +45,7 @@
         "react-router-dom": "^6.11.1",
         "react-swipeable": "^7.0.0",
         "swagger-ui-react": "^4.18.3",
+        "throttle-debounce": "^5.0.0",
         "tinycon": "^0.6.8",
         "use-local-storage": "^3.0.0",
         "websocket-heartbeat-js": "^1.1.2"
@@ -54,12 +54,12 @@
         "@lingui/cli": "^4.0.0",
         "@lingui/vite-plugin": "^4.0.0",
         "@types/eslint": "^8.37.0",
-    "@types/lodash": "^4.14.194",
         "@types/mousetrap": "^1.6.11",
         "@types/react": "^18.2.6",
         "@types/react-dom": "^18.2.4",
         "@types/react-infinite-scroller": "^1.2.3",
         "@types/swagger-ui-react": "^4.18.0",
+        "@types/throttle-debounce": "^5.0.0",
         "@types/tinycon": "^0.6.3",
         "@typescript-eslint/eslint-plugin": "^5.59.2",
         "@typescript-eslint/parser": "^5.59.2",

commafeed-client/src/app/utils.ts

@@ -64,3 +64,5 @@ export const openLinkInBackgroundTab = (url: string) => {
         })
     )
 }
+
+export const truncate = (str: string, n: number) => (str.length > n ? `${str.slice(0, n - 1)}\u2026` : str)

commafeed-client/src/components/content/FeedEntries.tsx

@@ -18,9 +18,9 @@ import { KeyboardShortcutsHelp } from "components/KeyboardShortcutsHelp"
 import { Loader } from "components/Loader"
 import { useMousetrap } from "hooks/useMousetrap"
 import { useViewMode } from "hooks/useViewMode"
-import throttle from "lodash/throttle"
 import { useEffect } from "react"
 import InfiniteScroll from "react-infinite-scroller"
+import { throttle } from "throttle-debounce"
 import { FeedEntry } from "./FeedEntry"
 
 export function FeedEntries() {
@@ -82,7 +82,7 @@ export function FeedEntries() {
                 )
             }
         }
-        const throttledListener = throttle(listener, 100)
+        const throttledListener = throttle(100, listener)
         scrollArea?.addEventListener("scroll", throttledListener)
         return () => scrollArea?.removeEventListener("scroll", throttledListener)
     }, [dispatch, entries, viewMode, scrollMarks, scrollingToEntry])

commafeed-client/src/components/content/FeedEntryContextMenu.tsx

@@ -5,11 +5,11 @@ import { markEntriesUpToEntry, markEntry, starEntry } from "app/slices/entries"
 import { redirectToFeed } from "app/slices/redirect"
 import { useAppDispatch, useAppSelector } from "app/store"
 import { Entry } from "app/types"
-import { openLinkInBackgroundTab } from "app/utils"
+import { openLinkInBackgroundTab, truncate } from "app/utils"
-import { throttle, truncate } from "lodash"
 import { useEffect } from "react"
 import { Item, Menu, Separator, useContextMenu } from "react-contexify"
 import { TbArrowBarToDown, TbExternalLink, TbEyeCheck, TbEyeOff, TbRss, TbStar, TbStarOff } from "react-icons/tb"
+import { throttle } from "throttle-debounce"
 
 interface FeedEntryContextMenuProps {
     entry: Entry
@@ -92,7 +92,7 @@ export function FeedEntryContextMenu(props: FeedEntryContextMenuProps) {
                     >
                         <Group>
                             <TbRss size={iconSize} />
-                            <Trans>Go to {truncate(props.entry.feedName)}</Trans>
+                            <Trans>Go to {truncate(props.entry.feedName, 30)}</Trans>
                         </Group>
                     </Item>
                 </>
@@ -118,7 +118,7 @@ export function useFeedEntryContextMenu(entry: Entry) {
         const scrollArea = document.getElementById(Constants.dom.mainScrollAreaId)
 
         const listener = () => contextMenu.hideAll()
-        const throttledListener = throttle(listener, 100)
+        const throttledListener = throttle(100, listener)
 
         scrollArea?.addEventListener("scroll", throttledListener)
         return () => scrollArea?.removeEventListener("scroll", throttledListener)

commafeed-client/src/components/content/FeedEntryFooter.tsx

@@ -7,9 +7,9 @@ import { useAppDispatch, useAppSelector } from "app/store"
 import { Entry } from "app/types"
 import { ActionButton } from "components/ActionButtton"
 import { ButtonToolbar } from "components/ButtonToolbar"
-import { throttle } from "lodash"
 import { useEffect, useState } from "react"
 import { TbArrowBarToDown, TbExternalLink, TbEyeCheck, TbEyeOff, TbShare, TbStar, TbStarOff, TbTag } from "react-icons/tb"
+import { throttle } from "throttle-debounce"
 import { ShareButtons } from "./ShareButtons"
 
 interface FeedEntryFooterProps {
@@ -38,7 +38,7 @@ export function FeedEntryFooter(props: FeedEntryFooterProps) {
         const scrollArea = document.getElementById(Constants.dom.mainScrollAreaId)
 
         const listener = () => setScrollPosition(scrollArea ? scrollArea.scrollTop : 0)
-        const throttledListener = throttle(listener, 100)
+        const throttledListener = throttle(100, listener)
 
         scrollArea?.addEventListener("scroll", throttledListener)
         return () => scrollArea?.removeEventListener("scroll", throttledListener)