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

- 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.
2026-01-28 02:22:44 +08:00
commit 4cbec4ed1d
17 changed files with 2313 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1,5 @@
+node_modules
+dist
+.env
+.DS_Store
+.tanstack
--- a/index.html
+++ b/index.html
@@ -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>
--- a/package.json
+++ b/package.json
@@ -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"
+  }
+}
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/src/components/CodeEditor.tsx
+++ b/src/components/CodeEditor.tsx
@@ -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"
+    />
+  )
+}
--- a/src/index.css
+++ b/src/index.css
@@ -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;
+}
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -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} />)
+}
--- a/src/routeTree.gen.ts
+++ b/src/routeTree.gen.ts
@@ -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>()
--- a/src/routes/__root.tsx
+++ b/src/routes/__root.tsx
@@ -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" />
+    </>
+  )
+}
--- a/src/routes/about.tsx
+++ b/src/routes/about.tsx
@@ -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>
+  )
+}
--- a/src/routes/c.tsx
+++ b/src/routes/c.tsx
@@ -0,0 +1,9 @@
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/c')({
+  component: RouteComponent,
+})
+
+function RouteComponent() {
+  return <div>Hellodd!</div>
+}
--- a/src/routes/components/dd.tsx
+++ b/src/routes/components/dd.tsx
@@ -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>
+}
--- a/src/routes/editor/index.tsx
+++ b/src/routes/editor/index.tsx
@@ -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>
+  )
+}
--- a/src/routes/index.tsx
+++ b/src/routes/index.tsx
@@ -0,0 +1,9 @@
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/')({
+  component: RouteComponent,
+})
+
+function RouteComponent() {
+  return <div>test</div>
+}
--- a/src/routes/w/b.tsx
+++ b/src/routes/w/b.tsx
@@ -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>
+}
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -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"]
+}
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -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(),
+    // ...
+  ],
+})