open-index/open-npm huggingface dataset:
npm package: @gant-lowcode/lowcode-code-generator
Description: 出码引擎 for LowCode Engine
Latest version: 1.2.0

# 出码

所谓出码，即将低代码编排出的 schema 进行解析并转换成最终可执行的代码的过程。本模块提供有 Icejs 和 Rax 两套框架的出码方案，并提供了强大而灵活的扩展机制。

## 使用方法

### 1) 通过命令行快速体验

欢迎使用命令行工具快速体验：`npx @alilc/lowcode-code-generator -i example-schema.json -o generated -s icejs`

--其中 example-schema.json 可以从[这里下载](https://unpkg.com/@alilc/lowcode-code-generator@beta/example-schema.json)

### 2) 通过设计器插件快速体验

1. 安装依赖: `npm install --save @alilc/lowcode-plugin-code-generator`
2. 注册插件:

```ts
import { plugins } from '@gant-lowcode/lowcode-engine';
import CodeGenPlugin from '@alilc/lowcode-plugin-code-generator';

// 在你的初始化函数中：
await plugins.register(CodeGenPlugin);

// 如果您不希望自动加上出码按钮，则可以这样注册
await plugins.register(CodeGenPlugin, { disableCodeGenActionBtn: true });
```

然后运行你的低代码编辑器项目即可 -- 在设计器的右上角会出现一个“出码”按钮，点击即可在浏览器中出码并预览。

### 3）服务端出码接入

此代码生成器一开始就是为服务端出码设计的，你可以直接这样来在 node.js 环境中使用：

1. 安装依赖: `npm install --save @alilc/lowcode-code-generator`
2. 引入代码生成器:

```js
import CodeGenerator from '@alilc/lowcode-code-generator';
```

3. 创建项目构建器:

```js
const projectBuilder = CodeGenerator.solutions.icejs();
```

4. 生成代码

```js
const project = await projectBuilder.generateProject(
  schema, // 编排搭建出来的 schema
);
```

5. 将生成的代码写入到磁盘中(也可以生成一个 zip 包)

```js
// 写入磁盘
await CodeGenerator.publishers.disk().publish({
  project, // 上一步生成的 project
  outputPath: '/path/to/your/output/dir', // 输出目录
  projectSlug: 'your-project-slug', // 项目标识
});

// 写入到 zip 包
await CodeGenerator.publishers.zip().publish({
  project, // 上一步生成的 project
  outputPath: '/path/to/your/output/dir', // 输出目录
  projectSlug: 'your-project-slug', // 项目标识 -- 对应生成 your-project-slug.zip 文件
});
```

注：一般来说在服务端出码可以跟 github/gitlab, CI 和 CD 流程等一起串起来使用，通常用于优化性能。

### 4）浏览器中出码接入

随着现在电脑性能和浏览器技术的发展，出码其实已经不必非得在服务端做了，借助于 Web Worker 特性，可以在浏览器中进行出码：

1. 安装依赖: `npm install --save @alilc/lowcode-code-generator`
2. 引入代码生成器:

```js
import * as CodeGenerator from '@alilc/lowcode-code-generator/standalone-loader';
```

3. 【可选】提前初始化代码生成器:

```js
// 提前初始化下，这样后面用的时候更快(这个 init 内部会提前准备好创建 worker 的一些资源)
await CodeGenerator.init();
```

4. 出码

```js
const project = await CodeGenerator.generateCode({
  solution: 'icejs', // 出码方案 (目前内置有 icejs 和 rax )
  schema, // 编排搭建出来的 schema
});

console.log(project); // 出码结果(默认是递归结构描述的，可以传 flattenResult: true 以生成扁平结构的结果)
```

注：一般来说在浏览器中出码适合做即时预览功能。

5. 下载 zip 包

```js
// 写入到 zip 包
await CodeGenerator.publishers.zip().publish({
  project, // 上一步生成的 project
  projectSlug: 'your-project-slug', // 项目标识 -- 对应下载 your-project-slug.zip 文件
});
```

### 5）自定义出码

前端框架灵活多变，默认内置的出码方案很难满足所有人的需求，好在此代码生成器支持非常灵活的插件机制 -- 欢迎参考 ./src/plugins/xxx 来编写您自己的出码插件，然后参考 ./src/solutions/xxx 将各种插件组合成一套适合您的业务场景的出码方案。

## 参与共建

欢迎参与共建，如何共建请参阅：[./CONTRIBUTING.md](https://github.com/alibaba/lowcode-engine/blob/main/modules/code-generator/CONTRIBUTING.md)
npm package: @gant-lowcode/lowcode-engine-ext
Description: ### 简介 lowcode-engine-ext 是阿里低代码引擎官方提供的 setter 和 setter 必须依赖的插件集合
Latest version: 1.0.7

### @gant-lowcode/lowcode-engine-ext

### 简介
lowcode-engine-ext 是阿里低代码引擎官方提供的 setter 和 setter 必须依赖的插件集合

setter(设置器) 是用来展示每个物料的属性，[setter使用说明手册](https://www.yuque.com/lce/doc/cl03wo_nmhznb) [官方setter列表说明](https://www.yuque.com/lce/doc/oc220p#fl46)

### 使用方式

使用 CDN 方式引用，下方是官方提供的两个稳定 CDN

#### 方式 1：alifd cdn
 1: alifd cdn
```html
https://alifd.alicdn.com/npm/@gant-lowcode/lowcode-engine-ext@1.0.5/dist/css/engine-ext.css

https://alifd.alicdn.com/npm/@gant-lowcode/lowcode-engine-ext@1.0.5/dist/js/engine-ext.js
```

#### 方式 2: uipaas cdn
```html
https://uipaas-assets.com/prod/npm/@gant-lowcode/lowcode-engine-ext/1.0.5/dist/css/engine-ext.css

https://uipaas-assets.com/prod/npm/@gant-lowcode/lowcode-engine-ext/1.0.5/dist/js/engine-ext.js
```

#### 拓展变量绑定面板

通过传入extraDataMap拓展属性绑定面板

```typescript
ctx.skeleton.add({
  area: 'centerArea',
  type: 'Widget',
  content: pluginMap.VariableBindDialog,
  name: 'variableBindDialog',
  props: {
    getSchema: () => editorController.getSchema(),
    // 拓展变量绑定
    extraDataMap: {
      props: {
        name: 'Props', // 变量组展示名
        key: 'props', // 属性名，例如 this.props
        getChildren: () => [
          {
            label: 'prop1',
            value: 'value1',
          },
          {
            label: 'prop2',
            children: [
              { label: 'propxxx', value: 1 }
            ]
          }
        ],
      }
    }
  },
});
```
npm package: @gant-lowcode/lowcode-material-parser
Description: material parser for Gant lowCode engine
Latest version: 2.0.5

# @alilc/lowcode-material-parser

> 入料模块

本模块负责物料接入，能自动扫描、解析源码组件，并最终产出一份符合《中后台搭建组件描述协议》的 **JSON Schema**。

详见[文档](https://lowcode-engine.cn/site/docs/guide/design/materialParser)。

## demo

```shell
cd demo

// parse jsx
node parse-jsx.js

// parse tsx
node parse-tsx.js

```

## API
npm package: @gant-lowcode/lowcode-plugin-block
Description: ## 区块实体
Author: mark.ck
Latest version: 2.1.3

# 区块管理 - 区块面板

## 区块实体

```

interface Block {
  name: string;
  title: string;
  schema: string;
  screenshot: string;
  created_at?: string;
  updated_at?: string;
}

```

## 注意

使用区块管理需要提前将对应的 API 注册到 engine config 里：

```

interface BlockAPI {
  listBlocks: () => Block[];
  createBlock: (Block) => any;
}

function setupConfig() {
  config.set('apiList', {
    block: {
      listBlocks,
      createBlock
    },
  })
}
```

# 使用方式

```
import { plugins } from '@gant-lowcode/lowcode-engine';
import BlockPane from '@gant-lowcode/lowcode-plugin-block';

await plugins.register(BlockPane);
```
npm package: @gant-lowcode/lowcode-plugin-code-generator
Description: 集团低代码引擎 - 浏览器出码插件
Latest version: 1.0.6

# 集团低代码引擎 - 出码插件（浏览器里进行出码）

## 简介

本项目是出码模块的对应的浏览器里进行出码的插件

## 使用方法

1. 安装依赖 `npm install --save @gant-lowcode/lowcode-plugin-code-generator`
2. 注册插件:

```ts
import { plugins } from '@gant-lowcode/lowcode-engine';
import CodeGenPlugin from '@gant-lowcode/lowcode-plugin-code-generator';

// 在你的初始化函数中：
await plugins.register(CodeGenPlugin);

// 如果您不希望自动加上出码按钮，则可以这样注册
await plugins.register(CodeGenPlugin, { disableCodeGenActionBtn: true });

```

然后运行你的低代码编辑器项目即可。

参考：低代码编辑器的 Demo: <https://github.com/alibaba/lowcode-demo>

## 插件 API

本插件提供了出码的 API，注册了插件后, 可以这么样来用:

```js
import { plugins } from '@gant-lowcode/lowcode-engine';

const codeGenResult = plugins.codeGenerator.generateCode({
  solution: 'icejs',
  schema: await ctx.project.exportSchema(),
});

console.log('出码结果:', codeGenResult); // 这里就是出码结果

```

## 本地开发

常规两步即可开发调试：`npm i && npm start`

## 共建

欢迎参与共建，欢迎直接 fork 一份改改，补充您所需要的特性或修复 bug，然后提 PR 过来:

-- 代码仓库：<https://github.com/alibaba/lowcode-code-generator-demo>
npm package: @gant-lowcode/lowcode-plugin-manual
Description: 低代码产品使用手册
Author: humphry.huang9@gmail.com
Latest version: 3.0.5

# @gant-lowcode/lowcode-plugin-manual [![][npm-image]][npm-url]

低代码产品使用手册

---

## 使用

### 注册插件

```jsx
import { plugins } from '@gant-lowcode/lowcode-engine';
import PluginManual from '@gant-lowcode/lowcode-plugin-manual';

// 注册到引擎
plugins.register(PluginManual);
```

### 插件属性 & 方法
无对外暴露的属性和方法

### 依赖插件
该插件依赖以下插件：

| 插件名 | 包名 |
| --- | --- |

## 开发
### 环境准备

### 启动
```sh
npm i & npm start
```

### 发布
```sh
npm run pub
```

[npm-image]: https://img.shields.io/badge/@gant-lowcode/lowcode-plugin-manual
[npm-url]: https://www.npmjs.com/package/@gant-lowcode/lowcode-plugin-manual
npm package: @gant-lowcode/lowcode-plugin-multiple-editor
Description: 借助此插件可在低码引擎上使用任意层级的文件树进行代码的组织
Author: wsh
Latest version: 2.1.3

# 多文件编辑器

借助此插件可在低码引擎上使用任意层级的文件树进行代码的组织

## Demo

```ts
import multipleFileCodeEditorFactory from '@gant-lowcode/lowcode-plugin-multiple-editor';

import { PrettierPlugin } from '@gant-lowcode/lowcode-plugin-multiple-editor/es/plugins/prettier-plugin';


const PLUGIN_NAME = 'multiple-file-code-editor';
// 详细参数可见 ts 类型声明
const plugin: any = multipleFileCodeEditorFactory({
  softSave: true, // true 保存代码时将代码保存在插件类上，并不会调用引擎的 importSchema
  es6: true, // 编译选项，true 时仅做 es module 的编译
  // 可选择使用插进进行代码编辑器功能的拓展
  plugins: [searchPlugin as any, lintPlugin, new PrettierPlugin()],
  // 内置钩子，在插件初始化时进行一些操作，例如添加类型声明
  onInstall(controller: EditorController) {
    for (const [path, content] of extraLibList) {
      controller.addExtraLib(content, path);
    }
    controller.addComponentDeclarations(declarations);
    controller.onImportSchema(async (schema) => {
      // Todo sth.
    });
    window.codeEditorController = controller;
  },
  defaultFiles: {
    utils: `
export function helloWorld() {
  console.log('hello world');
}
    `
  }
});

plugin.pluginName = PLUGIN_NAME;

await plugins.register(plugin);
```

## 工作原理

使用该插件时，每次保存时：

1. 编译代码，生成 __initExtra 函数方法，该方法用于初始化各个方法、生命周期的真实定义
1. 修改 constructor 函数体，函数体内执行 __initExtra，constructor 将会在渲染引擎内执行，执行完成后即可得到所有方法和生命周期的真实定义
1. 在 schema 上保存一个文件 Map，保存位置为 `schema.componentsTree[0]._sourceCodeMap`

## 使用注意事项

1. 建议所有 project.importSchema 和 project.exportSchema 替换为 codeEditorController.importSchema 和 codeEditorController.exportSchema。原因是插件内部需要对文件内容进行处理
2. 不能在 index.js 的 Class 之外进行函数、变量定义，如需定义则在其他文件内定义
3. 不能在 index.js Class 的 state 定义中使用表达式
4. 如需在 setter 内适用类型定义，请开启 base-editor 的单例模式，仅需在应用入口处调用如下方法即可：
5. 如果低码项目有使用出码，则需对出码进行定制，将 _sourceCodeMap 中的文件生成到项目中，并对文件的引用进行处理，具体处理方式可自行组织

__使用单例模式__
```ts
import { configure } from '@gant-lowcode/lowcode-plugin-base-monaco-editor';
configure({ singleton: true });
```