remove lodash to reduce bundle size by 100kb

commafeed-client/package.json

@@ -1,84 +1,84 @@
 {
-  "name": "commafeed-client",
+    "name": "commafeed-client",
-  "private": true,
+    "private": true,
-  "version": "0.0.0",
+    "version": "0.0.0",
-  "type": "module",
+    "type": "module",
-  "scripts": {
+    "scripts": {
-    "dev": "vite --host",
+        "dev": "vite --host",
-    "dev:typescript": "tsc --watch",
+        "dev:typescript": "tsc --watch",
-    "build": "npm run i18n:compile && tsc && vite build",
+        "build": "npm run i18n:compile && tsc && vite build",
-    "preview": "vite preview",
+        "preview": "vite preview",
-    "test": "vitest",
+        "test": "vitest",
-    "test:ci": "vitest run",
+        "test:ci": "vitest run",
-    "eslint": "eslint --ext=.js,.jsx,.ts,.tsx src",
+        "eslint": "eslint --ext=.js,.jsx,.ts,.tsx src",
-    "i18n": "npm run i18n:extract && npm run i18n:compile",
+        "i18n": "npm run i18n:extract && npm run i18n:compile",
-    "i18n:extract": "lingui extract --clean",
+        "i18n:extract": "lingui extract --clean",
-    "i18n:compile": "lingui compile --typescript",
+        "i18n:compile": "lingui compile --typescript",
-    "postinstall": "npm run i18n:compile"
+        "postinstall": "npm run i18n:compile"
-  },
+    },
-  "dependencies": {
+    "dependencies": {
-    "@emotion/react": "^11.11.0",
+        "@emotion/react": "^11.11.0",
-    "@fontsource/open-sans": "^4.5.14",
+        "@fontsource/open-sans": "^4.5.14",
-    "@lingui/core": "^4.0.0",
+        "@lingui/core": "^4.0.0",
-    "@lingui/macro": "^4.0.0",
+        "@lingui/macro": "^4.0.0",
-    "@lingui/react": "^4.0.0",
+        "@lingui/react": "^4.0.0",
-    "@mantine/core": "^6.0.10",
+        "@mantine/core": "^6.0.10",
-    "@mantine/form": "^6.0.10",
+        "@mantine/form": "^6.0.10",
-    "@mantine/hooks": "^6.0.10",
+        "@mantine/hooks": "^6.0.10",
-    "@mantine/modals": "^6.0.10",
+        "@mantine/modals": "^6.0.10",
-    "@mantine/notifications": "^6.0.10",
+        "@mantine/notifications": "^6.0.10",
-    "@mantine/spotlight": "^6.0.10",
+        "@mantine/spotlight": "^6.0.10",
-    "@mantine/styles": "^6.0.10",
+        "@mantine/styles": "^6.0.10",
-    "@reduxjs/toolkit": "^1.9.5",
+        "@reduxjs/toolkit": "^1.9.5",
-    "axios": "^1.4.0",
+        "axios": "^1.4.0",
-    "dayjs": "^1.11.7",
+        "dayjs": "^1.11.7",
-    "interweave": "^13.1.0",
+        "interweave": "^13.1.0",
-    "lodash": "^4.17.21",
+        "mousetrap": "^1.6.5",
-    "mousetrap": "^1.6.5",
+        "react": "^18.2.0",
-    "react": "^18.2.0",
+        "react-async-hook": "^4.0.0",
-    "react-async-hook": "^4.0.0",
+        "react-contexify": "^6.0.0",
-    "react-contexify": "^6.0.0",
+        "react-dom": "^18.2.0",
-    "react-dom": "^18.2.0",
+        "react-ga4": "^2.1.0",
-    "react-ga4": "^2.1.0",
+        "react-icons": "^4.8.0",
-    "react-icons": "^4.8.0",
+        "react-infinite-scroller": "^1.2.6",
-    "react-infinite-scroller": "^1.2.6",
+        "react-redux": "^8.0.5",
-    "react-redux": "^8.0.5",
+        "react-router-dom": "^6.11.1",
-    "react-router-dom": "^6.11.1",
+        "react-swipeable": "^7.0.0",
-    "react-swipeable": "^7.0.0",
+        "swagger-ui-react": "^4.18.3",
-    "swagger-ui-react": "^4.18.3",
+        "throttle-debounce": "^5.0.0",
-    "tinycon": "^0.6.8",
+        "tinycon": "^0.6.8",
-    "use-local-storage": "^3.0.0",
+        "use-local-storage": "^3.0.0",
-    "websocket-heartbeat-js": "^1.1.2"
+        "websocket-heartbeat-js": "^1.1.2"
-  },
+    },
-  "devDependencies": {
+    "devDependencies": {
-    "@lingui/cli": "^4.0.0",
+        "@lingui/cli": "^4.0.0",
-    "@lingui/vite-plugin": "^4.0.0",
+        "@lingui/vite-plugin": "^4.0.0",
-    "@types/eslint": "^8.37.0",
+        "@types/eslint": "^8.37.0",
-    "@types/lodash": "^4.14.194",
+        "@types/mousetrap": "^1.6.11",
-    "@types/mousetrap": "^1.6.11",
+        "@types/react": "^18.2.6",
-    "@types/react": "^18.2.6",
+        "@types/react-dom": "^18.2.4",
-    "@types/react-dom": "^18.2.4",
+        "@types/react-infinite-scroller": "^1.2.3",
-    "@types/react-infinite-scroller": "^1.2.3",
+        "@types/swagger-ui-react": "^4.18.0",
-    "@types/swagger-ui-react": "^4.18.0",
+        "@types/throttle-debounce": "^5.0.0",
-    "@types/tinycon": "^0.6.3",
+        "@types/tinycon": "^0.6.3",
-    "@typescript-eslint/eslint-plugin": "^5.59.2",
+        "@typescript-eslint/eslint-plugin": "^5.59.2",
-    "@typescript-eslint/parser": "^5.59.2",
+        "@typescript-eslint/parser": "^5.59.2",
-    "@vitejs/plugin-react": "^4.0.0",
+        "@vitejs/plugin-react": "^4.0.0",
-    "babel-plugin-macros": "^3.1.0",
+        "babel-plugin-macros": "^3.1.0",
-    "eslint": "^8.40.0",
+        "eslint": "^8.40.0",
-    "eslint-config-airbnb": "^19.0.4",
+        "eslint-config-airbnb": "^19.0.4",
-    "eslint-config-airbnb-typescript": "^17.0.0",
+        "eslint-config-airbnb-typescript": "^17.0.0",
-    "eslint-config-prettier": "^8.8.0",
+        "eslint-config-prettier": "^8.8.0",
-    "eslint-config-react-app": "^7.0.1",
+        "eslint-config-react-app": "^7.0.1",
-    "eslint-plugin-hooks": "^0.4.3",
+        "eslint-plugin-hooks": "^0.4.3",
-    "eslint-plugin-prettier": "^4.2.1",
+        "eslint-plugin-prettier": "^4.2.1",
-    "prettier": "^2.8.8",
+        "prettier": "^2.8.8",
-    "rollup-plugin-visualizer": "^5.9.0",
+        "rollup-plugin-visualizer": "^5.9.0",
-    "typescript": "^5.0.4",
+        "typescript": "^5.0.4",
-    "vite": "^4.3.5",
+        "vite": "^4.3.5",
-    "vite-plugin-eslint": "^1.8.1",
+        "vite-plugin-eslint": "^1.8.1",
-    "vite-tsconfig-paths": "^4.2.0",
+        "vite-tsconfig-paths": "^4.2.0",
-    "vitest": "^0.31.0",
+        "vitest": "^0.31.0",
-    "vitest-mock-extended": "^1.1.3"
+        "vitest-mock-extended": "^1.1.3"
-  }
+    }
 }

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)