@ray-js/code-sandbox 0.0.2 → 0.0.3-beta-1

package/README.md

@@ -4,7 +4,7 @@ English | [简体中文](./README-zh_CN.md)
 
 [![latest](https://img.shields.io/npm/v/@ray/code-sandbox/latest.svg)](https://www.npmjs.com/package/@ray/code-sandbox) [![download](https://img.shields.io/npm/dt/@ray/code-sandbox.svg)](https://www.npmjs.com/package/@ray/code-sandbox)
 
-> 小程序 CodeSandbox 容器
+> CodeSandBox container
 
 ## Installation
 
@@ -25,15 +25,15 @@ yarn start:tuya
 
 ## Usage
 
-### 小程序对接
+### Mini -program docking
 
-安装必须的依赖
+Must -dependencies in installation
 
 ```sh
 yarn add @ray/code-sandbox @ray-js/ray @ray-js/smart-ui @tuya-miniapp/smart-ui
 ```
 
-pages 目录下新建 playground 页面，内容如下
+Create a new Playground page in the PAGES directory, the content is as follows
 
 ```tsx
 import React from 'react';
@@ -46,7 +46,7 @@ export default function Home() {
     <CodeSandbox
       defaultTitle="CodeSandbox"
       context={{
-        // CodeSandbox 中可 import from 的三方库
+        // The three -party library of Import from in CODESANDBOX
         '@ray-js/ray': RayComponents,
       }}
     />
@@ -54,7 +54,7 @@ export default function Home() {
 }
 ```
 
-页面 index.config 配置自定义 Topbar
+Page index.config Configuration Custom Topbar
 
 ```tsx
 export default {
@@ -63,21 +63,21 @@ export default {
 
 ```
 
-### 平台对接
+### Platform docking
 
-安装必须的依赖
+Must -dependencies in installation
 
 ```sh
 yarn add @ray/code-sandbox antd axios styled-components lodash @saber2pr/monaco
 ```
 
-方式1: 引入 CodeSandbox 编辑器到页面中：
+Method 1: Introduce Codesandbox editor to the page:
 
 ```tsx
 import { CodeSandboxButton } from '@ray/code-sandbox/lib/txp'
 
 <CodeSandboxButton
-  title="Playground" // 编辑器弹窗的标题
+  title="Playground" // The title of Editor's pop -up window
   code={`
 import { Button } from '@ray-js/smartui';
 
@@ -86,20 +86,20 @@ return <Button>测试</Button>
 }
 
 `}
-  txpCode="SmartUi" // 这里填写 TxP 上的组件code
-  pageName="playground" // 小程序项目中引入 codesandbox 组件的页面名，例如pages/playground/index，pageName就是playground
+  txpCode="SmartUi" // Fill in the component Code on TXP here
+  pageName="playground" // The page name of the CodeSandBox component is introduced in the applet project, such as Pages/Playground/Index, and Pagename is Playgroundd
 />
 ```
 
-点击按钮后就会弹窗打开 codesandbox 编辑器
+After clicking the button, you will pop up the window to open the CodesandBox editor
 
-方式2: 不使用按钮弹窗，直接接入编辑器+模拟器：
+Method 2: Do not use the button pop -up window, directly access the editor+simulator:
 
 ```tsx
 import { CodeSandbox } from '@ray/code-sandbox/lib/txp'
 
   <CodeSandbox
-    title="Button 组件" // demo 容器中的标题
+    title="Button 组件" // The title in DEMO container
     code={`
 import { Button } from '@ray-js/smartui';
 
@@ -108,14 +108,14 @@ export default function Demo() {
 }
 
 `}
-    txpCode="SmartUi" // 这里填写 TxP 上的组件code
-    pageName="playground" // 小程序项目中引入 codesandbox 组件的页面名，例如pages/playground/index，pageName就是playground
+    txpCode="SmartUi" // Fill in the component Code on TXP here
+    pageName="playground" // The page name of the CodeSandBox component is introduced in the applet project, such as Pages/Playground/Index, and Pagename is Playgroundd
   />
 ```
 
-### 注意
+### Notice
 
-1. txpCode 指定的组件，需要在 TxP 平台上经过 ci Demo构建才可以接入到 CodeSandbox 模拟器中。
+1. The components specified by TXPCODE need to be built through CI DEMO on the TXP platform before they can be connected to the Codesandbox simulator.
 
-2. 编辑器涉及的资源、组件 Demo 容器都已上传到涂鸦 CDN，可在对外项目中使用。
-3. 模拟器中大部分 BaseKit 能力支持，部分设备相关的 TTT 方法暂不支持。
+2. The resources and component DEMO containers involved in the editor have been uploaded to the graffiti CDN, which can be used in external projects.
+3. Most Basekit capabilities in the simulator support, some device -related TTT methods do not support it.

package/lib/catch-error/index.d.ts

@@ -3,6 +3,9 @@ interface State {
     hasError: boolean;
 }
 interface IProps {
+    loadingText?: string;
+    grammarErrText?: string;
+    refreshButtonText?: string;
 }
 export default class CatchError extends React.Component<IProps, State> {
     static defaultProps: IProps;

package/lib/catch-error/index.js

@@ -17,7 +17,10 @@ export default class CatchError extends React.Component {
   render() {
     if (this.state.hasError) {
       return /*#__PURE__*/React.createElement(SandboxLoading, {
-        type: "crash"
+        type: "crash",
+        loadingText: this.props.loadingText,
+        grammarErrText: this.props.grammarErrText,
+        refreshButtonText: this.props.refreshButtonText
       });
     }
     return this.props.children;

package/lib/codesandbox/index.d.ts

@@ -2,6 +2,9 @@ import React from 'react';
 export interface SandboxProps {
     defaultTitle?: string;
     context: any;
+    loadingText?: string;
+    grammarErrText?: string;
+    refreshButtonText?: string;
 }
 declare const CodeSandbox: React.FC<SandboxProps>;
 export default CodeSandbox;

package/lib/codesandbox/index.js

@@ -7,13 +7,20 @@ import { ScrollView, View } from '@ray-js/ray';
 const CodeSandbox = _ref => {
   let {
     context: __ctx,
-    defaultTitle = 'CodeSandbox'
+    defaultTitle = 'CodeSandbox',
+    loadingText,
+    grammarErrText,
+    refreshButtonText
   } = _ref;
   // 创建上下文对象
   // 设置上下文可用的组件
   const context = _objectSpread(_objectSpread({}, __ctx || {}), {}, {
     ___setContent___: () => /*#__PURE__*/React.createElement(React.Fragment, null),
-    __loading__: SandboxLoading,
+    __loading__: () => /*#__PURE__*/React.createElement(SandboxLoading, {
+      loadingText: loadingText,
+      grammarErrText: grammarErrText,
+      refreshButtonText: refreshButtonText
+    }),
     // CodeSandbox 中可 import from 的三方库
     React,
     react: ReactLib
@@ -33,6 +40,9 @@ const CodeSandbox = _ref => {
     scrollY: true,
     refresherTriggered: false
   }, /*#__PURE__*/React.createElement(Decoder, {
+    loadingText: loadingText,
+    grammarErrText: grammarErrText,
+    refreshButtonText: refreshButtonText,
     onCodeChange: code => {
       // 获取到txp编辑器发送的js代码
       // 闭包保留变量名

package/lib/decoder/index.d.ts

@@ -2,6 +2,9 @@ import React from 'react';
 export interface DecoderProps {
     onCodeChange(code: string): void;
     children?: React.ReactNode;
+    loadingText?: string;
+    grammarErrText?: string;
+    refreshButtonText?: string;
 }
 export declare const Decoder: React.FC<DecoderProps>;
 export default Decoder;

package/lib/decoder/index.js

@@ -5,9 +5,16 @@ import CatchError from '../catch-error';
 export const Decoder = _ref => {
   let {
     onCodeChange,
-    children
+    children,
+    loadingText,
+    grammarErrText,
+    refreshButtonText
   } = _ref;
-  return /*#__PURE__*/React.createElement(CatchError, null, /*#__PURE__*/React.createElement(Channel, {
+  return /*#__PURE__*/React.createElement(CatchError, {
+    loadingText: loadingText,
+    grammarErrText: grammarErrText,
+    refreshButtonText: refreshButtonText
+  }, /*#__PURE__*/React.createElement(Channel, {
     binddata: event => {
       const code = Bases64.decode(event.detail);
       onCodeChange(code);

package/lib/loading/index.d.ts

@@ -1,5 +1,8 @@
 import React from 'react';
 export interface SandboxLoadingProps {
     type?: 'compile' | 'crash';
+    loadingText?: string;
+    grammarErrText?: string;
+    refreshButtonText?: string;
 }
 export declare const SandboxLoading: React.FC<SandboxLoadingProps>;

package/lib/loading/index.js

@@ -4,7 +4,10 @@ import { Loading, Button } from '@ray-js/smart-ui';
 import styles from './index.module.less';
 export const SandboxLoading = _ref => {
   let {
-    type = 'compile'
+    type = 'compile',
+    refreshButtonText = '点击刷新',
+    loadingText = '小程序 CodeSandbox 编译中',
+    grammarErrText = '语法错误，请修正后刷新'
   } = _ref;
   return /*#__PURE__*/React.createElement(View, {
     className: styles.loading
@@ -14,9 +17,9 @@ export const SandboxLoading = _ref => {
       // @ts-ignore
       ty.reloadSandbox();
     }
-  }, "\u70B9\u51FB\u5237\u65B0")), /*#__PURE__*/React.createElement(View, {
+  }, refreshButtonText)), /*#__PURE__*/React.createElement(View, {
     style: {
       marginTop: 16
     }
-  }, type === 'compile' ? `小程序 CodeSandbox 编译中` : '语法错误，请修正后刷新'));
+  }, type === 'compile' ? loadingText : grammarErrText));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ray-js/code-sandbox",
-  "version": "0.0.2",
+  "version": "0.0.3-beta-1",
   "description": "小程序 CodeSandbox 容器",
   "main": "lib/index",
   "files": [