react-interpreter

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

安装

``
npm install react-interpreter --save
`

或者

`
yarn add react-interpreter --save
`

API

$3

- ### Props

- #### code

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

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

)
}
*/
/*
【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 = () => (
code={codeString}
componentMap={{
View,
Text,
}}
>
)
`

- 效果图

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

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

- #### componentMap
需要注入沙盒中的 React 组件

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

- #### globalObjectComplexPropLevel

默认值：3

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

- ### 实例

- ### Taro3 中用法示例 查看 Demo 项目

`tsx
import { ReactInterpreter } from 'react-interpreter'
import Taro from '@tarojs/taro'
import * as taroComponents from '@tarojs/components'

/*
Babel 转换前代码如下：

// 注意：这个组件名命名只要不和注入的组件重名就行，没有特别要求
function MyReactInterpreterComp() {
return (
style={{
backgroundColor: 'pink',
height: '100vh',
display: 'flex',
alignItems: 'center',
}}
>
style={{ backgroundColor: 'blue', color: '#FFFFFF' }}
onClick={() => {
Taro.showToast({
icon: 'none',
title: '😂😂😂',
})
}}
>
Click Me!


)
}
*/

// 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 (
// globalObject: 可设置沙盒内全局变量
// 把 Taro 对象注入到沙盒中，有需要也可以把 wx 对象注入
globalObject={{
Taro,
}}
// componentMap: 接收真实的组件定义
// 这里注入全部 @tarojs/components，可以根据实际情况选择部分注入
componentMap={taroComponents}
// code: 需要运行的组件代码
// 只支持 es5，如果代码包含 jsx 和 es6，可先通过 babel 进行转换
code={codeString}
/>
)
}

`

Taro3 中用法示例效果图

$3

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

- ### 基本用法

`ts
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