Merge branch 'react/fix/useErrorBoundary-to-stable' into advise/useEr…

…rorBoundaryProps

.changeset/good-ads-wait.md

@@ -0,0 +1,6 @@
+---
+"@suspensive/react-query": patch
+"@suspensive/react": patch
+---
+
+chore(eslint): add no-duplicates, consistent-type-imports

.vscode/settings.json

@@ -1,5 +1,8 @@
 {
   "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": true
+  },
   "eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact"],
   "typescript.tsdk": "node_modules/typescript/lib",
   "cSpell.words": ["packlint", "codecov", "tsup"]

configs/eslint-config-js/javascript.js

@@ -4,13 +4,14 @@ module.exports = {
   extends: ['plugin:import/recommended', './noimport.js'],
   plugins: ['import'],
   rules: {
+    'sort-imports': ['error', { ignoreDeclarationSort: true }],
+    'import/no-duplicates': 'error',
     'import/order': [
       'warn',
       {
         groups: ['builtin', 'external', 'internal', ['parent', 'sibling'], 'index'],
         alphabetize: { order: 'asc', caseInsensitive: true },
       },
     ],
-    'sort-imports': ['error', { ignoreDeclarationSort: true }],
   },
 }

configs/eslint-config-ts/noimport.js

@@ -11,6 +11,7 @@ module.exports = {
   rules: {
     '@typescript-eslint/no-empty-function': ['off'],
     '@typescript-eslint/no-unused-vars': 'error',
+    '@typescript-eslint/consistent-type-imports': 'error',
     'jsdoc/require-description': 'warn',
     'jsdoc/require-returns': 'off',
     'jsdoc/require-jsdoc': 'off',

configs/eslint-config-ts/typescript.js

@@ -16,6 +16,7 @@ module.exports = {
   ],
   rules: {
     'sort-imports': ['error', { ignoreDeclarationSort: true }],
+    'import/no-duplicates': 'error',
     'import/order': [
       'error',
       {

configs/tsup/src/index.ts

@@ -1,4 +1,4 @@
-import { Options } from 'tsup'
+import type { Options } from 'tsup'
 
 export const options: Options = {
   banner: { js: '"use client"' },

configs/vitest/src/index.ts

@@ -1,6 +1,6 @@
 import fs from 'fs'
 import path, { dirname } from 'path'
-import { UserConfig } from 'vitest/config'
+import type { UserConfig } from 'vitest/config'
 
 export const forPackage = (userConfig?: UserConfig): UserConfig => {
   const packageJsonPath = path.resolve(dirname('.'), 'package.json')

packages/react-query/src/QueryAsyncBoundary.tsx

@@ -1,6 +1,7 @@
 import { AsyncBoundary } from '@suspensive/react'
 import { useQueryErrorResetBoundary } from '@tanstack/react-query'
-import { ComponentPropsWithoutRef, ComponentRef, forwardRef } from 'react'
+import type { ComponentPropsWithoutRef, ComponentRef } from 'react'
+import { forwardRef } from 'react'
 
 const BaseQueryAsyncBoundary = forwardRef<
   ComponentRef<typeof AsyncBoundary>,

packages/react-query/src/QueryErrorBoundary.tsx

@@ -1,6 +1,7 @@
 import { ErrorBoundary } from '@suspensive/react'
 import { useQueryErrorResetBoundary } from '@tanstack/react-query'
-import { ComponentPropsWithoutRef, ComponentRef, forwardRef } from 'react'
+import type { ComponentPropsWithoutRef, ComponentRef } from 'react'
+import { forwardRef } from 'react'
 
 /**
  * This component wrapping QueryErrorResetBoundary of @tanstack/react-query with @suspensive/react's ErrorBoundary.

packages/react-query/src/useSuspenseInfiniteQuery.test-d.ts

@@ -1,5 +1,5 @@
 /* eslint-disable react-hooks/rules-of-hooks */
-import { InfiniteData } from '@tanstack/react-query'
+import type { InfiniteData } from '@tanstack/react-query'
 import { expectError, expectType } from 'tsd'
 import { useSuspenseInfiniteQuery } from '../dist'
 

packages/react-query/src/useSuspenseInfiniteQuery.ts

@@ -1,12 +1,11 @@
-import {
+import type {
   InfiniteData,
   QueryFunction,
   QueryKey,
   UseInfiniteQueryOptions,
   UseInfiniteQueryResult,
-  parseQueryArgs,
-  useInfiniteQuery,
 } from '@tanstack/react-query'
+import { parseQueryArgs, useInfiniteQuery } from '@tanstack/react-query'
 
 export type BaseUseSuspenseInfiniteQueryResult<TData = unknown> = Omit<
   UseInfiniteQueryResult<TData>,

packages/react-query/src/useSuspenseQueries.ts

@@ -1,5 +1,6 @@
-import { QueryFunction, QueryKey, UseQueryOptions, UseQueryResult, useQueries } from '@tanstack/react-query'
-import { UseSuspenseQueryResultOnLoading, UseSuspenseQueryResultOnSuccess } from './useSuspenseQuery'
+import type { QueryFunction, QueryKey, UseQueryOptions, UseQueryResult } from '@tanstack/react-query'
+import { useQueries } from '@tanstack/react-query'
+import type { UseSuspenseQueryResultOnLoading, UseSuspenseQueryResultOnSuccess } from './useSuspenseQuery'
 
 // Avoid TS depth-limit error in case of large array literal
 // eslint-disable-next-line @typescript-eslint/naming-convention

packages/react-query/src/useSuspenseQuery.ts

@@ -1,11 +1,5 @@
-import {
-  QueryFunction,
-  QueryKey,
-  UseQueryOptions,
-  UseQueryResult,
-  parseQueryArgs,
-  useQuery,
-} from '@tanstack/react-query'
+import type { QueryFunction, QueryKey, UseQueryOptions, UseQueryResult } from '@tanstack/react-query'
+import { parseQueryArgs, useQuery } from '@tanstack/react-query'
 
 export interface BaseUseSuspenseQueryResult<TData = unknown>
   extends Omit<UseQueryResult<TData>, 'error' | 'isError' | 'isFetching'> {

packages/react/src/AsyncBoundary.spec.tsx

@@ -1,5 +1,6 @@
 import { act, render, waitFor } from '@testing-library/react'
-import { ComponentProps, createElement } from 'react'
+import type { ComponentProps } from 'react'
+import { createElement } from 'react'
 import { createRoot } from 'react-dom/client'
 import { vi } from 'vitest'
 import { ERROR_MESSAGE, FALLBACK, MS_100, Suspend, TEXT, ThrowError } from './utils/toTest'

packages/react/src/AsyncBoundary.tsx

@@ -1,7 +1,8 @@
-import { ComponentProps, ComponentRef, ComponentType, SuspenseProps, forwardRef } from 'react'
+import type { ComponentProps, ComponentRef, ComponentType, SuspenseProps } from 'react'
+import { forwardRef } from 'react'
 import { ErrorBoundary } from './ErrorBoundary'
 import { Suspense } from './Suspense'
-import { PropsWithoutChildren } from './types'
+import type { PropsWithoutChildren } from './types'
 
 type ErrorBoundaryProps = ComponentProps<typeof ErrorBoundary>
 type AsyncBoundaryProps = Omit<SuspenseProps, 'fallback'> &

packages/react/src/Delay.tsx

@@ -1,6 +1,7 @@
-import { ComponentProps, ComponentType, PropsWithChildren, createContext, useContext, useState } from 'react'
+import type { ComponentProps, ComponentType, PropsWithChildren } from 'react'
+import { createContext, useContext, useState } from 'react'
 import { useSetTimeout } from './hooks'
-import { PropsWithoutChildren } from './types'
+import type { PropsWithoutChildren } from './types'
 
 type DelayProps = PropsWithChildren<{
   ms?: number

packages/react/src/ErrorBoundary.spec.tsx

@@ -1,5 +1,6 @@
 import { act, render } from '@testing-library/react'
-import { ComponentProps, ComponentRef, createElement, createRef } from 'react'
+import type { ComponentProps, ComponentRef } from 'react'
+import { createElement, createRef } from 'react'
 import { createRoot } from 'react-dom/client'
 import { vi } from 'vitest'
 import { useSetTimeout } from './hooks'

packages/react/src/ErrorBoundary.tsx

@@ -1,11 +1,6 @@
+import type { ComponentProps, ComponentType, ErrorInfo, FunctionComponent, PropsWithChildren, ReactNode } from 'react'
 import {
   Component,
-  ComponentProps,
-  ComponentType,
-  ErrorInfo,
-  FunctionComponent,
-  PropsWithChildren,
-  ReactNode,
   createContext,
   createElement,
   forwardRef,
@@ -16,9 +11,8 @@ import {
   useState,
 } from 'react'
 import { ErrorBoundaryGroupContext } from './ErrorBoundaryGroup'
-import { PropsWithoutChildren } from './types'
-import { hasResetKeysChanged } from './utils'
-import { assert } from './utils'
+import type { PropsWithoutChildren } from './types'
+import { assert, hasResetKeysChanged } from './utils'
 
 export type ErrorBoundaryFallbackProps<TError extends Error = Error> = {
   /**

packages/react/src/ErrorBoundaryGroup.tsx

@@ -1,6 +1,7 @@
-import { ComponentProps, ComponentType, PropsWithChildren, createContext, useContext, useEffect, useMemo } from 'react'
+import type { ComponentProps, ComponentType, PropsWithChildren } from 'react'
+import { createContext, useContext, useEffect, useMemo } from 'react'
 import { useIsChanged, useKey } from './hooks'
-import { PropsWithoutChildren } from './types'
+import type { PropsWithoutChildren } from './types'
 import { assert } from './utils'
 
 export const ErrorBoundaryGroupContext = createContext<{ reset: () => void; resetKey: number } | undefined>(undefined)

packages/react/src/Suspense.tsx

@@ -1,14 +1,7 @@
-import {
-  ComponentProps,
-  ComponentType,
-  ReactNode,
-  Suspense as ReactSuspense,
-  SuspenseProps,
-  createContext,
-  useContext,
-} from 'react'
+import type { ComponentProps, ComponentType, ReactNode, SuspenseProps } from 'react'
+import { Suspense as ReactSuspense, createContext, useContext } from 'react'
 import { useIsMounted } from './hooks'
-import { PropsWithoutChildren } from './types'
+import type { PropsWithoutChildren } from './types'
 
 export const SuspenseContext = createContext<PropsWithoutChildren<SuspenseProps>>({ fallback: undefined })
 const useFallbackWithContext = (fallback: ReactNode) => {

packages/react/src/SuspensiveProvider.tsx

@@ -1,4 +1,5 @@
-import { ContextType, PropsWithChildren, useMemo } from 'react'
+import type { ContextType, PropsWithChildren } from 'react'
+import { useMemo } from 'react'
 import { DelayContext } from './Delay'
 import { SuspenseContext } from './Suspense'
 

packages/react/src/experimental/Await.tsx

@@ -1,6 +1,7 @@
-import { FunctionComponent, createElement, useMemo } from 'react'
+import type { FunctionComponent } from 'react'
+import { createElement, useMemo } from 'react'
 import { useSyncExternalStore } from 'use-sync-external-store/shim'
-import { Tuple } from '../types'
+import type { Tuple } from '../types'
 import { hashKey } from '../utils'
 
 export type Key = Tuple

packages/react/src/types/PropsWithoutChildren.ts

@@ -1,3 +1,3 @@
-import { ComponentProps, ComponentType } from 'react'
+import type { ComponentProps, ComponentType } from 'react'
 
 export type PropsWithoutChildren<TProps extends ComponentProps<ComponentType>> = Omit<TProps, 'children'>

packages/react/src/utils/hashKey.ts

@@ -1,5 +1,6 @@
-import { Key } from '../experimental/Await'
-import { PlainObject, isPlainObject } from './isPlainObject'
+import type { Key } from '../experimental/Await'
+import type { PlainObject } from './isPlainObject'
+import { isPlainObject } from './isPlainObject'
 
 export const hashKey = (key: Key) =>
   JSON.stringify(key, (_, val) =>

packages/react/src/utils/toTest.tsx

@@ -1,4 +1,5 @@
-import { PropsWithChildren, ReactNode, useState } from 'react'
+import type { PropsWithChildren, ReactNode } from 'react'
+import { useState } from 'react'
 import { useSetTimeout } from '../hooks'
 
 const suspendIsNeed = { current: true }

websites/visualization/src/app/CommonLayout.tsx

@@ -4,7 +4,7 @@
 import { Flex } from '@jsxcss/emotion'
 import Image from 'next/image'
 import Link from 'next/link'
-import { PropsWithChildren } from 'react'
+import type { PropsWithChildren } from 'react'
 
 export const CommonLayout = ({ children }: PropsWithChildren) => {
   return (

websites/visualization/src/app/layout.tsx

@@ -1,5 +1,5 @@
 import './global.css'
-import { Metadata } from 'next'
+import type { Metadata } from 'next'
 import { CommonLayout } from './CommonLayout'
 import { Providers } from './providers'
 

websites/visualization/src/app/providers.tsx

@@ -5,7 +5,7 @@ import { MediaQueryProvider } from '@jsxcss/emotion'
 import { Suspensive, SuspensiveProvider } from '@suspensive/react'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
-import { PropsWithChildren } from 'react'
+import type { PropsWithChildren } from 'react'
 import { Spinner } from '~/components/uis'
 
 const queryClient = new QueryClient({

websites/visualization/src/app/react-query/playground/components/suspensive.tsx

@@ -1,7 +1,8 @@
 import { Suspense } from '@suspensive/react'
 import { useSuspenseQueries, useSuspenseQuery } from '@suspensive/react-query'
 import { useEffect, useRef, useState } from 'react'
-import { Post, albums, posts, todos } from './api'
+import type { Post } from './api'
+import { albums, posts, todos } from './api'
 import { useIntersectionObserver } from './useIntersectionObserver'
 
 export const PostListSuspensive = () => {

websites/visualization/src/app/react-query/playground/components/tanstack.tsx

@@ -1,7 +1,8 @@
 import { Delay } from '@suspensive/react'
 import { useQueries, useQuery } from '@tanstack/react-query'
 import { useEffect, useRef, useState } from 'react'
-import { Post, albums, posts, todos } from './api'
+import type { Post } from './api'
+import { albums, posts, todos } from './api'
 import { useIntersectionObserver } from './useIntersectionObserver'
 import { Spinner } from '~/components/uis'
 

websites/visualization/src/app/react/experimental/useErrorBoundary/page.tsx

@@ -1,7 +1,8 @@
 'use client'
 
 import { ErrorBoundary, useErrorBoundary, useErrorBoundaryFallbackProps } from '@suspensive/react'
-import { PropsWithChildren, createElement, useEffect, useState } from 'react'
+import type { PropsWithChildren } from 'react'
+import { createElement, useEffect, useState } from 'react'
 
 export default function Page() {
   return (

websites/visualization/src/components/RejectedFallback.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { ErrorBoundaryFallbackProps } from '@suspensive/react'
+import type { ErrorBoundaryFallbackProps } from '@suspensive/react'
 import { Box, Button, Description } from './uis'
 
 export const RejectedFallback = (props: ErrorBoundaryFallbackProps) => (

websites/visualization/src/components/uis/index.tsx

@@ -2,7 +2,7 @@
 'use client'
 
 import styled from '@emotion/styled'
-import { PropsWithChildren } from 'react'
+import type { PropsWithChildren } from 'react'
 
 export const Button = styled.button`
   box-sizing: border-box;