Feature/verbatim module syntax (#462)

* ♻️ Update linter to comply with verbatimModuleSyntax

* 🔧 Update vscode config

* 🔖 Add changeset

.changeset/gold-paws-compare.md

@@ -0,0 +1,6 @@
+---
+'usehooks-ts': patch
+'www': patch
+---
+
+Add eslint rules to comply with verbatimModuleSyntax to avoid side-effects

.vscode/settings.json

@@ -44,10 +44,6 @@
     "usehooks"
   ],
   "eslint.workingDirectories": [
-    {
-      "directory": "apps/web",
-      "changeProcessCWD": true
-    },
     {
       "directory": "apps/www",
       "changeProcessCWD": true
@@ -69,5 +65,11 @@
   },
   "[yaml]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[typescript]": {
+    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
+  },
+  "[typescriptreact]": {
+    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
   }
 }

apps/www/src/app/(docs)/react-hook/[slug]/page.tsx

@@ -1,13 +1,11 @@
-import { Metadata } from 'next'
+import type { Metadata } from 'next'
 import { notFound } from 'next/navigation'
 
 import { DocsPageHeader } from '@/components/docs-page-header'
 import { DocsPager } from '@/components/paper'
 import { Mdx } from '@/components/remote-mdx'
-import {
-  DashboardTableOfContents,
-  TableOfContents,
-} from '@/components/table-of-content'
+import type { TableOfContents } from '@/components/table-of-content'
+import { DashboardTableOfContents } from '@/components/table-of-content'
 import { H2 } from '@/components/ui/components'
 import { siteConfig } from '@/config/site'
 import { getPost, getPosts } from '@/lib/mdx'

apps/www/src/components/icons.tsx

@@ -1,3 +1,4 @@
+import type { LucideProps } from 'lucide-react'
 import {
   AlertTriangle,
   ArrowRight,
@@ -16,7 +17,6 @@ import {
   Laptop,
   Leaf,
   Loader2,
-  LucideProps,
   Moon,
   MoreVertical,
   Pizza,

apps/www/src/components/main-nav.tsx

@@ -9,7 +9,7 @@ import { Icons } from '@/components/icons'
 import { MobileNav } from '@/components/mobile-nav'
 import { siteConfig } from '@/config/site'
 import { cn } from '@/lib/utils'
-import { MainNavItem } from '@/types'
+import type { MainNavItem } from '@/types'
 
 interface MainNavProps {
   items?: MainNavItem[]

apps/www/src/components/mobile-nav.tsx

@@ -6,7 +6,7 @@ import { Icons } from '@/components/icons'
 import { siteConfig } from '@/config/site'
 import { useLockBody } from '@/hooks/use-lock-body'
 import { cn } from '@/lib/utils'
-import { MainNavItem } from '@/types'
+import type { MainNavItem } from '@/types'
 
 interface MobileNavProps {
   items: MainNavItem[]

apps/www/src/components/remote-mdx.tsx

@@ -2,7 +2,7 @@
 
 import 'highlight.js/styles/github-dark.css'
 
-import { SerializeOptions } from 'next-mdx-remote/dist/types'
+import type { SerializeOptions } from 'next-mdx-remote/dist/types'
 import { MDXRemote } from 'next-mdx-remote/rsc'
 import rehypeHighlight from 'rehype-highlight'
 import remarkCodeImport from 'remark-code-import'

apps/www/src/components/sidebar-nav.tsx

@@ -4,7 +4,7 @@ import Link from 'next/link'
 import { usePathname } from 'next/navigation'
 
 import { cn } from '@/lib/utils'
-import { SidebarNavItem } from '@/types'
+import type { SidebarNavItem } from '@/types'
 
 export interface DocsSidebarNavProps {
   items: SidebarNavItem[]

apps/www/src/components/theme-provider.tsx

@@ -3,7 +3,7 @@
 import * as React from 'react'
 
 import { ThemeProvider as NextThemesProvider } from 'next-themes'
-import { ThemeProviderProps } from 'next-themes/dist/types'
+import type { ThemeProviderProps } from 'next-themes/dist/types'
 
 export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
   return <NextThemesProvider {...props}>{children}</NextThemesProvider>

apps/www/src/components/ui/button.tsx

@@ -1,7 +1,8 @@
 import * as React from 'react'
 
 import { Slot } from '@radix-ui/react-slot'
-import { cva, type VariantProps } from 'class-variance-authority'
+import type { VariantProps } from 'class-variance-authority'
+import { cva } from 'class-variance-authority'
 
 import { cn } from '@/lib/utils'
 

apps/www/src/components/ui/components.tsx

@@ -1,9 +1,8 @@
 /* eslint-disable jsx-a11y/heading-has-content */
 import 'highlight.js/styles/github-dark.css'
 
-import { ComponentProps } from 'react'
-
 import Link from 'next/link'
+import type { ComponentProps } from 'react'
 
 import { cn } from '@/lib/utils'
 

apps/www/src/config/docs.ts

@@ -1,5 +1,5 @@
 import { getPosts } from '@/lib/mdx'
-import { DocsConfig, NavItem } from '@/types'
+import type { DocsConfig, NavItem } from '@/types'
 
 export const hookNavItems: NavItem[] = getPosts().map(post => ({
   title: post.name,

apps/www/src/config/marketing.ts

@@ -1,4 +1,4 @@
-import { MarketingConfig } from '@/types'
+import type { MarketingConfig } from '@/types'
 
 export const marketingConfig: MarketingConfig = {
   mainNav: [

apps/www/src/config/site.ts

@@ -1,4 +1,4 @@
-import { SiteConfig } from '@/types'
+import type { SiteConfig } from '@/types'
 
 export const siteConfig: SiteConfig = {
   name: 'usehooks-ts',

apps/www/src/lib/mdx.ts

@@ -1,7 +1,7 @@
 import fs from 'fs'
 import path from 'path'
 
-import { Option, Post } from '@/types'
+import type { Option, Post } from '@/types'
 
 const GENERATED_PATH = path.resolve(process.cwd(), 'generated')
 

apps/www/src/lib/utils.ts

@@ -1,4 +1,5 @@
-import { ClassValue, clsx } from 'clsx'
+import type { ClassValue } from 'clsx'
+import { clsx } from 'clsx'
 import { twMerge } from 'tailwind-merge'
 
 export function cn(...inputs: ClassValue[]) {

packages/eslint-config-custom/.eslintrc.js

@@ -39,7 +39,7 @@ module.exports = {
   },
   rules: {
     // Format
-    'prettier/prettier': 'warn',
+    'prettier/prettier': 'error',
 
     // React
     'react/prop-types': 'off',
@@ -50,9 +50,14 @@ module.exports = {
     'sort-imports': 'off',
     'import/order': 'off',
     'import/no-cycle': 'error',
-    'simple-import-sort/exports': 'warn',
+    'import/no-duplicates': 'error',
+    'import/consistent-type-specifier-style': ['error', 'prefer-top-level'],
+    '@typescript-eslint/consistent-type-exports': 'error',
+    '@typescript-eslint/consistent-type-imports': 'error',
+    '@typescript-eslint/no-import-type-side-effects': 'error',
+    'simple-import-sort/exports': 'error',
     'simple-import-sort/imports': [
-      'warn',
+      'error',
       {
         groups: [
           ['^\\u0000'], // side effect (E.g."import "normalize.css"")
@@ -66,23 +71,23 @@ module.exports = {
     // We should absolutely avoid using ts-ignore, but it"s not always possible.
     // particular when a dependencies types are incorrect.
     '@typescript-eslint/ban-ts-comment': [
-      'warn',
+      'error',
       { 'ts-ignore': 'allow-with-description' },
     ],
 
     // Allow unused variables that start with an underscore.
     '@typescript-eslint/no-unused-vars': [
-      'warn',
+      'error',
       {
         argsIgnorePattern: '^_',
         ignoreRestSiblings: true,
       },
     ],
 
     // Disable some TypeScript rules
-    '@typescript-eslint/explicit-module-boundary-types': 'off',
-    '@typescript-eslint/consistent-type-definitions': 'off',
-    '@typescript-eslint/no-unnecessary-condition': 'off',
+    '@typescript-eslint/explicit-module-boundary-types': 'off', // Too noisy
+    '@typescript-eslint/consistent-type-definitions': 'off', // Will come in v3
+    '@typescript-eslint/no-unnecessary-condition': 'off', // TODO: Enable it
     '@typescript-eslint/prefer-ts-expect-error': 'off',
   },
   overrides: [

packages/usehooks-ts/.eslintrc.js

@@ -4,19 +4,15 @@ module.exports = {
     // Track tree-shaking potential error in the lib
     {
       files: ['./src/**/!(*.test|*.spec).ts'],
-      plugins: ['tree-shaking'],
+      extends: ['plugin:jsdoc/recommended'],
+      plugins: ['tree-shaking', 'jsdoc'],
       rules: {
-        'tree-shaking/no-side-effects-in-initialization': 2,
+        'tree-shaking/no-side-effects-in-initialization': 'error',
       },
     },
   ],
   ignorePatterns: ['./dist', './node_modules', './turbo'],
   overrides: [
-    {
-      files: ['*.ts'],
-      extends: ['plugin:jsdoc/recommended'],
-      plugins: ['jsdoc'],
-    },
     {
       files: ['*.test.ts'],
       rules: {

packages/usehooks-ts/src/useBoolean/useBoolean.ts

@@ -1,4 +1,6 @@
-import { Dispatch, SetStateAction, useCallback, useState } from 'react'
+import { useCallback, useState } from 'react'
+
+import type { Dispatch, SetStateAction } from 'react'
 
 interface UseBooleanOutput {
   value: boolean

packages/usehooks-ts/src/useCountdown/useCountdown.demo.tsx

@@ -1,4 +1,6 @@
-import { ChangeEvent, useState } from 'react'
+import { useState } from 'react'
+
+import type { ChangeEvent } from 'react'
 
 import { useCountdown } from './useCountdown'
 

packages/usehooks-ts/src/useCounter/useCounter.ts

@@ -1,4 +1,6 @@
-import { Dispatch, SetStateAction, useState } from 'react'
+import { useState } from 'react'
+
+import type { Dispatch, SetStateAction } from 'react'
 
 interface UseCounterOutput {
   count: number

packages/usehooks-ts/src/useDebounce/useDebounce.demo.tsx

@@ -1,4 +1,6 @@
-import { ChangeEvent, useEffect, useState } from 'react'
+import { useEffect, useState } from 'react'
+
+import type { ChangeEvent } from 'react'
 
 import { useDebounce } from './useDebounce'
 

packages/usehooks-ts/src/useDebounceValue/useDebounceValue.ts

@@ -1,6 +1,7 @@
 import { useRef, useState } from 'react'
 
-import { DebouncedState, useDebounceCallback } from '../useDebounceCallback'
+import type { DebouncedState } from '../useDebounceCallback'
+import { useDebounceCallback } from '../useDebounceCallback'
 
 /**
  * Returns a debounced version of the provided value, along with a function to update it.

packages/usehooks-ts/src/useEffectOnce/useEffectOnce.ts

@@ -1,4 +1,6 @@
-import { EffectCallback, useEffect } from 'react'
+import { useEffect } from 'react'
+
+import type { EffectCallback } from 'react'
 
 /**
  * A hook that runs an effect only once (at mount).

packages/usehooks-ts/src/useEventListener/useEventListener.test.ts

@@ -1,5 +1,4 @@
-import { fireEvent } from '@testing-library/react'
-import { renderHook } from '@testing-library/react'
+import { fireEvent, renderHook } from '@testing-library/react'
 
 import { useEventListener } from './useEventListener'
 

packages/usehooks-ts/src/useEventListener/useEventListener.ts

@@ -1,4 +1,6 @@
-import { RefObject, useEffect, useRef } from 'react'
+import { useEffect, useRef } from 'react'
+
+import type { RefObject } from 'react'
 
 import { useIsomorphicLayoutEffect } from '../useIsomorphicLayoutEffect/useIsomorphicLayoutEffect'
 

packages/usehooks-ts/src/useFetch/useFetch.demo.tsx

@@ -14,5 +14,5 @@ export default function Component() {
 
   if (error) return <p>There is an error.</p>
   if (!data) return <p>Loading...</p>
-  return <p>{data[0].title}</p>
+  return <p>{data[0]?.title}</p>
 }

packages/usehooks-ts/src/useFetch/useFetch.ts

@@ -83,8 +83,9 @@ export function useFetch<T = unknown>(
       dispatch({ type: 'loading' })
 
       // If a cache exists for this url, return it
-      if (cache.current[url]) {
-        dispatch({ type: 'fetched', payload: cache.current[url] })
+      const currentCache = cache.current[url]
+      if (currentCache) {
+        dispatch({ type: 'fetched', payload: currentCache })
         return
       }
 

packages/usehooks-ts/src/useHover/useHover.test.ts

@@ -1,5 +1,4 @@
-import { fireEvent } from '@testing-library/react'
-import { act, renderHook } from '@testing-library/react'
+import { act, fireEvent, renderHook } from '@testing-library/react'
 
 import { useHover } from './useHover'
 

packages/usehooks-ts/src/useHover/useHover.ts

@@ -1,4 +1,6 @@
-import { RefObject, useState } from 'react'
+import { useState } from 'react'
+
+import type { RefObject } from 'react'
 
 import { useEventListener } from '../useEventListener'
 

packages/usehooks-ts/src/useImageOnLoad/useImageOnLoad.demo.tsx

@@ -1,4 +1,4 @@
-import { CSSProperties } from 'react'
+import type { CSSProperties } from 'react'
 
 import { useImageOnLoad } from './useImageOnLoad'
 

packages/usehooks-ts/src/useImageOnLoad/useImageOnLoad.ts

@@ -1,4 +1,6 @@
-import { CSSProperties, useState } from 'react'
+import { useState } from 'react'
+
+import type { CSSProperties } from 'react'
 
 interface ImageStyle {
   thumbnail: CSSProperties

packages/usehooks-ts/src/useIntersectionObserver/useIntersectionObserver.ts

@@ -1,4 +1,6 @@
-import { RefObject, useEffect, useState } from 'react'
+import { useEffect, useState } from 'react'
+
+import type { RefObject } from 'react'
 
 /**
  * Represents the options for configuring the Intersection Observer.

packages/usehooks-ts/src/useInterval/useInterval.demo.tsx

@@ -1,4 +1,6 @@
-import { ChangeEvent, useState } from 'react'
+import { useState } from 'react'
+
+import type { ChangeEvent } from 'react'
 
 import { useInterval } from './useInterval'
 

packages/usehooks-ts/src/useLocalStorage/useLocalStorage.ts

@@ -1,10 +1,6 @@
-import {
-  Dispatch,
-  SetStateAction,
-  useCallback,
-  useEffect,
-  useState,
-} from 'react'
+import { useCallback, useEffect, useState } from 'react'
+
+import type { Dispatch, SetStateAction } from 'react'
 
 import { useEventCallback } from '../useEventCallback'
 import { useEventListener } from '../useEventListener'

packages/usehooks-ts/src/useLockedBody/useLockedBody.demo.tsx

@@ -1,4 +1,6 @@
-import { CSSProperties, useState } from 'react'
+import { useState } from 'react'
+
+import type { CSSProperties } from 'react'
 
 import { useLockedBody } from './useLockedBody'
 

packages/usehooks-ts/src/useMap/useMap.demo.tsx

@@ -1,6 +1,7 @@
 import { Fragment } from 'react'
 
-import { MapOrEntries, useMap } from './useMap'
+import type { MapOrEntries } from './useMap'
+import { useMap } from './useMap'
 
 const initialValues: MapOrEntries<string, string> = [['key', '🆕']]
 const otherValues: MapOrEntries<string, string> = [