🔥 Remove deprecated hooks and co (#503)

* Remove @deprecated hooks' function overload keeping the latest signature only * Remove @deprecated hooks only keeping updated version of their .md doc files * Remove deprecated hook exclusions in scripts + little clean up * website: allow hook without code nor demo wheneven there is a .md file * 🔖 Add changeset
juliencrn · Mar 5, 2024 · f185e56 · f185e56
1 parent 88334ba
commit f185e56
Show file tree

Hide file tree

Showing 56 changed files with 111 additions and 1,453 deletions.
diff --git a/.changeset/clean-lies-laugh.md b/.changeset/clean-lies-laugh.md
@@ -0,0 +1,6 @@
+---
+"usehooks-ts": major
+"www": major
+---
+
+Remove previously deprecated hooks and hooks' signatures (#503)
diff --git a/apps/www/src/app/(docs)/react-hook/[slug]/page.tsx b/apps/www/src/app/(docs)/react-hook/[slug]/page.tsx
@@ -5,7 +5,7 @@ import { CarbonAds } from '@/components/carbon-ads'
 import { DocsPageHeader } from '@/components/docs-page-header'
 import { DocsPager } from '@/components/paper'
 import { Mdx } from '@/components/remote-mdx'
-import type { TableOfContents } from '@/components/table-of-content'
+import type { TocItem } from '@/components/table-of-content'
 import { DashboardTableOfContents } from '@/components/table-of-content'
 import { H2 } from '@/components/ui/components'
 import { siteConfig } from '@/config/site'
@@ -60,33 +60,43 @@ const PostLayout = ({ params }: { params: { slug: string } }) => {
     notFound()
   }
 
-  const toc: TableOfContents = {
-    items: [
-      { title: 'Introduction', url: '#introduction' },
-      { title: 'Example', url: '#example' },
-      { title: 'Hook', url: '#hook' },
-    ],
+  const tocItems: TocItem[] = [{ title: 'Introduction', url: '#introduction' }]
+  if (post?.demo) {
+    tocItems.push({ title: 'Example', url: '#example' })
+  }
+  if (post?.hook) {
+    tocItems.push({ title: 'Hook', url: '#hook' })
   }
 
   return (
-    <main className="relative py-6 lg:gap-10 lg:py-10 xl:grid xl:grid-cols-[1fr_300px]">
+    <main className="relative py-6 lg:gap-10 lg:py-10 xl:grid xl:grid-cols-[1fr_300px] xl:grid-rows-[auto_1fr_auto]">
       <div className="mx-auto w-full min-w-0 grid">
         <DocsPageHeader
           id="introduction"
           className="scroll-m-20"
           heading={post.name}
         />
         <Mdx source={post.docs} />
-        <H2 id="example">Example</H2>
-        <Mdx source={post.demo} />
-        <H2 id="hook">Hook</H2>
-        <Mdx source={post.hook} />
+
+        {post?.demo && (
+          <>
+            <H2 id="example">Example</H2>
+            <Mdx source={post.demo} />
+          </>
+        )}
+        {post?.hook && (
+          <>
+            <H2 id="hook">Hook</H2>
+            <Mdx source={post.hook} />
+          </>
+        )}
+
         <hr className="my-4 md:my-6" />
         <DocsPager slug={post.slug} />
       </div>
       <aside className="hidden text-sm xl:block">
         <div className="sticky top-16 -mt-10 max-h-[calc(var(--vh)-4rem)] overflow-y-auto pt-10">
-          <DashboardTableOfContents toc={toc} />
+          <DashboardTableOfContents toc={{ items: tocItems }} />
 
           <div className="my-10">
             <CarbonAds />

diff --git a/apps/www/src/components/table-of-content.tsx b/apps/www/src/components/table-of-content.tsx
@@ -6,19 +6,20 @@ import { useIsMounted } from 'usehooks-ts'
 
 import { cn } from '@/lib/utils'
 
-interface Item {
+type Item = {
   title: string
   url: string
   items?: Item[]
 }
 
-interface Items {
+type Items = {
   items?: Item[]
 }
 
 export type TableOfContents = Items
+export type TocItem = Item
 
-interface TocProps {
+type TocProps = {
   toc: TableOfContents
 }
 
@@ -49,6 +50,7 @@ export function DashboardTableOfContents({ toc }: TocProps) {
   ) : null
 }
 
+// TODO: use useIntersectionObserver from usehooks-ts
 function useActiveItem(itemIds: (string | undefined)[]) {
   const [activeId, setActiveId] = React.useState<string>('')
 

diff --git a/apps/www/src/lib/mdx.ts b/apps/www/src/lib/mdx.ts
@@ -23,7 +23,6 @@ const readFile = (pathname: string): Option<Buffer> => {
   try {
     return fs.readFileSync(pathname)
   } catch (error) {
-    console.warn(`Document not found: ${pathname}`)
     return null
   }
 }
@@ -40,7 +39,7 @@ export const getPosts = (): Post[] => {
       const demo = getDemo(name)
       return { name, slug, href, docs, hook, demo }
     })
-    .filter(post => post.docs && post.hook && post.demo)
+    .filter(post => Boolean(post.docs))
     .sort((a, b) => {
       if (a.name < b.name) return -1
       if (a.name > b.name) return 1

diff --git a/apps/www/src/types/index.d.ts b/apps/www/src/types/index.d.ts
@@ -49,8 +49,8 @@ export interface Post {
   slug: string // use-hook
   href: string // /react-hook/use-hook
   docs: Buffer // markdown raw
-  hook: Buffer // markdown raw
-  demo: Buffer // markdown raw
+  hook?: Buffer // markdown raw
+  demo?: Buffer // markdown raw
 }
 
 export type Option<T> = T | null
diff --git a/packages/usehooks-ts/src/index.ts b/packages/usehooks-ts/src/index.ts
@@ -4,25 +4,18 @@ export * from './useCopyToClipboard'
 export * from './useCountdown'
 export * from './useCounter'
 export * from './useDarkMode'
-export * from './useDebounce'
 export * from './useDebounceCallback'
 export * from './useDebounceValue'
 export * from './useDocumentTitle'
-export * from './useEffectOnce'
-export * from './useElementSize'
 export * from './useEventCallback'
 export * from './useEventListener'
-export * from './useFetch'
 export * from './useHover'
-export * from './useImageOnLoad'
 export * from './useIntersectionObserver'
 export * from './useInterval'
 export * from './useIsClient'
-export * from './useIsFirstRender'
 export * from './useIsMounted'
 export * from './useIsomorphicLayoutEffect'
 export * from './useLocalStorage'
-export * from './useLockedBody'
 export * from './useMap'
 export * from './useMediaQuery'
 export * from './useOnClickOutside'
@@ -32,11 +25,9 @@ export * from './useScreen'
 export * from './useScript'
 export * from './useScrollLock'
 export * from './useSessionStorage'
-export * from './useSsr'
 export * from './useStep'
 export * from './useTernaryDarkMode'
 export * from './useTimeout'
 export * from './useToggle'
 export * from './useUnmount'
-export * from './useUpdateEffect'
 export * from './useWindowSize'
diff --git a/packages/usehooks-ts/src/useCountdown/useCountdown.ts b/packages/usehooks-ts/src/useCountdown/useCountdown.ts
@@ -4,20 +4,6 @@ import { useBoolean } from '../useBoolean'
 import { useCounter } from '../useCounter'
 import { useInterval } from '../useInterval'
 
-// Old interface IN & OUT
-interface LegacyCountdownOptions {
-  seconds: number
-  interval: number
-  isIncrement?: boolean
-}
-
-interface LegacyCountdownControllers {
-  start: () => void
-  stop: () => void
-  reset: () => void
-}
-
-// New interface IN & OUT
 interface CountdownOptions {
   countStart: number
   intervalMs?: number
@@ -48,67 +34,12 @@ interface CountdownControllers {
  *   isIncrement: false,
  * });
  */
-export function useCountdown(
-  countdownOptions: CountdownOptions,
-): [number, CountdownControllers]
-/**
- * A hook to manage countdown - Legacy interface
- * @overload
- * @param  {LegacyCountdownOptions} countdownOptions the countdown's options.
- * @param  {number} countdownOptions.seconds the countdown's number, generally time seconds.
- * @param  {number} countdownOptions.interval the countdown's interval, milliseconds.
- * @param  {?boolean} [countdownOptions.isIncrement] `false` by default, determine the countdown is increment, otherwise is decrement.
- * @returns {[number, LegacyCountdownControllers]} An array containing the countdown's count and its controllers.
- * @deprecated new useCountdown interface is already available (see [Documentation](https://usehooks-ts.com/react-hook/use-countdown)), the old version will retire on usehooks-ts@3.
- * @see [Documentation](https://usehooks-ts.com/react-hook/use-countdown)
- * @example
- * const [counter, { start, stop, reset }] = useCountdown({
- *   seconds: 10,
- *   interval: 1000,
- *   isIncrement: false,
- * });
- */
-export function useCountdown(
-  countdownOptions: LegacyCountdownOptions,
-): [number, LegacyCountdownControllers]
-/**
- * A hook to manage countdown
- * @param  {CountdownOptions | LegacyCountdownOptions} countdownOptions the countdown's options.
- * @returns {[number, CountdownControllers | LegacyCountdownControllers]} An array containing the countdown's count and its controllers.
- * @see [Documentation](https://usehooks-ts.com/react-hook/use-countdown)
- */
-export function useCountdown(
-  countdownOptions: LegacyCountdownOptions | CountdownOptions,
-): [number, LegacyCountdownControllers | CountdownControllers] {
-  /**
-   * Use to determine the the API call is a deprecated version.
-   */
-  let isDeprecated = false
-
-  let countStart,
-    intervalMs,
-    isIncrement: boolean | undefined,
-    countStop: number | undefined
-
-  if ('seconds' in countdownOptions) {
-    console.warn(
-      '[useCountdown:DEPRECATED] new interface is already available (see https://usehooks-ts.com/react-hook/use-countdown), the old version will retire on usehooks-ts@3.',
-    )
-
-    isDeprecated = true
-    countStart = countdownOptions.seconds
-    intervalMs = countdownOptions.interval
-    isIncrement = countdownOptions.isIncrement
-  } else {
-    // eslint-disable-next-line @typescript-eslint/no-extra-semi, no-extra-semi
-    ;({ countStart, intervalMs, isIncrement, countStop } = countdownOptions)
-  }
-
-  // default values
-  intervalMs = intervalMs ?? 1000
-  isIncrement = isIncrement ?? false
-  countStop = countStop ?? 0
-
+export function useCountdown({
+  countStart,
+  countStop = 0,
+  intervalMs = 1000,
+  isIncrement = false,
+}: CountdownOptions): [number, CountdownControllers] {
   const {
     count,
     increment,
@@ -151,21 +82,5 @@ export function useCountdown(
 
   useInterval(countdownCallback, isCountdownRunning ? intervalMs : null)
 
-  return isDeprecated
-    ? [
-        count,
-        {
-          start: startCountdown,
-          stop: stopCountdown,
-          reset: resetCountdown,
-        } as LegacyCountdownControllers,
-      ]
-    : [
-        count,
-        {
-          startCountdown,
-          stopCountdown,
-          resetCountdown,
-        } as CountdownControllers,
-      ]
+  return [count, { startCountdown, stopCountdown, resetCountdown }]
 }