react-interpreter

react-interpreter

React 沙盒 📦，可理解为 React 版的 eval() 。该沙盒运行机制可使基于 React 实现的小程序框架「如 Taro3 等」拥有 🚀 热更新能力。

安装

npm install react-interpreter --save

或者

yarn add react-interpreter --save

API

ReactInterpreter - React 沙盒组件

• Props

  • code

    React 沙盒运行的代码字符串
    ⚠️ PS: React 沙盒组件运行的字符串代码只支持 es5，也不支持 jsx。可以先通过babel 进行转换

    import { ReactInterpreter } from 'react-interpreter'
    import { View, Text } from '@tarojs/components'
    /*
    【Babel 编译前组件代码】
    */
    /*
    注意：这个组件名命名只要不和注入的组件重名就行，没有特别要求
    function MyComp() {
        return (
            <View
                style={{
                    backgroundColor: '#00C28E',
                    height: '100vh',
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center',
                }}
            >
                <Text>Hello World !</Text>
            </View>
        )
    }
    */
    /*
    【Babel 编译后组件代码 string】
    */
    const codeString = `function MyComp() {
        return React.createElement(
            View,
            {
                style: {
                    backgroundColor: '#00C28E',
                    height: '100vh',
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center',
                },
            },
            React.createElement(Text, null, 'Hello World !')
        )
    }`
    const MyComp = () => (
        <ReactInterpreter
            code={codeString}
            componentMap={{
                View,
                Text,
            }}
        ></ReactInterpreter>
    )
    

    • 效果图

      

  • globalObject

    需要注入沙盒中的全局变量

    globalObject = {
        wx, // 注入 wx 全局变量
        console // 注入 console 控制台
    }
    

  • componentMap

    需要注入沙盒中的 React 组件

    import { View } from '@tarojs/components'
    componentMap={
        View
    }
    

  • globalObjectComplexPropLevel

    默认值：3

    设置被注入的全局变量的复杂属性最大层级。为了保证转化效率，大于该层级的任何不能 JSON.stringify 的内容都会被丢弃掉「如 function 和出现循环引用的 object 等」。

• 实例

  • Taro3 中用法示例 查看 Demo 项目

    import { ReactInterpreter } from 'react-interpreter'
    import Taro from '@tarojs/taro'
    import * as taroComponents from '@tarojs/components'
    
    /*
        Babel 转换前代码如下：
    
        // 注意：这个组件名命名只要不和注入的组件重名就行，没有特别要求
        function MyReactInterpreterComp() {
            return (
                <View
                    style={{
                        backgroundColor: 'pink',
                        height: '100vh',
                        display: 'flex',
                        alignItems: 'center',
                    }}
                >
                    <Button
                        style={{ backgroundColor: 'blue', color: '#FFFFFF' }}
                        onClick={() => {
                            Taro.showToast({
                                icon: 'none',
                                title: '😂😂😂',
                            })
                        }}
                    >
                        Click Me!
                    </Button>
                </View>
            )
        }
    */
    
    // Babel 转换后
    const codeString = `
    function MyReactInterpreterComp() {
    return /*#__PURE__*/ React.createElement(
        View,
        {
        style: {
            backgroundColor: "pink",
            height: "100vh",
            display: "flex",
            alignItems: "center"
        }
        },
        /*#__PURE__*/ React.createElement(
        Button,
        {
            style: {
            backgroundColor: "blue",
            color: "#FFFFFF"
            },
            onClick: function onClick() {
            Taro.showToast({
                icon: "none",
                title: "😂😂😂"
            });
            }
        },
        "Click Me!"
        )
    );
    }
    `
    
    const MyComponent = () => {
        return (
            <ReactInterpreter
                // globalObject: 可设置沙盒内全局变量
                // 把 Taro 对象注入到沙盒中，有需要也可以把 wx 对象注入
                globalObject={{
                    Taro,
                }}
                // componentMap: 接收真实的组件定义
                // 这里注入全部 @tarojs/components，可以根据实际情况选择部分注入
                componentMap={taroComponents}
                // code: 需要运行的组件代码
                // 只支持 es5，如果代码包含 jsx 和 es6，可先通过 babel 进行转换
                code={codeString}
            />
        )
    }
    
    

    Taro3 中用法示例效果图

    

JSInterpreter - JS 沙盒

如果只需要执行 JS ，可直接使用 JSInterpreter

• 基本用法

  import { JSInterpreter } from 'react-interpreter'
  
  const myInterpreter = new JSInterpreter('6 * 7')
  myInterpreter.run()
  console.log(myInterpreter.value)
  

  JSInterpreter 代码基本都是使用的 JS-Interpreter 项目，只做了对微信小程序相关 bug 的修复，所以详细文档可直接参考 JS-Interpreter 文档： https://neil.fraser.name/software/JS-Interpreter/docs.html

灵感来源

• JS-Interpreter
• jsjs