test/test-tanstack-router
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add CodeMirror-based code editor component and routing setup

Browse Source 
- Implemented CodeEditor component using CodeMirror for JavaScript editing.
- Added global styles in index.css for consistent UI.
- Set up routing with TanStack Router, including root and nested routes.
- Created About, C, and Editor routes with respective components.
- Integrated CodeEditor into the Editor route for code editing functionality.
- Configured TypeScript settings in tsconfig.json for strict type checking.
- Established Vite configuration for React and TanStack Router integration.
This commit is contained in:
熊潇
2026-01-28 02:22:44 +08:00
commit 4cbec4ed1d
17 changed files with 2313 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
.gitignore vendored Normal file
View File

@@ -0,0 +1,5 @@
node_modules
dist
.env
.DS_Store
.tanstack

12
index.html Normal file
View File

@@ -0,0 +1,12 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>TanStack Router App</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>

26
package.json Normal file
View File

@@ -0,0 +1,26 @@
{
"name": "tanstack-router-app",
"version": "1.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "tsc && vite build",
"preview": "vite preview"
},
"dependencies": {
"@codemirror/lang-javascript": "^6.2.4",
"@tanstack/react-router": "^1.157.16",
"@uiw/react-codemirror": "^4.25.4",
"react": "^19.2.4",
"react-dom": "^19.2.4"
},
"devDependencies": {
"@tanstack/react-router-devtools": "^1.157.16",
"@tanstack/router-plugin": "^1.157.16",
"@types/react": "^19.2.10",
"@types/react-dom": "^19.2.3",
"@vitejs/plugin-react": "^5.1.2",
"typescript": "^5.9.3",
"vite": "^7.3.1"
}
}

1860
pnpm-lock.yaml generated Normal file
View File

File diff suppressed because it is too large Load Diff

27
src/components/CodeEditor.tsx Normal file
View File

@@ -0,0 +1,27 @@
import CodeMirror from '@uiw/react-codemirror'
import { javascript } from '@codemirror/lang-javascript'
import { useState } from 'react'
interface CodeEditorProps {
initialValue?: string
onChange?: (value: string) => void
}
export function CodeEditor({ initialValue = '', onChange }: CodeEditorProps) {
const [value, setValue] = useState(initialValue)
const handleChange = (val: string) => {
setValue(val)
onChange?.(val)
}
return (
<CodeMirror
value={value}
height="500px"
extensions={[javascript()]}
onChange={handleChange}
theme="dark"
/>
)
}

58
src/index.css Normal file
View File

@@ -0,0 +1,58 @@
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
line-height: 1.6;
color: #333;
background-color: #f5f5f5;
}
a {
color: #0070f3;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
nav {
background-color: #fff;
padding: 1rem 2rem;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
nav ul {
display: flex;
list-style: none;
gap: 2rem;
}
nav a {
color: #666;
font-weight: 500;
}
nav a:hover,
nav a.active {
color: #0070f3;
}
main {
padding: 2rem;
max-width: 1200px;
margin: 0 auto;
}
h1 {
font-size: 2.5rem;
margin-bottom: 1rem;
}
p {
color: #666;
}

25
src/main.tsx Normal file
View File

@@ -0,0 +1,25 @@
import ReactDOM from 'react-dom/client'
import { RouterProvider, createRouter } from '@tanstack/react-router'
import { routeTree } from './routeTree.gen'
import './index.css'
// Set up a Router instance
const router = createRouter({
routeTree,
defaultPreload: 'intent',
scrollRestoration: true,
})
// Register things for typesafety
declare module '@tanstack/react-router' {
interface Register {
router: typeof router
}
}
const rootElement = document.getElementById('root')!
if (!rootElement.innerHTML) {
const root = ReactDOM.createRoot(rootElement)
root.render(<RouterProvider router={router} />)
}

156
src/routeTree.gen.ts Normal file
View File

@@ -0,0 +1,156 @@
/* 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 { Route as rootRouteImport } from './routes/__root'
import { Route as CRouteImport } from './routes/c'
import { Route as AboutRouteImport } from './routes/about'
import { Route as IndexRouteImport } from './routes/index'
import { Route as EditorIndexRouteImport } from './routes/editor/index'
import { Route as WBRouteImport } from './routes/w/b'
import { Route as ComponentsDdRouteImport } from './routes/components/dd'
const CRoute = CRouteImport.update({
id: '/c',
path: '/c',
getParentRoute: () => rootRouteImport,
} as any)
const AboutRoute = AboutRouteImport.update({
id: '/about',
path: '/about',
getParentRoute: () => rootRouteImport,
} as any)
const IndexRoute = IndexRouteImport.update({
id: '/',
path: '/',
getParentRoute: () => rootRouteImport,
} as any)
const EditorIndexRoute = EditorIndexRouteImport.update({
id: '/editor/',
path: '/editor/',
getParentRoute: () => rootRouteImport,
} as any)
const WBRoute = WBRouteImport.update({
id: '/w/b',
path: '/w/b',
getParentRoute: () => rootRouteImport,
} as any)
const ComponentsDdRoute = ComponentsDdRouteImport.update({
id: '/components/dd',
path: '/components/dd',
getParentRoute: () => rootRouteImport,
} as any)
export interface FileRoutesByFullPath {
'/': typeof IndexRoute
'/about': typeof AboutRoute
'/c': typeof CRoute
'/components/dd': typeof ComponentsDdRoute
'/w/b': typeof WBRoute
'/editor/': typeof EditorIndexRoute
}
export interface FileRoutesByTo {
'/': typeof IndexRoute
'/about': typeof AboutRoute
'/c': typeof CRoute
'/components/dd': typeof ComponentsDdRoute
'/w/b': typeof WBRoute
'/editor': typeof EditorIndexRoute
}
export interface FileRoutesById {
__root__: typeof rootRouteImport
'/': typeof IndexRoute
'/about': typeof AboutRoute
'/c': typeof CRoute
'/components/dd': typeof ComponentsDdRoute
'/w/b': typeof WBRoute
'/editor/': typeof EditorIndexRoute
}
export interface FileRouteTypes {
fileRoutesByFullPath: FileRoutesByFullPath
fullPaths: '/' | '/about' | '/c' | '/components/dd' | '/w/b' | '/editor/'
fileRoutesByTo: FileRoutesByTo
to: '/' | '/about' | '/c' | '/components/dd' | '/w/b' | '/editor'
id:
| '__root__'
| '/'
| '/about'
| '/c'
| '/components/dd'
| '/w/b'
| '/editor/'
fileRoutesById: FileRoutesById
}
export interface RootRouteChildren {
IndexRoute: typeof IndexRoute
AboutRoute: typeof AboutRoute
CRoute: typeof CRoute
ComponentsDdRoute: typeof ComponentsDdRoute
WBRoute: typeof WBRoute
EditorIndexRoute: typeof EditorIndexRoute
}
declare module '@tanstack/react-router' {
interface FileRoutesByPath {
'/c': {
id: '/c'
path: '/c'
fullPath: '/c'
preLoaderRoute: typeof CRouteImport
parentRoute: typeof rootRouteImport
}
'/about': {
id: '/about'
path: '/about'
fullPath: '/about'
preLoaderRoute: typeof AboutRouteImport
parentRoute: typeof rootRouteImport
}
'/': {
id: '/'
path: '/'
fullPath: '/'
preLoaderRoute: typeof IndexRouteImport
parentRoute: typeof rootRouteImport
}
'/editor/': {
id: '/editor/'
path: '/editor'
fullPath: '/editor/'
preLoaderRoute: typeof EditorIndexRouteImport
parentRoute: typeof rootRouteImport
}
'/w/b': {
id: '/w/b'
path: '/w/b'
fullPath: '/w/b'
preLoaderRoute: typeof WBRouteImport
parentRoute: typeof rootRouteImport
}
'/components/dd': {
id: '/components/dd'
path: '/components/dd'
fullPath: '/components/dd'
preLoaderRoute: typeof ComponentsDdRouteImport
parentRoute: typeof rootRouteImport
}
}
}
const rootRouteChildren: RootRouteChildren = {
IndexRoute: IndexRoute,
AboutRoute: AboutRoute,
CRoute: CRoute,
ComponentsDdRoute: ComponentsDdRoute,
WBRoute: WBRoute,
EditorIndexRoute: EditorIndexRoute,
}
export const routeTree = rootRouteImport
._addFileChildren(rootRouteChildren)
._addFileTypes<FileRouteTypes>()

43
src/routes/__root.tsx Normal file
View File

@@ -0,0 +1,43 @@
import { Link, Outlet, createRootRoute } from '@tanstack/react-router'
import { TanStackRouterDevtools } from '@tanstack/react-router-devtools'
export const Route = createRootRoute({
component: RootComponent,
})
function RootComponent() {
return (
<>
<div className="p-2 flex gap-2 text-lg">
<Link
to="/"
activeProps={{
className: 'font-bold',
}}
activeOptions={{ exact: true }}
>
Home
</Link>{' '}
<Link
to="/about"
activeProps={{
className: 'font-bold',
}}
>
About
</Link>
<Link
to="/editor"
activeProps={{
className: 'font-bold',
}}
>
Editor
</Link>
</div>
<hr />
<Outlet />
<TanStackRouterDevtools position="bottom-right" />
</>
)
}

13
src/routes/about.tsx Normal file
View File

@@ -0,0 +1,13 @@
import { createFileRoute } from '@tanstack/react-router'
export const Route = createFileRoute('/about')({
component: AboutComponent,
})
function AboutComponent() {
return (
<div className="p-2">
<h3>About</h3>
</div>
)
}

9
src/routes/c.tsx Normal file
View File

@@ -0,0 +1,9 @@
import { createFileRoute } from '@tanstack/react-router'
export const Route = createFileRoute('/c')({
component: RouteComponent,
})
function RouteComponent() {
return <div>Hellodd!</div>
}

9
src/routes/components/dd.tsx Normal file
View File

@@ -0,0 +1,9 @@
import { createFileRoute } from '@tanstack/react-router'
export const Route = createFileRoute('/components/dd')({
component: RouteComponent,
})
function RouteComponent() {
return <div>Hello "/components/dd"!</div>
}

15
src/routes/editor/index.tsx Normal file
View File

@@ -0,0 +1,15 @@
import { createFileRoute } from '@tanstack/react-router'
import { CodeEditor } from '../../components/CodeEditor'
export const Route = createFileRoute('/editor/')({
component: RouteComponent,
})
function RouteComponent() {
return (
<div style={{ padding: '20px' }}>
<h1>Code Editor</h1>
<CodeEditor initialValue="// Write your code here\nconsole.log('Hello CodeMirror!')" />
</div>
)
}

9
src/routes/index.tsx Normal file
View File

@@ -0,0 +1,9 @@
import { createFileRoute } from '@tanstack/react-router'
export const Route = createFileRoute('/')({
component: RouteComponent,
})
function RouteComponent() {
return <div>test</div>
}

9
src/routes/w/b.tsx Normal file
View File

@@ -0,0 +1,9 @@
import { createFileRoute } from '@tanstack/react-router'
export const Route = createFileRoute('/w/b')({
component: RouteComponent,
})
function RouteComponent() {
return <div>Hello "/w/b"!</div>
}

20
tsconfig.json Normal file
View File

@@ -0,0 +1,20 @@
{
"compilerOptions": {
"target": "ES2020",
"useDefineForClassFields": true,
"lib": ["ES2020", "DOM", "DOM.Iterable"],
"module": "ESNext",
"skipLibCheck": true,
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx",
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true
},
"include": ["src"]
}

17
vite.config.ts Normal file
View File

@@ -0,0 +1,17 @@
// vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { tanstackRouter } from '@tanstack/router-plugin/vite'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
// Please make sure that '@tanstack/router-plugin' is passed before '@vitejs/plugin-react'
tanstackRouter({
target: 'react',
autoCodeSplitting: true,
}),
react(),
// ...
],
})