Merge branch 'main' into 2-25-vinext

web/app/components/develop/template/template.en.mdx

@@ -1,5 +1,5 @@
 import { CodeGroup } from '../code.tsx'
-import { Row, Col, Properties, Property, Heading, SubProperty, Paragraph } from '../md.tsx'
+import { Row, Col, Properties, Property, Heading, SubProperty } from '../md.tsx'
 
 # Completion App API
 

web/app/components/develop/template/template.ja.mdx

@@ -1,5 +1,5 @@
 import { CodeGroup } from '../code.tsx'
-import { Row, Col, Properties, Property, Heading, SubProperty, Paragraph } from '../md.tsx'
+import { Row, Col, Properties, Property, Heading, SubProperty } from '../md.tsx'
 
 # Completion アプリ API
 

web/app/components/develop/template/template_advanced_chat.en.mdx

@@ -1,5 +1,5 @@
 import { CodeGroup, Embed } from '../code.tsx'
-import { Row, Col, Properties, Property, Heading, SubProperty, Paragraph } from '../md.tsx'
+import { Row, Col, Properties, Property, Heading, SubProperty } from '../md.tsx'
 
 # Advanced Chat App API
 

web/app/components/develop/template/template_advanced_chat.ja.mdx

@@ -1,5 +1,5 @@
 import { CodeGroup } from '../code.tsx'
-import { Row, Col, Properties, Property, Heading, SubProperty, Paragraph } from '../md.tsx'
+import { Row, Col, Properties, Property, Heading, SubProperty } from '../md.tsx'
 
 # 高度なチャットアプリ API
 

web/app/components/develop/template/template_chat.en.mdx

@@ -1,5 +1,5 @@
 import { CodeGroup } from '../code.tsx'
-import { Row, Col, Properties, Property, Heading, SubProperty, Paragraph } from '../md.tsx'
+import { Row, Col, Properties, Property, Heading, SubProperty } from '../md.tsx'
 
 # Chat App API
 

web/app/components/develop/template/template_chat.ja.mdx

@@ -1,5 +1,5 @@
 import { CodeGroup } from '../code.tsx'
-import { Row, Col, Properties, Property, Heading, SubProperty, Paragraph } from '../md.tsx'
+import { Row, Col, Properties, Property, Heading, SubProperty } from '../md.tsx'
 
 # チャットアプリ API
 

web/app/components/develop/template/template_workflow.en.mdx

@@ -1,5 +1,5 @@
 import { CodeGroup } from '../code.tsx'
-import { Row, Col, Properties, Property, Heading, SubProperty, Paragraph } from '../md.tsx'
+import { Row, Col, Properties, Property, Heading, SubProperty } from '../md.tsx'
 
 # Workflow App API
 

web/app/components/develop/template/template_workflow.ja.mdx

@@ -1,5 +1,5 @@
 import { CodeGroup } from '../code.tsx'
-import { Row, Col, Properties, Property, Heading, SubProperty, Paragraph } from '../md.tsx'
+import { Row, Col, Properties, Property, Heading, SubProperty } from '../md.tsx'
 
 # ワークフローアプリ API
 

web/app/components/develop/template/template_workflow.zh.mdx

@@ -1,5 +1,5 @@
 import { CodeGroup } from '../code.tsx'
-import { Row, Col, Properties, Property, Heading, SubProperty, Paragraph } from '../md.tsx'
+import { Row, Col, Properties, Property, Heading, SubProperty } from '../md.tsx'
 
 # Workflow 应用 API
 

web/app/components/header/account-dropdown/index.spec.tsx

@@ -1,10 +1,9 @@
-import type { AppRouterInstance } from 'next/dist/shared/lib/app-router-context.shared-runtime'
 import type { AppContextValue } from '@/context/app-context'
 import type { ModalContextState } from '@/context/modal-context'
 import type { ProviderContextState } from '@/context/provider-context'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { fireEvent, render, screen, waitFor } from '@testing-library/react'
-import { AppRouterContext } from 'next/dist/shared/lib/app-router-context.shared-runtime'
+import { useRouter } from 'next/navigation'
 import { Plan } from '@/app/components/billing/type'
 import { useAppContext } from '@/context/app-context'
 import { useGlobalPublicStore } from '@/context/global-public-context'
@@ -50,6 +49,14 @@ vi.mock('@/service/use-common', () => ({
   useLogout: vi.fn(),
 }))
 
+vi.mock('next/navigation', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('next/navigation')>()
+  return {
+    ...actual,
+    useRouter: vi.fn(),
+  }
+})
+
 vi.mock('@/context/i18n', () => ({
   useDocLink: () => (path: string) => `https://docs.dify.ai${path}`,
 }))
@@ -119,15 +126,6 @@ describe('AccountDropdown', () => {
   const mockSetShowAccountSettingModal = vi.fn()
 
   const renderWithRouter = (ui: React.ReactElement) => {
-    const mockRouter = {
-      push: mockPush,
-      replace: vi.fn(),
-      prefetch: vi.fn(),
-      back: vi.fn(),
-      forward: vi.fn(),
-      refresh: vi.fn(),
-    } as unknown as AppRouterInstance
-
     const queryClient = new QueryClient({
       defaultOptions: {
         queries: {
@@ -138,9 +136,7 @@ describe('AccountDropdown', () => {
 
     return render(
       <QueryClientProvider client={queryClient}>
-        <AppRouterContext.Provider value={mockRouter}>
-          {ui}
-        </AppRouterContext.Provider>
+        {ui}
       </QueryClientProvider>,
     )
   }
@@ -166,6 +162,14 @@ describe('AccountDropdown', () => {
     vi.mocked(useLogout).mockReturnValue({
       mutateAsync: mockLogout,
     } as unknown as ReturnType<typeof useLogout>)
+    vi.mocked(useRouter).mockReturnValue({
+      push: mockPush,
+      replace: vi.fn(),
+      prefetch: vi.fn(),
+      back: vi.fn(),
+      forward: vi.fn(),
+      refresh: vi.fn(),
+    })
   })
 
   afterEach(() => {

web/package.json

@@ -28,9 +28,12 @@
   "scripts": {
     "dev": "next dev",
     "dev:inspect": "next dev --inspect",
+    "dev:vinext": "vinext dev",
     "build": "next build",
     "build:docker": "next build && node scripts/optimize-standalone.js",
+    "build:vinext": "vinext build",
     "start": "node ./scripts/copy-and-start.mjs",
+    "start:vinext": "vinext start",
     "lint": "eslint --cache --concurrency=auto",
     "lint:ci": "eslint --cache --concurrency 2",
     "lint:fix": "pnpm lint --fix",
@@ -173,6 +176,7 @@
     "@iconify-json/ri": "1.2.9",
     "@mdx-js/loader": "3.1.1",
     "@mdx-js/react": "3.1.1",
+    "@mdx-js/rollup": "3.1.1",
     "@next/eslint-plugin-next": "16.1.6",
     "@next/mdx": "16.1.5",
     "@rgrove/parse-xml": "4.2.0",
@@ -211,6 +215,7 @@
     "@typescript-eslint/parser": "8.54.0",
     "@typescript/native-preview": "7.0.0-dev.20251209.1",
     "@vitejs/plugin-react": "5.1.2",
+    "@vitejs/plugin-rsc": "0.5.20",
     "@vitest/coverage-v8": "4.0.17",
     "autoprefixer": "10.4.21",
     "code-inspector-plugin": "1.3.6",
@@ -233,6 +238,7 @@
     "postcss": "8.5.6",
     "postcss-js": "5.0.3",
     "react-scan": "0.4.3",
+    "react-server-dom-webpack": "19.2.4",
     "sass": "1.93.2",
     "serwist": "9.5.4",
     "storybook": "10.2.0",
@@ -240,6 +246,7 @@
     "tsx": "4.21.0",
     "typescript": "5.9.3",
     "uglify-js": "3.19.3",
+    "vinext": "https://pkg.pr.new/hyoban/vinext@5be0ce0",
     "vite": "7.3.1",
     "vite-tsconfig-paths": "6.0.4",
     "vitest": "4.0.17",

web/vite.config.ts

@@ -1,16 +1,60 @@
+import type { Plugin } from 'vite'
 import path from 'node:path'
 import { fileURLToPath } from 'node:url'
+import mdx from '@mdx-js/rollup'
 import react from '@vitejs/plugin-react'
+import vinext from 'vinext'
 import { defineConfig } from 'vite'
 import tsconfigPaths from 'vite-tsconfig-paths'
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url))
+const isCI = !!process.env.CI
 
-export default defineConfig({
-  plugins: [tsconfigPaths(), react()],
-  resolve: {
-    alias: {
-      '~@': __dirname,
+export default defineConfig(({ mode }) => {
+  return {
+    plugins: [
+      ...(mode === 'test'
+        ? [
+            react(),
+            {
+              // Stub .mdx files so components importing them can be unit-tested
+              name: 'mdx-stub',
+              enforce: 'pre',
+              transform(_, id) {
+                if (id.endsWith('.mdx'))
+                  return { code: 'export default () => null', map: null }
+              },
+            } as Plugin,
+          ]
+        : [
+            mdx(),
+            vinext(),
+          ]),
+      tsconfigPaths(),
+    ],
+    resolve: {
+      alias: {
+        '~@': __dirname,
+      },
     },
-  },
+
+    // vinext related config
+    optimizeDeps: {
+      exclude: ['nuqs'],
+    },
+    server: {
+      port: 3000,
+    },
+
+    // Vitest config
+    test: {
+      environment: 'jsdom',
+      globals: true,
+      setupFiles: ['./vitest.setup.ts'],
+      coverage: {
+        provider: 'v8',
+        reporter: isCI ? ['json', 'json-summary'] : ['text', 'json', 'json-summary'],
+      },
+    },
+  }
 })

web/vitest.config.ts

@@ -1,27 +0,0 @@
-import { defineConfig, mergeConfig } from 'vitest/config'
-import viteConfig from './vite.config'
-
-const isCI = !!process.env.CI
-
-export default mergeConfig(viteConfig, defineConfig({
-  plugins: [
-    {
-      // Stub .mdx files so components importing them can be unit-tested
-      name: 'mdx-stub',
-      enforce: 'pre',
-      transform(_, id) {
-        if (id.endsWith('.mdx'))
-          return { code: 'export default () => null', map: null }
-      },
-    },
-  ],
-  test: {
-    environment: 'jsdom',
-    globals: true,
-    setupFiles: ['./vitest.setup.ts'],
-    coverage: {
-      provider: 'v8',
-      reporter: isCI ? ['json', 'json-summary'] : ['text', 'json', 'json-summary'],
-    },
-  },
-}))