@coding-script/script-engine 0.0.6 → 0.0.8

package/README.md

@@ -1,20 +1,21 @@
 [![npm](https://img.shields.io/npm/v/@coding-script/script-engine.svg)](https://www.npmjs.com/package/@coding-script/script-engine)
 # Script Engine
 
-基于 React + CodeMirror 6 的 Groovy 脚本编辑器组件库，提供语法高亮、动态类型自动补全、属性面板等功能。
+基于 React + CodeMirror 6 的多语言脚本编辑器组件库，内置支持 Groovy 和 JavaScript，提供语法高亮、动态类型自动补全、属性面板等功能。
 
 ## 功能特性
 
-- **Groovy 语法高亮**：基于 CodeMirror 6，支持完整的 Groovy/Java 语法着色
+- **多语言支持**：内置 Groovy 和 JavaScript 语言支持，支持通过 `LanguageConfig` 扩展任意语言
+- **语法高亮**：基于 CodeMirror 6，通过 `@codemirror/lang-*` 系列包提供各语言的语法着色
 - **动态类型自动补全**：基于 `ScriptMetadata` 提供变量名补全和点号链式访问补全（如 `request.test.name`）
-- **Groovy 语法提示**：内置 `if`/`for`/`while`/`println`/`return` 等常用 Groovy 语法片段
-- **代码格式化**：内置 Groovy 格式化器，也可通过 `onFormat` 自定义格式化逻辑
+- **语言语法提示**：内置各语言的常用语法片段（`if`/`for`/`while`/`return` 等），支持 tab-stop 占位符
+- **代码格式化**：Groovy 内置格式化器，也可通过 `onFormat` 自定义格式化逻辑
 - **属性面板**：右侧侧边栏展示主函数签名、函数入参、绑定参数、数据类型（字段和方法），支持折叠/展开和拖拽调节宽度
 - **脚本说明**：工具栏"脚本说明"按钮，点击展开/收起脚本描述弹框，支持多行文本和 `key: value` 格式高亮
 - **主题切换**：暗色/亮色两套主题，编辑器、补全弹窗、属性面板同步切换，编辑器内部管理主题状态
 - **全屏模式**：支持 CSS 全屏（`position: fixed` 覆盖视口），不影响编辑器内容
 - **自定义工具栏**：通过 `toolbarExtra` 传入任意 React 节点
-- **热更新**：主题和 metadata 变化时通过 Compartment 热更新，不重建编辑器，不丢失用户输入
+- **热更新**：主题、语言和 metadata 变化时通过 Compartment 热更新，不重建编辑器，不丢失用户输入
 
 ## 安装
 
@@ -77,6 +78,7 @@ function App() {
     <ScriptCodeEditor
       value="def run(request){\n    return request.count;\n}\n"
       title="Groovy 脚本编辑器"
+      language="groovy"
       defaultTheme="dark"
       metadata={metadata}
       enableThemeToggle
@@ -92,6 +94,32 @@ function App() {
 }
 ```
 
+### JavaScript 用法
+
+```tsx
+import { ScriptCodeEditor } from '@coding-script/script-engine';
+
+function App() {
+  return (
+    <ScriptCodeEditor
+      value="function run(request) {\n    return request.count;\n}\n"
+      title="JavaScript 脚本编辑器"
+      language="javascript"
+      defaultTheme="dark"
+      metadata={metadata}
+      enableThemeToggle
+      enableFormat
+      enableCompile
+      enableFullscreen
+      onFormat={() => {
+        // JavaScript 无内置格式化器，需自行提供
+        // 例如使用 prettier
+      }}
+    />
+  );
+}
+```
+
 ## Props
 
 | 属性 | 类型 | 默认值 | 说明 |
@@ -99,7 +127,8 @@ function App() {
 | `value` | `string` | `undefined` | 代码内容 |
 | `readonly` | `boolean` | `false` | 是否只读 |
 | `onChange` | `(value: string) => void` | `undefined` | 代码变化回调 |
-| `placeholder` | `string` | `'请输入 Groovy 脚本...'` | 空内容占位符 |
+| `language` | `string \| LanguageConfig` | `'groovy'` | 编程语言配置，支持内置语言名或自定义配置 |
+| `placeholder` | `string` | 由语言配置决定 | 空内容占位符（覆盖语言默认值） |
 | `defaultTheme` | `'dark' \| 'light'` | `'dark'` | 初始主题，编辑器内部管理状态 |
 | `onThemeChange` | `(theme: 'dark' \| 'light') => void` | `undefined` | 主题切换通知回调 |
 | `title` | `string` | `undefined` | 工具栏标题 |
@@ -113,7 +142,7 @@ function App() {
 | 属性 | 类型 | 默认值 | 说明 |
 |---|---|---|---|
 | `enableThemeToggle` | `boolean` | `false` | 是否显示主题切换按钮 |
-| `enableFormat` | `boolean` | `false` | 是否显示格式化按钮（需配合 `onFormat`） |
+| `enableFormat` | `boolean` | `false` | 是否显示格式化按钮（需配合 `onFormat` 或 `language.formatter`） |
 | `enableCompile` | `boolean` | `false` | 是否显示编译验证按钮（需配合 `onCompile`） |
 | `enableFullscreen` | `boolean` | `false` | 是否显示全屏按钮 |
 
@@ -121,7 +150,7 @@ function App() {
 
 | 属性 | 类型 | 默认值 | 说明 |
 |---|---|---|---|
-| `onFormat` | `() => void` | `undefined` | 格式化代码回调（不提供时使用内置 Groovy 格式化器） |
+| `onFormat` | `() => void` | `undefined` | 格式化代码回调（优先级高于 `language.formatter`） |
 | `onCompile` | `(code: string) => void` | `undefined` | 编译/测试脚本回调 |
 
 ### 自定义工具栏
@@ -245,6 +274,87 @@ interface ScriptRequestInfo {
 
 > **注意**：`metadata` 必须是解析后的 JavaScript 对象，不能是 JSON 字符串。如果从 API 获取的是 JSON 字符串，需要先 `JSON.parse()` 再传入。
 
+## 多语言支持
+
+### 内置语言
+
+组件内置支持以下语言：
+
+| 语言名 | 语法高亮 | 语法片段 | 内置格式化器 |
+|---|---|---|---|
+| `'groovy'` | `@codemirror/lang-java` | 21 个（`if`/`for`/`def`/`each`/`collect` 等） | ✅ `GroovyFormatter` |
+| `'javascript'` | `@codemirror/lang-javascript` | 22 个（`if`/`for`/`function`/`=>`/`class` 等） | ❌（可通过 `onFormat` 提供） |
+
+使用内置语言只需传入语言名：
+
+```tsx
+<ScriptCodeEditor language="groovy" />
+<ScriptCodeEditor language="javascript" />
+```
+
+### 自定义语言扩展
+
+通过传入 `LanguageConfig` 对象可以支持任意语言：
+
+```tsx
+import { python } from '@codemirror/lang-python';
+
+const PYTHON_SNIPPETS = [
+  { label: 'def', type: 'keyword', apply: snippet('def ${name}(${params}):\n\t${}\n') },
+  { label: 'class', type: 'keyword', apply: snippet('class ${ClassName}:\n\tdef __init__(self):\n\t\t${}\n') },
+  { label: 'if', type: 'keyword', apply: snippet('if ${condition}:\n\t${}\n') },
+  { label: 'for', type: 'keyword', apply: snippet('for ${item} in ${iterable}:\n\t${}\n') },
+  { label: 'print', type: 'keyword', apply: snippet('print(${})') },
+  { label: 'return', type: 'keyword', apply: snippet('return ${}') },
+  // ... 更多语法片段
+];
+
+<ScriptCodeEditor
+  language={{
+    name: 'python',
+    displayName: 'Python',
+    extension: () => python(),
+    keywordSnippets: PYTHON_SNIPPETS,
+    syntaxNodeNames: {
+      stringNodes: ['String'],
+      commentNodes: ['LineComment', 'BlockComment'],
+    },
+    placeholder: '请输入 Python 脚本...',
+    formatter: (code) => customPythonFormatter(code),
+  }}
+/>
+```
+
+### LanguageConfig 类型定义
+
+```typescript
+interface LanguageConfig {
+  /** 语言标识名（小写） */
+  name: string;
+  /** 显示名称 */
+  displayName: string;
+  /** CodeMirror 语言扩展工厂 */
+  extension: () => Extension;
+  /** 关键字和语法片段列表 */
+  keywordSnippets: readonly Completion[];
+  /** 语法树节点名（用于判断字符串/注释位置，抑制自动补全） */
+  syntaxNodeNames: {
+    /** 字符串类节点名 */
+    stringNodes: string[];
+    /** 注释类节点名 */
+    commentNodes: string[];
+  };
+  /** 默认占位符文本（可选） */
+  placeholder?: string;
+  /** 内置格式化函数（可选，优先级低于 onFormat prop） */
+  formatter?: (code: string) => string;
+}
+```
+
+### 语言切换热更新
+
+语言切换时通过 Compartment 热更新，不重建编辑器，不丢失用户已输入的内容。
+
 ## 自动补全
 
 提供 metadata 后，编辑器支持以下补全能力：
@@ -254,9 +364,11 @@ interface ScriptRequestInfo {
 | `re` | 弹出 `request`、`$request` 等变量 |
 | `request.` | 弹出 `count`、`test`、`isSupport` 等字段和方法 |
 | `request.test.` | 弹出 `id`、`name` 等链式访问成员 |
-| `if` / `for` / `while` | 弹出 Groovy 语法片段（含 tab-stop 占位符） |
+| `if` / `for` / `while` | 弹出当前语言的语法片段（含 tab-stop 占位符） |
+
+不提供 metadata 时，仅启用当前语言的关键字和语法片段补全。
 
-不提供 metadata 时，仅启用 Groovy 关键字和语法片段补全。
+> 补全不会在字符串和注释内触发（通过各语言的语法树节点名判断）。
 
 ## 本地开发
 
@@ -275,7 +387,7 @@ pnpm run dev:app-pc
 
 ## 技术栈
 
-- **编辑器**：[CodeMirror 6](https://codemirror.net/)（`@codemirror/view`、`state`、`autocomplete`、`lang-java`、`theme-one-dark`）
+- **编辑器**：[CodeMirror 6](https://codemirror.net/)（`@codemirror/view`、`state`、`autocomplete`、`lang-java`、`lang-javascript`、`theme-one-dark`）
 - **构建工具**：[Rslib](https://rslib.rs/)（库）+ [Rsbuild](https://rsbuild.dev/)（演示应用）
 - **包管理**：pnpm monorepo（workspaces）
 - **UI**：纯 CSS-in-JS（React `style` 对象），库本身不依赖 Ant Design

package/dist/autocomplete/completion-source.d.ts

@@ -1,11 +1,25 @@
 import { type CompletionSource } from '@codemirror/autocomplete';
-import type { ScriptMetadata } from '../types';
+import type { LanguageConfig, ScriptMetadata } from '../types';
+/**
+ * 创建语言无关的自动补全源
+ *
+ * 当 metadata 存在时，同时提供元数据驱动的类型补全和语言关键字片段补全。
+ * 当 metadata 为空时，仅提供关键字片段补全。
+ *
+ * @param languageConfig 语言配置（提供 keywordSnippets 和 syntaxNodeNames）
+ * @param metadata 脚本元数据（可选，提供变量/字段/方法补全）
+ */
+export declare function createCompletionSource(languageConfig: LanguageConfig, metadata?: ScriptMetadata): CompletionSource;
 /**
  * 创建绑定到指定元数据的 Groovy 自动补全源
  * 同时提供元数据驱动的类型补全和 Groovy 常用语法补全
+ *
+ * @deprecated 请使用 `createCompletionSource(languageConfig, metadata)` 代替
  */
 export declare function createGroovyCompletionSource(metadata: ScriptMetadata): CompletionSource;
 /**
  * 创建仅包含 Groovy 语法提示的补全源（无元数据时使用）
+ *
+ * @deprecated 请使用 `createCompletionSource(languageConfig)` 代替
  */
 export declare function createGroovyKeywordSource(): CompletionSource;

package/dist/autocomplete/completion-source.js

@@ -1,6 +1,6 @@
-import { snippet } from "@codemirror/autocomplete";
 import { syntaxTree } from "@codemirror/language";
 import { resolveChainType } from "./resolve.js";
+import { groovyConfig } from "../languages/groovy";
 function formatFunctionSignature(fn) {
     const params = fn.parameters.map((p)=>`${p.name}: ${p.dataType}`).join(', ');
     return `(${params})`;
@@ -28,170 +28,21 @@ function buildMemberCompletions(typeInfo) {
     }
     return options;
 }
-function isInStringOrComment(context) {
+function isInStringOrComment(context, syntaxNodeNames) {
     const node = syntaxTree(context.state).resolveInner(context.pos, -1);
     const name = node.name;
-    return 'String' === name || 'StringLiteral' === name || 'LineComment' === name || 'BlockComment' === name || 'CharLiteral' === name;
+    return syntaxNodeNames.stringNodes.includes(name) || syntaxNodeNames.commentNodes.includes(name);
 }
-const GROOVY_SNIPPETS = [
-    {
-        label: 'if',
-        detail: '条件语句',
-        info: '如果条件为真则执行代码块',
-        snippet: 'if (${condition}) {\n\t${}\n}',
-        boost: -1
-    },
-    {
-        label: 'else',
-        detail: '否则分支',
-        info: '条件为假时执行的代码块',
-        snippet: 'else {\n\t${}\n}',
-        boost: -2
-    },
-    {
-        label: 'for',
-        detail: '循环语句',
-        info: '遍历集合或范围',
-        snippet: 'for (${item} in ${collection}) {\n\t${}\n}',
-        boost: -1
-    },
-    {
-        label: 'while',
-        detail: '循环语句',
-        info: '当条件为真时循环执行',
-        snippet: 'while (${condition}) {\n\t${}\n}',
-        boost: -1
-    },
-    {
-        label: 'switch',
-        detail: '分支语句',
-        info: '多条件分支选择',
-        snippet: 'switch (${expression}) {\n\tcase ${value}:\n\t\t${}\n\t\tbreak\n\tdefault:\n\t\tbreak\n}',
-        boost: -1
-    },
-    {
-        label: 'try',
-        detail: '异常捕获',
-        info: '尝试执行代码并捕获异常',
-        snippet: 'try {\n\t${}\n} catch (${Exception} e) {\n\t\n}',
-        boost: -1
-    },
-    {
-        label: 'def',
-        detail: '变量/函数定义',
-        info: '定义变量或函数',
-        snippet: 'def ${name}',
-        boost: -1
-    },
-    {
-        label: 'println',
-        detail: '打印输出',
-        info: '输出到控制台并换行',
-        snippet: 'println(${})',
-        boost: 0
-    },
-    {
-        label: 'print',
-        detail: '打印输出',
-        info: '输出到控制台不换行',
-        snippet: 'print(${})',
-        boost: -1
-    },
-    {
-        label: 'return',
-        detail: '返回值',
-        info: '从函数中返回结果',
-        snippet: 'return ${}',
-        boost: 0
-    },
-    {
-        label: 'each',
-        detail: '遍历闭包',
-        info: '遍历集合中的每个元素',
-        snippet: 'each { ${item} ->\n\t${}\n}',
-        boost: -1
-    },
-    {
-        label: 'collect',
-        detail: '转换闭包',
-        info: '将集合元素转换为新集合',
-        snippet: 'collect { ${item} ->\n\t${}\n}',
-        boost: -1
-    },
-    {
-        label: 'find',
-        detail: '查找闭包',
-        info: '查找集合中第一个匹配的元素',
-        snippet: 'find { ${item} ->\n\t${}\n}',
-        boost: -1
-    },
-    {
-        label: 'findAll',
-        detail: '查找全部',
-        info: '查找集合中所有匹配的元素',
-        snippet: 'findAll { ${item} ->\n\t${}\n}',
-        boost: -1
-    },
-    {
-        label: 'inject',
-        detail: '累加闭包',
-        info: '对集合进行累加操作',
-        snippet: 'inject(${initial}) { ${acc}, ${item} ->\n\t${}\n}',
-        boost: -1
-    },
-    {
-        label: 'assert',
-        detail: '断言',
-        info: '验证条件是否为真',
-        snippet: 'assert ${condition}',
-        boost: -1
-    },
-    {
-        label: 'new',
-        detail: '创建实例',
-        info: '创建新的对象实例',
-        snippet: 'new ${ClassName}(${})',
-        boost: -1
-    },
-    {
-        label: 'class',
-        detail: '类定义',
-        info: '定义一个新的类',
-        snippet: 'class ${ClassName} {\n\t${}\n}',
-        boost: -1
-    },
-    {
-        label: 'interface',
-        detail: '接口定义',
-        info: '定义一个新的接口',
-        snippet: 'interface ${InterfaceName} {\n\t${}\n}',
-        boost: -2
-    },
-    {
-        label: 'throw',
-        detail: '抛出异常',
-        info: '抛出一个异常对象',
-        snippet: 'throw new ${Exception}("${}")',
-        boost: -1
-    },
-    {
-        label: 'import',
-        detail: '导入',
-        info: '导入外部类或包',
-        snippet: 'import ${}',
-        boost: -2
-    }
-];
-function createGroovyCompletionSource(metadata) {
+function createCompletionSource(languageConfig, metadata) {
     return function(context) {
         try {
-            if (isInStringOrComment(context)) return null;
+            if (isInStringOrComment(context, languageConfig.syntaxNodeNames)) return null;
             const chainMatch = context.matchBefore(/[\w$]+(?:\.[\w$]+)*\.|[\w$]+/);
             if (!chainMatch) return null;
             const hasDot = chainMatch.text.includes('.');
             const parts = chainMatch.text.split('.');
             const isDotAccess = hasDot && parts.length >= 2;
-            if (isDotAccess) {
+            if (isDotAccess && metadata) {
                 const baseParts = parts.slice(0, -1);
                 const currentPrefix = parts[parts.length - 1];
                 const resolvedType = resolveChainType(baseParts, metadata);
@@ -205,28 +56,24 @@ function createGroovyCompletionSource(metadata) {
                 };
             }
             const options = [];
-            for (const bind of metadata.binds)options.push({
-                label: bind.name,
-                type: 'variable',
-                detail: bind.description ? `${bind.dataType} — ${bind.description}` : bind.dataType,
-                info: bind.description || '(绑定变量)',
-                boost: 3
-            });
-            for (const req of metadata.requests)options.push({
-                label: req.name,
-                type: 'variable',
-                detail: req.description ? `${req.dataType} — ${req.description}` : req.dataType,
-                info: req.description || '(请求参数)',
-                boost: 3
-            });
-            const prefix = chainMatch.text.toLowerCase();
-            for (const s of GROOVY_SNIPPETS)if (s.label.toLowerCase().startsWith(prefix) || '' === prefix) options.push({
-                label: s.label,
-                type: 'keyword',
-                detail: s.detail,
-                info: s.info,
-                apply: snippet(s.snippet),
-                boost: s.boost
+            if (metadata) {
+                for (const bind of metadata.binds)options.push({
+                    label: bind.name,
+                    type: 'variable',
+                    detail: bind.description ? `${bind.dataType} — ${bind.description}` : bind.dataType,
+                    info: bind.description || '(绑定变量)',
+                    boost: 3
+                });
+                for (const req of metadata.requests)options.push({
+                    label: req.name,
+                    type: 'variable',
+                    detail: req.description ? `${req.dataType} — ${req.description}` : req.dataType,
+                    info: req.description || '(请求参数)',
+                    boost: 3
+                });
+            }
+            for (const s of languageConfig.keywordSnippets)options.push({
+                ...s
             });
             if (0 === options.length) return null;
             return {
@@ -239,31 +86,10 @@ function createGroovyCompletionSource(metadata) {
         }
     };
 }
+function createGroovyCompletionSource(metadata) {
+    return createCompletionSource(groovyConfig, metadata);
+}
 function createGroovyKeywordSource() {
-    return function(context) {
-        try {
-            if (isInStringOrComment(context)) return null;
-            const match = context.matchBefore(/[\w$]+/);
-            if (!match) return null;
-            const prefix = match.text.toLowerCase();
-            const options = [];
-            for (const s of GROOVY_SNIPPETS)if (s.label.toLowerCase().startsWith(prefix) || '' === prefix) options.push({
-                label: s.label,
-                type: 'keyword',
-                detail: s.detail,
-                info: s.info,
-                apply: snippet(s.snippet),
-                boost: s.boost
-            });
-            if (0 === options.length) return null;
-            return {
-                from: match.from,
-                options,
-                validFor: /^[\w$]*$/
-            };
-        } catch  {
-            return null;
-        }
-    };
+    return createCompletionSource(groovyConfig);
 }
-export { createGroovyCompletionSource, createGroovyKeywordSource };
+export { createCompletionSource, createGroovyCompletionSource, createGroovyKeywordSource };

package/dist/autocomplete/index.d.ts

@@ -1,2 +1,2 @@
-export { createGroovyCompletionSource, createGroovyKeywordSource } from './completion-source';
+export { createCompletionSource, createGroovyCompletionSource, createGroovyKeywordSource } from './completion-source';
 export { resolveChainType, resolveVariableType, resolveMemberType } from './resolve';

package/dist/autocomplete/index.js

@@ -1,2 +1,2 @@
-export { createGroovyCompletionSource, createGroovyKeywordSource } from "./completion-source.js";
+export { createCompletionSource, createGroovyCompletionSource, createGroovyKeywordSource } from "./completion-source.js";
 export { resolveChainType, resolveMemberType, resolveVariableType } from "./resolve.js";

package/dist/components/theme-colors.js

@@ -41,6 +41,9 @@ function ensureScrollbarStyle() {
     .${SCROLL_CLASS}::-webkit-scrollbar-track { background: transparent; }
     body.se-panel-resizing { cursor: col-resize !important; user-select: none !important; }
     body.se-panel-resizing * { cursor: col-resize !important; user-select: none !important; }
+    .se-desc-tip p { margin: 0 0 4px 0; }
+    .se-desc-tip p:last-child { margin-bottom: 0; }
+    .se-desc-tip code { font-family: Menlo, Consolas, monospace; font-size: 11px; }
   `;
     document.head.appendChild(style);
 }

package/dist/components/toolbar.js

@@ -2,7 +2,7 @@ import react, { useCallback, useEffect, useRef, useState } from "react";
 import { ToolbarButton } from "./toolbar-button.js";
 import { FormatIcon } from "./format-icon.js";
 import { MaximizeIcon, MinimizeIcon } from "./fullscreen-icon.js";
-import { themes } from "./theme-colors.js";
+import { ensureScrollbarStyle, themes } from "./theme-colors.js";
 const HammerIcon = ({ color })=>/*#__PURE__*/ react.createElement("svg", {
         width: "14",
         height: "14",
@@ -93,6 +93,7 @@ const Toolbar = ({ title, theme, onThemeChange, enableThemeToggle, enableFormat,
     }, []);
     useEffect(()=>{
         if (!showDesc) return;
+        ensureScrollbarStyle();
         updateTipPos();
         window.addEventListener('scroll', updateTipPos, true);
         window.addEventListener('resize', updateTipPos);
@@ -207,6 +208,7 @@ const Toolbar = ({ title, theme, onThemeChange, enableThemeToggle, enableFormat,
             onClick: item.onClick
         })), toolbarExtra, showDesc && tipPos && descHtml && /*#__PURE__*/ react.createElement("div", {
         ref: tipRef,
+        className: "se-desc-tip",
         style: {
             position: 'fixed',
             top: tipPos.top,
@@ -220,7 +222,7 @@ const Toolbar = ({ title, theme, onThemeChange, enableThemeToggle, enableFormat,
             borderRadius: 6,
             color: colors.text,
             fontSize: 12,
-            lineHeight: 1.65,
+            lineHeight: 1.5,
             wordBreak: 'break-word',
             zIndex: 9999,
             boxShadow: '0 4px 16px rgba(0,0,0,0.3)',

package/dist/index.d.ts

@@ -2,3 +2,4 @@ export * from "./script-code";
 export * from "./types";
 export { GroovyFormatter, GroovyScriptConvertorUtil } from "./utils/groovy-formatter";
 export type { FormatOptions } from "./utils/groovy-formatter";
+export { BUILTIN_LANGUAGES, resolveLanguageConfig, groovyConfig, javascriptConfig, } from "./languages";

package/dist/index.js

@@ -1,3 +1,4 @@
 export * from "./script-code.js";
 export * from "./types/index.js";
 export { GroovyFormatter, GroovyScriptConvertorUtil } from "./utils/groovy-formatter.js";
+export { BUILTIN_LANGUAGES, groovyConfig, javascriptConfig, resolveLanguageConfig } from "./languages";

package/dist/languages/groovy.d.ts

@@ -0,0 +1,3 @@
+import type { LanguageConfig } from '../types';
+/** Groovy 语言配置 */
+export declare const groovyConfig: LanguageConfig;

package/dist/languages/groovy.js

@@ -0,0 +1,150 @@
+import { snippet } from "@codemirror/autocomplete";
+import { java } from "@codemirror/lang-java";
+import { GroovyFormatter } from "../utils/groovy-formatter.js";
+const GROOVY_SNIPPETS = [
+    {
+        label: 'if',
+        type: 'keyword',
+        boost: -1,
+        apply: snippet('if (${condition}) {\n\t${}\n}')
+    },
+    {
+        label: 'else',
+        type: 'keyword',
+        boost: -2,
+        apply: snippet('else {\n\t${}\n}')
+    },
+    {
+        label: 'for',
+        type: 'keyword',
+        boost: -1,
+        apply: snippet('for (${item} in ${collection}) {\n\t${}\n}')
+    },
+    {
+        label: 'while',
+        type: 'keyword',
+        boost: -1,
+        apply: snippet('while (${condition}) {\n\t${}\n}')
+    },
+    {
+        label: 'switch',
+        type: 'keyword',
+        boost: -1,
+        apply: snippet('switch (${expression}) {\n\tcase ${value}:\n\t\t${}\n\t\tbreak\n\tdefault:\n\t\tbreak\n}')
+    },
+    {
+        label: 'try',
+        type: 'keyword',
+        boost: -1,
+        apply: snippet('try {\n\t${}\n} catch (${Exception} e) {\n\t\n}')
+    },
+    {
+        label: 'def',
+        type: 'keyword',
+        boost: -1,
+        apply: snippet('def ${name}')
+    },
+    {
+        label: 'println',
+        type: 'keyword',
+        boost: 0,
+        apply: snippet('println(${})')
+    },
+    {
+        label: 'print',
+        type: 'keyword',
+        boost: -1,
+        apply: snippet('print(${})')
+    },
+    {
+        label: 'return',
+        type: 'keyword',
+        boost: 0,
+        apply: snippet('return ${}')
+    },
+    {
+        label: 'each',
+        type: 'keyword',
+        boost: -1,
+        apply: snippet('each { ${item} ->\n\t${}\n}')
+    },
+    {
+        label: 'collect',
+        type: 'keyword',
+        boost: -1,
+        apply: snippet('collect { ${item} ->\n\t${}\n}')
+    },
+    {
+        label: 'find',
+        type: 'keyword',
+        boost: -1,
+        apply: snippet('find { ${item} ->\n\t${}\n}')
+    },
+    {
+        label: 'findAll',
+        type: 'keyword',
+        boost: -1,
+        apply: snippet('findAll { ${item} ->\n\t${}\n}')
+    },
+    {
+        label: 'inject',
+        type: 'keyword',
+        boost: -1,
+        apply: snippet('inject(${initial}) { ${acc}, ${item} ->\n\t${}\n}')
+    },
+    {
+        label: 'assert',
+        type: 'keyword',
+        boost: -1,
+        apply: snippet('assert ${condition}')
+    },
+    {
+        label: 'new',
+        type: 'keyword',
+        boost: -1,
+        apply: snippet('new ${ClassName}(${})')
+    },
+    {
+        label: 'class',
+        type: 'keyword',
+        boost: -1,
+        apply: snippet('class ${ClassName} {\n\t${}\n}')
+    },
+    {
+        label: 'interface',
+        type: 'keyword',
+        boost: -2,
+        apply: snippet('interface ${InterfaceName} {\n\t${}\n}')
+    },
+    {
+        label: 'throw',
+        type: 'keyword',
+        boost: -1,
+        apply: snippet('throw new ${Exception}("${}")')
+    },
+    {
+        label: 'import',
+        type: 'keyword',
+        boost: -2,
+        apply: snippet('import ${}')
+    }
+];
+const groovyConfig = {
+    name: 'groovy',
+    displayName: 'Groovy',
+    extension: ()=>java(),
+    keywordSnippets: GROOVY_SNIPPETS,
+    syntaxNodeNames: {
+        stringNodes: [
+            'StringLiteral',
+            'CharLiteral'
+        ],
+        commentNodes: [
+            'LineComment',
+            'BlockComment'
+        ]
+    },
+    placeholder: '请输入 Groovy 脚本...',
+    formatter: (code)=>GroovyFormatter.formatScript(code)
+};
+export { groovyConfig };

package/dist/languages/index.d.ts

@@ -0,0 +1,17 @@
+import type { LanguageConfig } from '../types';
+/** 内置语言配置注册表 */
+export declare const BUILTIN_LANGUAGES: Record<string, LanguageConfig>;
+/**
+ * 解析语言配置
+ *
+ * 接受语言名（字符串）或自定义 LanguageConfig 对象，返回完整的 LanguageConfig。
+ * 当传入字符串时，从内置注册表中查找；未找到则抛出错误。
+ * 不传参时默认使用 Groovy 配置。
+ *
+ * @param language 语言名或自定义配置
+ * @returns 解析后的完整语言配置
+ * @throws 当传入的语言名不在内置注册表中时
+ */
+export declare function resolveLanguageConfig(language?: string | LanguageConfig): LanguageConfig;
+export { groovyConfig } from './groovy';
+export { javascriptConfig } from './javascript';

package/dist/languages/index.js

@@ -0,0 +1,16 @@
+import { groovyConfig } from "./groovy.js";
+import { javascriptConfig } from "./javascript.js";
+const BUILTIN_LANGUAGES = {
+    groovy: groovyConfig,
+    javascript: javascriptConfig
+};
+function resolveLanguageConfig(language) {
+    if (null == language) return BUILTIN_LANGUAGES.groovy;
+    if ('string' == typeof language) {
+        const config = BUILTIN_LANGUAGES[language];
+        if (!config) throw new Error(`Unknown language "${language}". Available built-in languages: ${Object.keys(BUILTIN_LANGUAGES).join(', ')}. You can also pass a custom LanguageConfig object.`);
+        return config;
+    }
+    return language;
+}
+export { BUILTIN_LANGUAGES, groovyConfig, javascriptConfig, resolveLanguageConfig };

package/dist/languages/javascript.d.ts

@@ -0,0 +1,3 @@
+import type { LanguageConfig } from '../types';
+/** JavaScript 语言配置 */
+export declare const javascriptConfig: LanguageConfig;

package/dist/languages/javascript.js

@@ -0,0 +1,155 @@
+import { snippet } from "@codemirror/autocomplete";
+import { javascript } from "@codemirror/lang-javascript";
+const JAVASCRIPT_SNIPPETS = [
+    {
+        label: 'if',
+        type: 'keyword',
+        boost: -1,
+        apply: snippet('if (${condition}) {\n\t${}\n}')
+    },
+    {
+        label: 'else',
+        type: 'keyword',
+        boost: -2,
+        apply: snippet('else {\n\t${}\n}')
+    },
+    {
+        label: 'for',
+        type: 'keyword',
+        boost: -1,
+        apply: snippet('for (let ${i} = 0; ${i} < ${length}; ${i}++) {\n\t${}\n}')
+    },
+    {
+        label: 'for...of',
+        type: 'keyword',
+        boost: -1,
+        apply: snippet('for (const ${item} of ${array}) {\n\t${}\n}')
+    },
+    {
+        label: 'for...in',
+        type: 'keyword',
+        boost: -1,
+        apply: snippet('for (const ${key} in ${object}) {\n\t${}\n}')
+    },
+    {
+        label: 'while',
+        type: 'keyword',
+        boost: -1,
+        apply: snippet('while (${condition}) {\n\t${}\n}')
+    },
+    {
+        label: 'function',
+        type: 'keyword',
+        boost: -1,
+        apply: snippet('function ${name}(${params}) {\n\t${}\n}')
+    },
+    {
+        label: 'const',
+        type: 'keyword',
+        boost: -1,
+        apply: snippet('const ${name} = ${}')
+    },
+    {
+        label: 'let',
+        type: 'keyword',
+        boost: -1,
+        apply: snippet('let ${name} = ${}')
+    },
+    {
+        label: '=>',
+        type: 'keyword',
+        boost: -1,
+        apply: snippet('(${params}) => {\n\t${}\n}')
+    },
+    {
+        label: 'class',
+        type: 'keyword',
+        boost: -1,
+        apply: snippet('class ${ClassName} {\n\tconstructor(${params}) {\n\t\t${}\n\t}\n}')
+    },
+    {
+        label: 'try',
+        type: 'keyword',
+        boost: -1,
+        apply: snippet('try {\n\t${}\n} catch (${error}) {\n\t\n}')
+    },
+    {
+        label: 'switch',
+        type: 'keyword',
+        boost: -1,
+        apply: snippet('switch (${expression}) {\n\tcase ${value}:\n\t\t${}\n\t\tbreak\n\tdefault:\n\t\tbreak\n}')
+    },
+    {
+        label: 'return',
+        type: 'keyword',
+        boost: 0,
+        apply: snippet('return ${}')
+    },
+    {
+        label: 'import',
+        type: 'keyword',
+        boost: -2,
+        apply: snippet("import { ${} } from '${module}'")
+    },
+    {
+        label: 'export',
+        type: 'keyword',
+        boost: -2,
+        apply: snippet('export ${}')
+    },
+    {
+        label: 'async',
+        type: 'keyword',
+        boost: -1,
+        apply: snippet('async function ${name}(${params}) {\n\t${}\n}')
+    },
+    {
+        label: 'await',
+        type: 'keyword',
+        boost: -1,
+        apply: snippet('await ${}')
+    },
+    {
+        label: 'new',
+        type: 'keyword',
+        boost: -1,
+        apply: snippet('new ${ClassName}(${})')
+    },
+    {
+        label: 'throw',
+        type: 'keyword',
+        boost: -1,
+        apply: snippet('throw new ${Error}("${}")')
+    },
+    {
+        label: 'console.log',
+        type: 'keyword',
+        boost: 0,
+        apply: snippet('console.log(${})')
+    },
+    {
+        label: 'Promise',
+        type: 'keyword',
+        boost: -1,
+        apply: snippet('new Promise((${resolve}, ${reject}) => {\n\t${}\n})')
+    }
+];
+const javascriptConfig = {
+    name: "javascript",
+    displayName: 'JavaScript',
+    extension: ()=>javascript(),
+    keywordSnippets: JAVASCRIPT_SNIPPETS,
+    syntaxNodeNames: {
+        stringNodes: [
+            'String',
+            'TemplateString',
+            'RegExp'
+        ],
+        commentNodes: [
+            'LineComment',
+            'BlockComment'
+        ]
+    },
+    placeholder: '请输入 JavaScript 脚本...'
+};
+export { javascriptConfig };

package/dist/script-code.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
-import { ScriptCodeEditorProps } from './types';
+import type { ScriptCodeEditorProps } from './types';
 export declare const ScriptCodeEditor: React.FC<ScriptCodeEditorProps>;

package/dist/script-code.js

@@ -3,15 +3,14 @@ import { Compartment, EditorState } from "@codemirror/state";
 import { EditorView, crosshairCursor, drawSelection, dropCursor, highlightActiveLine, highlightActiveLineGutter, highlightSpecialChars, keymap, lineNumbers, placeholder as view_placeholder, rectangularSelection } from "@codemirror/view";
 import { defaultKeymap, history as commands_history, historyKeymap, indentWithTab } from "@codemirror/commands";
 import { HighlightStyle, bracketMatching, defaultHighlightStyle, foldGutter, foldKeymap, indentOnInput, syntaxHighlighting } from "@codemirror/language";
-import { java } from "@codemirror/lang-java";
 import { oneDark } from "@codemirror/theme-one-dark";
 import { tags } from "@lezer/highlight";
 import { autocompletion, completionKeymap } from "@codemirror/autocomplete";
-import { createGroovyCompletionSource, createGroovyKeywordSource } from "./autocomplete/index.js";
+import { createCompletionSource } from "./autocomplete/index.js";
+import { resolveLanguageConfig } from "./languages";
 import { TypePanel } from "./type-panel/index.js";
 import { Toolbar } from "./components/toolbar.js";
 import { ExpandSidebarButton } from "./components/expand-sidebar-button.js";
-import { GroovyFormatter } from "./utils/groovy-formatter.js";
 const darkHighlightStyle = HighlightStyle.define([
     {
         tag: tags.keyword,
@@ -132,16 +131,10 @@ function buildThemeExtensions(theme) {
     }));
     return exts;
 }
-function buildAutocompleteExt(metadata) {
-    return metadata ? autocompletion({
+function buildAutocompleteExt(languageConfig, metadata) {
+    return autocompletion({
         override: [
-            createGroovyCompletionSource(metadata)
-        ],
-        activateOnTyping: true,
-        icons: true
-    }) : autocompletion({
-        override: [
-            createGroovyKeywordSource()
+            createCompletionSource(languageConfig, metadata)
         ],
         activateOnTyping: true,
         icons: true
@@ -181,8 +174,11 @@ function buildLayoutExtensions(fontSize, minHeight, maxHeight, isFullscreen) {
     });
 }
 const ScriptCodeEditor = (props)=>{
-    const { value, readonly = false, onChange, onCompile, onFormat, onThemeChange, placeholder = '请输入 Groovy 脚本...', defaultTheme, title, metadata, defaultSidebarOpen, enableThemeToggle, enableFormat, enableCompile, enableFullscreen, toolbar, toolbarExtra, options = {} } = props;
+    const { value, readonly = false, onChange, onCompile, onFormat, onThemeChange, language = 'groovy', placeholder, defaultTheme, title, metadata, defaultSidebarOpen, enableThemeToggle, enableFormat, enableCompile, enableFullscreen, toolbar, toolbarExtra, options = {} } = props;
     const { fontSize = 14, minHeight = 300, maxHeight = 300 } = options;
+    const languageConfig = resolveLanguageConfig(language);
+    const effectivePlaceholder = placeholder ?? languageConfig.placeholder ?? '';
+    const effectiveFormatter = onFormat ?? (languageConfig.formatter ? (code)=>languageConfig.formatter(code) : void 0);
     const [internalTheme, setInternalTheme] = useState(defaultTheme ?? 'dark');
     useEffect(()=>{
         if (void 0 !== defaultTheme) setInternalTheme(defaultTheme);
@@ -194,6 +190,7 @@ const ScriptCodeEditor = (props)=>{
     const themeCompartmentRef = useRef(new Compartment());
     const autocompleteCompartmentRef = useRef(new Compartment());
     const layoutCompartmentRef = useRef(new Compartment());
+    const languageCompartmentRef = useRef(new Compartment());
     const onChangeRef = useRef(onChange);
     onChangeRef.current = onChange;
     const metadataRef = useRef(metadata);
@@ -227,6 +224,7 @@ const ScriptCodeEditor = (props)=>{
         const themeCompartment = themeCompartmentRef.current;
         const acCompartment = autocompleteCompartmentRef.current;
         const layoutCompartment = layoutCompartmentRef.current;
+        const langCompartment = languageCompartmentRef.current;
         const extensions = [
             lineNumbers(),
             highlightActiveLineGutter(),
@@ -248,14 +246,14 @@ const ScriptCodeEditor = (props)=>{
                 ...completionKeymap,
                 indentWithTab
             ]),
-            java(),
-            view_placeholder(placeholder),
+            langCompartment.of(languageConfig.extension()),
+            view_placeholder(effectivePlaceholder),
             EditorView.updateListener.of((update)=>{
                 if (update.docChanged && onChangeRef.current) onChangeRef.current(update.state.doc.toString());
             }),
             layoutCompartment.of(buildLayoutExtensions(fontSize, minHeight, maxHeight, false)),
             themeCompartment.of(buildThemeExtensions(internalTheme)),
-            acCompartment.of(buildAutocompleteExt(metadataRef.current))
+            acCompartment.of(buildAutocompleteExt(languageConfig, metadataRef.current))
         ];
         if (readonly) extensions.push(EditorState.readOnly.of(true));
         const state = EditorState.create({
@@ -274,7 +272,7 @@ const ScriptCodeEditor = (props)=>{
         fontSize,
         minHeight,
         maxHeight,
-        placeholder,
+        effectivePlaceholder,
         readonly
     ]);
     useEffect(()=>{
@@ -299,10 +297,22 @@ const ScriptCodeEditor = (props)=>{
     useEffect(()=>{
         if (!viewRef.current) return;
         viewRef.current.dispatch({
-            effects: autocompleteCompartmentRef.current.reconfigure(buildAutocompleteExt(metadata))
+            effects: autocompleteCompartmentRef.current.reconfigure(buildAutocompleteExt(languageConfig, metadata))
         });
     }, [
-        metadata
+        metadata,
+        languageConfig
+    ]);
+    useEffect(()=>{
+        if (!viewRef.current) return;
+        viewRef.current.dispatch({
+            effects: [
+                languageCompartmentRef.current.reconfigure(languageConfig.extension()),
+                autocompleteCompartmentRef.current.reconfigure(buildAutocompleteExt(languageConfig, metadata))
+            ]
+        });
+    }, [
+        languageConfig
     ]);
     useEffect(()=>{
         if (!viewRef.current) return;
@@ -326,17 +336,18 @@ const ScriptCodeEditor = (props)=>{
         if (onCompile && viewRef.current) onCompile(viewRef.current.state.doc.toString());
     };
     const handleFormat = ()=>{
-        if (viewRef.current) {
-            const code = viewRef.current.state.doc.toString();
-            const formatted = GroovyFormatter.formatScript(code);
-            if (formatted !== code) viewRef.current.dispatch({
-                changes: {
-                    from: 0,
-                    to: viewRef.current.state.doc.length,
-                    insert: formatted
-                }
-            });
-        }
+        if (!viewRef.current) return;
+        const code = viewRef.current.state.doc.toString();
+        const formatter = effectiveFormatter;
+        if (!formatter) return;
+        const formatted = formatter(code);
+        if ('string' == typeof formatted && formatted !== code) viewRef.current.dispatch({
+            changes: {
+                from: 0,
+                to: viewRef.current.state.doc.length,
+                insert: formatted
+            }
+        });
     };
     return /*#__PURE__*/ react.createElement("div", {
         style: isFullscreen ? {
@@ -362,7 +373,7 @@ const ScriptCodeEditor = (props)=>{
         },
         enableThemeToggle: enableThemeToggle,
         enableFormat: enableFormat,
-        onFormat: readonly ? void 0 : onFormat ?? handleFormat,
+        onFormat: readonly || !effectiveFormatter ? void 0 : onFormat ?? handleFormat,
         enableCompile: enableCompile,
         onCompile: onCompile ? handleCompile : void 0,
         enableFullscreen: enableFullscreen,

package/dist/types/index.d.ts

@@ -1,4 +1,6 @@
 import type React from 'react';
+import type { Completion } from '@codemirror/autocomplete';
+import type { Extension } from '@codemirror/state';
 /** 工具栏按钮属性 */
 export interface ToolbarButtonProps {
     /** 按钮内容（支持 ReactNode，可包含图标 + 文字） */
@@ -79,6 +81,26 @@ export interface ScriptCodeEditorProps {
     onChange?: (value: string) => void;
     /** 占位符 */
     placeholder?: string;
+    /**
+     * 编程语言配置（默认 'groovy'）。
+     *
+     * - 传入内置语言名：`'groovy'` | `'javascript'`
+     * - 传入自定义 `LanguageConfig` 对象以支持其他语言
+     *
+     * @example
+     * // 内置语言
+     * <ScriptCodeEditor language="javascript" />
+     *
+     * // 自定义语言
+     * <ScriptCodeEditor language={{
+     *   name: 'python',
+     *   displayName: 'Python',
+     *   extension: () => python(),
+     *   keywordSnippets: PYTHON_SNIPPETS,
+     *   syntaxNodeNames: { stringNodes: ['String'], commentNodes: ['LineComment', 'BlockComment'] },
+     * }} />
+     */
+    language?: string | LanguageConfig;
     /** 初始主题（默认 'dark'），编辑器内部管理状态 */
     defaultTheme?: 'dark' | 'light';
     /** 主题切换通知回调（可选） */
@@ -91,13 +113,13 @@ export interface ScriptCodeEditorProps {
     defaultSidebarOpen?: boolean;
     /** 是否显示主题切换按钮（默认 false） */
     enableThemeToggle?: boolean;
-    /** 是否显示格式化按钮（默认 false，需配合 onFormat 使用） */
+    /** 是否显示格式化按钮（默认 false，需配合 onFormat 或 language.formatter 使用） */
     enableFormat?: boolean;
     /** 是否显示编译验证按钮（默认 false，需配合 onCompile 使用） */
     enableCompile?: boolean;
     /** 是否显示全屏按钮（默认 false） */
     enableFullscreen?: boolean;
-    /** 格式化代码回调（enableFormat 时需提供） */
+    /** 格式化代码回调（enableFormat 时提供，优先级高于 language.formatter） */
     onFormat?: () => void;
     /** 编译/测试脚本回调（enableCompile 时需提供） */
     onCompile?: (code: string) => void;
@@ -115,3 +137,49 @@ export interface ScriptCodeEditorProps {
         maxHeight?: number;
     };
 }
+/** 格式化选项 */
+export interface FormatOptions {
+    /** 缩进大小（空格数） */
+    indentSize?: number;
+    /** 操作符周围添加空格 */
+    addSpacesAroundOperators?: boolean;
+    /** 格式化注释 */
+    formatComments?: boolean;
+    /** 最大行长度 */
+    maxLineLength?: number;
+    /** 保留空行 */
+    preserveEmptyLines?: boolean;
+}
+/** 格式化函数签名 */
+export type FormatFn = (code: string, options?: FormatOptions) => string;
+/**
+ * 语言配置接口
+ *
+ * 封装一个编程语言在编辑器中所需的全部差异点：
+ * - CodeMirror 语法高亮扩展
+ * - 关键字/语法片段
+ * - AST 节点名（用于判断字符串/注释位置，抑制自动补全）
+ * - 默认占位符文本
+ * - 可选的内置格式化器
+ */
+export interface LanguageConfig {
+    /** 语言标识名（小写），如 'groovy'、'javascript' */
+    name: string;
+    /** 显示名称，如 'Groovy'、'JavaScript' */
+    displayName: string;
+    /** CodeMirror 语言扩展工厂 */
+    extension: () => Extension;
+    /** 关键字和语法片段列表 */
+    keywordSnippets: readonly Completion[];
+    /** 各语言的语法树节点名（用于 isInStringOrComment 判断） */
+    syntaxNodeNames: {
+        /** 字符串类节点名，如 Java: ['StringLiteral']，JS: ['String', 'TemplateString'] */
+        stringNodes: string[];
+        /** 注释类节点名，如 ['LineComment', 'BlockComment'] */
+        commentNodes: string[];
+    };
+    /** 默认占位符文本 */
+    placeholder?: string;
+    /** 可选的内置格式化函数（优先级低于 onFormat prop） */
+    formatter?: FormatFn;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coding-script/script-engine",
-  "version": "0.0.6",
+  "version": "0.0.8",
   "description": "script-engine components",
   "keywords": [
     "coding-script",
@@ -31,6 +31,7 @@
     "@codemirror/autocomplete": "^6.18.0",
     "@codemirror/commands": "^6.10.2",
     "@codemirror/lang-java": "^6.0.2",
+    "@codemirror/lang-javascript": "^6.2.0",
     "@codemirror/language": "^6.12.2",
     "@codemirror/state": "^6.5.4",
     "@codemirror/theme-one-dark": "^6.1.3",