yaka-json-to-react-code
Advanced tools
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-json-to-react-code receives a total of 0 weekly downloads. As such, yaka-json-to-react-code popularity was classified as not popular.
We found that yaka-json-to-react-code demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Company News
Socket is joining the OpenJS Security Stewardship Program to fund Node.js vulnerability research, maintainer remediation, and security releases.
Security News
Two compromised GitHub Actions were re-enabled with malicious tags intact, exposing thousands of downstream repositories to Mini Shai-Hulud.
Research
/Security News
A malicious Firefox extension fetches its payload after installation to evade detection, steal Google session cookies, and automate account takeover.