文档地址 http://tinyrc.netty0911.com/

Install

npm install @netty0911/react-compiler

Usage

import React, { useEffect, useRef, useState } from 'react';
import { createCompiler } from '@netty0911/react-compile';

const code = `
import React from 'react';
import ReactDOM from 'react-dom';
import { Button } from '@netty0911/react-component';

const CustomComponent = () => {
  return (
    <Button>
      hello world!
    </Button>
  );
}

ReactDOM.render(<CustomComponent />, renderContainer)
`;

export const Demo = () => {
  const [value, setValue] = useState(code);

  const elementRef = useRef<any>(null);
  const compilerRef = useRef<any>(null);

  useEffect(() => {
    compilerRef.current = createCompiler({
      renderContainer: elementRef.current,
      modules: {
        '@netty0911/react-component': require('../tiny-rc'),
      },
    });
    run();
  }, []);

  const run = () => {
    compilerRef.current.run(value);
  };

  return (
    <div style={{ display: 'flex' }}>
      <div style={{ flex: 1 }}>
        <MonacoEditor
          monaco={monaco}
          height={400}
          language={'javascript'}
          defaultValue={value}
          onChange={setValue}
        />
      </div>
      <div style={{ flex: 1 }}>
        <button onClick={run}>运行</button>
        <div ref={elementRef} style={{ height: 400 }} />
      </div>
    </div>
  );
};