open-index/open-npm huggingface dataset:
npm package: @lingxiteam/scene
Description: 灵犀低代码平台配置态场景，包含组件场景化和页面场景化
Latest version: 1.0.11-alpha.24

### 场景化开发

> 文件目录
```javascript
// 场景目录
| -- packages/scene/src/scene
    | -- comps   // 控件场景目录
        | -- h5 
        | -- pc  
        | -- index.ts // 控件场景统一导出
    | -- pages   // 页面场景目录
        | -- h5 
        | -- pc  
        | -- index.ts // 页面场景统一导出
```

> 场景开发

* 场景创建步骤
  + 1、在对应的场景目录下创建文件夹，声明配置文件
  + 2、在 packages/scene/src/scene/[comps|pages]/index.ts 声明导出控件
  + 3、重新 yarn export 生成 packages/scene/src/index.ts 文件
<br>

* 场景包内用到外部的组件、方法需要在主工程统一注册
```javascript
/**
 * editor/src/editor/utils/registerMetaPlugin.js
 */
export const api = {
  // 注册的方法
}
export const components = {
  // 注册的控件
}

```
<br>

* 场景化包内部使用
```javascript
/**
 * 配置文件 config.ts
 * demo: packages/scene/src/scene/pages/pc/TableList/config.ts
 */
// 配置文件中需要声明该场景内部使用到的方法和组件
export default defineSceneFlowConfig({
  api: ["useActions", "方法名称"], 
  customComponent: ["组件名称"],
  factory: ["Table", "控件"], // 场景内使用到的控件 
  ...
})

/**
 * 场景内部使用
 * demo: packages/scene/src/scene/pages/pc/TableList/useCreatePage.tsx
 */
export const useCreatePage: useLoadWorkFlow(props) {
  // 从props.plugins.meta导出使用
  const { api, customComponent } = props.plugins.meta || {};
  const action = api.useActions();
}
```