参考 react-live，如何实现代码在线预览？

<Provider language="jsx" defaultCode="一些 jsx 代码" {...rest}>
  <Editor />
  <Preview />
</Provider>

import { useControllableValue } from 'ahooks';
import React, { createContext, PropsWithChildren } from 'react';

export interface LiveProviderProps {
  code?: string; // 受控组件
  defaultCode?: string; // 非受控组件
  language: string; // 代码语言
  // 代码运行需要的全局对象，仅在 language=jsx 时生效，比如边这块代码就需要保证 useState 能拿到才可以运行
  // function Count() {
  //   const [count, setCount] = useState(0)
  //   return (
  //     <>
  //       <p>count: {count}</p>
  //       <button onClick={() => setCount(count + 1)}>+1</button>
  //     </>
  //   )
  // }
  scope?: Record<string, any>;
  disabled?: boolean; // 有时候我想禁止编辑
  onCodeChange?: (code: string) => void;
}

export interface Context {
  code: string;
  language: Language;
  onCodeChange: (code: string) => void;
  scope: Record<string, any>;
  disabled: boolean;
}

export const LiveContext = createContext<Context>({} as Context);

const Provider: React.FC<PropsWithChildren<LiveProviderProps>> = props => {
  const { children, language, scope = {}, disabled = false } = props;
  // 这块使用了 ahooks 中的 useControllableValue，推荐去学习下如何使用
  const [code, setCode] = useControllableValue(props, {
    defaultValue: '',
    defaultValuePropName: 'defaultCode',
    valuePropName: 'code',
    trigger: 'onCodeChange',
  });

  function onCodeChange(newCode: string) {
    setCode(newCode);
  }

  return (
    <LiveContext.Provider
      value={{
        code,
        language,
        onCodeChange,
        scope,
        disabled,
      }}
    >
      {children}
    </LiveContext.Provider>
  );
};

export default Provider;

import React, { useContext } from 'react';
import Highlight, { defaultProps } from 'prism-react-renderer';
import theme from 'prism-react-renderer/themes/nightOwl';
import Editor from 'react-simple-code-editor';
import { LiveContext } from './Provider';

const Editor = () => {
  const { code, disabled, language, onCodeChange } = useContext(LiveContext);

  return (
    <Editor
      value={code}
      onValueChange={onCodeChange}
      disabled={disabled}
      tabSize={2}
      padding={10}
      style={{
        fontFamily: '"Fira code", "Fira Mono", monospace',
        fontSize: 12,
        ...theme.plain,
      }}
      highlight={code => (
        <Highlight {...defaultProps} theme={theme} code={code} language={language}>
          {({ className, style, tokens, getLineProps, getTokenProps }) => (
            <>
              {tokens.map((line, i) => (
                <div {...getLineProps({ line, key: i })}>
                  {line.map((token, key) => (
                    <span {...getTokenProps({ token, key })} />
                  ))}
                </div>
              ))}
            </>
          )}
        </Highlight>
      )}
    />
  );
};

export default Editor;

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

  return (
    <>
      <p>count: {count}</p>
      <button onClick={() => setCount(count + 1)}>+1</button>
    </>
  );
}

import React, { useContext } from 'react';
import HTMLPreview from './components/HTMLPreview';
import ReactPreview from './components/ReactPreview';
import { LiveContext } from './Provider';

const Preview = () => {
  const { language } = useContext(LiveContext);

  const Preview = {
    html: HTMLPreview,
    jsx: ReactPreview,
  }[language];

  // 仅渲染受支持的语言
  return Preview ? <Preview {...props} /> : null;
};

export default Preview;

import React, { useContext, useState, useEffect } from 'react';
import { LiveContext } from '../Provider';
import { generateElement } from '../utils/transpile';
import { Transform, transform } from 'sucrase';

// 将编译后的字符串变成可执行代码，并且通过闭包方式将一些依赖传入，类似下边这种，有种 UMD 模块的感觉
// (function (name) {
//   console.log(`hello ${name}`)
// })('张三')
function evalCode(code: string, scope: Record<string, any>) {
  const scopeKeys = Object.keys(scope);
  const scopeValues = Object.values(scope);
  return new Function(...scopeKeys, code)(...scopeValues);
}
function generateNode({ code = '', scope = {} }) {
  // 删除末尾分号，因为下边会在 code 外包装一个 return (code) 的操作，有分号会导致语法错误
  const codeTrimmed = code.trim().replace(/;$/, '');
  const opts = { transforms: ['jsx', 'imports'] as Transform[] };
  // 前边补上一个 return，以便下边 evalCode 后能正确拿到生成的组件
  const transformed = transform(`return (${codeTrimmed})`, opts).code.trim();
  // 编译后只是一个字符串，我们通过 evalCode 函数将它变成可执行代码
  return evalCode(transformed, { React, ...scope });
}
// 如果是一个函数的话，说明它是一个组件，否则就是一个组件实例或者元素
function resolveElement(node: React.ReactNode) {
  const Element =
    typeof node === 'function' ? node : () => <>{React.isValidElement(node) ? node : null}</>;
  return <Element />;
}

const ReactPreview = () => {
  const { code, scope } = useContext(LiveContext);
  const [node, setNode] = useState<React.ReactNode>();

  // 当 code 或者 scope 变了后都需要重新编译代码
  useEffect(() => {
    transpileAsync(code).catch(console.error);
  }, [code, scope]);

  function transpileAsync(newCode: string) {
    // - transformCode may be synchronous or asynchronous.
    // - transformCode may throw an exception or return a rejected promise, e.g.
    //   if newCode is invalid and cannot be transformed.
    // - Not using async-await to since it requires targeting ES 2017 or
    //   importing regenerator-runtime...
    try {
      // 这里对比 react-live 简化了部分代码，只为能更简单看懂主流程，react-live 编译前允许使用者转换处理代码
      const transformResult = newCode;
      return Promise.resolve(transformResult).then(transformedCode => {
        // Transpilation arguments
        const input = {
          code: transformedCode,
          scope,
        };
        // 一定要通过这种方式保存组件，因为 setState 支持传入一个function，但是组件本身又是一个方法，直接通过 setState(FunctionalElement)
        // 会让 react 以为你传入的组件是一个更新 state 的函数
        setNode(() => generateNode(input));
      });
    } catch (e) {
      return Promise.resolve();
    }
  }

  return resolveElement(node);
};
export default ReactPreview;

import React, { useContext } from 'react';
import { LiveContext } from '../Provider';

const HTMLPreview = () => {
  const { code } = useContext(LiveContext);

  return code ? (
    <iframe
      srcCode={code}
      frameBorder={0}
      allowFullScreen
      allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
    />
  ) : null;
};

export default HTMLPreview;