open-index/open-npm huggingface dataset:
npm package: @gem-mine/demo-sr
Description: > 此文件会复制到引用项目中，作为面向用户的`README`, 请认真填写
Latest version: 5.0.0

# 带路由/数据流的组件脚手架

> 此文件会复制到引用项目中，作为面向用户的`README`, 请认真填写

## Example

```js
import getPageRoute from 'demoComponent'

export default {
  path: '/demox',
  // 子路由
  sub: {
    ...pageRoute({
      relativePath: 'demox',
      modelPrefix: 'xxx'
    })
  }
}
```

## API

### getPageRoute

获取路由配置，直接挂载到路由中

|Name|Type|Default|Description|
|:--:|:--:|:-----:|:----------|
|[**`option.relativePath`**]|`{string}`| '' |路由的相对路径|
|[**`option.modelPrefix`**]|`{string}`| '' |store前缀，主要用途防止命名冲突|
npm package: @gem-mine/dev-entry
Description: @gem-mine/dev-entry
Author: wengzp
Latest version: 2.5.3

# @gem-mine/dev-entry

用于dev-entry编译入口

# 拆包

由于 `@gem-mine/script` -> `@gem-mine/dev-entry` -> `@gem-mine/script` 构成循环依赖，现拆分`dev-entry`

- @gem-mine/dev-entry: 位于 `packages/@gem-mine/dev-entry`, 用于发布
- dev-entry：位于 `packages/dev-entry`: 用于构建
npm package: @gem-mine/docsify-react-live
Description: 提供react组件的实时渲染和实时编辑
Latest version: 1.7.1

# docsify-react-live

提供react组件的实时渲染和实时编辑

## QuickStart

```js
<script src="../../dist/docsify-react-live.min.js"></script>

<script>
window.$docsify = {
  plugins: [
    (function () {
      return ReactLiveBox.create(scope, theme)
    })()
  ],
}
</script>
```
- scope 传递入react组件的局部遍历，如果使用`UMD`包，此处无需传入
- theme `prismjs`主题对象，更为方便的方法是用`prismjs`的css主题

代码块中如下编写

```
/* react live */
<className>demo-class</className>
<title>测试组件标题</title>
<desc>
测试组件标题
- 测试
</desc>
<style>
  body {
    height: 30px;
  }
</style>
<script>
const { Button } = soui

export default class App extends React.Component {
  render () {
    return <Button type="primary" onClick={() => alert('好的')}>确认</Button>
  }
}
</script>
<css>
.body {
  height: 100px;
}
</css>
```

- /* react live */ 表示是否要实时编辑
- /* react pureRender */ 表示只渲染
- className 生成的HTML中额外加入的className
- style 额外注入全局的样式
- script 代码内容
- desc 描述，可用`MarkDown`语法
- css 用于script下方额外显示的CSS内容