chore: better type vs value import separation (#7972)

Author: lachlancollins

examples/react/react-native/src/components/ErrorMessage.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { Text, View, StyleSheet } from 'react-native'
+import { StyleSheet, Text, View } from 'react-native'
 
 type Props = {
   message: string

examples/react/react-native/src/components/ListItem.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
-import { View, StyleSheet } from 'react-native'
+import { StyleSheet, View } from 'react-native'
 import { Paragraph, TouchableRipple } from 'react-native-paper'
-import { MovieDetails } from '../lib/api'
+import type { MovieDetails } from '../lib/api'
 
 type Props = {
   item: MovieDetails

examples/react/react-native/src/components/LoadingIndicator.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { ActivityIndicator, View, StyleSheet } from 'react-native'
+import { ActivityIndicator, StyleSheet, View } from 'react-native'
 
 export function LoadingIndicator() {
   return (

examples/react/react-native/src/hooks/useAppState.ts

@@ -1,5 +1,6 @@
 import { useEffect } from 'react'
-import { AppState, AppStateStatus } from 'react-native'
+import { AppState } from 'react-native'
+import type { AppStateStatus } from 'react-native'
 
 export function useAppState(onChange: (status: AppStateStatus) => void) {
   useEffect(() => {

examples/react/react-native/src/navigation/MoviesStack.tsx

@@ -3,7 +3,7 @@ import { createStackNavigator } from '@react-navigation/stack'
 
 import { MoviesListScreen } from '../screens/MoviesListScreen'
 import { MovieDetailsScreen } from '../screens/MovieDetailsScreen'
-import { MoviesStackNavigator } from './types'
+import type { MoviesStackNavigator } from './types'
 
 const Stack = createStackNavigator<MoviesStackNavigator>()
 

examples/react/react-native/src/navigation/types.ts

@@ -1,4 +1,4 @@
-import { Movie } from '../lib/api'
+import type { Movie } from '../lib/api'
 
 export type MoviesStackNavigator = {
   MoviesList: undefined

examples/react/react-native/src/screens/MovieDetailsScreen.tsx

@@ -1,15 +1,15 @@
 import * as React from 'react'
-import { View, RefreshControl, StyleSheet, ScrollView } from 'react-native'
-import { Title, Paragraph } from 'react-native-paper'
-import { StackNavigationProp } from '@react-navigation/stack'
-import { RouteProp } from '@react-navigation/native'
+import { RefreshControl, ScrollView, StyleSheet, View } from 'react-native'
+import { Paragraph, Title } from 'react-native-paper'
 import { useQuery } from '@tanstack/react-query'
-
 import { LoadingIndicator } from '../components/LoadingIndicator'
 import { ErrorMessage } from '../components/ErrorMessage'
 import { useRefreshByUser } from '../hooks/useRefreshByUser'
-import { fetchMovie, MovieDetails } from '../lib/api'
+import { fetchMovie } from '../lib/api'
+import type { MovieDetails } from '../lib/api'
 import type { MoviesStackNavigator } from '../navigation/types'
+import type { StackNavigationProp } from '@react-navigation/stack'
+import type { RouteProp } from '@react-navigation/native'
 
 type MoviesDetailsScreenNavigationProp = StackNavigationProp<
   MoviesStackNavigator,

examples/react/react-native/src/screens/MoviesListScreen.tsx

@@ -1,16 +1,16 @@
 import * as React from 'react'
 import { FlatList, RefreshControl } from 'react-native'
 import { useQuery } from '@tanstack/react-query'
-
-import { StackNavigationProp } from '@react-navigation/stack'
 import { LoadingIndicator } from '../components/LoadingIndicator'
 import { ErrorMessage } from '../components/ErrorMessage'
 import { Divider } from '../components/Divider'
 import { ListItem } from '../components/ListItem'
 import { useRefreshByUser } from '../hooks/useRefreshByUser'
 import { useRefreshOnFocus } from '../hooks/useRefreshOnFocus'
-import { fetchMovies, Movie, MovieDetails } from '../lib/api'
-import { MoviesStackNavigator } from '../navigation/types'
+import { fetchMovies } from '../lib/api'
+import type { Movie, MovieDetails } from '../lib/api'
+import type { MoviesStackNavigator } from '../navigation/types'
+import type { StackNavigationProp } from '@react-navigation/stack'
 
 type MoviesListScreenNavigationProp = StackNavigationProp<
   MoviesStackNavigator,

examples/react/react-router/src/routes/root.tsx

@@ -1,21 +1,20 @@
 import {
-  Outlet,
-  useLoaderData,
   Link,
   NavLink,
+  Outlet,
+  useLoaderData,
   useNavigation,
   useSubmit,
-  LoaderFunctionArgs,
 } from 'react-router-dom'
 import { useDebounce } from 'rooks'
-
-import { getContacts } from '../contacts'
 import {
-  useSuspenseQuery,
-  useIsFetching,
-  type QueryClient,
   queryOptions,
+  useIsFetching,
+  useSuspenseQuery,
 } from '@tanstack/react-query'
+import { getContacts } from '../contacts'
+import type { QueryClient } from '@tanstack/react-query'
+import type { LoaderFunctionArgs } from 'react-router-dom'
 
 const contactListQuery = (q?: string) =>
   queryOptions({

examples/svelte/playground/src/routes/AddTodo.svelte

@@ -1,13 +1,7 @@
 <script lang="ts">
   import { createMutation, useQueryClient } from '@tanstack/svelte-query'
-  import {
-    errorRate,
-    queryTimeMin,
-    queryTimeMax,
-    list,
-    id,
-    type Todo,
-  } from '../lib/stores'
+  import { errorRate, queryTimeMin, queryTimeMax, list, id } from '$lib/stores'
+  import type { Todo } from '$lib/stores'
 
   const queryClient = useQueryClient()
 

examples/svelte/playground/src/routes/EditTodo.svelte

@@ -10,9 +10,9 @@
     queryTimeMax,
     list,
     editingIndex,
-    type Todo,
   } from '$lib/stores'
   import { derived } from 'svelte/store'
+  import type { Todo } from '$lib/stores'
 
   const queryClient = useQueryClient()
 

examples/svelte/playground/src/routes/TodosList.svelte

@@ -6,9 +6,9 @@
     queryTimeMax,
     list,
     editingIndex,
-    type Todos,
   } from '$lib/stores'
   import { derived, writable } from 'svelte/store'
+  import type { Todos } from '$lib/stores'
 
   export let initialFilter: string
 

packages/angular-query-experimental/etc/angular-query-experimental.api.md

@@ -16,11 +16,11 @@ import type { InitialDataFunction } from '@tanstack/query-core';
 import { InjectOptions } from '@angular/core';
 import { Injector } from '@angular/core';
 import type { MutateFunction } from '@tanstack/query-core';
-import { Mutation } from '@tanstack/query-core';
+import type { Mutation } from '@tanstack/query-core';
 import { MutationFilters } from '@tanstack/query-core';
 import type { MutationObserverOptions } from '@tanstack/query-core';
 import type { MutationObserverResult } from '@tanstack/query-core';
-import { MutationState } from '@tanstack/query-core';
+import type { MutationState } from '@tanstack/query-core';
 import type { OmitKeyof } from '@tanstack/query-core';
 import { Provider } from '@angular/core';
 import type { QueriesPlaceholderDataFunction } from '@tanstack/query-core';

packages/angular-query-experimental/src/__tests__/util/lazy-init/lazy-init.test.ts

@@ -2,7 +2,6 @@ import { describe, expect, test } from 'vitest'
 import {
   ChangeDetectionStrategy,
   Component,
-  type WritableSignal,
   computed,
   effect,
   input,
@@ -11,6 +10,7 @@ import {
 import { TestBed } from '@angular/core/testing'
 import { flushQueue, setFixtureSignalInputs } from '../../test-utils'
 import { lazyInit } from '../../../util/lazy-init/lazy-init'
+import type { WritableSignal } from '@angular/core'
 
 describe('lazyInit', () => {
   test('should init lazily in next tick when not accessing manually', async () => {

packages/angular-query-experimental/src/__tests__/util/lazy-signal-initializer/lazy-signal-initializer.test.ts

@@ -1,15 +1,9 @@
 import { describe, expect, test } from 'vitest'
-import {
-  Component,
-  type Signal,
-  type WritableSignal,
-  effect,
-  input,
-  signal,
-} from '@angular/core'
+import { Component, effect, input, signal } from '@angular/core'
 import { TestBed } from '@angular/core/testing'
 import { lazySignalInitializer } from '../../../util/lazy-signal-initializer/lazy-signal-initializer'
 import { flushQueue, setFixtureSignalInputs } from '../../test-utils'
+import type { Signal, WritableSignal } from '@angular/core'
 
 describe('lazySignalInitializer', () => {
   test('should init lazily in next tick when not accessing manually', async () => {

packages/angular-query-experimental/src/inject-mutation-state.ts

@@ -6,18 +6,17 @@ import {
   signal,
   untracked,
 } from '@angular/core'
-import {
-  type Mutation,
-  type MutationCache,
-  type MutationFilters,
-  type MutationState,
-  notifyManager,
-  replaceEqualDeep,
-} from '@tanstack/query-core'
+import { notifyManager, replaceEqualDeep } from '@tanstack/query-core'
 import { assertInjector } from './util/assert-injector/assert-injector'
 import { injectQueryClient } from './inject-query-client'
 import { lazySignalInitializer } from './util/lazy-signal-initializer/lazy-signal-initializer'
 import type { Injector, Signal } from '@angular/core'
+import type {
+  Mutation,
+  MutationCache,
+  MutationFilters,
+  MutationState,
+} from '@tanstack/query-core'
 
 type MutationStateOptions<TResult = MutationState> = {
   filters?: MutationFilters

packages/angular-query-experimental/src/util/create-injection-token/create-injection-token.ts

@@ -11,22 +11,20 @@
  */
 /* eslint-enable */
 
-import {
-  type EnvironmentProviders,
-  type FactoryProvider,
-  type Host,
-  type InjectOptions,
-  InjectionToken,
-  type Injector,
-  type Optional,
-  type Provider,
-  type Self,
-  type SkipSelf,
-  type Type,
-  inject,
-  runInInjectionContext,
-} from '@angular/core'
+import { InjectionToken, inject, runInInjectionContext } from '@angular/core'
 import { assertInjector } from '../assert-injector/assert-injector'
+import type {
+  EnvironmentProviders,
+  FactoryProvider,
+  Host,
+  InjectOptions,
+  Injector,
+  Optional,
+  Provider,
+  Self,
+  SkipSelf,
+  Type,
+} from '@angular/core'
 
 type CreateInjectionTokenDep<TTokenType> =
   | Type<TTokenType>

packages/angular-query-experimental/src/util/lazy-signal-initializer/lazy-signal-initializer.ts

@@ -1,10 +1,5 @@
-import {
-  Injector,
-  type Signal,
-  computed,
-  inject,
-  untracked,
-} from '@angular/core'
+import { Injector, computed, inject, untracked } from '@angular/core'
+import type { Signal } from '@angular/core'
 
 type SignalInitializerFn<T> = (injector: Injector) => Signal<T>
 

packages/react-query/src/useSuspenseQueries.ts

@@ -1,14 +1,14 @@
 'use client'
-import {
-  type DefaultError,
-  type QueryClient,
-  type QueryFunction,
-  type ThrowOnError,
-  skipToken,
-} from '@tanstack/query-core'
+import { skipToken } from '@tanstack/query-core'
 import { useQueries } from './useQueries'
 import { defaultThrowOnError } from './suspense'
 import type { UseSuspenseQueryOptions, UseSuspenseQueryResult } from './types'
+import type {
+  DefaultError,
+  QueryClient,
+  QueryFunction,
+  ThrowOnError,
+} from '@tanstack/query-core'
 
 // Avoid TS depth-limit error in case of large array literal
 type MAXIMUM_DEPTH = 20

packages/svelte-query/src/useHydrate.ts

@@ -1,9 +1,6 @@
-import {
-  type HydrateOptions,
-  type QueryClient,
-  hydrate,
-} from '@tanstack/query-core'
+import { hydrate } from '@tanstack/query-core'
 import { useQueryClient } from './useQueryClient.js'
+import type { HydrateOptions, QueryClient } from '@tanstack/query-core'
 
 export function useHydrate(
   state?: unknown,

packages/svelte-query/src/useIsFetching.ts

@@ -1,11 +1,8 @@
-import {
-  type QueryClient,
-  type QueryFilters,
-  notifyManager,
-} from '@tanstack/query-core'
+import { notifyManager } from '@tanstack/query-core'
 import { readable } from 'svelte/store'
 import { useQueryClient } from './useQueryClient.js'
 import type { Readable } from 'svelte/store'
+import type { QueryClient, QueryFilters } from '@tanstack/query-core'
 
 export function useIsFetching(
   filters?: QueryFilters,

packages/svelte-query/src/useIsMutating.ts

@@ -1,11 +1,8 @@
-import {
-  type MutationFilters,
-  type QueryClient,
-  notifyManager,
-} from '@tanstack/query-core'
+import { notifyManager } from '@tanstack/query-core'
 import { readable } from 'svelte/store'
 import { useQueryClient } from './useQueryClient.js'
 import type { Readable } from 'svelte/store'
+import type { MutationFilters, QueryClient } from '@tanstack/query-core'
 
 export function useIsMutating(
   filters?: MutationFilters,