@coding-script/script-engine 0.0.1

package/dist/components/variables-section.js

@@ -0,0 +1,23 @@
+import react from "react";
+import { SectionHeader } from "./section-header.js";
+import { VariableRow } from "./variable-row.js";
+const VariablesSection = ({ sortedBinds, sortedRequests, colors })=>{
+    if (0 === sortedBinds.length && 0 === sortedRequests.length) return null;
+    return /*#__PURE__*/ react.createElement("div", null, /*#__PURE__*/ react.createElement(SectionHeader, {
+        colors: colors,
+        label: "变量"
+    }), sortedBinds.map((bind)=>/*#__PURE__*/ react.createElement(VariableRow, {
+            key: bind.name,
+            name: bind.name,
+            dataType: bind.dataType,
+            description: bind.description,
+            colors: colors
+        })), sortedRequests.map((req)=>/*#__PURE__*/ react.createElement(VariableRow, {
+            key: req.name,
+            name: req.name,
+            dataType: req.dataType,
+            description: req.description,
+            colors: colors
+        })));
+};
+export { VariablesSection };

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./script-code";
+export * from "./types";

package/dist/index.js

@@ -0,0 +1,2 @@
+export * from "./script-code.js";
+export * from "./types/index.js";

package/dist/script-code.d.ts

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

package/dist/script-code.js

@@ -0,0 +1,307 @@
+import react, { useEffect, useRef, useState } from "react";
+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 { TypePanel } from "./type-panel/index.js";
+import { Toolbar } from "./components/toolbar.js";
+import { ExpandSidebarButton } from "./components/expand-sidebar-button.js";
+const darkHighlightStyle = HighlightStyle.define([
+    {
+        tag: tags.keyword,
+        color: '#c678dd'
+    },
+    {
+        tag: tags.operator,
+        color: '#56b6c2'
+    },
+    {
+        tag: tags.variableName,
+        color: '#e5c07b'
+    },
+    {
+        tag: tags.string,
+        color: '#98c379'
+    },
+    {
+        tag: tags.comment,
+        color: '#5c6370',
+        fontStyle: 'italic'
+    },
+    {
+        tag: tags.number,
+        color: '#d19a66'
+    },
+    {
+        tag: tags.bool,
+        color: '#d19a66'
+    },
+    {
+        tag: tags["null"],
+        color: '#d19a66'
+    },
+    {
+        tag: tags.propertyName,
+        color: '#e06c75'
+    },
+    {
+        tag: tags["function"](tags.variableName),
+        color: '#61afef'
+    },
+    {
+        tag: tags.definition(tags.variableName),
+        color: '#e5c07b'
+    },
+    {
+        tag: tags.typeName,
+        color: '#e5c07b'
+    },
+    {
+        tag: tags.className,
+        color: '#e5c07b'
+    },
+    {
+        tag: tags.annotation,
+        color: '#d19a66'
+    }
+]);
+function buildThemeExtensions(theme) {
+    const isDark = 'dark' === theme;
+    const exts = [];
+    if (isDark) {
+        exts.push(oneDark);
+        exts.push(syntaxHighlighting(darkHighlightStyle));
+    } else exts.push(syntaxHighlighting(defaultHighlightStyle));
+    exts.push(EditorView.theme({
+        '.cm-tooltip.cm-tooltip-autocomplete': {
+            backgroundColor: isDark ? '#21252b' : '#ffffff',
+            borderColor: isDark ? '#434343' : '#d9d9d9',
+            borderRadius: '4px',
+            boxShadow: '0 2px 8px rgba(0,0,0,0.15)',
+            overflow: 'hidden'
+        },
+        '.cm-tooltip-autocomplete > ul > li': {
+            padding: '4px 8px',
+            color: isDark ? '#abb2bf' : '#333'
+        },
+        '.cm-tooltip-autocomplete > ul > li[aria-selected]': {
+            backgroundColor: isDark ? '#2c313a' : '#e6f4ff',
+            color: isDark ? '#fff' : '#000'
+        },
+        '.cm-completionLabel': {
+            fontFamily: 'monospace'
+        },
+        '.cm-completionDetail': {
+            color: isDark ? '#7f848e' : '#888',
+            fontStyle: 'normal',
+            marginLeft: '8px'
+        },
+        '.cm-completionInfo': {
+            backgroundColor: isDark ? '#282c34' : '#fafafa',
+            borderColor: isDark ? '#434343' : '#d9d9d9',
+            color: isDark ? '#abb2bf' : '#333',
+            padding: '6px 8px'
+        },
+        '.cm-completionIcon': {
+            width: '1.2em',
+            fontSize: '0.9em',
+            paddingRight: '4px'
+        },
+        '.cm-completionIcon-property::after': {
+            content: '"F"',
+            color: '#61afef'
+        },
+        '.cm-completionIcon-function::after': {
+            content: '"M"',
+            color: '#c678dd'
+        },
+        '.cm-completionIcon-variable::after': {
+            content: '"V"',
+            color: '#e5c07b'
+        },
+        '.cm-completionIcon-keyword::after': {
+            content: '"K"',
+            color: '#56b6c2'
+        }
+    }));
+    return exts;
+}
+function buildAutocompleteExt(metadata) {
+    return metadata ? autocompletion({
+        override: [
+            createGroovyCompletionSource(metadata)
+        ],
+        activateOnTyping: true,
+        icons: true
+    }) : autocompletion({
+        override: [
+            createGroovyKeywordSource()
+        ],
+        activateOnTyping: true,
+        icons: true
+    });
+}
+const ScriptCodeEditor = (props)=>{
+    const { value, readonly = false, onChange, onCompile, onThemeChange, placeholder = '请输入 Groovy 脚本...', theme = 'dark', title, metadata, defaultSidebarOpen, options = {} } = props;
+    const { fontSize = 14, minHeight = 300, maxHeight = 300 } = options;
+    const editorContainerRef = useRef(null);
+    const viewRef = useRef(null);
+    const themeCompartmentRef = useRef(new Compartment());
+    const autocompleteCompartmentRef = useRef(new Compartment());
+    const onChangeRef = useRef(onChange);
+    onChangeRef.current = onChange;
+    const metadataRef = useRef(metadata);
+    metadataRef.current = metadata;
+    const [sidebarOpen, setSidebarOpen] = useState(defaultSidebarOpen ?? null != metadata);
+    const [panelWidth, setPanelWidth] = useState(300);
+    useEffect(()=>{
+        if (!editorContainerRef.current) return;
+        const themeCompartment = themeCompartmentRef.current;
+        const acCompartment = autocompleteCompartmentRef.current;
+        const extensions = [
+            lineNumbers(),
+            highlightActiveLineGutter(),
+            highlightSpecialChars(),
+            commands_history(),
+            foldGutter(),
+            drawSelection(),
+            dropCursor(),
+            EditorState.allowMultipleSelections.of(true),
+            indentOnInput(),
+            bracketMatching(),
+            rectangularSelection(),
+            crosshairCursor(),
+            highlightActiveLine(),
+            keymap.of([
+                ...defaultKeymap,
+                ...historyKeymap,
+                ...foldKeymap,
+                ...completionKeymap,
+                indentWithTab
+            ]),
+            java(),
+            view_placeholder(placeholder),
+            EditorView.updateListener.of((update)=>{
+                if (update.docChanged && onChangeRef.current) onChangeRef.current(update.state.doc.toString());
+            }),
+            EditorView.theme({
+                '&': {
+                    fontSize: `${fontSize}px`
+                },
+                '.cm-scroller': {
+                    overflow: 'auto',
+                    minHeight: `${minHeight}px`,
+                    maxHeight: `${maxHeight}px`
+                },
+                '.cm-content': {
+                    fontFamily: 'monospace',
+                    minHeight: `${minHeight}px`
+                },
+                '.cm-gutters': {
+                    minHeight: `${minHeight}px`
+                }
+            }),
+            themeCompartment.of(buildThemeExtensions(theme)),
+            acCompartment.of(buildAutocompleteExt(metadataRef.current))
+        ];
+        if (readonly) extensions.push(EditorState.readOnly.of(true));
+        const state = EditorState.create({
+            doc: value,
+            extensions
+        });
+        const view = new EditorView({
+            state,
+            parent: editorContainerRef.current
+        });
+        viewRef.current = view;
+        return ()=>{
+            view.destroy();
+        };
+    }, [
+        fontSize,
+        minHeight,
+        maxHeight,
+        placeholder,
+        readonly
+    ]);
+    useEffect(()=>{
+        if (viewRef.current && value !== viewRef.current.state.doc.toString()) viewRef.current.dispatch({
+            changes: {
+                from: 0,
+                to: viewRef.current.state.doc.length,
+                insert: value
+            }
+        });
+    }, [
+        value
+    ]);
+    useEffect(()=>{
+        if (!viewRef.current) return;
+        viewRef.current.dispatch({
+            effects: themeCompartmentRef.current.reconfigure(buildThemeExtensions(theme))
+        });
+    }, [
+        theme
+    ]);
+    useEffect(()=>{
+        if (!viewRef.current) return;
+        viewRef.current.dispatch({
+            effects: autocompleteCompartmentRef.current.reconfigure(buildAutocompleteExt(metadata))
+        });
+    }, [
+        metadata
+    ]);
+    const isDark = 'dark' === theme;
+    const borderColor = isDark ? '#434343' : '#d9d9d9';
+    const expandBtnBg = isDark ? '#2c313a' : '#f0f0f0';
+    const expandBtnColor = isDark ? '#abb2bf' : '#666';
+    const handleCompile = ()=>{
+        if (onCompile && viewRef.current) onCompile(viewRef.current.state.doc.toString());
+    };
+    return /*#__PURE__*/ react.createElement("div", {
+        style: {
+            display: 'flex',
+            flexDirection: 'column'
+        }
+    }, /*#__PURE__*/ react.createElement(Toolbar, {
+        title: title,
+        theme: theme,
+        onThemeChange: onThemeChange,
+        onCompile: onCompile ? handleCompile : void 0
+    }), /*#__PURE__*/ react.createElement("div", {
+        style: {
+            display: 'flex',
+            border: `1px solid ${borderColor}`,
+            borderTop: 'none',
+            borderRadius: '0 0 6px 6px',
+            overflow: 'hidden'
+        }
+    }, /*#__PURE__*/ react.createElement("div", {
+        style: {
+            flex: 1,
+            minWidth: 0,
+            position: 'relative'
+        }
+    }, metadata && !sidebarOpen && /*#__PURE__*/ react.createElement(ExpandSidebarButton, {
+        borderColor: borderColor,
+        expandBtnColor: expandBtnColor,
+        expandBtnBg: expandBtnBg,
+        onClick: ()=>setSidebarOpen(true)
+    }), /*#__PURE__*/ react.createElement("div", {
+        ref: editorContainerRef
+    })), metadata && sidebarOpen && /*#__PURE__*/ react.createElement(TypePanel, {
+        metadata: metadata,
+        theme: theme,
+        minHeight: minHeight,
+        maxHeight: maxHeight,
+        width: panelWidth,
+        onWidthChange: setPanelWidth,
+        onCollapse: ()=>setSidebarOpen(false)
+    })));
+};
+export { ScriptCodeEditor };

package/dist/type-panel/index.d.ts

@@ -0,0 +1,2 @@
+export { TypePanel } from './type-panel';
+export type { TypePanelProps } from './type-panel';

package/dist/type-panel/index.js

@@ -0,0 +1 @@
+export { TypePanel } from "./type-panel.js";

package/dist/type-panel/type-panel.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import type { ScriptMetadata } from '../types';
+export interface TypePanelProps {
+    metadata: ScriptMetadata;
+    theme: 'dark' | 'light';
+    minHeight: number;
+    maxHeight: number;
+    width: number;
+    onWidthChange: (width: number) => void;
+    onCollapse: () => void;
+}
+export declare const TypePanel: React.FC<TypePanelProps>;

package/dist/type-panel/type-panel.js

@@ -0,0 +1,129 @@
+import react, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { SCROLL_CLASS, ensureScrollbarStyle, themes } from "../components/theme-colors.js";
+import { DragHandle } from "../components/drag-handle.js";
+import { PanelHeader } from "../components/panel-header.js";
+import { MainFunctionSection } from "../components/main-function-section.js";
+import { VariablesSection } from "../components/variables-section.js";
+import { DataTypesSection } from "../components/data-types-section.js";
+const DEFAULT_WIDTH = 300;
+const MIN_WIDTH = 180;
+const MAX_WIDTH = 600;
+const TypePanel = ({ metadata, theme, minHeight, maxHeight, width, onWidthChange, onCollapse })=>{
+    const colors = themes[theme];
+    const [expanded, setExpanded] = useState(()=>new Set());
+    const panelRef = useRef(null);
+    const [dragging, setDragging] = useState(false);
+    const [handleHovered, setHandleHovered] = useState(false);
+    const dragStartXRef = useRef(0);
+    const dragStartWidthRef = useRef(DEFAULT_WIDTH);
+    useEffect(()=>{
+        ensureScrollbarStyle();
+    }, []);
+    useEffect(()=>{
+        if (!dragging) return;
+        const onMouseMove = (e)=>{
+            const delta = dragStartXRef.current - e.clientX;
+            const next = Math.min(MAX_WIDTH, Math.max(MIN_WIDTH, dragStartWidthRef.current + delta));
+            onWidthChange(next);
+        };
+        const onMouseUp = ()=>{
+            setDragging(false);
+            document.body.classList.remove('se-panel-resizing');
+        };
+        window.addEventListener('mousemove', onMouseMove);
+        window.addEventListener('mouseup', onMouseUp);
+        return ()=>{
+            window.removeEventListener('mousemove', onMouseMove);
+            window.removeEventListener('mouseup', onMouseUp);
+        };
+    }, [
+        dragging,
+        onWidthChange
+    ]);
+    const onHandleMouseDown = useCallback((e)=>{
+        e.preventDefault();
+        dragStartXRef.current = e.clientX;
+        dragStartWidthRef.current = width;
+        setDragging(true);
+        document.body.classList.add('se-panel-resizing');
+    }, [
+        width
+    ]);
+    const toggle = useCallback((typeName)=>{
+        setExpanded((prev)=>{
+            const next = new Set(prev);
+            if (next.has(typeName)) next.delete(typeName);
+            else next.add(typeName);
+            return next;
+        });
+    }, []);
+    const allTypes = useMemo(()=>Object.values(metadata.types).sort((a, b)=>a.dataType.localeCompare(b.dataType)), [
+        metadata.types
+    ]);
+    const sortedBinds = useMemo(()=>[
+            ...metadata.binds
+        ].sort((a, b)=>a.name.localeCompare(b.name)), [
+        metadata.binds
+    ]);
+    const sortedRequests = useMemo(()=>[
+            ...metadata.requests
+        ].sort((a, b)=>a.name.localeCompare(b.name)), [
+        metadata.requests
+    ]);
+    return /*#__PURE__*/ react.createElement("div", {
+        ref: panelRef,
+        style: {
+            width,
+            flexShrink: 0,
+            display: 'flex',
+            flexDirection: 'row',
+            overflow: 'hidden',
+            minHeight: `${minHeight}px`,
+            maxHeight: `${maxHeight}px`,
+            position: 'relative'
+        }
+    }, /*#__PURE__*/ react.createElement(DragHandle, {
+        colors: colors,
+        dragging: dragging,
+        handleHovered: handleHovered,
+        onMouseDown: onHandleMouseDown,
+        onHoverChange: setHandleHovered
+    }), /*#__PURE__*/ react.createElement("div", {
+        style: {
+            flex: 1,
+            minWidth: 0,
+            borderLeft: `1px solid ${colors.border}`,
+            display: 'flex',
+            flexDirection: 'column',
+            overflow: 'hidden',
+            backgroundColor: colors.bg,
+            color: colors.text,
+            fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
+            fontSize: 13
+        }
+    }, /*#__PURE__*/ react.createElement(PanelHeader, {
+        colors: colors,
+        onCollapse: onCollapse
+    }), /*#__PURE__*/ react.createElement("div", {
+        className: SCROLL_CLASS,
+        style: {
+            flex: 1,
+            overflowY: 'auto',
+            overflowX: 'hidden',
+            minHeight: 0
+        }
+    }, /*#__PURE__*/ react.createElement(MainFunctionSection, {
+        metadata: metadata,
+        colors: colors
+    }), /*#__PURE__*/ react.createElement(VariablesSection, {
+        sortedBinds: sortedBinds,
+        sortedRequests: sortedRequests,
+        colors: colors
+    }), /*#__PURE__*/ react.createElement(DataTypesSection, {
+        allTypes: allTypes,
+        expanded: expanded,
+        onToggle: toggle,
+        colors: colors
+    }))));
+};
+export { TypePanel };

package/dist/types/index.d.ts

@@ -0,0 +1,77 @@
+/** 函数参数信息 */
+export interface ScriptParameterInfo {
+    dataType: string;
+    description?: string;
+    name: string;
+}
+/** 函数/方法信息 */
+export interface ScriptFunctionInfo {
+    description?: string;
+    name: string;
+    parameters: ScriptParameterInfo[];
+    returnType?: string;
+}
+/** 字段/属性信息 */
+export interface ScriptFieldInfo {
+    dataType: string;
+    description?: string;
+    name: string;
+}
+/** 类型定义 */
+export interface ScriptTypeInfo {
+    dataType: string;
+    description?: string;
+    fields: ScriptFieldInfo[];
+    functions: ScriptFunctionInfo[];
+}
+/** 绑定变量信息（如 $request） */
+export interface ScriptBindInfo {
+    dataType: string;
+    name: string;
+    description?: string;
+}
+/** 请求参数信息（如 request） */
+export interface ScriptRequestInfo {
+    dataType: string;
+    description?: string;
+    name: string;
+}
+/** 脚本元数据顶层结构 */
+export interface ScriptMetadata {
+    binds: ScriptBindInfo[];
+    requests: ScriptRequestInfo[];
+    mainMethod: string;
+    returnType?: string;
+    types: Record<string, ScriptTypeInfo>;
+}
+export interface ScriptCodeEditorProps {
+    /** 代码内容 */
+    value?: string;
+    /** 是否只读 */
+    readonly?: boolean;
+    /** 代码变化回调 */
+    onChange?: (value: string) => void;
+    /** 编译/测试脚本回调（后续接入 API） */
+    onCompile?: (code: string) => void;
+    /** 主题切换回调 */
+    onThemeChange?: (theme: 'dark' | 'light') => void;
+    /** 占位符 */
+    placeholder?: string;
+    /** 主题 */
+    theme?: 'dark' | 'light';
+    /** 标题（可选） */
+    title?: string;
+    /** 脚本元数据 — 提供后启用类型面板和自动补全 */
+    metadata?: ScriptMetadata;
+    /** 类型面板侧边栏默认是否展开（默认：提供 metadata 时为 true） */
+    defaultSidebarOpen?: boolean;
+    /** 其他选项 */
+    options?: {
+        /** 字体大小 */
+        fontSize?: number;
+        /** 最小高度 */
+        minHeight?: number;
+        /** 最大高度 */
+        maxHeight?: number;
+    };
+}

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@coding-script/script-engine",
+  "version": "0.0.1",
+  "description": "script-engine components",
+  "keywords": [
+    "coding-script",
+    "script-engine"
+  ],
+  "homepage": "https://github.com/codingapi/script-engine",
+  "bugs": {
+    "url": "https://github.com/codingapi/script-engine/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/codingapi/script-engine.git"
+  },
+  "license": "Apache-2.0",
+  "author": "1024lorne@gmail.com",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "@codemirror/autocomplete": "^6.18.0",
+    "@codemirror/commands": "^6.10.2",
+    "@codemirror/lang-java": "^6.0.2",
+    "@codemirror/language": "^6.12.2",
+    "@codemirror/state": "^6.5.4",
+    "@codemirror/theme-one-dark": "^6.1.3",
+    "@codemirror/view": "^6.39.16"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "scripts": {
+    "build": "rslib build",
+    "dev": "rslib build --watch",
+    "push": "pnpm run build && pnpm publish --access public"
+  }
+}