Skip to content
This repository has been archived by the owner on Mar 7, 2022. It is now read-only.

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

License

Notifications You must be signed in to change notification settings

wuchangming/react-interpreter

Repository files navigation

react-interpreter

⚠️⚠️⚠️ 该方案不再维护,改为 mini-hot 中维护

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

Gzip Size NPM Version

安装

npm install react-interpreter --save

或者

yarn add react-interpreter --save

API

ReactInterpreter - React 沙盒组件


  • Props

    • code -- React 沙盒运行的代码字符串

      ⚠️ PS: React 沙盒组件运行的字符串代码需使用 es5 编写的函数组件,不支持 hooks、class 组件。不直接支持 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 等」。

    • 沙盒组件 props 传值方式

      除了 ReactInterpreter API 外的其他 props 都会被直接透传到沙盒内的组件

      const codeString = `
      function MyComp(props) {
          return /*#__PURE__*/ React.createElement(
              Button,
              {
              onClick: props.onClickMe
              },
              "I am a button -- ",
              props.btnName
          );
      }
      `
      
      const MyComp = () => (
          <ReactInterpreter
              code={codeString}
              componentMap={{
                  Button,
              }}
              // btnName, onClickMe 会被透传到沙盒中的组件
              btnName={'我是个按钮🔘'}
              onClickMe={() => {
                  console.log('我被点击了!')
              }}
          ></ReactInterpreter>
      )

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

实例 Demo

灵感来源

About

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

Topics

Resources

License

Stars

Watchers

Forks