AST Engine - Transfer Between Source and Visual

Install Dependency

npm i @nola/ast
# or
yarn add @nola/ast

Import Package

import { AST } from '@nola/ast';

How to Use ?

1. init

const { ast } = new AST(<source code>);

支持范围

组件定义

function App() {
  return <div></div>;
}

export default App;

const App = () => {
  return <div></div>;
};

export default App;

export default () => {
  return <div></div>;
};

react 语法

• 字符串

<div className="div"></div>

• 变量

内部定义的变量：

var classA = '222';
<div className={classA}></div>;

引入外部的变量：

import logo from './logo.preview.png';
<image href={logo}></image>;

• 表达式

注释语句：

<div>{/* 这个是注释的代码 */}</div>

逻辑判断

const btnType = 'primary';
const count = 3;
<Button type={count > 1 ? btnType : 'text'}>btn</Button>;

const count = 9;
<div>{count > 1 ? <p id="3">1111</p> : <h1 className="4">2222</h1>}</div>;

const count = [1, 2, 3];
<div>{count.length ? <p id="3">1111</p> : <h1 className="4">2222</h1>}</div>;

• 模版字符串

const w = 50;
return (
  <div
    style={{
      width: `${60 + w}px`
    }}
  >
    cube
  </div>
);

• 函数

const caclWidth = (v1, v2) => {
  return `${v1 + v2 + 20}px`;
};
return (
  <div
    style={{
      width: caclWidth(2, 3)
    }}
  >
    cube
  </div>
);