@cloudcare/codemirror-dql 0.0.17 → 0.0.19

package/README.md

@@ -0,0 +1,162 @@
+# @cloudcare/codemirror-dql
+
+> 基于 [CodeMirror 6](https://codemirror.net/6/) 构建的 DQL 编辑器插件，提供完整的语法高亮、自动补全、函数提示、字段查询、语法检查能力，适用于指标查询、日志检索、埋点分析等场景。
+
+---
+
+## ✨ 功能特点
+
+- ✅ 支持 DQL 语法的高亮渲染（亮色/暗色主题）
+- ✅ 自动补全字段、函数、数据源、指标索引等
+- ✅ 实时语法校验（linter）
+- ✅ 可扩展的远程补全接口（继承 `DQLClient`）
+- ✅ 与 CodeMirror 插件生态完全兼容
+
+---
+
+## 📦 安装
+
+```bash
+npm install @cloudcare/codemirror-dql
+```
+
+依赖 CodeMirror 6 相关核心模块（如果尚未安装）：
+
+```bash
+npm install @codemirror/state @codemirror/view @codemirror/language
+```
+
+---
+
+## 🚀 快速上手
+
+### 初始化编辑器（基础语法高亮）
+
+```ts
+import { EditorView, basicSetup } from 'codemirror';
+import { EditorState } from '@codemirror/state';
+import { DQLExtension, baseTheme, dqlHighlighter } from '@cloudcare/codemirror-dql';
+import { syntaxHighlighting } from '@codemirror/language';
+
+const dql = new DQLExtension();
+
+const state = EditorState.create({
+  doc: 'L::re(`.*`):(*)',
+  extensions: [basicSetup, baseTheme, dql.asExtension(), syntaxHighlighting(dqlHighlighter)],
+});
+
+new EditorView({
+  state,
+  parent: document.getElementById('editor')!,
+});
+```
+
+---
+
+## ⚙️ 启用自动补全 & linter
+
+```ts
+const dql = new DQLExtension().activateCompletion(true).activateLinter(true).setComplete(new MyCustomDQLClient());
+```
+
+---
+
+## 🧩 自定义补全：实现 `DQLClient`
+
+```ts
+import { DQLClient, Matcher } from '@cloudcare/codemirror-dql';
+
+class MyCustomDQLClient extends DQLClient {
+  getIndexs(): Promise<string[]> {
+    return Promise.resolve(['default', 'index-a']);
+  }
+
+  getSourceList(namespace: string): Promise<string[]> {
+    return Promise.resolve(['source1', 'source2']);
+  }
+
+  getFields(namespace: string): Promise<any[]> {
+    return Promise.resolve([
+      { name: 'host', type: 'string', info: '主机名' },
+      { name: 'status', type: 'number', info: '状态码' },
+    ]);
+  }
+
+  showFunctions(): Promise<any[]> {
+    return Promise.resolve([
+      { name: 'show_field_key()', info: '展示字段列表' },
+      { name: 'show_measurement()', info: '展示指标名称' },
+    ]);
+  }
+}
+```
+
+---
+
+## 🎨 支持主题
+
+```ts
+import { dqlHighlighter, darkDqlHighlighter, lightTheme, darkTheme } from '@cloudcare/codemirror-dql';
+
+const themeExtensions = [syntaxHighlighting(darkDqlHighlighter), darkTheme];
+```
+
+---
+
+## 📦 TypeScript 类型支持
+
+插件提供完整类型定义：
+
+```ts
+interface FieldNameData {
+  name: string;
+  type: string;
+  info: string;
+}
+
+interface Matcher {
+  name: string;
+  type: string;
+  value?: string;
+}
+```
+
+---
+
+## 📚 示例：Vue 中使用
+
+```vue
+<template>
+  <div ref="editor" style="height: 200px; border: 1px solid #ccc;"></div>
+</template>
+
+<script lang="ts">
+import { defineComponent, onMounted, ref } from 'vue';
+import { EditorView } from '@codemirror/view';
+import { EditorState } from '@codemirror/state';
+import { DQLExtension, baseTheme, dqlHighlighter } from '@cloudcare/codemirror-dql';
+import { syntaxHighlighting } from '@codemirror/language';
+
+export default defineComponent({
+  setup() {
+    const editor = ref();
+
+    onMounted(() => {
+      const dql = new DQLExtension().activateCompletion(true).activateLinter(true);
+
+      const state = EditorState.create({
+        doc: '',
+        extensions: [baseTheme, dql.asExtension(), syntaxHighlighting(dqlHighlighter)],
+      });
+
+      new EditorView({
+        state,
+        parent: editor.value,
+      });
+    });
+
+    return { editor };
+  },
+});
+</script>
+```

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@cloudcare/codemirror-dql",
-    "version": "0.0.17",
+    "version": "0.0.19",
     "description": "a CodeMirror mode for the DQL language",
     "types": "dist/esm/index.d.ts",
     "module": "dist/esm/index.js",
@@ -23,7 +23,7 @@
     ],
     "license": "Apache-2.0",
     "dependencies": {
-        "@cloudcare/lezer-dql": "0.0.17"
+        "@cloudcare/lezer-dql": "0.0.19"
     },
     "devDependencies": {
         "@codemirror/autocomplete": "^6.18.6",
@@ -54,5 +54,5 @@
     "engines": {
         "node": ">=12.0.0"
     },
-    "gitHead": "95bb73adea01bf23a6219d56e43364bc58a3a9f8"
+    "gitHead": "13e7cb0f49683e6f381d1fa1e78e8ee91b645818"
 }