chore: add vinext as dev server (#32559)

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: yyh <92089059+lyzno1@users.noreply.github.com>

web/app/(commonLayout)/datasets/(datasetDetailLayout)/[datasetId]/layout-main.tsx

@@ -28,13 +28,13 @@ import { cn } from '@/utils/classnames'
 
 export type IAppDetailLayoutProps = {
   children: React.ReactNode
-  params: { datasetId: string }
+  datasetId: string
 }
 
 const DatasetDetailLayout: FC<IAppDetailLayoutProps> = (props) => {
   const {
     children,
-    params: { datasetId },
+    datasetId,
   } = props
   const { t } = useTranslation()
   const pathname = usePathname()

web/app/(commonLayout)/datasets/(datasetDetailLayout)/[datasetId]/layout.tsx

@@ -6,12 +6,11 @@ const DatasetDetailLayout = async (
     params: Promise<{ datasetId: string }>
   },
 ) => {
-  const params = await props.params
-
   const {
     children,
+    params,
   } = props
 
-  return <Main params={(await params)}>{children}</Main>
+  return <Main datasetId={(await params).datasetId}>{children}</Main>
 }
 export default DatasetDetailLayout

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",
@@ -210,14 +214,15 @@
     "@types/uuid": "10.0.0",
     "@typescript-eslint/parser": "8.56.1",
     "@typescript/native-preview": "7.0.0-dev.20251209.1",
-    "@vitejs/plugin-react": "5.1.2",
-    "@vitest/coverage-v8": "4.0.17",
+    "@vitejs/plugin-react": "5.1.4",
+    "@vitejs/plugin-rsc": "0.5.21",
+    "@vitest/coverage-v8": "4.0.18",
     "autoprefixer": "10.4.21",
     "code-inspector-plugin": "1.3.6",
     "cross-env": "10.1.0",
     "esbuild": "0.27.2",
     "eslint": "10.0.2",
-    "eslint-plugin-better-tailwindcss": "4.3.1",
+    "eslint-plugin-better-tailwindcss": "https://pkg.pr.new/hyoban/eslint-plugin-better-tailwindcss@a520d15",
     "eslint-plugin-hyoban": "0.11.2",
     "eslint-plugin-react-hooks": "7.0.1",
     "eslint-plugin-react-refresh": "0.5.2",
@@ -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.13",
@@ -240,9 +246,10 @@
     "tsx": "4.21.0",
     "typescript": "5.9.3",
     "uglify-js": "3.19.3",
+    "vinext": "https://pkg.pr.new/hyoban/vinext@e283197",
     "vite": "7.3.1",
-    "vite-tsconfig-paths": "6.0.4",
-    "vitest": "4.0.17",
+    "vite-tsconfig-paths": "6.1.1",
+    "vitest": "4.0.18",
     "vitest-canvas-mock": "1.1.3"
   },
   "pnpm": {

web/tailwind-common-config.ts

@@ -13,6 +13,14 @@ const _dirname = typeof __dirname !== 'undefined'
   ? __dirname
   : path.dirname(fileURLToPath(import.meta.url))
 
+const disableSVGOptimize = process.env.TAILWIND_MODE === 'ESLINT'
+const svgOptimizeConfig = {
+  cleanupSVG: !disableSVGOptimize,
+  deOptimisePaths: !disableSVGOptimize,
+  runSVGO: !disableSVGOptimize,
+  parseColors: !disableSVGOptimize,
+}
+
 const config = {
   theme: {
     typography,
@@ -167,11 +175,13 @@ const config = {
           source: path.resolve(_dirname, 'app/components/base/icons/assets/public'),
           prefix: 'custom-public',
           ignoreImportErrors: true,
+          ...svgOptimizeConfig,
         }),
         ...importSvgCollections({
           source: path.resolve(_dirname, 'app/components/base/icons/assets/vender'),
           prefix: 'custom-vender',
           ignoreImportErrors: true,
+          ...svgOptimizeConfig,
         }),
       },
       extraProperties: {

web/vite.config.ts

@@ -1,16 +1,60 @@
+import type { Plugin } from 'vite'
 import path from 'node:path'
 import { fileURLToPath } from 'node:url'
 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'
+      ? [
+          tsconfigPaths(),
+          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,
+        ]
+      : [
+          vinext(),
+        ],
+    resolve: {
+      alias: {
+        '~@': __dirname,
+      },
     },
-  },
+
+    // vinext related config
+    ...(mode !== 'test'
+      ? {
+          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'],
-    },
-  },
-}))