@yangshunnpm/jsontocode v1.0.2-alpha.1

gif太大未展示，可以点击这里gif

DSL生成react代码

1. 修改DSL配置实时更新组件
2. 支持标签名称
3. props字符串，函数方法或自定义参数传递
4. props变量传参
5. state定义
6. 文件依赖处理，支持全局依赖和单个文件依赖
7. 支持变量以模版字符串格式传参

react代码生成DSL

1. 修改组件实时更新配置

run

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

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

npm run watch

DSL结构定义

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示例

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 依赖格式规范和示例

{
  // (全局配置为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. 可能一个文件的误修改保存导致另一边的文件更新，导致另一边文件的有效修改代码丢失，保存更新代码需谨慎或及时保存文件让两边文件及时同步