feat: Use experimental Remix Vite plugin

.prettierignore

@@ -1,3 +1,4 @@
 **/api
+**/build
 **/public
 pnpm-lock.yaml

app/components/Carbon.tsx

@@ -1,9 +1,9 @@
-import * as React from 'react'
+import { useEffect, useRef } from 'react'
 
 export function Carbon() {
-  const ref = React.useRef<HTMLDivElement>(null!)
+  const ref = useRef<HTMLDivElement>(null!)
 
-  React.useEffect(() => {
+  useEffect(() => {
     ref.current.innerHTML = ''
     const s = document.createElement('script')
     s.id = '_carbonads_js'

app/components/CodeBlock.tsx

@@ -6,8 +6,6 @@ import { FaCopy } from 'react-icons/fa'
 import { svelteHighlighter } from '~/utils/svelteHighlighter'
 // Add back additional language support after `prism-react` upgrade
 ;(typeof global !== 'undefined' ? global : window).Prism = Prism
-require('prismjs/components/prism-diff')
-require('prismjs/components/prism-bash')
 
 // @ts-ignore Alias markup as vue highlight
 Prism.languages.vue = Prism.languages.markup

app/components/Doc.tsx

@@ -1,4 +1,4 @@
-import { FaEdit } from 'react-icons/fa'
+import { FaEdit } from 'react-icons/fa/index'
 import { DocTitle } from '~/components/DocTitle'
 import { RenderMarkdown } from '~/components/RenderMarkdown'
 

app/components/DocTitle.tsx

@@ -1,4 +1,6 @@
-export function DocTitle(props: { children: React.ReactNode }) {
+import type { ReactNode } from 'react'
+
+export function DocTitle(props: { children: ReactNode }) {
   return (
     <>
       <h1

app/components/Docs.tsx

@@ -1,7 +1,7 @@
+import { useMemo, useRef } from 'react'
 import { DocSearch } from '@docsearch/react'
-import * as React from 'react'
-import { CgClose, CgMenuLeft } from 'react-icons/cg'
-import { FaArrowLeft, FaArrowRight, FaTimes } from 'react-icons/fa'
+import { CgClose, CgMenuLeft } from 'react-icons/cg/index'
+import { FaArrowLeft, FaArrowRight, FaTimes } from 'react-icons/fa/index'
 import { NavLink, Outlet, useMatches } from '@remix-run/react'
 import { last } from '~/utils/utils'
 import { Carbon } from '~/components/Carbon'
@@ -12,6 +12,7 @@ import { Select } from '~/components/Select'
 import { useLocalStorage } from '~/utils/useLocalStorage'
 import { DocsCalloutQueryGG } from '~/components/DocsCalloutQueryGG'
 import { DocsCalloutBytes } from '~/components/DocsCalloutBytes'
+import type { ReactNode } from 'react'
 
 export type DocsConfig = {
   docSearch: {
@@ -20,9 +21,9 @@ export type DocsConfig = {
     apiKey: string
   }
   menu: {
-    label: string | React.ReactNode
+    label: string | ReactNode
     children: {
-      label: string | React.ReactNode
+      label: string | ReactNode
       to: string
       badge?: string
     }[]
@@ -43,7 +44,7 @@ export function Docs({
   colorFrom: string
   colorTo: string
   textColor: string
-  logo: React.ReactNode
+  logo: ReactNode
   config: DocsConfig
   framework?: SelectProps
   version?: SelectProps
@@ -55,9 +56,9 @@ export function Docs({
 
   const isExample = matches.some((d) => d.pathname.includes('/examples/'))
 
-  const detailsRef = React.useRef<HTMLElement>(null!)
+  const detailsRef = useRef<HTMLElement>(null!)
 
-  const flatMenu = React.useMemo(
+  const flatMenu = useMemo(
     () => config.menu.flatMap((d) => d.children),
     [config.menu]
   )

app/components/DocsCalloutBytes.tsx

@@ -1,6 +1,7 @@
 import BytesForm from '~/components/BytesForm'
+import type { HTMLProps } from 'react'
 
-export function DocsCalloutBytes(props: React.HTMLProps<HTMLDivElement>) {
+export function DocsCalloutBytes(props: HTMLProps<HTMLDivElement>) {
   return (
     <div className="space-y-4" {...props}>
       <div className="space-y-1 md:space-y-2">

app/components/DocsCalloutQueryGG.tsx

@@ -1,6 +1,7 @@
 import { LogoQueryGGSmall } from '~/components/LogoQueryGGSmall'
+import type { HTMLProps } from 'react'
 
-export function DocsCalloutQueryGG(props: React.HTMLProps<HTMLDivElement>) {
+export function DocsCalloutQueryGG(props: HTMLProps<HTMLDivElement>) {
   return (
     <div className="space-y-4" {...props}>
       <h6 className="text-[.7rem] md:text-[.9em] uppercase font-black">

app/components/Logo.tsx

@@ -1,4 +1,6 @@
-export function Logo(props: React.HTMLProps<HTMLDivElement>) {
+import type { HTMLProps } from 'react'
+
+export function Logo(props: HTMLProps<HTMLDivElement>) {
   return (
     <div {...props}>
       <svg

app/components/LogoColor.tsx

@@ -1,4 +1,6 @@
-export function LogoColor(props: React.HTMLProps<HTMLDivElement>) {
+import type { HTMLProps } from 'react'
+
+export function LogoColor(props: HTMLProps<HTMLDivElement>) {
   return (
     <div {...props}>
       <svg

app/components/LogoQueryGG.tsx

@@ -1,4 +1,6 @@
-export function LogoQueryGG(props: React.HTMLProps<HTMLDivElement>) {
+import type { HTMLProps } from 'react'
+
+export function LogoQueryGG(props: HTMLProps<HTMLDivElement>) {
   return (
     <div {...props}>
       <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1100 361">

app/components/LogoQueryGGSmall.tsx

@@ -1,4 +1,6 @@
-export function LogoQueryGGSmall(props: React.HTMLProps<HTMLDivElement>) {
+import type { HTMLProps } from 'react'
+
+export function LogoQueryGGSmall(props: HTMLProps<HTMLDivElement>) {
   return (
     <div {...props}>
       <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 130">

app/components/QueryGGBanner.tsx

@@ -1,4 +1,4 @@
-import { IoIosClose } from 'react-icons/io'
+import { IoIosClose } from 'react-icons/io/index'
 import { useLocalStorage } from '~/utils/useLocalStorage'
 import { useClientOnlyRender } from '~/utils/useClientOnlyRender'
 

app/components/RootDocument.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react'
 import {
   Links,
   LiveReload,
@@ -8,13 +7,14 @@ import {
   useMatches,
   useNavigation,
 } from '@remix-run/react'
-import { CgSpinner } from 'react-icons/cg'
+import { CgSpinner } from 'react-icons/cg/index'
+import type { ReactNode } from 'react'
 
 export function RootDocument({
   children,
   title,
 }: {
-  children: React.ReactNode
+  children: ReactNode
   title?: string
 }) {
   const navigation = useNavigation()

app/components/Select.tsx

@@ -1,7 +1,6 @@
 import { Fragment } from 'react'
 import { Listbox, Transition } from '@headlessui/react'
-
-import { HiCheck, HiChevronDown } from 'react-icons/hi'
+import { HiCheck, HiChevronDown } from 'react-icons/hi/index'
 import { Form } from '@remix-run/react'
 
 export type AvailableOptions = Record<

app/components/SponsorPack.tsx

@@ -1,10 +1,10 @@
-import React from 'react'
+import { useMemo } from 'react'
 import { Pack, hierarchy } from '@visx/hierarchy'
 import { ParentSize } from '@visx/responsive'
 import { twMerge } from 'tailwind-merge'
 
 export default function SponsorPack({ sponsors }: { sponsors: any }) {
-  const pack = React.useMemo(
+  const pack = useMemo(
     () => ({
       children: sponsors,
       name: 'root',
@@ -14,7 +14,7 @@ export default function SponsorPack({ sponsors }: { sponsors: any }) {
     [sponsors]
   )
 
-  const root = React.useMemo(
+  const root = useMemo(
     () =>
       hierarchy(pack)
         .sum((d) => 1 + d?.tier?.monthlyPriceInDollars)

app/hooks/useSessionStorage.ts

@@ -1,7 +1,7 @@
-import React from 'react'
+import { useEffect, useState } from 'react'
 
 export default function useSessionStorage(key, defaultValue = '') {
-  const [state, setState] = React.useState(() => {
+  const [state, setState] = useState(() => {
     if (typeof document !== 'undefined') {
       const data = sessionStorage.getItem(key)
       if (data) {
@@ -16,9 +16,9 @@
     return defaultValue
   })
 
-  React.useEffect(() => {
+  useEffect(() => {
     sessionStorage.setItem(key, JSON.stringify(state))
   }, [state])
 
   return [state, setState]
 }

app/root.tsx

@@ -1,9 +1,9 @@
 import { Outlet, isRouteErrorResponse, useRouteError } from '@remix-run/react'
-import styles from '~/styles/app.css'
-import carbonStyles from '~/styles/carbon.css'
-import prismThemeLight from '~/styles/prismThemeLight.css'
-import prismThemeDark from '~/styles/prismThemeDark.css'
-import docSearchStyles from '@docsearch/css/dist/style.css'
+import '~/styles/app.css'
+import '~/styles/carbon.css'
+import '~/styles/prismThemeLight.css'
+import '~/styles/prismThemeDark.css'
+import '@docsearch/css/dist/style.css'
 import { seo } from '~/utils/seo'
 import { RootDocument } from '~/components/RootDocument'
 import { DefaultCatchBoundary } from '~/components/DefaultCatchBoundary'
@@ -22,25 +22,6 @@ export const meta: MetaFunction = () => {
 
 export const links: LinksFunction = () => {
   return [
-    { rel: 'stylesheet', href: styles },
-    {
-      rel: 'stylesheet',
-      href: prismThemeLight,
-      media: '(prefers-color-scheme: light)',
-    },
-    {
-      rel: 'stylesheet',
-      href: prismThemeDark,
-      media: '(prefers-color-scheme: dark)',
-    },
-    {
-      rel: 'stylesheet',
-      href: docSearchStyles,
-    },
-    {
-      rel: 'stylesheet',
-      href: carbonStyles,
-    },
     {
       rel: 'apple-touch-icon',
       sizes: '180x180',

app/routes/_index.tsx

@@ -9,8 +9,8 @@
 import { json } from '@remix-run/node'
 import { Carbon } from '~/components/Carbon'
 import { twMerge } from 'tailwind-merge'
-import { FaDiscord, FaGithub, FaTshirt } from 'react-icons/fa'
-import { CgMusicSpeaker } from 'react-icons/cg'
+import { FaDiscord, FaGithub, FaTshirt } from 'react-icons/fa/index'
+import { CgMusicSpeaker } from 'react-icons/cg/index'
 import { Footer } from '~/components/Footer'
 import SponsorPack from '~/components/SponsorPack'
 import { LinkOrA } from '~/components/LinkOrA'
@@ -559,7 +559,7 @@
             right-0 top-0 -translate-y-1/3 translate-x-1/3
             sm:opacity-20`}
           >
             <img src={discordImage} width={300} height={300} />
           </div>
           <div className={`sm:col-span-2`}>
             <h3 className={`text-3xl`}>TanStack on Discord</h3>

app/routes/blog._index.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react'
 import { useLoaderData, Link } from '@remix-run/react'
 import { json } from '@remix-run/node'
 import { extractFrontMatter, fetchRepoFile } from '~/utils/documents.server'

app/routes/blog.tsx

@@ -1,5 +1,5 @@
-import * as React from 'react'
-import { CgClose, CgMenuLeft } from 'react-icons/cg'
+import { useRef } from 'react'
+import { CgClose, CgMenuLeft } from 'react-icons/cg/index'
 import { Link, NavLink, Outlet } from '@remix-run/react'
 import { DefaultErrorBoundary } from '~/components/DefaultErrorBoundary'
 import { Carbon } from '~/components/Carbon'
@@ -44,7 +44,7 @@ export const meta: MetaFunction = () => {
 }
 
 export default function RouteBlog() {
-  const detailsRef = React.useRef<HTMLElement>(null!)
+  const detailsRef = useRef<HTMLElement>(null!)
 
   const menuItems = localMenu.map((group) => {
     return (

app/routes/form.$version._index.tsx

@@ -1,6 +1,5 @@
-import * as React from 'react'
-
-import { CgCornerUpLeft } from 'react-icons/cg'
+import { useEffect, useState } from 'react'
+import { CgCornerUpLeft } from 'react-icons/cg/index'
 import {
   FaBolt,
   FaBook,
@@ -9,13 +8,13 @@ import {
   FaDiscord,
   FaGithub,
   FaTshirt,
-} from 'react-icons/fa'
+} from 'react-icons/fa/index'
 import { json } from '@remix-run/node'
 import { Link, useLoaderData, useParams } from '@remix-run/react'
 import { Carbon } from '~/components/Carbon'
 import { Footer } from '~/components/Footer'
-import { VscPreview, VscWand } from 'react-icons/vsc'
-import { TbHeartHandshake } from 'react-icons/tb'
+import { VscPreview, VscWand } from 'react-icons/vsc/index'
+import { TbHeartHandshake } from 'react-icons/tb/index'
 import SponsorPack from '~/components/SponsorPack'
 import { getBranch, gradientText, latestVersion, repo } from '~/projects/form'
 import { Logo } from '~/components/Logo'
@@ -85,10 +84,10 @@ export default function RouteVersion() {
   const { sponsors } = useLoaderData<typeof loader>()
   const { version } = useParams()
   const branch = getBranch(version)
-  const [framework, setFramework] = React.useState<Framework>('react')
-  const [isDark, setIsDark] = React.useState(true)
+  const [framework, setFramework] = useState<Framework>('react')
+  const [isDark, setIsDark] = useState(true)
 
-  React.useEffect(() => {
+  useEffect(() => {
     setIsDark(window.matchMedia?.(`(prefers-color-scheme: dark)`).matches)
   }, [])
 

app/routes/form.$version.docs.framework.$framework.examples.$.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import { useEffect, useState } from 'react'
 import type { LoaderFunctionArgs, MetaFunction } from '@remix-run/node'
 import { json } from '@remix-run/node'
 import { useLoaderData, useParams } from '@remix-run/react'
@@ -34,7 +34,7 @@
 
   const [isDark, setIsDark] = React.useState(true)
 
-  React.useEffect(() => {
+  useEffect(() => {
     setIsDark(window.matchMedia?.(`(prefers-color-scheme: dark)`).matches)
   }, [])
 

app/routes/query.$version._index.tsx

@@ -1,6 +1,5 @@
-import * as React from 'react'
-
-import { CgCornerUpLeft } from 'react-icons/cg'
+import { useEffect, useState } from 'react'
+import { CgCornerUpLeft } from 'react-icons/cg/index'
 import {
   FaBolt,
   FaBook,
@@ -9,13 +8,13 @@ import {
   FaDiscord,
   FaGithub,
   FaTshirt,
-} from 'react-icons/fa'
+} from 'react-icons/fa/index'
 import { json } from '@remix-run/node'
 import { Link, useLoaderData, useParams } from '@remix-run/react'
 import { Carbon } from '~/components/Carbon'
 import { Footer } from '~/components/Footer'
-import { VscPreview, VscWand } from 'react-icons/vsc'
-import { TbHeartHandshake } from 'react-icons/tb'
+import { VscPreview, VscWand } from 'react-icons/vsc/index'
+import { TbHeartHandshake } from 'react-icons/tb/index'
 import SponsorPack from '~/components/SponsorPack'
 import { QueryGGBanner } from '~/components/QueryGGBanner'
 import { getBranch, gradientText, latestVersion, repo } from '~/projects/query'
@@ -87,10 +86,10 @@ export default function RouteVersion() {
   const { sponsors } = useLoaderData<typeof loader>()
   const { version } = useParams()
   const branch = getBranch(version)
-  const [framework, setFramework] = React.useState<Framework>('react')
-  const [isDark, setIsDark] = React.useState(true)
+  const [framework, setFramework] = useState<Framework>('react')
+  const [isDark, setIsDark] = useState(true)
 
-  React.useEffect(() => {
+  useEffect(() => {
     setIsDark(window.matchMedia?.(`(prefers-color-scheme: dark)`).matches)
   }, [])