Merge remote-tracking branch 'origin/main' into feat/prevent-recursiv…

…e-fallback-throw-error

.npmrc

@@ -1 +1,2 @@
 prefer-workspace-packages=true
+enable-pre-post-scripts=true

.prettierignore

@@ -0,0 +1,2 @@
+# transforms testfixtures
+packages/codemods/src/transforms/testfixtures/**

CONTRIBUTING.md

@@ -41,7 +41,7 @@ In general, things we find useful when reviewing suggestions are:
    ```
 
 3. Please use the correct node version. You can use the version declared in [.nvmrc](https://github.com/toss/suspensive/blob/main/.nvmrc). We strongly recommend [nvm](https://github.com/nvm-sh/nvm) to control local machine's node version easily. also We recommend [nvm's deeper shell integration](https://github.com/nvm-sh/nvm#deeper-shell-integration) too.
-4. Install packages. [We use pnpm@9.12.3. Install pnpm with corepack please if you can](https://pnpm.io/installation#using-corepack). We recommend using corepack for pnpm to automatically use the version declared in the packageManager field of package.json.
+4. Install packages. [We use pnpm@9.15.4. Install pnpm with corepack please if you can](https://pnpm.io/installation#using-corepack). We recommend using corepack for pnpm to automatically use the version declared in the packageManager field of package.json.
 
    ```shell
    corepack enable && corepack prepare

docs/suspensive.org/.gitignore

@@ -33,3 +33,5 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+_pagefind/

docs/suspensive.org/next.config.mjs

@@ -10,9 +10,6 @@ const chConfig = {
 }
 
 const withNextra = nextra({
-  autoImportThemeStyle: true,
-  theme: 'nextra-theme-docs',
-  themeConfig: './theme.config.tsx',
   defaultShowCopyCode: true,
   latex: true,
   mdxOptions: {

docs/suspensive.org/package.json

@@ -12,9 +12,9 @@
   "bugs": "https://github.com/toss/suspensive/issues",
   "license": "MIT",
   "author": "Jonghyeon Ko <[email protected]>",
-  "type": "commonjs",
+  "type": "module",
   "scripts": {
-    "build": "next build",
+    "build": "next build && pagefind --site .next/server/app --output-path public/_pagefind",
     "ci:eslint": "eslint \"**/*.{ts,tsx,cts,mts,mdx}\"",
     "ci:type": "tsc --noEmit",
     "clean": "rimraf ./.next && rimraf ./node_modules",
@@ -23,6 +23,7 @@
   },
   "dependencies": {
     "@codesandbox/sandpack-react": "^2.19.10",
+    "@next/third-parties": "^15.1.6",
     "@suspensive/react": "workspace:*",
     "@suspensive/react-query-4": "workspace:*",
     "@tanstack/react-query": "^4.36.1",
@@ -31,8 +32,8 @@
     "d3": "^7.9.0",
     "motion": "^11.13.5",
     "next": "catalog:",
-    "nextra": "^3.3.1",
-    "nextra-theme-docs": "^3.3.1",
+    "nextra": "^4.1.0",
+    "nextra-theme-docs": "^4.1.0",
     "react": "catalog:react19",
     "react-dom": "catalog:react19",
     "remark-sandpack": "^0.0.5",
@@ -41,11 +42,11 @@
   },
   "devDependencies": {
     "@suspensive/eslint-config": "workspace:*",
+    "@tailwindcss/postcss": "catalog:",
     "@types/d3": "^7.4.3",
     "@types/react": "catalog:react19",
     "@types/react-dom": "catalog:react19",
-    "autoprefixer": "catalog:",
-    "postcss": "catalog:",
+    "pagefind": "^1.3.0",
     "prettier-plugin-tailwindcss": "catalog:",
     "tailwindcss": "catalog:"
   }

docs/suspensive.org/postcss.config.js

@@ -1,6 +1,6 @@
-module.exports = {
+/** @type {import('postcss').Postcss} */
+export default {
   plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
+    '@tailwindcss/postcss': {},
   },
 }

docs/suspensive.org/prettier.config.mjs

@@ -4,6 +4,5 @@ import rootConfig from '../../prettier.config.mjs'
 export default {
   ...rootConfig,
   plugins: ['prettier-plugin-tailwindcss'],
-  tailwindConfig: './tailwind.config.js',
   printWidth: 80,
 }

docs/suspensive.org/src/app/[lang]/[[...mdxPath]]/FadeIn.tsx

@@ -0,0 +1,10 @@
+'use client'
+
+import { motion } from 'motion/react'
+import type { ReactNode } from 'react'
+
+export const FadeIn = ({ children }: { children: ReactNode }) => (
+  <motion.div initial={{ opacity: 0, y: 8 }} animate={{ opacity: 1, y: 0 }}>
+    {children}
+  </motion.div>
+)

docs/suspensive.org/src/app/[lang]/[[...mdxPath]]/page.tsx

@@ -0,0 +1,38 @@
+import type { Heading, NextraMetadata } from 'nextra'
+import { generateStaticParamsFor, importPage } from 'nextra/pages'
+import { FadeIn } from './FadeIn'
+import { useMDXComponents } from '@/mdx-components'
+
+type Page = {
+  toc: Array<Heading>
+  metadata: NextraMetadata
+  default: React.ComponentType<{ params: Awaited<PageProps['params']> }>
+}
+export const generateStaticParams = generateStaticParamsFor('mdxPath')
+
+type PageProps = Readonly<{
+  params: Promise<{ mdxPath?: string[]; lang: string }>
+}>
+export const generateMetadata = async (props: PageProps) => {
+  const params = await props.params
+  const page = (await importPage(params.mdxPath, params.lang)) as Page
+  return page.metadata
+}
+// eslint-disable-next-line react-hooks/rules-of-hooks
+const Wrapper = useMDXComponents().wrapper
+export default async function Page(props: PageProps) {
+  const params = await props.params
+  const page = (await importPage(params.mdxPath, params.lang)) as Page
+
+  return (
+    <Wrapper toc={page.toc} metadata={page.metadata}>
+      {page.metadata.filePath.includes('index.mdx') ? (
+        <page.default {...props} params={params} />
+      ) : (
+        <FadeIn key={params.mdxPath?.join('/')}>
+          <page.default {...props} params={params} />
+        </FadeIn>
+      )}
+    </Wrapper>
+  )
+}

docs/suspensive.org/src/app/[lang]/_components/Logo.tsx

@@ -0,0 +1,27 @@
+'use client'
+
+import { motion } from 'motion/react'
+import Image from 'next/image'
+
+export const Logo = () => {
+  return (
+    <motion.div
+      className="flex items-center gap-1"
+      whileHover={{ scale: 1.05 }}
+      whileTap={{ scale: 0.95 }}
+    >
+      <motion.span>
+        <Image
+          src="/img/logo_dark.png"
+          width={34}
+          height={34}
+          alt="suspensive logo"
+        />
+      </motion.span>
+      <div className="relative">
+        <strong>Suspensive</strong>
+        <span className="absolute text-[8px]">v2</span>
+      </div>
+    </motion.div>
+  )
+}

docs/suspensive.org/src/app/[lang]/layout.tsx

@@ -0,0 +1,110 @@
+/* eslint-env node */
+import { GoogleAnalytics, GoogleTagManager } from '@next/third-parties/google'
+import { ClientOnly } from '@suspensive/react'
+import type { Metadata } from 'next'
+import Script from 'next/script'
+import { Banner, Head, Search } from 'nextra/components'
+import { getPageMap } from 'nextra/page-map'
+import {
+  Footer,
+  LastUpdated,
+  Layout,
+  LocaleSwitch,
+  Navbar,
+} from 'nextra-theme-docs'
+import type { ReactNode } from 'react'
+import { getDictionary, getDirection } from '../_dictionaries/get-dictionary'
+import './styles.css'
+import { Logo } from './_components/Logo'
+import { SandPackCSS } from '@/components/Sandpack/SandPackCSS'
+
+export const metadata = {
+  title: {
+    absolute: 'Suspensive',
+    template: '%s | Suspensive',
+    default: 'Suspensive',
+  },
+  description: 'All in one for React Suspense',
+  metadataBase: new URL('https://swr.vercel.app'),
+  openGraph: { images: '/img/banner.png' },
+  icons: '/img/favicon.ico',
+} satisfies Metadata
+
+export default async function RootLayout({
+  children,
+  params,
+}: {
+  children: ReactNode
+  params: Promise<{ lang: 'en' | 'ko' }>
+}) {
+  const { lang } = await params
+  const dictionary = await getDictionary(lang)
+  const pageMap = await getPageMap(lang)
+
+  return (
+    <html lang={lang} dir={getDirection(lang)} suppressHydrationWarning>
+      <Head backgroundColor={{ dark: 'rgb(0,0,0)' }}>
+        <ClientOnly>
+          <SandPackCSS />
+        </ClientOnly>
+      </Head>
+      <body>
+        <Layout
+          darkMode={false}
+          banner={
+            <Banner storageKey="suspensive banner">{dictionary.banner}</Banner>
+          }
+          search={<Search placeholder={dictionary.search.placeholder} />}
+          navbar={
+            <Navbar
+              logo={<Logo />}
+              projectLink="https://github.com/toss/suspensive"
+              chatLink="https://discord.gg/RFcR9WWmCH"
+            >
+              <LocaleSwitch />
+            </Navbar>
+          }
+          footer={
+            <Footer>
+              MIT {new Date().getFullYear()} © Viva Republica, Inc.
+            </Footer>
+          }
+          docsRepositoryBase="https://github.com/toss/suspensive/tree/main/docs/suspensive.org"
+          i18n={[
+            { locale: 'en', name: 'English' },
+            { locale: 'ko', name: '한국어' },
+          ]}
+          sidebar={{
+            defaultMenuCollapseLevel: 4,
+            autoCollapse: true,
+            toggleButton: true,
+          }}
+          toc={{
+            ...dictionary.toc,
+            float: true,
+          }}
+          editLink={dictionary.editPage}
+          pageMap={pageMap}
+          nextThemes={{ defaultTheme: 'dark' }}
+          feedback={{ content: '' }}
+          lastUpdated={<LastUpdated>{dictionary.lastUpdated}</LastUpdated>}
+        >
+          {children}
+        </Layout>
+        <GoogleTagManager gtmId="G-NYQZGKRL0Y" />
+        <GoogleAnalytics gaId="G-NYQZGKRL0Y" />
+        <ClientOnly>
+          <Script id="microsoft-clarity" type="text/javascript">
+            {`
+          (function(c,l,a,r,i,t,y){
+            c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
+            t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
+            y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
+          })(window, document, "clarity", "script", "jnyd3uxeuz");
+        `}
+          </Script>
+        </ClientOnly>
+      </body>
+    </html>
+  )
+}

docs/suspensive.org/src/app/[lang]/not-found.ts

@@ -0,0 +1 @@
+export { NotFoundPage as default } from 'nextra-theme-docs'

docs/suspensive.org/src/styles/globals.css → docs/suspensive.org/src/app/[lang]/styles.css

@@ -1,6 +1,5 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import 'tailwindcss';
+@import 'nextra-theme-docs/style.css';
 
 .scrollbar-none {
   -ms-overflow-style: none; /* IE and Edge */

docs/suspensive.org/src/app/_dictionaries/en.tsx

@@ -0,0 +1,20 @@
+import { Link } from 'nextra-theme-docs'
+
+export default {
+  toc: {
+    title: 'On This Page',
+    backToTop: 'Scroll to top',
+  },
+  search: { placeholder: 'Search Documentation...' },
+  footer: {
+    editLink: 'Edit this page on GitHub',
+  },
+  banner: (
+    <span>
+      👀 Check out the changes in Suspensive v2.{' '}
+      <Link href="/en/docs/migrate-to-v2">read more →</Link>
+    </span>
+  ),
+  lastUpdated: 'Last updated on',
+  editPage: 'Edit this page on GitHub',
+}

docs/suspensive.org/src/app/_dictionaries/get-dictionary.ts

@@ -0,0 +1,22 @@
+import 'server-only'
+import type En from './en'
+
+// We enumerate all dictionaries here for better linting and TypeScript support
+// We also get the default import for cleaner types
+const dictionaries = {
+  en: () => import('./en'),
+  ko: () => import('./ko'),
+} as const satisfies Record<string, () => Promise<{ default: typeof En }>>
+
+export const getDictionary = async (
+  locale: keyof typeof dictionaries
+): Promise<typeof En> => (await dictionaries[locale]()).default
+
+export const getDirection = (locale: keyof typeof dictionaries) => {
+  switch (locale) {
+    case 'en':
+    case 'ko':
+    default:
+      return 'ltr' as const
+  }
+}

docs/suspensive.org/src/app/_dictionaries/ko.tsx

@@ -0,0 +1,21 @@
+import { Link } from 'nextra-theme-docs'
+import type En from './en'
+
+export default {
+  toc: {
+    title: '이 페이지',
+    backToTop: '맨 위로',
+  },
+  search: { placeholder: '검색어를 입력하세요...' },
+  footer: {
+    editLink: 'Edit this page on GitHub',
+  },
+  banner: (
+    <span>
+      👀 Suspensive v2에서의 변경을 확인하세요.{' '}
+      <Link href="/ko/docs/migrate-to-v2">더보기 →</Link>
+    </span>
+  ),
+  lastUpdated: '수정된 날짜:',
+  editPage: 'GitHub에서 이 페이지 수정하기',
+} satisfies typeof En

docs/suspensive.org/src/components/BubbleChart.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import { ErrorBoundary, Suspense } from '@suspensive/react'
 import { SuspenseQuery, queryOptions } from '@suspensive/react-query-4'
 import {