From be45562e49a87dec158aec132ec0948e78d5cd22 Mon Sep 17 00:00:00 2001 From: Birk Skyum Date: Wed, 19 Mar 2025 01:25:10 +0100 Subject: [PATCH 001/114] first pass --- packages/vue-router/README.md | 29 + packages/vue-router/eslint.config.ts | 14 + packages/vue-router/package.json | 81 + packages/vue-router/src/Asset.tsx | 24 + packages/vue-router/src/CatchBoundary.tsx | 74 + packages/vue-router/src/HeadContent.tsx | 154 + packages/vue-router/src/Match.tsx | 366 ++ packages/vue-router/src/Matches.tsx | 243 + packages/vue-router/src/RouterProvider.tsx | 79 + packages/vue-router/src/SafeFragment.tsx | 3 + packages/vue-router/src/ScriptOnce.tsx | 30 + packages/vue-router/src/Scripts.tsx | 65 + packages/vue-router/src/ScrollRestoration.tsx | 69 + packages/vue-router/src/Transitioner.tsx | 149 + packages/vue-router/src/awaited.tsx | 44 + packages/vue-router/src/fileRoute.ts | 234 + packages/vue-router/src/history.ts | 9 + packages/vue-router/src/index.tsx | 370 ++ .../vue-router/src/lazyRouteComponent.tsx | 115 + packages/vue-router/src/link.tsx | 569 ++ packages/vue-router/src/matchContext.tsx | 10 + packages/vue-router/src/not-found.tsx | 42 + .../vue-router/src/renderRouteNotFound.tsx | 26 + packages/vue-router/src/route.ts | 531 ++ packages/vue-router/src/router.ts | 103 + packages/vue-router/src/routerContext.tsx | 24 + .../vue-router/src/scroll-restoration.tsx | 29 + packages/vue-router/src/typePrimitives.ts | 74 + packages/vue-router/src/useBlocker.tsx | 302 ++ packages/vue-router/src/useCanGoBack.ts | 5 + packages/vue-router/src/useLoaderData.tsx | 50 + packages/vue-router/src/useLoaderDeps.tsx | 46 + packages/vue-router/src/useLocation.tsx | 30 + packages/vue-router/src/useMatch.tsx | 96 + packages/vue-router/src/useNavigate.tsx | 40 + packages/vue-router/src/useParams.tsx | 71 + packages/vue-router/src/useRouteContext.ts | 31 + packages/vue-router/src/useRouter.tsx | 15 + packages/vue-router/src/useRouterState.tsx | 36 + packages/vue-router/src/useSearch.tsx | 71 + packages/vue-router/src/utils.ts | 79 + packages/vue-router/tests/Matches.test-d.tsx | 236 + packages/vue-router/tests/Matches.test.tsx | 124 + .../tests/RouterProvider.test-d.tsx | 50 + packages/vue-router/tests/Scripts.test.tsx | 200 + packages/vue-router/tests/blocker.test.tsx | 194 + .../vue-router/tests/createLazyRoute.test.tsx | 95 + .../vue-router/tests/errorComponent.test.tsx | 136 + .../vue-router/tests/fileRoute.test-d.tsx | 102 + packages/vue-router/tests/fileRoute.test.ts | 50 + packages/vue-router/tests/index.test.tsx | 564 ++ packages/vue-router/tests/lazy/heavy.tsx | 8 + .../tests/lazy/mockHeavyDependenciesRoute.tsx | 6 + packages/vue-router/tests/lazy/normal.tsx | 13 + packages/vue-router/tests/link.bench.tsx | 180 + packages/vue-router/tests/link.test-d.tsx | 4590 +++++++++++++++++ packages/vue-router/tests/link.test.tsx | 4412 ++++++++++++++++ packages/vue-router/tests/loaders.test.tsx | 319 ++ packages/vue-router/tests/navigate.test.tsx | 569 ++ packages/vue-router/tests/redirect.test.tsx | 350 ++ .../vue-router/tests/redirects.test-d.tsx | 43 + packages/vue-router/tests/route.test-d.tsx | 1761 +++++++ packages/vue-router/tests/route.test.tsx | 387 ++ packages/vue-router/tests/routeApi.test-d.tsx | 110 + .../vue-router/tests/routeContext.test.tsx | 3114 +++++++++++ packages/vue-router/tests/router.test-d.tsx | 252 + packages/vue-router/tests/router.test.tsx | 1597 ++++++ .../tests/searchMiddleware.test.tsx | 178 + packages/vue-router/tests/setupTests.tsx | 4 + .../vue-router/tests/useBlocker.test-d.tsx | 119 + packages/vue-router/tests/useBlocker.test.tsx | 424 ++ .../vue-router/tests/useCanGoBack.test.tsx | 94 + .../vue-router/tests/useLoaderData.test-d.tsx | 379 ++ .../vue-router/tests/useLocation.test-d.tsx | 38 + packages/vue-router/tests/useMatch.test-d.tsx | 81 + packages/vue-router/tests/useMatch.test.tsx | 119 + .../vue-router/tests/useNavigate.test-d.tsx | 65 + .../vue-router/tests/useNavigate.test.tsx | 1456 ++++++ .../vue-router/tests/useParams.test-d.tsx | 279 + .../tests/useRouteContext.test-d.tsx | 322 ++ .../tests/useRouterState.test-d.tsx | 66 + .../vue-router/tests/useSearch.test-d.tsx | 598 +++ packages/vue-router/tests/utils.ts | 56 + packages/vue-router/tsconfig.build.json | 14 + packages/vue-router/tsconfig.json | 8 + packages/vue-router/tsconfig.legacy.json | 4 + packages/vue-router/vite.config.ts | 30 + pnpm-lock.yaml | 759 ++- 88 files changed, 28957 insertions(+), 30 deletions(-) create mode 100644 packages/vue-router/README.md create mode 100644 packages/vue-router/eslint.config.ts create mode 100644 packages/vue-router/package.json create mode 100644 packages/vue-router/src/Asset.tsx create mode 100644 packages/vue-router/src/CatchBoundary.tsx create mode 100644 packages/vue-router/src/HeadContent.tsx create mode 100644 packages/vue-router/src/Match.tsx create mode 100644 packages/vue-router/src/Matches.tsx create mode 100644 packages/vue-router/src/RouterProvider.tsx create mode 100644 packages/vue-router/src/SafeFragment.tsx create mode 100644 packages/vue-router/src/ScriptOnce.tsx create mode 100644 packages/vue-router/src/Scripts.tsx create mode 100644 packages/vue-router/src/ScrollRestoration.tsx create mode 100644 packages/vue-router/src/Transitioner.tsx create mode 100644 packages/vue-router/src/awaited.tsx create mode 100644 packages/vue-router/src/fileRoute.ts create mode 100644 packages/vue-router/src/history.ts create mode 100644 packages/vue-router/src/index.tsx create mode 100644 packages/vue-router/src/lazyRouteComponent.tsx create mode 100644 packages/vue-router/src/link.tsx create mode 100644 packages/vue-router/src/matchContext.tsx create mode 100644 packages/vue-router/src/not-found.tsx create mode 100644 packages/vue-router/src/renderRouteNotFound.tsx create mode 100644 packages/vue-router/src/route.ts create mode 100644 packages/vue-router/src/router.ts create mode 100644 packages/vue-router/src/routerContext.tsx create mode 100644 packages/vue-router/src/scroll-restoration.tsx create mode 100644 packages/vue-router/src/typePrimitives.ts create mode 100644 packages/vue-router/src/useBlocker.tsx create mode 100644 packages/vue-router/src/useCanGoBack.ts create mode 100644 packages/vue-router/src/useLoaderData.tsx create mode 100644 packages/vue-router/src/useLoaderDeps.tsx create mode 100644 packages/vue-router/src/useLocation.tsx create mode 100644 packages/vue-router/src/useMatch.tsx create mode 100644 packages/vue-router/src/useNavigate.tsx create mode 100644 packages/vue-router/src/useParams.tsx create mode 100644 packages/vue-router/src/useRouteContext.ts create mode 100644 packages/vue-router/src/useRouter.tsx create mode 100644 packages/vue-router/src/useRouterState.tsx create mode 100644 packages/vue-router/src/useSearch.tsx create mode 100644 packages/vue-router/src/utils.ts create mode 100644 packages/vue-router/tests/Matches.test-d.tsx create mode 100644 packages/vue-router/tests/Matches.test.tsx create mode 100644 packages/vue-router/tests/RouterProvider.test-d.tsx create mode 100644 packages/vue-router/tests/Scripts.test.tsx create mode 100644 packages/vue-router/tests/blocker.test.tsx create mode 100644 packages/vue-router/tests/createLazyRoute.test.tsx create mode 100644 packages/vue-router/tests/errorComponent.test.tsx create mode 100644 packages/vue-router/tests/fileRoute.test-d.tsx create mode 100644 packages/vue-router/tests/fileRoute.test.ts create mode 100644 packages/vue-router/tests/index.test.tsx create mode 100644 packages/vue-router/tests/lazy/heavy.tsx create mode 100644 packages/vue-router/tests/lazy/mockHeavyDependenciesRoute.tsx create mode 100644 packages/vue-router/tests/lazy/normal.tsx create mode 100644 packages/vue-router/tests/link.bench.tsx create mode 100644 packages/vue-router/tests/link.test-d.tsx create mode 100644 packages/vue-router/tests/link.test.tsx create mode 100644 packages/vue-router/tests/loaders.test.tsx create mode 100644 packages/vue-router/tests/navigate.test.tsx create mode 100644 packages/vue-router/tests/redirect.test.tsx create mode 100644 packages/vue-router/tests/redirects.test-d.tsx create mode 100644 packages/vue-router/tests/route.test-d.tsx create mode 100644 packages/vue-router/tests/route.test.tsx create mode 100644 packages/vue-router/tests/routeApi.test-d.tsx create mode 100644 packages/vue-router/tests/routeContext.test.tsx create mode 100644 packages/vue-router/tests/router.test-d.tsx create mode 100644 packages/vue-router/tests/router.test.tsx create mode 100644 packages/vue-router/tests/searchMiddleware.test.tsx create mode 100644 packages/vue-router/tests/setupTests.tsx create mode 100644 packages/vue-router/tests/useBlocker.test-d.tsx create mode 100644 packages/vue-router/tests/useBlocker.test.tsx create mode 100644 packages/vue-router/tests/useCanGoBack.test.tsx create mode 100644 packages/vue-router/tests/useLoaderData.test-d.tsx create mode 100644 packages/vue-router/tests/useLocation.test-d.tsx create mode 100644 packages/vue-router/tests/useMatch.test-d.tsx create mode 100644 packages/vue-router/tests/useMatch.test.tsx create mode 100644 packages/vue-router/tests/useNavigate.test-d.tsx create mode 100644 packages/vue-router/tests/useNavigate.test.tsx create mode 100644 packages/vue-router/tests/useParams.test-d.tsx create mode 100644 packages/vue-router/tests/useRouteContext.test-d.tsx create mode 100644 packages/vue-router/tests/useRouterState.test-d.tsx create mode 100644 packages/vue-router/tests/useSearch.test-d.tsx create mode 100644 packages/vue-router/tests/utils.ts create mode 100644 packages/vue-router/tsconfig.build.json create mode 100644 packages/vue-router/tsconfig.json create mode 100644 packages/vue-router/tsconfig.legacy.json create mode 100644 packages/vue-router/vite.config.ts diff --git a/packages/vue-router/README.md b/packages/vue-router/README.md new file mode 100644 index 00000000000..fab2fd013cc --- /dev/null +++ b/packages/vue-router/README.md @@ -0,0 +1,29 @@ + + +# TanStack Solid Router + +![TanStack Router Header](https://github.com/tanstack/router/raw/main/media/header.png) + +🤖 Type-safe router w/ built-in caching & URL state management for Solid! + + + #TanStack + + + + + + + + semantic-release + + Join the discussion on Github +Best of JS + + + + + + + +## Visit [tanstack.com/router](https://tanstack.com/router) for docs, guides, API and more! diff --git a/packages/vue-router/eslint.config.ts b/packages/vue-router/eslint.config.ts new file mode 100644 index 00000000000..032b5ceced7 --- /dev/null +++ b/packages/vue-router/eslint.config.ts @@ -0,0 +1,14 @@ +import rootConfig from '../../eslint.config.js' + +export default [ + ...rootConfig, + { + files: ['src/**/*.{ts,tsx}', 'tests/**/*.{ts,tsx}'], + plugins: { + }, + rules: { + 'unused-imports/no-unused-vars': 'off', + '@typescript-eslint/no-unnecessary-condition': 'off', + }, + }, +] diff --git a/packages/vue-router/package.json b/packages/vue-router/package.json new file mode 100644 index 00000000000..658f1806fac --- /dev/null +++ b/packages/vue-router/package.json @@ -0,0 +1,81 @@ +{ + "name": "@tanstack/vue-router", + "version": "1.0.0", + "description": "Modern and scalable routing for Vue applications", + "author": "Tanner Linsley", + "license": "MIT", + "repository": { + "type": "git", + "url": "https://github.com/TanStack/router.git", + "directory": "packages/vue-router" + }, + "homepage": "https://tanstack.com/router", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/tannerlinsley" + }, + "keywords": [ + "vue", + "location", + "router", + "routing", + "async", + "async router", + "typescript" + ], + "scripts": { + "clean": "rimraf ./dist && rimraf ./coverage", + "test:eslint": "eslint", + "test:types": "tsc -p tsconfig.legacy.json", + "test:unit": "vitest", + "test:unit:dev": "pnpm run test:unit --watch --hideSkippedTests", + "test:perf": "vitest bench", + "test:perf:dev": "pnpm run test:perf --watch --hideSkippedTests", + "test:build": "publint --strict && attw --ignore-rules no-resolution --pack .", + "build": "vite build && tsc -p tsconfig.build.json" + }, + "type": "module", + "types": "dist/esm/index.d.ts", + "main": "dist/cjs/index.cjs", + "module": "dist/esm/index.js", + "exports": { + ".": { + "import": { + "types": "./dist/esm/index.d.ts", + "default": "./dist/esm/index.js" + }, + "require": { + "types": "./dist/cjs/index.d.cts", + "default": "./dist/cjs/index.cjs" + } + }, + "./package.json": "./package.json" + }, + "sideEffects": false, + "files": [ + "dist", + "src" + ], + "engines": { + "node": ">=12" + }, + "dependencies": { + "@tanstack/history": "workspace:*", + "@tanstack/router-core": "workspace:*", + "@tanstack/vue-store": "^0.7.0", + "jsesc": "^3.0.2", + "tiny-invariant": "^1.3.3", + "tiny-warning": "^1.0.3" + }, + "devDependencies": { + "@testing-library/vue": "^8.1.0", + "@types/jsesc": "^3.0.3", + "combinate": "^1.1.11", + "vue": "^3.3.0", + "zod": "^3.23.8", + "@vitejs/plugin-vue": "^5.2.3" + }, + "peerDependencies": { + "vue": "^3.3.0" + } +} diff --git a/packages/vue-router/src/Asset.tsx b/packages/vue-router/src/Asset.tsx new file mode 100644 index 00000000000..68f7a6aa1a9 --- /dev/null +++ b/packages/vue-router/src/Asset.tsx @@ -0,0 +1,24 @@ +import { Meta, Style, Title } from '@solidjs/meta' +import type { RouterManagedTag } from '@tanstack/router-core' + +export function Asset({ tag, attrs, children }: RouterManagedTag): any { + switch (tag) { + case 'title': + return {children} + case 'meta': + return + case 'link': + return + case 'style': + return diff --git a/e2e/vue-router/basic-file-based-jsx/src/routes/index.tsx b/e2e/vue-router/basic-file-based-jsx/src/routes/index.tsx index 7f936cca208..26bfcd03e09 100644 --- a/e2e/vue-router/basic-file-based-jsx/src/routes/index.tsx +++ b/e2e/vue-router/basic-file-based-jsx/src/routes/index.tsx @@ -1,4 +1,5 @@ import { createFileRoute } from '@tanstack/vue-router' +import VueLogo from '../components/VueLogo.vue' export const Route = createFileRoute('/')({ component: IndexComponent, @@ -8,6 +9,7 @@ function IndexComponent() { return (

Welcome Home!

+
) } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 3fdea486eea..a5d5e7aa842 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -3769,6 +3769,9 @@ importers: vite: specifier: ^7.1.7 version: 7.1.7(@types/node@22.10.2)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.37.0)(tsx@4.20.3)(yaml@2.8.1) + vue-tsc: + specifier: ^3.1.5 + version: 3.1.5(typescript@5.8.3) e2e/vue-router/basic-file-based-sfc: dependencies: @@ -5202,7 +5205,7 @@ importers: version: 19.2.2(@types/react@19.2.2) '@vitejs/plugin-react': specifier: ^4.3.4 - version: 4.3.4(vite@7.1.7(@types/node@22.10.2)(jiti@1.21.7)(lightningcss@1.30.2)(terser@5.37.0)(tsx@4.20.3)(yaml@2.8.1)) + version: 4.3.4(vite@7.1.7(@types/node@22.10.2)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.37.0)(tsx@4.20.3)(yaml@2.8.1)) autoprefixer: specifier: ^10.4.20 version: 10.4.20(postcss@8.5.3) @@ -5217,10 +5220,10 @@ importers: version: 5.8.2 vite: specifier: ^7.1.7 - version: 7.1.7(@types/node@22.10.2)(jiti@1.21.7)(lightningcss@1.30.2)(terser@5.37.0)(tsx@4.20.3)(yaml@2.8.1) + version: 7.1.7(@types/node@22.10.2)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.37.0)(tsx@4.20.3)(yaml@2.8.1) vite-plugin-dts: specifier: 4.0.3 - version: 4.0.3(@types/node@22.10.2)(rollup@4.52.5)(typescript@5.8.2)(vite@7.1.7(@types/node@22.10.2)(jiti@1.21.7)(lightningcss@1.30.2)(terser@5.37.0)(tsx@4.20.3)(yaml@2.8.1)) + version: 4.0.3(@types/node@22.10.2)(rollup@4.52.5)(typescript@5.8.2)(vite@7.1.7(@types/node@22.10.2)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.37.0)(tsx@4.20.3)(yaml@2.8.1)) examples/react/router-monorepo-react-query/packages/post-feature: dependencies: @@ -6249,7 +6252,7 @@ importers: version: 7.1.7(@types/node@22.10.2)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.37.0)(tsx@4.20.3)(yaml@2.8.1) vitest: specifier: ^3.2.4 - version: 3.2.4(@types/node@22.10.2)(@vitest/browser@3.0.6)(@vitest/ui@3.0.6)(jiti@2.6.1)(jsdom@27.0.0(postcss@8.5.6))(lightningcss@1.30.2)(msw@2.7.0(@types/node@22.10.2)(typescript@5.9.2))(terser@5.37.0)(tsx@4.20.3)(yaml@2.8.1) + version: 3.2.4(@types/node@22.10.2)(@vitest/browser@3.0.6(@types/node@22.10.2)(playwright@1.56.1)(typescript@5.9.2)(vite@7.1.7(@types/node@22.10.2)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.37.0)(tsx@4.20.3)(yaml@2.8.1))(vitest@3.2.4))(@vitest/ui@3.0.6(vitest@3.2.4))(jiti@2.6.1)(jsdom@27.0.0(postcss@8.5.6))(lightningcss@1.30.2)(msw@2.7.0(@types/node@22.10.2)(typescript@5.9.2))(terser@5.37.0)(tsx@4.20.3)(yaml@2.8.1) web-vitals: specifier: ^5.1.0 version: 5.1.0 @@ -8894,7 +8897,7 @@ importers: version: 2.11.10(@testing-library/jest-dom@6.6.3)(solid-js@1.9.10)(vite@7.1.7(@types/node@22.10.2)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.37.0)(tsx@4.20.3)(yaml@2.8.1)) vitest: specifier: ^3.2.4 - version: 3.2.4(@types/node@22.10.2)(@vitest/browser@3.0.6)(@vitest/ui@3.0.6)(jiti@2.6.1)(jsdom@27.0.0(postcss@8.5.6))(lightningcss@1.30.2)(msw@2.7.0(@types/node@22.10.2)(typescript@5.9.2))(terser@5.37.0)(tsx@4.20.3)(yaml@2.8.1) + version: 3.2.4(@types/node@22.10.2)(@vitest/browser@3.0.6(@types/node@22.10.2)(playwright@1.56.1)(typescript@5.9.2)(vite@7.1.7(@types/node@22.10.2)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.37.0)(tsx@4.20.3)(yaml@2.8.1))(vitest@3.2.4))(@vitest/ui@3.0.6(vitest@3.2.4))(jiti@2.6.1)(jsdom@27.0.0(postcss@8.5.6))(lightningcss@1.30.2)(msw@2.7.0(@types/node@22.10.2)(typescript@5.9.2))(terser@5.37.0)(tsx@4.20.3)(yaml@2.8.1) web-vitals: specifier: ^5.1.0 version: 5.1.0 @@ -9388,31 +9391,31 @@ importers: version: 9.36.0 '@typescript-eslint/eslint-plugin': specifier: ^8.0.0 - version: 8.44.1(@typescript-eslint/parser@8.44.1(eslint@9.22.0(jiti@2.6.1))(typescript@5.9.2))(eslint@9.22.0(jiti@2.6.1))(typescript@5.9.2) + version: 8.44.1(@typescript-eslint/parser@8.44.1(eslint@9.22.0(jiti@1.21.7))(typescript@5.9.2))(eslint@9.22.0(jiti@1.21.7))(typescript@5.9.2) '@typescript-eslint/parser': specifier: ^8.0.0 - version: 8.44.1(eslint@9.22.0(jiti@2.6.1))(typescript@5.9.2) + version: 8.44.1(eslint@9.22.0(jiti@1.21.7))(typescript@5.9.2) '@vitejs/plugin-vue': specifier: ^5.2.3 - version: 5.2.4(vite@7.1.7(@types/node@22.10.2)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.37.0)(tsx@4.20.3)(yaml@2.8.1))(vue@3.5.25(typescript@5.9.2)) + version: 5.2.4(vite@7.1.7(@types/node@22.10.2)(jiti@1.21.7)(lightningcss@1.30.2)(terser@5.37.0)(tsx@4.20.3)(yaml@2.8.1))(vue@3.5.25(typescript@5.9.2)) '@vitejs/plugin-vue-jsx': specifier: ^4.1.2 - version: 4.2.0(vite@7.1.7(@types/node@22.10.2)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.37.0)(tsx@4.20.3)(yaml@2.8.1))(vue@3.5.25(typescript@5.9.2)) + version: 4.2.0(vite@7.1.7(@types/node@22.10.2)(jiti@1.21.7)(lightningcss@1.30.2)(terser@5.37.0)(tsx@4.20.3)(yaml@2.8.1))(vue@3.5.25(typescript@5.9.2)) eslint: specifier: ^9.22.0 - version: 9.22.0(jiti@2.6.1) + version: 9.22.0(jiti@1.21.7) eslint-plugin-vue: specifier: ^9.28.0 - version: 9.33.0(eslint@9.22.0(jiti@2.6.1)) + version: 9.33.0(eslint@9.22.0(jiti@1.21.7)) typescript: specifier: ^5.7.2 version: 5.9.2 vite: specifier: ^7.1.7 - version: 7.1.7(@types/node@22.10.2)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.37.0)(tsx@4.20.3)(yaml@2.8.1) + version: 7.1.7(@types/node@22.10.2)(jiti@1.21.7)(lightningcss@1.30.2)(terser@5.37.0)(tsx@4.20.3)(yaml@2.8.1) vue-eslint-parser: specifier: ^9.4.3 - version: 9.4.3(eslint@9.22.0(jiti@2.6.1)) + version: 9.4.3(eslint@9.22.0(jiti@1.21.7)) examples/vue/basic-file-based-jsx: dependencies: @@ -15929,12 +15932,21 @@ packages: '@volar/language-core@2.4.11': resolution: {integrity: sha512-lN2C1+ByfW9/JRPpqScuZt/4OrUUse57GLI6TbLgTIqBVemdl1wNcZ1qYGEo2+Gw8coYLgCy7SuKqn6IrQcQgg==} + '@volar/language-core@2.4.23': + resolution: {integrity: sha512-hEEd5ET/oSmBC6pi1j6NaNYRWoAiDhINbT8rmwtINugR39loROSlufGdYMF9TaKGfz+ViGs1Idi3mAhnuPcoGQ==} + '@volar/source-map@2.4.11': resolution: {integrity: sha512-ZQpmafIGvaZMn/8iuvCFGrW3smeqkq/IIh9F1SdSx9aUl0J4Iurzd6/FhmjNO5g2ejF3rT45dKskgXWiofqlZQ==} + '@volar/source-map@2.4.23': + resolution: {integrity: sha512-Z1Uc8IB57Lm6k7q6KIDu/p+JWtf3xsXJqAX/5r18hYOTpJyBn0KXUR8oTJ4WFYOcDzWC9n3IflGgHowx6U6z9Q==} + '@volar/typescript@2.4.11': resolution: {integrity: sha512-2DT+Tdh88Spp5PyPbqhyoYavYCPDsqbHLFwcUI9K1NlY1YgUJvujGdrqUp0zWxnW7KWNTr3xSpMuv2WnaTKDAw==} + '@volar/typescript@2.4.23': + resolution: {integrity: sha512-lAB5zJghWxVPqfcStmAP1ZqQacMpe90UrP5RJ3arDyrhy4aCUQqmxPPLB2PWDKugvylmO41ljK7vZ+t6INMTag==} + '@vue/babel-helper-vue-transform-on@1.5.0': resolution: {integrity: sha512-0dAYkerNhhHutHZ34JtTl2czVQHUNWv6xEbkdF5W+Yrv5pCWsqjeORdOgbtW2I9gWlt+wBmVn+ttqN9ZxR5tzA==} @@ -15980,6 +15992,14 @@ packages: typescript: optional: true + '@vue/language-core@3.1.5': + resolution: {integrity: sha512-FMcqyzWN+sYBeqRMWPGT2QY0mUasZMVIuHvmb5NT3eeqPrbHBYtCP8JWEUCDCgM+Zr62uuWY/qoeBrPrzfa78w==} + peerDependencies: + typescript: '*' + peerDependenciesMeta: + typescript: + optional: true + '@vue/reactivity@3.5.25': resolution: {integrity: sha512-5xfAypCQepv4Jog1U4zn8cZIcbKKFka3AgWHEFQeK65OW+Ys4XybP6z2kKgws4YB43KGpqp5D/K3go2UPPunLA==} @@ -16226,6 +16246,9 @@ packages: ajv@8.17.1: resolution: {integrity: sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==} + alien-signals@3.1.1: + resolution: {integrity: sha512-ogkIWbVrLwKtHY6oOAXaYkAxP+cTH7V5FZ5+Tm4NZFd8VDZ6uNMDrfzqctTZ42eTMCSR3ne3otpcxmqSnFfPYA==} + ansi-colors@4.1.3: resolution: {integrity: sha512-/6w/C21Pm1A7aZitlI5Ni/2J6FFQN8i1Cvz3kHABAAbw93v/NlvKdVOqz7CCWz/3iv/JplRSEEZ83XION15ovw==} engines: {node: '>=6'} @@ -21957,6 +21980,12 @@ packages: peerDependencies: typescript: '>=5.0.0' + vue-tsc@3.1.5: + resolution: {integrity: sha512-L/G9IUjOWhBU0yun89rv8fKqmKC+T0HfhrFjlIml71WpfBv9eb4E9Bev8FMbyueBIU9vxQqbd+oOsVcDa5amGw==} + hasBin: true + peerDependencies: + typescript: '>=5.0.0' + vue@3.5.25: resolution: {integrity: sha512-YLVdgv2K13WJ6n+kD5owehKtEXwdwXuj2TTyJMsO7pSeKw2bfRNZGjhB7YzrpbMYj5b5QsUebHpOqR3R3ziy/g==} peerDependencies: @@ -23575,11 +23604,21 @@ snapshots: '@esbuild/win32-x64@0.25.4': optional: true + '@eslint-community/eslint-utils@4.4.1(eslint@9.22.0(jiti@1.21.7))': + dependencies: + eslint: 9.22.0(jiti@1.21.7) + eslint-visitor-keys: 3.4.3 + '@eslint-community/eslint-utils@4.4.1(eslint@9.22.0(jiti@2.6.1))': dependencies: eslint: 9.22.0(jiti@2.6.1) eslint-visitor-keys: 3.4.3 + '@eslint-community/eslint-utils@4.9.0(eslint@9.22.0(jiti@1.21.7))': + dependencies: + eslint: 9.22.0(jiti@1.21.7) + eslint-visitor-keys: 3.4.3 + '@eslint-community/eslint-utils@4.9.0(eslint@9.22.0(jiti@2.6.1))': dependencies: eslint: 9.22.0(jiti@2.6.1) @@ -27884,6 +27923,23 @@ snapshots: '@types/node': 22.10.2 optional: true + '@typescript-eslint/eslint-plugin@8.44.1(@typescript-eslint/parser@8.44.1(eslint@9.22.0(jiti@1.21.7))(typescript@5.9.2))(eslint@9.22.0(jiti@1.21.7))(typescript@5.9.2)': + dependencies: + '@eslint-community/regexpp': 4.12.1 + '@typescript-eslint/parser': 8.44.1(eslint@9.22.0(jiti@1.21.7))(typescript@5.9.2) + '@typescript-eslint/scope-manager': 8.44.1 + '@typescript-eslint/type-utils': 8.44.1(eslint@9.22.0(jiti@1.21.7))(typescript@5.9.2) + '@typescript-eslint/utils': 8.44.1(eslint@9.22.0(jiti@1.21.7))(typescript@5.9.2) + '@typescript-eslint/visitor-keys': 8.44.1 + eslint: 9.22.0(jiti@1.21.7) + graphemer: 1.4.0 + ignore: 7.0.5 + natural-compare: 1.4.0 + ts-api-utils: 2.1.0(typescript@5.9.2) + typescript: 5.9.2 + transitivePeerDependencies: + - supports-color + '@typescript-eslint/eslint-plugin@8.44.1(@typescript-eslint/parser@8.44.1(eslint@9.22.0(jiti@2.6.1))(typescript@5.9.2))(eslint@9.22.0(jiti@2.6.1))(typescript@5.9.2)': dependencies: '@eslint-community/regexpp': 4.12.1 @@ -27901,6 +27957,18 @@ snapshots: transitivePeerDependencies: - supports-color + '@typescript-eslint/parser@8.44.1(eslint@9.22.0(jiti@1.21.7))(typescript@5.9.2)': + dependencies: + '@typescript-eslint/scope-manager': 8.44.1 + '@typescript-eslint/types': 8.44.1 + '@typescript-eslint/typescript-estree': 8.44.1(typescript@5.9.2) + '@typescript-eslint/visitor-keys': 8.44.1 + debug: 4.4.3 + eslint: 9.22.0(jiti@1.21.7) + typescript: 5.9.2 + transitivePeerDependencies: + - supports-color + '@typescript-eslint/parser@8.44.1(eslint@9.22.0(jiti@2.6.1))(typescript@5.9.2)': dependencies: '@typescript-eslint/scope-manager': 8.44.1 @@ -27960,6 +28028,18 @@ snapshots: transitivePeerDependencies: - supports-color + '@typescript-eslint/type-utils@8.44.1(eslint@9.22.0(jiti@1.21.7))(typescript@5.9.2)': + dependencies: + '@typescript-eslint/types': 8.44.1 + '@typescript-eslint/typescript-estree': 8.44.1(typescript@5.9.2) + '@typescript-eslint/utils': 8.44.1(eslint@9.22.0(jiti@1.21.7))(typescript@5.9.2) + debug: 4.4.3 + eslint: 9.22.0(jiti@1.21.7) + ts-api-utils: 2.1.0(typescript@5.9.2) + typescript: 5.9.2 + transitivePeerDependencies: + - supports-color + '@typescript-eslint/type-utils@8.44.1(eslint@9.22.0(jiti@2.6.1))(typescript@5.9.2)': dependencies: '@typescript-eslint/types': 8.44.1 @@ -28017,6 +28097,17 @@ snapshots: transitivePeerDependencies: - supports-color + '@typescript-eslint/utils@8.44.1(eslint@9.22.0(jiti@1.21.7))(typescript@5.9.2)': + dependencies: + '@eslint-community/eslint-utils': 4.9.0(eslint@9.22.0(jiti@1.21.7)) + '@typescript-eslint/scope-manager': 8.44.1 + '@typescript-eslint/types': 8.44.1 + '@typescript-eslint/typescript-estree': 8.44.1(typescript@5.9.2) + eslint: 9.22.0(jiti@1.21.7) + typescript: 5.9.2 + transitivePeerDependencies: + - supports-color + '@typescript-eslint/utils@8.44.1(eslint@9.22.0(jiti@2.6.1))(typescript@5.9.2)': dependencies: '@eslint-community/eslint-utils': 4.9.0(eslint@9.22.0(jiti@2.6.1)) @@ -28135,17 +28226,6 @@ snapshots: - rollup - supports-color - '@vitejs/plugin-react@4.3.4(vite@7.1.7(@types/node@22.10.2)(jiti@1.21.7)(lightningcss@1.30.2)(terser@5.37.0)(tsx@4.20.3)(yaml@2.8.1))': - dependencies: - '@babel/core': 7.28.5 - '@babel/plugin-transform-react-jsx-self': 7.25.9(@babel/core@7.28.5) - '@babel/plugin-transform-react-jsx-source': 7.25.9(@babel/core@7.28.5) - '@types/babel__core': 7.20.5 - react-refresh: 0.14.2 - vite: 7.1.7(@types/node@22.10.2)(jiti@1.21.7)(lightningcss@1.30.2)(terser@5.37.0)(tsx@4.20.3)(yaml@2.8.1) - transitivePeerDependencies: - - supports-color - '@vitejs/plugin-react@4.3.4(vite@7.1.7(@types/node@22.10.2)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.37.0)(tsx@4.20.3)(yaml@2.8.1))': dependencies: '@babel/core': 7.28.5 @@ -28205,6 +28285,17 @@ snapshots: transitivePeerDependencies: - supports-color + '@vitejs/plugin-vue-jsx@4.2.0(vite@7.1.7(@types/node@22.10.2)(jiti@1.21.7)(lightningcss@1.30.2)(terser@5.37.0)(tsx@4.20.3)(yaml@2.8.1))(vue@3.5.25(typescript@5.9.2))': + dependencies: + '@babel/core': 7.28.5 + '@babel/plugin-transform-typescript': 7.28.5(@babel/core@7.28.5) + '@rolldown/pluginutils': 1.0.0-beta.40 + '@vue/babel-plugin-jsx': 1.5.0(@babel/core@7.28.5) + vite: 7.1.7(@types/node@22.10.2)(jiti@1.21.7)(lightningcss@1.30.2)(terser@5.37.0)(tsx@4.20.3)(yaml@2.8.1) + vue: 3.5.25(typescript@5.9.2) + transitivePeerDependencies: + - supports-color + '@vitejs/plugin-vue-jsx@4.2.0(vite@7.1.7(@types/node@22.10.2)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.37.0)(tsx@4.20.3)(yaml@2.8.1))(vue@3.5.25(typescript@5.8.3))': dependencies: '@babel/core': 7.28.5 @@ -28227,6 +28318,11 @@ snapshots: transitivePeerDependencies: - supports-color + '@vitejs/plugin-vue@5.2.4(vite@7.1.7(@types/node@22.10.2)(jiti@1.21.7)(lightningcss@1.30.2)(terser@5.37.0)(tsx@4.20.3)(yaml@2.8.1))(vue@3.5.25(typescript@5.9.2))': + dependencies: + vite: 7.1.7(@types/node@22.10.2)(jiti@1.21.7)(lightningcss@1.30.2)(terser@5.37.0)(tsx@4.20.3)(yaml@2.8.1) + vue: 3.5.25(typescript@5.9.2) + '@vitejs/plugin-vue@5.2.4(vite@7.1.7(@types/node@22.10.2)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.37.0)(tsx@4.20.3)(yaml@2.8.1))(vue@3.5.25(typescript@5.8.3))': dependencies: vite: 7.1.7(@types/node@22.10.2)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.37.0)(tsx@4.20.3)(yaml@2.8.1) @@ -28339,14 +28435,26 @@ snapshots: dependencies: '@volar/source-map': 2.4.11 + '@volar/language-core@2.4.23': + dependencies: + '@volar/source-map': 2.4.23 + '@volar/source-map@2.4.11': {} + '@volar/source-map@2.4.23': {} + '@volar/typescript@2.4.11': dependencies: '@volar/language-core': 2.4.11 path-browserify: 1.0.1 vscode-uri: 3.0.8 + '@volar/typescript@2.4.23': + dependencies: + '@volar/language-core': 2.4.23 + path-browserify: 1.0.1 + vscode-uri: 3.0.8 + '@vue/babel-helper-vue-transform-on@1.5.0': {} '@vue/babel-plugin-jsx@1.5.0(@babel/core@7.28.5)': @@ -28450,6 +28558,18 @@ snapshots: optionalDependencies: typescript: 5.9.2 + '@vue/language-core@3.1.5(typescript@5.8.3)': + dependencies: + '@volar/language-core': 2.4.23 + '@vue/compiler-dom': 3.5.25 + '@vue/shared': 3.5.25 + alien-signals: 3.1.1 + muggle-string: 0.4.1 + path-browserify: 1.0.1 + picomatch: 4.0.3 + optionalDependencies: + typescript: 5.8.3 + '@vue/reactivity@3.5.25': dependencies: '@vue/shared': 3.5.25 @@ -28743,6 +28863,8 @@ snapshots: json-schema-traverse: 1.0.0 require-from-string: 2.0.2 + alien-signals@3.1.1: {} + ansi-colors@4.1.3: {} ansi-escapes@4.3.2: @@ -30395,16 +30517,16 @@ snapshots: optionalDependencies: '@typescript-eslint/eslint-plugin': 8.44.1(@typescript-eslint/parser@8.44.1(eslint@9.22.0(jiti@2.6.1))(typescript@5.9.2))(eslint@9.22.0(jiti@2.6.1))(typescript@5.9.2) - eslint-plugin-vue@9.33.0(eslint@9.22.0(jiti@2.6.1)): + eslint-plugin-vue@9.33.0(eslint@9.22.0(jiti@1.21.7)): dependencies: - '@eslint-community/eslint-utils': 4.9.0(eslint@9.22.0(jiti@2.6.1)) - eslint: 9.22.0(jiti@2.6.1) + '@eslint-community/eslint-utils': 4.9.0(eslint@9.22.0(jiti@1.21.7)) + eslint: 9.22.0(jiti@1.21.7) globals: 13.24.0 natural-compare: 1.4.0 nth-check: 2.1.1 postcss-selector-parser: 6.1.2 semver: 7.7.3 - vue-eslint-parser: 9.4.3(eslint@9.22.0(jiti@2.6.1)) + vue-eslint-parser: 9.4.3(eslint@9.22.0(jiti@1.21.7)) xml-name-validator: 4.0.0 transitivePeerDependencies: - supports-color @@ -30430,6 +30552,48 @@ snapshots: eslint-visitor-keys@4.2.1: {} + eslint@9.22.0(jiti@1.21.7): + dependencies: + '@eslint-community/eslint-utils': 4.4.1(eslint@9.22.0(jiti@1.21.7)) + '@eslint-community/regexpp': 4.12.1 + '@eslint/config-array': 0.19.2 + '@eslint/config-helpers': 0.1.0 + '@eslint/core': 0.12.0 + '@eslint/eslintrc': 3.3.0 + '@eslint/js': 9.22.0 + '@eslint/plugin-kit': 0.2.7 + '@humanfs/node': 0.16.6 + '@humanwhocodes/module-importer': 1.0.1 + '@humanwhocodes/retry': 0.4.2 + '@types/estree': 1.0.7 + '@types/json-schema': 7.0.15 + ajv: 6.12.6 + chalk: 4.1.2 + cross-spawn: 7.0.6 + debug: 4.4.0 + escape-string-regexp: 4.0.0 + eslint-scope: 8.3.0 + eslint-visitor-keys: 4.2.0 + espree: 10.3.0 + esquery: 1.6.0 + esutils: 2.0.3 + fast-deep-equal: 3.1.3 + file-entry-cache: 8.0.0 + find-up: 5.0.0 + glob-parent: 6.0.2 + ignore: 5.3.2 + imurmurhash: 0.1.4 + is-glob: 4.0.3 + json-stable-stringify-without-jsonify: 1.0.1 + lodash.merge: 4.6.2 + minimatch: 3.1.2 + natural-compare: 1.4.0 + optionator: 0.9.4 + optionalDependencies: + jiti: 1.21.7 + transitivePeerDependencies: + - supports-color + eslint@9.22.0(jiti@2.6.1): dependencies: '@eslint-community/eslint-utils': 4.4.1(eslint@9.22.0(jiti@2.6.1)) @@ -34867,26 +35031,6 @@ snapshots: - tsx - yaml - vite-plugin-dts@4.0.3(@types/node@22.10.2)(rollup@4.52.5)(typescript@5.8.2)(vite@7.1.7(@types/node@22.10.2)(jiti@1.21.7)(lightningcss@1.30.2)(terser@5.37.0)(tsx@4.20.3)(yaml@2.8.1)): - dependencies: - '@microsoft/api-extractor': 7.47.4(@types/node@22.10.2) - '@rollup/pluginutils': 5.1.4(rollup@4.52.5) - '@volar/typescript': 2.4.11 - '@vue/language-core': 2.0.29(typescript@5.8.2) - compare-versions: 6.1.1 - debug: 4.4.3 - kolorist: 1.8.0 - local-pkg: 0.5.1 - magic-string: 0.30.19 - typescript: 5.8.2 - vue-tsc: 2.0.29(typescript@5.8.2) - optionalDependencies: - vite: 7.1.7(@types/node@22.10.2)(jiti@1.21.7)(lightningcss@1.30.2)(terser@5.37.0)(tsx@4.20.3)(yaml@2.8.1) - transitivePeerDependencies: - - '@types/node' - - rollup - - supports-color - vite-plugin-dts@4.0.3(@types/node@22.10.2)(rollup@4.52.5)(typescript@5.8.2)(vite@7.1.7(@types/node@22.10.2)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.37.0)(tsx@4.20.3)(yaml@2.8.1)): dependencies: '@microsoft/api-extractor': 7.47.4(@types/node@22.10.2) @@ -35017,7 +35161,7 @@ snapshots: optionalDependencies: vite: 7.1.7(@types/node@22.10.2)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.37.0)(tsx@4.20.3)(yaml@2.8.1) - vitest@3.2.4(@types/node@22.10.2)(@vitest/browser@3.0.6)(@vitest/ui@3.0.6)(jiti@2.6.1)(jsdom@25.0.1)(lightningcss@1.30.2)(msw@2.7.0(@types/node@22.10.2)(typescript@5.9.2))(terser@5.37.0)(tsx@4.20.3)(yaml@2.8.1): + vitest@3.2.4(@types/node@22.10.2)(@vitest/browser@3.0.6(@types/node@22.10.2)(playwright@1.56.1)(typescript@5.9.2)(vite@7.1.7(@types/node@22.10.2)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.37.0)(tsx@4.20.3)(yaml@2.8.1))(vitest@3.2.4))(@vitest/ui@3.0.6(vitest@3.2.4))(jiti@2.6.1)(jsdom@27.0.0(postcss@8.5.6))(lightningcss@1.30.2)(msw@2.7.0(@types/node@22.10.2)(typescript@5.9.2))(terser@5.37.0)(tsx@4.20.3)(yaml@2.8.1): dependencies: '@types/chai': 5.2.2 '@vitest/expect': 3.2.4 @@ -35046,7 +35190,7 @@ snapshots: '@types/node': 22.10.2 '@vitest/browser': 3.0.6(@types/node@22.10.2)(playwright@1.56.1)(typescript@5.9.2)(vite@7.1.7(@types/node@22.10.2)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.37.0)(tsx@4.20.3)(yaml@2.8.1))(vitest@3.2.4) '@vitest/ui': 3.0.6(vitest@3.2.4) - jsdom: 25.0.1 + jsdom: 27.0.0(postcss@8.5.6) transitivePeerDependencies: - jiti - less @@ -35061,7 +35205,7 @@ snapshots: - tsx - yaml - vitest@3.2.4(@types/node@22.10.2)(@vitest/browser@3.0.6)(@vitest/ui@3.0.6)(jiti@2.6.1)(jsdom@27.0.0(postcss@8.5.6))(lightningcss@1.30.2)(msw@2.7.0(@types/node@22.10.2)(typescript@5.9.2))(terser@5.37.0)(tsx@4.20.3)(yaml@2.8.1): + vitest@3.2.4(@types/node@22.10.2)(@vitest/browser@3.0.6)(@vitest/ui@3.0.6)(jiti@2.6.1)(jsdom@25.0.1)(lightningcss@1.30.2)(msw@2.7.0(@types/node@22.10.2)(typescript@5.9.2))(terser@5.37.0)(tsx@4.20.3)(yaml@2.8.1): dependencies: '@types/chai': 5.2.2 '@vitest/expect': 3.2.4 @@ -35090,7 +35234,7 @@ snapshots: '@types/node': 22.10.2 '@vitest/browser': 3.0.6(@types/node@22.10.2)(playwright@1.56.1)(typescript@5.9.2)(vite@7.1.7(@types/node@22.10.2)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.37.0)(tsx@4.20.3)(yaml@2.8.1))(vitest@3.2.4) '@vitest/ui': 3.0.6(vitest@3.2.4) - jsdom: 27.0.0(postcss@8.5.6) + jsdom: 25.0.1 transitivePeerDependencies: - jiti - less @@ -35125,10 +35269,10 @@ snapshots: transitivePeerDependencies: - supports-color - vue-eslint-parser@9.4.3(eslint@9.22.0(jiti@2.6.1)): + vue-eslint-parser@9.4.3(eslint@9.22.0(jiti@1.21.7)): dependencies: debug: 4.4.3 - eslint: 9.22.0(jiti@2.6.1) + eslint: 9.22.0(jiti@1.21.7) eslint-scope: 7.2.2 eslint-visitor-keys: 3.4.3 espree: 9.6.1 @@ -35152,6 +35296,12 @@ snapshots: semver: 7.7.3 typescript: 5.9.2 + vue-tsc@3.1.5(typescript@5.8.3): + dependencies: + '@volar/typescript': 2.4.23 + '@vue/language-core': 3.1.5(typescript@5.8.3) + typescript: 5.8.3 + vue@3.5.25(typescript@5.8.3): dependencies: '@vue/compiler-dom': 3.5.25 From af0f08c3f52d6c5a352f1218bfae1eeb28189f8b Mon Sep 17 00:00:00 2001 From: Birk Skyum Date: Tue, 2 Dec 2025 23:31:38 +0100 Subject: [PATCH 081/114] make some component .vue files --- .../src/components/NotFoundComponent.vue | 10 ++++++++++ .../src/components/PostErrorComponent.vue | 10 ++++++++++ .../src/components/VueLogo.vue | 16 +++++++++++++++- .../basic-file-based-jsx/src/routes/__root.tsx | 13 +++---------- .../basic-file-based-jsx/src/routes/index.tsx | 2 +- .../src/routes/posts.$postId.tsx | 11 ++++------- 6 files changed, 43 insertions(+), 19 deletions(-) create mode 100644 e2e/vue-router/basic-file-based-jsx/src/components/NotFoundComponent.vue create mode 100644 e2e/vue-router/basic-file-based-jsx/src/components/PostErrorComponent.vue diff --git a/e2e/vue-router/basic-file-based-jsx/src/components/NotFoundComponent.vue b/e2e/vue-router/basic-file-based-jsx/src/components/NotFoundComponent.vue new file mode 100644 index 00000000000..09ed5cf5ffd --- /dev/null +++ b/e2e/vue-router/basic-file-based-jsx/src/components/NotFoundComponent.vue @@ -0,0 +1,10 @@ + + + diff --git a/e2e/vue-router/basic-file-based-jsx/src/components/PostErrorComponent.vue b/e2e/vue-router/basic-file-based-jsx/src/components/PostErrorComponent.vue new file mode 100644 index 00000000000..9bb7514ccc5 --- /dev/null +++ b/e2e/vue-router/basic-file-based-jsx/src/components/PostErrorComponent.vue @@ -0,0 +1,10 @@ + + + diff --git a/e2e/vue-router/basic-file-based-jsx/src/components/VueLogo.vue b/e2e/vue-router/basic-file-based-jsx/src/components/VueLogo.vue index 928d7d9f330..5e2286dbc2e 100644 --- a/e2e/vue-router/basic-file-based-jsx/src/components/VueLogo.vue +++ b/e2e/vue-router/basic-file-based-jsx/src/components/VueLogo.vue @@ -1,6 +1,20 @@ + + \ No newline at end of file diff --git a/e2e/vue-router/basic-file-based-jsx/src/routes/index.tsx b/e2e/vue-router/basic-file-based-jsx/src/routes/index.tsx index a1a7ce5a58e..c1923fd7ab0 100644 --- a/e2e/vue-router/basic-file-based-jsx/src/routes/index.tsx +++ b/e2e/vue-router/basic-file-based-jsx/src/routes/index.tsx @@ -8,7 +8,7 @@ export const Route = createFileRoute('/')({ function IndexComponent() { return (
-

Welcome Home!

+

Vue JSX!

) From 848b0c0def9ff4b51d073b0ffff5078a7a9f8571 Mon Sep 17 00:00:00 2001 From: Birk Skyum Date: Wed, 3 Dec 2025 00:43:11 +0100 Subject: [PATCH 088/114] fix e2e --- .../basic-file-based-jsx/src/routeTree.gen.ts | 39 ++++++++++++++----- .../basic-file-based-jsx/src/routes/index.tsx | 2 +- ...mponent.vue => sfcComponent.component.vue} | 0 .../src/routes/sfcComponent.tsx | 9 +++++ 4 files changed, 40 insertions(+), 10 deletions(-) rename e2e/vue-router/basic-file-based-jsx/src/routes/{index.component.vue => sfcComponent.component.vue} (100%) create mode 100644 e2e/vue-router/basic-file-based-jsx/src/routes/sfcComponent.tsx diff --git a/e2e/vue-router/basic-file-based-jsx/src/routeTree.gen.ts b/e2e/vue-router/basic-file-based-jsx/src/routeTree.gen.ts index 948342271e4..01bb4b0d053 100644 --- a/e2e/vue-router/basic-file-based-jsx/src/routeTree.gen.ts +++ b/e2e/vue-router/basic-file-based-jsx/src/routeTree.gen.ts @@ -12,6 +12,7 @@ import { lazyRouteComponent } from '@tanstack/vue-router' import { Route as rootRouteImport } from './routes/__root' import { Route as Char45824Char54620Char48124Char44397RouteImport } from './routes/대한민국' +import { Route as SfcComponentRouteImport } from './routes/sfcComponent' import { Route as RemountDepsRouteImport } from './routes/remountDeps' import { Route as PostsRouteImport } from './routes/posts' import { Route as NotRemountDepsRouteImport } from './routes/notRemountDeps' @@ -38,6 +39,16 @@ const Char45824Char54620Char48124Char44397Route = path: '/대한민국', getParentRoute: () => rootRouteImport, } as any) +const SfcComponentRoute = SfcComponentRouteImport.update({ + id: '/sfcComponent', + path: '/sfcComponent', + getParentRoute: () => rootRouteImport, +} as any).update({ + component: lazyRouteComponent( + () => import('./routes/sfcComponent.component.vue'), + 'default', + ), +}) const RemountDepsRoute = RemountDepsRouteImport.update({ id: '/remountDeps', path: '/remountDeps', @@ -71,12 +82,7 @@ const IndexRoute = IndexRouteImport.update({ id: '/', path: '/', getParentRoute: () => rootRouteImport, -} as any).update({ - component: lazyRouteComponent( - () => import('./routes/index.component.vue'), - 'default', - ), -}) +} as any) const PostsIndexRoute = PostsIndexRouteImport.update({ id: '/', path: '/', @@ -138,12 +144,13 @@ const groupLayoutInsidelayoutRoute = groupLayoutInsidelayoutRouteImport.update({ } as any) export interface FileRoutesByFullPath { - '/': typeof groupLayoutRouteWithChildren + '/': typeof IndexRoute '/editing-a': typeof EditingARoute '/editing-b': typeof EditingBRoute '/notRemountDeps': typeof NotRemountDepsRoute '/posts': typeof PostsRouteWithChildren '/remountDeps': typeof RemountDepsRoute + '/sfcComponent': typeof SfcComponentRoute '/대한민국': typeof Char45824Char54620Char48124Char44397Route '/onlyrouteinside': typeof anotherGroupOnlyrouteinsideRoute '/inside': typeof groupInsideRoute @@ -157,11 +164,12 @@ export interface FileRoutesByFullPath { '/posts/$postId/edit': typeof PostsPostIdEditRoute } export interface FileRoutesByTo { - '/': typeof groupLayoutRouteWithChildren + '/': typeof IndexRoute '/editing-a': typeof EditingARoute '/editing-b': typeof EditingBRoute '/notRemountDeps': typeof NotRemountDepsRoute '/remountDeps': typeof RemountDepsRoute + '/sfcComponent': typeof SfcComponentRoute '/대한민국': typeof Char45824Char54620Char48124Char44397Route '/onlyrouteinside': typeof anotherGroupOnlyrouteinsideRoute '/inside': typeof groupInsideRoute @@ -183,6 +191,7 @@ export interface FileRoutesById { '/notRemountDeps': typeof NotRemountDepsRoute '/posts': typeof PostsRouteWithChildren '/remountDeps': typeof RemountDepsRoute + '/sfcComponent': typeof SfcComponentRoute '/대한민국': typeof Char45824Char54620Char48124Char44397Route '/(another-group)/onlyrouteinside': typeof anotherGroupOnlyrouteinsideRoute '/(group)/_layout': typeof groupLayoutRouteWithChildren @@ -206,6 +215,7 @@ export interface FileRouteTypes { | '/notRemountDeps' | '/posts' | '/remountDeps' + | '/sfcComponent' | '/대한민국' | '/onlyrouteinside' | '/inside' @@ -224,6 +234,7 @@ export interface FileRouteTypes { | '/editing-b' | '/notRemountDeps' | '/remountDeps' + | '/sfcComponent' | '/대한민국' | '/onlyrouteinside' | '/inside' @@ -244,6 +255,7 @@ export interface FileRouteTypes { | '/notRemountDeps' | '/posts' | '/remountDeps' + | '/sfcComponent' | '/대한민국' | '/(another-group)/onlyrouteinside' | '/(group)/_layout' @@ -267,6 +279,7 @@ export interface RootRouteChildren { NotRemountDepsRoute: typeof NotRemountDepsRoute PostsRoute: typeof PostsRouteWithChildren RemountDepsRoute: typeof RemountDepsRoute + SfcComponentRoute: typeof SfcComponentRoute Char45824Char54620Char48124Char44397Route: typeof Char45824Char54620Char48124Char44397Route anotherGroupOnlyrouteinsideRoute: typeof anotherGroupOnlyrouteinsideRoute groupLayoutRoute: typeof groupLayoutRouteWithChildren @@ -285,6 +298,13 @@ declare module '@tanstack/vue-router' { preLoaderRoute: typeof Char45824Char54620Char48124Char44397RouteImport parentRoute: typeof rootRouteImport } + '/sfcComponent': { + id: '/sfcComponent' + path: '/sfcComponent' + fullPath: '/sfcComponent' + preLoaderRoute: typeof SfcComponentRouteImport + parentRoute: typeof rootRouteImport + } '/remountDeps': { id: '/remountDeps' path: '/remountDeps' @@ -372,7 +392,7 @@ declare module '@tanstack/vue-router' { '/(group)/_layout': { id: '/(group)/_layout' path: '' - fullPath: '/' + fullPath: '' preLoaderRoute: typeof groupLayoutRouteImport parentRoute: typeof rootRouteImport } @@ -478,6 +498,7 @@ const rootRouteChildren: RootRouteChildren = { NotRemountDepsRoute: NotRemountDepsRoute, PostsRoute: PostsRouteWithChildren, RemountDepsRoute: RemountDepsRoute, + SfcComponentRoute: SfcComponentRoute, Char45824Char54620Char48124Char44397Route: Char45824Char54620Char48124Char44397Route, anotherGroupOnlyrouteinsideRoute: anotherGroupOnlyrouteinsideRoute, diff --git a/e2e/vue-router/basic-file-based-jsx/src/routes/index.tsx b/e2e/vue-router/basic-file-based-jsx/src/routes/index.tsx index c1923fd7ab0..a1a7ce5a58e 100644 --- a/e2e/vue-router/basic-file-based-jsx/src/routes/index.tsx +++ b/e2e/vue-router/basic-file-based-jsx/src/routes/index.tsx @@ -8,7 +8,7 @@ export const Route = createFileRoute('/')({ function IndexComponent() { return (
-

Vue JSX!

+

Welcome Home!

) diff --git a/e2e/vue-router/basic-file-based-jsx/src/routes/index.component.vue b/e2e/vue-router/basic-file-based-jsx/src/routes/sfcComponent.component.vue similarity index 100% rename from e2e/vue-router/basic-file-based-jsx/src/routes/index.component.vue rename to e2e/vue-router/basic-file-based-jsx/src/routes/sfcComponent.component.vue diff --git a/e2e/vue-router/basic-file-based-jsx/src/routes/sfcComponent.tsx b/e2e/vue-router/basic-file-based-jsx/src/routes/sfcComponent.tsx new file mode 100644 index 00000000000..0cbf84f07a0 --- /dev/null +++ b/e2e/vue-router/basic-file-based-jsx/src/routes/sfcComponent.tsx @@ -0,0 +1,9 @@ +import { createFileRoute } from '@tanstack/vue-router' + +export const Route = createFileRoute('/sfcComponent')({ + component: RouteComponent, +}) + +function RouteComponent() { + return
Will be overwritten by the SFC component!
+} From 353d670f7d48903e2e9978aea411533adcee9ca9 Mon Sep 17 00:00:00 2001 From: Birk Skyum Date: Wed, 3 Dec 2025 02:42:13 +0100 Subject: [PATCH 089/114] reset snapshots --- .../routeTree.nonnested.snapshot.ts | 14 +++++++------- .../routeTree.snapshot.ts | 14 +++++++------- .../route-groups/routeTree.nonnested.snapshot.ts | 6 +----- .../generator/route-groups/routeTree.snapshot.ts | 6 +----- 4 files changed, 16 insertions(+), 24 deletions(-) diff --git a/packages/router-generator/tests/generator/nested-route-groups-with-layouts-before-physical/routeTree.nonnested.snapshot.ts b/packages/router-generator/tests/generator/nested-route-groups-with-layouts-before-physical/routeTree.nonnested.snapshot.ts index cdd918599aa..6c5c9950b22 100644 --- a/packages/router-generator/tests/generator/nested-route-groups-with-layouts-before-physical/routeTree.nonnested.snapshot.ts +++ b/packages/router-generator/tests/generator/nested-route-groups-with-layouts-before-physical/routeTree.nonnested.snapshot.ts @@ -51,16 +51,16 @@ const groupALayoutALoginRoute = groupALayoutALoginRouteImport.update({ } as any) export interface FileRoutesByFullPath { - '/': typeof groupCLayoutCIndexRoute '/login': typeof groupALayoutALoginRoute '/signup': typeof groupALayoutASignupRoute '/dashboard': typeof groupBLayoutBDashboardRoute + '/': typeof groupCLayoutCIndexRoute } export interface FileRoutesByTo { - '/': typeof groupCLayoutCIndexRoute '/login': typeof groupALayoutALoginRoute '/signup': typeof groupALayoutASignupRoute '/dashboard': typeof groupBLayoutBDashboardRoute + '/': typeof groupCLayoutCIndexRoute } export interface FileRoutesById { __root__: typeof rootRouteImport @@ -74,9 +74,9 @@ export interface FileRoutesById { } export interface FileRouteTypes { fileRoutesByFullPath: FileRoutesByFullPath - fullPaths: '/' | '/login' | '/signup' | '/dashboard' + fullPaths: '/login' | '/signup' | '/dashboard' | '/' fileRoutesByTo: FileRoutesByTo - to: '/' | '/login' | '/signup' | '/dashboard' + to: '/login' | '/signup' | '/dashboard' | '/' id: | '__root__' | '/(group-a)/_layout-a' @@ -99,21 +99,21 @@ declare module '@tanstack/react-router' { '/(group-c)/_layout-c': { id: '/(group-c)/_layout-c' path: '' - fullPath: '/' + fullPath: '' preLoaderRoute: typeof groupCLayoutCRouteImport parentRoute: typeof rootRouteImport } '/(group-b)/_layout-b': { id: '/(group-b)/_layout-b' path: '' - fullPath: '/' + fullPath: '' preLoaderRoute: typeof groupBLayoutBRouteImport parentRoute: typeof rootRouteImport } '/(group-a)/_layout-a': { id: '/(group-a)/_layout-a' path: '' - fullPath: '/' + fullPath: '' preLoaderRoute: typeof groupALayoutARouteImport parentRoute: typeof rootRouteImport } diff --git a/packages/router-generator/tests/generator/nested-route-groups-with-layouts-before-physical/routeTree.snapshot.ts b/packages/router-generator/tests/generator/nested-route-groups-with-layouts-before-physical/routeTree.snapshot.ts index cdd918599aa..6c5c9950b22 100644 --- a/packages/router-generator/tests/generator/nested-route-groups-with-layouts-before-physical/routeTree.snapshot.ts +++ b/packages/router-generator/tests/generator/nested-route-groups-with-layouts-before-physical/routeTree.snapshot.ts @@ -51,16 +51,16 @@ const groupALayoutALoginRoute = groupALayoutALoginRouteImport.update({ } as any) export interface FileRoutesByFullPath { - '/': typeof groupCLayoutCIndexRoute '/login': typeof groupALayoutALoginRoute '/signup': typeof groupALayoutASignupRoute '/dashboard': typeof groupBLayoutBDashboardRoute + '/': typeof groupCLayoutCIndexRoute } export interface FileRoutesByTo { - '/': typeof groupCLayoutCIndexRoute '/login': typeof groupALayoutALoginRoute '/signup': typeof groupALayoutASignupRoute '/dashboard': typeof groupBLayoutBDashboardRoute + '/': typeof groupCLayoutCIndexRoute } export interface FileRoutesById { __root__: typeof rootRouteImport @@ -74,9 +74,9 @@ export interface FileRoutesById { } export interface FileRouteTypes { fileRoutesByFullPath: FileRoutesByFullPath - fullPaths: '/' | '/login' | '/signup' | '/dashboard' + fullPaths: '/login' | '/signup' | '/dashboard' | '/' fileRoutesByTo: FileRoutesByTo - to: '/' | '/login' | '/signup' | '/dashboard' + to: '/login' | '/signup' | '/dashboard' | '/' id: | '__root__' | '/(group-a)/_layout-a' @@ -99,21 +99,21 @@ declare module '@tanstack/react-router' { '/(group-c)/_layout-c': { id: '/(group-c)/_layout-c' path: '' - fullPath: '/' + fullPath: '' preLoaderRoute: typeof groupCLayoutCRouteImport parentRoute: typeof rootRouteImport } '/(group-b)/_layout-b': { id: '/(group-b)/_layout-b' path: '' - fullPath: '/' + fullPath: '' preLoaderRoute: typeof groupBLayoutBRouteImport parentRoute: typeof rootRouteImport } '/(group-a)/_layout-a': { id: '/(group-a)/_layout-a' path: '' - fullPath: '/' + fullPath: '' preLoaderRoute: typeof groupALayoutARouteImport parentRoute: typeof rootRouteImport } diff --git a/packages/router-generator/tests/generator/route-groups/routeTree.nonnested.snapshot.ts b/packages/router-generator/tests/generator/route-groups/routeTree.nonnested.snapshot.ts index 0e129063f35..f1d7057fd68 100644 --- a/packages/router-generator/tests/generator/route-groups/routeTree.nonnested.snapshot.ts +++ b/packages/router-generator/tests/generator/route-groups/routeTree.nonnested.snapshot.ts @@ -80,7 +80,6 @@ const fooAsdfanotherGroupLayoutBazRoute = } as any) export interface FileRoutesByFullPath { - '/': typeof barBarRouteWithChildren '/hello': typeof barBarHelloRoute '/asdf': typeof fooAsdfanotherGroupLayoutRouteWithChildren '/asdf/$id': typeof fooAsdfbarIdRoute @@ -90,7 +89,6 @@ export interface FileRoutesByFullPath { '/asdf/xyz': typeof fooAsdfbarLayoutXyzLazyRoute } export interface FileRoutesByTo { - '/': typeof barBarRouteWithChildren '/hello': typeof barBarHelloRoute '/asdf': typeof fooAsdfanotherGroupLayoutRouteWithChildren '/asdf/$id': typeof fooAsdfbarIdRoute @@ -115,7 +113,6 @@ export interface FileRoutesById { export interface FileRouteTypes { fileRoutesByFullPath: FileRoutesByFullPath fullPaths: - | '/' | '/hello' | '/asdf' | '/asdf/$id' @@ -125,7 +122,6 @@ export interface FileRouteTypes { | '/asdf/xyz' fileRoutesByTo: FileRoutesByTo to: - | '/' | '/hello' | '/asdf' | '/asdf/$id' @@ -164,7 +160,7 @@ declare module '@tanstack/react-router' { '/(bar)/_bar': { id: '/(bar)/_bar' path: '' - fullPath: '/' + fullPath: '' preLoaderRoute: typeof barBarRouteImport parentRoute: typeof rootRouteImport } diff --git a/packages/router-generator/tests/generator/route-groups/routeTree.snapshot.ts b/packages/router-generator/tests/generator/route-groups/routeTree.snapshot.ts index 0e129063f35..f1d7057fd68 100644 --- a/packages/router-generator/tests/generator/route-groups/routeTree.snapshot.ts +++ b/packages/router-generator/tests/generator/route-groups/routeTree.snapshot.ts @@ -80,7 +80,6 @@ const fooAsdfanotherGroupLayoutBazRoute = } as any) export interface FileRoutesByFullPath { - '/': typeof barBarRouteWithChildren '/hello': typeof barBarHelloRoute '/asdf': typeof fooAsdfanotherGroupLayoutRouteWithChildren '/asdf/$id': typeof fooAsdfbarIdRoute @@ -90,7 +89,6 @@ export interface FileRoutesByFullPath { '/asdf/xyz': typeof fooAsdfbarLayoutXyzLazyRoute } export interface FileRoutesByTo { - '/': typeof barBarRouteWithChildren '/hello': typeof barBarHelloRoute '/asdf': typeof fooAsdfanotherGroupLayoutRouteWithChildren '/asdf/$id': typeof fooAsdfbarIdRoute @@ -115,7 +113,6 @@ export interface FileRoutesById { export interface FileRouteTypes { fileRoutesByFullPath: FileRoutesByFullPath fullPaths: - | '/' | '/hello' | '/asdf' | '/asdf/$id' @@ -125,7 +122,6 @@ export interface FileRouteTypes { | '/asdf/xyz' fileRoutesByTo: FileRoutesByTo to: - | '/' | '/hello' | '/asdf' | '/asdf/$id' @@ -164,7 +160,7 @@ declare module '@tanstack/react-router' { '/(bar)/_bar': { id: '/(bar)/_bar' path: '' - fullPath: '/' + fullPath: '' preLoaderRoute: typeof barBarRouteImport parentRoute: typeof rootRouteImport } From 912d68b9870f26749ed594f1b6b1d8c79b12f07c Mon Sep 17 00:00:00 2001 From: Birk Skyum Date: Wed, 3 Dec 2025 03:08:54 +0100 Subject: [PATCH 090/114] dont use .route.ts syntax --- .../basic-file-based-sfc/src/routeTree.gen.ts | 461 +++++++++--------- ...outeinside.route.ts => onlyrouteinside.ts} | 0 ...ayout.route.ts => _layout.insidelayout.ts} | 0 .../(group)/{_layout.route.ts => _layout.ts} | 0 .../(group)/{inside.route.ts => inside.ts} | 0 .../{lazyinside.route.ts => lazyinside.ts} | 0 .../subfolder/{inside.route.ts => inside.ts} | 0 .../routes/{_layout.route.ts => _layout.ts} | 0 .../{_layout-2.route.ts => _layout-2.ts} | 0 .../{layout-a.route.ts => layout-a.ts} | 0 .../{layout-b.route.ts => layout-b.ts} | 0 .../{editing-a.route.ts => editing-a.ts} | 0 .../{editing-b.route.ts => editing-b.ts} | 0 .../src/routes/{index.route.ts => index.ts} | 0 ...RemountDeps.route.ts => notRemountDeps.ts} | 0 ...osts.$postId.route.ts => posts.$postId.ts} | 0 .../{posts.index.route.ts => posts.index.ts} | 0 .../src/routes/{posts.route.ts => posts.ts} | 0 ...d.edit.route.ts => posts_.$postId.edit.ts} | 0 .../{remountDeps.route.ts => remountDeps.ts} | 0 ...00\355\225\234\353\257\274\352\265\255.ts" | 0 packages/router-generator/src/utils.ts | 14 +- 22 files changed, 241 insertions(+), 234 deletions(-) rename e2e/vue-router/basic-file-based-sfc/src/routes/(another-group)/{onlyrouteinside.route.ts => onlyrouteinside.ts} (100%) rename e2e/vue-router/basic-file-based-sfc/src/routes/(group)/{_layout.insidelayout.route.ts => _layout.insidelayout.ts} (100%) rename e2e/vue-router/basic-file-based-sfc/src/routes/(group)/{_layout.route.ts => _layout.ts} (100%) rename e2e/vue-router/basic-file-based-sfc/src/routes/(group)/{inside.route.ts => inside.ts} (100%) rename e2e/vue-router/basic-file-based-sfc/src/routes/(group)/{lazyinside.route.ts => lazyinside.ts} (100%) rename e2e/vue-router/basic-file-based-sfc/src/routes/(group)/subfolder/{inside.route.ts => inside.ts} (100%) rename e2e/vue-router/basic-file-based-sfc/src/routes/{_layout.route.ts => _layout.ts} (100%) rename e2e/vue-router/basic-file-based-sfc/src/routes/_layout/{_layout-2.route.ts => _layout-2.ts} (100%) rename e2e/vue-router/basic-file-based-sfc/src/routes/_layout/_layout-2/{layout-a.route.ts => layout-a.ts} (100%) rename e2e/vue-router/basic-file-based-sfc/src/routes/_layout/_layout-2/{layout-b.route.ts => layout-b.ts} (100%) rename e2e/vue-router/basic-file-based-sfc/src/routes/{editing-a.route.ts => editing-a.ts} (100%) rename e2e/vue-router/basic-file-based-sfc/src/routes/{editing-b.route.ts => editing-b.ts} (100%) rename e2e/vue-router/basic-file-based-sfc/src/routes/{index.route.ts => index.ts} (100%) rename e2e/vue-router/basic-file-based-sfc/src/routes/{notRemountDeps.route.ts => notRemountDeps.ts} (100%) rename e2e/vue-router/basic-file-based-sfc/src/routes/{posts.$postId.route.ts => posts.$postId.ts} (100%) rename e2e/vue-router/basic-file-based-sfc/src/routes/{posts.index.route.ts => posts.index.ts} (100%) rename e2e/vue-router/basic-file-based-sfc/src/routes/{posts.route.ts => posts.ts} (100%) rename e2e/vue-router/basic-file-based-sfc/src/routes/{posts_.$postId.edit.route.ts => posts_.$postId.edit.ts} (100%) rename e2e/vue-router/basic-file-based-sfc/src/routes/{remountDeps.route.ts => remountDeps.ts} (100%) rename "e2e/vue-router/basic-file-based-sfc/src/routes/\353\214\200\355\225\234\353\257\274\352\265\255.route.ts" => "e2e/vue-router/basic-file-based-sfc/src/routes/\353\214\200\355\225\234\353\257\274\352\265\255.ts" (100%) diff --git a/e2e/vue-router/basic-file-based-sfc/src/routeTree.gen.ts b/e2e/vue-router/basic-file-based-sfc/src/routeTree.gen.ts index 3863baea05c..ed2e49db39c 100644 --- a/e2e/vue-router/basic-file-based-sfc/src/routeTree.gen.ts +++ b/e2e/vue-router/basic-file-based-sfc/src/routeTree.gen.ts @@ -11,29 +11,29 @@ import { lazyRouteComponent } from '@tanstack/vue-router' import { Route as rootRouteImport } from './routes/__root' -import { Route as Char45824Char54620Char48124Char44397RouteRouteImport } from './routes/대한민국.route' -import { Route as RemountDepsRouteRouteImport } from './routes/remountDeps.route' -import { Route as PostsRouteRouteImport } from './routes/posts.route' -import { Route as NotRemountDepsRouteRouteImport } from './routes/notRemountDeps.route' -import { Route as EditingBRouteRouteImport } from './routes/editing-b.route' -import { Route as EditingARouteRouteImport } from './routes/editing-a.route' -import { Route as LayoutRouteRouteImport } from './routes/_layout.route' -import { Route as IndexRouteRouteImport } from './routes/index.route' -import { Route as PostsIndexRouteRouteImport } from './routes/posts.index.route' -import { Route as PostsPostIdRouteRouteImport } from './routes/posts.$postId.route' -import { Route as LayoutLayout2RouteRouteImport } from './routes/_layout/_layout-2.route' -import { Route as groupLazyinsideRouteRouteImport } from './routes/(group)/lazyinside.route' -import { Route as groupInsideRouteRouteImport } from './routes/(group)/inside.route' -import { Route as groupLayoutRouteRouteImport } from './routes/(group)/_layout.route' -import { Route as anotherGroupOnlyrouteinsideRouteRouteImport } from './routes/(another-group)/onlyrouteinside.route' -import { Route as PostsPostIdEditRouteRouteImport } from './routes/posts_.$postId.edit.route' -import { Route as LayoutLayout2LayoutBRouteRouteImport } from './routes/_layout/_layout-2/layout-b.route' -import { Route as LayoutLayout2LayoutARouteRouteImport } from './routes/_layout/_layout-2/layout-a.route' -import { Route as groupSubfolderInsideRouteRouteImport } from './routes/(group)/subfolder/inside.route' -import { Route as groupLayoutInsidelayoutRouteRouteImport } from './routes/(group)/_layout.insidelayout.route' +import { Route as Char45824Char54620Char48124Char44397RouteImport } from './routes/대한민국' +import { Route as RemountDepsRouteImport } from './routes/remountDeps' +import { Route as PostsRouteImport } from './routes/posts' +import { Route as NotRemountDepsRouteImport } from './routes/notRemountDeps' +import { Route as EditingBRouteImport } from './routes/editing-b' +import { Route as EditingARouteImport } from './routes/editing-a' +import { Route as LayoutRouteImport } from './routes/_layout' +import { Route as IndexRouteImport } from './routes/index' +import { Route as PostsIndexRouteImport } from './routes/posts.index' +import { Route as PostsPostIdRouteImport } from './routes/posts.$postId' +import { Route as LayoutLayout2RouteImport } from './routes/_layout/_layout-2' +import { Route as groupLazyinsideRouteImport } from './routes/(group)/lazyinside' +import { Route as groupInsideRouteImport } from './routes/(group)/inside' +import { Route as groupLayoutRouteImport } from './routes/(group)/_layout' +import { Route as anotherGroupOnlyrouteinsideRouteImport } from './routes/(another-group)/onlyrouteinside' +import { Route as PostsPostIdEditRouteImport } from './routes/posts_.$postId.edit' +import { Route as LayoutLayout2LayoutBRouteImport } from './routes/_layout/_layout-2/layout-b' +import { Route as LayoutLayout2LayoutARouteImport } from './routes/_layout/_layout-2/layout-a' +import { Route as groupSubfolderInsideRouteImport } from './routes/(group)/subfolder/inside' +import { Route as groupLayoutInsidelayoutRouteImport } from './routes/(group)/_layout.insidelayout' -const Char45824Char54620Char48124Char44397RouteRoute = - Char45824Char54620Char48124Char44397RouteRouteImport.update({ +const Char45824Char54620Char48124Char44397Route = + Char45824Char54620Char48124Char44397RouteImport.update({ id: '/대한민국', path: '/대한민국', getParentRoute: () => rootRouteImport, @@ -43,7 +43,7 @@ const Char45824Char54620Char48124Char44397RouteRoute = 'default', ), }) -const RemountDepsRouteRoute = RemountDepsRouteRouteImport.update({ +const RemountDepsRoute = RemountDepsRouteImport.update({ id: '/remountDeps', path: '/remountDeps', getParentRoute: () => rootRouteImport, @@ -53,7 +53,7 @@ const RemountDepsRouteRoute = RemountDepsRouteRouteImport.update({ 'default', ), }) -const PostsRouteRoute = PostsRouteRouteImport.update({ +const PostsRoute = PostsRouteImport.update({ id: '/posts', path: '/posts', getParentRoute: () => rootRouteImport, @@ -63,7 +63,7 @@ const PostsRouteRoute = PostsRouteRouteImport.update({ 'default', ), }) -const NotRemountDepsRouteRoute = NotRemountDepsRouteRouteImport.update({ +const NotRemountDepsRoute = NotRemountDepsRouteImport.update({ id: '/notRemountDeps', path: '/notRemountDeps', getParentRoute: () => rootRouteImport, @@ -73,7 +73,7 @@ const NotRemountDepsRouteRoute = NotRemountDepsRouteRouteImport.update({ 'default', ), }) -const EditingBRouteRoute = EditingBRouteRouteImport.update({ +const EditingBRoute = EditingBRouteImport.update({ id: '/editing-b', path: '/editing-b', getParentRoute: () => rootRouteImport, @@ -83,7 +83,7 @@ const EditingBRouteRoute = EditingBRouteRouteImport.update({ 'default', ), }) -const EditingARouteRoute = EditingARouteRouteImport.update({ +const EditingARoute = EditingARouteImport.update({ id: '/editing-a', path: '/editing-a', getParentRoute: () => rootRouteImport, @@ -93,7 +93,7 @@ const EditingARouteRoute = EditingARouteRouteImport.update({ 'default', ), }) -const LayoutRouteRoute = LayoutRouteRouteImport.update({ +const LayoutRoute = LayoutRouteImport.update({ id: '/_layout', getParentRoute: () => rootRouteImport, } as any).update({ @@ -102,9 +102,9 @@ const LayoutRouteRoute = LayoutRouteRouteImport.update({ 'default', ), }) -const IndexRouteRoute = IndexRouteRouteImport.update({ +const IndexRoute = IndexRouteImport.update({ id: '/', - path: '', + path: '/', getParentRoute: () => rootRouteImport, } as any).update({ component: lazyRouteComponent( @@ -112,20 +112,20 @@ const IndexRouteRoute = IndexRouteRouteImport.update({ 'default', ), }) -const PostsIndexRouteRoute = PostsIndexRouteRouteImport.update({ +const PostsIndexRoute = PostsIndexRouteImport.update({ id: '/', - path: '', - getParentRoute: () => PostsRouteRoute, + path: '/', + getParentRoute: () => PostsRoute, } as any).update({ component: lazyRouteComponent( () => import('./routes/posts.index.component.vue'), 'default', ), }) -const PostsPostIdRouteRoute = PostsPostIdRouteRouteImport.update({ +const PostsPostIdRoute = PostsPostIdRouteImport.update({ id: '/$postId', path: '/$postId', - getParentRoute: () => PostsRouteRoute, + getParentRoute: () => PostsRoute, } as any).update({ component: lazyRouteComponent( () => import('./routes/posts.$postId.component.vue'), @@ -136,16 +136,16 @@ const PostsPostIdRouteRoute = PostsPostIdRouteRouteImport.update({ 'default', ), }) -const LayoutLayout2RouteRoute = LayoutLayout2RouteRouteImport.update({ +const LayoutLayout2Route = LayoutLayout2RouteImport.update({ id: '/_layout-2', - getParentRoute: () => LayoutRouteRoute, + getParentRoute: () => LayoutRoute, } as any).update({ component: lazyRouteComponent( () => import('./routes/_layout/_layout-2.component.vue'), 'default', ), }) -const groupLazyinsideRouteRoute = groupLazyinsideRouteRouteImport +const groupLazyinsideRoute = groupLazyinsideRouteImport .update({ id: '/(group)/lazyinside', path: '/lazyinside', @@ -157,7 +157,7 @@ const groupLazyinsideRouteRoute = groupLazyinsideRouteRouteImport 'default', ), }) -const groupInsideRouteRoute = groupInsideRouteRouteImport +const groupInsideRoute = groupInsideRouteImport .update({ id: '/(group)/inside', path: '/inside', @@ -169,7 +169,7 @@ const groupInsideRouteRoute = groupInsideRouteRouteImport 'default', ), }) -const groupLayoutRouteRoute = groupLayoutRouteRouteImport +const groupLayoutRoute = groupLayoutRouteImport .update({ id: '/(group)/_layout', getParentRoute: () => rootRouteImport, @@ -180,20 +180,19 @@ const groupLayoutRouteRoute = groupLayoutRouteRouteImport 'default', ), }) -const anotherGroupOnlyrouteinsideRouteRoute = - anotherGroupOnlyrouteinsideRouteRouteImport - .update({ - id: '/(another-group)/onlyrouteinside', - path: '/onlyrouteinside', - getParentRoute: () => rootRouteImport, - } as any) - .update({ - component: lazyRouteComponent( - () => import('./routes/(another-group)/onlyrouteinside.component.vue'), - 'default', - ), - }) -const PostsPostIdEditRouteRoute = PostsPostIdEditRouteRouteImport.update({ +const anotherGroupOnlyrouteinsideRoute = anotherGroupOnlyrouteinsideRouteImport + .update({ + id: '/(another-group)/onlyrouteinside', + path: '/onlyrouteinside', + getParentRoute: () => rootRouteImport, + } as any) + .update({ + component: lazyRouteComponent( + () => import('./routes/(another-group)/onlyrouteinside.component.vue'), + 'default', + ), + }) +const PostsPostIdEditRoute = PostsPostIdEditRouteImport.update({ id: '/posts_/$postId/edit', path: '/posts/$postId/edit', getParentRoute: () => rootRouteImport, @@ -203,29 +202,27 @@ const PostsPostIdEditRouteRoute = PostsPostIdEditRouteRouteImport.update({ 'default', ), }) -const LayoutLayout2LayoutBRouteRoute = - LayoutLayout2LayoutBRouteRouteImport.update({ - id: '/layout-b', - path: '/layout-b', - getParentRoute: () => LayoutLayout2RouteRoute, - } as any).update({ - component: lazyRouteComponent( - () => import('./routes/_layout/_layout-2/layout-b.component.vue'), - 'default', - ), - }) -const LayoutLayout2LayoutARouteRoute = - LayoutLayout2LayoutARouteRouteImport.update({ - id: '/layout-a', - path: '/layout-a', - getParentRoute: () => LayoutLayout2RouteRoute, - } as any).update({ - component: lazyRouteComponent( - () => import('./routes/_layout/_layout-2/layout-a.component.vue'), - 'default', - ), - }) -const groupSubfolderInsideRouteRoute = groupSubfolderInsideRouteRouteImport +const LayoutLayout2LayoutBRoute = LayoutLayout2LayoutBRouteImport.update({ + id: '/layout-b', + path: '/layout-b', + getParentRoute: () => LayoutLayout2Route, +} as any).update({ + component: lazyRouteComponent( + () => import('./routes/_layout/_layout-2/layout-b.component.vue'), + 'default', + ), +}) +const LayoutLayout2LayoutARoute = LayoutLayout2LayoutARouteImport.update({ + id: '/layout-a', + path: '/layout-a', + getParentRoute: () => LayoutLayout2Route, +} as any).update({ + component: lazyRouteComponent( + () => import('./routes/_layout/_layout-2/layout-a.component.vue'), + 'default', + ), +}) +const groupSubfolderInsideRoute = groupSubfolderInsideRouteImport .update({ id: '/(group)/subfolder/inside', path: '/subfolder/inside', @@ -237,78 +234,78 @@ const groupSubfolderInsideRouteRoute = groupSubfolderInsideRouteRouteImport 'default', ), }) -const groupLayoutInsidelayoutRouteRoute = - groupLayoutInsidelayoutRouteRouteImport - .update({ - id: '/insidelayout', - path: '/insidelayout', - getParentRoute: () => groupLayoutRouteRoute, - } as any) - .update({ - component: lazyRouteComponent( - () => import('./routes/(group)/_layout.insidelayout.component.vue'), - 'default', - ), - }) +const groupLayoutInsidelayoutRoute = groupLayoutInsidelayoutRouteImport + .update({ + id: '/insidelayout', + path: '/insidelayout', + getParentRoute: () => groupLayoutRoute, + } as any) + .update({ + component: lazyRouteComponent( + () => import('./routes/(group)/_layout.insidelayout.component.vue'), + 'default', + ), + }) export interface FileRoutesByFullPath { - '/': typeof groupLayoutRouteRouteWithChildren - '/editing-a': typeof EditingARouteRoute - '/editing-b': typeof EditingBRouteRoute - '/notRemountDeps': typeof NotRemountDepsRouteRoute - '/posts': typeof PostsIndexRouteRoute - '/remountDeps': typeof RemountDepsRouteRoute - '/대한민국': typeof Char45824Char54620Char48124Char44397RouteRoute - '/onlyrouteinside': typeof anotherGroupOnlyrouteinsideRouteRoute - '/inside': typeof groupInsideRouteRoute - '/lazyinside': typeof groupLazyinsideRouteRoute - '/posts/$postId': typeof PostsPostIdRouteRoute - '/insidelayout': typeof groupLayoutInsidelayoutRouteRoute - '/subfolder/inside': typeof groupSubfolderInsideRouteRoute - '/layout-a': typeof LayoutLayout2LayoutARouteRoute - '/layout-b': typeof LayoutLayout2LayoutBRouteRoute - '/posts/$postId/edit': typeof PostsPostIdEditRouteRoute + '/': typeof IndexRoute + '/editing-a': typeof EditingARoute + '/editing-b': typeof EditingBRoute + '/notRemountDeps': typeof NotRemountDepsRoute + '/posts': typeof PostsRouteWithChildren + '/remountDeps': typeof RemountDepsRoute + '/대한민국': typeof Char45824Char54620Char48124Char44397Route + '/onlyrouteinside': typeof anotherGroupOnlyrouteinsideRoute + '/inside': typeof groupInsideRoute + '/lazyinside': typeof groupLazyinsideRoute + '/posts/$postId': typeof PostsPostIdRoute + '/posts/': typeof PostsIndexRoute + '/insidelayout': typeof groupLayoutInsidelayoutRoute + '/subfolder/inside': typeof groupSubfolderInsideRoute + '/layout-a': typeof LayoutLayout2LayoutARoute + '/layout-b': typeof LayoutLayout2LayoutBRoute + '/posts/$postId/edit': typeof PostsPostIdEditRoute } export interface FileRoutesByTo { - '/': typeof groupLayoutRouteRouteWithChildren - '/editing-a': typeof EditingARouteRoute - '/editing-b': typeof EditingBRouteRoute - '/notRemountDeps': typeof NotRemountDepsRouteRoute - '/posts': typeof PostsIndexRouteRoute - '/remountDeps': typeof RemountDepsRouteRoute - '/대한민국': typeof Char45824Char54620Char48124Char44397RouteRoute - '/onlyrouteinside': typeof anotherGroupOnlyrouteinsideRouteRoute - '/inside': typeof groupInsideRouteRoute - '/lazyinside': typeof groupLazyinsideRouteRoute - '/posts/$postId': typeof PostsPostIdRouteRoute - '/insidelayout': typeof groupLayoutInsidelayoutRouteRoute - '/subfolder/inside': typeof groupSubfolderInsideRouteRoute - '/layout-a': typeof LayoutLayout2LayoutARouteRoute - '/layout-b': typeof LayoutLayout2LayoutBRouteRoute - '/posts/$postId/edit': typeof PostsPostIdEditRouteRoute + '/': typeof IndexRoute + '/editing-a': typeof EditingARoute + '/editing-b': typeof EditingBRoute + '/notRemountDeps': typeof NotRemountDepsRoute + '/remountDeps': typeof RemountDepsRoute + '/대한민국': typeof Char45824Char54620Char48124Char44397Route + '/onlyrouteinside': typeof anotherGroupOnlyrouteinsideRoute + '/inside': typeof groupInsideRoute + '/lazyinside': typeof groupLazyinsideRoute + '/posts/$postId': typeof PostsPostIdRoute + '/posts': typeof PostsIndexRoute + '/insidelayout': typeof groupLayoutInsidelayoutRoute + '/subfolder/inside': typeof groupSubfolderInsideRoute + '/layout-a': typeof LayoutLayout2LayoutARoute + '/layout-b': typeof LayoutLayout2LayoutBRoute + '/posts/$postId/edit': typeof PostsPostIdEditRoute } export interface FileRoutesById { __root__: typeof rootRouteImport - '/': typeof IndexRouteRoute - '/_layout': typeof LayoutRouteRouteWithChildren - '/editing-a': typeof EditingARouteRoute - '/editing-b': typeof EditingBRouteRoute - '/notRemountDeps': typeof NotRemountDepsRouteRoute - '/posts': typeof PostsRouteRouteWithChildren - '/remountDeps': typeof RemountDepsRouteRoute - '/대한민국': typeof Char45824Char54620Char48124Char44397RouteRoute - '/(another-group)/onlyrouteinside': typeof anotherGroupOnlyrouteinsideRouteRoute - '/(group)/_layout': typeof groupLayoutRouteRouteWithChildren - '/(group)/inside': typeof groupInsideRouteRoute - '/(group)/lazyinside': typeof groupLazyinsideRouteRoute - '/_layout/_layout-2': typeof LayoutLayout2RouteRouteWithChildren - '/posts/$postId': typeof PostsPostIdRouteRoute - '/posts/': typeof PostsIndexRouteRoute - '/(group)/_layout/insidelayout': typeof groupLayoutInsidelayoutRouteRoute - '/(group)/subfolder/inside': typeof groupSubfolderInsideRouteRoute - '/_layout/_layout-2/layout-a': typeof LayoutLayout2LayoutARouteRoute - '/_layout/_layout-2/layout-b': typeof LayoutLayout2LayoutBRouteRoute - '/posts_/$postId/edit': typeof PostsPostIdEditRouteRoute + '/': typeof IndexRoute + '/_layout': typeof LayoutRouteWithChildren + '/editing-a': typeof EditingARoute + '/editing-b': typeof EditingBRoute + '/notRemountDeps': typeof NotRemountDepsRoute + '/posts': typeof PostsRouteWithChildren + '/remountDeps': typeof RemountDepsRoute + '/대한민국': typeof Char45824Char54620Char48124Char44397Route + '/(another-group)/onlyrouteinside': typeof anotherGroupOnlyrouteinsideRoute + '/(group)/_layout': typeof groupLayoutRouteWithChildren + '/(group)/inside': typeof groupInsideRoute + '/(group)/lazyinside': typeof groupLazyinsideRoute + '/_layout/_layout-2': typeof LayoutLayout2RouteWithChildren + '/posts/$postId': typeof PostsPostIdRoute + '/posts/': typeof PostsIndexRoute + '/(group)/_layout/insidelayout': typeof groupLayoutInsidelayoutRoute + '/(group)/subfolder/inside': typeof groupSubfolderInsideRoute + '/_layout/_layout-2/layout-a': typeof LayoutLayout2LayoutARoute + '/_layout/_layout-2/layout-b': typeof LayoutLayout2LayoutBRoute + '/posts_/$postId/edit': typeof PostsPostIdEditRoute } export interface FileRouteTypes { fileRoutesByFullPath: FileRoutesByFullPath @@ -324,6 +321,7 @@ export interface FileRouteTypes { | '/inside' | '/lazyinside' | '/posts/$postId' + | '/posts/' | '/insidelayout' | '/subfolder/inside' | '/layout-a' @@ -335,13 +333,13 @@ export interface FileRouteTypes { | '/editing-a' | '/editing-b' | '/notRemountDeps' - | '/posts' | '/remountDeps' | '/대한민국' | '/onlyrouteinside' | '/inside' | '/lazyinside' | '/posts/$postId' + | '/posts' | '/insidelayout' | '/subfolder/inside' | '/layout-a' @@ -372,20 +370,20 @@ export interface FileRouteTypes { fileRoutesById: FileRoutesById } export interface RootRouteChildren { - IndexRouteRoute: typeof IndexRouteRoute - LayoutRouteRoute: typeof LayoutRouteRouteWithChildren - EditingARouteRoute: typeof EditingARouteRoute - EditingBRouteRoute: typeof EditingBRouteRoute - NotRemountDepsRouteRoute: typeof NotRemountDepsRouteRoute - PostsRouteRoute: typeof PostsRouteRouteWithChildren - RemountDepsRouteRoute: typeof RemountDepsRouteRoute - Char45824Char54620Char48124Char44397RouteRoute: typeof Char45824Char54620Char48124Char44397RouteRoute - anotherGroupOnlyrouteinsideRouteRoute: typeof anotherGroupOnlyrouteinsideRouteRoute - groupLayoutRouteRoute: typeof groupLayoutRouteRouteWithChildren - groupInsideRouteRoute: typeof groupInsideRouteRoute - groupLazyinsideRouteRoute: typeof groupLazyinsideRouteRoute - groupSubfolderInsideRouteRoute: typeof groupSubfolderInsideRouteRoute - PostsPostIdEditRouteRoute: typeof PostsPostIdEditRouteRoute + IndexRoute: typeof IndexRoute + LayoutRoute: typeof LayoutRouteWithChildren + EditingARoute: typeof EditingARoute + EditingBRoute: typeof EditingBRoute + NotRemountDepsRoute: typeof NotRemountDepsRoute + PostsRoute: typeof PostsRouteWithChildren + RemountDepsRoute: typeof RemountDepsRoute + Char45824Char54620Char48124Char44397Route: typeof Char45824Char54620Char48124Char44397Route + anotherGroupOnlyrouteinsideRoute: typeof anotherGroupOnlyrouteinsideRoute + groupLayoutRoute: typeof groupLayoutRouteWithChildren + groupInsideRoute: typeof groupInsideRoute + groupLazyinsideRoute: typeof groupLazyinsideRoute + groupSubfolderInsideRoute: typeof groupSubfolderInsideRoute + PostsPostIdEditRoute: typeof PostsPostIdEditRoute } declare module '@tanstack/vue-router' { @@ -394,211 +392,210 @@ declare module '@tanstack/vue-router' { id: '/대한민국' path: '/대한민국' fullPath: '/대한민국' - preLoaderRoute: typeof Char45824Char54620Char48124Char44397RouteRouteImport + preLoaderRoute: typeof Char45824Char54620Char48124Char44397RouteImport parentRoute: typeof rootRouteImport } '/remountDeps': { id: '/remountDeps' path: '/remountDeps' fullPath: '/remountDeps' - preLoaderRoute: typeof RemountDepsRouteRouteImport + preLoaderRoute: typeof RemountDepsRouteImport parentRoute: typeof rootRouteImport } '/posts': { id: '/posts' path: '/posts' fullPath: '/posts' - preLoaderRoute: typeof PostsRouteRouteImport + preLoaderRoute: typeof PostsRouteImport parentRoute: typeof rootRouteImport } '/notRemountDeps': { id: '/notRemountDeps' path: '/notRemountDeps' fullPath: '/notRemountDeps' - preLoaderRoute: typeof NotRemountDepsRouteRouteImport + preLoaderRoute: typeof NotRemountDepsRouteImport parentRoute: typeof rootRouteImport } '/editing-b': { id: '/editing-b' path: '/editing-b' fullPath: '/editing-b' - preLoaderRoute: typeof EditingBRouteRouteImport + preLoaderRoute: typeof EditingBRouteImport parentRoute: typeof rootRouteImport } '/editing-a': { id: '/editing-a' path: '/editing-a' fullPath: '/editing-a' - preLoaderRoute: typeof EditingARouteRouteImport + preLoaderRoute: typeof EditingARouteImport parentRoute: typeof rootRouteImport } '/_layout': { id: '/_layout' path: '' fullPath: '' - preLoaderRoute: typeof LayoutRouteRouteImport + preLoaderRoute: typeof LayoutRouteImport parentRoute: typeof rootRouteImport } '/': { id: '/' - path: '' + path: '/' fullPath: '/' - preLoaderRoute: typeof IndexRouteRouteImport + preLoaderRoute: typeof IndexRouteImport parentRoute: typeof rootRouteImport } '/posts/': { id: '/posts/' - path: '' - fullPath: '/posts' - preLoaderRoute: typeof PostsIndexRouteRouteImport - parentRoute: typeof PostsRouteRoute + path: '/' + fullPath: '/posts/' + preLoaderRoute: typeof PostsIndexRouteImport + parentRoute: typeof PostsRoute } '/posts/$postId': { id: '/posts/$postId' path: '/$postId' fullPath: '/posts/$postId' - preLoaderRoute: typeof PostsPostIdRouteRouteImport - parentRoute: typeof PostsRouteRoute + preLoaderRoute: typeof PostsPostIdRouteImport + parentRoute: typeof PostsRoute } '/_layout/_layout-2': { id: '/_layout/_layout-2' path: '' fullPath: '' - preLoaderRoute: typeof LayoutLayout2RouteRouteImport - parentRoute: typeof LayoutRouteRoute + preLoaderRoute: typeof LayoutLayout2RouteImport + parentRoute: typeof LayoutRoute } '/(group)/lazyinside': { id: '/(group)/lazyinside' path: '/lazyinside' fullPath: '/lazyinside' - preLoaderRoute: typeof groupLazyinsideRouteRouteImport + preLoaderRoute: typeof groupLazyinsideRouteImport parentRoute: typeof rootRouteImport } '/(group)/inside': { id: '/(group)/inside' path: '/inside' fullPath: '/inside' - preLoaderRoute: typeof groupInsideRouteRouteImport + preLoaderRoute: typeof groupInsideRouteImport parentRoute: typeof rootRouteImport } '/(group)/_layout': { id: '/(group)/_layout' path: '' - fullPath: '/' - preLoaderRoute: typeof groupLayoutRouteRouteImport + fullPath: '' + preLoaderRoute: typeof groupLayoutRouteImport parentRoute: typeof rootRouteImport } '/(another-group)/onlyrouteinside': { id: '/(another-group)/onlyrouteinside' path: '/onlyrouteinside' fullPath: '/onlyrouteinside' - preLoaderRoute: typeof anotherGroupOnlyrouteinsideRouteRouteImport + preLoaderRoute: typeof anotherGroupOnlyrouteinsideRouteImport parentRoute: typeof rootRouteImport } '/posts_/$postId/edit': { id: '/posts_/$postId/edit' path: '/posts/$postId/edit' fullPath: '/posts/$postId/edit' - preLoaderRoute: typeof PostsPostIdEditRouteRouteImport + preLoaderRoute: typeof PostsPostIdEditRouteImport parentRoute: typeof rootRouteImport } '/_layout/_layout-2/layout-b': { id: '/_layout/_layout-2/layout-b' path: '/layout-b' fullPath: '/layout-b' - preLoaderRoute: typeof LayoutLayout2LayoutBRouteRouteImport - parentRoute: typeof LayoutLayout2RouteRoute + preLoaderRoute: typeof LayoutLayout2LayoutBRouteImport + parentRoute: typeof LayoutLayout2Route } '/_layout/_layout-2/layout-a': { id: '/_layout/_layout-2/layout-a' path: '/layout-a' fullPath: '/layout-a' - preLoaderRoute: typeof LayoutLayout2LayoutARouteRouteImport - parentRoute: typeof LayoutLayout2RouteRoute + preLoaderRoute: typeof LayoutLayout2LayoutARouteImport + parentRoute: typeof LayoutLayout2Route } '/(group)/subfolder/inside': { id: '/(group)/subfolder/inside' path: '/subfolder/inside' fullPath: '/subfolder/inside' - preLoaderRoute: typeof groupSubfolderInsideRouteRouteImport + preLoaderRoute: typeof groupSubfolderInsideRouteImport parentRoute: typeof rootRouteImport } '/(group)/_layout/insidelayout': { id: '/(group)/_layout/insidelayout' path: '/insidelayout' fullPath: '/insidelayout' - preLoaderRoute: typeof groupLayoutInsidelayoutRouteRouteImport - parentRoute: typeof groupLayoutRouteRoute + preLoaderRoute: typeof groupLayoutInsidelayoutRouteImport + parentRoute: typeof groupLayoutRoute } } } -interface LayoutLayout2RouteRouteChildren { - LayoutLayout2LayoutARouteRoute: typeof LayoutLayout2LayoutARouteRoute - LayoutLayout2LayoutBRouteRoute: typeof LayoutLayout2LayoutBRouteRoute +interface LayoutLayout2RouteChildren { + LayoutLayout2LayoutARoute: typeof LayoutLayout2LayoutARoute + LayoutLayout2LayoutBRoute: typeof LayoutLayout2LayoutBRoute } -const LayoutLayout2RouteRouteChildren: LayoutLayout2RouteRouteChildren = { - LayoutLayout2LayoutARouteRoute: LayoutLayout2LayoutARouteRoute, - LayoutLayout2LayoutBRouteRoute: LayoutLayout2LayoutBRouteRoute, +const LayoutLayout2RouteChildren: LayoutLayout2RouteChildren = { + LayoutLayout2LayoutARoute: LayoutLayout2LayoutARoute, + LayoutLayout2LayoutBRoute: LayoutLayout2LayoutBRoute, } -const LayoutLayout2RouteRouteWithChildren = - LayoutLayout2RouteRoute._addFileChildren(LayoutLayout2RouteRouteChildren) +const LayoutLayout2RouteWithChildren = LayoutLayout2Route._addFileChildren( + LayoutLayout2RouteChildren, +) -interface LayoutRouteRouteChildren { - LayoutLayout2RouteRoute: typeof LayoutLayout2RouteRouteWithChildren +interface LayoutRouteChildren { + LayoutLayout2Route: typeof LayoutLayout2RouteWithChildren } -const LayoutRouteRouteChildren: LayoutRouteRouteChildren = { - LayoutLayout2RouteRoute: LayoutLayout2RouteRouteWithChildren, +const LayoutRouteChildren: LayoutRouteChildren = { + LayoutLayout2Route: LayoutLayout2RouteWithChildren, } -const LayoutRouteRouteWithChildren = LayoutRouteRoute._addFileChildren( - LayoutRouteRouteChildren, -) +const LayoutRouteWithChildren = + LayoutRoute._addFileChildren(LayoutRouteChildren) -interface PostsRouteRouteChildren { - PostsPostIdRouteRoute: typeof PostsPostIdRouteRoute - PostsIndexRouteRoute: typeof PostsIndexRouteRoute +interface PostsRouteChildren { + PostsPostIdRoute: typeof PostsPostIdRoute + PostsIndexRoute: typeof PostsIndexRoute } -const PostsRouteRouteChildren: PostsRouteRouteChildren = { - PostsPostIdRouteRoute: PostsPostIdRouteRoute, - PostsIndexRouteRoute: PostsIndexRouteRoute, +const PostsRouteChildren: PostsRouteChildren = { + PostsPostIdRoute: PostsPostIdRoute, + PostsIndexRoute: PostsIndexRoute, } -const PostsRouteRouteWithChildren = PostsRouteRoute._addFileChildren( - PostsRouteRouteChildren, -) +const PostsRouteWithChildren = PostsRoute._addFileChildren(PostsRouteChildren) -interface groupLayoutRouteRouteChildren { - groupLayoutInsidelayoutRouteRoute: typeof groupLayoutInsidelayoutRouteRoute +interface groupLayoutRouteChildren { + groupLayoutInsidelayoutRoute: typeof groupLayoutInsidelayoutRoute } -const groupLayoutRouteRouteChildren: groupLayoutRouteRouteChildren = { - groupLayoutInsidelayoutRouteRoute: groupLayoutInsidelayoutRouteRoute, +const groupLayoutRouteChildren: groupLayoutRouteChildren = { + groupLayoutInsidelayoutRoute: groupLayoutInsidelayoutRoute, } -const groupLayoutRouteRouteWithChildren = - groupLayoutRouteRoute._addFileChildren(groupLayoutRouteRouteChildren) +const groupLayoutRouteWithChildren = groupLayoutRoute._addFileChildren( + groupLayoutRouteChildren, +) const rootRouteChildren: RootRouteChildren = { - IndexRouteRoute: IndexRouteRoute, - LayoutRouteRoute: LayoutRouteRouteWithChildren, - EditingARouteRoute: EditingARouteRoute, - EditingBRouteRoute: EditingBRouteRoute, - NotRemountDepsRouteRoute: NotRemountDepsRouteRoute, - PostsRouteRoute: PostsRouteRouteWithChildren, - RemountDepsRouteRoute: RemountDepsRouteRoute, - Char45824Char54620Char48124Char44397RouteRoute: - Char45824Char54620Char48124Char44397RouteRoute, - anotherGroupOnlyrouteinsideRouteRoute: anotherGroupOnlyrouteinsideRouteRoute, - groupLayoutRouteRoute: groupLayoutRouteRouteWithChildren, - groupInsideRouteRoute: groupInsideRouteRoute, - groupLazyinsideRouteRoute: groupLazyinsideRouteRoute, - groupSubfolderInsideRouteRoute: groupSubfolderInsideRouteRoute, - PostsPostIdEditRouteRoute: PostsPostIdEditRouteRoute, + IndexRoute: IndexRoute, + LayoutRoute: LayoutRouteWithChildren, + EditingARoute: EditingARoute, + EditingBRoute: EditingBRoute, + NotRemountDepsRoute: NotRemountDepsRoute, + PostsRoute: PostsRouteWithChildren, + RemountDepsRoute: RemountDepsRoute, + Char45824Char54620Char48124Char44397Route: + Char45824Char54620Char48124Char44397Route, + anotherGroupOnlyrouteinsideRoute: anotherGroupOnlyrouteinsideRoute, + groupLayoutRoute: groupLayoutRouteWithChildren, + groupInsideRoute: groupInsideRoute, + groupLazyinsideRoute: groupLazyinsideRoute, + groupSubfolderInsideRoute: groupSubfolderInsideRoute, + PostsPostIdEditRoute: PostsPostIdEditRoute, } export const routeTree = rootRouteImport .update({ diff --git a/e2e/vue-router/basic-file-based-sfc/src/routes/(another-group)/onlyrouteinside.route.ts b/e2e/vue-router/basic-file-based-sfc/src/routes/(another-group)/onlyrouteinside.ts similarity index 100% rename from e2e/vue-router/basic-file-based-sfc/src/routes/(another-group)/onlyrouteinside.route.ts rename to e2e/vue-router/basic-file-based-sfc/src/routes/(another-group)/onlyrouteinside.ts diff --git a/e2e/vue-router/basic-file-based-sfc/src/routes/(group)/_layout.insidelayout.route.ts b/e2e/vue-router/basic-file-based-sfc/src/routes/(group)/_layout.insidelayout.ts similarity index 100% rename from e2e/vue-router/basic-file-based-sfc/src/routes/(group)/_layout.insidelayout.route.ts rename to e2e/vue-router/basic-file-based-sfc/src/routes/(group)/_layout.insidelayout.ts diff --git a/e2e/vue-router/basic-file-based-sfc/src/routes/(group)/_layout.route.ts b/e2e/vue-router/basic-file-based-sfc/src/routes/(group)/_layout.ts similarity index 100% rename from e2e/vue-router/basic-file-based-sfc/src/routes/(group)/_layout.route.ts rename to e2e/vue-router/basic-file-based-sfc/src/routes/(group)/_layout.ts diff --git a/e2e/vue-router/basic-file-based-sfc/src/routes/(group)/inside.route.ts b/e2e/vue-router/basic-file-based-sfc/src/routes/(group)/inside.ts similarity index 100% rename from e2e/vue-router/basic-file-based-sfc/src/routes/(group)/inside.route.ts rename to e2e/vue-router/basic-file-based-sfc/src/routes/(group)/inside.ts diff --git a/e2e/vue-router/basic-file-based-sfc/src/routes/(group)/lazyinside.route.ts b/e2e/vue-router/basic-file-based-sfc/src/routes/(group)/lazyinside.ts similarity index 100% rename from e2e/vue-router/basic-file-based-sfc/src/routes/(group)/lazyinside.route.ts rename to e2e/vue-router/basic-file-based-sfc/src/routes/(group)/lazyinside.ts diff --git a/e2e/vue-router/basic-file-based-sfc/src/routes/(group)/subfolder/inside.route.ts b/e2e/vue-router/basic-file-based-sfc/src/routes/(group)/subfolder/inside.ts similarity index 100% rename from e2e/vue-router/basic-file-based-sfc/src/routes/(group)/subfolder/inside.route.ts rename to e2e/vue-router/basic-file-based-sfc/src/routes/(group)/subfolder/inside.ts diff --git a/e2e/vue-router/basic-file-based-sfc/src/routes/_layout.route.ts b/e2e/vue-router/basic-file-based-sfc/src/routes/_layout.ts similarity index 100% rename from e2e/vue-router/basic-file-based-sfc/src/routes/_layout.route.ts rename to e2e/vue-router/basic-file-based-sfc/src/routes/_layout.ts diff --git a/e2e/vue-router/basic-file-based-sfc/src/routes/_layout/_layout-2.route.ts b/e2e/vue-router/basic-file-based-sfc/src/routes/_layout/_layout-2.ts similarity index 100% rename from e2e/vue-router/basic-file-based-sfc/src/routes/_layout/_layout-2.route.ts rename to e2e/vue-router/basic-file-based-sfc/src/routes/_layout/_layout-2.ts diff --git a/e2e/vue-router/basic-file-based-sfc/src/routes/_layout/_layout-2/layout-a.route.ts b/e2e/vue-router/basic-file-based-sfc/src/routes/_layout/_layout-2/layout-a.ts similarity index 100% rename from e2e/vue-router/basic-file-based-sfc/src/routes/_layout/_layout-2/layout-a.route.ts rename to e2e/vue-router/basic-file-based-sfc/src/routes/_layout/_layout-2/layout-a.ts diff --git a/e2e/vue-router/basic-file-based-sfc/src/routes/_layout/_layout-2/layout-b.route.ts b/e2e/vue-router/basic-file-based-sfc/src/routes/_layout/_layout-2/layout-b.ts similarity index 100% rename from e2e/vue-router/basic-file-based-sfc/src/routes/_layout/_layout-2/layout-b.route.ts rename to e2e/vue-router/basic-file-based-sfc/src/routes/_layout/_layout-2/layout-b.ts diff --git a/e2e/vue-router/basic-file-based-sfc/src/routes/editing-a.route.ts b/e2e/vue-router/basic-file-based-sfc/src/routes/editing-a.ts similarity index 100% rename from e2e/vue-router/basic-file-based-sfc/src/routes/editing-a.route.ts rename to e2e/vue-router/basic-file-based-sfc/src/routes/editing-a.ts diff --git a/e2e/vue-router/basic-file-based-sfc/src/routes/editing-b.route.ts b/e2e/vue-router/basic-file-based-sfc/src/routes/editing-b.ts similarity index 100% rename from e2e/vue-router/basic-file-based-sfc/src/routes/editing-b.route.ts rename to e2e/vue-router/basic-file-based-sfc/src/routes/editing-b.ts diff --git a/e2e/vue-router/basic-file-based-sfc/src/routes/index.route.ts b/e2e/vue-router/basic-file-based-sfc/src/routes/index.ts similarity index 100% rename from e2e/vue-router/basic-file-based-sfc/src/routes/index.route.ts rename to e2e/vue-router/basic-file-based-sfc/src/routes/index.ts diff --git a/e2e/vue-router/basic-file-based-sfc/src/routes/notRemountDeps.route.ts b/e2e/vue-router/basic-file-based-sfc/src/routes/notRemountDeps.ts similarity index 100% rename from e2e/vue-router/basic-file-based-sfc/src/routes/notRemountDeps.route.ts rename to e2e/vue-router/basic-file-based-sfc/src/routes/notRemountDeps.ts diff --git a/e2e/vue-router/basic-file-based-sfc/src/routes/posts.$postId.route.ts b/e2e/vue-router/basic-file-based-sfc/src/routes/posts.$postId.ts similarity index 100% rename from e2e/vue-router/basic-file-based-sfc/src/routes/posts.$postId.route.ts rename to e2e/vue-router/basic-file-based-sfc/src/routes/posts.$postId.ts diff --git a/e2e/vue-router/basic-file-based-sfc/src/routes/posts.index.route.ts b/e2e/vue-router/basic-file-based-sfc/src/routes/posts.index.ts similarity index 100% rename from e2e/vue-router/basic-file-based-sfc/src/routes/posts.index.route.ts rename to e2e/vue-router/basic-file-based-sfc/src/routes/posts.index.ts diff --git a/e2e/vue-router/basic-file-based-sfc/src/routes/posts.route.ts b/e2e/vue-router/basic-file-based-sfc/src/routes/posts.ts similarity index 100% rename from e2e/vue-router/basic-file-based-sfc/src/routes/posts.route.ts rename to e2e/vue-router/basic-file-based-sfc/src/routes/posts.ts diff --git a/e2e/vue-router/basic-file-based-sfc/src/routes/posts_.$postId.edit.route.ts b/e2e/vue-router/basic-file-based-sfc/src/routes/posts_.$postId.edit.ts similarity index 100% rename from e2e/vue-router/basic-file-based-sfc/src/routes/posts_.$postId.edit.route.ts rename to e2e/vue-router/basic-file-based-sfc/src/routes/posts_.$postId.edit.ts diff --git a/e2e/vue-router/basic-file-based-sfc/src/routes/remountDeps.route.ts b/e2e/vue-router/basic-file-based-sfc/src/routes/remountDeps.ts similarity index 100% rename from e2e/vue-router/basic-file-based-sfc/src/routes/remountDeps.route.ts rename to e2e/vue-router/basic-file-based-sfc/src/routes/remountDeps.ts diff --git "a/e2e/vue-router/basic-file-based-sfc/src/routes/\353\214\200\355\225\234\353\257\274\352\265\255.route.ts" "b/e2e/vue-router/basic-file-based-sfc/src/routes/\353\214\200\355\225\234\353\257\274\352\265\255.ts" similarity index 100% rename from "e2e/vue-router/basic-file-based-sfc/src/routes/\353\214\200\355\225\234\353\257\274\352\265\255.route.ts" rename to "e2e/vue-router/basic-file-based-sfc/src/routes/\353\214\200\355\225\234\353\257\274\352\265\255.ts" diff --git a/packages/router-generator/src/utils.ts b/packages/router-generator/src/utils.ts index 3e7791e4574..a3f3ee6705f 100644 --- a/packages/router-generator/src/utils.ts +++ b/packages/router-generator/src/utils.ts @@ -332,7 +332,9 @@ export function removeGroups(s: string) { export function removeLayoutSegments(routePath: string = '/'): string { const segments = routePath.split('/') const newSegments = segments.filter((segment) => !segment.startsWith('_')) - return newSegments.join('/') + const result = newSegments.join('/') + // Preserve root path - when input is '/', split gives ['', ''] which joins back to '' + return result || '/' } /** @@ -494,8 +496,16 @@ export const inferFullPath = ( : removeUnderscores(removeLayoutSegments(routeNode.routePath))) ?? '', ) + // Pathless layout routes at root should have empty fullPath, not '/' + // (regular 'layout' routes like index.route.ts should keep '/') + if (routeNode._fsRouteType === 'pathless_layout') { + if (fullPath === '/') { + return '' + } + return fullPath.replace(/\/$/, '') + } + // For index routes at root, fullPath will be '/' and we want to keep it - // For layout routes, fullPath will be '' after removing layout segments if (fullPath === '/' || routeNode.cleanedPath === '/') { return fullPath } From 76e598bd58e3b51d15c3f808e6b5d5814d484469 Mon Sep 17 00:00:00 2001 From: Birk Skyum Date: Wed, 3 Dec 2025 03:27:08 +0100 Subject: [PATCH 091/114] clen utils --- packages/router-generator/src/utils.ts | 19 ++----------------- 1 file changed, 2 insertions(+), 17 deletions(-) diff --git a/packages/router-generator/src/utils.ts b/packages/router-generator/src/utils.ts index a3f3ee6705f..5f497c85440 100644 --- a/packages/router-generator/src/utils.ts +++ b/packages/router-generator/src/utils.ts @@ -332,9 +332,7 @@ export function removeGroups(s: string) { export function removeLayoutSegments(routePath: string = '/'): string { const segments = routePath.split('/') const newSegments = segments.filter((segment) => !segment.startsWith('_')) - const result = newSegments.join('/') - // Preserve root path - when input is '/', split gives ['', ''] which joins back to '' - return result || '/' + return newSegments.join('/') } /** @@ -496,20 +494,7 @@ export const inferFullPath = ( : removeUnderscores(removeLayoutSegments(routeNode.routePath))) ?? '', ) - // Pathless layout routes at root should have empty fullPath, not '/' - // (regular 'layout' routes like index.route.ts should keep '/') - if (routeNode._fsRouteType === 'pathless_layout') { - if (fullPath === '/') { - return '' - } - return fullPath.replace(/\/$/, '') - } - - // For index routes at root, fullPath will be '/' and we want to keep it - if (fullPath === '/' || routeNode.cleanedPath === '/') { - return fullPath - } - return fullPath.replace(/\/$/, '') + return routeNode.cleanedPath === '/' ? fullPath : fullPath.replace(/\/$/, '') } /** From 4e61d50ab008ca345ac9dfdd8102edb81c7f7ef7 Mon Sep 17 00:00:00 2001 From: Birk Skyum Date: Wed, 3 Dec 2025 03:42:50 +0100 Subject: [PATCH 092/114] update vue examples --- examples/vue/basic-file-based-jsx/.gitignore | 10 - examples/vue/basic-file-based-jsx/README.md | 6 - .../eslint.config.js | 6 +- examples/vue/basic-file-based-jsx/index.html | 1 - .../vue/basic-file-based-jsx/package.json | 37 +- .../basic-file-based-jsx/postcss.config.mjs | 3 +- .../src/components/EditingAComponent.tsx | 39 ++ .../src/components/EditingBComponent.tsx | 32 + .../src/components/NotFoundComponent.vue | 10 + .../components/NotRemountDepsComponent.tsx | 33 + .../src/components/PostErrorComponent.tsx | 6 - .../src/components/PostErrorComponent.vue | 10 + .../src/components/RemountDepsComponent.tsx | 34 + .../src/components/VueLogo.vue | 100 +++ .../vue/basic-file-based-jsx/src/posts.tsx | 10 +- .../basic-file-based-jsx/src/routeTree.gen.ts | 654 ++++++++++++------ .../(another-group)/onlyrouteinside.tsx | 24 + .../routes/(group)/_layout.insidelayout.tsx | 24 + .../src/routes/(group)/_layout.tsx | 14 + .../src/routes/(group)/inside.tsx | 24 + .../src/routes/(group)/lazyinside.tsx | 24 + .../src/routes/(group)/subfolder/inside.tsx | 24 + .../src/routes/__root.tsx | 99 ++- .../src/routes/_layout.tsx} | 2 +- .../src/routes/_layout/_layout-2.tsx | 24 + .../src/routes/_layout/_layout-2/layout-a.tsx | 9 + .../src/routes/_layout/_layout-2/layout-b.tsx | 9 + .../src/routes/_pathlessLayout.tsx | 16 - .../routes/_pathlessLayout/_nested-layout.tsx | 34 - .../_nested-layout/route-a.tsx | 11 - .../_nested-layout/route-b.tsx | 11 - .../src/routes/editing-a.tsx | 6 + .../src/routes/editing-b.tsx | 6 + .../basic-file-based-jsx/src/routes/index.tsx | 6 +- .../src/routes/notRemountDeps.tsx | 15 + .../src/routes/posts.$postId.tsx | 21 +- .../src/routes/posts.index.tsx | 2 +- .../basic-file-based-jsx/src/routes/posts.tsx | 40 +- .../src/routes/posts_.$postId.edit.tsx | 21 + .../src/routes/remountDeps.tsx | 15 + .../src/routes/sfcComponent.component.vue | 10 + .../src/routes/sfcComponent.tsx | 9 + ...0\355\225\234\353\257\274\352\265\255.tsx" | 17 + .../vue/basic-file-based-jsx/src/styles.css | 16 +- .../basic-file-based-jsx/tailwind.config.mjs | 4 - .../basic-file-based-jsx/tsconfig.dev.json | 10 - .../vue/basic-file-based-jsx/tsconfig.json | 20 +- .../vue/basic-file-based-jsx/vite.config.js | 7 - .../vue/basic-file-based-jsx/vite.config.ts | 16 + .../index.html | 1 - .../vue/basic-file-based-sfc/package.json | 29 + .../basic-file-based-sfc/postcss.config.mjs | 5 + .../src/main.ts | 9 +- .../src/posts.ts} | 10 +- .../basic-file-based-sfc/src/routeTree.gen.ts | 612 ++++++++++++++++ .../onlyrouteinside.component.vue | 17 + .../routes/(another-group)/onlyrouteinside.ts | 7 + .../src/routes/(group)/_layout.component.vue | 10 + .../_layout.insidelayout.component.vue | 17 + .../routes/(group)/_layout.insidelayout.ts | 7 + .../src/routes/(group)/_layout.ts | 3 + .../src/routes/(group)/inside.component.vue | 17 + .../src/routes/(group)/inside.ts | 7 + .../routes/(group)/lazyinside.component.vue | 17 + .../src/routes/(group)/lazyinside.ts | 7 + .../(group)/subfolder/inside.component.vue | 17 + .../src/routes/(group)/subfolder/inside.ts | 7 + .../src/routes/__root.component.vue | 79 +++ .../src/routes/__root.notFoundComponent.vue | 10 + .../basic-file-based-sfc/src/routes/__root.ts | 3 + .../src/routes/_layout.component.vue | 12 + .../src/routes/_layout.ts | 5 + .../routes/_layout/_layout-2.component.vue | 26 + .../src/routes/_layout/_layout-2.ts | 5 + .../_layout/_layout-2/layout-a.component.vue | 3 + .../src/routes/_layout/_layout-2/layout-a.ts | 5 + .../_layout/_layout-2/layout-b.component.vue | 3 + .../src/routes/_layout/_layout-2/layout-b.ts | 5 + .../src/routes/editing-a.component.vue | 31 + .../src/routes/editing-a.ts | 3 + .../src/routes/editing-b.component.vue | 26 + .../src/routes/editing-b.ts | 3 + .../src/routes/index.component.vue | 5 + .../src/routes/index.ts} | 4 +- .../src/routes/notRemountDeps.component.vue | 30 + .../src/routes/notRemountDeps.ts | 13 + .../src/routes/posts.$postId.component.vue | 13 + .../routes/posts.$postId.errorComponent.vue | 10 + .../src/routes/posts.$postId.ts | 8 + .../src/routes/posts.component.vue | 29 + .../src/routes/posts.index.component.vue | 3 + .../src/routes/posts.index.ts} | 6 +- .../basic-file-based-sfc/src/routes/posts.ts | 13 + .../routes/posts_.$postId.edit.component.vue | 17 + .../src/routes/posts_.$postId.edit.ts | 3 + .../src/routes/remountDeps.component.vue | 36 + .../src/routes/remountDeps.ts | 13 + ...234\353\257\274\352\265\255.component.vue" | 11 + ...00\355\225\234\353\257\274\352\265\255.ts" | 3 + .../vue/basic-file-based-sfc/src/styles.css | 24 + .../basic-file-based-sfc/src/vue-shims.d.ts | 5 + .../vue/basic-file-based-sfc/tsconfig.json | 15 + .../vue/basic-file-based-sfc/vite.config.ts | 16 + examples/vue/basic-file-based/.gitignore | 10 - examples/vue/basic-file-based/README.md | 6 - examples/vue/basic-file-based/package.json | 34 - .../vue/basic-file-based/postcss.config.mjs | 6 - .../basic-file-based/src/components/Home.vue | 9 - .../src/components/PostsComponent.vue | 38 - .../src/components/RootComponent.vue | 62 -- .../vue/basic-file-based/src/routeTree.gen.ts | 307 -------- .../routes/-components/PostErrorComponent.tsx | 6 - .../basic-file-based/src/routes/__root.tsx | 20 - .../routes/_pathlessLayout/_nested-layout.tsx | 34 - .../_nested-layout/route-a.tsx | 11 - .../_nested-layout/route-b.tsx | 11 - .../src/routes/posts.$postId.tsx | 23 - .../vue/basic-file-based/src/routes/posts.tsx | 17 - examples/vue/basic-file-based/src/styles.css | 13 - .../vue/basic-file-based/src/vue-shims.d.ts | 6 - .../vue/basic-file-based/tailwind.config.mjs | 4 - .../vue/basic-file-based/tsconfig.dev.json | 10 - examples/vue/basic-file-based/tsconfig.json | 22 - examples/vue/basic-file-based/vite.config.js | 8 - 124 files changed, 2422 insertions(+), 1111 deletions(-) delete mode 100644 examples/vue/basic-file-based-jsx/.gitignore delete mode 100644 examples/vue/basic-file-based-jsx/README.md rename examples/vue/{basic-file-based => basic-file-based-jsx}/eslint.config.js (98%) create mode 100644 examples/vue/basic-file-based-jsx/src/components/EditingAComponent.tsx create mode 100644 examples/vue/basic-file-based-jsx/src/components/EditingBComponent.tsx create mode 100644 examples/vue/basic-file-based-jsx/src/components/NotFoundComponent.vue create mode 100644 examples/vue/basic-file-based-jsx/src/components/NotRemountDepsComponent.tsx delete mode 100644 examples/vue/basic-file-based-jsx/src/components/PostErrorComponent.tsx create mode 100644 examples/vue/basic-file-based-jsx/src/components/PostErrorComponent.vue create mode 100644 examples/vue/basic-file-based-jsx/src/components/RemountDepsComponent.tsx create mode 100644 examples/vue/basic-file-based-jsx/src/components/VueLogo.vue create mode 100644 examples/vue/basic-file-based-jsx/src/routes/(another-group)/onlyrouteinside.tsx create mode 100644 examples/vue/basic-file-based-jsx/src/routes/(group)/_layout.insidelayout.tsx create mode 100644 examples/vue/basic-file-based-jsx/src/routes/(group)/_layout.tsx create mode 100644 examples/vue/basic-file-based-jsx/src/routes/(group)/inside.tsx create mode 100644 examples/vue/basic-file-based-jsx/src/routes/(group)/lazyinside.tsx create mode 100644 examples/vue/basic-file-based-jsx/src/routes/(group)/subfolder/inside.tsx rename examples/vue/{basic-file-based/src/routes/_pathlessLayout.tsx => basic-file-based-jsx/src/routes/_layout.tsx} (81%) create mode 100644 examples/vue/basic-file-based-jsx/src/routes/_layout/_layout-2.tsx create mode 100644 examples/vue/basic-file-based-jsx/src/routes/_layout/_layout-2/layout-a.tsx create mode 100644 examples/vue/basic-file-based-jsx/src/routes/_layout/_layout-2/layout-b.tsx delete mode 100644 examples/vue/basic-file-based-jsx/src/routes/_pathlessLayout.tsx delete mode 100644 examples/vue/basic-file-based-jsx/src/routes/_pathlessLayout/_nested-layout.tsx delete mode 100644 examples/vue/basic-file-based-jsx/src/routes/_pathlessLayout/_nested-layout/route-a.tsx delete mode 100644 examples/vue/basic-file-based-jsx/src/routes/_pathlessLayout/_nested-layout/route-b.tsx create mode 100644 examples/vue/basic-file-based-jsx/src/routes/editing-a.tsx create mode 100644 examples/vue/basic-file-based-jsx/src/routes/editing-b.tsx create mode 100644 examples/vue/basic-file-based-jsx/src/routes/notRemountDeps.tsx create mode 100644 examples/vue/basic-file-based-jsx/src/routes/posts_.$postId.edit.tsx create mode 100644 examples/vue/basic-file-based-jsx/src/routes/remountDeps.tsx create mode 100644 examples/vue/basic-file-based-jsx/src/routes/sfcComponent.component.vue create mode 100644 examples/vue/basic-file-based-jsx/src/routes/sfcComponent.tsx create mode 100644 "examples/vue/basic-file-based-jsx/src/routes/\353\214\200\355\225\234\353\257\274\352\265\255.tsx" delete mode 100644 examples/vue/basic-file-based-jsx/tailwind.config.mjs delete mode 100644 examples/vue/basic-file-based-jsx/tsconfig.dev.json delete mode 100644 examples/vue/basic-file-based-jsx/vite.config.js create mode 100644 examples/vue/basic-file-based-jsx/vite.config.ts rename examples/vue/{basic-file-based => basic-file-based-sfc}/index.html (90%) create mode 100644 examples/vue/basic-file-based-sfc/package.json create mode 100644 examples/vue/basic-file-based-sfc/postcss.config.mjs rename examples/vue/{basic-file-based => basic-file-based-sfc}/src/main.ts (89%) rename examples/vue/{basic-file-based/src/posts.tsx => basic-file-based-sfc/src/posts.ts} (70%) create mode 100644 examples/vue/basic-file-based-sfc/src/routeTree.gen.ts create mode 100644 examples/vue/basic-file-based-sfc/src/routes/(another-group)/onlyrouteinside.component.vue create mode 100644 examples/vue/basic-file-based-sfc/src/routes/(another-group)/onlyrouteinside.ts create mode 100644 examples/vue/basic-file-based-sfc/src/routes/(group)/_layout.component.vue create mode 100644 examples/vue/basic-file-based-sfc/src/routes/(group)/_layout.insidelayout.component.vue create mode 100644 examples/vue/basic-file-based-sfc/src/routes/(group)/_layout.insidelayout.ts create mode 100644 examples/vue/basic-file-based-sfc/src/routes/(group)/_layout.ts create mode 100644 examples/vue/basic-file-based-sfc/src/routes/(group)/inside.component.vue create mode 100644 examples/vue/basic-file-based-sfc/src/routes/(group)/inside.ts create mode 100644 examples/vue/basic-file-based-sfc/src/routes/(group)/lazyinside.component.vue create mode 100644 examples/vue/basic-file-based-sfc/src/routes/(group)/lazyinside.ts create mode 100644 examples/vue/basic-file-based-sfc/src/routes/(group)/subfolder/inside.component.vue create mode 100644 examples/vue/basic-file-based-sfc/src/routes/(group)/subfolder/inside.ts create mode 100644 examples/vue/basic-file-based-sfc/src/routes/__root.component.vue create mode 100644 examples/vue/basic-file-based-sfc/src/routes/__root.notFoundComponent.vue create mode 100644 examples/vue/basic-file-based-sfc/src/routes/__root.ts create mode 100644 examples/vue/basic-file-based-sfc/src/routes/_layout.component.vue create mode 100644 examples/vue/basic-file-based-sfc/src/routes/_layout.ts create mode 100644 examples/vue/basic-file-based-sfc/src/routes/_layout/_layout-2.component.vue create mode 100644 examples/vue/basic-file-based-sfc/src/routes/_layout/_layout-2.ts create mode 100644 examples/vue/basic-file-based-sfc/src/routes/_layout/_layout-2/layout-a.component.vue create mode 100644 examples/vue/basic-file-based-sfc/src/routes/_layout/_layout-2/layout-a.ts create mode 100644 examples/vue/basic-file-based-sfc/src/routes/_layout/_layout-2/layout-b.component.vue create mode 100644 examples/vue/basic-file-based-sfc/src/routes/_layout/_layout-2/layout-b.ts create mode 100644 examples/vue/basic-file-based-sfc/src/routes/editing-a.component.vue create mode 100644 examples/vue/basic-file-based-sfc/src/routes/editing-a.ts create mode 100644 examples/vue/basic-file-based-sfc/src/routes/editing-b.component.vue create mode 100644 examples/vue/basic-file-based-sfc/src/routes/editing-b.ts create mode 100644 examples/vue/basic-file-based-sfc/src/routes/index.component.vue rename examples/vue/{basic-file-based/src/routes/index.tsx => basic-file-based-sfc/src/routes/index.ts} (52%) create mode 100644 examples/vue/basic-file-based-sfc/src/routes/notRemountDeps.component.vue create mode 100644 examples/vue/basic-file-based-sfc/src/routes/notRemountDeps.ts create mode 100644 examples/vue/basic-file-based-sfc/src/routes/posts.$postId.component.vue create mode 100644 examples/vue/basic-file-based-sfc/src/routes/posts.$postId.errorComponent.vue create mode 100644 examples/vue/basic-file-based-sfc/src/routes/posts.$postId.ts create mode 100644 examples/vue/basic-file-based-sfc/src/routes/posts.component.vue create mode 100644 examples/vue/basic-file-based-sfc/src/routes/posts.index.component.vue rename examples/vue/{basic-file-based/src/routes/posts.index.tsx => basic-file-based-sfc/src/routes/posts.index.ts} (50%) create mode 100644 examples/vue/basic-file-based-sfc/src/routes/posts.ts create mode 100644 examples/vue/basic-file-based-sfc/src/routes/posts_.$postId.edit.component.vue create mode 100644 examples/vue/basic-file-based-sfc/src/routes/posts_.$postId.edit.ts create mode 100644 examples/vue/basic-file-based-sfc/src/routes/remountDeps.component.vue create mode 100644 examples/vue/basic-file-based-sfc/src/routes/remountDeps.ts create mode 100644 "examples/vue/basic-file-based-sfc/src/routes/\353\214\200\355\225\234\353\257\274\352\265\255.component.vue" create mode 100644 "examples/vue/basic-file-based-sfc/src/routes/\353\214\200\355\225\234\353\257\274\352\265\255.ts" create mode 100644 examples/vue/basic-file-based-sfc/src/styles.css create mode 100644 examples/vue/basic-file-based-sfc/src/vue-shims.d.ts create mode 100644 examples/vue/basic-file-based-sfc/tsconfig.json create mode 100644 examples/vue/basic-file-based-sfc/vite.config.ts delete mode 100644 examples/vue/basic-file-based/.gitignore delete mode 100644 examples/vue/basic-file-based/README.md delete mode 100644 examples/vue/basic-file-based/package.json delete mode 100644 examples/vue/basic-file-based/postcss.config.mjs delete mode 100644 examples/vue/basic-file-based/src/components/Home.vue delete mode 100644 examples/vue/basic-file-based/src/components/PostsComponent.vue delete mode 100644 examples/vue/basic-file-based/src/components/RootComponent.vue delete mode 100644 examples/vue/basic-file-based/src/routeTree.gen.ts delete mode 100644 examples/vue/basic-file-based/src/routes/-components/PostErrorComponent.tsx delete mode 100644 examples/vue/basic-file-based/src/routes/__root.tsx delete mode 100644 examples/vue/basic-file-based/src/routes/_pathlessLayout/_nested-layout.tsx delete mode 100644 examples/vue/basic-file-based/src/routes/_pathlessLayout/_nested-layout/route-a.tsx delete mode 100644 examples/vue/basic-file-based/src/routes/_pathlessLayout/_nested-layout/route-b.tsx delete mode 100644 examples/vue/basic-file-based/src/routes/posts.$postId.tsx delete mode 100644 examples/vue/basic-file-based/src/routes/posts.tsx delete mode 100644 examples/vue/basic-file-based/src/styles.css delete mode 100644 examples/vue/basic-file-based/src/vue-shims.d.ts delete mode 100644 examples/vue/basic-file-based/tailwind.config.mjs delete mode 100644 examples/vue/basic-file-based/tsconfig.dev.json delete mode 100644 examples/vue/basic-file-based/tsconfig.json delete mode 100644 examples/vue/basic-file-based/vite.config.js diff --git a/examples/vue/basic-file-based-jsx/.gitignore b/examples/vue/basic-file-based-jsx/.gitignore deleted file mode 100644 index 8354e4d50d5..00000000000 --- a/examples/vue/basic-file-based-jsx/.gitignore +++ /dev/null @@ -1,10 +0,0 @@ -node_modules -.DS_Store -dist -dist-ssr -*.local - -/test-results/ -/playwright-report/ -/blob-report/ -/playwright/.cache/ \ No newline at end of file diff --git a/examples/vue/basic-file-based-jsx/README.md b/examples/vue/basic-file-based-jsx/README.md deleted file mode 100644 index 115199d292c..00000000000 --- a/examples/vue/basic-file-based-jsx/README.md +++ /dev/null @@ -1,6 +0,0 @@ -# Example - -To run this example: - -- `npm install` or `yarn` -- `npm start` or `yarn start` diff --git a/examples/vue/basic-file-based/eslint.config.js b/examples/vue/basic-file-based-jsx/eslint.config.js similarity index 98% rename from examples/vue/basic-file-based/eslint.config.js rename to examples/vue/basic-file-based-jsx/eslint.config.js index d25f707b08f..4e8d00f1d89 100644 --- a/examples/vue/basic-file-based/eslint.config.js +++ b/examples/vue/basic-file-based-jsx/eslint.config.js @@ -28,11 +28,11 @@ export default [ // Vue specific rules 'vue/multi-word-component-names': 'off', 'vue/no-unused-vars': 'error', - + // TypeScript rules '@typescript-eslint/no-unused-vars': 'error', '@typescript-eslint/no-explicit-any': 'warn', - + // General rules 'no-unused-vars': 'off', // Let TypeScript handle this }, @@ -46,4 +46,4 @@ export default [ }, }, }, -] \ No newline at end of file +] diff --git a/examples/vue/basic-file-based-jsx/index.html b/examples/vue/basic-file-based-jsx/index.html index 9b6335c0ac1..21e30f16951 100644 --- a/examples/vue/basic-file-based-jsx/index.html +++ b/examples/vue/basic-file-based-jsx/index.html @@ -3,7 +3,6 @@ - Vite App
diff --git a/examples/vue/basic-file-based-jsx/package.json b/examples/vue/basic-file-based-jsx/package.json index e2137ffdab4..6421a0c9b62 100644 --- a/examples/vue/basic-file-based-jsx/package.json +++ b/examples/vue/basic-file-based-jsx/package.json @@ -3,24 +3,35 @@ "private": true, "type": "module", "scripts": { - "dev": "vite --port=3000", - "build": "vite build && tsc --noEmit", - "serve": "vite preview", - "start": "vite" + "dev": "vite --port 3000", + "dev:e2e": "vite", + "build": "vite build && vue-tsc --noEmit", + "preview": "vite preview", + "start": "vite", + "test:e2e": "rm -rf port*.txt; playwright test --project=chromium" }, "dependencies": { - "@tanstack/vue-router": "workspace:*", - "@tanstack/vue-router-devtools": "workspace:*", - "redaxios": "^0.5.1", + "@tailwindcss/postcss": "^4.1.15", + "@tanstack/router-plugin": "^1.139.14", + "@tanstack/vue-router": "^1.139.14", + "@tanstack/vue-router-devtools": "^1.139.14", + "@tanstack/zod-adapter": "^1.139.14", "postcss": "^8.5.1", - "vue": "^3.5.13", - "autoprefixer": "^10.4.20", - "tailwindcss": "^3.4.17" + "redaxios": "^0.5.1", + "tailwindcss": "^4.1.15", + "vue": "^3.5.16", + "zod": "^3.24.2" }, "devDependencies": { - "typescript": "^5.7.2", - "vite": "^6.1.0", + "@eslint/js": "^9.36.0", + "@typescript-eslint/eslint-plugin": "^8.44.1", + "@typescript-eslint/parser": "^8.44.1", "@vitejs/plugin-vue": "^5.2.3", - "@vitejs/plugin-vue-jsx": "^4.1.2" + "@vitejs/plugin-vue-jsx": "^4.1.2", + "eslint-plugin-vue": "^9.33.0", + "typescript": "~5.8.3", + "vite": "^7.1.7", + "vue-eslint-parser": "^9.4.3", + "vue-tsc": "^3.1.5" } } diff --git a/examples/vue/basic-file-based-jsx/postcss.config.mjs b/examples/vue/basic-file-based-jsx/postcss.config.mjs index 2e7af2b7f1a..a7f73a2d1d7 100644 --- a/examples/vue/basic-file-based-jsx/postcss.config.mjs +++ b/examples/vue/basic-file-based-jsx/postcss.config.mjs @@ -1,6 +1,5 @@ export default { plugins: { - tailwindcss: {}, - autoprefixer: {}, + '@tailwindcss/postcss': {}, }, } diff --git a/examples/vue/basic-file-based-jsx/src/components/EditingAComponent.tsx b/examples/vue/basic-file-based-jsx/src/components/EditingAComponent.tsx new file mode 100644 index 00000000000..b45a170a7ab --- /dev/null +++ b/examples/vue/basic-file-based-jsx/src/components/EditingAComponent.tsx @@ -0,0 +1,39 @@ +import { ref, defineComponent } from 'vue' +import { useBlocker, useNavigate } from '@tanstack/vue-router' + +export const EditingAComponent = defineComponent({ + setup() { + const navigate = useNavigate() + const input = ref('') + + const blocker = useBlocker({ + shouldBlockFn: ({ next }) => { + if (next.fullPath === '/editing-b' && input.value.length > 0) { + return true + } + return false + }, + withResolver: true, + }) + + return () => ( +
+

Editing A

+ + + {blocker.value.status === 'blocked' && ( + + )} +
+ ) + }, +}) diff --git a/examples/vue/basic-file-based-jsx/src/components/EditingBComponent.tsx b/examples/vue/basic-file-based-jsx/src/components/EditingBComponent.tsx new file mode 100644 index 00000000000..ffc19563271 --- /dev/null +++ b/examples/vue/basic-file-based-jsx/src/components/EditingBComponent.tsx @@ -0,0 +1,32 @@ +import { ref, toValue, defineComponent } from 'vue' +import { useBlocker, useNavigate } from '@tanstack/vue-router' + +export const EditingBComponent = defineComponent({ + setup() { + const navigate = useNavigate() + const input = ref('') + + const blocker = useBlocker({ + shouldBlockFn: () => !!toValue(input), + withResolver: true, + }) + + return () => ( +
+

Editing B

+ + + {blocker.value.status === 'blocked' && ( + + )} +
+ ) + }, +}) diff --git a/examples/vue/basic-file-based-jsx/src/components/NotFoundComponent.vue b/examples/vue/basic-file-based-jsx/src/components/NotFoundComponent.vue new file mode 100644 index 00000000000..09ed5cf5ffd --- /dev/null +++ b/examples/vue/basic-file-based-jsx/src/components/NotFoundComponent.vue @@ -0,0 +1,10 @@ + + + diff --git a/examples/vue/basic-file-based-jsx/src/components/NotRemountDepsComponent.tsx b/examples/vue/basic-file-based-jsx/src/components/NotRemountDepsComponent.tsx new file mode 100644 index 00000000000..7f3e732bbfc --- /dev/null +++ b/examples/vue/basic-file-based-jsx/src/components/NotRemountDepsComponent.tsx @@ -0,0 +1,33 @@ +import { ref, onMounted, defineComponent } from 'vue' +import { useSearch, useNavigate } from '@tanstack/vue-router' + +export const NotRemountDepsComponent = defineComponent({ + setup() { + // Component-scoped ref - will be recreated on component remount + const mounts = ref(0) + const search = useSearch({ from: '/notRemountDeps' }) + const navigate = useNavigate() + + onMounted(() => { + mounts.value++ + }) + + return () => ( +
+ + +
Search: {search.value.searchParam}
+
Page component mounts: {mounts.value}
+
+ ) + }, +}) diff --git a/examples/vue/basic-file-based-jsx/src/components/PostErrorComponent.tsx b/examples/vue/basic-file-based-jsx/src/components/PostErrorComponent.tsx deleted file mode 100644 index d5173cf419e..00000000000 --- a/examples/vue/basic-file-based-jsx/src/components/PostErrorComponent.tsx +++ /dev/null @@ -1,6 +0,0 @@ -import { ErrorComponent } from '@tanstack/vue-router' -import type { ErrorComponentProps } from '@tanstack/vue-router' - -export function PostErrorComponent({ error }: ErrorComponentProps) { - return -} diff --git a/examples/vue/basic-file-based-jsx/src/components/PostErrorComponent.vue b/examples/vue/basic-file-based-jsx/src/components/PostErrorComponent.vue new file mode 100644 index 00000000000..9bb7514ccc5 --- /dev/null +++ b/examples/vue/basic-file-based-jsx/src/components/PostErrorComponent.vue @@ -0,0 +1,10 @@ + + + diff --git a/examples/vue/basic-file-based-jsx/src/components/RemountDepsComponent.tsx b/examples/vue/basic-file-based-jsx/src/components/RemountDepsComponent.tsx new file mode 100644 index 00000000000..e6e05488fd0 --- /dev/null +++ b/examples/vue/basic-file-based-jsx/src/components/RemountDepsComponent.tsx @@ -0,0 +1,34 @@ +import { ref, onMounted, defineComponent } from 'vue' +import { useSearch, useNavigate } from '@tanstack/vue-router' + +// Module-scoped ref to persist across component remounts +const mounts = ref(0) + +export const RemountDepsComponent = defineComponent({ + setup() { + const search = useSearch({ from: '/remountDeps' }) + const navigate = useNavigate() + + onMounted(() => { + mounts.value++ + }) + + return () => ( +
+ + +
Search: {search.value.searchParam}
+
Page component mounts: {mounts.value}
+
+ ) + }, +}) diff --git a/examples/vue/basic-file-based-jsx/src/components/VueLogo.vue b/examples/vue/basic-file-based-jsx/src/components/VueLogo.vue new file mode 100644 index 00000000000..5e2286dbc2e --- /dev/null +++ b/examples/vue/basic-file-based-jsx/src/components/VueLogo.vue @@ -0,0 +1,100 @@ + + + + + diff --git a/examples/vue/basic-file-based-jsx/src/posts.tsx b/examples/vue/basic-file-based-jsx/src/posts.tsx index 40af43dda04..1b4c92b41d7 100644 --- a/examples/vue/basic-file-based-jsx/src/posts.tsx +++ b/examples/vue/basic-file-based-jsx/src/posts.tsx @@ -7,11 +7,17 @@ export type PostType = { body: string } +let queryURL = 'https://jsonplaceholder.typicode.com' + +if (import.meta.env.VITE_NODE_ENV === 'test') { + queryURL = `http://localhost:${import.meta.env.VITE_EXTERNAL_PORT}` +} + export const fetchPost = async (postId: string) => { console.info(`Fetching post with id ${postId}...`) await new Promise((r) => setTimeout(r, 500)) const post = await axios - .get(`https://jsonplaceholder.typicode.com/posts/${postId}`) + .get(`${queryURL}/posts/${postId}`) .then((r) => r.data) .catch((err) => { if (err.status === 404) { @@ -27,6 +33,6 @@ export const fetchPosts = async () => { console.info('Fetching posts...') await new Promise((r) => setTimeout(r, 500)) return axios - .get>('https://jsonplaceholder.typicode.com/posts') + .get>(`${queryURL}/posts`) .then((r) => r.data.slice(0, 10)) } diff --git a/examples/vue/basic-file-based-jsx/src/routeTree.gen.ts b/examples/vue/basic-file-based-jsx/src/routeTree.gen.ts index 73d4a70e51c..01bb4b0d053 100644 --- a/examples/vue/basic-file-based-jsx/src/routeTree.gen.ts +++ b/examples/vue/basic-file-based-jsx/src/routeTree.gen.ts @@ -8,164 +8,463 @@ // You should NOT make any changes in this file as it will be overwritten. // Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified. -// Import Routes - -import { Route as rootRoute } from './routes/__root' -import { Route as PostsImport } from './routes/posts' -import { Route as PathlessLayoutImport } from './routes/_pathlessLayout' -import { Route as IndexImport } from './routes/index' -import { Route as PostsIndexImport } from './routes/posts.index' -import { Route as PostsPostIdImport } from './routes/posts.$postId' -import { Route as PathlessLayoutNestedLayoutImport } from './routes/_pathlessLayout/_nested-layout' -import { Route as PathlessLayoutNestedLayoutRouteBImport } from './routes/_pathlessLayout/_nested-layout/route-b' -import { Route as PathlessLayoutNestedLayoutRouteAImport } from './routes/_pathlessLayout/_nested-layout/route-a' - -// Create/Update Routes - -const PostsRoute = PostsImport.update({ +import { lazyRouteComponent } from '@tanstack/vue-router' + +import { Route as rootRouteImport } from './routes/__root' +import { Route as Char45824Char54620Char48124Char44397RouteImport } from './routes/대한민국' +import { Route as SfcComponentRouteImport } from './routes/sfcComponent' +import { Route as RemountDepsRouteImport } from './routes/remountDeps' +import { Route as PostsRouteImport } from './routes/posts' +import { Route as NotRemountDepsRouteImport } from './routes/notRemountDeps' +import { Route as EditingBRouteImport } from './routes/editing-b' +import { Route as EditingARouteImport } from './routes/editing-a' +import { Route as LayoutRouteImport } from './routes/_layout' +import { Route as IndexRouteImport } from './routes/index' +import { Route as PostsIndexRouteImport } from './routes/posts.index' +import { Route as PostsPostIdRouteImport } from './routes/posts.$postId' +import { Route as LayoutLayout2RouteImport } from './routes/_layout/_layout-2' +import { Route as groupLazyinsideRouteImport } from './routes/(group)/lazyinside' +import { Route as groupInsideRouteImport } from './routes/(group)/inside' +import { Route as groupLayoutRouteImport } from './routes/(group)/_layout' +import { Route as anotherGroupOnlyrouteinsideRouteImport } from './routes/(another-group)/onlyrouteinside' +import { Route as PostsPostIdEditRouteImport } from './routes/posts_.$postId.edit' +import { Route as LayoutLayout2LayoutBRouteImport } from './routes/_layout/_layout-2/layout-b' +import { Route as LayoutLayout2LayoutARouteImport } from './routes/_layout/_layout-2/layout-a' +import { Route as groupSubfolderInsideRouteImport } from './routes/(group)/subfolder/inside' +import { Route as groupLayoutInsidelayoutRouteImport } from './routes/(group)/_layout.insidelayout' + +const Char45824Char54620Char48124Char44397Route = + Char45824Char54620Char48124Char44397RouteImport.update({ + id: '/대한민국', + path: '/대한민국', + getParentRoute: () => rootRouteImport, + } as any) +const SfcComponentRoute = SfcComponentRouteImport.update({ + id: '/sfcComponent', + path: '/sfcComponent', + getParentRoute: () => rootRouteImport, +} as any).update({ + component: lazyRouteComponent( + () => import('./routes/sfcComponent.component.vue'), + 'default', + ), +}) +const RemountDepsRoute = RemountDepsRouteImport.update({ + id: '/remountDeps', + path: '/remountDeps', + getParentRoute: () => rootRouteImport, +} as any) +const PostsRoute = PostsRouteImport.update({ id: '/posts', path: '/posts', - getParentRoute: () => rootRoute, + getParentRoute: () => rootRouteImport, } as any) - -const PathlessLayoutRoute = PathlessLayoutImport.update({ - id: '/_pathlessLayout', - getParentRoute: () => rootRoute, +const NotRemountDepsRoute = NotRemountDepsRouteImport.update({ + id: '/notRemountDeps', + path: '/notRemountDeps', + getParentRoute: () => rootRouteImport, } as any) - -const IndexRoute = IndexImport.update({ +const EditingBRoute = EditingBRouteImport.update({ + id: '/editing-b', + path: '/editing-b', + getParentRoute: () => rootRouteImport, +} as any) +const EditingARoute = EditingARouteImport.update({ + id: '/editing-a', + path: '/editing-a', + getParentRoute: () => rootRouteImport, +} as any) +const LayoutRoute = LayoutRouteImport.update({ + id: '/_layout', + getParentRoute: () => rootRouteImport, +} as any) +const IndexRoute = IndexRouteImport.update({ id: '/', path: '/', - getParentRoute: () => rootRoute, + getParentRoute: () => rootRouteImport, } as any) - -const PostsIndexRoute = PostsIndexImport.update({ +const PostsIndexRoute = PostsIndexRouteImport.update({ id: '/', path: '/', getParentRoute: () => PostsRoute, } as any) - -const PostsPostIdRoute = PostsPostIdImport.update({ +const PostsPostIdRoute = PostsPostIdRouteImport.update({ id: '/$postId', path: '/$postId', getParentRoute: () => PostsRoute, } as any) - -const PathlessLayoutNestedLayoutRoute = PathlessLayoutNestedLayoutImport.update( - { - id: '/_nested-layout', - getParentRoute: () => PathlessLayoutRoute, - } as any, -) - -const PathlessLayoutNestedLayoutRouteBRoute = - PathlessLayoutNestedLayoutRouteBImport.update({ - id: '/route-b', - path: '/route-b', - getParentRoute: () => PathlessLayoutNestedLayoutRoute, - } as any) - -const PathlessLayoutNestedLayoutRouteARoute = - PathlessLayoutNestedLayoutRouteAImport.update({ - id: '/route-a', - path: '/route-a', - getParentRoute: () => PathlessLayoutNestedLayoutRoute, +const LayoutLayout2Route = LayoutLayout2RouteImport.update({ + id: '/_layout-2', + getParentRoute: () => LayoutRoute, +} as any) +const groupLazyinsideRoute = groupLazyinsideRouteImport.update({ + id: '/(group)/lazyinside', + path: '/lazyinside', + getParentRoute: () => rootRouteImport, +} as any) +const groupInsideRoute = groupInsideRouteImport.update({ + id: '/(group)/inside', + path: '/inside', + getParentRoute: () => rootRouteImport, +} as any) +const groupLayoutRoute = groupLayoutRouteImport.update({ + id: '/(group)/_layout', + getParentRoute: () => rootRouteImport, +} as any) +const anotherGroupOnlyrouteinsideRoute = + anotherGroupOnlyrouteinsideRouteImport.update({ + id: '/(another-group)/onlyrouteinside', + path: '/onlyrouteinside', + getParentRoute: () => rootRouteImport, } as any) +const PostsPostIdEditRoute = PostsPostIdEditRouteImport.update({ + id: '/posts_/$postId/edit', + path: '/posts/$postId/edit', + getParentRoute: () => rootRouteImport, +} as any) +const LayoutLayout2LayoutBRoute = LayoutLayout2LayoutBRouteImport.update({ + id: '/layout-b', + path: '/layout-b', + getParentRoute: () => LayoutLayout2Route, +} as any) +const LayoutLayout2LayoutARoute = LayoutLayout2LayoutARouteImport.update({ + id: '/layout-a', + path: '/layout-a', + getParentRoute: () => LayoutLayout2Route, +} as any) +const groupSubfolderInsideRoute = groupSubfolderInsideRouteImport.update({ + id: '/(group)/subfolder/inside', + path: '/subfolder/inside', + getParentRoute: () => rootRouteImport, +} as any) +const groupLayoutInsidelayoutRoute = groupLayoutInsidelayoutRouteImport.update({ + id: '/insidelayout', + path: '/insidelayout', + getParentRoute: () => groupLayoutRoute, +} as any) -// Populate the FileRoutesByPath interface +export interface FileRoutesByFullPath { + '/': typeof IndexRoute + '/editing-a': typeof EditingARoute + '/editing-b': typeof EditingBRoute + '/notRemountDeps': typeof NotRemountDepsRoute + '/posts': typeof PostsRouteWithChildren + '/remountDeps': typeof RemountDepsRoute + '/sfcComponent': typeof SfcComponentRoute + '/대한민국': typeof Char45824Char54620Char48124Char44397Route + '/onlyrouteinside': typeof anotherGroupOnlyrouteinsideRoute + '/inside': typeof groupInsideRoute + '/lazyinside': typeof groupLazyinsideRoute + '/posts/$postId': typeof PostsPostIdRoute + '/posts/': typeof PostsIndexRoute + '/insidelayout': typeof groupLayoutInsidelayoutRoute + '/subfolder/inside': typeof groupSubfolderInsideRoute + '/layout-a': typeof LayoutLayout2LayoutARoute + '/layout-b': typeof LayoutLayout2LayoutBRoute + '/posts/$postId/edit': typeof PostsPostIdEditRoute +} +export interface FileRoutesByTo { + '/': typeof IndexRoute + '/editing-a': typeof EditingARoute + '/editing-b': typeof EditingBRoute + '/notRemountDeps': typeof NotRemountDepsRoute + '/remountDeps': typeof RemountDepsRoute + '/sfcComponent': typeof SfcComponentRoute + '/대한민국': typeof Char45824Char54620Char48124Char44397Route + '/onlyrouteinside': typeof anotherGroupOnlyrouteinsideRoute + '/inside': typeof groupInsideRoute + '/lazyinside': typeof groupLazyinsideRoute + '/posts/$postId': typeof PostsPostIdRoute + '/posts': typeof PostsIndexRoute + '/insidelayout': typeof groupLayoutInsidelayoutRoute + '/subfolder/inside': typeof groupSubfolderInsideRoute + '/layout-a': typeof LayoutLayout2LayoutARoute + '/layout-b': typeof LayoutLayout2LayoutBRoute + '/posts/$postId/edit': typeof PostsPostIdEditRoute +} +export interface FileRoutesById { + __root__: typeof rootRouteImport + '/': typeof IndexRoute + '/_layout': typeof LayoutRouteWithChildren + '/editing-a': typeof EditingARoute + '/editing-b': typeof EditingBRoute + '/notRemountDeps': typeof NotRemountDepsRoute + '/posts': typeof PostsRouteWithChildren + '/remountDeps': typeof RemountDepsRoute + '/sfcComponent': typeof SfcComponentRoute + '/대한민국': typeof Char45824Char54620Char48124Char44397Route + '/(another-group)/onlyrouteinside': typeof anotherGroupOnlyrouteinsideRoute + '/(group)/_layout': typeof groupLayoutRouteWithChildren + '/(group)/inside': typeof groupInsideRoute + '/(group)/lazyinside': typeof groupLazyinsideRoute + '/_layout/_layout-2': typeof LayoutLayout2RouteWithChildren + '/posts/$postId': typeof PostsPostIdRoute + '/posts/': typeof PostsIndexRoute + '/(group)/_layout/insidelayout': typeof groupLayoutInsidelayoutRoute + '/(group)/subfolder/inside': typeof groupSubfolderInsideRoute + '/_layout/_layout-2/layout-a': typeof LayoutLayout2LayoutARoute + '/_layout/_layout-2/layout-b': typeof LayoutLayout2LayoutBRoute + '/posts_/$postId/edit': typeof PostsPostIdEditRoute +} +export interface FileRouteTypes { + fileRoutesByFullPath: FileRoutesByFullPath + fullPaths: + | '/' + | '/editing-a' + | '/editing-b' + | '/notRemountDeps' + | '/posts' + | '/remountDeps' + | '/sfcComponent' + | '/대한민국' + | '/onlyrouteinside' + | '/inside' + | '/lazyinside' + | '/posts/$postId' + | '/posts/' + | '/insidelayout' + | '/subfolder/inside' + | '/layout-a' + | '/layout-b' + | '/posts/$postId/edit' + fileRoutesByTo: FileRoutesByTo + to: + | '/' + | '/editing-a' + | '/editing-b' + | '/notRemountDeps' + | '/remountDeps' + | '/sfcComponent' + | '/대한민국' + | '/onlyrouteinside' + | '/inside' + | '/lazyinside' + | '/posts/$postId' + | '/posts' + | '/insidelayout' + | '/subfolder/inside' + | '/layout-a' + | '/layout-b' + | '/posts/$postId/edit' + id: + | '__root__' + | '/' + | '/_layout' + | '/editing-a' + | '/editing-b' + | '/notRemountDeps' + | '/posts' + | '/remountDeps' + | '/sfcComponent' + | '/대한민국' + | '/(another-group)/onlyrouteinside' + | '/(group)/_layout' + | '/(group)/inside' + | '/(group)/lazyinside' + | '/_layout/_layout-2' + | '/posts/$postId' + | '/posts/' + | '/(group)/_layout/insidelayout' + | '/(group)/subfolder/inside' + | '/_layout/_layout-2/layout-a' + | '/_layout/_layout-2/layout-b' + | '/posts_/$postId/edit' + fileRoutesById: FileRoutesById +} +export interface RootRouteChildren { + IndexRoute: typeof IndexRoute + LayoutRoute: typeof LayoutRouteWithChildren + EditingARoute: typeof EditingARoute + EditingBRoute: typeof EditingBRoute + NotRemountDepsRoute: typeof NotRemountDepsRoute + PostsRoute: typeof PostsRouteWithChildren + RemountDepsRoute: typeof RemountDepsRoute + SfcComponentRoute: typeof SfcComponentRoute + Char45824Char54620Char48124Char44397Route: typeof Char45824Char54620Char48124Char44397Route + anotherGroupOnlyrouteinsideRoute: typeof anotherGroupOnlyrouteinsideRoute + groupLayoutRoute: typeof groupLayoutRouteWithChildren + groupInsideRoute: typeof groupInsideRoute + groupLazyinsideRoute: typeof groupLazyinsideRoute + groupSubfolderInsideRoute: typeof groupSubfolderInsideRoute + PostsPostIdEditRoute: typeof PostsPostIdEditRoute +} declare module '@tanstack/vue-router' { interface FileRoutesByPath { - '/': { - id: '/' - path: '/' - fullPath: '/' - preLoaderRoute: typeof IndexImport - parentRoute: typeof rootRoute + '/대한민국': { + id: '/대한민국' + path: '/대한민국' + fullPath: '/대한민국' + preLoaderRoute: typeof Char45824Char54620Char48124Char44397RouteImport + parentRoute: typeof rootRouteImport } - '/_pathlessLayout': { - id: '/_pathlessLayout' - path: '' - fullPath: '' - preLoaderRoute: typeof PathlessLayoutImport - parentRoute: typeof rootRoute + '/sfcComponent': { + id: '/sfcComponent' + path: '/sfcComponent' + fullPath: '/sfcComponent' + preLoaderRoute: typeof SfcComponentRouteImport + parentRoute: typeof rootRouteImport + } + '/remountDeps': { + id: '/remountDeps' + path: '/remountDeps' + fullPath: '/remountDeps' + preLoaderRoute: typeof RemountDepsRouteImport + parentRoute: typeof rootRouteImport } '/posts': { id: '/posts' path: '/posts' fullPath: '/posts' - preLoaderRoute: typeof PostsImport - parentRoute: typeof rootRoute + preLoaderRoute: typeof PostsRouteImport + parentRoute: typeof rootRouteImport + } + '/notRemountDeps': { + id: '/notRemountDeps' + path: '/notRemountDeps' + fullPath: '/notRemountDeps' + preLoaderRoute: typeof NotRemountDepsRouteImport + parentRoute: typeof rootRouteImport + } + '/editing-b': { + id: '/editing-b' + path: '/editing-b' + fullPath: '/editing-b' + preLoaderRoute: typeof EditingBRouteImport + parentRoute: typeof rootRouteImport } - '/_pathlessLayout/_nested-layout': { - id: '/_pathlessLayout/_nested-layout' + '/editing-a': { + id: '/editing-a' + path: '/editing-a' + fullPath: '/editing-a' + preLoaderRoute: typeof EditingARouteImport + parentRoute: typeof rootRouteImport + } + '/_layout': { + id: '/_layout' path: '' fullPath: '' - preLoaderRoute: typeof PathlessLayoutNestedLayoutImport - parentRoute: typeof PathlessLayoutImport + preLoaderRoute: typeof LayoutRouteImport + parentRoute: typeof rootRouteImport } - '/posts/$postId': { - id: '/posts/$postId' - path: '/$postId' - fullPath: '/posts/$postId' - preLoaderRoute: typeof PostsPostIdImport - parentRoute: typeof PostsImport + '/': { + id: '/' + path: '/' + fullPath: '/' + preLoaderRoute: typeof IndexRouteImport + parentRoute: typeof rootRouteImport } '/posts/': { id: '/posts/' path: '/' fullPath: '/posts/' - preLoaderRoute: typeof PostsIndexImport - parentRoute: typeof PostsImport + preLoaderRoute: typeof PostsIndexRouteImport + parentRoute: typeof PostsRoute } - '/_pathlessLayout/_nested-layout/route-a': { - id: '/_pathlessLayout/_nested-layout/route-a' - path: '/route-a' - fullPath: '/route-a' - preLoaderRoute: typeof PathlessLayoutNestedLayoutRouteAImport - parentRoute: typeof PathlessLayoutNestedLayoutImport + '/posts/$postId': { + id: '/posts/$postId' + path: '/$postId' + fullPath: '/posts/$postId' + preLoaderRoute: typeof PostsPostIdRouteImport + parentRoute: typeof PostsRoute } - '/_pathlessLayout/_nested-layout/route-b': { - id: '/_pathlessLayout/_nested-layout/route-b' - path: '/route-b' - fullPath: '/route-b' - preLoaderRoute: typeof PathlessLayoutNestedLayoutRouteBImport - parentRoute: typeof PathlessLayoutNestedLayoutImport + '/_layout/_layout-2': { + id: '/_layout/_layout-2' + path: '' + fullPath: '' + preLoaderRoute: typeof LayoutLayout2RouteImport + parentRoute: typeof LayoutRoute + } + '/(group)/lazyinside': { + id: '/(group)/lazyinside' + path: '/lazyinside' + fullPath: '/lazyinside' + preLoaderRoute: typeof groupLazyinsideRouteImport + parentRoute: typeof rootRouteImport + } + '/(group)/inside': { + id: '/(group)/inside' + path: '/inside' + fullPath: '/inside' + preLoaderRoute: typeof groupInsideRouteImport + parentRoute: typeof rootRouteImport + } + '/(group)/_layout': { + id: '/(group)/_layout' + path: '' + fullPath: '' + preLoaderRoute: typeof groupLayoutRouteImport + parentRoute: typeof rootRouteImport + } + '/(another-group)/onlyrouteinside': { + id: '/(another-group)/onlyrouteinside' + path: '/onlyrouteinside' + fullPath: '/onlyrouteinside' + preLoaderRoute: typeof anotherGroupOnlyrouteinsideRouteImport + parentRoute: typeof rootRouteImport + } + '/posts_/$postId/edit': { + id: '/posts_/$postId/edit' + path: '/posts/$postId/edit' + fullPath: '/posts/$postId/edit' + preLoaderRoute: typeof PostsPostIdEditRouteImport + parentRoute: typeof rootRouteImport + } + '/_layout/_layout-2/layout-b': { + id: '/_layout/_layout-2/layout-b' + path: '/layout-b' + fullPath: '/layout-b' + preLoaderRoute: typeof LayoutLayout2LayoutBRouteImport + parentRoute: typeof LayoutLayout2Route + } + '/_layout/_layout-2/layout-a': { + id: '/_layout/_layout-2/layout-a' + path: '/layout-a' + fullPath: '/layout-a' + preLoaderRoute: typeof LayoutLayout2LayoutARouteImport + parentRoute: typeof LayoutLayout2Route + } + '/(group)/subfolder/inside': { + id: '/(group)/subfolder/inside' + path: '/subfolder/inside' + fullPath: '/subfolder/inside' + preLoaderRoute: typeof groupSubfolderInsideRouteImport + parentRoute: typeof rootRouteImport + } + '/(group)/_layout/insidelayout': { + id: '/(group)/_layout/insidelayout' + path: '/insidelayout' + fullPath: '/insidelayout' + preLoaderRoute: typeof groupLayoutInsidelayoutRouteImport + parentRoute: typeof groupLayoutRoute } } } -// Create and export the route tree - -interface PathlessLayoutNestedLayoutRouteChildren { - PathlessLayoutNestedLayoutRouteARoute: typeof PathlessLayoutNestedLayoutRouteARoute - PathlessLayoutNestedLayoutRouteBRoute: typeof PathlessLayoutNestedLayoutRouteBRoute +interface LayoutLayout2RouteChildren { + LayoutLayout2LayoutARoute: typeof LayoutLayout2LayoutARoute + LayoutLayout2LayoutBRoute: typeof LayoutLayout2LayoutBRoute } -const PathlessLayoutNestedLayoutRouteChildren: PathlessLayoutNestedLayoutRouteChildren = - { - PathlessLayoutNestedLayoutRouteARoute: - PathlessLayoutNestedLayoutRouteARoute, - PathlessLayoutNestedLayoutRouteBRoute: - PathlessLayoutNestedLayoutRouteBRoute, - } +const LayoutLayout2RouteChildren: LayoutLayout2RouteChildren = { + LayoutLayout2LayoutARoute: LayoutLayout2LayoutARoute, + LayoutLayout2LayoutBRoute: LayoutLayout2LayoutBRoute, +} -const PathlessLayoutNestedLayoutRouteWithChildren = - PathlessLayoutNestedLayoutRoute._addFileChildren( - PathlessLayoutNestedLayoutRouteChildren, - ) +const LayoutLayout2RouteWithChildren = LayoutLayout2Route._addFileChildren( + LayoutLayout2RouteChildren, +) -interface PathlessLayoutRouteChildren { - PathlessLayoutNestedLayoutRoute: typeof PathlessLayoutNestedLayoutRouteWithChildren +interface LayoutRouteChildren { + LayoutLayout2Route: typeof LayoutLayout2RouteWithChildren } -const PathlessLayoutRouteChildren: PathlessLayoutRouteChildren = { - PathlessLayoutNestedLayoutRoute: PathlessLayoutNestedLayoutRouteWithChildren, +const LayoutRouteChildren: LayoutRouteChildren = { + LayoutLayout2Route: LayoutLayout2RouteWithChildren, } -const PathlessLayoutRouteWithChildren = PathlessLayoutRoute._addFileChildren( - PathlessLayoutRouteChildren, -) +const LayoutRouteWithChildren = + LayoutRoute._addFileChildren(LayoutRouteChildren) interface PostsRouteChildren { PostsPostIdRoute: typeof PostsPostIdRoute @@ -179,129 +478,36 @@ const PostsRouteChildren: PostsRouteChildren = { const PostsRouteWithChildren = PostsRoute._addFileChildren(PostsRouteChildren) -export interface FileRoutesByFullPath { - '/': typeof IndexRoute - '': typeof PathlessLayoutNestedLayoutRouteWithChildren - '/posts': typeof PostsRouteWithChildren - '/posts/$postId': typeof PostsPostIdRoute - '/posts/': typeof PostsIndexRoute - '/route-a': typeof PathlessLayoutNestedLayoutRouteARoute - '/route-b': typeof PathlessLayoutNestedLayoutRouteBRoute -} - -export interface FileRoutesByTo { - '/': typeof IndexRoute - '': typeof PathlessLayoutNestedLayoutRouteWithChildren - '/posts/$postId': typeof PostsPostIdRoute - '/posts': typeof PostsIndexRoute - '/route-a': typeof PathlessLayoutNestedLayoutRouteARoute - '/route-b': typeof PathlessLayoutNestedLayoutRouteBRoute +interface groupLayoutRouteChildren { + groupLayoutInsidelayoutRoute: typeof groupLayoutInsidelayoutRoute } -export interface FileRoutesById { - __root__: typeof rootRoute - '/': typeof IndexRoute - '/_pathlessLayout': typeof PathlessLayoutRouteWithChildren - '/posts': typeof PostsRouteWithChildren - '/_pathlessLayout/_nested-layout': typeof PathlessLayoutNestedLayoutRouteWithChildren - '/posts/$postId': typeof PostsPostIdRoute - '/posts/': typeof PostsIndexRoute - '/_pathlessLayout/_nested-layout/route-a': typeof PathlessLayoutNestedLayoutRouteARoute - '/_pathlessLayout/_nested-layout/route-b': typeof PathlessLayoutNestedLayoutRouteBRoute +const groupLayoutRouteChildren: groupLayoutRouteChildren = { + groupLayoutInsidelayoutRoute: groupLayoutInsidelayoutRoute, } -export interface FileRouteTypes { - fileRoutesByFullPath: FileRoutesByFullPath - fullPaths: - | '/' - | '' - | '/posts' - | '/posts/$postId' - | '/posts/' - | '/route-a' - | '/route-b' - fileRoutesByTo: FileRoutesByTo - to: '/' | '' | '/posts/$postId' | '/posts' | '/route-a' | '/route-b' - id: - | '__root__' - | '/' - | '/_pathlessLayout' - | '/posts' - | '/_pathlessLayout/_nested-layout' - | '/posts/$postId' - | '/posts/' - | '/_pathlessLayout/_nested-layout/route-a' - | '/_pathlessLayout/_nested-layout/route-b' - fileRoutesById: FileRoutesById -} - -export interface RootRouteChildren { - IndexRoute: typeof IndexRoute - PathlessLayoutRoute: typeof PathlessLayoutRouteWithChildren - PostsRoute: typeof PostsRouteWithChildren -} +const groupLayoutRouteWithChildren = groupLayoutRoute._addFileChildren( + groupLayoutRouteChildren, +) const rootRouteChildren: RootRouteChildren = { IndexRoute: IndexRoute, - PathlessLayoutRoute: PathlessLayoutRouteWithChildren, + LayoutRoute: LayoutRouteWithChildren, + EditingARoute: EditingARoute, + EditingBRoute: EditingBRoute, + NotRemountDepsRoute: NotRemountDepsRoute, PostsRoute: PostsRouteWithChildren, + RemountDepsRoute: RemountDepsRoute, + SfcComponentRoute: SfcComponentRoute, + Char45824Char54620Char48124Char44397Route: + Char45824Char54620Char48124Char44397Route, + anotherGroupOnlyrouteinsideRoute: anotherGroupOnlyrouteinsideRoute, + groupLayoutRoute: groupLayoutRouteWithChildren, + groupInsideRoute: groupInsideRoute, + groupLazyinsideRoute: groupLazyinsideRoute, + groupSubfolderInsideRoute: groupSubfolderInsideRoute, + PostsPostIdEditRoute: PostsPostIdEditRoute, } - -export const routeTree = rootRoute +export const routeTree = rootRouteImport ._addFileChildren(rootRouteChildren) ._addFileTypes() - -/* ROUTE_MANIFEST_START -{ - "routes": { - "__root__": { - "filePath": "__root.tsx", - "children": [ - "/", - "/_pathlessLayout", - "/posts" - ] - }, - "/": { - "filePath": "index.tsx" - }, - "/_pathlessLayout": { - "filePath": "_pathlessLayout.tsx", - "children": [ - "/_pathlessLayout/_nested-layout" - ] - }, - "/posts": { - "filePath": "posts.tsx", - "children": [ - "/posts/$postId", - "/posts/" - ] - }, - "/_pathlessLayout/_nested-layout": { - "filePath": "_pathlessLayout/_nested-layout.tsx", - "parent": "/_pathlessLayout", - "children": [ - "/_pathlessLayout/_nested-layout/route-a", - "/_pathlessLayout/_nested-layout/route-b" - ] - }, - "/posts/$postId": { - "filePath": "posts.$postId.tsx", - "parent": "/posts" - }, - "/posts/": { - "filePath": "posts.index.tsx", - "parent": "/posts" - }, - "/_pathlessLayout/_nested-layout/route-a": { - "filePath": "_pathlessLayout/_nested-layout/route-a.tsx", - "parent": "/_pathlessLayout/_nested-layout" - }, - "/_pathlessLayout/_nested-layout/route-b": { - "filePath": "_pathlessLayout/_nested-layout/route-b.tsx", - "parent": "/_pathlessLayout/_nested-layout" - } - } -} -ROUTE_MANIFEST_END */ diff --git a/examples/vue/basic-file-based-jsx/src/routes/(another-group)/onlyrouteinside.tsx b/examples/vue/basic-file-based-jsx/src/routes/(another-group)/onlyrouteinside.tsx new file mode 100644 index 00000000000..3a2e57fede8 --- /dev/null +++ b/examples/vue/basic-file-based-jsx/src/routes/(another-group)/onlyrouteinside.tsx @@ -0,0 +1,24 @@ +import { createFileRoute, getRouteApi, useSearch } from '@tanstack/vue-router' +import { z } from 'zod' +import { zodValidator } from '@tanstack/zod-adapter' + +export const Route = createFileRoute('/(another-group)/onlyrouteinside')({ + validateSearch: zodValidator(z.object({ hello: z.string().optional() })), + component: OnlyRouteInsideComponent, +}) + +const routeApi = getRouteApi('/(another-group)/onlyrouteinside') + +function OnlyRouteInsideComponent() { + const searchViaHook = useSearch({ from: '/(another-group)/onlyrouteinside' }) + const searchViaRouteHook = routeApi.useSearch() + const searchViaRouteApi = routeApi.useSearch() + + return ( +
+
{searchViaHook.value.hello}
+
{searchViaRouteHook.value.hello}
+
{searchViaRouteApi.value.hello}
+
+ ) +} diff --git a/examples/vue/basic-file-based-jsx/src/routes/(group)/_layout.insidelayout.tsx b/examples/vue/basic-file-based-jsx/src/routes/(group)/_layout.insidelayout.tsx new file mode 100644 index 00000000000..861f971a063 --- /dev/null +++ b/examples/vue/basic-file-based-jsx/src/routes/(group)/_layout.insidelayout.tsx @@ -0,0 +1,24 @@ +import { createFileRoute, getRouteApi, useSearch } from '@tanstack/vue-router' +import { z } from 'zod' +import { zodValidator } from '@tanstack/zod-adapter' + +export const Route = createFileRoute('/(group)/_layout/insidelayout')({ + validateSearch: zodValidator(z.object({ hello: z.string().optional() })), + component: InsideLayoutComponent, +}) + +const routeApi = getRouteApi('/(group)/_layout/insidelayout') + +function InsideLayoutComponent() { + const searchViaHook = useSearch({ from: '/(group)/_layout/insidelayout' }) + const searchViaRouteHook = routeApi.useSearch() + const searchViaRouteApi = routeApi.useSearch() + + return ( +
+
{searchViaHook.value.hello}
+
{searchViaRouteHook.value.hello}
+
{searchViaRouteApi.value.hello}
+
+ ) +} diff --git a/examples/vue/basic-file-based-jsx/src/routes/(group)/_layout.tsx b/examples/vue/basic-file-based-jsx/src/routes/(group)/_layout.tsx new file mode 100644 index 00000000000..f752d719eff --- /dev/null +++ b/examples/vue/basic-file-based-jsx/src/routes/(group)/_layout.tsx @@ -0,0 +1,14 @@ +import { Outlet, createFileRoute } from '@tanstack/vue-router' + +export const Route = createFileRoute('/(group)/_layout')({ + component: GroupLayoutComponent, +}) + +function GroupLayoutComponent() { + return ( +
+
Layout inside group
+ +
+ ) +} diff --git a/examples/vue/basic-file-based-jsx/src/routes/(group)/inside.tsx b/examples/vue/basic-file-based-jsx/src/routes/(group)/inside.tsx new file mode 100644 index 00000000000..95880dd0e76 --- /dev/null +++ b/examples/vue/basic-file-based-jsx/src/routes/(group)/inside.tsx @@ -0,0 +1,24 @@ +import { createFileRoute, getRouteApi, useSearch } from '@tanstack/vue-router' +import { z } from 'zod' +import { zodValidator } from '@tanstack/zod-adapter' + +export const Route = createFileRoute('/(group)/inside')({ + validateSearch: zodValidator(z.object({ hello: z.string().optional() })), + component: InsideComponent, +}) + +const routeApi = getRouteApi('/(group)/inside') + +function InsideComponent() { + const searchViaHook = useSearch({ from: '/(group)/inside' }) + const searchViaRouteHook = routeApi.useSearch() + const searchViaRouteApi = routeApi.useSearch() + + return ( +
+
{searchViaHook.value.hello}
+
{searchViaRouteHook.value.hello}
+
{searchViaRouteApi.value.hello}
+
+ ) +} diff --git a/examples/vue/basic-file-based-jsx/src/routes/(group)/lazyinside.tsx b/examples/vue/basic-file-based-jsx/src/routes/(group)/lazyinside.tsx new file mode 100644 index 00000000000..fe97aa754a3 --- /dev/null +++ b/examples/vue/basic-file-based-jsx/src/routes/(group)/lazyinside.tsx @@ -0,0 +1,24 @@ +import { createFileRoute, getRouteApi, useSearch } from '@tanstack/vue-router' +import { z } from 'zod' +import { zodValidator } from '@tanstack/zod-adapter' + +export const Route = createFileRoute('/(group)/lazyinside')({ + validateSearch: zodValidator(z.object({ hello: z.string().optional() })), + component: LazyInsideComponent, +}) + +const routeApi = getRouteApi('/(group)/lazyinside') + +function LazyInsideComponent() { + const searchViaHook = useSearch({ from: '/(group)/lazyinside' }) + const searchViaRouteHook = routeApi.useSearch() + const searchViaRouteApi = routeApi.useSearch() + + return ( +
+
{searchViaHook.value.hello}
+
{searchViaRouteHook.value.hello}
+
{searchViaRouteApi.value.hello}
+
+ ) +} diff --git a/examples/vue/basic-file-based-jsx/src/routes/(group)/subfolder/inside.tsx b/examples/vue/basic-file-based-jsx/src/routes/(group)/subfolder/inside.tsx new file mode 100644 index 00000000000..4496f9efec2 --- /dev/null +++ b/examples/vue/basic-file-based-jsx/src/routes/(group)/subfolder/inside.tsx @@ -0,0 +1,24 @@ +import { createFileRoute, getRouteApi, useSearch } from '@tanstack/vue-router' +import { z } from 'zod' +import { zodValidator } from '@tanstack/zod-adapter' + +export const Route = createFileRoute('/(group)/subfolder/inside')({ + validateSearch: zodValidator(z.object({ hello: z.string().optional() })), + component: SubfolderInsideComponent, +}) + +const routeApi = getRouteApi('/(group)/subfolder/inside') + +function SubfolderInsideComponent() { + const searchViaHook = useSearch({ from: '/(group)/subfolder/inside' }) + const searchViaRouteHook = routeApi.useSearch() + const searchViaRouteApi = routeApi.useSearch() + + return ( +
+
{searchViaHook.value.hello}
+
{searchViaRouteHook.value.hello}
+
{searchViaRouteApi.value.hello}
+
+ ) +} diff --git a/examples/vue/basic-file-based-jsx/src/routes/__root.tsx b/examples/vue/basic-file-based-jsx/src/routes/__root.tsx index fe914ff5af6..b2e2eb74315 100644 --- a/examples/vue/basic-file-based-jsx/src/routes/__root.tsx +++ b/examples/vue/basic-file-based-jsx/src/routes/__root.tsx @@ -3,69 +3,100 @@ import { Link, Outlet, createRootRoute, + useCanGoBack, useRouter, + useRouterState, } from '@tanstack/vue-router' import { TanStackRouterDevtools } from '@tanstack/vue-router-devtools' +import NotFoundComponent from '../components/NotFoundComponent.vue' export const Route = createRootRoute({ component: RootComponent, - notFoundComponent: () => { - return ( -
-

This is the notFoundComponent configured on root route

- Start Over -
- ) - }, + notFoundComponent: NotFoundComponent, }) function RootComponent() { - const router = useRouter() - + const canGoBack = useCanGoBack() + // test useRouterState doesn't crash client side navigation + const _state = useRouterState() + return ( <> -
+
+ Home - {' '} + + + Posts + + + Layout + - Posts - {' '} + Only Route Inside Group + - Pathless Layout - {' '} + Inside Group + + Inside Subfolder Inside Group + + + Inside Group Inside Layout + + + Lazy Inside Group + + + unicode path + + {/* @ts-expect-error */} + This Route Does Not Exist
- {/* Start rendering router matches */} - + ) } diff --git a/examples/vue/basic-file-based/src/routes/_pathlessLayout.tsx b/examples/vue/basic-file-based-jsx/src/routes/_layout.tsx similarity index 81% rename from examples/vue/basic-file-based/src/routes/_pathlessLayout.tsx rename to examples/vue/basic-file-based-jsx/src/routes/_layout.tsx index 08e66764c7b..90503a4acba 100644 --- a/examples/vue/basic-file-based/src/routes/_pathlessLayout.tsx +++ b/examples/vue/basic-file-based-jsx/src/routes/_layout.tsx @@ -1,6 +1,6 @@ import { Outlet, createFileRoute } from '@tanstack/vue-router' -export const Route = createFileRoute('/_pathlessLayout')({ +export const Route = createFileRoute('/_layout')({ component: LayoutComponent, }) diff --git a/examples/vue/basic-file-based-jsx/src/routes/_layout/_layout-2.tsx b/examples/vue/basic-file-based-jsx/src/routes/_layout/_layout-2.tsx new file mode 100644 index 00000000000..70bcde8007c --- /dev/null +++ b/examples/vue/basic-file-based-jsx/src/routes/_layout/_layout-2.tsx @@ -0,0 +1,24 @@ +import { Link, Outlet, createFileRoute } from '@tanstack/vue-router' + +export const Route = createFileRoute('/_layout/_layout-2')({ + component: Layout2Component, +}) + +function Layout2Component() { + return ( +
+
I'm a nested layout
+
+ + Layout A + + + Layout B + +
+
+ +
+
+ ) +} diff --git a/examples/vue/basic-file-based-jsx/src/routes/_layout/_layout-2/layout-a.tsx b/examples/vue/basic-file-based-jsx/src/routes/_layout/_layout-2/layout-a.tsx new file mode 100644 index 00000000000..6d9d130d002 --- /dev/null +++ b/examples/vue/basic-file-based-jsx/src/routes/_layout/_layout-2/layout-a.tsx @@ -0,0 +1,9 @@ +import { createFileRoute } from '@tanstack/vue-router' + +export const Route = createFileRoute('/_layout/_layout-2/layout-a')({ + component: LayoutAComponent, +}) + +function LayoutAComponent() { + return
I'm layout A!
+} diff --git a/examples/vue/basic-file-based-jsx/src/routes/_layout/_layout-2/layout-b.tsx b/examples/vue/basic-file-based-jsx/src/routes/_layout/_layout-2/layout-b.tsx new file mode 100644 index 00000000000..9081cff17f3 --- /dev/null +++ b/examples/vue/basic-file-based-jsx/src/routes/_layout/_layout-2/layout-b.tsx @@ -0,0 +1,9 @@ +import { createFileRoute } from '@tanstack/vue-router' + +export const Route = createFileRoute('/_layout/_layout-2/layout-b')({ + component: LayoutBComponent, +}) + +function LayoutBComponent() { + return
I'm layout B!
+} diff --git a/examples/vue/basic-file-based-jsx/src/routes/_pathlessLayout.tsx b/examples/vue/basic-file-based-jsx/src/routes/_pathlessLayout.tsx deleted file mode 100644 index 08e66764c7b..00000000000 --- a/examples/vue/basic-file-based-jsx/src/routes/_pathlessLayout.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import { Outlet, createFileRoute } from '@tanstack/vue-router' - -export const Route = createFileRoute('/_pathlessLayout')({ - component: LayoutComponent, -}) - -function LayoutComponent() { - return ( -
-
I'm a layout
-
- -
-
- ) -} diff --git a/examples/vue/basic-file-based-jsx/src/routes/_pathlessLayout/_nested-layout.tsx b/examples/vue/basic-file-based-jsx/src/routes/_pathlessLayout/_nested-layout.tsx deleted file mode 100644 index 7c127b5fda9..00000000000 --- a/examples/vue/basic-file-based-jsx/src/routes/_pathlessLayout/_nested-layout.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import { Link, Outlet, createFileRoute } from '@tanstack/vue-router' - -export const Route = createFileRoute('/_pathlessLayout/_nested-layout')({ - component: LayoutComponent, -}) - -function LayoutComponent() { - return ( -
-
I'm a nested pathless layout
-
- - Go to route A - - - Go to route B - -
-
- -
-
- ) -} diff --git a/examples/vue/basic-file-based-jsx/src/routes/_pathlessLayout/_nested-layout/route-a.tsx b/examples/vue/basic-file-based-jsx/src/routes/_pathlessLayout/_nested-layout/route-a.tsx deleted file mode 100644 index 46e65c47de4..00000000000 --- a/examples/vue/basic-file-based-jsx/src/routes/_pathlessLayout/_nested-layout/route-a.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import { createFileRoute } from '@tanstack/vue-router' - -export const Route = createFileRoute('/_pathlessLayout/_nested-layout/route-a')( - { - component: LayoutAComponent, - }, -) - -function LayoutAComponent() { - return
I'm A!
-} diff --git a/examples/vue/basic-file-based-jsx/src/routes/_pathlessLayout/_nested-layout/route-b.tsx b/examples/vue/basic-file-based-jsx/src/routes/_pathlessLayout/_nested-layout/route-b.tsx deleted file mode 100644 index d226216dfd1..00000000000 --- a/examples/vue/basic-file-based-jsx/src/routes/_pathlessLayout/_nested-layout/route-b.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import { createFileRoute } from '@tanstack/vue-router' - -export const Route = createFileRoute('/_pathlessLayout/_nested-layout/route-b')( - { - component: LayoutBComponent, - }, -) - -function LayoutBComponent() { - return
I'm B!
-} diff --git a/examples/vue/basic-file-based-jsx/src/routes/editing-a.tsx b/examples/vue/basic-file-based-jsx/src/routes/editing-a.tsx new file mode 100644 index 00000000000..15e6804e642 --- /dev/null +++ b/examples/vue/basic-file-based-jsx/src/routes/editing-a.tsx @@ -0,0 +1,6 @@ +import { createFileRoute } from '@tanstack/vue-router' +import { EditingAComponent } from '../components/EditingAComponent' + +export const Route = createFileRoute('/editing-a')({ + component: EditingAComponent, +}) diff --git a/examples/vue/basic-file-based-jsx/src/routes/editing-b.tsx b/examples/vue/basic-file-based-jsx/src/routes/editing-b.tsx new file mode 100644 index 00000000000..85236bcaeec --- /dev/null +++ b/examples/vue/basic-file-based-jsx/src/routes/editing-b.tsx @@ -0,0 +1,6 @@ +import { createFileRoute } from '@tanstack/vue-router' +import { EditingBComponent } from '../components/EditingBComponent' + +export const Route = createFileRoute('/editing-b')({ + component: EditingBComponent, +}) diff --git a/examples/vue/basic-file-based-jsx/src/routes/index.tsx b/examples/vue/basic-file-based-jsx/src/routes/index.tsx index 9ba2b6a455e..a1a7ce5a58e 100644 --- a/examples/vue/basic-file-based-jsx/src/routes/index.tsx +++ b/examples/vue/basic-file-based-jsx/src/routes/index.tsx @@ -1,13 +1,15 @@ import { createFileRoute } from '@tanstack/vue-router' +import VueLogo from '../components/VueLogo.vue' export const Route = createFileRoute('/')({ - component: Home, + component: IndexComponent, }) -function Home() { +function IndexComponent() { return (

Welcome Home!

+
) } diff --git a/examples/vue/basic-file-based-jsx/src/routes/notRemountDeps.tsx b/examples/vue/basic-file-based-jsx/src/routes/notRemountDeps.tsx new file mode 100644 index 00000000000..5f0874f710e --- /dev/null +++ b/examples/vue/basic-file-based-jsx/src/routes/notRemountDeps.tsx @@ -0,0 +1,15 @@ +import { createFileRoute } from '@tanstack/vue-router' +import { NotRemountDepsComponent } from '../components/NotRemountDepsComponent' + +export const Route = createFileRoute('/notRemountDeps')({ + validateSearch: (search: Record) => ({ + searchParam: (search.searchParam as string) || '', + }), + loaderDeps(opts) { + return opts.search + }, + remountDeps(opts) { + return opts.params + }, + component: NotRemountDepsComponent, +}) diff --git a/examples/vue/basic-file-based-jsx/src/routes/posts.$postId.tsx b/examples/vue/basic-file-based-jsx/src/routes/posts.$postId.tsx index e271c139f5d..15d17387c82 100644 --- a/examples/vue/basic-file-based-jsx/src/routes/posts.$postId.tsx +++ b/examples/vue/basic-file-based-jsx/src/routes/posts.$postId.tsx @@ -1,18 +1,13 @@ -import { ErrorComponent, createFileRoute } from '@tanstack/vue-router' +import { createFileRoute } from '@tanstack/vue-router' +import PostErrorComponent from '../components/PostErrorComponent.vue' import { fetchPost } from '../posts' -import type { ErrorComponentProps } from '@tanstack/vue-router' - -export function PostErrorComponent({ error }: ErrorComponentProps) { - return -} +import type { PostType } from '../posts' export const Route = createFileRoute('/posts/$postId')({ loader: async ({ params: { postId } }) => fetchPost(postId), - errorComponent: PostErrorComponent, - notFoundComponent: () => { - return

Post not found

- }, component: PostComponent, + errorComponent: PostErrorComponent, + notFoundComponent: () =>

Post not found

, }) function PostComponent() { @@ -20,8 +15,10 @@ function PostComponent() { return (
-

{post.value.title}

-
{post.value.body}
+

+ {(post.value as PostType).title} +

+
{(post.value as PostType).body}
) } diff --git a/examples/vue/basic-file-based-jsx/src/routes/posts.index.tsx b/examples/vue/basic-file-based-jsx/src/routes/posts.index.tsx index a48cbbf215d..42e369c2188 100644 --- a/examples/vue/basic-file-based-jsx/src/routes/posts.index.tsx +++ b/examples/vue/basic-file-based-jsx/src/routes/posts.index.tsx @@ -5,5 +5,5 @@ export const Route = createFileRoute('/posts/')({ }) function PostsIndexComponent() { - return
Select a post.
+ return
Select a post.
} diff --git a/examples/vue/basic-file-based-jsx/src/routes/posts.tsx b/examples/vue/basic-file-based-jsx/src/routes/posts.tsx index d5fa1d7c53d..529fbbb1c19 100644 --- a/examples/vue/basic-file-based-jsx/src/routes/posts.tsx +++ b/examples/vue/basic-file-based-jsx/src/routes/posts.tsx @@ -1,7 +1,15 @@ import { Link, Outlet, createFileRoute } from '@tanstack/vue-router' import { fetchPosts } from '../posts' +import type { PostType } from '../posts' export const Route = createFileRoute('/posts')({ + head: () => ({ + meta: [ + { + title: 'Posts page', + }, + ], + }), loader: fetchPosts, component: PostsComponent, }) @@ -10,25 +18,21 @@ function PostsComponent() { const posts = Route.useLoaderData() return ( -
+
    - {[...posts.value, { id: 'i-do-not-exist', title: 'Non-existent Post' }].map( - (post) => { - return ( -
  • - -
    {post.title.substring(0, 20)}
    - -
    • - ) - }, + {[...(posts.value as Array), { id: 'i-do-not-exist', title: 'Non-existent Post' }].map( + (post) => ( +
  • + +
    {post.title.substring(0, 20)}
    + +
    • + ), )}
diff --git a/examples/vue/basic-file-based-jsx/src/routes/posts_.$postId.edit.tsx b/examples/vue/basic-file-based-jsx/src/routes/posts_.$postId.edit.tsx new file mode 100644 index 00000000000..eae55358105 --- /dev/null +++ b/examples/vue/basic-file-based-jsx/src/routes/posts_.$postId.edit.tsx @@ -0,0 +1,21 @@ +import { createFileRoute, getRouteApi, useParams } from '@tanstack/vue-router' + +export const Route = createFileRoute('/posts_/$postId/edit')({ + component: PostEditComponent, +}) + +const api = getRouteApi('/posts_/$postId/edit') + +function PostEditComponent() { + const paramsViaApi = api.useParams() + const paramsViaHook = useParams({ from: '/posts_/$postId/edit' }) + const paramsViaRouteHook = api.useParams() + + return ( +
+
{paramsViaHook.value.postId}
+
{paramsViaRouteHook.value.postId}
+
{paramsViaApi.value.postId}
+
+ ) +} diff --git a/examples/vue/basic-file-based-jsx/src/routes/remountDeps.tsx b/examples/vue/basic-file-based-jsx/src/routes/remountDeps.tsx new file mode 100644 index 00000000000..51f51e7592e --- /dev/null +++ b/examples/vue/basic-file-based-jsx/src/routes/remountDeps.tsx @@ -0,0 +1,15 @@ +import { createFileRoute } from '@tanstack/vue-router' +import { RemountDepsComponent } from '../components/RemountDepsComponent' + +export const Route = createFileRoute('/remountDeps')({ + validateSearch: (search: Record) => ({ + searchParam: (search.searchParam as string) || '', + }), + loaderDeps(opts) { + return opts.search + }, + remountDeps(opts) { + return opts.search + }, + component: RemountDepsComponent, +}) diff --git a/examples/vue/basic-file-based-jsx/src/routes/sfcComponent.component.vue b/examples/vue/basic-file-based-jsx/src/routes/sfcComponent.component.vue new file mode 100644 index 00000000000..8ab765f4805 --- /dev/null +++ b/examples/vue/basic-file-based-jsx/src/routes/sfcComponent.component.vue @@ -0,0 +1,10 @@ + + + \ No newline at end of file diff --git a/examples/vue/basic-file-based-jsx/src/routes/sfcComponent.tsx b/examples/vue/basic-file-based-jsx/src/routes/sfcComponent.tsx new file mode 100644 index 00000000000..0cbf84f07a0 --- /dev/null +++ b/examples/vue/basic-file-based-jsx/src/routes/sfcComponent.tsx @@ -0,0 +1,9 @@ +import { createFileRoute } from '@tanstack/vue-router' + +export const Route = createFileRoute('/sfcComponent')({ + component: RouteComponent, +}) + +function RouteComponent() { + return
Will be overwritten by the SFC component!
+} diff --git "a/examples/vue/basic-file-based-jsx/src/routes/\353\214\200\355\225\234\353\257\274\352\265\255.tsx" "b/examples/vue/basic-file-based-jsx/src/routes/\353\214\200\355\225\234\353\257\274\352\265\255.tsx" new file mode 100644 index 00000000000..e8c55d0ef91 --- /dev/null +++ "b/examples/vue/basic-file-based-jsx/src/routes/\353\214\200\355\225\234\353\257\274\352\265\255.tsx" @@ -0,0 +1,17 @@ +import { Outlet, createFileRoute } from '@tanstack/vue-router' + +export const Route = createFileRoute('/대한민국')({ + component: UnicodeComponent, +}) + +function UnicodeComponent() { + return ( +
+

+ Hello "/대한민국"! +

+
+ +
+ ) +} diff --git a/examples/vue/basic-file-based-jsx/src/styles.css b/examples/vue/basic-file-based-jsx/src/styles.css index 0b8e317099c..6a03b331e8e 100644 --- a/examples/vue/basic-file-based-jsx/src/styles.css +++ b/examples/vue/basic-file-based-jsx/src/styles.css @@ -1,6 +1,16 @@ -@tailwind base; -@tailwind components; -@tailwind utilities; +@import 'tailwindcss'; + +@source "./**/*.tsx"; + +@layer base { + *, + ::after, + ::before, + ::backdrop, + ::file-selector-button { + border-color: var(--color-gray-200, currentcolor); + } +} html { color-scheme: light dark; diff --git a/examples/vue/basic-file-based-jsx/tailwind.config.mjs b/examples/vue/basic-file-based-jsx/tailwind.config.mjs deleted file mode 100644 index 4986094b9d5..00000000000 --- a/examples/vue/basic-file-based-jsx/tailwind.config.mjs +++ /dev/null @@ -1,4 +0,0 @@ -/** @type {import('tailwindcss').Config} */ -export default { - content: ['./src/**/*.{js,jsx,ts,tsx}', './index.html'], -} diff --git a/examples/vue/basic-file-based-jsx/tsconfig.dev.json b/examples/vue/basic-file-based-jsx/tsconfig.dev.json deleted file mode 100644 index 285a09b0dcf..00000000000 --- a/examples/vue/basic-file-based-jsx/tsconfig.dev.json +++ /dev/null @@ -1,10 +0,0 @@ -{ - "composite": true, - "extends": "../../../tsconfig.base.json", - - "files": ["src/main.tsx"], - "include": [ - "src" - // "__tests__/**/*.test.*" - ] -} diff --git a/examples/vue/basic-file-based-jsx/tsconfig.json b/examples/vue/basic-file-based-jsx/tsconfig.json index 92ac5febf8b..726b87b95ab 100644 --- a/examples/vue/basic-file-based-jsx/tsconfig.json +++ b/examples/vue/basic-file-based-jsx/tsconfig.json @@ -1,13 +1,17 @@ { "compilerOptions": { - "strict": true, - "esModuleInterop": true, - "jsx": "preserve", - "jsxImportSource": "vue", "target": "ESNext", - "moduleResolution": "Bundler", "module": "ESNext", - "lib": ["DOM", "DOM.Iterable", "ES2022"], - "skipLibCheck": true - } + "lib": ["ESNext", "DOM"], + "strict": true, + "moduleResolution": "bundler", + "skipLibCheck": true, + "noEmit": true, + "resolveJsonModule": true, + "types": ["vite/client"], + "jsx": "preserve", + "jsxImportSource": "vue" + }, + "include": ["src", "tests"], + "exclude": ["node_modules", "dist"] } diff --git a/examples/vue/basic-file-based-jsx/vite.config.js b/examples/vue/basic-file-based-jsx/vite.config.js deleted file mode 100644 index 20045a7b4f7..00000000000 --- a/examples/vue/basic-file-based-jsx/vite.config.js +++ /dev/null @@ -1,7 +0,0 @@ -import { defineConfig } from 'vite' -import vueJsx from '@vitejs/plugin-vue-jsx' - -// https://vitejs.dev/config/ -export default defineConfig({ - plugins: [vueJsx()], -}) diff --git a/examples/vue/basic-file-based-jsx/vite.config.ts b/examples/vue/basic-file-based-jsx/vite.config.ts new file mode 100644 index 00000000000..570e6cff2dc --- /dev/null +++ b/examples/vue/basic-file-based-jsx/vite.config.ts @@ -0,0 +1,16 @@ +import { defineConfig } from 'vite' +import vue from '@vitejs/plugin-vue' +import vueJsx from '@vitejs/plugin-vue-jsx' +import { tanstackRouter } from '@tanstack/router-plugin/vite' + +// https://vitejs.dev/config/ +export default defineConfig({ + plugins: [ + tanstackRouter({ + target: 'vue', + autoCodeSplitting: true, + }), + vue(), + vueJsx(), + ], +}) diff --git a/examples/vue/basic-file-based/index.html b/examples/vue/basic-file-based-sfc/index.html similarity index 90% rename from examples/vue/basic-file-based/index.html rename to examples/vue/basic-file-based-sfc/index.html index ebd88660983..eaa17316cdb 100644 --- a/examples/vue/basic-file-based/index.html +++ b/examples/vue/basic-file-based-sfc/index.html @@ -3,7 +3,6 @@ - Vite App
diff --git a/examples/vue/basic-file-based-sfc/package.json b/examples/vue/basic-file-based-sfc/package.json new file mode 100644 index 00000000000..151b7a79754 --- /dev/null +++ b/examples/vue/basic-file-based-sfc/package.json @@ -0,0 +1,29 @@ +{ + "name": "tanstack-router-vue-example-basic-file-based-sfc", + "private": true, + "type": "module", + "scripts": { + "dev": "vite --port 3000", + "build": "vite build && tsc --noEmit", + "preview": "vite preview", + "start": "vite" + }, + "dependencies": { + "@tailwindcss/postcss": "^4.1.15", + "@tanstack/router-plugin": "^1.139.14", + "@tanstack/vue-router": "^1.139.14", + "@tanstack/vue-router-devtools": "^1.139.14", + "@tanstack/zod-adapter": "^1.139.14", + "postcss": "^8.5.1", + "redaxios": "^0.5.1", + "tailwindcss": "^4.1.15", + "vue": "^3.5.16", + "zod": "^3.24.2" + }, + "devDependencies": { + "@vitejs/plugin-vue": "^5.2.3", + "@vitejs/plugin-vue-jsx": "^4.1.2", + "typescript": "~5.8.3", + "vite": "^7.1.7" + } +} diff --git a/examples/vue/basic-file-based-sfc/postcss.config.mjs b/examples/vue/basic-file-based-sfc/postcss.config.mjs new file mode 100644 index 00000000000..a7f73a2d1d7 --- /dev/null +++ b/examples/vue/basic-file-based-sfc/postcss.config.mjs @@ -0,0 +1,5 @@ +export default { + plugins: { + '@tailwindcss/postcss': {}, + }, +} diff --git a/examples/vue/basic-file-based/src/main.ts b/examples/vue/basic-file-based-sfc/src/main.ts similarity index 89% rename from examples/vue/basic-file-based/src/main.ts rename to examples/vue/basic-file-based-sfc/src/main.ts index 3088b1f558b..98f9482d20b 100644 --- a/examples/vue/basic-file-based/src/main.ts +++ b/examples/vue/basic-file-based-sfc/src/main.ts @@ -21,9 +21,10 @@ declare module '@tanstack/vue-router' { const rootElement = document.getElementById('app')! if (!rootElement.innerHTML) { - createApp({ - setup() { + const app = createApp({ + setup() { return () => h(RouterProvider, { router }) - } - }).mount('#app') + }, + }) + app.mount('#app') } diff --git a/examples/vue/basic-file-based/src/posts.tsx b/examples/vue/basic-file-based-sfc/src/posts.ts similarity index 70% rename from examples/vue/basic-file-based/src/posts.tsx rename to examples/vue/basic-file-based-sfc/src/posts.ts index 40af43dda04..1b4c92b41d7 100644 --- a/examples/vue/basic-file-based/src/posts.tsx +++ b/examples/vue/basic-file-based-sfc/src/posts.ts @@ -7,11 +7,17 @@ export type PostType = { body: string } +let queryURL = 'https://jsonplaceholder.typicode.com' + +if (import.meta.env.VITE_NODE_ENV === 'test') { + queryURL = `http://localhost:${import.meta.env.VITE_EXTERNAL_PORT}` +} + export const fetchPost = async (postId: string) => { console.info(`Fetching post with id ${postId}...`) await new Promise((r) => setTimeout(r, 500)) const post = await axios - .get(`https://jsonplaceholder.typicode.com/posts/${postId}`) + .get(`${queryURL}/posts/${postId}`) .then((r) => r.data) .catch((err) => { if (err.status === 404) { @@ -27,6 +33,6 @@ export const fetchPosts = async () => { console.info('Fetching posts...') await new Promise((r) => setTimeout(r, 500)) return axios - .get>('https://jsonplaceholder.typicode.com/posts') + .get>(`${queryURL}/posts`) .then((r) => r.data.slice(0, 10)) } diff --git a/examples/vue/basic-file-based-sfc/src/routeTree.gen.ts b/examples/vue/basic-file-based-sfc/src/routeTree.gen.ts new file mode 100644 index 00000000000..ed2e49db39c --- /dev/null +++ b/examples/vue/basic-file-based-sfc/src/routeTree.gen.ts @@ -0,0 +1,612 @@ +/* eslint-disable */ + +// @ts-nocheck + +// noinspection JSUnusedGlobalSymbols + +// This file was automatically generated by TanStack Router. +// You should NOT make any changes in this file as it will be overwritten. +// Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified. + +import { lazyRouteComponent } from '@tanstack/vue-router' + +import { Route as rootRouteImport } from './routes/__root' +import { Route as Char45824Char54620Char48124Char44397RouteImport } from './routes/대한민국' +import { Route as RemountDepsRouteImport } from './routes/remountDeps' +import { Route as PostsRouteImport } from './routes/posts' +import { Route as NotRemountDepsRouteImport } from './routes/notRemountDeps' +import { Route as EditingBRouteImport } from './routes/editing-b' +import { Route as EditingARouteImport } from './routes/editing-a' +import { Route as LayoutRouteImport } from './routes/_layout' +import { Route as IndexRouteImport } from './routes/index' +import { Route as PostsIndexRouteImport } from './routes/posts.index' +import { Route as PostsPostIdRouteImport } from './routes/posts.$postId' +import { Route as LayoutLayout2RouteImport } from './routes/_layout/_layout-2' +import { Route as groupLazyinsideRouteImport } from './routes/(group)/lazyinside' +import { Route as groupInsideRouteImport } from './routes/(group)/inside' +import { Route as groupLayoutRouteImport } from './routes/(group)/_layout' +import { Route as anotherGroupOnlyrouteinsideRouteImport } from './routes/(another-group)/onlyrouteinside' +import { Route as PostsPostIdEditRouteImport } from './routes/posts_.$postId.edit' +import { Route as LayoutLayout2LayoutBRouteImport } from './routes/_layout/_layout-2/layout-b' +import { Route as LayoutLayout2LayoutARouteImport } from './routes/_layout/_layout-2/layout-a' +import { Route as groupSubfolderInsideRouteImport } from './routes/(group)/subfolder/inside' +import { Route as groupLayoutInsidelayoutRouteImport } from './routes/(group)/_layout.insidelayout' + +const Char45824Char54620Char48124Char44397Route = + Char45824Char54620Char48124Char44397RouteImport.update({ + id: '/대한민국', + path: '/대한민국', + getParentRoute: () => rootRouteImport, + } as any).update({ + component: lazyRouteComponent( + () => import('./routes/대한민국.component.vue'), + 'default', + ), + }) +const RemountDepsRoute = RemountDepsRouteImport.update({ + id: '/remountDeps', + path: '/remountDeps', + getParentRoute: () => rootRouteImport, +} as any).update({ + component: lazyRouteComponent( + () => import('./routes/remountDeps.component.vue'), + 'default', + ), +}) +const PostsRoute = PostsRouteImport.update({ + id: '/posts', + path: '/posts', + getParentRoute: () => rootRouteImport, +} as any).update({ + component: lazyRouteComponent( + () => import('./routes/posts.component.vue'), + 'default', + ), +}) +const NotRemountDepsRoute = NotRemountDepsRouteImport.update({ + id: '/notRemountDeps', + path: '/notRemountDeps', + getParentRoute: () => rootRouteImport, +} as any).update({ + component: lazyRouteComponent( + () => import('./routes/notRemountDeps.component.vue'), + 'default', + ), +}) +const EditingBRoute = EditingBRouteImport.update({ + id: '/editing-b', + path: '/editing-b', + getParentRoute: () => rootRouteImport, +} as any).update({ + component: lazyRouteComponent( + () => import('./routes/editing-b.component.vue'), + 'default', + ), +}) +const EditingARoute = EditingARouteImport.update({ + id: '/editing-a', + path: '/editing-a', + getParentRoute: () => rootRouteImport, +} as any).update({ + component: lazyRouteComponent( + () => import('./routes/editing-a.component.vue'), + 'default', + ), +}) +const LayoutRoute = LayoutRouteImport.update({ + id: '/_layout', + getParentRoute: () => rootRouteImport, +} as any).update({ + component: lazyRouteComponent( + () => import('./routes/_layout.component.vue'), + 'default', + ), +}) +const IndexRoute = IndexRouteImport.update({ + id: '/', + path: '/', + getParentRoute: () => rootRouteImport, +} as any).update({ + component: lazyRouteComponent( + () => import('./routes/index.component.vue'), + 'default', + ), +}) +const PostsIndexRoute = PostsIndexRouteImport.update({ + id: '/', + path: '/', + getParentRoute: () => PostsRoute, +} as any).update({ + component: lazyRouteComponent( + () => import('./routes/posts.index.component.vue'), + 'default', + ), +}) +const PostsPostIdRoute = PostsPostIdRouteImport.update({ + id: '/$postId', + path: '/$postId', + getParentRoute: () => PostsRoute, +} as any).update({ + component: lazyRouteComponent( + () => import('./routes/posts.$postId.component.vue'), + 'default', + ), + errorComponent: lazyRouteComponent( + () => import('./routes/posts.$postId.errorComponent.vue'), + 'default', + ), +}) +const LayoutLayout2Route = LayoutLayout2RouteImport.update({ + id: '/_layout-2', + getParentRoute: () => LayoutRoute, +} as any).update({ + component: lazyRouteComponent( + () => import('./routes/_layout/_layout-2.component.vue'), + 'default', + ), +}) +const groupLazyinsideRoute = groupLazyinsideRouteImport + .update({ + id: '/(group)/lazyinside', + path: '/lazyinside', + getParentRoute: () => rootRouteImport, + } as any) + .update({ + component: lazyRouteComponent( + () => import('./routes/(group)/lazyinside.component.vue'), + 'default', + ), + }) +const groupInsideRoute = groupInsideRouteImport + .update({ + id: '/(group)/inside', + path: '/inside', + getParentRoute: () => rootRouteImport, + } as any) + .update({ + component: lazyRouteComponent( + () => import('./routes/(group)/inside.component.vue'), + 'default', + ), + }) +const groupLayoutRoute = groupLayoutRouteImport + .update({ + id: '/(group)/_layout', + getParentRoute: () => rootRouteImport, + } as any) + .update({ + component: lazyRouteComponent( + () => import('./routes/(group)/_layout.component.vue'), + 'default', + ), + }) +const anotherGroupOnlyrouteinsideRoute = anotherGroupOnlyrouteinsideRouteImport + .update({ + id: '/(another-group)/onlyrouteinside', + path: '/onlyrouteinside', + getParentRoute: () => rootRouteImport, + } as any) + .update({ + component: lazyRouteComponent( + () => import('./routes/(another-group)/onlyrouteinside.component.vue'), + 'default', + ), + }) +const PostsPostIdEditRoute = PostsPostIdEditRouteImport.update({ + id: '/posts_/$postId/edit', + path: '/posts/$postId/edit', + getParentRoute: () => rootRouteImport, +} as any).update({ + component: lazyRouteComponent( + () => import('./routes/posts_.$postId.edit.component.vue'), + 'default', + ), +}) +const LayoutLayout2LayoutBRoute = LayoutLayout2LayoutBRouteImport.update({ + id: '/layout-b', + path: '/layout-b', + getParentRoute: () => LayoutLayout2Route, +} as any).update({ + component: lazyRouteComponent( + () => import('./routes/_layout/_layout-2/layout-b.component.vue'), + 'default', + ), +}) +const LayoutLayout2LayoutARoute = LayoutLayout2LayoutARouteImport.update({ + id: '/layout-a', + path: '/layout-a', + getParentRoute: () => LayoutLayout2Route, +} as any).update({ + component: lazyRouteComponent( + () => import('./routes/_layout/_layout-2/layout-a.component.vue'), + 'default', + ), +}) +const groupSubfolderInsideRoute = groupSubfolderInsideRouteImport + .update({ + id: '/(group)/subfolder/inside', + path: '/subfolder/inside', + getParentRoute: () => rootRouteImport, + } as any) + .update({ + component: lazyRouteComponent( + () => import('./routes/(group)/subfolder/inside.component.vue'), + 'default', + ), + }) +const groupLayoutInsidelayoutRoute = groupLayoutInsidelayoutRouteImport + .update({ + id: '/insidelayout', + path: '/insidelayout', + getParentRoute: () => groupLayoutRoute, + } as any) + .update({ + component: lazyRouteComponent( + () => import('./routes/(group)/_layout.insidelayout.component.vue'), + 'default', + ), + }) + +export interface FileRoutesByFullPath { + '/': typeof IndexRoute + '/editing-a': typeof EditingARoute + '/editing-b': typeof EditingBRoute + '/notRemountDeps': typeof NotRemountDepsRoute + '/posts': typeof PostsRouteWithChildren + '/remountDeps': typeof RemountDepsRoute + '/대한민국': typeof Char45824Char54620Char48124Char44397Route + '/onlyrouteinside': typeof anotherGroupOnlyrouteinsideRoute + '/inside': typeof groupInsideRoute + '/lazyinside': typeof groupLazyinsideRoute + '/posts/$postId': typeof PostsPostIdRoute + '/posts/': typeof PostsIndexRoute + '/insidelayout': typeof groupLayoutInsidelayoutRoute + '/subfolder/inside': typeof groupSubfolderInsideRoute + '/layout-a': typeof LayoutLayout2LayoutARoute + '/layout-b': typeof LayoutLayout2LayoutBRoute + '/posts/$postId/edit': typeof PostsPostIdEditRoute +} +export interface FileRoutesByTo { + '/': typeof IndexRoute + '/editing-a': typeof EditingARoute + '/editing-b': typeof EditingBRoute + '/notRemountDeps': typeof NotRemountDepsRoute + '/remountDeps': typeof RemountDepsRoute + '/대한민국': typeof Char45824Char54620Char48124Char44397Route + '/onlyrouteinside': typeof anotherGroupOnlyrouteinsideRoute + '/inside': typeof groupInsideRoute + '/lazyinside': typeof groupLazyinsideRoute + '/posts/$postId': typeof PostsPostIdRoute + '/posts': typeof PostsIndexRoute + '/insidelayout': typeof groupLayoutInsidelayoutRoute + '/subfolder/inside': typeof groupSubfolderInsideRoute + '/layout-a': typeof LayoutLayout2LayoutARoute + '/layout-b': typeof LayoutLayout2LayoutBRoute + '/posts/$postId/edit': typeof PostsPostIdEditRoute +} +export interface FileRoutesById { + __root__: typeof rootRouteImport + '/': typeof IndexRoute + '/_layout': typeof LayoutRouteWithChildren + '/editing-a': typeof EditingARoute + '/editing-b': typeof EditingBRoute + '/notRemountDeps': typeof NotRemountDepsRoute + '/posts': typeof PostsRouteWithChildren + '/remountDeps': typeof RemountDepsRoute + '/대한민국': typeof Char45824Char54620Char48124Char44397Route + '/(another-group)/onlyrouteinside': typeof anotherGroupOnlyrouteinsideRoute + '/(group)/_layout': typeof groupLayoutRouteWithChildren + '/(group)/inside': typeof groupInsideRoute + '/(group)/lazyinside': typeof groupLazyinsideRoute + '/_layout/_layout-2': typeof LayoutLayout2RouteWithChildren + '/posts/$postId': typeof PostsPostIdRoute + '/posts/': typeof PostsIndexRoute + '/(group)/_layout/insidelayout': typeof groupLayoutInsidelayoutRoute + '/(group)/subfolder/inside': typeof groupSubfolderInsideRoute + '/_layout/_layout-2/layout-a': typeof LayoutLayout2LayoutARoute + '/_layout/_layout-2/layout-b': typeof LayoutLayout2LayoutBRoute + '/posts_/$postId/edit': typeof PostsPostIdEditRoute +} +export interface FileRouteTypes { + fileRoutesByFullPath: FileRoutesByFullPath + fullPaths: + | '/' + | '/editing-a' + | '/editing-b' + | '/notRemountDeps' + | '/posts' + | '/remountDeps' + | '/대한민국' + | '/onlyrouteinside' + | '/inside' + | '/lazyinside' + | '/posts/$postId' + | '/posts/' + | '/insidelayout' + | '/subfolder/inside' + | '/layout-a' + | '/layout-b' + | '/posts/$postId/edit' + fileRoutesByTo: FileRoutesByTo + to: + | '/' + | '/editing-a' + | '/editing-b' + | '/notRemountDeps' + | '/remountDeps' + | '/대한민국' + | '/onlyrouteinside' + | '/inside' + | '/lazyinside' + | '/posts/$postId' + | '/posts' + | '/insidelayout' + | '/subfolder/inside' + | '/layout-a' + | '/layout-b' + | '/posts/$postId/edit' + id: + | '__root__' + | '/' + | '/_layout' + | '/editing-a' + | '/editing-b' + | '/notRemountDeps' + | '/posts' + | '/remountDeps' + | '/대한민국' + | '/(another-group)/onlyrouteinside' + | '/(group)/_layout' + | '/(group)/inside' + | '/(group)/lazyinside' + | '/_layout/_layout-2' + | '/posts/$postId' + | '/posts/' + | '/(group)/_layout/insidelayout' + | '/(group)/subfolder/inside' + | '/_layout/_layout-2/layout-a' + | '/_layout/_layout-2/layout-b' + | '/posts_/$postId/edit' + fileRoutesById: FileRoutesById +} +export interface RootRouteChildren { + IndexRoute: typeof IndexRoute + LayoutRoute: typeof LayoutRouteWithChildren + EditingARoute: typeof EditingARoute + EditingBRoute: typeof EditingBRoute + NotRemountDepsRoute: typeof NotRemountDepsRoute + PostsRoute: typeof PostsRouteWithChildren + RemountDepsRoute: typeof RemountDepsRoute + Char45824Char54620Char48124Char44397Route: typeof Char45824Char54620Char48124Char44397Route + anotherGroupOnlyrouteinsideRoute: typeof anotherGroupOnlyrouteinsideRoute + groupLayoutRoute: typeof groupLayoutRouteWithChildren + groupInsideRoute: typeof groupInsideRoute + groupLazyinsideRoute: typeof groupLazyinsideRoute + groupSubfolderInsideRoute: typeof groupSubfolderInsideRoute + PostsPostIdEditRoute: typeof PostsPostIdEditRoute +} + +declare module '@tanstack/vue-router' { + interface FileRoutesByPath { + '/대한민국': { + id: '/대한민국' + path: '/대한민국' + fullPath: '/대한민국' + preLoaderRoute: typeof Char45824Char54620Char48124Char44397RouteImport + parentRoute: typeof rootRouteImport + } + '/remountDeps': { + id: '/remountDeps' + path: '/remountDeps' + fullPath: '/remountDeps' + preLoaderRoute: typeof RemountDepsRouteImport + parentRoute: typeof rootRouteImport + } + '/posts': { + id: '/posts' + path: '/posts' + fullPath: '/posts' + preLoaderRoute: typeof PostsRouteImport + parentRoute: typeof rootRouteImport + } + '/notRemountDeps': { + id: '/notRemountDeps' + path: '/notRemountDeps' + fullPath: '/notRemountDeps' + preLoaderRoute: typeof NotRemountDepsRouteImport + parentRoute: typeof rootRouteImport + } + '/editing-b': { + id: '/editing-b' + path: '/editing-b' + fullPath: '/editing-b' + preLoaderRoute: typeof EditingBRouteImport + parentRoute: typeof rootRouteImport + } + '/editing-a': { + id: '/editing-a' + path: '/editing-a' + fullPath: '/editing-a' + preLoaderRoute: typeof EditingARouteImport + parentRoute: typeof rootRouteImport + } + '/_layout': { + id: '/_layout' + path: '' + fullPath: '' + preLoaderRoute: typeof LayoutRouteImport + parentRoute: typeof rootRouteImport + } + '/': { + id: '/' + path: '/' + fullPath: '/' + preLoaderRoute: typeof IndexRouteImport + parentRoute: typeof rootRouteImport + } + '/posts/': { + id: '/posts/' + path: '/' + fullPath: '/posts/' + preLoaderRoute: typeof PostsIndexRouteImport + parentRoute: typeof PostsRoute + } + '/posts/$postId': { + id: '/posts/$postId' + path: '/$postId' + fullPath: '/posts/$postId' + preLoaderRoute: typeof PostsPostIdRouteImport + parentRoute: typeof PostsRoute + } + '/_layout/_layout-2': { + id: '/_layout/_layout-2' + path: '' + fullPath: '' + preLoaderRoute: typeof LayoutLayout2RouteImport + parentRoute: typeof LayoutRoute + } + '/(group)/lazyinside': { + id: '/(group)/lazyinside' + path: '/lazyinside' + fullPath: '/lazyinside' + preLoaderRoute: typeof groupLazyinsideRouteImport + parentRoute: typeof rootRouteImport + } + '/(group)/inside': { + id: '/(group)/inside' + path: '/inside' + fullPath: '/inside' + preLoaderRoute: typeof groupInsideRouteImport + parentRoute: typeof rootRouteImport + } + '/(group)/_layout': { + id: '/(group)/_layout' + path: '' + fullPath: '' + preLoaderRoute: typeof groupLayoutRouteImport + parentRoute: typeof rootRouteImport + } + '/(another-group)/onlyrouteinside': { + id: '/(another-group)/onlyrouteinside' + path: '/onlyrouteinside' + fullPath: '/onlyrouteinside' + preLoaderRoute: typeof anotherGroupOnlyrouteinsideRouteImport + parentRoute: typeof rootRouteImport + } + '/posts_/$postId/edit': { + id: '/posts_/$postId/edit' + path: '/posts/$postId/edit' + fullPath: '/posts/$postId/edit' + preLoaderRoute: typeof PostsPostIdEditRouteImport + parentRoute: typeof rootRouteImport + } + '/_layout/_layout-2/layout-b': { + id: '/_layout/_layout-2/layout-b' + path: '/layout-b' + fullPath: '/layout-b' + preLoaderRoute: typeof LayoutLayout2LayoutBRouteImport + parentRoute: typeof LayoutLayout2Route + } + '/_layout/_layout-2/layout-a': { + id: '/_layout/_layout-2/layout-a' + path: '/layout-a' + fullPath: '/layout-a' + preLoaderRoute: typeof LayoutLayout2LayoutARouteImport + parentRoute: typeof LayoutLayout2Route + } + '/(group)/subfolder/inside': { + id: '/(group)/subfolder/inside' + path: '/subfolder/inside' + fullPath: '/subfolder/inside' + preLoaderRoute: typeof groupSubfolderInsideRouteImport + parentRoute: typeof rootRouteImport + } + '/(group)/_layout/insidelayout': { + id: '/(group)/_layout/insidelayout' + path: '/insidelayout' + fullPath: '/insidelayout' + preLoaderRoute: typeof groupLayoutInsidelayoutRouteImport + parentRoute: typeof groupLayoutRoute + } + } +} + +interface LayoutLayout2RouteChildren { + LayoutLayout2LayoutARoute: typeof LayoutLayout2LayoutARoute + LayoutLayout2LayoutBRoute: typeof LayoutLayout2LayoutBRoute +} + +const LayoutLayout2RouteChildren: LayoutLayout2RouteChildren = { + LayoutLayout2LayoutARoute: LayoutLayout2LayoutARoute, + LayoutLayout2LayoutBRoute: LayoutLayout2LayoutBRoute, +} + +const LayoutLayout2RouteWithChildren = LayoutLayout2Route._addFileChildren( + LayoutLayout2RouteChildren, +) + +interface LayoutRouteChildren { + LayoutLayout2Route: typeof LayoutLayout2RouteWithChildren +} + +const LayoutRouteChildren: LayoutRouteChildren = { + LayoutLayout2Route: LayoutLayout2RouteWithChildren, +} + +const LayoutRouteWithChildren = + LayoutRoute._addFileChildren(LayoutRouteChildren) + +interface PostsRouteChildren { + PostsPostIdRoute: typeof PostsPostIdRoute + PostsIndexRoute: typeof PostsIndexRoute +} + +const PostsRouteChildren: PostsRouteChildren = { + PostsPostIdRoute: PostsPostIdRoute, + PostsIndexRoute: PostsIndexRoute, +} + +const PostsRouteWithChildren = PostsRoute._addFileChildren(PostsRouteChildren) + +interface groupLayoutRouteChildren { + groupLayoutInsidelayoutRoute: typeof groupLayoutInsidelayoutRoute +} + +const groupLayoutRouteChildren: groupLayoutRouteChildren = { + groupLayoutInsidelayoutRoute: groupLayoutInsidelayoutRoute, +} + +const groupLayoutRouteWithChildren = groupLayoutRoute._addFileChildren( + groupLayoutRouteChildren, +) + +const rootRouteChildren: RootRouteChildren = { + IndexRoute: IndexRoute, + LayoutRoute: LayoutRouteWithChildren, + EditingARoute: EditingARoute, + EditingBRoute: EditingBRoute, + NotRemountDepsRoute: NotRemountDepsRoute, + PostsRoute: PostsRouteWithChildren, + RemountDepsRoute: RemountDepsRoute, + Char45824Char54620Char48124Char44397Route: + Char45824Char54620Char48124Char44397Route, + anotherGroupOnlyrouteinsideRoute: anotherGroupOnlyrouteinsideRoute, + groupLayoutRoute: groupLayoutRouteWithChildren, + groupInsideRoute: groupInsideRoute, + groupLazyinsideRoute: groupLazyinsideRoute, + groupSubfolderInsideRoute: groupSubfolderInsideRoute, + PostsPostIdEditRoute: PostsPostIdEditRoute, +} +export const routeTree = rootRouteImport + .update({ + component: lazyRouteComponent( + () => import('./routes/__root.component.vue'), + 'default', + ), + notFoundComponent: lazyRouteComponent( + () => import('./routes/__root.notFoundComponent.vue'), + 'default', + ), + }) + ._addFileChildren(rootRouteChildren) + ._addFileTypes() diff --git a/examples/vue/basic-file-based-sfc/src/routes/(another-group)/onlyrouteinside.component.vue b/examples/vue/basic-file-based-sfc/src/routes/(another-group)/onlyrouteinside.component.vue new file mode 100644 index 00000000000..050e9530a71 --- /dev/null +++ b/examples/vue/basic-file-based-sfc/src/routes/(another-group)/onlyrouteinside.component.vue @@ -0,0 +1,17 @@ + + + diff --git a/examples/vue/basic-file-based-sfc/src/routes/(another-group)/onlyrouteinside.ts b/examples/vue/basic-file-based-sfc/src/routes/(another-group)/onlyrouteinside.ts new file mode 100644 index 00000000000..491bb03649f --- /dev/null +++ b/examples/vue/basic-file-based-sfc/src/routes/(another-group)/onlyrouteinside.ts @@ -0,0 +1,7 @@ +import { createFileRoute } from '@tanstack/vue-router' +import { z } from 'zod' +import { zodValidator } from '@tanstack/zod-adapter' + +export const Route = createFileRoute('/(another-group)/onlyrouteinside')({ + validateSearch: zodValidator(z.object({ hello: z.string().optional() })), +}) diff --git a/examples/vue/basic-file-based-sfc/src/routes/(group)/_layout.component.vue b/examples/vue/basic-file-based-sfc/src/routes/(group)/_layout.component.vue new file mode 100644 index 00000000000..9c2990a0293 --- /dev/null +++ b/examples/vue/basic-file-based-sfc/src/routes/(group)/_layout.component.vue @@ -0,0 +1,10 @@ + + + diff --git a/examples/vue/basic-file-based-sfc/src/routes/(group)/_layout.insidelayout.component.vue b/examples/vue/basic-file-based-sfc/src/routes/(group)/_layout.insidelayout.component.vue new file mode 100644 index 00000000000..0ed233100f2 --- /dev/null +++ b/examples/vue/basic-file-based-sfc/src/routes/(group)/_layout.insidelayout.component.vue @@ -0,0 +1,17 @@ + + + diff --git a/examples/vue/basic-file-based-sfc/src/routes/(group)/_layout.insidelayout.ts b/examples/vue/basic-file-based-sfc/src/routes/(group)/_layout.insidelayout.ts new file mode 100644 index 00000000000..49ef8f7bb9f --- /dev/null +++ b/examples/vue/basic-file-based-sfc/src/routes/(group)/_layout.insidelayout.ts @@ -0,0 +1,7 @@ +import { createFileRoute } from '@tanstack/vue-router' +import { z } from 'zod' +import { zodValidator } from '@tanstack/zod-adapter' + +export const Route = createFileRoute('/(group)/_layout/insidelayout')({ + validateSearch: zodValidator(z.object({ hello: z.string().optional() })), +}) diff --git a/examples/vue/basic-file-based-sfc/src/routes/(group)/_layout.ts b/examples/vue/basic-file-based-sfc/src/routes/(group)/_layout.ts new file mode 100644 index 00000000000..ce0f6ca52a2 --- /dev/null +++ b/examples/vue/basic-file-based-sfc/src/routes/(group)/_layout.ts @@ -0,0 +1,3 @@ +import { createFileRoute } from '@tanstack/vue-router' + +export const Route = createFileRoute('/(group)/_layout')({}) diff --git a/examples/vue/basic-file-based-sfc/src/routes/(group)/inside.component.vue b/examples/vue/basic-file-based-sfc/src/routes/(group)/inside.component.vue new file mode 100644 index 00000000000..bd227855fd3 --- /dev/null +++ b/examples/vue/basic-file-based-sfc/src/routes/(group)/inside.component.vue @@ -0,0 +1,17 @@ + + + diff --git a/examples/vue/basic-file-based-sfc/src/routes/(group)/inside.ts b/examples/vue/basic-file-based-sfc/src/routes/(group)/inside.ts new file mode 100644 index 00000000000..f7b06f6a94a --- /dev/null +++ b/examples/vue/basic-file-based-sfc/src/routes/(group)/inside.ts @@ -0,0 +1,7 @@ +import { createFileRoute } from '@tanstack/vue-router' +import { z } from 'zod' +import { zodValidator } from '@tanstack/zod-adapter' + +export const Route = createFileRoute('/(group)/inside')({ + validateSearch: zodValidator(z.object({ hello: z.string().optional() })), +}) diff --git a/examples/vue/basic-file-based-sfc/src/routes/(group)/lazyinside.component.vue b/examples/vue/basic-file-based-sfc/src/routes/(group)/lazyinside.component.vue new file mode 100644 index 00000000000..1330ffc470c --- /dev/null +++ b/examples/vue/basic-file-based-sfc/src/routes/(group)/lazyinside.component.vue @@ -0,0 +1,17 @@ + + + diff --git a/examples/vue/basic-file-based-sfc/src/routes/(group)/lazyinside.ts b/examples/vue/basic-file-based-sfc/src/routes/(group)/lazyinside.ts new file mode 100644 index 00000000000..b66d18a7299 --- /dev/null +++ b/examples/vue/basic-file-based-sfc/src/routes/(group)/lazyinside.ts @@ -0,0 +1,7 @@ +import { createFileRoute } from '@tanstack/vue-router' +import { z } from 'zod' +import { zodValidator } from '@tanstack/zod-adapter' + +export const Route = createFileRoute('/(group)/lazyinside')({ + validateSearch: zodValidator(z.object({ hello: z.string().optional() })), +}) diff --git a/examples/vue/basic-file-based-sfc/src/routes/(group)/subfolder/inside.component.vue b/examples/vue/basic-file-based-sfc/src/routes/(group)/subfolder/inside.component.vue new file mode 100644 index 00000000000..12b3dc0fa2f --- /dev/null +++ b/examples/vue/basic-file-based-sfc/src/routes/(group)/subfolder/inside.component.vue @@ -0,0 +1,17 @@ + + + diff --git a/examples/vue/basic-file-based-sfc/src/routes/(group)/subfolder/inside.ts b/examples/vue/basic-file-based-sfc/src/routes/(group)/subfolder/inside.ts new file mode 100644 index 00000000000..50aa8a44ad2 --- /dev/null +++ b/examples/vue/basic-file-based-sfc/src/routes/(group)/subfolder/inside.ts @@ -0,0 +1,7 @@ +import { createFileRoute } from '@tanstack/vue-router' +import { z } from 'zod' +import { zodValidator } from '@tanstack/zod-adapter' + +export const Route = createFileRoute('/(group)/subfolder/inside')({ + validateSearch: zodValidator(z.object({ hello: z.string().optional() })), +}) diff --git a/examples/vue/basic-file-based-sfc/src/routes/__root.component.vue b/examples/vue/basic-file-based-sfc/src/routes/__root.component.vue new file mode 100644 index 00000000000..0752797676e --- /dev/null +++ b/examples/vue/basic-file-based-sfc/src/routes/__root.component.vue @@ -0,0 +1,79 @@ + + + diff --git a/examples/vue/basic-file-based-sfc/src/routes/__root.notFoundComponent.vue b/examples/vue/basic-file-based-sfc/src/routes/__root.notFoundComponent.vue new file mode 100644 index 00000000000..09ed5cf5ffd --- /dev/null +++ b/examples/vue/basic-file-based-sfc/src/routes/__root.notFoundComponent.vue @@ -0,0 +1,10 @@ + + + diff --git a/examples/vue/basic-file-based-sfc/src/routes/__root.ts b/examples/vue/basic-file-based-sfc/src/routes/__root.ts new file mode 100644 index 00000000000..815b2762f6b --- /dev/null +++ b/examples/vue/basic-file-based-sfc/src/routes/__root.ts @@ -0,0 +1,3 @@ +import { createRootRoute } from '@tanstack/vue-router' + +export const Route = createRootRoute() diff --git a/examples/vue/basic-file-based-sfc/src/routes/_layout.component.vue b/examples/vue/basic-file-based-sfc/src/routes/_layout.component.vue new file mode 100644 index 00000000000..68fa9808a53 --- /dev/null +++ b/examples/vue/basic-file-based-sfc/src/routes/_layout.component.vue @@ -0,0 +1,12 @@ + + + diff --git a/examples/vue/basic-file-based-sfc/src/routes/_layout.ts b/examples/vue/basic-file-based-sfc/src/routes/_layout.ts new file mode 100644 index 00000000000..6767e7457a3 --- /dev/null +++ b/examples/vue/basic-file-based-sfc/src/routes/_layout.ts @@ -0,0 +1,5 @@ +import { createFileRoute } from '@tanstack/vue-router' + +export const Route = createFileRoute('/_layout')({ + // component is loaded from _layout.component.vue +}) diff --git a/examples/vue/basic-file-based-sfc/src/routes/_layout/_layout-2.component.vue b/examples/vue/basic-file-based-sfc/src/routes/_layout/_layout-2.component.vue new file mode 100644 index 00000000000..ecf90fb4170 --- /dev/null +++ b/examples/vue/basic-file-based-sfc/src/routes/_layout/_layout-2.component.vue @@ -0,0 +1,26 @@ + + + diff --git a/examples/vue/basic-file-based-sfc/src/routes/_layout/_layout-2.ts b/examples/vue/basic-file-based-sfc/src/routes/_layout/_layout-2.ts new file mode 100644 index 00000000000..a03c32233bc --- /dev/null +++ b/examples/vue/basic-file-based-sfc/src/routes/_layout/_layout-2.ts @@ -0,0 +1,5 @@ +import { createFileRoute } from '@tanstack/vue-router' + +export const Route = createFileRoute('/_layout/_layout-2')({ + // component is loaded from _layout-2.component.vue +}) diff --git a/examples/vue/basic-file-based-sfc/src/routes/_layout/_layout-2/layout-a.component.vue b/examples/vue/basic-file-based-sfc/src/routes/_layout/_layout-2/layout-a.component.vue new file mode 100644 index 00000000000..6fb4e11ae29 --- /dev/null +++ b/examples/vue/basic-file-based-sfc/src/routes/_layout/_layout-2/layout-a.component.vue @@ -0,0 +1,3 @@ + diff --git a/examples/vue/basic-file-based-sfc/src/routes/_layout/_layout-2/layout-a.ts b/examples/vue/basic-file-based-sfc/src/routes/_layout/_layout-2/layout-a.ts new file mode 100644 index 00000000000..098ee2e59ca --- /dev/null +++ b/examples/vue/basic-file-based-sfc/src/routes/_layout/_layout-2/layout-a.ts @@ -0,0 +1,5 @@ +import { createFileRoute } from '@tanstack/vue-router' + +export const Route = createFileRoute('/_layout/_layout-2/layout-a')({ + // component is loaded from layout-a.component.vue +}) diff --git a/examples/vue/basic-file-based-sfc/src/routes/_layout/_layout-2/layout-b.component.vue b/examples/vue/basic-file-based-sfc/src/routes/_layout/_layout-2/layout-b.component.vue new file mode 100644 index 00000000000..51c4ed6f372 --- /dev/null +++ b/examples/vue/basic-file-based-sfc/src/routes/_layout/_layout-2/layout-b.component.vue @@ -0,0 +1,3 @@ + diff --git a/examples/vue/basic-file-based-sfc/src/routes/_layout/_layout-2/layout-b.ts b/examples/vue/basic-file-based-sfc/src/routes/_layout/_layout-2/layout-b.ts new file mode 100644 index 00000000000..10e4c50303e --- /dev/null +++ b/examples/vue/basic-file-based-sfc/src/routes/_layout/_layout-2/layout-b.ts @@ -0,0 +1,5 @@ +import { createFileRoute } from '@tanstack/vue-router' + +export const Route = createFileRoute('/_layout/_layout-2/layout-b')({ + // component is loaded from layout-b.component.vue +}) diff --git a/examples/vue/basic-file-based-sfc/src/routes/editing-a.component.vue b/examples/vue/basic-file-based-sfc/src/routes/editing-a.component.vue new file mode 100644 index 00000000000..1b0e1c4a100 --- /dev/null +++ b/examples/vue/basic-file-based-sfc/src/routes/editing-a.component.vue @@ -0,0 +1,31 @@ + + + diff --git a/examples/vue/basic-file-based-sfc/src/routes/editing-a.ts b/examples/vue/basic-file-based-sfc/src/routes/editing-a.ts new file mode 100644 index 00000000000..ce0b9f8b075 --- /dev/null +++ b/examples/vue/basic-file-based-sfc/src/routes/editing-a.ts @@ -0,0 +1,3 @@ +import { createFileRoute } from '@tanstack/vue-router' + +export const Route = createFileRoute('/editing-a')({}) diff --git a/examples/vue/basic-file-based-sfc/src/routes/editing-b.component.vue b/examples/vue/basic-file-based-sfc/src/routes/editing-b.component.vue new file mode 100644 index 00000000000..6e57e4244ca --- /dev/null +++ b/examples/vue/basic-file-based-sfc/src/routes/editing-b.component.vue @@ -0,0 +1,26 @@ + + + diff --git a/examples/vue/basic-file-based-sfc/src/routes/editing-b.ts b/examples/vue/basic-file-based-sfc/src/routes/editing-b.ts new file mode 100644 index 00000000000..f5158fe02c4 --- /dev/null +++ b/examples/vue/basic-file-based-sfc/src/routes/editing-b.ts @@ -0,0 +1,3 @@ +import { createFileRoute } from '@tanstack/vue-router' + +export const Route = createFileRoute('/editing-b')({}) diff --git a/examples/vue/basic-file-based-sfc/src/routes/index.component.vue b/examples/vue/basic-file-based-sfc/src/routes/index.component.vue new file mode 100644 index 00000000000..ef984ae778e --- /dev/null +++ b/examples/vue/basic-file-based-sfc/src/routes/index.component.vue @@ -0,0 +1,5 @@ + diff --git a/examples/vue/basic-file-based/src/routes/index.tsx b/examples/vue/basic-file-based-sfc/src/routes/index.ts similarity index 52% rename from examples/vue/basic-file-based/src/routes/index.tsx rename to examples/vue/basic-file-based-sfc/src/routes/index.ts index bcce2e9016b..5948d4af8bc 100644 --- a/examples/vue/basic-file-based/src/routes/index.tsx +++ b/examples/vue/basic-file-based-sfc/src/routes/index.ts @@ -1,7 +1,5 @@ -import { h } from 'vue' import { createFileRoute } from '@tanstack/vue-router' -import Home from '../components/Home.vue' export const Route = createFileRoute('/')({ - component: () => h(Home), + // component is loaded from index.component.vue }) diff --git a/examples/vue/basic-file-based-sfc/src/routes/notRemountDeps.component.vue b/examples/vue/basic-file-based-sfc/src/routes/notRemountDeps.component.vue new file mode 100644 index 00000000000..406e602c720 --- /dev/null +++ b/examples/vue/basic-file-based-sfc/src/routes/notRemountDeps.component.vue @@ -0,0 +1,30 @@ + + + diff --git a/examples/vue/basic-file-based-sfc/src/routes/notRemountDeps.ts b/examples/vue/basic-file-based-sfc/src/routes/notRemountDeps.ts new file mode 100644 index 00000000000..1a712cd75ab --- /dev/null +++ b/examples/vue/basic-file-based-sfc/src/routes/notRemountDeps.ts @@ -0,0 +1,13 @@ +import { createFileRoute } from '@tanstack/vue-router' + +export const Route = createFileRoute('/notRemountDeps')({ + validateSearch(search: { searchParam: string }) { + return { searchParam: search.searchParam } + }, + loaderDeps(opts) { + return opts.search + }, + remountDeps(opts) { + return opts.params + }, +}) diff --git a/examples/vue/basic-file-based-sfc/src/routes/posts.$postId.component.vue b/examples/vue/basic-file-based-sfc/src/routes/posts.$postId.component.vue new file mode 100644 index 00000000000..f55b11a9251 --- /dev/null +++ b/examples/vue/basic-file-based-sfc/src/routes/posts.$postId.component.vue @@ -0,0 +1,13 @@ + + + diff --git a/examples/vue/basic-file-based-sfc/src/routes/posts.$postId.errorComponent.vue b/examples/vue/basic-file-based-sfc/src/routes/posts.$postId.errorComponent.vue new file mode 100644 index 00000000000..d02118f6590 --- /dev/null +++ b/examples/vue/basic-file-based-sfc/src/routes/posts.$postId.errorComponent.vue @@ -0,0 +1,10 @@ + + + diff --git a/examples/vue/basic-file-based-sfc/src/routes/posts.$postId.ts b/examples/vue/basic-file-based-sfc/src/routes/posts.$postId.ts new file mode 100644 index 00000000000..3824aa7f43b --- /dev/null +++ b/examples/vue/basic-file-based-sfc/src/routes/posts.$postId.ts @@ -0,0 +1,8 @@ +import { h } from 'vue' +import { createFileRoute } from '@tanstack/vue-router' +import { fetchPost } from '../posts' + +export const Route = createFileRoute('/posts/$postId')({ + loader: async ({ params: { postId } }) => fetchPost(postId), + notFoundComponent: () => h('p', 'Post not found'), +}) diff --git a/examples/vue/basic-file-based-sfc/src/routes/posts.component.vue b/examples/vue/basic-file-based-sfc/src/routes/posts.component.vue new file mode 100644 index 00000000000..180cf75581d --- /dev/null +++ b/examples/vue/basic-file-based-sfc/src/routes/posts.component.vue @@ -0,0 +1,29 @@ + + + diff --git a/examples/vue/basic-file-based-sfc/src/routes/posts.index.component.vue b/examples/vue/basic-file-based-sfc/src/routes/posts.index.component.vue new file mode 100644 index 00000000000..97f094befe2 --- /dev/null +++ b/examples/vue/basic-file-based-sfc/src/routes/posts.index.component.vue @@ -0,0 +1,3 @@ + diff --git a/examples/vue/basic-file-based/src/routes/posts.index.tsx b/examples/vue/basic-file-based-sfc/src/routes/posts.index.ts similarity index 50% rename from examples/vue/basic-file-based/src/routes/posts.index.tsx rename to examples/vue/basic-file-based-sfc/src/routes/posts.index.ts index a48cbbf215d..647568877c5 100644 --- a/examples/vue/basic-file-based/src/routes/posts.index.tsx +++ b/examples/vue/basic-file-based-sfc/src/routes/posts.index.ts @@ -1,9 +1,5 @@ import { createFileRoute } from '@tanstack/vue-router' export const Route = createFileRoute('/posts/')({ - component: PostsIndexComponent, + // component is loaded from posts.index.component.vue }) - -function PostsIndexComponent() { - return
Select a post.
-} diff --git a/examples/vue/basic-file-based-sfc/src/routes/posts.ts b/examples/vue/basic-file-based-sfc/src/routes/posts.ts new file mode 100644 index 00000000000..a216c07cb4f --- /dev/null +++ b/examples/vue/basic-file-based-sfc/src/routes/posts.ts @@ -0,0 +1,13 @@ +import { createFileRoute } from '@tanstack/vue-router' +import { fetchPosts } from '../posts' + +export const Route = createFileRoute('/posts')({ + head: () => ({ + meta: [ + { + title: 'Posts page', + }, + ], + }), + loader: fetchPosts, +}) diff --git a/examples/vue/basic-file-based-sfc/src/routes/posts_.$postId.edit.component.vue b/examples/vue/basic-file-based-sfc/src/routes/posts_.$postId.edit.component.vue new file mode 100644 index 00000000000..a15a8476804 --- /dev/null +++ b/examples/vue/basic-file-based-sfc/src/routes/posts_.$postId.edit.component.vue @@ -0,0 +1,17 @@ + + + diff --git a/examples/vue/basic-file-based-sfc/src/routes/posts_.$postId.edit.ts b/examples/vue/basic-file-based-sfc/src/routes/posts_.$postId.edit.ts new file mode 100644 index 00000000000..b1b1f6029ab --- /dev/null +++ b/examples/vue/basic-file-based-sfc/src/routes/posts_.$postId.edit.ts @@ -0,0 +1,3 @@ +import { createFileRoute } from '@tanstack/vue-router' + +export const Route = createFileRoute('/posts_/$postId/edit')({}) diff --git a/examples/vue/basic-file-based-sfc/src/routes/remountDeps.component.vue b/examples/vue/basic-file-based-sfc/src/routes/remountDeps.component.vue new file mode 100644 index 00000000000..afa920926f7 --- /dev/null +++ b/examples/vue/basic-file-based-sfc/src/routes/remountDeps.component.vue @@ -0,0 +1,36 @@ + + + + + diff --git a/examples/vue/basic-file-based-sfc/src/routes/remountDeps.ts b/examples/vue/basic-file-based-sfc/src/routes/remountDeps.ts new file mode 100644 index 00000000000..46ce88b6c09 --- /dev/null +++ b/examples/vue/basic-file-based-sfc/src/routes/remountDeps.ts @@ -0,0 +1,13 @@ +import { createFileRoute } from '@tanstack/vue-router' + +export const Route = createFileRoute('/remountDeps')({ + validateSearch(search: { searchParam: string }) { + return { searchParam: search.searchParam } + }, + loaderDeps(opts) { + return opts.search + }, + remountDeps(opts) { + return opts.search + }, +}) diff --git "a/examples/vue/basic-file-based-sfc/src/routes/\353\214\200\355\225\234\353\257\274\352\265\255.component.vue" "b/examples/vue/basic-file-based-sfc/src/routes/\353\214\200\355\225\234\353\257\274\352\265\255.component.vue" new file mode 100644 index 00000000000..a520ed3cd71 --- /dev/null +++ "b/examples/vue/basic-file-based-sfc/src/routes/\353\214\200\355\225\234\353\257\274\352\265\255.component.vue" @@ -0,0 +1,11 @@ + + + diff --git "a/examples/vue/basic-file-based-sfc/src/routes/\353\214\200\355\225\234\353\257\274\352\265\255.ts" "b/examples/vue/basic-file-based-sfc/src/routes/\353\214\200\355\225\234\353\257\274\352\265\255.ts" new file mode 100644 index 00000000000..943e319a554 --- /dev/null +++ "b/examples/vue/basic-file-based-sfc/src/routes/\353\214\200\355\225\234\353\257\274\352\265\255.ts" @@ -0,0 +1,3 @@ +import { createFileRoute } from '@tanstack/vue-router' + +export const Route = createFileRoute('/대한민국')({}) diff --git a/examples/vue/basic-file-based-sfc/src/styles.css b/examples/vue/basic-file-based-sfc/src/styles.css new file mode 100644 index 00000000000..237cc5590d1 --- /dev/null +++ b/examples/vue/basic-file-based-sfc/src/styles.css @@ -0,0 +1,24 @@ +@import 'tailwindcss'; + +@source "./**/*.vue"; +@source "./**/*.ts"; + +@layer base { + *, + ::after, + ::before, + ::backdrop, + ::file-selector-button { + border-color: var(--color-gray-200, currentcolor); + } +} + +html { + color-scheme: light dark; +} +* { + @apply border-gray-200 dark:border-gray-800; +} +body { + @apply bg-gray-50 text-gray-950 dark:bg-gray-900 dark:text-gray-200; +} diff --git a/examples/vue/basic-file-based-sfc/src/vue-shims.d.ts b/examples/vue/basic-file-based-sfc/src/vue-shims.d.ts new file mode 100644 index 00000000000..2b97bd961cc --- /dev/null +++ b/examples/vue/basic-file-based-sfc/src/vue-shims.d.ts @@ -0,0 +1,5 @@ +declare module '*.vue' { + import type { DefineComponent } from 'vue' + const component: DefineComponent<{}, {}, any> + export default component +} diff --git a/examples/vue/basic-file-based-sfc/tsconfig.json b/examples/vue/basic-file-based-sfc/tsconfig.json new file mode 100644 index 00000000000..8b743fe0938 --- /dev/null +++ b/examples/vue/basic-file-based-sfc/tsconfig.json @@ -0,0 +1,15 @@ +{ + "compilerOptions": { + "target": "ESNext", + "module": "ESNext", + "lib": ["ESNext", "DOM"], + "strict": true, + "moduleResolution": "bundler", + "skipLibCheck": true, + "noEmit": true, + "resolveJsonModule": true, + "types": ["vite/client"] + }, + "include": ["src", "tests"], + "exclude": ["node_modules", "dist"] +} diff --git a/examples/vue/basic-file-based-sfc/vite.config.ts b/examples/vue/basic-file-based-sfc/vite.config.ts new file mode 100644 index 00000000000..570e6cff2dc --- /dev/null +++ b/examples/vue/basic-file-based-sfc/vite.config.ts @@ -0,0 +1,16 @@ +import { defineConfig } from 'vite' +import vue from '@vitejs/plugin-vue' +import vueJsx from '@vitejs/plugin-vue-jsx' +import { tanstackRouter } from '@tanstack/router-plugin/vite' + +// https://vitejs.dev/config/ +export default defineConfig({ + plugins: [ + tanstackRouter({ + target: 'vue', + autoCodeSplitting: true, + }), + vue(), + vueJsx(), + ], +}) diff --git a/examples/vue/basic-file-based/.gitignore b/examples/vue/basic-file-based/.gitignore deleted file mode 100644 index 8354e4d50d5..00000000000 --- a/examples/vue/basic-file-based/.gitignore +++ /dev/null @@ -1,10 +0,0 @@ -node_modules -.DS_Store -dist -dist-ssr -*.local - -/test-results/ -/playwright-report/ -/blob-report/ -/playwright/.cache/ \ No newline at end of file diff --git a/examples/vue/basic-file-based/README.md b/examples/vue/basic-file-based/README.md deleted file mode 100644 index 115199d292c..00000000000 --- a/examples/vue/basic-file-based/README.md +++ /dev/null @@ -1,6 +0,0 @@ -# Example - -To run this example: - -- `npm install` or `yarn` -- `npm start` or `yarn start` diff --git a/examples/vue/basic-file-based/package.json b/examples/vue/basic-file-based/package.json deleted file mode 100644 index 7ea15dbeea8..00000000000 --- a/examples/vue/basic-file-based/package.json +++ /dev/null @@ -1,34 +0,0 @@ -{ - "name": "tanstack-router-vue-example-basic-file-based", - "private": true, - "type": "module", - "scripts": { - "dev": "vite --port=3000", - "build": "vite build && tsc --noEmit", - "serve": "vite preview", - "start": "vite", - "lint": "eslint . --ext .vue,.js,.jsx,.ts,.tsx", - "lint:fix": "eslint . --ext .vue,.js,.jsx,.ts,.tsx --fix" - }, - "dependencies": { - "@tanstack/vue-router": "workspace:*", - "@tanstack/vue-router-devtools": "workspace:*", - "redaxios": "^0.5.1", - "postcss": "^8.5.1", - "vue": "^3.5.13", - "autoprefixer": "^10.4.20", - "tailwindcss": "^3.4.17" - }, - "devDependencies": { - "typescript": "^5.7.2", - "vite": "^6.1.0", - "@vitejs/plugin-vue": "^5.2.3", - "@vitejs/plugin-vue-jsx": "^4.1.2", - "@eslint/js": "^9.0.0", - "@typescript-eslint/eslint-plugin": "^8.0.0", - "@typescript-eslint/parser": "^8.0.0", - "eslint": "^9.0.0", - "eslint-plugin-vue": "^9.28.0", - "vue-eslint-parser": "^9.4.3" - } -} diff --git a/examples/vue/basic-file-based/postcss.config.mjs b/examples/vue/basic-file-based/postcss.config.mjs deleted file mode 100644 index 2e7af2b7f1a..00000000000 --- a/examples/vue/basic-file-based/postcss.config.mjs +++ /dev/null @@ -1,6 +0,0 @@ -export default { - plugins: { - tailwindcss: {}, - autoprefixer: {}, - }, -} diff --git a/examples/vue/basic-file-based/src/components/Home.vue b/examples/vue/basic-file-based/src/components/Home.vue deleted file mode 100644 index 62281644314..00000000000 --- a/examples/vue/basic-file-based/src/components/Home.vue +++ /dev/null @@ -1,9 +0,0 @@ - - - \ No newline at end of file diff --git a/examples/vue/basic-file-based/src/components/PostsComponent.vue b/examples/vue/basic-file-based/src/components/PostsComponent.vue deleted file mode 100644 index c33f49d0243..00000000000 --- a/examples/vue/basic-file-based/src/components/PostsComponent.vue +++ /dev/null @@ -1,38 +0,0 @@ - - - \ No newline at end of file diff --git a/examples/vue/basic-file-based/src/components/RootComponent.vue b/examples/vue/basic-file-based/src/components/RootComponent.vue deleted file mode 100644 index 74712a3dc09..00000000000 --- a/examples/vue/basic-file-based/src/components/RootComponent.vue +++ /dev/null @@ -1,62 +0,0 @@ - - - \ No newline at end of file diff --git a/examples/vue/basic-file-based/src/routeTree.gen.ts b/examples/vue/basic-file-based/src/routeTree.gen.ts deleted file mode 100644 index 73d4a70e51c..00000000000 --- a/examples/vue/basic-file-based/src/routeTree.gen.ts +++ /dev/null @@ -1,307 +0,0 @@ -/* eslint-disable */ - -// @ts-nocheck - -// noinspection JSUnusedGlobalSymbols - -// This file was automatically generated by TanStack Router. -// You should NOT make any changes in this file as it will be overwritten. -// Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified. - -// Import Routes - -import { Route as rootRoute } from './routes/__root' -import { Route as PostsImport } from './routes/posts' -import { Route as PathlessLayoutImport } from './routes/_pathlessLayout' -import { Route as IndexImport } from './routes/index' -import { Route as PostsIndexImport } from './routes/posts.index' -import { Route as PostsPostIdImport } from './routes/posts.$postId' -import { Route as PathlessLayoutNestedLayoutImport } from './routes/_pathlessLayout/_nested-layout' -import { Route as PathlessLayoutNestedLayoutRouteBImport } from './routes/_pathlessLayout/_nested-layout/route-b' -import { Route as PathlessLayoutNestedLayoutRouteAImport } from './routes/_pathlessLayout/_nested-layout/route-a' - -// Create/Update Routes - -const PostsRoute = PostsImport.update({ - id: '/posts', - path: '/posts', - getParentRoute: () => rootRoute, -} as any) - -const PathlessLayoutRoute = PathlessLayoutImport.update({ - id: '/_pathlessLayout', - getParentRoute: () => rootRoute, -} as any) - -const IndexRoute = IndexImport.update({ - id: '/', - path: '/', - getParentRoute: () => rootRoute, -} as any) - -const PostsIndexRoute = PostsIndexImport.update({ - id: '/', - path: '/', - getParentRoute: () => PostsRoute, -} as any) - -const PostsPostIdRoute = PostsPostIdImport.update({ - id: '/$postId', - path: '/$postId', - getParentRoute: () => PostsRoute, -} as any) - -const PathlessLayoutNestedLayoutRoute = PathlessLayoutNestedLayoutImport.update( - { - id: '/_nested-layout', - getParentRoute: () => PathlessLayoutRoute, - } as any, -) - -const PathlessLayoutNestedLayoutRouteBRoute = - PathlessLayoutNestedLayoutRouteBImport.update({ - id: '/route-b', - path: '/route-b', - getParentRoute: () => PathlessLayoutNestedLayoutRoute, - } as any) - -const PathlessLayoutNestedLayoutRouteARoute = - PathlessLayoutNestedLayoutRouteAImport.update({ - id: '/route-a', - path: '/route-a', - getParentRoute: () => PathlessLayoutNestedLayoutRoute, - } as any) - -// Populate the FileRoutesByPath interface - -declare module '@tanstack/vue-router' { - interface FileRoutesByPath { - '/': { - id: '/' - path: '/' - fullPath: '/' - preLoaderRoute: typeof IndexImport - parentRoute: typeof rootRoute - } - '/_pathlessLayout': { - id: '/_pathlessLayout' - path: '' - fullPath: '' - preLoaderRoute: typeof PathlessLayoutImport - parentRoute: typeof rootRoute - } - '/posts': { - id: '/posts' - path: '/posts' - fullPath: '/posts' - preLoaderRoute: typeof PostsImport - parentRoute: typeof rootRoute - } - '/_pathlessLayout/_nested-layout': { - id: '/_pathlessLayout/_nested-layout' - path: '' - fullPath: '' - preLoaderRoute: typeof PathlessLayoutNestedLayoutImport - parentRoute: typeof PathlessLayoutImport - } - '/posts/$postId': { - id: '/posts/$postId' - path: '/$postId' - fullPath: '/posts/$postId' - preLoaderRoute: typeof PostsPostIdImport - parentRoute: typeof PostsImport - } - '/posts/': { - id: '/posts/' - path: '/' - fullPath: '/posts/' - preLoaderRoute: typeof PostsIndexImport - parentRoute: typeof PostsImport - } - '/_pathlessLayout/_nested-layout/route-a': { - id: '/_pathlessLayout/_nested-layout/route-a' - path: '/route-a' - fullPath: '/route-a' - preLoaderRoute: typeof PathlessLayoutNestedLayoutRouteAImport - parentRoute: typeof PathlessLayoutNestedLayoutImport - } - '/_pathlessLayout/_nested-layout/route-b': { - id: '/_pathlessLayout/_nested-layout/route-b' - path: '/route-b' - fullPath: '/route-b' - preLoaderRoute: typeof PathlessLayoutNestedLayoutRouteBImport - parentRoute: typeof PathlessLayoutNestedLayoutImport - } - } -} - -// Create and export the route tree - -interface PathlessLayoutNestedLayoutRouteChildren { - PathlessLayoutNestedLayoutRouteARoute: typeof PathlessLayoutNestedLayoutRouteARoute - PathlessLayoutNestedLayoutRouteBRoute: typeof PathlessLayoutNestedLayoutRouteBRoute -} - -const PathlessLayoutNestedLayoutRouteChildren: PathlessLayoutNestedLayoutRouteChildren = - { - PathlessLayoutNestedLayoutRouteARoute: - PathlessLayoutNestedLayoutRouteARoute, - PathlessLayoutNestedLayoutRouteBRoute: - PathlessLayoutNestedLayoutRouteBRoute, - } - -const PathlessLayoutNestedLayoutRouteWithChildren = - PathlessLayoutNestedLayoutRoute._addFileChildren( - PathlessLayoutNestedLayoutRouteChildren, - ) - -interface PathlessLayoutRouteChildren { - PathlessLayoutNestedLayoutRoute: typeof PathlessLayoutNestedLayoutRouteWithChildren -} - -const PathlessLayoutRouteChildren: PathlessLayoutRouteChildren = { - PathlessLayoutNestedLayoutRoute: PathlessLayoutNestedLayoutRouteWithChildren, -} - -const PathlessLayoutRouteWithChildren = PathlessLayoutRoute._addFileChildren( - PathlessLayoutRouteChildren, -) - -interface PostsRouteChildren { - PostsPostIdRoute: typeof PostsPostIdRoute - PostsIndexRoute: typeof PostsIndexRoute -} - -const PostsRouteChildren: PostsRouteChildren = { - PostsPostIdRoute: PostsPostIdRoute, - PostsIndexRoute: PostsIndexRoute, -} - -const PostsRouteWithChildren = PostsRoute._addFileChildren(PostsRouteChildren) - -export interface FileRoutesByFullPath { - '/': typeof IndexRoute - '': typeof PathlessLayoutNestedLayoutRouteWithChildren - '/posts': typeof PostsRouteWithChildren - '/posts/$postId': typeof PostsPostIdRoute - '/posts/': typeof PostsIndexRoute - '/route-a': typeof PathlessLayoutNestedLayoutRouteARoute - '/route-b': typeof PathlessLayoutNestedLayoutRouteBRoute -} - -export interface FileRoutesByTo { - '/': typeof IndexRoute - '': typeof PathlessLayoutNestedLayoutRouteWithChildren - '/posts/$postId': typeof PostsPostIdRoute - '/posts': typeof PostsIndexRoute - '/route-a': typeof PathlessLayoutNestedLayoutRouteARoute - '/route-b': typeof PathlessLayoutNestedLayoutRouteBRoute -} - -export interface FileRoutesById { - __root__: typeof rootRoute - '/': typeof IndexRoute - '/_pathlessLayout': typeof PathlessLayoutRouteWithChildren - '/posts': typeof PostsRouteWithChildren - '/_pathlessLayout/_nested-layout': typeof PathlessLayoutNestedLayoutRouteWithChildren - '/posts/$postId': typeof PostsPostIdRoute - '/posts/': typeof PostsIndexRoute - '/_pathlessLayout/_nested-layout/route-a': typeof PathlessLayoutNestedLayoutRouteARoute - '/_pathlessLayout/_nested-layout/route-b': typeof PathlessLayoutNestedLayoutRouteBRoute -} - -export interface FileRouteTypes { - fileRoutesByFullPath: FileRoutesByFullPath - fullPaths: - | '/' - | '' - | '/posts' - | '/posts/$postId' - | '/posts/' - | '/route-a' - | '/route-b' - fileRoutesByTo: FileRoutesByTo - to: '/' | '' | '/posts/$postId' | '/posts' | '/route-a' | '/route-b' - id: - | '__root__' - | '/' - | '/_pathlessLayout' - | '/posts' - | '/_pathlessLayout/_nested-layout' - | '/posts/$postId' - | '/posts/' - | '/_pathlessLayout/_nested-layout/route-a' - | '/_pathlessLayout/_nested-layout/route-b' - fileRoutesById: FileRoutesById -} - -export interface RootRouteChildren { - IndexRoute: typeof IndexRoute - PathlessLayoutRoute: typeof PathlessLayoutRouteWithChildren - PostsRoute: typeof PostsRouteWithChildren -} - -const rootRouteChildren: RootRouteChildren = { - IndexRoute: IndexRoute, - PathlessLayoutRoute: PathlessLayoutRouteWithChildren, - PostsRoute: PostsRouteWithChildren, -} - -export const routeTree = rootRoute - ._addFileChildren(rootRouteChildren) - ._addFileTypes() - -/* ROUTE_MANIFEST_START -{ - "routes": { - "__root__": { - "filePath": "__root.tsx", - "children": [ - "/", - "/_pathlessLayout", - "/posts" - ] - }, - "/": { - "filePath": "index.tsx" - }, - "/_pathlessLayout": { - "filePath": "_pathlessLayout.tsx", - "children": [ - "/_pathlessLayout/_nested-layout" - ] - }, - "/posts": { - "filePath": "posts.tsx", - "children": [ - "/posts/$postId", - "/posts/" - ] - }, - "/_pathlessLayout/_nested-layout": { - "filePath": "_pathlessLayout/_nested-layout.tsx", - "parent": "/_pathlessLayout", - "children": [ - "/_pathlessLayout/_nested-layout/route-a", - "/_pathlessLayout/_nested-layout/route-b" - ] - }, - "/posts/$postId": { - "filePath": "posts.$postId.tsx", - "parent": "/posts" - }, - "/posts/": { - "filePath": "posts.index.tsx", - "parent": "/posts" - }, - "/_pathlessLayout/_nested-layout/route-a": { - "filePath": "_pathlessLayout/_nested-layout/route-a.tsx", - "parent": "/_pathlessLayout/_nested-layout" - }, - "/_pathlessLayout/_nested-layout/route-b": { - "filePath": "_pathlessLayout/_nested-layout/route-b.tsx", - "parent": "/_pathlessLayout/_nested-layout" - } - } -} -ROUTE_MANIFEST_END */ diff --git a/examples/vue/basic-file-based/src/routes/-components/PostErrorComponent.tsx b/examples/vue/basic-file-based/src/routes/-components/PostErrorComponent.tsx deleted file mode 100644 index d5173cf419e..00000000000 --- a/examples/vue/basic-file-based/src/routes/-components/PostErrorComponent.tsx +++ /dev/null @@ -1,6 +0,0 @@ -import { ErrorComponent } from '@tanstack/vue-router' -import type { ErrorComponentProps } from '@tanstack/vue-router' - -export function PostErrorComponent({ error }: ErrorComponentProps) { - return -} diff --git a/examples/vue/basic-file-based/src/routes/__root.tsx b/examples/vue/basic-file-based/src/routes/__root.tsx deleted file mode 100644 index 21d70f5f397..00000000000 --- a/examples/vue/basic-file-based/src/routes/__root.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import { - Link, - createRootRoute, -} from '@tanstack/vue-router' -import { h } from 'vue' -import RootComponentVue from '../components/RootComponent.vue' - -const RootComponent = () => h(RootComponentVue) - -export const Route = createRootRoute({ - component: RootComponent, - notFoundComponent: () => { - return ( -
-

This is the notFoundComponent configured on root route

- Start Over -
- ) - }, -}) diff --git a/examples/vue/basic-file-based/src/routes/_pathlessLayout/_nested-layout.tsx b/examples/vue/basic-file-based/src/routes/_pathlessLayout/_nested-layout.tsx deleted file mode 100644 index 7c127b5fda9..00000000000 --- a/examples/vue/basic-file-based/src/routes/_pathlessLayout/_nested-layout.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import { Link, Outlet, createFileRoute } from '@tanstack/vue-router' - -export const Route = createFileRoute('/_pathlessLayout/_nested-layout')({ - component: LayoutComponent, -}) - -function LayoutComponent() { - return ( -
-
I'm a nested pathless layout
-
- - Go to route A - - - Go to route B - -
-
- -
-
- ) -} diff --git a/examples/vue/basic-file-based/src/routes/_pathlessLayout/_nested-layout/route-a.tsx b/examples/vue/basic-file-based/src/routes/_pathlessLayout/_nested-layout/route-a.tsx deleted file mode 100644 index 46e65c47de4..00000000000 --- a/examples/vue/basic-file-based/src/routes/_pathlessLayout/_nested-layout/route-a.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import { createFileRoute } from '@tanstack/vue-router' - -export const Route = createFileRoute('/_pathlessLayout/_nested-layout/route-a')( - { - component: LayoutAComponent, - }, -) - -function LayoutAComponent() { - return
I'm A!
-} diff --git a/examples/vue/basic-file-based/src/routes/_pathlessLayout/_nested-layout/route-b.tsx b/examples/vue/basic-file-based/src/routes/_pathlessLayout/_nested-layout/route-b.tsx deleted file mode 100644 index d226216dfd1..00000000000 --- a/examples/vue/basic-file-based/src/routes/_pathlessLayout/_nested-layout/route-b.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import { createFileRoute } from '@tanstack/vue-router' - -export const Route = createFileRoute('/_pathlessLayout/_nested-layout/route-b')( - { - component: LayoutBComponent, - }, -) - -function LayoutBComponent() { - return
I'm B!
-} diff --git a/examples/vue/basic-file-based/src/routes/posts.$postId.tsx b/examples/vue/basic-file-based/src/routes/posts.$postId.tsx deleted file mode 100644 index ce497fa3ce8..00000000000 --- a/examples/vue/basic-file-based/src/routes/posts.$postId.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import { createFileRoute } from '@tanstack/vue-router' -import { fetchPost } from '../posts' -import { PostErrorComponent } from './-components/PostErrorComponent' - -export const Route = createFileRoute('/posts/$postId')({ - loader: async ({ params: { postId } }) => fetchPost(postId), - errorComponent: PostErrorComponent, - notFoundComponent: () => { - return

Post not found

- }, - component: PostComponent, -}) - -function PostComponent() { - const post = Route.useLoaderData() - - return ( -
-

{post.value.title}

-
{post.value.body}
-
- ) -} diff --git a/examples/vue/basic-file-based/src/routes/posts.tsx b/examples/vue/basic-file-based/src/routes/posts.tsx deleted file mode 100644 index 4a2df32c9fc..00000000000 --- a/examples/vue/basic-file-based/src/routes/posts.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import { h } from 'vue' -import { createFileRoute } from '@tanstack/vue-router' -import { fetchPosts } from '../posts' -import PostsComponentVue from '../components/PostsComponent.vue' -import type {VNode} from 'vue'; - -export const Route = createFileRoute('/posts')({ - loader: fetchPosts, - component: PostsComponent, -}) - -function PostsComponent(): VNode { - const posts = Route.useLoaderData() - - // Pass the posts data to the Vue component - return h(PostsComponentVue, { posts }) -} diff --git a/examples/vue/basic-file-based/src/styles.css b/examples/vue/basic-file-based/src/styles.css deleted file mode 100644 index 0b8e317099c..00000000000 --- a/examples/vue/basic-file-based/src/styles.css +++ /dev/null @@ -1,13 +0,0 @@ -@tailwind base; -@tailwind components; -@tailwind utilities; - -html { - color-scheme: light dark; -} -* { - @apply border-gray-200 dark:border-gray-800; -} -body { - @apply bg-gray-50 text-gray-950 dark:bg-gray-900 dark:text-gray-200; -} diff --git a/examples/vue/basic-file-based/src/vue-shims.d.ts b/examples/vue/basic-file-based/src/vue-shims.d.ts deleted file mode 100644 index 0da219e7f7a..00000000000 --- a/examples/vue/basic-file-based/src/vue-shims.d.ts +++ /dev/null @@ -1,6 +0,0 @@ -declare module '*.vue' { - import type { DefineComponent } from 'vue' - - const component: DefineComponent, Record, unknown> - export default component -} \ No newline at end of file diff --git a/examples/vue/basic-file-based/tailwind.config.mjs b/examples/vue/basic-file-based/tailwind.config.mjs deleted file mode 100644 index 4986094b9d5..00000000000 --- a/examples/vue/basic-file-based/tailwind.config.mjs +++ /dev/null @@ -1,4 +0,0 @@ -/** @type {import('tailwindcss').Config} */ -export default { - content: ['./src/**/*.{js,jsx,ts,tsx}', './index.html'], -} diff --git a/examples/vue/basic-file-based/tsconfig.dev.json b/examples/vue/basic-file-based/tsconfig.dev.json deleted file mode 100644 index 285a09b0dcf..00000000000 --- a/examples/vue/basic-file-based/tsconfig.dev.json +++ /dev/null @@ -1,10 +0,0 @@ -{ - "composite": true, - "extends": "../../../tsconfig.base.json", - - "files": ["src/main.tsx"], - "include": [ - "src" - // "__tests__/**/*.test.*" - ] -} diff --git a/examples/vue/basic-file-based/tsconfig.json b/examples/vue/basic-file-based/tsconfig.json deleted file mode 100644 index 3245fb7dc6a..00000000000 --- a/examples/vue/basic-file-based/tsconfig.json +++ /dev/null @@ -1,22 +0,0 @@ -{ - "compilerOptions": { - "strict": true, - "esModuleInterop": true, - "jsx": "preserve", - "jsxImportSource": "vue", - "target": "ESNext", - "moduleResolution": "Bundler", - "module": "ESNext", - "lib": ["DOM", "DOM.Iterable", "ES2022"], - "skipLibCheck": true, - "types": ["vite/client"] - }, - "include": [ - "src/**/*.ts", - "src/**/*.tsx", - "src/**/*.vue", - "vite.config.js", - "tailwind.config.mjs", - "postcss.config.mjs" - ] -} diff --git a/examples/vue/basic-file-based/vite.config.js b/examples/vue/basic-file-based/vite.config.js deleted file mode 100644 index 33d651a84c5..00000000000 --- a/examples/vue/basic-file-based/vite.config.js +++ /dev/null @@ -1,8 +0,0 @@ -import { defineConfig } from 'vite' -import vue from '@vitejs/plugin-vue' -import vueJsx from '@vitejs/plugin-vue-jsx' - -// https://vitejs.dev/config/ -export default defineConfig({ - plugins: [vue(), vueJsx()], -}) From 023f05cabbdd1cc1cd6e71f38d88cc6933fb6613 Mon Sep 17 00:00:00 2001 From: Birk Skyum Date: Wed, 3 Dec 2025 03:46:15 +0100 Subject: [PATCH 093/114] add vue logo --- .../src/components/VueLogo.vue | 100 ++++++ .../src/routes/index.component.vue | 9 +- pnpm-lock.yaml | 286 ++++++------------ 3 files changed, 201 insertions(+), 194 deletions(-) create mode 100644 examples/vue/basic-file-based-sfc/src/components/VueLogo.vue diff --git a/examples/vue/basic-file-based-sfc/src/components/VueLogo.vue b/examples/vue/basic-file-based-sfc/src/components/VueLogo.vue new file mode 100644 index 00000000000..5e2286dbc2e --- /dev/null +++ b/examples/vue/basic-file-based-sfc/src/components/VueLogo.vue @@ -0,0 +1,100 @@ + + + + + diff --git a/examples/vue/basic-file-based-sfc/src/routes/index.component.vue b/examples/vue/basic-file-based-sfc/src/routes/index.component.vue index ef984ae778e..8ab765f4805 100644 --- a/examples/vue/basic-file-based-sfc/src/routes/index.component.vue +++ b/examples/vue/basic-file-based-sfc/src/routes/index.component.vue @@ -1,5 +1,10 @@ + + + \ No newline at end of file diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 75d74e68232..4d22d8d9831 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -5220,7 +5220,7 @@ importers: version: 19.2.2(@types/react@19.2.2) '@vitejs/plugin-react': specifier: ^4.3.4 - version: 4.3.4(vite@7.1.7(@types/node@22.10.2)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.37.0)(tsx@4.20.3)(yaml@2.8.1)) + version: 4.3.4(vite@7.1.7(@types/node@22.10.2)(jiti@1.21.7)(lightningcss@1.30.2)(terser@5.37.0)(tsx@4.20.3)(yaml@2.8.1)) autoprefixer: specifier: ^10.4.20 version: 10.4.20(postcss@8.5.3) @@ -5235,10 +5235,10 @@ importers: version: 5.8.2 vite: specifier: ^7.1.7 - version: 7.1.7(@types/node@22.10.2)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.37.0)(tsx@4.20.3)(yaml@2.8.1) + version: 7.1.7(@types/node@22.10.2)(jiti@1.21.7)(lightningcss@1.30.2)(terser@5.37.0)(tsx@4.20.3)(yaml@2.8.1) vite-plugin-dts: specifier: 4.0.3 - version: 4.0.3(@types/node@22.10.2)(rollup@4.52.5)(typescript@5.8.2)(vite@7.1.7(@types/node@22.10.2)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.37.0)(tsx@4.20.3)(yaml@2.8.1)) + version: 4.0.3(@types/node@22.10.2)(rollup@4.52.5)(typescript@5.8.2)(vite@7.1.7(@types/node@22.10.2)(jiti@1.21.7)(lightningcss@1.30.2)(terser@5.37.0)(tsx@4.20.3)(yaml@2.8.1)) examples/react/router-monorepo-react-query/packages/post-feature: dependencies: @@ -6267,7 +6267,7 @@ importers: version: 7.1.7(@types/node@22.10.2)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.37.0)(tsx@4.20.3)(yaml@2.8.1) vitest: specifier: ^3.2.4 - version: 3.2.4(@types/node@22.10.2)(@vitest/browser@3.0.6(@types/node@22.10.2)(playwright@1.56.1)(typescript@5.9.2)(vite@7.1.7(@types/node@22.10.2)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.37.0)(tsx@4.20.3)(yaml@2.8.1))(vitest@3.2.4))(@vitest/ui@3.0.6(vitest@3.2.4))(jiti@2.6.1)(jsdom@27.0.0(postcss@8.5.6))(lightningcss@1.30.2)(msw@2.7.0(@types/node@22.10.2)(typescript@5.9.2))(terser@5.37.0)(tsx@4.20.3)(yaml@2.8.1) + version: 3.2.4(@types/node@22.10.2)(@vitest/browser@3.0.6)(@vitest/ui@3.0.6)(jiti@2.6.1)(jsdom@27.0.0(postcss@8.5.6))(lightningcss@1.30.2)(msw@2.7.0(@types/node@22.10.2)(typescript@5.9.2))(terser@5.37.0)(tsx@4.20.3)(yaml@2.8.1) web-vitals: specifier: ^5.1.0 version: 5.1.0 @@ -8912,7 +8912,7 @@ importers: version: 2.11.10(@testing-library/jest-dom@6.6.3)(solid-js@1.9.10)(vite@7.1.7(@types/node@22.10.2)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.37.0)(tsx@4.20.3)(yaml@2.8.1)) vitest: specifier: ^3.2.4 - version: 3.2.4(@types/node@22.10.2)(@vitest/browser@3.0.6(@types/node@22.10.2)(playwright@1.56.1)(typescript@5.9.2)(vite@7.1.7(@types/node@22.10.2)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.37.0)(tsx@4.20.3)(yaml@2.8.1))(vitest@3.2.4))(@vitest/ui@3.0.6(vitest@3.2.4))(jiti@2.6.1)(jsdom@27.0.0(postcss@8.5.6))(lightningcss@1.30.2)(msw@2.7.0(@types/node@22.10.2)(typescript@5.9.2))(terser@5.37.0)(tsx@4.20.3)(yaml@2.8.1) + version: 3.2.4(@types/node@22.10.2)(@vitest/browser@3.0.6)(@vitest/ui@3.0.6)(jiti@2.6.1)(jsdom@27.0.0(postcss@8.5.6))(lightningcss@1.30.2)(msw@2.7.0(@types/node@22.10.2)(typescript@5.9.2))(terser@5.37.0)(tsx@4.20.3)(yaml@2.8.1) web-vitals: specifier: ^5.1.0 version: 5.1.0 @@ -9377,17 +9377,23 @@ importers: specifier: ^2.11.10 version: 2.11.10(@testing-library/jest-dom@6.6.3)(solid-js@1.9.10)(vite@7.1.7(@types/node@22.10.2)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.37.0)(tsx@4.20.3)(yaml@2.8.1)) - examples/vue/basic-file-based: + examples/vue/basic-file-based-jsx: dependencies: + '@tailwindcss/postcss': + specifier: ^4.1.15 + version: 4.1.15 + '@tanstack/router-plugin': + specifier: workspace:* + version: link:../../../packages/router-plugin '@tanstack/vue-router': specifier: workspace:* version: link:../../../packages/vue-router '@tanstack/vue-router-devtools': specifier: workspace:* version: link:../../../packages/vue-router-devtools - autoprefixer: - specifier: ^10.4.20 - version: 10.4.20(postcss@8.5.6) + '@tanstack/zod-adapter': + specifier: workspace:* + version: link:../../../packages/zod-adapter postcss: specifier: ^8.5.1 version: 8.5.6 @@ -9395,54 +9401,63 @@ importers: specifier: ^0.5.1 version: 0.5.1 tailwindcss: - specifier: ^3.4.17 - version: 3.4.18(tsx@4.20.3)(yaml@2.8.1) + specifier: ^4.1.15 + version: 4.1.17 vue: - specifier: ^3.5.13 - version: 3.5.25(typescript@5.9.2) + specifier: ^3.5.16 + version: 3.5.25(typescript@5.8.3) + zod: + specifier: ^3.24.2 + version: 3.25.57 devDependencies: '@eslint/js': - specifier: ^9.0.0 + specifier: ^9.36.0 version: 9.36.0 '@typescript-eslint/eslint-plugin': - specifier: ^8.0.0 - version: 8.44.1(@typescript-eslint/parser@8.44.1(eslint@9.22.0(jiti@1.21.7))(typescript@5.9.2))(eslint@9.22.0(jiti@1.21.7))(typescript@5.9.2) + specifier: ^8.44.1 + version: 8.44.1(@typescript-eslint/parser@8.44.1(eslint@9.22.0(jiti@2.6.1))(typescript@5.8.3))(eslint@9.22.0(jiti@2.6.1))(typescript@5.8.3) '@typescript-eslint/parser': - specifier: ^8.0.0 - version: 8.44.1(eslint@9.22.0(jiti@1.21.7))(typescript@5.9.2) + specifier: ^8.44.1 + version: 8.44.1(eslint@9.22.0(jiti@2.6.1))(typescript@5.8.3) '@vitejs/plugin-vue': specifier: ^5.2.3 - version: 5.2.4(vite@7.1.7(@types/node@22.10.2)(jiti@1.21.7)(lightningcss@1.30.2)(terser@5.37.0)(tsx@4.20.3)(yaml@2.8.1))(vue@3.5.25(typescript@5.9.2)) + version: 5.2.4(vite@7.1.7(@types/node@22.10.2)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.37.0)(tsx@4.20.3)(yaml@2.8.1))(vue@3.5.25(typescript@5.8.3)) '@vitejs/plugin-vue-jsx': specifier: ^4.1.2 - version: 4.2.0(vite@7.1.7(@types/node@22.10.2)(jiti@1.21.7)(lightningcss@1.30.2)(terser@5.37.0)(tsx@4.20.3)(yaml@2.8.1))(vue@3.5.25(typescript@5.9.2)) - eslint: - specifier: ^9.22.0 - version: 9.22.0(jiti@1.21.7) + version: 4.2.0(vite@7.1.7(@types/node@22.10.2)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.37.0)(tsx@4.20.3)(yaml@2.8.1))(vue@3.5.25(typescript@5.8.3)) eslint-plugin-vue: - specifier: ^9.28.0 - version: 9.33.0(eslint@9.22.0(jiti@1.21.7)) + specifier: ^9.33.0 + version: 9.33.0(eslint@9.22.0(jiti@2.6.1)) typescript: - specifier: ^5.7.2 - version: 5.9.2 + specifier: ~5.8.3 + version: 5.8.3 vite: specifier: ^7.1.7 - version: 7.1.7(@types/node@22.10.2)(jiti@1.21.7)(lightningcss@1.30.2)(terser@5.37.0)(tsx@4.20.3)(yaml@2.8.1) + version: 7.1.7(@types/node@22.10.2)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.37.0)(tsx@4.20.3)(yaml@2.8.1) vue-eslint-parser: specifier: ^9.4.3 - version: 9.4.3(eslint@9.22.0(jiti@1.21.7)) + version: 9.4.3(eslint@9.22.0(jiti@2.6.1)) + vue-tsc: + specifier: ^3.1.5 + version: 3.1.5(typescript@5.8.3) - examples/vue/basic-file-based-jsx: + examples/vue/basic-file-based-sfc: dependencies: + '@tailwindcss/postcss': + specifier: ^4.1.15 + version: 4.1.15 + '@tanstack/router-plugin': + specifier: workspace:* + version: link:../../../packages/router-plugin '@tanstack/vue-router': specifier: workspace:* version: link:../../../packages/vue-router '@tanstack/vue-router-devtools': specifier: workspace:* version: link:../../../packages/vue-router-devtools - autoprefixer: - specifier: ^10.4.20 - version: 10.4.20(postcss@8.5.6) + '@tanstack/zod-adapter': + specifier: workspace:* + version: link:../../../packages/zod-adapter postcss: specifier: ^8.5.1 version: 8.5.6 @@ -9450,21 +9465,24 @@ importers: specifier: ^0.5.1 version: 0.5.1 tailwindcss: - specifier: ^3.4.17 - version: 3.4.18(tsx@4.20.3)(yaml@2.8.1) + specifier: ^4.1.15 + version: 4.1.17 vue: - specifier: ^3.5.13 - version: 3.5.25(typescript@5.9.2) + specifier: ^3.5.16 + version: 3.5.25(typescript@5.8.3) + zod: + specifier: ^3.24.2 + version: 3.25.57 devDependencies: '@vitejs/plugin-vue': specifier: ^5.2.3 - version: 5.2.4(vite@7.1.7(@types/node@22.10.2)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.37.0)(tsx@4.20.3)(yaml@2.8.1))(vue@3.5.25(typescript@5.9.2)) + version: 5.2.4(vite@7.1.7(@types/node@22.10.2)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.37.0)(tsx@4.20.3)(yaml@2.8.1))(vue@3.5.25(typescript@5.8.3)) '@vitejs/plugin-vue-jsx': specifier: ^4.1.2 - version: 4.2.0(vite@7.1.7(@types/node@22.10.2)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.37.0)(tsx@4.20.3)(yaml@2.8.1))(vue@3.5.25(typescript@5.9.2)) + version: 4.2.0(vite@7.1.7(@types/node@22.10.2)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.37.0)(tsx@4.20.3)(yaml@2.8.1))(vue@3.5.25(typescript@5.8.3)) typescript: - specifier: ^5.7.2 - version: 5.9.2 + specifier: ~5.8.3 + version: 5.8.3 vite: specifier: ^7.1.7 version: 7.1.7(@types/node@22.10.2)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.37.0)(tsx@4.20.3)(yaml@2.8.1) @@ -23619,21 +23637,11 @@ snapshots: '@esbuild/win32-x64@0.25.4': optional: true - '@eslint-community/eslint-utils@4.4.1(eslint@9.22.0(jiti@1.21.7))': - dependencies: - eslint: 9.22.0(jiti@1.21.7) - eslint-visitor-keys: 3.4.3 - '@eslint-community/eslint-utils@4.4.1(eslint@9.22.0(jiti@2.6.1))': dependencies: eslint: 9.22.0(jiti@2.6.1) eslint-visitor-keys: 3.4.3 - '@eslint-community/eslint-utils@4.9.0(eslint@9.22.0(jiti@1.21.7))': - dependencies: - eslint: 9.22.0(jiti@1.21.7) - eslint-visitor-keys: 3.4.3 - '@eslint-community/eslint-utils@4.9.0(eslint@9.22.0(jiti@2.6.1))': dependencies: eslint: 9.22.0(jiti@2.6.1) @@ -27938,23 +27946,6 @@ snapshots: '@types/node': 22.10.2 optional: true - '@typescript-eslint/eslint-plugin@8.44.1(@typescript-eslint/parser@8.44.1(eslint@9.22.0(jiti@1.21.7))(typescript@5.9.2))(eslint@9.22.0(jiti@1.21.7))(typescript@5.9.2)': - dependencies: - '@eslint-community/regexpp': 4.12.1 - '@typescript-eslint/parser': 8.44.1(eslint@9.22.0(jiti@1.21.7))(typescript@5.9.2) - '@typescript-eslint/scope-manager': 8.44.1 - '@typescript-eslint/type-utils': 8.44.1(eslint@9.22.0(jiti@1.21.7))(typescript@5.9.2) - '@typescript-eslint/utils': 8.44.1(eslint@9.22.0(jiti@1.21.7))(typescript@5.9.2) - '@typescript-eslint/visitor-keys': 8.44.1 - eslint: 9.22.0(jiti@1.21.7) - graphemer: 1.4.0 - ignore: 7.0.5 - natural-compare: 1.4.0 - ts-api-utils: 2.1.0(typescript@5.9.2) - typescript: 5.9.2 - transitivePeerDependencies: - - supports-color - '@typescript-eslint/eslint-plugin@8.44.1(@typescript-eslint/parser@8.44.1(eslint@9.22.0(jiti@2.6.1))(typescript@5.8.3))(eslint@9.22.0(jiti@2.6.1))(typescript@5.8.3)': dependencies: '@eslint-community/regexpp': 4.12.1 @@ -27989,18 +27980,6 @@ snapshots: transitivePeerDependencies: - supports-color - '@typescript-eslint/parser@8.44.1(eslint@9.22.0(jiti@1.21.7))(typescript@5.9.2)': - dependencies: - '@typescript-eslint/scope-manager': 8.44.1 - '@typescript-eslint/types': 8.44.1 - '@typescript-eslint/typescript-estree': 8.44.1(typescript@5.9.2) - '@typescript-eslint/visitor-keys': 8.44.1 - debug: 4.4.3 - eslint: 9.22.0(jiti@1.21.7) - typescript: 5.9.2 - transitivePeerDependencies: - - supports-color - '@typescript-eslint/parser@8.44.1(eslint@9.22.0(jiti@2.6.1))(typescript@5.8.3)': dependencies: '@typescript-eslint/scope-manager': 8.44.1 @@ -28085,18 +28064,6 @@ snapshots: transitivePeerDependencies: - supports-color - '@typescript-eslint/type-utils@8.44.1(eslint@9.22.0(jiti@1.21.7))(typescript@5.9.2)': - dependencies: - '@typescript-eslint/types': 8.44.1 - '@typescript-eslint/typescript-estree': 8.44.1(typescript@5.9.2) - '@typescript-eslint/utils': 8.44.1(eslint@9.22.0(jiti@1.21.7))(typescript@5.9.2) - debug: 4.4.3 - eslint: 9.22.0(jiti@1.21.7) - ts-api-utils: 2.1.0(typescript@5.9.2) - typescript: 5.9.2 - transitivePeerDependencies: - - supports-color - '@typescript-eslint/type-utils@8.44.1(eslint@9.22.0(jiti@2.6.1))(typescript@5.8.3)': dependencies: '@typescript-eslint/types': 8.44.1 @@ -28182,17 +28149,6 @@ snapshots: transitivePeerDependencies: - supports-color - '@typescript-eslint/utils@8.44.1(eslint@9.22.0(jiti@1.21.7))(typescript@5.9.2)': - dependencies: - '@eslint-community/eslint-utils': 4.9.0(eslint@9.22.0(jiti@1.21.7)) - '@typescript-eslint/scope-manager': 8.44.1 - '@typescript-eslint/types': 8.44.1 - '@typescript-eslint/typescript-estree': 8.44.1(typescript@5.9.2) - eslint: 9.22.0(jiti@1.21.7) - typescript: 5.9.2 - transitivePeerDependencies: - - supports-color - '@typescript-eslint/utils@8.44.1(eslint@9.22.0(jiti@2.6.1))(typescript@5.8.3)': dependencies: '@eslint-community/eslint-utils': 4.9.0(eslint@9.22.0(jiti@2.6.1)) @@ -28322,6 +28278,17 @@ snapshots: - rollup - supports-color + '@vitejs/plugin-react@4.3.4(vite@7.1.7(@types/node@22.10.2)(jiti@1.21.7)(lightningcss@1.30.2)(terser@5.37.0)(tsx@4.20.3)(yaml@2.8.1))': + dependencies: + '@babel/core': 7.28.5 + '@babel/plugin-transform-react-jsx-self': 7.25.9(@babel/core@7.28.5) + '@babel/plugin-transform-react-jsx-source': 7.25.9(@babel/core@7.28.5) + '@types/babel__core': 7.20.5 + react-refresh: 0.14.2 + vite: 7.1.7(@types/node@22.10.2)(jiti@1.21.7)(lightningcss@1.30.2)(terser@5.37.0)(tsx@4.20.3)(yaml@2.8.1) + transitivePeerDependencies: + - supports-color + '@vitejs/plugin-react@4.3.4(vite@7.1.7(@types/node@22.10.2)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.37.0)(tsx@4.20.3)(yaml@2.8.1))': dependencies: '@babel/core': 7.28.5 @@ -28381,17 +28348,6 @@ snapshots: transitivePeerDependencies: - supports-color - '@vitejs/plugin-vue-jsx@4.2.0(vite@7.1.7(@types/node@22.10.2)(jiti@1.21.7)(lightningcss@1.30.2)(terser@5.37.0)(tsx@4.20.3)(yaml@2.8.1))(vue@3.5.25(typescript@5.9.2))': - dependencies: - '@babel/core': 7.28.5 - '@babel/plugin-transform-typescript': 7.28.5(@babel/core@7.28.5) - '@rolldown/pluginutils': 1.0.0-beta.40 - '@vue/babel-plugin-jsx': 1.5.0(@babel/core@7.28.5) - vite: 7.1.7(@types/node@22.10.2)(jiti@1.21.7)(lightningcss@1.30.2)(terser@5.37.0)(tsx@4.20.3)(yaml@2.8.1) - vue: 3.5.25(typescript@5.9.2) - transitivePeerDependencies: - - supports-color - '@vitejs/plugin-vue-jsx@4.2.0(vite@7.1.7(@types/node@22.10.2)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.37.0)(tsx@4.20.3)(yaml@2.8.1))(vue@3.5.25(typescript@5.8.3))': dependencies: '@babel/core': 7.28.5 @@ -28414,11 +28370,6 @@ snapshots: transitivePeerDependencies: - supports-color - '@vitejs/plugin-vue@5.2.4(vite@7.1.7(@types/node@22.10.2)(jiti@1.21.7)(lightningcss@1.30.2)(terser@5.37.0)(tsx@4.20.3)(yaml@2.8.1))(vue@3.5.25(typescript@5.9.2))': - dependencies: - vite: 7.1.7(@types/node@22.10.2)(jiti@1.21.7)(lightningcss@1.30.2)(terser@5.37.0)(tsx@4.20.3)(yaml@2.8.1) - vue: 3.5.25(typescript@5.9.2) - '@vitejs/plugin-vue@5.2.4(vite@7.1.7(@types/node@22.10.2)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.37.0)(tsx@4.20.3)(yaml@2.8.1))(vue@3.5.25(typescript@5.8.3))': dependencies: vite: 7.1.7(@types/node@22.10.2)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.37.0)(tsx@4.20.3)(yaml@2.8.1) @@ -30613,20 +30564,6 @@ snapshots: optionalDependencies: '@typescript-eslint/eslint-plugin': 8.44.1(@typescript-eslint/parser@8.44.1(eslint@9.22.0(jiti@2.6.1))(typescript@5.9.2))(eslint@9.22.0(jiti@2.6.1))(typescript@5.9.2) - eslint-plugin-vue@9.33.0(eslint@9.22.0(jiti@1.21.7)): - dependencies: - '@eslint-community/eslint-utils': 4.9.0(eslint@9.22.0(jiti@1.21.7)) - eslint: 9.22.0(jiti@1.21.7) - globals: 13.24.0 - natural-compare: 1.4.0 - nth-check: 2.1.1 - postcss-selector-parser: 6.1.2 - semver: 7.7.3 - vue-eslint-parser: 9.4.3(eslint@9.22.0(jiti@1.21.7)) - xml-name-validator: 4.0.0 - transitivePeerDependencies: - - supports-color - eslint-plugin-vue@9.33.0(eslint@9.22.0(jiti@2.6.1)): dependencies: '@eslint-community/eslint-utils': 4.9.0(eslint@9.22.0(jiti@2.6.1)) @@ -30662,48 +30599,6 @@ snapshots: eslint-visitor-keys@4.2.1: {} - eslint@9.22.0(jiti@1.21.7): - dependencies: - '@eslint-community/eslint-utils': 4.4.1(eslint@9.22.0(jiti@1.21.7)) - '@eslint-community/regexpp': 4.12.1 - '@eslint/config-array': 0.19.2 - '@eslint/config-helpers': 0.1.0 - '@eslint/core': 0.12.0 - '@eslint/eslintrc': 3.3.0 - '@eslint/js': 9.22.0 - '@eslint/plugin-kit': 0.2.7 - '@humanfs/node': 0.16.6 - '@humanwhocodes/module-importer': 1.0.1 - '@humanwhocodes/retry': 0.4.2 - '@types/estree': 1.0.7 - '@types/json-schema': 7.0.15 - ajv: 6.12.6 - chalk: 4.1.2 - cross-spawn: 7.0.6 - debug: 4.4.0 - escape-string-regexp: 4.0.0 - eslint-scope: 8.3.0 - eslint-visitor-keys: 4.2.0 - espree: 10.3.0 - esquery: 1.6.0 - esutils: 2.0.3 - fast-deep-equal: 3.1.3 - file-entry-cache: 8.0.0 - find-up: 5.0.0 - glob-parent: 6.0.2 - ignore: 5.3.2 - imurmurhash: 0.1.4 - is-glob: 4.0.3 - json-stable-stringify-without-jsonify: 1.0.1 - lodash.merge: 4.6.2 - minimatch: 3.1.2 - natural-compare: 1.4.0 - optionator: 0.9.4 - optionalDependencies: - jiti: 1.21.7 - transitivePeerDependencies: - - supports-color - eslint@9.22.0(jiti@2.6.1): dependencies: '@eslint-community/eslint-utils': 4.4.1(eslint@9.22.0(jiti@2.6.1)) @@ -35145,6 +35040,26 @@ snapshots: - tsx - yaml + vite-plugin-dts@4.0.3(@types/node@22.10.2)(rollup@4.52.5)(typescript@5.8.2)(vite@7.1.7(@types/node@22.10.2)(jiti@1.21.7)(lightningcss@1.30.2)(terser@5.37.0)(tsx@4.20.3)(yaml@2.8.1)): + dependencies: + '@microsoft/api-extractor': 7.47.4(@types/node@22.10.2) + '@rollup/pluginutils': 5.1.4(rollup@4.52.5) + '@volar/typescript': 2.4.11 + '@vue/language-core': 2.0.29(typescript@5.8.2) + compare-versions: 6.1.1 + debug: 4.4.3 + kolorist: 1.8.0 + local-pkg: 0.5.1 + magic-string: 0.30.19 + typescript: 5.8.2 + vue-tsc: 2.0.29(typescript@5.8.2) + optionalDependencies: + vite: 7.1.7(@types/node@22.10.2)(jiti@1.21.7)(lightningcss@1.30.2)(terser@5.37.0)(tsx@4.20.3)(yaml@2.8.1) + transitivePeerDependencies: + - '@types/node' + - rollup + - supports-color + vite-plugin-dts@4.0.3(@types/node@22.10.2)(rollup@4.52.5)(typescript@5.8.2)(vite@7.1.7(@types/node@22.10.2)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.37.0)(tsx@4.20.3)(yaml@2.8.1)): dependencies: '@microsoft/api-extractor': 7.47.4(@types/node@22.10.2) @@ -35275,7 +35190,7 @@ snapshots: optionalDependencies: vite: 7.1.7(@types/node@22.10.2)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.37.0)(tsx@4.20.3)(yaml@2.8.1) - vitest@3.2.4(@types/node@22.10.2)(@vitest/browser@3.0.6(@types/node@22.10.2)(playwright@1.56.1)(typescript@5.9.2)(vite@7.1.7(@types/node@22.10.2)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.37.0)(tsx@4.20.3)(yaml@2.8.1))(vitest@3.2.4))(@vitest/ui@3.0.6(vitest@3.2.4))(jiti@2.6.1)(jsdom@27.0.0(postcss@8.5.6))(lightningcss@1.30.2)(msw@2.7.0(@types/node@22.10.2)(typescript@5.9.2))(terser@5.37.0)(tsx@4.20.3)(yaml@2.8.1): + vitest@3.2.4(@types/node@22.10.2)(@vitest/browser@3.0.6)(@vitest/ui@3.0.6)(jiti@2.6.1)(jsdom@25.0.1)(lightningcss@1.30.2)(msw@2.7.0(@types/node@22.10.2)(typescript@5.9.2))(terser@5.37.0)(tsx@4.20.3)(yaml@2.8.1): dependencies: '@types/chai': 5.2.2 '@vitest/expect': 3.2.4 @@ -35304,7 +35219,7 @@ snapshots: '@types/node': 22.10.2 '@vitest/browser': 3.0.6(@types/node@22.10.2)(playwright@1.56.1)(typescript@5.9.2)(vite@7.1.7(@types/node@22.10.2)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.37.0)(tsx@4.20.3)(yaml@2.8.1))(vitest@3.2.4) '@vitest/ui': 3.0.6(vitest@3.2.4) - jsdom: 27.0.0(postcss@8.5.6) + jsdom: 25.0.1 transitivePeerDependencies: - jiti - less @@ -35319,7 +35234,7 @@ snapshots: - tsx - yaml - vitest@3.2.4(@types/node@22.10.2)(@vitest/browser@3.0.6)(@vitest/ui@3.0.6)(jiti@2.6.1)(jsdom@25.0.1)(lightningcss@1.30.2)(msw@2.7.0(@types/node@22.10.2)(typescript@5.9.2))(terser@5.37.0)(tsx@4.20.3)(yaml@2.8.1): + vitest@3.2.4(@types/node@22.10.2)(@vitest/browser@3.0.6)(@vitest/ui@3.0.6)(jiti@2.6.1)(jsdom@27.0.0(postcss@8.5.6))(lightningcss@1.30.2)(msw@2.7.0(@types/node@22.10.2)(typescript@5.9.2))(terser@5.37.0)(tsx@4.20.3)(yaml@2.8.1): dependencies: '@types/chai': 5.2.2 '@vitest/expect': 3.2.4 @@ -35348,7 +35263,7 @@ snapshots: '@types/node': 22.10.2 '@vitest/browser': 3.0.6(@types/node@22.10.2)(playwright@1.56.1)(typescript@5.9.2)(vite@7.1.7(@types/node@22.10.2)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.37.0)(tsx@4.20.3)(yaml@2.8.1))(vitest@3.2.4) '@vitest/ui': 3.0.6(vitest@3.2.4) - jsdom: 25.0.1 + jsdom: 27.0.0(postcss@8.5.6) transitivePeerDependencies: - jiti - less @@ -35383,19 +35298,6 @@ snapshots: transitivePeerDependencies: - supports-color - vue-eslint-parser@9.4.3(eslint@9.22.0(jiti@1.21.7)): - dependencies: - debug: 4.4.3 - eslint: 9.22.0(jiti@1.21.7) - eslint-scope: 7.2.2 - eslint-visitor-keys: 3.4.3 - espree: 9.6.1 - esquery: 1.6.0 - lodash: 4.17.21 - semver: 7.7.3 - transitivePeerDependencies: - - supports-color - vue-eslint-parser@9.4.3(eslint@9.22.0(jiti@2.6.1)): dependencies: debug: 4.4.3 From 4ad1d6b766cc955591a77d50d7c6441bdeee2069 Mon Sep 17 00:00:00 2001 From: Birk Skyum Date: Wed, 3 Dec 2025 03:47:07 +0100 Subject: [PATCH 094/114] add eslint file --- .../basic-file-based-sfc/eslint.config.js | 49 +++++++++++++++++++ .../vue/basic-file-based-sfc/eslint.config.js | 49 +++++++++++++++++++ 2 files changed, 98 insertions(+) create mode 100644 e2e/vue-router/basic-file-based-sfc/eslint.config.js create mode 100644 examples/vue/basic-file-based-sfc/eslint.config.js diff --git a/e2e/vue-router/basic-file-based-sfc/eslint.config.js b/e2e/vue-router/basic-file-based-sfc/eslint.config.js new file mode 100644 index 00000000000..4e8d00f1d89 --- /dev/null +++ b/e2e/vue-router/basic-file-based-sfc/eslint.config.js @@ -0,0 +1,49 @@ +import js from '@eslint/js' +import typescript from '@typescript-eslint/eslint-plugin' +import typescriptParser from '@typescript-eslint/parser' +import vue from 'eslint-plugin-vue' +import vueParser from 'vue-eslint-parser' + +export default [ + js.configs.recommended, + ...vue.configs['flat/recommended'], + { + files: ['**/*.{js,jsx,ts,tsx,vue}'], + languageOptions: { + parser: vueParser, + parserOptions: { + parser: typescriptParser, + ecmaVersion: 'latest', + sourceType: 'module', + ecmaFeatures: { + jsx: true, + }, + }, + }, + plugins: { + '@typescript-eslint': typescript, + vue, + }, + rules: { + // Vue specific rules + 'vue/multi-word-component-names': 'off', + 'vue/no-unused-vars': 'error', + + // TypeScript rules + '@typescript-eslint/no-unused-vars': 'error', + '@typescript-eslint/no-explicit-any': 'warn', + + // General rules + 'no-unused-vars': 'off', // Let TypeScript handle this + }, + }, + { + files: ['**/*.vue'], + languageOptions: { + parser: vueParser, + parserOptions: { + parser: typescriptParser, + }, + }, + }, +] diff --git a/examples/vue/basic-file-based-sfc/eslint.config.js b/examples/vue/basic-file-based-sfc/eslint.config.js new file mode 100644 index 00000000000..4e8d00f1d89 --- /dev/null +++ b/examples/vue/basic-file-based-sfc/eslint.config.js @@ -0,0 +1,49 @@ +import js from '@eslint/js' +import typescript from '@typescript-eslint/eslint-plugin' +import typescriptParser from '@typescript-eslint/parser' +import vue from 'eslint-plugin-vue' +import vueParser from 'vue-eslint-parser' + +export default [ + js.configs.recommended, + ...vue.configs['flat/recommended'], + { + files: ['**/*.{js,jsx,ts,tsx,vue}'], + languageOptions: { + parser: vueParser, + parserOptions: { + parser: typescriptParser, + ecmaVersion: 'latest', + sourceType: 'module', + ecmaFeatures: { + jsx: true, + }, + }, + }, + plugins: { + '@typescript-eslint': typescript, + vue, + }, + rules: { + // Vue specific rules + 'vue/multi-word-component-names': 'off', + 'vue/no-unused-vars': 'error', + + // TypeScript rules + '@typescript-eslint/no-unused-vars': 'error', + '@typescript-eslint/no-explicit-any': 'warn', + + // General rules + 'no-unused-vars': 'off', // Let TypeScript handle this + }, + }, + { + files: ['**/*.vue'], + languageOptions: { + parser: vueParser, + parserOptions: { + parser: typescriptParser, + }, + }, + }, +] From 467f678f06dad252c77de261a9af9834effd3daf Mon Sep 17 00:00:00 2001 From: Birk Skyum Date: Wed, 3 Dec 2025 03:53:03 +0100 Subject: [PATCH 095/114] adjust examples --- .../src/components/EditingAComponent.tsx | 39 +++++++ .../src/components/EditingBComponent.tsx | 32 ++++++ .../src/components/NotFoundComponent.vue | 10 ++ .../components/NotRemountDepsComponent.tsx | 33 ++++++ .../src/components/PostErrorComponent.vue | 10 ++ .../src/components/RemountDepsComponent.tsx | 34 ++++++ .../src/components/VueLogo.vue | 100 ++++++++++++++++++ .../src/routes/index.component.vue | 9 +- .../basic-file-based-sfc/tsconfig.json | 2 + .../vue/basic-file-based-jsx/tsconfig.json | 2 +- .../vue/basic-file-based-sfc/tsconfig.json | 4 +- examples/vue/{basic-jsx => basic}/.gitignore | 0 examples/vue/{basic-jsx => basic}/README.md | 0 examples/vue/basic/eslint.config.js | 49 +++++++++ examples/vue/{basic-jsx => basic}/index.html | 0 .../vue/{basic-jsx => basic}/package.json | 0 .../{basic-jsx => basic}/postcss.config.mjs | 0 .../src/components/EditingAComponent.tsx | 39 +++++++ .../src/components/EditingBComponent.tsx | 32 ++++++ .../src/components/NotFoundComponent.vue | 10 ++ .../components/NotRemountDepsComponent.tsx | 33 ++++++ .../src/components/PostErrorComponent.vue | 10 ++ .../src/components/RemountDepsComponent.tsx | 34 ++++++ examples/vue/basic/src/components/VueLogo.vue | 100 ++++++++++++++++++ .../vue/{basic-jsx => basic}/src/main.tsx | 9 +- .../{basic-jsx => basic}/src/posts.lazy.tsx | 0 .../vue/{basic-jsx => basic}/src/posts.ts | 0 .../vue/{basic-jsx => basic}/src/styles.css | 0 .../{basic-jsx => basic}/tailwind.config.mjs | 0 .../{basic-jsx => basic}/tsconfig.dev.json | 0 .../vue/{basic-jsx => basic}/tsconfig.json | 0 .../vue/{basic-jsx => basic}/vite.config.js | 0 32 files changed, 583 insertions(+), 8 deletions(-) create mode 100644 e2e/vue-router/basic-file-based-sfc/src/components/EditingAComponent.tsx create mode 100644 e2e/vue-router/basic-file-based-sfc/src/components/EditingBComponent.tsx create mode 100644 e2e/vue-router/basic-file-based-sfc/src/components/NotFoundComponent.vue create mode 100644 e2e/vue-router/basic-file-based-sfc/src/components/NotRemountDepsComponent.tsx create mode 100644 e2e/vue-router/basic-file-based-sfc/src/components/PostErrorComponent.vue create mode 100644 e2e/vue-router/basic-file-based-sfc/src/components/RemountDepsComponent.tsx create mode 100644 e2e/vue-router/basic-file-based-sfc/src/components/VueLogo.vue rename examples/vue/{basic-jsx => basic}/.gitignore (100%) rename examples/vue/{basic-jsx => basic}/README.md (100%) create mode 100644 examples/vue/basic/eslint.config.js rename examples/vue/{basic-jsx => basic}/index.html (100%) rename examples/vue/{basic-jsx => basic}/package.json (100%) rename examples/vue/{basic-jsx => basic}/postcss.config.mjs (100%) create mode 100644 examples/vue/basic/src/components/EditingAComponent.tsx create mode 100644 examples/vue/basic/src/components/EditingBComponent.tsx create mode 100644 examples/vue/basic/src/components/NotFoundComponent.vue create mode 100644 examples/vue/basic/src/components/NotRemountDepsComponent.tsx create mode 100644 examples/vue/basic/src/components/PostErrorComponent.vue create mode 100644 examples/vue/basic/src/components/RemountDepsComponent.tsx create mode 100644 examples/vue/basic/src/components/VueLogo.vue rename examples/vue/{basic-jsx => basic}/src/main.tsx (97%) rename examples/vue/{basic-jsx => basic}/src/posts.lazy.tsx (100%) rename examples/vue/{basic-jsx => basic}/src/posts.ts (100%) rename examples/vue/{basic-jsx => basic}/src/styles.css (100%) rename examples/vue/{basic-jsx => basic}/tailwind.config.mjs (100%) rename examples/vue/{basic-jsx => basic}/tsconfig.dev.json (100%) rename examples/vue/{basic-jsx => basic}/tsconfig.json (100%) rename examples/vue/{basic-jsx => basic}/vite.config.js (100%) diff --git a/e2e/vue-router/basic-file-based-sfc/src/components/EditingAComponent.tsx b/e2e/vue-router/basic-file-based-sfc/src/components/EditingAComponent.tsx new file mode 100644 index 00000000000..b45a170a7ab --- /dev/null +++ b/e2e/vue-router/basic-file-based-sfc/src/components/EditingAComponent.tsx @@ -0,0 +1,39 @@ +import { ref, defineComponent } from 'vue' +import { useBlocker, useNavigate } from '@tanstack/vue-router' + +export const EditingAComponent = defineComponent({ + setup() { + const navigate = useNavigate() + const input = ref('') + + const blocker = useBlocker({ + shouldBlockFn: ({ next }) => { + if (next.fullPath === '/editing-b' && input.value.length > 0) { + return true + } + return false + }, + withResolver: true, + }) + + return () => ( +
+

Editing A

+ + + {blocker.value.status === 'blocked' && ( + + )} +
+ ) + }, +}) diff --git a/e2e/vue-router/basic-file-based-sfc/src/components/EditingBComponent.tsx b/e2e/vue-router/basic-file-based-sfc/src/components/EditingBComponent.tsx new file mode 100644 index 00000000000..ffc19563271 --- /dev/null +++ b/e2e/vue-router/basic-file-based-sfc/src/components/EditingBComponent.tsx @@ -0,0 +1,32 @@ +import { ref, toValue, defineComponent } from 'vue' +import { useBlocker, useNavigate } from '@tanstack/vue-router' + +export const EditingBComponent = defineComponent({ + setup() { + const navigate = useNavigate() + const input = ref('') + + const blocker = useBlocker({ + shouldBlockFn: () => !!toValue(input), + withResolver: true, + }) + + return () => ( +
+

Editing B

+ + + {blocker.value.status === 'blocked' && ( + + )} +
+ ) + }, +}) diff --git a/e2e/vue-router/basic-file-based-sfc/src/components/NotFoundComponent.vue b/e2e/vue-router/basic-file-based-sfc/src/components/NotFoundComponent.vue new file mode 100644 index 00000000000..09ed5cf5ffd --- /dev/null +++ b/e2e/vue-router/basic-file-based-sfc/src/components/NotFoundComponent.vue @@ -0,0 +1,10 @@ + + + diff --git a/e2e/vue-router/basic-file-based-sfc/src/components/NotRemountDepsComponent.tsx b/e2e/vue-router/basic-file-based-sfc/src/components/NotRemountDepsComponent.tsx new file mode 100644 index 00000000000..7f3e732bbfc --- /dev/null +++ b/e2e/vue-router/basic-file-based-sfc/src/components/NotRemountDepsComponent.tsx @@ -0,0 +1,33 @@ +import { ref, onMounted, defineComponent } from 'vue' +import { useSearch, useNavigate } from '@tanstack/vue-router' + +export const NotRemountDepsComponent = defineComponent({ + setup() { + // Component-scoped ref - will be recreated on component remount + const mounts = ref(0) + const search = useSearch({ from: '/notRemountDeps' }) + const navigate = useNavigate() + + onMounted(() => { + mounts.value++ + }) + + return () => ( +
+ + +
Search: {search.value.searchParam}
+
Page component mounts: {mounts.value}
+
+ ) + }, +}) diff --git a/e2e/vue-router/basic-file-based-sfc/src/components/PostErrorComponent.vue b/e2e/vue-router/basic-file-based-sfc/src/components/PostErrorComponent.vue new file mode 100644 index 00000000000..9bb7514ccc5 --- /dev/null +++ b/e2e/vue-router/basic-file-based-sfc/src/components/PostErrorComponent.vue @@ -0,0 +1,10 @@ + + + diff --git a/e2e/vue-router/basic-file-based-sfc/src/components/RemountDepsComponent.tsx b/e2e/vue-router/basic-file-based-sfc/src/components/RemountDepsComponent.tsx new file mode 100644 index 00000000000..e6e05488fd0 --- /dev/null +++ b/e2e/vue-router/basic-file-based-sfc/src/components/RemountDepsComponent.tsx @@ -0,0 +1,34 @@ +import { ref, onMounted, defineComponent } from 'vue' +import { useSearch, useNavigate } from '@tanstack/vue-router' + +// Module-scoped ref to persist across component remounts +const mounts = ref(0) + +export const RemountDepsComponent = defineComponent({ + setup() { + const search = useSearch({ from: '/remountDeps' }) + const navigate = useNavigate() + + onMounted(() => { + mounts.value++ + }) + + return () => ( +
+ + +
Search: {search.value.searchParam}
+
Page component mounts: {mounts.value}
+
+ ) + }, +}) diff --git a/e2e/vue-router/basic-file-based-sfc/src/components/VueLogo.vue b/e2e/vue-router/basic-file-based-sfc/src/components/VueLogo.vue new file mode 100644 index 00000000000..5e2286dbc2e --- /dev/null +++ b/e2e/vue-router/basic-file-based-sfc/src/components/VueLogo.vue @@ -0,0 +1,100 @@ + + + + + diff --git a/e2e/vue-router/basic-file-based-sfc/src/routes/index.component.vue b/e2e/vue-router/basic-file-based-sfc/src/routes/index.component.vue index ef984ae778e..8ab765f4805 100644 --- a/e2e/vue-router/basic-file-based-sfc/src/routes/index.component.vue +++ b/e2e/vue-router/basic-file-based-sfc/src/routes/index.component.vue @@ -1,5 +1,10 @@ + + + \ No newline at end of file diff --git a/e2e/vue-router/basic-file-based-sfc/tsconfig.json b/e2e/vue-router/basic-file-based-sfc/tsconfig.json index 8b743fe0938..2ee97a629f4 100644 --- a/e2e/vue-router/basic-file-based-sfc/tsconfig.json +++ b/e2e/vue-router/basic-file-based-sfc/tsconfig.json @@ -4,6 +4,8 @@ "module": "ESNext", "lib": ["ESNext", "DOM"], "strict": true, + "jsx": "preserve", + "jsxImportSource": "vue", "moduleResolution": "bundler", "skipLibCheck": true, "noEmit": true, diff --git a/examples/vue/basic-file-based-jsx/tsconfig.json b/examples/vue/basic-file-based-jsx/tsconfig.json index 726b87b95ab..6613f951304 100644 --- a/examples/vue/basic-file-based-jsx/tsconfig.json +++ b/examples/vue/basic-file-based-jsx/tsconfig.json @@ -12,6 +12,6 @@ "jsx": "preserve", "jsxImportSource": "vue" }, - "include": ["src", "tests"], + "include": ["src/**/*", "src/**/*.vue", "tests"], "exclude": ["node_modules", "dist"] } diff --git a/examples/vue/basic-file-based-sfc/tsconfig.json b/examples/vue/basic-file-based-sfc/tsconfig.json index 8b743fe0938..0356ff8bae5 100644 --- a/examples/vue/basic-file-based-sfc/tsconfig.json +++ b/examples/vue/basic-file-based-sfc/tsconfig.json @@ -4,12 +4,14 @@ "module": "ESNext", "lib": ["ESNext", "DOM"], "strict": true, + "jsx": "preserve", + "jsxImportSource": "vue", "moduleResolution": "bundler", "skipLibCheck": true, "noEmit": true, "resolveJsonModule": true, "types": ["vite/client"] }, - "include": ["src", "tests"], + "include": ["src/**/*", "src/**/*.vue", "tests"], "exclude": ["node_modules", "dist"] } diff --git a/examples/vue/basic-jsx/.gitignore b/examples/vue/basic/.gitignore similarity index 100% rename from examples/vue/basic-jsx/.gitignore rename to examples/vue/basic/.gitignore diff --git a/examples/vue/basic-jsx/README.md b/examples/vue/basic/README.md similarity index 100% rename from examples/vue/basic-jsx/README.md rename to examples/vue/basic/README.md diff --git a/examples/vue/basic/eslint.config.js b/examples/vue/basic/eslint.config.js new file mode 100644 index 00000000000..4e8d00f1d89 --- /dev/null +++ b/examples/vue/basic/eslint.config.js @@ -0,0 +1,49 @@ +import js from '@eslint/js' +import typescript from '@typescript-eslint/eslint-plugin' +import typescriptParser from '@typescript-eslint/parser' +import vue from 'eslint-plugin-vue' +import vueParser from 'vue-eslint-parser' + +export default [ + js.configs.recommended, + ...vue.configs['flat/recommended'], + { + files: ['**/*.{js,jsx,ts,tsx,vue}'], + languageOptions: { + parser: vueParser, + parserOptions: { + parser: typescriptParser, + ecmaVersion: 'latest', + sourceType: 'module', + ecmaFeatures: { + jsx: true, + }, + }, + }, + plugins: { + '@typescript-eslint': typescript, + vue, + }, + rules: { + // Vue specific rules + 'vue/multi-word-component-names': 'off', + 'vue/no-unused-vars': 'error', + + // TypeScript rules + '@typescript-eslint/no-unused-vars': 'error', + '@typescript-eslint/no-explicit-any': 'warn', + + // General rules + 'no-unused-vars': 'off', // Let TypeScript handle this + }, + }, + { + files: ['**/*.vue'], + languageOptions: { + parser: vueParser, + parserOptions: { + parser: typescriptParser, + }, + }, + }, +] diff --git a/examples/vue/basic-jsx/index.html b/examples/vue/basic/index.html similarity index 100% rename from examples/vue/basic-jsx/index.html rename to examples/vue/basic/index.html diff --git a/examples/vue/basic-jsx/package.json b/examples/vue/basic/package.json similarity index 100% rename from examples/vue/basic-jsx/package.json rename to examples/vue/basic/package.json diff --git a/examples/vue/basic-jsx/postcss.config.mjs b/examples/vue/basic/postcss.config.mjs similarity index 100% rename from examples/vue/basic-jsx/postcss.config.mjs rename to examples/vue/basic/postcss.config.mjs diff --git a/examples/vue/basic/src/components/EditingAComponent.tsx b/examples/vue/basic/src/components/EditingAComponent.tsx new file mode 100644 index 00000000000..b45a170a7ab --- /dev/null +++ b/examples/vue/basic/src/components/EditingAComponent.tsx @@ -0,0 +1,39 @@ +import { ref, defineComponent } from 'vue' +import { useBlocker, useNavigate } from '@tanstack/vue-router' + +export const EditingAComponent = defineComponent({ + setup() { + const navigate = useNavigate() + const input = ref('') + + const blocker = useBlocker({ + shouldBlockFn: ({ next }) => { + if (next.fullPath === '/editing-b' && input.value.length > 0) { + return true + } + return false + }, + withResolver: true, + }) + + return () => ( +
+

Editing A

+ + + {blocker.value.status === 'blocked' && ( + + )} +
+ ) + }, +}) diff --git a/examples/vue/basic/src/components/EditingBComponent.tsx b/examples/vue/basic/src/components/EditingBComponent.tsx new file mode 100644 index 00000000000..ffc19563271 --- /dev/null +++ b/examples/vue/basic/src/components/EditingBComponent.tsx @@ -0,0 +1,32 @@ +import { ref, toValue, defineComponent } from 'vue' +import { useBlocker, useNavigate } from '@tanstack/vue-router' + +export const EditingBComponent = defineComponent({ + setup() { + const navigate = useNavigate() + const input = ref('') + + const blocker = useBlocker({ + shouldBlockFn: () => !!toValue(input), + withResolver: true, + }) + + return () => ( +
+

Editing B

+ + + {blocker.value.status === 'blocked' && ( + + )} +
+ ) + }, +}) diff --git a/examples/vue/basic/src/components/NotFoundComponent.vue b/examples/vue/basic/src/components/NotFoundComponent.vue new file mode 100644 index 00000000000..09ed5cf5ffd --- /dev/null +++ b/examples/vue/basic/src/components/NotFoundComponent.vue @@ -0,0 +1,10 @@ + + + diff --git a/examples/vue/basic/src/components/NotRemountDepsComponent.tsx b/examples/vue/basic/src/components/NotRemountDepsComponent.tsx new file mode 100644 index 00000000000..7f3e732bbfc --- /dev/null +++ b/examples/vue/basic/src/components/NotRemountDepsComponent.tsx @@ -0,0 +1,33 @@ +import { ref, onMounted, defineComponent } from 'vue' +import { useSearch, useNavigate } from '@tanstack/vue-router' + +export const NotRemountDepsComponent = defineComponent({ + setup() { + // Component-scoped ref - will be recreated on component remount + const mounts = ref(0) + const search = useSearch({ from: '/notRemountDeps' }) + const navigate = useNavigate() + + onMounted(() => { + mounts.value++ + }) + + return () => ( +
+ + +
Search: {search.value.searchParam}
+
Page component mounts: {mounts.value}
+
+ ) + }, +}) diff --git a/examples/vue/basic/src/components/PostErrorComponent.vue b/examples/vue/basic/src/components/PostErrorComponent.vue new file mode 100644 index 00000000000..9bb7514ccc5 --- /dev/null +++ b/examples/vue/basic/src/components/PostErrorComponent.vue @@ -0,0 +1,10 @@ + + + diff --git a/examples/vue/basic/src/components/RemountDepsComponent.tsx b/examples/vue/basic/src/components/RemountDepsComponent.tsx new file mode 100644 index 00000000000..e6e05488fd0 --- /dev/null +++ b/examples/vue/basic/src/components/RemountDepsComponent.tsx @@ -0,0 +1,34 @@ +import { ref, onMounted, defineComponent } from 'vue' +import { useSearch, useNavigate } from '@tanstack/vue-router' + +// Module-scoped ref to persist across component remounts +const mounts = ref(0) + +export const RemountDepsComponent = defineComponent({ + setup() { + const search = useSearch({ from: '/remountDeps' }) + const navigate = useNavigate() + + onMounted(() => { + mounts.value++ + }) + + return () => ( +
+ + +
Search: {search.value.searchParam}
+
Page component mounts: {mounts.value}
+
+ ) + }, +}) diff --git a/examples/vue/basic/src/components/VueLogo.vue b/examples/vue/basic/src/components/VueLogo.vue new file mode 100644 index 00000000000..5e2286dbc2e --- /dev/null +++ b/examples/vue/basic/src/components/VueLogo.vue @@ -0,0 +1,100 @@ + + + + + diff --git a/examples/vue/basic-jsx/src/main.tsx b/examples/vue/basic/src/main.tsx similarity index 97% rename from examples/vue/basic-jsx/src/main.tsx rename to examples/vue/basic/src/main.tsx index eba34f7bdf3..dc12871db0d 100644 --- a/examples/vue/basic-jsx/src/main.tsx +++ b/examples/vue/basic/src/main.tsx @@ -1,5 +1,4 @@ import { createApp } from 'vue' -import * as Vue from 'vue' import { ErrorComponent, Link, @@ -11,6 +10,7 @@ import { } from '@tanstack/vue-router' import { TanStackRouterDevtools } from '@tanstack/vue-router-devtools' import { NotFoundError, fetchPost, fetchPosts } from './posts' +import VueLogo from './components/VueLogo.vue' import type { ErrorComponentProps } from '@tanstack/vue-router' import './styles.css' @@ -81,6 +81,7 @@ function IndexComponent() { return (

Welcome Home!

+
) } @@ -230,9 +231,9 @@ declare module '@tanstack/vue-router' { const rootElement = document.getElementById('app')! if (!rootElement.innerHTML) { - createApp({ - setup() { + createApp({ + setup() { return () => - } + }, }).mount('#app') } diff --git a/examples/vue/basic-jsx/src/posts.lazy.tsx b/examples/vue/basic/src/posts.lazy.tsx similarity index 100% rename from examples/vue/basic-jsx/src/posts.lazy.tsx rename to examples/vue/basic/src/posts.lazy.tsx diff --git a/examples/vue/basic-jsx/src/posts.ts b/examples/vue/basic/src/posts.ts similarity index 100% rename from examples/vue/basic-jsx/src/posts.ts rename to examples/vue/basic/src/posts.ts diff --git a/examples/vue/basic-jsx/src/styles.css b/examples/vue/basic/src/styles.css similarity index 100% rename from examples/vue/basic-jsx/src/styles.css rename to examples/vue/basic/src/styles.css diff --git a/examples/vue/basic-jsx/tailwind.config.mjs b/examples/vue/basic/tailwind.config.mjs similarity index 100% rename from examples/vue/basic-jsx/tailwind.config.mjs rename to examples/vue/basic/tailwind.config.mjs diff --git a/examples/vue/basic-jsx/tsconfig.dev.json b/examples/vue/basic/tsconfig.dev.json similarity index 100% rename from examples/vue/basic-jsx/tsconfig.dev.json rename to examples/vue/basic/tsconfig.dev.json diff --git a/examples/vue/basic-jsx/tsconfig.json b/examples/vue/basic/tsconfig.json similarity index 100% rename from examples/vue/basic-jsx/tsconfig.json rename to examples/vue/basic/tsconfig.json diff --git a/examples/vue/basic-jsx/vite.config.js b/examples/vue/basic/vite.config.js similarity index 100% rename from examples/vue/basic-jsx/vite.config.js rename to examples/vue/basic/vite.config.js From 99a0561a96489a17b5fc7252002d608667fd873d Mon Sep 17 00:00:00 2001 From: Birk Skyum Date: Wed, 3 Dec 2025 03:54:46 +0100 Subject: [PATCH 096/114] lockfile --- pnpm-lock.yaml | 74 +++++++++++++++++++++++++------------------------- 1 file changed, 37 insertions(+), 37 deletions(-) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 4d22d8d9831..c9bc89dd6de 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -9377,6 +9377,43 @@ importers: specifier: ^2.11.10 version: 2.11.10(@testing-library/jest-dom@6.6.3)(solid-js@1.9.10)(vite@7.1.7(@types/node@22.10.2)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.37.0)(tsx@4.20.3)(yaml@2.8.1)) + examples/vue/basic: + dependencies: + '@tanstack/vue-router': + specifier: workspace:* + version: link:../../../packages/vue-router + '@tanstack/vue-router-devtools': + specifier: workspace:* + version: link:../../../packages/vue-router-devtools + autoprefixer: + specifier: ^10.4.20 + version: 10.4.20(postcss@8.5.6) + postcss: + specifier: ^8.5.1 + version: 8.5.6 + redaxios: + specifier: ^0.5.1 + version: 0.5.1 + tailwindcss: + specifier: ^3.4.17 + version: 3.4.18(tsx@4.20.3)(yaml@2.8.1) + vue: + specifier: ^3.5.13 + version: 3.5.25(typescript@5.9.2) + devDependencies: + '@vitejs/plugin-vue': + specifier: ^5.2.3 + version: 5.2.4(vite@7.1.7(@types/node@22.10.2)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.37.0)(tsx@4.20.3)(yaml@2.8.1))(vue@3.5.25(typescript@5.9.2)) + '@vitejs/plugin-vue-jsx': + specifier: ^4.1.2 + version: 4.2.0(vite@7.1.7(@types/node@22.10.2)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.37.0)(tsx@4.20.3)(yaml@2.8.1))(vue@3.5.25(typescript@5.9.2)) + typescript: + specifier: ^5.7.2 + version: 5.9.2 + vite: + specifier: ^7.1.7 + version: 7.1.7(@types/node@22.10.2)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.37.0)(tsx@4.20.3)(yaml@2.8.1) + examples/vue/basic-file-based-jsx: dependencies: '@tailwindcss/postcss': @@ -9487,43 +9524,6 @@ importers: specifier: ^7.1.7 version: 7.1.7(@types/node@22.10.2)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.37.0)(tsx@4.20.3)(yaml@2.8.1) - examples/vue/basic-jsx: - dependencies: - '@tanstack/vue-router': - specifier: workspace:* - version: link:../../../packages/vue-router - '@tanstack/vue-router-devtools': - specifier: workspace:* - version: link:../../../packages/vue-router-devtools - autoprefixer: - specifier: ^10.4.20 - version: 10.4.20(postcss@8.5.6) - postcss: - specifier: ^8.5.1 - version: 8.5.6 - redaxios: - specifier: ^0.5.1 - version: 0.5.1 - tailwindcss: - specifier: ^3.4.17 - version: 3.4.18(tsx@4.20.3)(yaml@2.8.1) - vue: - specifier: ^3.5.13 - version: 3.5.25(typescript@5.9.2) - devDependencies: - '@vitejs/plugin-vue': - specifier: ^5.2.3 - version: 5.2.4(vite@7.1.7(@types/node@22.10.2)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.37.0)(tsx@4.20.3)(yaml@2.8.1))(vue@3.5.25(typescript@5.9.2)) - '@vitejs/plugin-vue-jsx': - specifier: ^4.1.2 - version: 4.2.0(vite@7.1.7(@types/node@22.10.2)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.37.0)(tsx@4.20.3)(yaml@2.8.1))(vue@3.5.25(typescript@5.9.2)) - typescript: - specifier: ^5.7.2 - version: 5.9.2 - vite: - specifier: ^7.1.7 - version: 7.1.7(@types/node@22.10.2)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.37.0)(tsx@4.20.3)(yaml@2.8.1) - packages/arktype-adapter: devDependencies: '@tanstack/react-router': From 9a564be478f760c73c92dec5817bb17ffc1d2312 Mon Sep 17 00:00:00 2001 From: Birk Skyum Date: Wed, 3 Dec 2025 04:11:13 +0100 Subject: [PATCH 097/114] add vue plugin --- examples/vue/basic/vite.config.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/examples/vue/basic/vite.config.js b/examples/vue/basic/vite.config.js index 20045a7b4f7..33d651a84c5 100644 --- a/examples/vue/basic/vite.config.js +++ b/examples/vue/basic/vite.config.js @@ -1,7 +1,8 @@ import { defineConfig } from 'vite' +import vue from '@vitejs/plugin-vue' import vueJsx from '@vitejs/plugin-vue-jsx' // https://vitejs.dev/config/ export default defineConfig({ - plugins: [vueJsx()], + plugins: [vue(), vueJsx()], }) From 6d54d212bef59ee127c0b891e5c26f8a74a4e0e9 Mon Sep 17 00:00:00 2001 From: Birk Skyum Date: Wed, 3 Dec 2025 04:12:27 +0100 Subject: [PATCH 098/114] fix e2e --- .../basic-file-based-sfc/src/routes/index.component.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/e2e/vue-router/basic-file-based-sfc/src/routes/index.component.vue b/e2e/vue-router/basic-file-based-sfc/src/routes/index.component.vue index 8ab765f4805..6a672d0efc5 100644 --- a/e2e/vue-router/basic-file-based-sfc/src/routes/index.component.vue +++ b/e2e/vue-router/basic-file-based-sfc/src/routes/index.component.vue @@ -4,7 +4,7 @@ import VueLogo from '../components/VueLogo.vue' \ No newline at end of file From 10502847c9949ce4dd8404596f209e54312c5b46 Mon Sep 17 00:00:00 2001 From: Birk Skyum Date: Wed, 3 Dec 2025 04:13:00 +0100 Subject: [PATCH 099/114] remove redundant files --- .../src/components/EditingAComponent.tsx | 39 ------------------- .../src/components/EditingBComponent.tsx | 32 --------------- .../src/components/NotFoundComponent.vue | 10 ----- .../components/NotRemountDepsComponent.tsx | 33 ---------------- .../src/components/PostErrorComponent.vue | 10 ----- .../src/components/RemountDepsComponent.tsx | 34 ---------------- 6 files changed, 158 deletions(-) delete mode 100644 examples/vue/basic/src/components/EditingAComponent.tsx delete mode 100644 examples/vue/basic/src/components/EditingBComponent.tsx delete mode 100644 examples/vue/basic/src/components/NotFoundComponent.vue delete mode 100644 examples/vue/basic/src/components/NotRemountDepsComponent.tsx delete mode 100644 examples/vue/basic/src/components/PostErrorComponent.vue delete mode 100644 examples/vue/basic/src/components/RemountDepsComponent.tsx diff --git a/examples/vue/basic/src/components/EditingAComponent.tsx b/examples/vue/basic/src/components/EditingAComponent.tsx deleted file mode 100644 index b45a170a7ab..00000000000 --- a/examples/vue/basic/src/components/EditingAComponent.tsx +++ /dev/null @@ -1,39 +0,0 @@ -import { ref, defineComponent } from 'vue' -import { useBlocker, useNavigate } from '@tanstack/vue-router' - -export const EditingAComponent = defineComponent({ - setup() { - const navigate = useNavigate() - const input = ref('') - - const blocker = useBlocker({ - shouldBlockFn: ({ next }) => { - if (next.fullPath === '/editing-b' && input.value.length > 0) { - return true - } - return false - }, - withResolver: true, - }) - - return () => ( -
-

Editing A

- - - {blocker.value.status === 'blocked' && ( - - )} -
- ) - }, -}) diff --git a/examples/vue/basic/src/components/EditingBComponent.tsx b/examples/vue/basic/src/components/EditingBComponent.tsx deleted file mode 100644 index ffc19563271..00000000000 --- a/examples/vue/basic/src/components/EditingBComponent.tsx +++ /dev/null @@ -1,32 +0,0 @@ -import { ref, toValue, defineComponent } from 'vue' -import { useBlocker, useNavigate } from '@tanstack/vue-router' - -export const EditingBComponent = defineComponent({ - setup() { - const navigate = useNavigate() - const input = ref('') - - const blocker = useBlocker({ - shouldBlockFn: () => !!toValue(input), - withResolver: true, - }) - - return () => ( -
-

Editing B

- - - {blocker.value.status === 'blocked' && ( - - )} -
- ) - }, -}) diff --git a/examples/vue/basic/src/components/NotFoundComponent.vue b/examples/vue/basic/src/components/NotFoundComponent.vue deleted file mode 100644 index 09ed5cf5ffd..00000000000 --- a/examples/vue/basic/src/components/NotFoundComponent.vue +++ /dev/null @@ -1,10 +0,0 @@ - - - diff --git a/examples/vue/basic/src/components/NotRemountDepsComponent.tsx b/examples/vue/basic/src/components/NotRemountDepsComponent.tsx deleted file mode 100644 index 7f3e732bbfc..00000000000 --- a/examples/vue/basic/src/components/NotRemountDepsComponent.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import { ref, onMounted, defineComponent } from 'vue' -import { useSearch, useNavigate } from '@tanstack/vue-router' - -export const NotRemountDepsComponent = defineComponent({ - setup() { - // Component-scoped ref - will be recreated on component remount - const mounts = ref(0) - const search = useSearch({ from: '/notRemountDeps' }) - const navigate = useNavigate() - - onMounted(() => { - mounts.value++ - }) - - return () => ( -
- - -
Search: {search.value.searchParam}
-
Page component mounts: {mounts.value}
-
- ) - }, -}) diff --git a/examples/vue/basic/src/components/PostErrorComponent.vue b/examples/vue/basic/src/components/PostErrorComponent.vue deleted file mode 100644 index 9bb7514ccc5..00000000000 --- a/examples/vue/basic/src/components/PostErrorComponent.vue +++ /dev/null @@ -1,10 +0,0 @@ - - - diff --git a/examples/vue/basic/src/components/RemountDepsComponent.tsx b/examples/vue/basic/src/components/RemountDepsComponent.tsx deleted file mode 100644 index e6e05488fd0..00000000000 --- a/examples/vue/basic/src/components/RemountDepsComponent.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import { ref, onMounted, defineComponent } from 'vue' -import { useSearch, useNavigate } from '@tanstack/vue-router' - -// Module-scoped ref to persist across component remounts -const mounts = ref(0) - -export const RemountDepsComponent = defineComponent({ - setup() { - const search = useSearch({ from: '/remountDeps' }) - const navigate = useNavigate() - - onMounted(() => { - mounts.value++ - }) - - return () => ( -
- - -
Search: {search.value.searchParam}
-
Page component mounts: {mounts.value}
-
- ) - }, -}) From 3c022a5ca16f84695a58a6a495350dc8e1db839e Mon Sep 17 00:00:00 2001 From: Birk Skyum Date: Wed, 3 Dec 2025 04:16:42 +0100 Subject: [PATCH 100/114] vue-tsc --- .../basic-file-based-sfc/package.json | 5 +- .../src/routes/__root.component.vue | 3 - e2e/vue-router/basic/package.json | 5 +- .../vue/basic-file-based-sfc/package.json | 5 +- .../src/routes/__root.component.vue | 3 - examples/vue/basic/package.json | 3 +- pnpm-lock.yaml | 90 +++++++++++++++++++ 7 files changed, 101 insertions(+), 13 deletions(-) diff --git a/e2e/vue-router/basic-file-based-sfc/package.json b/e2e/vue-router/basic-file-based-sfc/package.json index 68ea231732d..69344f374b4 100644 --- a/e2e/vue-router/basic-file-based-sfc/package.json +++ b/e2e/vue-router/basic-file-based-sfc/package.json @@ -5,7 +5,7 @@ "scripts": { "dev": "vite --port 3000", "dev:e2e": "vite", - "build": "vite build && tsc --noEmit", + "build": "vite build && vue-tsc --noEmit", "preview": "vite preview", "start": "vite", "test:e2e": "rm -rf port*.txt; playwright test --project=chromium" @@ -28,6 +28,7 @@ "@vitejs/plugin-vue": "^5.2.3", "@vitejs/plugin-vue-jsx": "^4.1.2", "typescript": "~5.8.3", - "vite": "^7.1.7" + "vite": "^7.1.7", + "vue-tsc": "^2.2.0" } } diff --git a/e2e/vue-router/basic-file-based-sfc/src/routes/__root.component.vue b/e2e/vue-router/basic-file-based-sfc/src/routes/__root.component.vue index 0752797676e..1520b305684 100644 --- a/e2e/vue-router/basic-file-based-sfc/src/routes/__root.component.vue +++ b/e2e/vue-router/basic-file-based-sfc/src/routes/__root.component.vue @@ -69,9 +69,6 @@ const _state = useRouterState() Lazy Inside Group unicode path - - This Route Does Not Exist -
diff --git a/e2e/vue-router/basic/package.json b/e2e/vue-router/basic/package.json index a15bd2466b3..e1c5df5614c 100644 --- a/e2e/vue-router/basic/package.json +++ b/e2e/vue-router/basic/package.json @@ -5,7 +5,7 @@ "scripts": { "dev": "vite --port 3000", "dev:e2e": "vite", - "build": "vite build && tsc --noEmit", + "build": "vite build && vue-tsc --noEmit", "preview": "vite preview", "start": "vite", "test:e2e": "rm -rf port*.txt; playwright test --project=chromium" @@ -24,6 +24,7 @@ "@tanstack/router-e2e-utils": "workspace:^", "@vitejs/plugin-vue-jsx": "^4.1.2", "typescript": "~5.8.3", - "vite": "^7.1.7" + "vite": "^7.1.7", + "vue-tsc": "^2.2.0" } } diff --git a/examples/vue/basic-file-based-sfc/package.json b/examples/vue/basic-file-based-sfc/package.json index 151b7a79754..02d3cb46be9 100644 --- a/examples/vue/basic-file-based-sfc/package.json +++ b/examples/vue/basic-file-based-sfc/package.json @@ -4,7 +4,7 @@ "type": "module", "scripts": { "dev": "vite --port 3000", - "build": "vite build && tsc --noEmit", + "build": "vite build && vue-tsc --noEmit", "preview": "vite preview", "start": "vite" }, @@ -24,6 +24,7 @@ "@vitejs/plugin-vue": "^5.2.3", "@vitejs/plugin-vue-jsx": "^4.1.2", "typescript": "~5.8.3", - "vite": "^7.1.7" + "vite": "^7.1.7", + "vue-tsc": "^2.2.0" } } diff --git a/examples/vue/basic-file-based-sfc/src/routes/__root.component.vue b/examples/vue/basic-file-based-sfc/src/routes/__root.component.vue index 0752797676e..1520b305684 100644 --- a/examples/vue/basic-file-based-sfc/src/routes/__root.component.vue +++ b/examples/vue/basic-file-based-sfc/src/routes/__root.component.vue @@ -69,9 +69,6 @@ const _state = useRouterState() Lazy Inside Group unicode path - - This Route Does Not Exist -
diff --git a/examples/vue/basic/package.json b/examples/vue/basic/package.json index ee9198dedcd..3b946cdfa9c 100644 --- a/examples/vue/basic/package.json +++ b/examples/vue/basic/package.json @@ -4,7 +4,7 @@ "type": "module", "scripts": { "dev": "vite --port=3000", - "build": "vite build && tsc --noEmit", + "build": "vite build && vue-tsc --noEmit", "serve": "vite preview", "start": "vite" }, @@ -20,6 +20,7 @@ "devDependencies": { "typescript": "^5.7.2", "vite": "^6.1.0", + "vue-tsc": "^2.2.0", "@vitejs/plugin-vue": "^5.2.3", "@vitejs/plugin-vue-jsx": "^4.1.2" } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index c9bc89dd6de..5bff27e9d52 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -3717,6 +3717,9 @@ importers: vite: specifier: ^7.1.7 version: 7.1.7(@types/node@22.10.2)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.37.0)(tsx@4.20.3)(yaml@2.8.1) + vue-tsc: + specifier: ^2.2.0 + version: 2.2.12(typescript@5.8.3) e2e/vue-router/basic-file-based-jsx: dependencies: @@ -3839,6 +3842,9 @@ importers: vite: specifier: ^7.1.7 version: 7.1.7(@types/node@22.10.2)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.37.0)(tsx@4.20.3)(yaml@2.8.1) + vue-tsc: + specifier: ^2.2.0 + version: 2.2.12(typescript@5.8.3) examples/react/authenticated-routes: dependencies: @@ -9413,6 +9419,9 @@ importers: vite: specifier: ^7.1.7 version: 7.1.7(@types/node@22.10.2)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.37.0)(tsx@4.20.3)(yaml@2.8.1) + vue-tsc: + specifier: ^2.2.0 + version: 2.2.12(typescript@5.9.2) examples/vue/basic-file-based-jsx: dependencies: @@ -9523,6 +9532,9 @@ importers: vite: specifier: ^7.1.7 version: 7.1.7(@types/node@22.10.2)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.37.0)(tsx@4.20.3)(yaml@2.8.1) + vue-tsc: + specifier: ^2.2.0 + version: 2.2.12(typescript@5.8.3) packages/arktype-adapter: devDependencies: @@ -15965,18 +15977,27 @@ packages: '@volar/language-core@2.4.11': resolution: {integrity: sha512-lN2C1+ByfW9/JRPpqScuZt/4OrUUse57GLI6TbLgTIqBVemdl1wNcZ1qYGEo2+Gw8coYLgCy7SuKqn6IrQcQgg==} + '@volar/language-core@2.4.15': + resolution: {integrity: sha512-3VHw+QZU0ZG9IuQmzT68IyN4hZNd9GchGPhbD9+pa8CVv7rnoOZwo7T8weIbrRmihqy3ATpdfXFnqRrfPVK6CA==} + '@volar/language-core@2.4.23': resolution: {integrity: sha512-hEEd5ET/oSmBC6pi1j6NaNYRWoAiDhINbT8rmwtINugR39loROSlufGdYMF9TaKGfz+ViGs1Idi3mAhnuPcoGQ==} '@volar/source-map@2.4.11': resolution: {integrity: sha512-ZQpmafIGvaZMn/8iuvCFGrW3smeqkq/IIh9F1SdSx9aUl0J4Iurzd6/FhmjNO5g2ejF3rT45dKskgXWiofqlZQ==} + '@volar/source-map@2.4.15': + resolution: {integrity: sha512-CPbMWlUN6hVZJYGcU/GSoHu4EnCHiLaXI9n8c9la6RaI9W5JHX+NqG+GSQcB0JdC2FIBLdZJwGsfKyBB71VlTg==} + '@volar/source-map@2.4.23': resolution: {integrity: sha512-Z1Uc8IB57Lm6k7q6KIDu/p+JWtf3xsXJqAX/5r18hYOTpJyBn0KXUR8oTJ4WFYOcDzWC9n3IflGgHowx6U6z9Q==} '@volar/typescript@2.4.11': resolution: {integrity: sha512-2DT+Tdh88Spp5PyPbqhyoYavYCPDsqbHLFwcUI9K1NlY1YgUJvujGdrqUp0zWxnW7KWNTr3xSpMuv2WnaTKDAw==} + '@volar/typescript@2.4.15': + resolution: {integrity: sha512-2aZ8i0cqPGjXb4BhkMsPYDkkuc2ZQ6yOpqwAuNwUoncELqoy5fRgOQtLR9gB0g902iS0NAkvpIzs27geVyVdPg==} + '@volar/typescript@2.4.23': resolution: {integrity: sha512-lAB5zJghWxVPqfcStmAP1ZqQacMpe90UrP5RJ3arDyrhy4aCUQqmxPPLB2PWDKugvylmO41ljK7vZ+t6INMTag==} @@ -16025,6 +16046,14 @@ packages: typescript: optional: true + '@vue/language-core@2.2.12': + resolution: {integrity: sha512-IsGljWbKGU1MZpBPN+BvPAdr55YPkj2nB/TBNGNC32Vy2qLG25DYu/NBN2vNtZqdRbTRjaoYrahLrToim2NanA==} + peerDependencies: + typescript: '*' + peerDependenciesMeta: + typescript: + optional: true + '@vue/language-core@3.1.5': resolution: {integrity: sha512-FMcqyzWN+sYBeqRMWPGT2QY0mUasZMVIuHvmb5NT3eeqPrbHBYtCP8JWEUCDCgM+Zr62uuWY/qoeBrPrzfa78w==} peerDependencies: @@ -16279,6 +16308,9 @@ packages: ajv@8.17.1: resolution: {integrity: sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==} + alien-signals@1.0.13: + resolution: {integrity: sha512-OGj9yyTnJEttvzhTUWuscOvtqxq5vrhF7vL9oS0xJ2mK0ItPYP1/y+vCFebfxoEyAz0++1AIwJ5CMr+Fk3nDmg==} + alien-signals@3.1.1: resolution: {integrity: sha512-ogkIWbVrLwKtHY6oOAXaYkAxP+cTH7V5FZ5+Tm4NZFd8VDZ6uNMDrfzqctTZ42eTMCSR3ne3otpcxmqSnFfPYA==} @@ -22013,6 +22045,12 @@ packages: peerDependencies: typescript: '>=5.0.0' + vue-tsc@2.2.12: + resolution: {integrity: sha512-P7OP77b2h/Pmk+lZdJ0YWs+5tJ6J2+uOQPo7tlBnY44QqQSPYvS0qVT4wqDJgwrZaLe47etJLLQRFia71GYITw==} + hasBin: true + peerDependencies: + typescript: '>=5.0.0' + vue-tsc@3.1.5: resolution: {integrity: sha512-L/G9IUjOWhBU0yun89rv8fKqmKC+T0HfhrFjlIml71WpfBv9eb4E9Bev8FMbyueBIU9vxQqbd+oOsVcDa5amGw==} hasBin: true @@ -28482,12 +28520,18 @@ snapshots: dependencies: '@volar/source-map': 2.4.11 + '@volar/language-core@2.4.15': + dependencies: + '@volar/source-map': 2.4.15 + '@volar/language-core@2.4.23': dependencies: '@volar/source-map': 2.4.23 '@volar/source-map@2.4.11': {} + '@volar/source-map@2.4.15': {} + '@volar/source-map@2.4.23': {} '@volar/typescript@2.4.11': @@ -28496,6 +28540,12 @@ snapshots: path-browserify: 1.0.1 vscode-uri: 3.0.8 + '@volar/typescript@2.4.15': + dependencies: + '@volar/language-core': 2.4.15 + path-browserify: 1.0.1 + vscode-uri: 3.0.8 + '@volar/typescript@2.4.23': dependencies: '@volar/language-core': 2.4.23 @@ -28605,6 +28655,32 @@ snapshots: optionalDependencies: typescript: 5.9.2 + '@vue/language-core@2.2.12(typescript@5.8.3)': + dependencies: + '@volar/language-core': 2.4.15 + '@vue/compiler-dom': 3.5.25 + '@vue/compiler-vue2': 2.7.16 + '@vue/shared': 3.5.25 + alien-signals: 1.0.13 + minimatch: 9.0.5 + muggle-string: 0.4.1 + path-browserify: 1.0.1 + optionalDependencies: + typescript: 5.8.3 + + '@vue/language-core@2.2.12(typescript@5.9.2)': + dependencies: + '@volar/language-core': 2.4.15 + '@vue/compiler-dom': 3.5.25 + '@vue/compiler-vue2': 2.7.16 + '@vue/shared': 3.5.25 + alien-signals: 1.0.13 + minimatch: 9.0.5 + muggle-string: 0.4.1 + path-browserify: 1.0.1 + optionalDependencies: + typescript: 5.9.2 + '@vue/language-core@3.1.5(typescript@5.8.3)': dependencies: '@volar/language-core': 2.4.23 @@ -28910,6 +28986,8 @@ snapshots: json-schema-traverse: 1.0.0 require-from-string: 2.0.2 + alien-signals@1.0.13: {} + alien-signals@3.1.1: {} ansi-colors@4.1.3: {} @@ -35325,6 +35403,18 @@ snapshots: semver: 7.7.3 typescript: 5.9.2 + vue-tsc@2.2.12(typescript@5.8.3): + dependencies: + '@volar/typescript': 2.4.15 + '@vue/language-core': 2.2.12(typescript@5.8.3) + typescript: 5.8.3 + + vue-tsc@2.2.12(typescript@5.9.2): + dependencies: + '@volar/typescript': 2.4.15 + '@vue/language-core': 2.2.12(typescript@5.9.2) + typescript: 5.9.2 + vue-tsc@3.1.5(typescript@5.8.3): dependencies: '@volar/typescript': 2.4.23 From 8de98b726b1d2dddc52d41ec491f6266dea23a8d Mon Sep 17 00:00:00 2001 From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com> Date: Wed, 3 Dec 2025 03:18:00 +0000 Subject: [PATCH 101/114] ci: apply automated fixes --- .../src/components/EditingAComponent.tsx | 4 +- .../src/components/EditingBComponent.tsx | 4 +- .../components/NotRemountDepsComponent.tsx | 8 +- .../src/components/RemountDepsComponent.tsx | 8 +- .../src/components/VueLogo.vue | 4 +- .../basic-file-based-jsx/src/main.tsx | 6 +- .../(another-group)/onlyrouteinside.tsx | 8 +- .../routes/(group)/_layout.insidelayout.tsx | 8 +- .../src/routes/(group)/inside.tsx | 8 +- .../src/routes/(group)/lazyinside.tsx | 8 +- .../src/routes/(group)/subfolder/inside.tsx | 8 +- .../src/routes/__root.tsx | 5 +- .../basic-file-based-jsx/src/routes/posts.tsx | 29 +-- .../src/routes/posts_.$postId.edit.tsx | 4 +- .../src/routes/sfcComponent.component.vue | 2 +- .../src/components/EditingAComponent.tsx | 4 +- .../src/components/EditingBComponent.tsx | 4 +- .../components/NotRemountDepsComponent.tsx | 8 +- .../src/components/RemountDepsComponent.tsx | 8 +- .../src/components/VueLogo.vue | 4 +- .../onlyrouteinside.component.vue | 4 +- .../_layout.insidelayout.component.vue | 4 +- .../src/routes/(group)/inside.component.vue | 4 +- .../routes/(group)/lazyinside.component.vue | 4 +- .../(group)/subfolder/inside.component.vue | 4 +- .../src/routes/__root.component.vue | 13 +- .../routes/_layout/_layout-2.component.vue | 10 +- .../src/routes/index.component.vue | 2 +- .../src/routes/notRemountDeps.component.vue | 4 +- .../src/routes/posts.$postId.component.vue | 4 +- .../src/routes/posts.component.vue | 5 +- .../routes/posts_.$postId.edit.component.vue | 4 +- .../src/routes/remountDeps.component.vue | 4 +- e2e/vue-router/basic/src/posts.lazy.tsx | 37 ++-- .../src/components/EditingAComponent.tsx | 4 +- .../src/components/EditingBComponent.tsx | 4 +- .../components/NotRemountDepsComponent.tsx | 8 +- .../src/components/RemountDepsComponent.tsx | 8 +- .../src/components/VueLogo.vue | 4 +- .../vue/basic-file-based-jsx/src/main.tsx | 6 +- .../(another-group)/onlyrouteinside.tsx | 8 +- .../routes/(group)/_layout.insidelayout.tsx | 8 +- .../src/routes/(group)/inside.tsx | 8 +- .../src/routes/(group)/lazyinside.tsx | 8 +- .../src/routes/(group)/subfolder/inside.tsx | 8 +- .../src/routes/__root.tsx | 5 +- .../basic-file-based-jsx/src/routes/posts.tsx | 29 +-- .../src/routes/posts_.$postId.edit.tsx | 4 +- .../src/routes/sfcComponent.component.vue | 2 +- .../src/components/VueLogo.vue | 4 +- .../onlyrouteinside.component.vue | 4 +- .../_layout.insidelayout.component.vue | 4 +- .../src/routes/(group)/inside.component.vue | 4 +- .../routes/(group)/lazyinside.component.vue | 4 +- .../(group)/subfolder/inside.component.vue | 4 +- .../src/routes/__root.component.vue | 13 +- .../routes/_layout/_layout-2.component.vue | 10 +- .../src/routes/index.component.vue | 2 +- .../src/routes/notRemountDeps.component.vue | 4 +- .../src/routes/posts.$postId.component.vue | 4 +- .../src/routes/posts.component.vue | 5 +- .../routes/posts_.$postId.edit.component.vue | 4 +- .../src/routes/remountDeps.component.vue | 4 +- examples/vue/basic/src/components/VueLogo.vue | 4 +- examples/vue/basic/src/posts.lazy.tsx | 37 ++-- labeler-config.yml | 6 + .../src/filesystem/physical/getRouteNodes.ts | 18 +- packages/router-generator/src/generator.ts | 24 ++- .../src/TanStackRouterDevtools.tsx | 9 +- .../src/TanStackRouterDevtoolsPanel.tsx | 9 +- packages/vue-router-devtools/src/index.tsx | 4 +- packages/vue-router/README.md | 22 +-- packages/vue-router/eslint.config.ts | 3 +- packages/vue-router/src/Asset.tsx | 27 +-- packages/vue-router/src/CatchBoundary.tsx | 169 ++++++++++-------- packages/vue-router/src/HeadContent.tsx | 10 +- packages/vue-router/src/Match.tsx | 135 ++++++++------ packages/vue-router/src/Matches.tsx | 87 ++++----- packages/vue-router/src/RouterProvider.tsx | 38 ++-- packages/vue-router/src/SafeFragment.tsx | 2 +- packages/vue-router/src/Transitioner.tsx | 92 +++++----- .../vue-router/src/lazyRouteComponent.tsx | 11 +- packages/vue-router/src/link.tsx | 150 +++++++++++----- packages/vue-router/src/matchContext.tsx | 8 +- packages/vue-router/src/not-found.tsx | 8 +- packages/vue-router/src/routerContext.tsx | 6 +- packages/vue-router/src/useBlocker.tsx | 10 +- packages/vue-router/src/useRouteContext.ts | 2 +- packages/vue-router/src/useRouterState.tsx | 6 +- packages/vue-router/src/utils.ts | 24 +-- packages/vue-router/tests/Matches.test.tsx | 8 +- .../vue-router/tests/RouterProvider.test.tsx | 2 +- .../tests/disableGlobalCatchBoundary.test.tsx | 2 +- packages/vue-router/tests/link.test-d.tsx | 4 +- packages/vue-router/tests/link.test.tsx | 34 ++-- packages/vue-router/tests/loaders.test.tsx | 9 +- .../tests/optional-path-params.test.tsx | 4 +- packages/vue-router/tests/router.test.tsx | 8 +- .../store-updates-during-navigation.test.tsx | 2 +- packages/vue-router/tests/useBlocker.test.tsx | 2 +- packages/vue-router/tests/useParams.test.tsx | 11 +- packages/vue-router/vite.config.ts | 4 +- 102 files changed, 880 insertions(+), 560 deletions(-) diff --git a/e2e/vue-router/basic-file-based-jsx/src/components/EditingAComponent.tsx b/e2e/vue-router/basic-file-based-jsx/src/components/EditingAComponent.tsx index b45a170a7ab..9406a081951 100644 --- a/e2e/vue-router/basic-file-based-jsx/src/components/EditingAComponent.tsx +++ b/e2e/vue-router/basic-file-based-jsx/src/components/EditingAComponent.tsx @@ -24,7 +24,9 @@ export const EditingAComponent = defineComponent({ (input.value = (e.target as HTMLInputElement).value)} + onInput={(e) => + (input.value = (e.target as HTMLInputElement).value) + } /> diff --git a/e2e/vue-router/basic-file-based-jsx/src/components/NotRemountDepsComponent.tsx b/e2e/vue-router/basic-file-based-jsx/src/components/NotRemountDepsComponent.tsx index 7f3e732bbfc..bd11d54fc72 100644 --- a/e2e/vue-router/basic-file-based-jsx/src/components/NotRemountDepsComponent.tsx +++ b/e2e/vue-router/basic-file-based-jsx/src/components/NotRemountDepsComponent.tsx @@ -18,7 +18,9 @@ export const NotRemountDepsComponent = defineComponent({ onClick={() => navigate({ to: '/notRemountDeps', - search: { searchParam: Math.random().toString(36).substring(2, 8) }, + search: { + searchParam: Math.random().toString(36).substring(2, 8), + }, }) } > @@ -26,7 +28,9 @@ export const NotRemountDepsComponent = defineComponent({
Search: {search.value.searchParam}
-
Page component mounts: {mounts.value}
+
+ Page component mounts: {mounts.value} +
) }, diff --git a/e2e/vue-router/basic-file-based-jsx/src/components/RemountDepsComponent.tsx b/e2e/vue-router/basic-file-based-jsx/src/components/RemountDepsComponent.tsx index e6e05488fd0..ecb79aeca9c 100644 --- a/e2e/vue-router/basic-file-based-jsx/src/components/RemountDepsComponent.tsx +++ b/e2e/vue-router/basic-file-based-jsx/src/components/RemountDepsComponent.tsx @@ -19,7 +19,9 @@ export const RemountDepsComponent = defineComponent({ onClick={() => navigate({ to: '/remountDeps', - search: { searchParam: Math.random().toString(36).substring(2, 8) }, + search: { + searchParam: Math.random().toString(36).substring(2, 8), + }, }) } > @@ -27,7 +29,9 @@ export const RemountDepsComponent = defineComponent({
Search: {search.value.searchParam}
-
Page component mounts: {mounts.value}
+
+ Page component mounts: {mounts.value} +
) }, diff --git a/e2e/vue-router/basic-file-based-jsx/src/components/VueLogo.vue b/e2e/vue-router/basic-file-based-jsx/src/components/VueLogo.vue index 5e2286dbc2e..b0f134316b0 100644 --- a/e2e/vue-router/basic-file-based-jsx/src/components/VueLogo.vue +++ b/e2e/vue-router/basic-file-based-jsx/src/components/VueLogo.vue @@ -49,7 +49,9 @@ function reset() { fill="#34495e" /> -

{{ countLabel }}

+

+ {{ countLabel }} +

diff --git a/e2e/vue-router/basic-file-based-jsx/src/main.tsx b/e2e/vue-router/basic-file-based-jsx/src/main.tsx index 240d4989f69..73cca4528c6 100644 --- a/e2e/vue-router/basic-file-based-jsx/src/main.tsx +++ b/e2e/vue-router/basic-file-based-jsx/src/main.tsx @@ -21,9 +21,9 @@ declare module '@tanstack/vue-router' { const rootElement = document.getElementById('app')! if (!rootElement.innerHTML) { - createApp({ - setup() { + createApp({ + setup() { return () => - } + }, }).mount('#app') } diff --git a/e2e/vue-router/basic-file-based-jsx/src/routes/(another-group)/onlyrouteinside.tsx b/e2e/vue-router/basic-file-based-jsx/src/routes/(another-group)/onlyrouteinside.tsx index 3a2e57fede8..83036509ba4 100644 --- a/e2e/vue-router/basic-file-based-jsx/src/routes/(another-group)/onlyrouteinside.tsx +++ b/e2e/vue-router/basic-file-based-jsx/src/routes/(another-group)/onlyrouteinside.tsx @@ -17,8 +17,12 @@ function OnlyRouteInsideComponent() { return (
{searchViaHook.value.hello}
-
{searchViaRouteHook.value.hello}
-
{searchViaRouteApi.value.hello}
+
+ {searchViaRouteHook.value.hello} +
+
+ {searchViaRouteApi.value.hello} +
) } diff --git a/e2e/vue-router/basic-file-based-jsx/src/routes/(group)/_layout.insidelayout.tsx b/e2e/vue-router/basic-file-based-jsx/src/routes/(group)/_layout.insidelayout.tsx index 861f971a063..557503a0c23 100644 --- a/e2e/vue-router/basic-file-based-jsx/src/routes/(group)/_layout.insidelayout.tsx +++ b/e2e/vue-router/basic-file-based-jsx/src/routes/(group)/_layout.insidelayout.tsx @@ -17,8 +17,12 @@ function InsideLayoutComponent() { return (
{searchViaHook.value.hello}
-
{searchViaRouteHook.value.hello}
-
{searchViaRouteApi.value.hello}
+
+ {searchViaRouteHook.value.hello} +
+
+ {searchViaRouteApi.value.hello} +
) } diff --git a/e2e/vue-router/basic-file-based-jsx/src/routes/(group)/inside.tsx b/e2e/vue-router/basic-file-based-jsx/src/routes/(group)/inside.tsx index 95880dd0e76..bec12d8de25 100644 --- a/e2e/vue-router/basic-file-based-jsx/src/routes/(group)/inside.tsx +++ b/e2e/vue-router/basic-file-based-jsx/src/routes/(group)/inside.tsx @@ -17,8 +17,12 @@ function InsideComponent() { return (
{searchViaHook.value.hello}
-
{searchViaRouteHook.value.hello}
-
{searchViaRouteApi.value.hello}
+
+ {searchViaRouteHook.value.hello} +
+
+ {searchViaRouteApi.value.hello} +
) } diff --git a/e2e/vue-router/basic-file-based-jsx/src/routes/(group)/lazyinside.tsx b/e2e/vue-router/basic-file-based-jsx/src/routes/(group)/lazyinside.tsx index fe97aa754a3..56d8d6cae85 100644 --- a/e2e/vue-router/basic-file-based-jsx/src/routes/(group)/lazyinside.tsx +++ b/e2e/vue-router/basic-file-based-jsx/src/routes/(group)/lazyinside.tsx @@ -17,8 +17,12 @@ function LazyInsideComponent() { return (
{searchViaHook.value.hello}
-
{searchViaRouteHook.value.hello}
-
{searchViaRouteApi.value.hello}
+
+ {searchViaRouteHook.value.hello} +
+
+ {searchViaRouteApi.value.hello} +
) } diff --git a/e2e/vue-router/basic-file-based-jsx/src/routes/(group)/subfolder/inside.tsx b/e2e/vue-router/basic-file-based-jsx/src/routes/(group)/subfolder/inside.tsx index 4496f9efec2..b4487d163da 100644 --- a/e2e/vue-router/basic-file-based-jsx/src/routes/(group)/subfolder/inside.tsx +++ b/e2e/vue-router/basic-file-based-jsx/src/routes/(group)/subfolder/inside.tsx @@ -17,8 +17,12 @@ function SubfolderInsideComponent() { return (
{searchViaHook.value.hello}
-
{searchViaRouteHook.value.hello}
-
{searchViaRouteApi.value.hello}
+
+ {searchViaRouteHook.value.hello} +
+
+ {searchViaRouteApi.value.hello} +
) } diff --git a/e2e/vue-router/basic-file-based-jsx/src/routes/__root.tsx b/e2e/vue-router/basic-file-based-jsx/src/routes/__root.tsx index b2e2eb74315..ebb36e80b53 100644 --- a/e2e/vue-router/basic-file-based-jsx/src/routes/__root.tsx +++ b/e2e/vue-router/basic-file-based-jsx/src/routes/__root.tsx @@ -90,7 +90,10 @@ function RootComponent() { unicode path {/* @ts-expect-error */} - + This Route Does Not Exist diff --git a/e2e/vue-router/basic-file-based-jsx/src/routes/posts.tsx b/e2e/vue-router/basic-file-based-jsx/src/routes/posts.tsx index 529fbbb1c19..ae580dfc02a 100644 --- a/e2e/vue-router/basic-file-based-jsx/src/routes/posts.tsx +++ b/e2e/vue-router/basic-file-based-jsx/src/routes/posts.tsx @@ -20,20 +20,21 @@ function PostsComponent() { return (
    - {[...(posts.value as Array), { id: 'i-do-not-exist', title: 'Non-existent Post' }].map( - (post) => ( -
  • - -
    {post.title.substring(0, 20)}
    - -
    • - ), - )} + {[ + ...(posts.value as Array), + { id: 'i-do-not-exist', title: 'Non-existent Post' }, + ].map((post) => ( +
  • + +
    {post.title.substring(0, 20)}
    + +
    • + ))}
diff --git a/e2e/vue-router/basic-file-based-jsx/src/routes/posts_.$postId.edit.tsx b/e2e/vue-router/basic-file-based-jsx/src/routes/posts_.$postId.edit.tsx index eae55358105..57963c6b64d 100644 --- a/e2e/vue-router/basic-file-based-jsx/src/routes/posts_.$postId.edit.tsx +++ b/e2e/vue-router/basic-file-based-jsx/src/routes/posts_.$postId.edit.tsx @@ -14,7 +14,9 @@ function PostEditComponent() { return (
{paramsViaHook.value.postId}
-
{paramsViaRouteHook.value.postId}
+
+ {paramsViaRouteHook.value.postId} +
{paramsViaApi.value.postId}
) diff --git a/e2e/vue-router/basic-file-based-jsx/src/routes/sfcComponent.component.vue b/e2e/vue-router/basic-file-based-jsx/src/routes/sfcComponent.component.vue index 8ab765f4805..392d9ce9bf6 100644 --- a/e2e/vue-router/basic-file-based-jsx/src/routes/sfcComponent.component.vue +++ b/e2e/vue-router/basic-file-based-jsx/src/routes/sfcComponent.component.vue @@ -7,4 +7,4 @@ import VueLogo from '../components/VueLogo.vue'

Vue SFC!

- \ No newline at end of file + diff --git a/e2e/vue-router/basic-file-based-sfc/src/components/EditingAComponent.tsx b/e2e/vue-router/basic-file-based-sfc/src/components/EditingAComponent.tsx index b45a170a7ab..9406a081951 100644 --- a/e2e/vue-router/basic-file-based-sfc/src/components/EditingAComponent.tsx +++ b/e2e/vue-router/basic-file-based-sfc/src/components/EditingAComponent.tsx @@ -24,7 +24,9 @@ export const EditingAComponent = defineComponent({ (input.value = (e.target as HTMLInputElement).value)} + onInput={(e) => + (input.value = (e.target as HTMLInputElement).value) + } /> diff --git a/e2e/vue-router/basic-file-based-sfc/src/components/NotRemountDepsComponent.tsx b/e2e/vue-router/basic-file-based-sfc/src/components/NotRemountDepsComponent.tsx index 7f3e732bbfc..bd11d54fc72 100644 --- a/e2e/vue-router/basic-file-based-sfc/src/components/NotRemountDepsComponent.tsx +++ b/e2e/vue-router/basic-file-based-sfc/src/components/NotRemountDepsComponent.tsx @@ -18,7 +18,9 @@ export const NotRemountDepsComponent = defineComponent({ onClick={() => navigate({ to: '/notRemountDeps', - search: { searchParam: Math.random().toString(36).substring(2, 8) }, + search: { + searchParam: Math.random().toString(36).substring(2, 8), + }, }) } > @@ -26,7 +28,9 @@ export const NotRemountDepsComponent = defineComponent({
Search: {search.value.searchParam}
-
Page component mounts: {mounts.value}
+
+ Page component mounts: {mounts.value} +
) }, diff --git a/e2e/vue-router/basic-file-based-sfc/src/components/RemountDepsComponent.tsx b/e2e/vue-router/basic-file-based-sfc/src/components/RemountDepsComponent.tsx index e6e05488fd0..ecb79aeca9c 100644 --- a/e2e/vue-router/basic-file-based-sfc/src/components/RemountDepsComponent.tsx +++ b/e2e/vue-router/basic-file-based-sfc/src/components/RemountDepsComponent.tsx @@ -19,7 +19,9 @@ export const RemountDepsComponent = defineComponent({ onClick={() => navigate({ to: '/remountDeps', - search: { searchParam: Math.random().toString(36).substring(2, 8) }, + search: { + searchParam: Math.random().toString(36).substring(2, 8), + }, }) } > @@ -27,7 +29,9 @@ export const RemountDepsComponent = defineComponent({
Search: {search.value.searchParam}
-
Page component mounts: {mounts.value}
+
+ Page component mounts: {mounts.value} +
) }, diff --git a/e2e/vue-router/basic-file-based-sfc/src/components/VueLogo.vue b/e2e/vue-router/basic-file-based-sfc/src/components/VueLogo.vue index 5e2286dbc2e..b0f134316b0 100644 --- a/e2e/vue-router/basic-file-based-sfc/src/components/VueLogo.vue +++ b/e2e/vue-router/basic-file-based-sfc/src/components/VueLogo.vue @@ -49,7 +49,9 @@ function reset() { fill="#34495e" /> -

{{ countLabel }}

+

+ {{ countLabel }} +

diff --git a/e2e/vue-router/basic-file-based-sfc/src/routes/(another-group)/onlyrouteinside.component.vue b/e2e/vue-router/basic-file-based-sfc/src/routes/(another-group)/onlyrouteinside.component.vue index 050e9530a71..4d998b9ff97 100644 --- a/e2e/vue-router/basic-file-based-sfc/src/routes/(another-group)/onlyrouteinside.component.vue +++ b/e2e/vue-router/basic-file-based-sfc/src/routes/(another-group)/onlyrouteinside.component.vue @@ -11,7 +11,9 @@ const searchViaRouteApi = routeApi.useSearch() diff --git a/e2e/vue-router/basic-file-based-sfc/src/routes/(group)/_layout.insidelayout.component.vue b/e2e/vue-router/basic-file-based-sfc/src/routes/(group)/_layout.insidelayout.component.vue index 0ed233100f2..5b5d4352322 100644 --- a/e2e/vue-router/basic-file-based-sfc/src/routes/(group)/_layout.insidelayout.component.vue +++ b/e2e/vue-router/basic-file-based-sfc/src/routes/(group)/_layout.insidelayout.component.vue @@ -11,7 +11,9 @@ const searchViaRouteApi = routeApi.useSearch() diff --git a/e2e/vue-router/basic-file-based-sfc/src/routes/(group)/inside.component.vue b/e2e/vue-router/basic-file-based-sfc/src/routes/(group)/inside.component.vue index bd227855fd3..6542777df9b 100644 --- a/e2e/vue-router/basic-file-based-sfc/src/routes/(group)/inside.component.vue +++ b/e2e/vue-router/basic-file-based-sfc/src/routes/(group)/inside.component.vue @@ -11,7 +11,9 @@ const searchViaRouteApi = routeApi.useSearch() diff --git a/e2e/vue-router/basic-file-based-sfc/src/routes/(group)/lazyinside.component.vue b/e2e/vue-router/basic-file-based-sfc/src/routes/(group)/lazyinside.component.vue index 1330ffc470c..8e603559378 100644 --- a/e2e/vue-router/basic-file-based-sfc/src/routes/(group)/lazyinside.component.vue +++ b/e2e/vue-router/basic-file-based-sfc/src/routes/(group)/lazyinside.component.vue @@ -11,7 +11,9 @@ const searchViaRouteApi = routeApi.useSearch() diff --git a/e2e/vue-router/basic-file-based-sfc/src/routes/(group)/subfolder/inside.component.vue b/e2e/vue-router/basic-file-based-sfc/src/routes/(group)/subfolder/inside.component.vue index 12b3dc0fa2f..516f6e1e9a5 100644 --- a/e2e/vue-router/basic-file-based-sfc/src/routes/(group)/subfolder/inside.component.vue +++ b/e2e/vue-router/basic-file-based-sfc/src/routes/(group)/subfolder/inside.component.vue @@ -11,7 +11,9 @@ const searchViaRouteApi = routeApi.useSearch() diff --git a/e2e/vue-router/basic-file-based-sfc/src/routes/__root.component.vue b/e2e/vue-router/basic-file-based-sfc/src/routes/__root.component.vue index 1520b305684..901948a2aba 100644 --- a/e2e/vue-router/basic-file-based-sfc/src/routes/__root.component.vue +++ b/e2e/vue-router/basic-file-based-sfc/src/routes/__root.component.vue @@ -1,5 +1,12 @@