@handy-js/hlcode v0.2.1

parse JXS to NodeJson

import { jsx2Node } from '@handy-js/hlcode';

const node = jsx2Node(`<>
  <Form
    name="basic"
    labelCol={{ span: 8 }}
    wrapperCol={{ span: 16 }}
    initialValues={{ remember: true }}
    onFinish={onFinish}
    onFinishFailed={onFinishFailed}
    autoComplete="off"
  >
    <Form.Item
      label="Username"
      name="username"
      rules={[{ required: true, message: 'Please input your username!' }]}
    >
      <Input />
    </Form.Item>

    <Form.Item
      label="Password"
      name="password"
      rules={[{ required: true, message: 'Please input your password!' }]}
    >
      <Input.Password />
    </Form.Item>

    <Form.Item name="remember" valuePropName="checked" wrapperCol={{ offset: 8, span: 16 }}>
      <Checkbox>Remember me</Checkbox>
    </Form.Item>

    <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
      <Button type="primary" htmlType="submit">
        Submit
      </Button>
    </Form.Item>
  </Form>
</>`);

transform NodeJson to JSX code

import { node2Jsx } from '@handy-js/hlcode';

const jsxCode = node2Jsx(node);

render React Jsx

import React, { useState } from 'react';
import { renderJsx } from '@handy-js/hlcode';

function App() {
  const [count, setCount] = useState(0);

  return renderJsx(`<div className='App'>
      <div>
        <a href='https://vitejs.dev' target='_blank'>Vite</a>
      </div>
      <h1>Vite + React</h1>
      <div className='card'>
        <button onClick={() => setCount((count) => count + 1)}>
          count is {count}
        </button>
        <p>
          Edit <code>src/App.tsx</code> and save to test HMR
        </p>
      </div>
      <p className='read-the-docs'>
        Click on the Vite and React logos to learn more
      </p>
    </div>`, null, { React, count, setCount });
}

render React NodeJson

import React, { useState } from 'react';
import { renderNode, jsx2Node } from '@handy-js/hlcode';

function App() {
  const [count, setCount] = useState(0);

  return renderNode(jsx2Node(`<div className='App'>
      <div>
        <a href='https://vitejs.dev' target='_blank'>Vite</a>
      </div>
      <h1>Vite + React</h1>
      <div className='card'>
        <button onClick={() => setCount((count) => count + 1)}>
          count is {count}
        </button>
        <p>
          Edit <code>src/App.tsx</code> and save to test HMR
        </p>
      </div>
      <p className='read-the-docs'>
        Click on the Vite and React logos to learn more
      </p>
    </div>`), null, { React, count, setCount });
}