feat: add codemirror perf

packages/theme-preview/package.json

@@ -33,6 +33,7 @@
     "@eslint/js": "^9.26.0",
     "@tailwindcss/aspect-ratio": "^0.4.2",
     "@tailwindcss/typography": "^0.5.16",
+    "@tailwindcss/vite": "^4.1.6",
     "@types/node": "^22.15.17",
     "@types/react": "^19.1.3",
     "@types/react-dom": "^19.1.3",
@@ -42,7 +43,7 @@
     "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-react-refresh": "^0.4.20",
     "globals": "^16.1.0",
-    "tailwind-merge": "^3.2.0",
+    "tailwind-merge": "^3.3.0",
     "tailwindcss": "^4.1.6",
     "tailwindcss-animate": "^1.0.7",
     "typescript": "^5.8.3",

packages/theme-preview/src/App.tsx

@@ -14,7 +14,7 @@ export const App = () => {
         <Router>
           <Routes>
             <Route path='/' element={<Navigate to='/modal/' />} />
-            <Route path='/modal/*' element={<FlowApps />} />
+            {/* <Route path='/modal/*' element={<FlowApps />} /> */}
             <Route path='/codemirror/*' element={<CodeMirrorApp />} />
             <Route path='/404' element={<div>404</div>} />
             <Route path='*' element={<div>404</div>} />

packages/theme-preview/src/globals.css

@@ -1,15 +1 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@layer base {
-  h1 {
-    @apply text-2xl font-bold;
-  }
-  h2 {
-    @apply text-xl font-bold;
-  }
-  h3 {
-    @apply text-lg font-bold;
-  }
-}
+@import 'tailwindcss';

packages/theme-preview/src/main.tsx

@@ -1,6 +1,8 @@
 import { createRoot } from 'react-dom/client';
 import { App } from './App.tsx';
-// import './tailwind.css';
+const App2 = () => {
+  return <div>hello</div>;
+};
 import './globals.css';
 import './index.css';
 

packages/theme-preview/src/pages/codemirror/Json.tsx

@@ -1,4 +1,4 @@
-import { createEditorInstance } from '@kevisual/codemirror/json';
+import { createEditor } from '@kevisual/codemirror/json';
 import { useEffect, useRef } from 'react';
 export const App = () => {
   const ref = useRef<HTMLDivElement>(null);
@@ -6,7 +6,7 @@ export const App = () => {
     init();
   }, []);
   const init = () => {
-    const editor = createEditorInstance(ref.current!);
+    const editor = createEditor(ref.current!);
     editor.dom.style.height = '100%';
   };
   return (

packages/theme-preview/src/tailwind.css

@@ -1,3 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;

packages/theme-preview/tailwind.config.js

@@ -1,36 +0,0 @@
-console.log('tailwind.config.js');
-/** @type {import('tailwindcss').Config} */
-export default {
-  darkMode: ['class'],
-  content: [
-    './src/**/*.{ts,tsx}',
-    './node_modules/@abearxiong/flows/components/**/*.{ts,tsx}', //
-    './node_modules/@abearxiong/flows/hooks/**/*.{ts,tsx}', //
-    './node_modules/@abearxiong/flows/src/**/*.{ts,tsx}' //
-  ],
-  plugins: [require('@tailwindcss/aspect-ratio'), require('@tailwindcss/typography')],
-  theme: {
-    extend: {},
-    screen: {
-      sm: '640px',
-      // => @media (min-width: 640px) { ... }
-
-      md: '768px',
-      // => @media (min-width: 768px) { ... }
-
-      lg: '1024px',
-      // => @media (min-width: 1024px) { ... }
-
-      xl: '1280px',
-      // => @media (min-width: 1280px) { ... }
-
-      '2xl': '1536px',
-      // => @media (min-width: 1536px) { ... }
-      '3xl': '1920px',
-      // => @media (min-width: 1920) { ... }
-      '4xl': '2560px'
-      // => @media (min-width: 2560) { ... }
-    }
-  },
-  plugins: [require('tailwindcss-animate')]
-};

packages/theme-preview/vite.config.ts

@@ -1,25 +1,18 @@
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
-import tailwindcss from 'tailwindcss'
-import autoprefixer from 'autoprefixer'
-import path from 'path'
-import nesting from 'tailwindcss/nesting'
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import tailwindcss from '@tailwindcss/vite';
+import path from 'path';
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react()],
-  css: {
-    postcss: {
-      plugins: [nesting, tailwindcss, autoprefixer]
-    }
-  },
+  plugins: [react(), tailwindcss()],
   resolve: {
     alias: {
-      '@': path.resolve(__dirname, './src')
-    }
+      '@': path.resolve(__dirname, './src'),
+    },
   },
   define: {
-    DEV_SERVER: JSON.stringify(process.env.NODE_ENV === 'development')
+    DEV_SERVER: JSON.stringify(process.env.NODE_ENV === 'development'),
   },
   server: {
     port: 7101,
@@ -27,8 +20,8 @@ export default defineConfig({
       '/api': {
         target: 'http://localhost:3000',
         changeOrigin: true,
-        rewrite: (path) => path.replace(/^\/api/, '/api')
-      }
-    }
-  }
-})
+        rewrite: (path) => path.replace(/^\/api/, '/api'),
+      },
+    },
+  },
+});