[www] remove lodash (supabase#38240)

fsansalvadore · web-flow · commit 1f89c24b7aa7 · 2025-08-28T10:44:49.000+02:00
remove lodash from www
diff --git a/apps/www/components/Blog/BlogFilters.tsx b/apps/www/components/Blog/BlogFilters.tsx
@@ -1,6 +1,6 @@
 import { LOCAL_STORAGE_KEYS, useBreakpoint } from 'common'
 import { AnimatePresence, motion } from 'framer-motion'
-import { startCase } from 'lodash'
+import { startCase } from 'lib/helpers'
 import { useSearchParams } from 'next/navigation'
 import { useRouter } from 'next/router'
 import { useEffect, useState } from 'react'
diff --git a/apps/www/components/CustomerStories/CustomersFilters.tsx b/apps/www/components/CustomerStories/CustomersFilters.tsx
@@ -11,7 +11,7 @@ import {
   cn,
 } from 'ui'
 import { ChevronDown, X as CloseIcon } from 'lucide-react'
-import startCase from 'lodash/startCase'
+import { startCase } from 'lib/helpers'
 import { useBreakpoint } from 'common'
 
 interface Props {
diff --git a/apps/www/components/CustomerStories/CutomsersSliderDesktop.tsx b/apps/www/components/CustomerStories/CutomsersSliderDesktop.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { range } from 'lodash'
+import { range } from 'lib/helpers'
 import { cn } from 'ui'
 
 import { CompositionCol } from '.'
diff --git a/apps/www/components/Events/EventsFilters.tsx b/apps/www/components/Events/EventsFilters.tsx
@@ -1,6 +1,6 @@
 import { useBreakpoint } from 'common'
 import { AnimatePresence, motion } from 'framer-motion'
-import { startCase } from 'lodash'
+import { startCase } from 'lib/helpers'
 import { useSearchParams } from 'next/navigation'
 import { useRouter } from 'next/router'
 import Link from 'next/link'
diff --git a/apps/www/components/Globe.tsx b/apps/www/components/Globe.tsx
@@ -1,7 +1,7 @@
 import createGlobe from 'cobe'
 import { useCallback, useEffect, useRef } from 'react'
 import { useTheme } from 'next-themes'
-import { debounce } from 'lodash'
+import { debounce } from 'lib/helpers'
 
 const Globe = () => {
   const { resolvedTheme } = useTheme()
diff --git a/apps/www/components/LaunchWeek/12/LW12Background.tsx b/apps/www/components/LaunchWeek/12/LW12Background.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import { cn } from 'ui'
-import { range } from 'lodash'
+import { range } from 'lib/helpers'
 
 interface Props {
   className?: string
diff --git a/apps/www/components/LaunchWeek/13/Releases/LWStickyNav.tsx b/apps/www/components/LaunchWeek/13/Releases/LWStickyNav.tsx
@@ -13,7 +13,6 @@ import { isBrowser } from 'common'
 
 import SectionContainer from '~/components/Layouts/SectionContainer'
 import { ArrowUpRight, ChevronDown } from 'lucide-react'
-import { startCase } from 'lodash'
 
 const LWXStickyNav: FC = () => {
   const days = mainDays()
diff --git a/apps/www/components/Products/DataAPIsVisual.tsx b/apps/www/components/Products/DataAPIsVisual.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import Image from 'next/image'
-import { range } from 'lodash'
+import { range } from 'lib/helpers'
 import { cn } from 'ui'
 
 interface Props {
diff --git a/apps/www/components/Products/StorageVisual.tsx b/apps/www/components/Products/StorageVisual.tsx
@@ -1,4 +1,4 @@
-import { range } from 'lodash'
+import { range } from 'lib/helpers'
 import { File, Image, Video } from 'lucide-react'
 import { cn } from 'ui'
 
diff --git a/apps/www/components/Sections/TwitterSocialProof.tsx b/apps/www/components/Sections/TwitterSocialProof.tsx
@@ -2,7 +2,7 @@ import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { cn } from 'ui'
 import { TweetCard } from 'ui-patterns/TweetCard'
-import { range } from 'lodash'
+import { range } from 'lib/helpers'
 
 import Tweets from '~/data/tweets/Tweets.json'
 import { useBreakpoint } from 'common'
diff --git a/apps/www/components/logos.tsx b/apps/www/components/logos.tsx
@@ -1,5 +1,5 @@
 import { cn } from 'ui'
-import { range } from 'lodash'
+import { range } from 'lib/helpers'
 
 interface Props {
   showHeading?: boolean
diff --git a/apps/www/lib/helpers.tsx b/apps/www/lib/helpers.tsx
@@ -44,3 +44,162 @@ export const stripEmojis = (str: string) =>
     )
     .replace(/\s+/g, ' ')
     .trim()
+
+// Vanilla JavaScript implementations to replace lodash functions
+
+/**
+ * Creates an array of numbers (positive and/or negative) progressing from start up to, but not including, end.
+ * @param start The start of the range
+ * @param end The end of the range
+ * @param step The value to increment or decrement by
+ * @returns Returns the range of numbers
+ */
+export const range = (start: number, end?: number, step: number = 1): number[] => {
+  if (end === undefined) {
+    end = start
+    start = 0
+  }
+
+  const result: number[] = []
+  for (let i = start; step > 0 ? i < end : i > end; i += step) {
+    result.push(i)
+  }
+  return result
+}
+
+/**
+ * Converts string to start case.
+ * @param string The string to convert
+ * @returns Returns the start cased string
+ */
+export const startCase = (string: string): string => {
+  if (!string) return string
+
+  return string
+    .replace(/[-_\s]+/g, ' ')
+    .replace(/([a-z])([A-Z])/g, '$1 $2')
+    .replace(/\b\w/g, (char) => char.toUpperCase())
+    .trim()
+}
+
+/**
+ * Creates a debounced function that delays invoking func until after wait milliseconds have elapsed since the last time the debounced function was invoked.
+ * @param func The function to debounce
+ * @param wait The number of milliseconds to delay
+ * @param options The options object
+ * @returns Returns the new debounced function
+ */
+export const debounce = <T extends (...args: any[]) => any>(
+  func: T,
+  wait: number,
+  options: { leading?: boolean; trailing?: boolean } = {}
+): ((...args: Parameters<T>) => void) & {
+  cancel: () => void
+  flush: () => void | undefined
+  pending: () => boolean
+} => {
+  let timeoutId: ReturnType<typeof setTimeout> | undefined
+  let lastCallTime: number | undefined
+  let lastInvokeTime = 0
+
+  const { leading = false, trailing = true } = options
+
+  function invokeFunc(time: number, ...args: Parameters<T>) {
+    lastInvokeTime = time
+    func.apply(null, args)
+  }
+
+  function startTimer(pendingFunc: () => void, wait: number) {
+    return setTimeout(pendingFunc, wait)
+  }
+
+  function cancelTimer(id: ReturnType<typeof setTimeout>) {
+    clearTimeout(id)
+  }
+
+  function leadingEdge(time: number, ...args: Parameters<T>) {
+    lastInvokeTime = time
+    timeoutId = startTimer(timerExpired, wait)
+    return leading ? invokeFunc(time, ...args) : undefined
+  }
+
+  function remainingWait(time: number) {
+    const timeSinceLastCall = time - (lastCallTime || 0)
+    const timeSinceLastInvoke = time - lastInvokeTime
+    const timeWaiting = wait - timeSinceLastCall
+
+    return Math.min(timeWaiting, wait - timeSinceLastInvoke)
+  }
+
+  function shouldInvoke(time: number) {
+    const timeSinceLastCall = time - (lastCallTime || 0)
+    const timeSinceLastInvoke = time - lastInvokeTime
+
+    return (
+      lastCallTime === undefined ||
+      timeSinceLastCall >= wait ||
+      timeSinceLastCall < 0 ||
+      timeSinceLastInvoke >= wait
+    )
+  }
+
+  function timerExpired() {
+    const time = Date.now()
+    if (shouldInvoke(time)) {
+      return trailingEdge(time)
+    }
+    timeoutId = startTimer(timerExpired, remainingWait(time))
+  }
+
+  function trailingEdge(time: number) {
+    timeoutId = undefined
+
+    if (trailing) {
+      // For trailing edge, we don't have the original arguments, so we call without them
+      return invokeFunc(time, ...([] as any))
+    }
+  }
+
+  function cancel() {
+    if (timeoutId !== undefined) {
+      cancelTimer(timeoutId)
+    }
+    lastInvokeTime = 0
+    lastCallTime = undefined
+    timeoutId = undefined
+  }
+
+  function flush() {
+    return timeoutId === undefined ? undefined : trailingEdge(Date.now())
+  }
+
+  function pending() {
+    return timeoutId !== undefined
+  }
+
+  function debounced(this: any, ...args: Parameters<T>) {
+    const time = Date.now()
+    const isInvoking = shouldInvoke(time)
+
+    lastCallTime = time
+
+    if (isInvoking) {
+      if (timeoutId === undefined) {
+        return leadingEdge(lastCallTime, ...args)
+      }
+      if (trailing) {
+        timeoutId = startTimer(timerExpired, wait)
+        return invokeFunc(lastCallTime, ...args)
+      }
+    }
+    if (timeoutId === undefined) {
+      timeoutId = startTimer(timerExpired, wait)
+    }
+  }
+
+  debounced.cancel = cancel
+  debounced.flush = flush
+  debounced.pending = pending
+
+  return debounced
+}
diff --git a/apps/www/package.json b/apps/www/package.json
@@ -49,7 +49,6 @@
     "globby": "^13.2.2",
     "gray-matter": "^4.0.3",
     "icons": "workspace:*",
-    "lodash": "^4.0.0",
     "lucide-react": "*",
     "markdown-toc": "^1.2.0",
     "next": "catalog:",
@@ -87,7 +86,6 @@
     "@types/animejs": "^3.1.12",
     "@types/classnames": "^2.3.1",
     "@types/common-tags": "^1.8.4",
-    "@types/lodash": "^4.0.0",
     "@types/mdx-js__react": "^1.5.6",
     "@types/parse-numeric-range": "^0.0.1",
     "@types/react": "catalog:",
diff --git a/apps/www/pages/blog/categories/[category].tsx b/apps/www/pages/blog/categories/[category].tsx
@@ -1,7 +1,7 @@
 import { NextSeo } from 'next-seo'
 import { getSortedPosts, getAllCategories } from '~/lib/posts'
 import Link from 'next/link'
-import { startCase } from 'lodash'
+import { startCase } from 'lib/helpers'
 
 import DefaultLayout from '~/components/Layouts/Default'
 import BlogGridItem from '~/components/Blog/BlogGridItem'
diff --git a/apps/www/pages/blog/tags/[tag].tsx b/apps/www/pages/blog/tags/[tag].tsx
@@ -1,7 +1,7 @@
 import { NextSeo } from 'next-seo'
 import { getSortedPosts, getAllTags } from '~/lib/posts'
 import Link from 'next/link'
-import { startCase } from 'lodash'
+import { startCase } from 'lib/helpers'
 
 import DefaultLayout from '~/components/Layouts/Default'
 import BlogGridItem from '~/components/Blog/BlogGridItem'
diff --git a/apps/www/pages/events/[slug].tsx b/apps/www/pages/events/[slug].tsx
@@ -6,15 +6,14 @@ import {
 } from '@heroicons/react/solid'
 import dayjs from 'dayjs'
 import matter from 'gray-matter'
-import capitalize from 'lodash/capitalize'
 import { ChevronLeft, X as XIcon } from 'lucide-react'
 import { MDXRemote } from 'next-mdx-remote'
 import { NextSeo } from 'next-seo'
 import NextImage from 'next/image'
 import Link from 'next/link'
 
 import authors from 'lib/authors.json'
-import { isNotNullOrUndefined } from '~/lib/helpers'
+import { capitalize, isNotNullOrUndefined } from '~/lib/helpers'
 import mdxComponents from '~/lib/mdx/mdxComponents'
 import { mdxSerialize } from '~/lib/mdx/mdxSerialize'
 import { getAllPostSlugs, getPostdata } from '~/lib/posts'
diff --git a/apps/www/pages/features.tsx b/apps/www/pages/features.tsx
@@ -4,7 +4,7 @@ import { useRouter } from 'next/router'
 import { NextSeo } from 'next-seo'
 import { motion } from 'framer-motion'
 import { Search } from 'lucide-react'
-import debounce from 'lodash/debounce'
+import { debounce } from 'lib/helpers'
 
 import { Button, Checkbox, cn, Input } from 'ui'
 import DefaultLayout from '~/components/Layouts/Default'
diff --git a/apps/www/pages/partners/index.tsx b/apps/www/pages/partners/index.tsx
@@ -1,4 +1,4 @@
-import { range } from 'lodash'
+import { range } from 'lib/helpers'
 import { NextSeo } from 'next-seo'
 import Image from 'next/image'
 import Link from 'next/link'
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import { range } from 'lodash'`
	`1`	`+import { range } from 'lib/helpers'`
`2`	`2`	`import { File, Image, Video } from 'lucide-react'`
`3`	`3`	`import { cn } from 'ui'`
`4`	`4`