# jsontocode

**Repository Path**: yangshundegitee/jsontocode

## Basic Information

- **Project Name**: jsontocode
- **Description**: 利用babel将json生成code，反向将code代码生成json配置
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-04-15
- **Last Updated**: 2022-04-29

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

![image](https://gitee.com/yangshundegit/jsontocode/blob/master/tip.gif)

#### gif太大未展示，可以点击[这里gif](https://gitee.com/yangshundegit/jsontocode/blob/master/simple.gif)
# DSL生成react代码
1. 修改DSL配置实时更新组件
2. 支持标签名称
3. props字符串，函数方法或自定义参数传递
4. props变量传参
5. state定义
6. 文件依赖处理，支持全局依赖和单个文件依赖
7. 支持变量以模版字符串格式传参


# react代码生成DSL
1. 修改组件实时更新配置


# run
```js
// index.js
import { Watch } from './lib/index.js';

new Watch({
    // 存放json配置目录
    jsonDir: './src',
    // 存放code配置目录
    codeDir: './dist',
    // 全局依赖
    autoImport: [
        'react',
    ],
})
```


```
npm run watch
```


# DSL结构定义
```js
export default {
  // 组件级属性定义
  imports: [              // 组件依赖数组，会和全局依赖合并再生成依赖代码
    ['./wrapper', 'Wrapper']  
  ],
  displayName: 'Pages',   // 组件名称
  state: {                // 组件state定义
    visible: true,
  },

  // 组件Dom树级定义
  props: {                // dom props传参：className, onClick 或 自定义props
    visible: "{{this.state.visible}}"
  },
  componentName: "Modal", // dom组件名称
  children: [             // dom子级属性, children可以是dom，也可以是字符串
    {
      props: {},
      componentName: "Wrapper",
      children: [
        {
          props: {
            isShow: "true",
            onClick: () => {
              setState({
                visible: false,
              })
            },
          },
          componentName: "p",
          children: "这是一段{{this.props.content}}文章"
        },
      ],
    },
  ],
}
```

# 生成code示例
```jsx
import React from "react";
import Wrapper from "./wrapper";
export default function Pages(props) {
  const [state, setState] = React.useState({
    visible: true,
  });
  return (
    <Modal visible={state.visible}>
      <Wrapper>
        <p
          isShow="true"
          onClick={() => {
            setState({
              visible: false,
            });
          }}
        >
          这是一段{props.content}文章
        </p>
      </Wrapper>
    </Modal>
  );
}
```

# import 依赖格式规范和示例
```js
{
  // (全局配置为autoImport,  页面配置为imports)
  autoImport: [
    // 'react'做了特殊处理，可以简写'react'
    'react',              =>     import React from 'react';

    // 传入数组类型  
    ['from', 'import'],
    ['react', 'React']    =>   import React from 'react';

    //传入对象类型
    {
            [package-name]: [
                'import'
            ],
            'react': [
                'useState',
                'useEffect'
            ],   =>   import { useState, useEffect } from 'react';
            [package-name]: ['import', 'alias'],
            'react': [
                'useState',
                ['useLayoutEffect', 'asyncLayoutEffect']
            ],   =>   import { useState, useLayoutEffect as asyncLayoutEffect } from 'react';
        }
  ]
}
```

# 双向转换注意事项
1. 可能一个文件的误修改保存导致另一边的文件更新，导致另一边文件的有效修改代码丢失，保存更新代码需谨慎或及时保存文件让两边文件及时同步