# @lingxiteam/dsl

> 灵犀低代码平台DSL操作库，一切皆Node。

Latest version **2.2.5** (published 2025-10-16) · ISC license · 0 weekly downloads

## Install

```sh
npm install @lingxiteam/dsl
pnpm add @lingxiteam/dsl
yarn add @lingxiteam/dsl
bun add @lingxiteam/dsl
```

## Health

**Score 55/100 (C)** — status: stable.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 2.2.5 |
| Published | 2025-10-16 |
| First published | 2022-04-16 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 1.7 MB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Maintainers | limanpm, wanerrr, mishi-brother, hammersjs, zhang.guoyong, zzzzjq, diyc, goulili, pengyh, wujian666, taiyangteng, cenxiaolian, xiaohuoni, duan_duan, yaozanwen, brinkr, babelczx |

## Links

- npm: https://www.npmjs.com/package/@lingxiteam/dsl
- npm.io page: https://npm.io/package/@lingxiteam/dsl

## Dependencies (3)

- [lodash](https://npm.io/package/lodash.md) ^4.17.21
- [@babel/runtime](https://npm.io/package/@babel/runtime.md) 7.23.2
- [@lingxiteam/types](https://npm.io/package/@lingxiteam/types.md) *

## Recent versions

- 2.2.5 (latest) — 2025-10-16
- 2.2.4 — 2025-09-24
- 2.2.3 — 2025-09-03
- 2.2.2 — 2025-08-19
- 2.2.1 — 2025-08-19
- 2.2.0 — 2025-04-16
- 2.1.9 — 2025-04-15
- 2.1.8 — 2025-04-15
- 2.1.7 — 2025-04-11
- 2.1.6 — 2025-04-11
- 2.1.5 — 2025-03-31
- 2.1.4 — 2025-03-19
- 2.1.3 — 2025-03-18
- 2.1.2 — 2024-12-23
- 2.1.1 — 2024-11-04
- … 111 more at https://npm.io/package/@lingxiteam/dsl/versions

## README

# @lingxiteam/dsl 

灵犀低代码平台DSL操作库，一切皆Node。除get开头方法外，一切方法皆可链式调用。示例如下: 
```javascript
DSLCore?.query(compId)
        .setProps(props)
        .setStyle(props)
        .appendSetEvents(event);
```

## 1. 安装
> yarn add @lingxiteam/dsl 

## 2. 使用
```javascript

import { DSLProvider } from '@lingxiteam/dsl';

interface EditorProps {}

const Editor: FC<EditorProps> = props => {
  const [json, setJson] = React.useState<any>();

  useEffect(() => {
    setTimeout(() => {
      setJson(data);
    }, 2000);
  }, []);

  return (
    <DSLProvider json={json}>
      <EditorView />
    </DSLProvider>
  );
};

export default Editor;
```


## 3. 操作Node
```javascript
import { useDSLSelect } from '@lingxiteam/dsl';

interface CanvasProps {}

const Canvas: FC<CanvasProps> = props => {
  const { DSLCore } = useDSLSelect();

  // 设置当前选中节点
  DSLCore?.setCurrent(comp.id);

  // 获取根节点
  DSLCore?.document.rootNode;

  // 获取节点子组件
  DSLCore?.document.rootNode?.children();

  // 查询节点
  const node = DSLCore?.query(compId);

  // Node节点的增删改查操作...
  node.appendChild({
    id: '',
    compName: '',
    components: [],
    compLib: ''
    ...
  });

  node.insertChild(0, {
    id: '',
    compName: '',
    components: [],
    compLib: ''
    ...
  });

  node.insertChildBeforeById(compId, getNode());
  
  ...

  // 移除节点
  node.remove();

  // 删除所有子元素
  node.removeAllChildren();
  
  // 支持移动组件 
  node.moveTo();

  // 设置属性、样式、自定义样式、数据源、自定义函数、事件等
  node.setProps();
  node.setStyle();
  node.setCustomStyle();
  node.appendDataSource();
  node.updateDataSourceByIndex();
  node.deleteDataSourceByIndex();
  node.deleteDataSourceById();
  node.appendCustomFunctions();
  node.updateCustomFunctionsByIndex();
  node.updateCustomFunctionsByEventCode();
  node.deleteCustomFunctionsByEventCode();
  node.deleteCustomFunctionsByIndex();

  // 以上函数只是简单列举，内部提供了更多使用方法。详见下表格

  return (
    <div className="canvas" />
  );
};


```

## 4. API 

### 4.1 DSLQuery   

单例方法，全局只有一个`DSLQuery`类。等于`useDSLSelect`类中的`DSLCore`。一般情况下无需使用本类方法。

|  方法  |  说明  |  类型  |  默认值  |  参数必填 |
| ---- |  ----  | ----  |  ----  |  ----  |
| init(e: JSONType): this | 初始化方法，传入JSON数据，一般不用主动调用，默认会通过`DSLProvider`传入。| (e: JSONType) => this  |    \- | 是 |
| reset(e): this | 重置方法,默认恢复到init初始化状态 | () => this  |    \- | `无参数` |
| clear(e): this | 清除QSLQuery，主要给恢复、回退功能使用 | () => this  |    \- | `无参数` |
| query(id:string):  DSLNode \| RootNode | 根据id查询Node节点 | (id: string) => DSLNode \| RootNode | \- | 是 |
| toJSON() => JSONType | 转换成JSON数据 | () => JSONType\|null | \- | 否 |

### 4.2 DSLDocument 

文档类，用来管理NODE节点。可通过 `DSLCore.document` 获得。

### 4.3 DSLNode
具体操作可在项目中直接查看属性，或者使用开发过程中的提示功能。如下图所示。

#### 提示效果
![提示1](https://cdn.jsdelivr.net/gh/LimMem/firimage/dsl-des.png)
<br />
#### 接口定义

[查看图片](https://cdn.jsdelivr.net/gh/LimMem/firimage/dsl-api.gif)

### 具体Demo可查看 [github](https://github.com/LimMem/dslquery-demo.git)

---
_Source: https://npm.io/package/@lingxiteam/dsl · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._