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

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/lib/txp/codesandbox/code-editor/index.d.ts

@@ -7,6 +7,7 @@ export interface CodeEditorProps {
     height: string;
     txpCode: string;
     baseUri: string;
+    isZhLanguage?: boolean;
 }
 export declare const CodeEditor: React.ForwardRefExoticComponent<CodeEditorProps & React.RefAttributes<{
     monaco: typeof import("monaco-editor");

package/lib/txp/codesandbox/code-editor/index.js

@@ -14,7 +14,8 @@ export const CodeEditor = /*#__PURE__*/React.forwardRef((_ref, parentRef) => {
     show,
     height,
     txpCode,
-    baseUri
+    baseUri,
+    isZhLanguage = true
   } = _ref;
   const [initloading, setInitLoading] = useState(true);
   const ref = useRef();
@@ -107,20 +108,23 @@ export const CodeEditor = /*#__PURE__*/React.forwardRef((_ref, parentRef) => {
     };
   }, [show]);
   useImperativeHandle(parentRef, () => ref.current);
+  const loaderConfig = {
+    paths: {
+      vs: `${baseUri}/static/txp-static-txp-monaco-editor/min/vs`
+    },
+    themeUri: `${baseUri}/static/txp-static-txp-monaco-editor/themes/`
+  };
+  if (isZhLanguage) {
+    loaderConfig['vs/nls'] = {
+      availableLanguages: {
+        '*': 'zh-cn'
+      }
+    };
+  }
   return /*#__PURE__*/React.createElement(Spin, {
     spinning: initloading
   }, code && /*#__PURE__*/React.createElement(Editor, {
-    loaderConfig: {
-      paths: {
-        vs: `${baseUri}/static/txp-static-txp-monaco-editor/min/vs`
-      },
-      'vs/nls': {
-        availableLanguages: {
-          '*': 'zh-cn'
-        }
-      },
-      themeUri: `${baseUri}/static/txp-static-txp-monaco-editor/themes/`
-    },
+    loaderConfig: loaderConfig,
     theme: "monokai-bright",
     style: {
       height

package/lib/txp/codesandbox/index.d.ts

@@ -6,6 +6,8 @@ export interface CodeSandboxProps {
     txpCode: string;
     pageName: string;
     baseUri: string;
+    langKey?: string;
+    emptyText?: string;
 }
 export declare const CodeSandbox: React.FC<CodeSandboxProps>;
 export declare const checkShowCodeSandbox: (code: string) => boolean;
@@ -16,4 +18,6 @@ export declare const CodeSandboxButton: React.FC<{
     tooltip?: string;
     pageName: string;
     baseUri: string;
+    langKey?: string;
+    emptyText?: string;
 }>;

package/lib/txp/codesandbox/index.js

@@ -13,7 +13,9 @@ export const CodeSandbox = _ref => {
     title,
     show,
     pageName = 'playground',
-    baseUri
+    baseUri,
+    langKey,
+    emptyText
   } = _ref;
   const iframeRef = useRef();
   const [ts, setTs] = useState(Date.now());
@@ -48,6 +50,8 @@ export const CodeSandbox = _ref => {
       postCode(newCode);
     }
   })), /*#__PURE__*/React.createElement(Right, null, /*#__PURE__*/React.createElement(Demo, {
+    emptyText: emptyText,
+    langKey: langKey,
     baseUri: baseUri,
     txpCode: txpCode,
     ts: ts,
@@ -72,7 +76,9 @@ export const CodeSandboxButton = _ref2 => {
     txpCode,
     tooltip = '在线编辑预览效果！',
     pageName,
-    baseUri
+    baseUri,
+    emptyText,
+    langKey
   } = _ref2;
   const [show, setShow] = useState(false);
   const ref = useRef();
@@ -111,6 +117,8 @@ export const CodeSandboxButton = _ref2 => {
       setShow(false);
     }
   }, /*#__PURE__*/React.createElement(CodeSandbox, {
+    emptyText: emptyText,
+    langKey: langKey,
     baseUri: baseUri,
     txpCode: txpCode,
     pageName: pageName,

package/lib/txp/demo/index.d.ts

@@ -6,6 +6,8 @@ export interface DemoProps {
     ts?: number;
     txpCode: string;
     baseUri: string;
+    langKey?: string;
+    emptyText: string;
 }
 export interface DemoRef {
     postMsg(data: any): void;

package/lib/txp/demo/index.js

@@ -11,10 +11,12 @@ export const Demo = /*#__PURE__*/React.forwardRef((_ref, parentRef) => {
     style,
     ts,
     txpCode,
-    baseUri
+    baseUri,
+    langKey = 'zh',
+    emptyText
   } = _ref;
   let path = `${createCompnentUri(baseUri, txpCode, `index.html`)}?t=${ts || Date.now()}`;
-  path += `#!/pages/${comId}/index`;
+  path += `#!/pages/${comId}/index&langKey=${langKey}`;
   const ref = useRef();
   useImperativeHandle(parentRef, () => ({
     postMsg: data => {
@@ -49,6 +51,7 @@ export const Demo = /*#__PURE__*/React.forwardRef((_ref, parentRef) => {
     src: path,
     style: {
       borderRadius: 0
-    }
+    },
+    emptyText: emptyText
   }));
 });

package/lib/txp/sandbox/index.d.ts

@@ -3,5 +3,6 @@ export interface SandboxProps {
     src: string;
     style?: React.CSSProperties;
     sandboxId?: string;
+    emptyText?: string;
 }
 export declare const Sandbox: React.ForwardRefExoticComponent<SandboxProps & React.RefAttributes<HTMLIFrameElement>>;

package/lib/txp/sandbox/index.js

@@ -5,14 +5,15 @@ export const Sandbox = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     src,
     style,
-    sandboxId
+    sandboxId,
+    emptyText = '暂无演示'
   } = _ref;
   const {
     data: hasUri,
     loading
   } = useTestUri(src);
   let content = /*#__PURE__*/React.createElement(SandboxEmpty, {
-    description: "\u6682\u65E0\u6F14\u793A"
+    description: emptyText
   });
   if (loading) {
     content = /*#__PURE__*/React.createElement(SandboxSkeleton, {

package/package.json

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