Merge pull request #64 from tidbcloud/feat/try-vue-component

feat: implement vue component

README.md

@@ -1,6 +1,5 @@
 # TiSQLEditor
 
-
 SQL Editor is built on [CodeMirror6](https://codemirror.net/), a modern code editor that is written in TypeScript and supports a wide range of extensions. Based on that, we provide a set of extensions to make it easy to use and easy to extend, all these features are validated in the [TiDB Cloud](https://tidbcloud.com), with countless customers all around the world. We also contribute to the CodeMirror6 project, and we are happy to share our extensions with the community.
 
 👉🏻 [Try Full Featured Playground](https://tisqleditor-playground.netlify.app/)
@@ -16,7 +15,7 @@ https://github.com/tidbcloud/tisqleditor/assets/1284531/732b600f-5b4e-45d3-a3d2-
 ## Features
 
 - Support edit multiple SQL files
-- Supply React component (Vue component wip)
+- Supply React component and Vue component
 - Out of box extensions
 - AI Widget to chat with AI to help write or refine SQL
 
@@ -26,6 +25,7 @@ https://github.com/tidbcloud/tisqleditor/assets/1284531/732b600f-5b4e-45d3-a3d2-
 | ---------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------- |
 | [@tidbcloud/tisqleditor](./packages/core/README.md)                                                  | SQLEditorInstance with pre-configured extensions                          |
 | [@tidbcloud/tisqleditor-react](./packages/react/README.md)                                           | React component wrapper                                                   |
+| [@tidbcloud/tisqleditor-vue](./packages/vue/README.md)                                               | Vue component wrapper                                                     |
 | [@tidbcloud/codemirror-extension-ai-widget](./packages/extensions/ai-widget/README.md)               | A widget to chat with AI to help write or refine SQL                      |
 | [@tidbcloud/codemirror-extension-sql-parser](./packages/extensions/sql-parser/README.md)             | Parse the editor content to SQL statements                                |
 | [@tidbcloud/codemirror-extension-cur-sql](./packages/extensions/cur-sql/README.md)                   | Get the selected SQL statements                                           |
@@ -69,8 +69,9 @@ export function Editor() {
 ```
 
 ## Documentation
-* Official site: [https://tiui.tidbcloud.com/sql-editor](https://tiui.tidbcloud.com/sql-editor)
-* Documentation: [https://tiui.tidbcloud.com/docs/sql-editor-getting-started](https://tiui.tidbcloud.com/docs/sql-editor-getting-started)
+
+- Official site: [https://tiui.tidbcloud.com/sql-editor](https://tiui.tidbcloud.com/sql-editor)
+- Documentation: [https://tiui.tidbcloud.com/docs/sql-editor-getting-started](https://tiui.tidbcloud.com/docs/sql-editor-getting-started)
 
 ## Development
 

packages/vue/README.md

@@ -0,0 +1,48 @@
+# @tidbcloud/tisqleditor-vue
+
+This package provides a vue component wrap for `SQLEditorInstance` from `@tidbcloud/tisqleditor`.
+
+## Installation
+
+```shell
+npm install @tidbcloud/tisqleditor-vue
+```
+
+You need to install all its peer dependencies manually as well, such as `@codemirror/view`, `@codemirror/state`.
+
+## Usage
+
+`@tidbcloud/tisqleditor-vue` supports multiple CodeMirror instances, it uses `EditorCacheProvide` to cache the instances, then you can access all the cached editor instances anywhere inside the provide. You can put the provide in a proper place.
+
+```vue
+<script setup>
+import { EditorCacheProvide, SQLEditor } from '@tidbcloud/tisqleditor-vue'
+</script>
+
+<template>
+  <EditorCacheProvide>
+    <SQLEditor editorId="test" doc="select * from test;" />
+  </EditorCacheProvide>
+</template>
+```
+
+When `EditorCacheProvide` unmounts, it will clear all the cached editor instances.
+
+## API
+
+### EditorCacheProvide
+
+- `const cache=inject('editor-cache')`: get the cache
+- `cache.addEditor(editorId, instance)`: add new editor instance
+- `cache.getEditor(editorId)`: get the cached editor instance by editorId
+- `cache.deleteEditor(editorId)`: remove the editor instance from cache
+- `cache.clearEditors()`: clear all cached editor instances
+
+### SQLEditor Props
+
+- `class`: CodeMirror root container css class
+- `editorId`: editor id, used to differ multiple editor instances
+- `doc`: editor initial content
+- `sqlConfig`: config for SQL dialect, schemas, tables
+- `theme`: editor theme, `@tidbcloud/codemirror-extensions-themes` provides 2 simple themes, `bbedit` for light mode, `oneDark` for dark mode, you can choose any other themes from third-party libraries or customize it by self
+- `extraExts`: any other extra CodeMirror extensions you want to use, `@tidbcloud/tisqleditor-react` install some builtin extensions, likes `@codemirror/lang-sql`, `@tidbcloud/codemirror-extension-sql-parser`, `@tidbcloud/codemirror-extension-cur-sql`

packages/vue/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@tidbcloud/tisqleditor-vue",
+  "version": "0.0.1",
+  "description": "tisqleditor vue component",
+  "type": "module",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "files": [
+    "dist/*.js",
+    "dist/*.ts",
+    "package.json",
+    "README.md",
+    "CHANGELOG.md"
+  ],
+  "scripts": {
+    "build": "vue-tsc -b && vite build"
+  },
+  "keywords": [
+    "tidbcloud",
+    "sql",
+    "editor",
+    "codemirror",
+    "vue component"
+  ],
+  "author": "",
+  "license": "MIT",
+  "dependencies": {
+    "@tidbcloud/tisqleditor": "workspace:^"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.0.5",
+    "typescript": "^5.2.2",
+    "vite": "^5.3.4",
+    "vue": "^3.4.31",
+    "vue-tsc": "^2.0.24"
+  },
+  "peerDependencies": {
+    "vue": "^3.4.31"
+  }
+}

packages/vue/src/editor-cache-provide.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { provide, onUnmounted } from 'vue'
+import { EditorCache } from '@tidbcloud/tisqleditor'
+
+const editorCache = new EditorCache()
+
+provide('editor-cache', editorCache)
+
+onUnmounted(() => {
+  editorCache.clearEditors()
+})
+</script>
+
+<template>
+  <slot />
+</template>

packages/vue/src/index.ts

@@ -0,0 +1,4 @@
+import EditorCacheProvide from './editor-cache-provide.vue'
+import SQLEditor from './sql-editor.vue'
+
+export { EditorCacheProvide, SQLEditor }

packages/vue/src/sql-editor.vue

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import { ref, watch, inject, onMounted } from 'vue'
+import {
+  CreateSQLEditorOptions,
+  createSQLEditorInstance,
+  EditorCache
+} from '@tidbcloud/tisqleditor'
+
+type SQLEditorProps = CreateSQLEditorOptions & {
+  class?: string
+}
+const props = defineProps<SQLEditorProps>()
+
+const editorContainerRef = ref<HTMLInputElement | null>(null)
+const editorCache = inject('editor-cache', new EditorCache())
+
+function editorIdChange(newId: string, oldId: string) {
+  if (!editorContainerRef.value) {
+    return
+  }
+  const oldInst = editorCache.getEditor(oldId)
+  if (oldInst) {
+    editorContainerRef.value.removeChild(oldInst.editorView.dom)
+  }
+  let newInst = editorCache.getEditor(newId)
+  if (!newInst) {
+    const { theme, sqlConfig, ...rest } = props
+    newInst = createSQLEditorInstance({
+      theme,
+      sqlConfig,
+      ...rest,
+      editorId: newId
+    })
+    editorCache.addEditor(newId, newInst)
+  } else {
+    newInst.changeTheme(props.theme ?? [])
+    newInst.changeSQLConfig(props.sqlConfig ?? {})
+  }
+  editorContainerRef.value.appendChild(newInst.editorView.dom)
+  newInst.editorView.focus()
+}
+
+onMounted(() => {
+  editorIdChange(props.editorId, '')
+})
+
+watch(() => props.editorId, editorIdChange)
+watch(
+  () => props.theme,
+  (newVal) => editorCache.getEditor(props.editorId)?.changeTheme(newVal ?? [])
+)
+watch(
+  () => props.sqlConfig,
+  (newVal) =>
+    editorCache.getEditor(props.editorId)?.changeSQLConfig(newVal ?? {})
+)
+</script>
+
+<template>
+  <div :class="class" ref="editorContainerRef"></div>
+</template>

packages/vue/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "jsx": "preserve",
+    "outDir": "./dist"
+  },
+  "include": ["./src"]
+}

packages/vue/vite.config.js

@@ -0,0 +1,21 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+
+export default defineConfig({
+  plugins: [vue()],
+  build: {
+    lib: {
+      entry: 'src/index.ts',
+      fileName: 'index',
+      formats: ['es']
+    },
+    rollupOptions: {
+      external: ['vue'],
+      output: {
+        globals: {
+          vue: 'Vue'
+        }
+      }
+    }
+  }
+})