npm install yaka-core --save
import Yaka from 'yaka-core'
const YakaForm = Yaka.YakaForm,
YakaFormOnFlow = Yaka.YakaFormOnFlow,
YakaComponent = Yaka.YakaComponent
请按需引用
import React, { Component } from 'react';
import Yaka from 'yaka-core'
// yaka组件需另行安装
import yakaComponents from 'yaka-components'
const { components, layoutComponents } = yakaComponents
import { config } from './config/'
const YakaComponent = Yaka.YakaComponent
class App extends Component {
render() {
return (
<div className='yaka'>
<YakaComponent
config={config}
components={components}
layoutComponents={layoutComponents}
/>
</div>
)
}
}
export default App;
新的json协议会分为以下部分
layout的配置协议做了改动，更加简洁
废弃项
以下是新版的配置示例
"layout": [
{
"ele": "Row",
"subs": [
{
"col": 24,
"ele": "h1",
"text": "@data",
"hide": true,
"props": {
"style": {
"textAlign": "center"
}
}
}
]
}
]
yaka初始化的数据声明、函数初始化、数据监听都集中在这里进行处理
formValue 原initData，用来配置表单的初始值
state 原global，用来配置全局变量
watch 数据监听配置项目
数据监听配置项目，目前仅支持监听 全局变量，监听后触发的对应动作仅支持调用函数
"watch": {
// 声明监听的变量
"title": {
// 声明调用的函数
"run": "log"
}
}
functions 函数的声明,原models 和functions都转到这里进行配置
函数声明方式改为配置模板函数的方式，yaka本身有两个函数模板可以使用，用户也可以自己通过外部写入自己的模板然后声明调用。
"functions": {
"getItem": {
// 函数模板名称
"type": "yakaFetch",
// 函数模板定义，具体参数应由模板开发者给出配置项
"definition": {
"headers": {
"aa": "@data",
"state": "$demo",
"string": "string"
},
"type": "restful",
"url": "http://xingyang.com/re/localdns",
"params": {
"demo": "$title.value",
"test": "#name"
},
"streams": {
"$bumen.options": {
"path": "data.org",
"alias": {
"label": "label",
"value": "value"
}
},
"$test.options": "data.org"
}
}
},
"titleChange": {
"type": "stream",
"definition": {
"$title": "target.value",
"#sename": "target.value"
}
},
"log": {
"type": "log",
"definition": {
"text": "自定义代码模板"
}
}
},
以下是新版初始化的配置示例
"init": {
"formValue": {
"bumen": "2",
"name": "1000",
"checkbox": [
"Pear"
],
"numbeer": "demo",
"switch": false
},
"state": {
"demo": "ddddddd"
},
"functions": {
"getItem": {
"type": "yakaFetch",
"definition": {
"headers": {
"aa": "@data",
"state": "$demo",
"string": "string"
},
"type": "restful",
"url": "http://xingyang.com/re/localdns",
"params": {
"demo": "$title.value",
"test": "#name"
},
"streams": {
"$bumen.options": {
"path": "data.org",
"alias": {
"label": "label",
"value": "value"
}
},
"$test.options": "data.org"
}
}
},
"titleChange": {
"type": "stream",
"definition": {
"$title": "target.value",
"#sename": "target.value"
}
},
"log": {
"type": "log",
"definition": {
"text": "自定义代码模板"
}
}
},
"watch": {
"title": {
"run": "log"
}
},
"event": {
"demo": {
"onCLick": "#buttonCLick"
}
}
}
yaka组件挂载后的生命周期钩子，适用于调用一些api函数
配置方式很简单，在run里面用对象键值的形式声明调用的函数名和对应的参数
"mounted": {
"run": {
"demo": {
"param": 10000
},
"getItem": {},
"log": {
"param": "dadwa"
}
}
}
外部函数挂载的接口，挂载进去的函数同json配置声明的函数一样的效果。
<YakaFormEngine
mountFunctions={{
demo: (data, api) => {
const { getState, formValueSettingFunction, stateValueSettingFunction } = api
formValueSettingFunction({ sename: "测试数据" })
stateValueSettingFunction({
title: {
value: "测试数据"
}
})
},
yakaChange: (val, api) => {
console.log(val, '外部接口');
}
}}
/>
挂载函数接收两个参数
Data触发元素传入的值
暴露的yakaApi可以用来修改数据,以下是几个常用的api
单纯使用挂载函数的话，很多场景下都要不断开发函数去应对，这样不利于后期维护和整个生态的发展。沿用了旧版的思路，提出函数模板的概念。
用户可以定义一种可以满足部分场景的函数模板，模板可以根据配置应对不同的细微调整。下面是简单的配置示例
<YakaFormEngine
functionTemplates={{
log: (definition, data, api) => {
const { text } = definition
const log = () => {
console.log(e);
}
return log
}
}}
/>
参数说明
下面是在json定义和调用的示例
"init": {
"functions": {
"log": {
"type": "log",
"definition": {
"text": "自定义代码模板"
}
}
}，
"watch": {
"title": {
"run": "log"
}
}
}
外部数据挂载的数据现在用 mountData 统一接收
<YakaFormEngine
mountData={{ data: this.state.test, num: 1 }}
/>
内部接受的用法
"layout": [
{
"ele": "Row",
"subs": [
{
"col": 24,
"ele": "h1",
// 使用 @接受mountData
"text": "@data",
"hide": true,
"props": {
"style": {
"textAlign": "center"
}
}
}
]
},
]
新增插件扩展的接口，现在主要是用来扩展layout里面的配置项目
例如我们要在组件配置项目里面加入一个hide的字段，如果这个字段为ture，就不渲染这个组件
插件代码
const logic = (Element, { config, key }, { debug, formCreatFunc, yakaApis }) => {
if (config.hide) {
return null
}
return Element
}
export default logic
yaka组件使用方式，插件接口需要传入的是一个数组，用户可以根据需要引入不同的插件扩展
<YakaFormEngine
plugIn={[logic]}
/>
json配置上的变化
"layout": [
{
"ele": "Row",
"subs": [
{
"col": 24,
"ele": "h1",
// 使用 @接受mountData
"text": "@data",
"hide": true,
"props": {
"style": {
"textAlign": "center"
}
}
}
]
},
]
插件函数的三个入参
注意插件函数必须要有return一个元素!!!!
yaka配置平台现在按组件细粒度拆分出个个组件的配置，方便用户进行配置微调。
现在yaka仅仅是基于react 和 rc-form 的一个渲染引擎了。
###抽离yaka组件到 yaka-component包
旧版本yaka开发的组件都集成在了yaka-core里面，现在这部分组件抽离出去，成了一个npm包进行引用
yarn add yaka-component
FAQs
a engine of analysis json to react
The npm package yaka-core receives a total of 54 weekly downloads. As such, yaka-core popularity was classified as not popular.
We found that yaka-core demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 3 open source maintainers collaborating on the project.
Security News
GitHub Actions now supports cache-mode, a least-privilege control on the Actions cache aimed at the cache poisoning technique behind recent compromises.
Company News
Allow myself to introduce... myself.
Research
/Security News
A Twitch browser extension on Chrome and Firefox forwards users’ live OAuth session tokens through proxies controlled by a Russian bot service.