diff --git a/README.md b/README.md index e7e0c66..6f6656b 100644 --- a/README.md +++ b/README.md @@ -77,7 +77,7 @@ export function Editor() { ### Setup -- node.js >18.16.0 +- node.js > 20.0 - [enable corepack](https://www.totaltypescript.com/how-to-use-corepack): `corepack enable && corepack enable npm` ### Local Development diff --git a/package.json b/package.json index a778dc7..1d7dbf9 100644 --- a/package.json +++ b/package.json @@ -9,9 +9,11 @@ "dev": "pnpm -r --parallel dev", "dev:playground": "pnpm --filter @tidbcloud/tisqleditor-playground... --parallel dev", "dev:playground-nextjs": "pnpm --filter @tidbcloud/tisqleditor-playground-nextjs... --parallel dev", + "dev:vue-demo": "pnpm --filter @tidbcloud/tisqleditor-vue-demo... --parallel dev", "build": "pnpm -r build", "build:playground": "pnpm --filter @tidbcloud/tisqleditor-playground... run build", "build:playground-nextjs": "pnpm --filter @tidbcloud/tisqleditor-playground-nextjs... run build", + "build:vue-demo": "pnpm --filter @tidbcloud/tisqleditor-vue-demo... run build", "test": "jest", "release": "changeset publish" }, diff --git a/packages/playground-nextjs/package.json b/packages/playground-nextjs/package.json index 06af497..0cad68c 100644 --- a/packages/playground-nextjs/package.json +++ b/packages/playground-nextjs/package.json @@ -1,7 +1,7 @@ { "name": "@tidbcloud/tisqleditor-playground-nextjs", "private": true, - "version": "0.0.1", + "version": "0.0.6", "scripts": { "dev": "next dev", "build": "next build", diff --git a/packages/vue-demo/.gitignore b/packages/vue-demo/.gitignore new file mode 100644 index 0000000..a547bf3 --- /dev/null +++ b/packages/vue-demo/.gitignore @@ -0,0 +1,24 @@ +# Logs +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* +pnpm-debug.log* +lerna-debug.log* + +node_modules +dist +dist-ssr +*.local + +# Editor directories and files +.vscode/* +!.vscode/extensions.json +.idea +.DS_Store +*.suo +*.ntvs* +*.njsproj +*.sln +*.sw? diff --git a/packages/vue-demo/README.md b/packages/vue-demo/README.md new file mode 100644 index 0000000..3ca10cb --- /dev/null +++ b/packages/vue-demo/README.md @@ -0,0 +1,16 @@ +# TiSQLEditor Vue Component Demo + +This demo is used to test `@tidbcloud/tisqleditor-vue` package, created by Vue3+Typescript+Vite. + +## Preview + +👉🏻 [Try it](https://tisqleditor-vue-demo.vercel.app) + +![tisqleditor vue demo](./public/tisqleditor-vue-demo.png) + +## Getting Started + +```bash +pnpm i +pnpm dev +``` diff --git a/packages/vue-demo/index.html b/packages/vue-demo/index.html new file mode 100644 index 0000000..0833c4a --- /dev/null +++ b/packages/vue-demo/index.html @@ -0,0 +1,13 @@ + + + + + + + TiSQLEditor Vue Demo + + +
+ + + diff --git a/packages/vue-demo/package.json b/packages/vue-demo/package.json new file mode 100644 index 0000000..9860d7e --- /dev/null +++ b/packages/vue-demo/package.json @@ -0,0 +1,25 @@ +{ + "name": "@tidbcloud/tisqleditor-vue-demo", + "private": true, + "version": "0.0.6", + "type": "module", + "scripts": { + "dev": "vite", + "build": "vue-tsc -b && vite build", + "preview": "vite preview" + }, + "dependencies": { + "@tidbcloud/codemirror-extension-ai-widget": "workspace:^", + "@tidbcloud/codemirror-extension-cur-sql-gutter": "workspace:^", + "@tidbcloud/codemirror-extension-sql-autocomplete": "workspace:^", + "@tidbcloud/codemirror-extension-themes": "workspace:^", + "@tidbcloud/tisqleditor-vue": "workspace:^", + "vue": "^3.4.31" + }, + "devDependencies": { + "@vitejs/plugin-vue": "^5.0.5", + "typescript": "^5.2.2", + "vite": "^5.3.4", + "vue-tsc": "^2.0.24" + } +} diff --git a/packages/vue-demo/public/tisqleditor-vue-demo.png b/packages/vue-demo/public/tisqleditor-vue-demo.png new file mode 100644 index 0000000..a8ec133 Binary files /dev/null and b/packages/vue-demo/public/tisqleditor-vue-demo.png differ diff --git a/packages/vue-demo/public/vite.svg b/packages/vue-demo/public/vite.svg new file mode 100644 index 0000000..e7b8dfb --- /dev/null +++ b/packages/vue-demo/public/vite.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/vue-demo/public/vue.svg b/packages/vue-demo/public/vue.svg new file mode 100644 index 0000000..770e9d3 --- /dev/null +++ b/packages/vue-demo/public/vue.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/vue-demo/src/App.vue b/packages/vue-demo/src/App.vue new file mode 100644 index 0000000..089a3ab --- /dev/null +++ b/packages/vue-demo/src/App.vue @@ -0,0 +1,68 @@ + + + + + diff --git a/packages/vue-demo/src/lib/delay.ts b/packages/vue-demo/src/lib/delay.ts new file mode 100644 index 0000000..9c70749 --- /dev/null +++ b/packages/vue-demo/src/lib/delay.ts @@ -0,0 +1,3 @@ +export function delay(ms: number) { + return new Promise((resolve) => setTimeout(resolve, ms)) +} diff --git a/packages/vue-demo/src/main.ts b/packages/vue-demo/src/main.ts new file mode 100644 index 0000000..2425c0f --- /dev/null +++ b/packages/vue-demo/src/main.ts @@ -0,0 +1,5 @@ +import { createApp } from 'vue' +import './style.css' +import App from './App.vue' + +createApp(App).mount('#app') diff --git a/packages/vue-demo/src/style.css b/packages/vue-demo/src/style.css new file mode 100644 index 0000000..bb131d6 --- /dev/null +++ b/packages/vue-demo/src/style.css @@ -0,0 +1,79 @@ +:root { + font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; + line-height: 1.5; + font-weight: 400; + + color-scheme: light dark; + color: rgba(255, 255, 255, 0.87); + background-color: #242424; + + font-synthesis: none; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +a { + font-weight: 500; + color: #646cff; + text-decoration: inherit; +} +a:hover { + color: #535bf2; +} + +body { + margin: 0; + display: flex; + place-items: center; + min-width: 320px; + min-height: 100vh; +} + +h1 { + font-size: 3.2em; + line-height: 1.1; +} + +button { + border-radius: 8px; + border: 1px solid transparent; + padding: 0.6em 1.2em; + font-size: 1em; + font-weight: 500; + font-family: inherit; + background-color: #1a1a1a; + cursor: pointer; + transition: border-color 0.25s; +} +button:hover { + border-color: #646cff; +} +button:focus, +button:focus-visible { + outline: 4px auto -webkit-focus-ring-color; +} + +.card { + padding: 2em; +} + +#app { + max-width: 1280px; + margin: 0 auto; + padding: 2rem; + text-align: center; +} + +@media (prefers-color-scheme: light) { + :root { + color: #213547; + background-color: #ffffff; + } + a:hover { + color: #747bff; + } + button { + background-color: #f9f9f9; + } +} diff --git a/packages/vue-demo/src/vite-env.d.ts b/packages/vue-demo/src/vite-env.d.ts new file mode 100644 index 0000000..11f02fe --- /dev/null +++ b/packages/vue-demo/src/vite-env.d.ts @@ -0,0 +1 @@ +/// diff --git a/packages/vue-demo/tsconfig.app.json b/packages/vue-demo/tsconfig.app.json new file mode 100644 index 0000000..b8e9723 --- /dev/null +++ b/packages/vue-demo/tsconfig.app.json @@ -0,0 +1,27 @@ +{ + "compilerOptions": { + "composite": true, + "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo", + "target": "ES2020", + "useDefineForClassFields": true, + "module": "ESNext", + "lib": ["ES2020", "DOM", "DOM.Iterable"], + "skipLibCheck": true, + + /* Bundler mode */ + "moduleResolution": "bundler", + "allowImportingTsExtensions": true, + "resolveJsonModule": true, + "isolatedModules": true, + "moduleDetection": "force", + "noEmit": true, + "jsx": "preserve", + + /* Linting */ + "strict": true, + "noUnusedLocals": true, + "noUnusedParameters": true, + "noFallthroughCasesInSwitch": true + }, + "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"] +} diff --git a/packages/vue-demo/tsconfig.json b/packages/vue-demo/tsconfig.json new file mode 100644 index 0000000..ea9d0cd --- /dev/null +++ b/packages/vue-demo/tsconfig.json @@ -0,0 +1,11 @@ +{ + "files": [], + "references": [ + { + "path": "./tsconfig.app.json" + }, + { + "path": "./tsconfig.node.json" + } + ] +} diff --git a/packages/vue-demo/tsconfig.node.json b/packages/vue-demo/tsconfig.node.json new file mode 100644 index 0000000..3afdd6e --- /dev/null +++ b/packages/vue-demo/tsconfig.node.json @@ -0,0 +1,13 @@ +{ + "compilerOptions": { + "composite": true, + "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo", + "skipLibCheck": true, + "module": "ESNext", + "moduleResolution": "bundler", + "allowSyntheticDefaultImports": true, + "strict": true, + "noEmit": true + }, + "include": ["vite.config.ts"] +} diff --git a/packages/vue-demo/vite.config.ts b/packages/vue-demo/vite.config.ts new file mode 100644 index 0000000..315212d --- /dev/null +++ b/packages/vue-demo/vite.config.ts @@ -0,0 +1,7 @@ +import { defineConfig } from 'vite' +import vue from '@vitejs/plugin-vue' + +// https://vitejs.dev/config/ +export default defineConfig({ + plugins: [vue()] +}) diff --git a/packages/vue/package.json b/packages/vue/package.json index 9515d1c..ab48242 100644 --- a/packages/vue/package.json +++ b/packages/vue/package.json @@ -1,6 +1,6 @@ { "name": "@tidbcloud/tisqleditor-vue", - "version": "0.0.3", + "version": "0.0.6", "description": "tisqleditor vue component", "type": "module", "main": "dist/index.js", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 7dcab03..45e7623 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -690,6 +690,40 @@ importers: specifier: ^2.0.24 version: 2.0.28(typescript@5.4.5) + packages/vue-demo: + dependencies: + '@tidbcloud/codemirror-extension-ai-widget': + specifier: workspace:^ + version: link:../extensions/ai-widget + '@tidbcloud/codemirror-extension-cur-sql-gutter': + specifier: workspace:^ + version: link:../extensions/cur-sql-gutter + '@tidbcloud/codemirror-extension-sql-autocomplete': + specifier: workspace:^ + version: link:../extensions/sql-autocomplete + '@tidbcloud/codemirror-extension-themes': + specifier: workspace:^ + version: link:../extensions/themes + '@tidbcloud/tisqleditor-vue': + specifier: workspace:^ + version: link:../vue + vue: + specifier: ^3.4.31 + version: 3.4.34(typescript@5.4.5) + devDependencies: + '@vitejs/plugin-vue': + specifier: ^5.0.5 + version: 5.1.0(vite@5.3.4(@types/node@20.14.2))(vue@3.4.34(typescript@5.4.5)) + typescript: + specifier: ^5.2.2 + version: 5.4.5 + vite: + specifier: ^5.3.4 + version: 5.3.4(@types/node@20.14.2) + vue-tsc: + specifier: ^2.0.24 + version: 2.0.28(typescript@5.4.5) + packages: '@adobe/css-tools@4.4.0':