chore(*): update deps (#1347)

.github/actions/pnpm-setup-node/action.yml

@@ -5,7 +5,7 @@ runs:
   steps:
     - uses: pnpm/action-setup@v4
       with:
-        version: 9.7.1
+        version: 9.12.3
     - uses: actions/setup-node@v4
       with:
         cache: "pnpm"

.nvmrc

@@ -1 +1 @@
-v20.14.0
+v22.11.0

CONTRIBUTING.md

@@ -35,11 +35,14 @@ In general, things we find useful when reviewing suggestions are:
 0. [Choose an issue about bug or feature you want to work on](https://github.com/toss/suspensive/issues)
 1. Fork this repository.
 2. Clone the repository
+
    ```shell
    git clone git@github.com:{username}/suspensive.git
    ```
+
 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.7.1. 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.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.
+
    ```shell
    corepack enable && corepack prepare
    pnpm install

docs/suspensive.org/package.json

@@ -30,7 +30,7 @@
     "d3": "^7.9.0",
     "framer-motion": "^11.11.8",
     "next": "catalog:",
-    "nextra": "^3.0.11",
+    "nextra": "^3.2.0",
     "nextra-theme-docs": "^3.0.11",
     "react": "catalog:react18",
     "react-dom": "catalog:react18",

examples/next-streaming-react-query/next.config.js

@@ -1,8 +1,7 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {
+module.exports = {
+  reactStrictMode: true,
   experimental: {
     typedRoutes: true,
   },
 }
-
-module.exports = nextConfig

examples/next-streaming-react-query/src/app/layout.tsx

@@ -1,8 +1,7 @@
-import type { Metadata } from 'next'
 import type { ReactNode } from 'react'
 import { Providers } from './providers'
 
-export const metadata: Metadata = {
+export const metadata = {
   title: 'Next HTML Streaming with Suspense',
 }
 

examples/next-streaming-react-query/tsconfig.json

@@ -14,11 +14,7 @@
     "isolatedModules": true,
     "jsx": "preserve",
     "incremental": true,
-    "plugins": [
-      {
-        "name": "next"
-      }
-    ],
+    "plugins": [{ "name": "next" }],
     "paths": {
       "~/*": ["./src/*"]
     }

examples/react-native-playground/package.json

@@ -17,7 +17,7 @@
     "react-native": "catalog:react18"
   },
   "devDependencies": {
-    "@babel/core": "^7.24.9",
+    "@babel/core": "^7.26.0",
     "@expo/webpack-config": "catalog:",
     "@types/react": "catalog:react18"
   }

examples/visualization/next.config.js

@@ -1,10 +1,8 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {
+module.exports = {
   reactStrictMode: true,
   transpilePackages: ['@suspensive/react', '@suspensive/react-query'],
   experimental: {
     typedRoutes: true,
   },
 }
-
-module.exports = nextConfig

examples/visualization/src/app/layout.tsx

@@ -25,21 +25,12 @@ export default function RootLayout({ children }: { children: React.ReactNode })
             <li>
               <details>
                 <summary>@suspensive/react</summary>
-                <li>
-                  <Link href="/react/Suspense/clientOnly">{`<Suspense clientOnly/>`}</Link>
-                </li>
-                <li>
-                  <Link href="/react/DevMode">{`<DevMode/>`}</Link>
-                </li>
                 <li>
                   <Link href="/react/Delay">{`<Delay/>`}</Link>
                 </li>
                 <li>
                   <Link href="/react/ErrorBoundary/shouldCatch">{`<ErrorBoundary/>`} shouldCatch prop</Link>
                 </li>
-                <li>
-                  <Link href="/react/SuspensiveError">SuspensiveError (internal api)</Link>
-                </li>
                 <li>
                   <Link href="/react/zodSearchParams">zod: no param</Link>
                 </li>

examples/visualization/src/app/react-query/SuspenseQuery/page.tsx

@@ -1,46 +1,50 @@
 'use client'
 
 import { ErrorBoundary, Suspense } from '@suspensive/react'
-import { SuspenseQuery } from '@suspensive/react-query'
+import { SuspenseQuery, queryOptions, usePrefetchQuery } from '@suspensive/react-query'
 import axios from 'axios'
 import { Spinner } from '~/components/uis'
 
+const query = {
+  user: (userId: number) =>
+    queryOptions({
+      queryKey: ['users', userId],
+      queryFn: () =>
+        axios
+          .get<{
+            id: number
+            username: string
+            age: number
+          }>(`https://dummyjson.com/users/${userId}`)
+          .then(({ data }) => data),
+    }),
+  products: () =>
+    queryOptions({
+      queryKey: ['products'],
+      queryFn: () =>
+        axios
+          .get<{
+            products: Array<{
+              id: number
+              title: string
+              price: number
+            }>
+          }>(`https://dummyjson.com/products`)
+          .then(({ data }) => data),
+    }),
+}
+
 export default function Page() {
   const userId = 1
+  usePrefetchQuery(query.user(userId))
+  usePrefetchQuery(query.products())
 
   return (
     <ErrorBoundary fallback={({ error }) => <>{error.message}</>}>
-      <Suspense clientOnly fallback={<Spinner />}>
+      <Suspense clientOnly fallback={<ExpensiveSpinner ms={2000} />}>
         <div>
-          <SuspenseQuery
-            queryKey={['users', userId]}
-            queryFn={() =>
-              axios
-                .get<{
-                  id: number
-                  username: string
-                  age: number
-                }>(`https://dummyjson.com/users/${userId}`)
-                .then(({ data }) => data)
-            }
-          >
-            {({ data: user }) => <h1>{user.username}</h1>}
-          </SuspenseQuery>
-          <SuspenseQuery
-            queryKey={['products']}
-            queryFn={() =>
-              axios
-                .get<{
-                  products: Array<{
-                    id: number
-                    title: string
-                    price: number
-                  }>
-                }>(`https://dummyjson.com/products`)
-                .then(({ data }) => data)
-            }
-            select={(data) => data.products}
-          >
+          <SuspenseQuery {...query.user(userId)}>{({ data: user }) => <h1>{user.username}</h1>}</SuspenseQuery>
+          <SuspenseQuery {...query.products()} select={(data) => data.products}>
             {({ data: products }) => (
               <div>
                 {products.map((product) => (
@@ -54,3 +58,11 @@ export default function Page() {
     </ErrorBoundary>
   )
 }
+
+const ExpensiveSpinner = ({ ms }: { ms: number }) => {
+  if (typeof window !== 'undefined') {
+    const start = Date.now()
+    while (Date.now() - start < ms) {}
+  }
+  return <Spinner />
+}

package.json

@@ -14,7 +14,7 @@
   },
   "license": "MIT",
   "author": "Jonghyeon Ko <jonghyeon@toss.im>",
-  "packageManager": "pnpm@9.7.1",
+  "packageManager": "pnpm@9.12.3",
   "type": "module",
   "scripts": {
     "blc:suspensive.org": "pnpm blc https://suspensive.org --ro --exclude='https://x.com/*' --exclude='https://codesandbox.io/api/v1/sandboxes/define?undefined&environment=create-react-app'",
@@ -42,38 +42,38 @@
     "start": "turbo run start"
   },
   "devDependencies": {
-    "@arethetypeswrong/cli": "^0.15.4",
+    "@arethetypeswrong/cli": "^0.16.4",
     "@changesets/changelog-github": "^0.5.0",
-    "@changesets/cli": "^2.27.8",
+    "@changesets/cli": "^2.27.9",
     "@codspeed/vitest-plugin": "^3.1.1",
     "@commitlint/cli": "^19.5.0",
     "@commitlint/config-conventional": "^19.5.0",
     "@testing-library/dom": "^10.4.0",
-    "@testing-library/jest-dom": "^6.5.0",
+    "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^14.5.2",
-    "@types/node": "^20.16.10",
-    "@vitest/browser": "^2.1.1",
-    "@vitest/coverage-istanbul": "^2.1.1",
-    "@vitest/coverage-v8": "^2.1.1",
-    "@vitest/ui": "^2.1.1",
+    "@types/node": "^22.8.6",
+    "@vitest/browser": "^2.1.4",
+    "@vitest/coverage-istanbul": "^2.1.4",
+    "@vitest/coverage-v8": "^2.1.4",
+    "@vitest/ui": "^2.1.4",
     "broken-link-checker": "^0.7.8",
-    "eslint": "^9.11.1",
+    "eslint": "^9.13.0",
     "husky": "^9.1.6",
     "jsdom": "^25.0.1",
-    "knip": "^5.29.0",
+    "knip": "^5.36.0",
     "lint-staged": "^15.2.10",
     "ms": "3.0.0-canary.1",
     "packlint": "^0.2.4",
-    "playwright": "^1.47.2",
+    "playwright": "^1.48.2",
     "prettier": "^3.3.3",
-    "publint": "^0.2.11",
+    "publint": "^0.2.12",
     "rimraf": "^6.0.1",
-    "sherif": "^1.0.0",
-    "tsup": "^8.3.0",
-    "turbo": "^2.1.3",
+    "sherif": "^1.0.1",
+    "tsup": "^8.3.5",
+    "turbo": "^2.2.3",
     "typescript": "^5.4.5",
-    "vite": "^5.4.8",
-    "vitest": "^2.1.1"
+    "vite": "^5.4.10",
+    "vitest": "^2.1.4"
   }
 }