# @whatsmk/meta-engine

> 元数据化引擎，在mk-app-loader实现的应用隔离基础上，实现可以用json元数据描述界面模型，并提供了action、reducer的基础函数和monkeyKing组件.

Latest version **0.0.32** (published 2018-09-28) · MIT license · 0 weekly downloads

## Install

```sh
npm install @whatsmk/meta-engine
pnpm add @whatsmk/meta-engine
yarn add @whatsmk/meta-engine
bun add @whatsmk/meta-engine
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.32 |
| Published | 2018-09-28 |
| First published | 2018-09-21 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 5 |
| Unpacked size | 55.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | Liujian Zhang |
| Maintainers | jeffycai, lishengguo, ziaochina |
| Keywords | react, reactjs, flux, redux, react-redux, antd, immutable, mk, mongkey king, whatsmk, mk-js |

## Links

- npm: https://www.npmjs.com/package/@whatsmk/meta-engine
- Repository: https://github.com/whatsmk/mk/packages/mk-meta-engine
- Homepage: https://github.com/whatsmk/mk/packages/mk-meta-engine#readme
- Issues: https://github.com/whatsmk/mk/packages/mk-meta-engine/issues
- npm.io page: https://npm.io/package/@whatsmk/meta-engine

## Dependencies (5)

- [react](https://npm.io/package/react.md) *
- [lodash](https://npm.io/package/lodash.md) *
- [immutable](https://npm.io/package/immutable.md) *
- [react-dom](https://npm.io/package/react-dom.md) *
- [@whatsmk/utils](https://npm.io/package/@whatsmk/utils.md) *

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.0.32 (latest) — 2018-09-28
- 0.0.31 — 2018-09-28
- 0.0.30 — 2018-09-28
- 0.0.29 — 2018-09-27
- 0.0.28 — 2018-09-26
- 0.0.27 — 2018-09-26
- 0.0.26 — 2018-09-26
- 0.0.25 — 2018-09-26
- 0.0.24 — 2018-09-26
- 0.0.23 — 2018-09-25
- 0.0.22 — 2018-09-25
- 0.0.21 — 2018-09-25
- 0.0.20 — 2018-09-25
- 0.0.19 — 2018-09-25
- 0.0.18 — 2018-09-25
- … 8 more at https://npm.io/package/@whatsmk/meta-engine/versions

## README

# mk-meta-engine

元数据化引擎，在mk-app-loader实现的应用隔离基础上，实现可以用json元数据描述界面模型，并提供了action、reducer的基础函数和monkeyKing组件.

目的是让开发者能按照一个固定的套路创建应用

## run example

```
$ cd example
$ npm init
$ npm start
```

## 基于当前元数据引擎实现的一些模板app，请点击链接查看

- [mk-app-root](https://github.com/ziaochina/mk-app-root)
- [mk-app-login](https://github.com/ziaochina/mk-app-login)
- [mk-app-portal](https://github.com/ziaochina/mk-app-portal)
- [mk-app-person-list](https://github.com/ziaochina/mk-app-person-list)
- [mk-app-person-card](https://github.com/ziaochina/mk-app-person-card)

## demo网站

- [mk-demo](https://github.com/ziaochina/mk-demo)

## API

### index 

| 成员        | 说明           | 类型               | 
|-------------|----------------|--------------------|
| start | 启动, 使用mk命令创建网站已经调用，不用手动再掉 | function |
| config | 配置，配置元数据引擎以及app-loader需要apps,components等，不用手动调用 | function |
| action | 元数据引擎基类action,提供了一些action基础方法 | class |
| reducer | 元数据引擎基类reducer,提供了一些reducer基础方法 | class |
| wrapper | 元数据引擎组件装饰器 | function |
| componentFactory | 元数据引擎组件仓库，可以注册自己开发的组件 | function |
| AppLoader | AppLoader组件，可以加载app,来源于mk-app-loader | ReactElement |


### action

| 成员        | 说明           | 类型               | 
|-------------|----------------|--------------------|
| config    | 配置函数，使用mk命令初始化的应该默认已经调用   | function |
| getField | 获取state中某个字段值，参数为(fieldPath)，如data.form.user   | function | 
| gf | gf === getField, 简写  | function | 
| setField | 设置state中某个字段值，参数为(fieldPath,value) | function |
| sf | sf === setField, 简写 | function |
| getMeta | 获取元数据，参数为(path,propertys), path:如root.form.user, propertys:如['style'] | function |
| gm | gm === getMeta, 简写 | function |
| context | 上下文object,设置后所有app可以获取context中的信息 | object |
| toast | 轻提示 | function |
| notification | 通知提示 | function |
| modal | 显示模式窗口 | function |

### reducer 
| 成员        | 说明           | 类型               | 
|-------------|----------------|--------------------|
|  init | 初始化，使用mk命令初始化的应该默认已经调用 | function |
| getMeta | 获取元数据， 参数（state, path,propertys） | function |
| gm | gm === getMeta | function |
| getField | 获取字段值，参数为(state, fieldPath) | function |
| gf | gf === getField | function |
| setField | 设置字段值， 参数为(state, field, value) | function|
| sf | sf === setField | function |
| context | 上下文Object | object |

### meta
Json化定义界面数据，如下
```
{
    name: 'root',
    component: '::div',
    children: [{
        name: 'about',
        component: '::a',
        children: 'about',
        style: { fontSize: 16, margin: 30 },
        onClick: '{{$handleAboutClick}}'
    }, {
        name: 'hello',
        component: '::a',
        children: 'hello world',
        style: { fontSize: 16, margin: 30 },
        onClick: '{{$handleHelloClick}}'
    }, {
        name: 'content',
        component: '::div',
        style: { fontSize: 16, margin: 30 },
        children: 'hello world'
    }]
}
```
| 固定属性        | 说明           | 类型               | 
|-------------|----------------|--------------------|
| name | 名称，同级不能为重复 | string |
| component | 组件名，componentFactory中注册的，使用注册时候的名字，默认包含了mk-component所有组件;使用原生组件时，前面加:: | string |
| _visibile | 引擎级属性，设置为false,这个节点将不render | bool |
| _power | 超能力，目前支持函数返回组件和循环输出组件 | string |
| ... | ...属性将属性值解构赋值给组件 |
| 组件自身可用属性 | 只要是组件可用的属性就可以设置  | |


注：组件自身可用属性，属性值可以使用表达式，格式为"{{}}"

"{{data.form.user}}" => 取state中路径为data.form.user的值

"{{$handleClick}}" => 返回action中定义的handleClick方法

 "{{(e)=>$setField('data.form.user', e.target.value)}}" => 用户输入框修改，直接调用Action基类中setField方法赋值

 "{{$getVisible()}}" => 调用action中getVisible方法执行结果

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