@ray-js/code-sandbox 0.0.7-beta-9 → 0.0.7-beta-11

package/lib/decoder/index.d.ts

@@ -5,6 +5,7 @@ export interface DecoderProps {
     loadingText?: string;
     grammarErrText?: string;
     refreshButtonText?: string;
+    channel?: string;
 }
 export declare const Decoder: React.FC<DecoderProps>;
 export default Decoder;

package/lib/decoder/index.js

@@ -8,13 +8,15 @@ export const Decoder = _ref => {
     children,
     loadingText,
     grammarErrText,
-    refreshButtonText
+    refreshButtonText,
+    channel
   } = _ref;
   return /*#__PURE__*/React.createElement(CatchError, {
     loadingText: loadingText,
     grammarErrText: grammarErrText,
     refreshButtonText: refreshButtonText
   }, /*#__PURE__*/React.createElement(Channel, {
+    channel: channel,
     binddata: event => {
       const code = Bases64.decode(event.detail);
       onCodeChange(code);

package/lib/listener/index.d.ts

@@ -2,6 +2,7 @@
 import React from 'react';
 
 export interface ChannelProps {
+  channel?: string;
   binddata(event: { detail: string });
 }
 

package/lib/listener/index.js

@@ -1,5 +1,8 @@
 Component({
   properties: {
-    instanceId: String
+    channel: {
+      type: String,
+      value: 'sandbox-jsrun'
+    }
   }
 });

package/lib/listener/index.sjs

@@ -1,7 +1,8 @@
 module.exports = {
   init(newVal, oldVal, ownerInstance) {
-    ownerInstance.eventChannel.on('sandbox-jsrun', event => {
-      console.log(`[sandbox] trigger `, event);
+    const eventName = newVal || 'sandbox-jsrun';
+    ownerInstance.eventChannel.on(eventName, event => {
+      console.log(`[sandbox] trigger `, eventName, event);
       ownerInstance.triggerEvent('data', event);
     });
   },

package/lib/listener/index.tyml

@@ -1,6 +1,6 @@
 <sjs src="./index.sjs" module="computed"></sjs>
 
 <view 
-  id="{{instanceId}}"
-  change:id="{{computed.init}}"
+  channel="{{channel}}"
+  change:channel="{{computed.init}}"
 ></view>

package/lib/txp/codesandbox/code-editor/index.d.ts

@@ -11,6 +11,7 @@ export interface CodeEditorProps {
     style?: React.CSSProperties;
     fileName?: string;
     cssParse?: (css: string) => Promise<string>;
+    noTypeInit?: boolean;
 }
 export declare const CodeEditor: React.ForwardRefExoticComponent<CodeEditorProps & React.RefAttributes<{
     monaco: typeof import("monaco-editor");

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

@@ -19,7 +19,8 @@ export const CodeEditor = /*#__PURE__*/React.forwardRef((_ref, parentRef) => {
     isZhLanguage = true,
     style,
     fileName = 'main.tsx',
-    cssParse
+    cssParse,
+    noTypeInit = false
   } = _ref;
   const [initloading, setInitLoading] = useState(true);
   const ref = useRef();
@@ -44,29 +45,30 @@ export const CodeEditor = /*#__PURE__*/React.forwardRef((_ref, parentRef) => {
         editor.addExtraLib(smartUiTypes, name);
       } catch (error) {}
     };
+    if (!noTypeInit) {
+      // react
+      await addTypeLib('react.d.ts');
+      // @ray-js/smartui
+      await addTypeLib('smartui.d.ts');
+      // @ray-js/ray
+      await addTypeLib('ray.d.ts');
+      // csstypes
+      await addTypeLib('csstype.d.ts', 'csstype');
+      // prop-types
+      await addTypeLib('prop-types.d.ts', 'prop-types');
 
-    // react
-    await addTypeLib('react.d.ts');
-    // @ray-js/smartui
-    await addTypeLib('smartui.d.ts');
-    // @ray-js/ray
-    await addTypeLib('ray.d.ts');
-    // csstypes
-    await addTypeLib('csstype.d.ts', 'csstype');
-    // prop-types
-    await addTypeLib('prop-types.d.ts', 'prop-types');
+      // BaseKit Kit types
+      await addTypeLib('BaseKit.d.ts');
+      // BizKit Kit types
+      await addTypeLib('BizKit.d.ts');
+      // Device Kit types
+      await addTypeLib('DeviceKit.d.ts');
+      // MiniKit Kit types
+      await addTypeLib('MiniKit.d.ts');
 
-    // BaseKit Kit types
-    await addTypeLib('BaseKit.d.ts');
-    // BizKit Kit types
-    await addTypeLib('BizKit.d.ts');
-    // Device Kit types
-    await addTypeLib('DeviceKit.d.ts');
-    // MiniKit Kit types
-    await addTypeLib('MiniKit.d.ts');
-
-    // rayKit
-    await addTypeLib('rayKit.d.ts');
+      // rayKit
+      await addTypeLib('rayKit.d.ts');
+    }
   };
   useEffect(() => {
     const handle = async event => {

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

@@ -6,7 +6,7 @@ export interface CodeSandboxProps {
     title: string;
     show?: boolean;
     txpCode: string;
-    pageName: string;
+    pageName?: string;
     baseUri: string;
     langKey?: string;
     emptyText?: string;
@@ -15,6 +15,7 @@ export interface CodeSandboxProps {
     cssCode?: string;
     styMap?: any;
     cssParse?: (css: string) => Promise<string>;
+    noTypeInit?: boolean;
 }
 export declare const CodeSandbox: React.FC<CodeSandboxProps>;
 export declare const checkShowCodeSandbox: (code: string) => boolean;
@@ -24,7 +25,7 @@ export interface UseCodeSandboxDrawerOps {
     height?: string;
     placement?: DrawerProps['placement'];
     txpCode: string;
-    pageName: string;
+    pageName?: string;
     baseUri: string;
     emptyText?: string;
     isZhLanguage?: boolean;
@@ -46,7 +47,7 @@ export declare const CodeSandboxButton: React.FC<{
     langKey?: string;
     tooltip?: string;
     txpCode: string;
-    pageName: string;
+    pageName?: string;
     baseUri: string;
     emptyText?: string;
     isZhLanguage?: boolean;
@@ -54,5 +55,6 @@ export declare const CodeSandboxButton: React.FC<{
     buttonProps?: ButtonProps;
     cssCode?: string;
     styMap?: any;
+    noTypeInit?: boolean;
     cssParse?: (css: string) => Promise<string>;
 }>;

package/lib/txp/codesandbox/index.js

@@ -25,7 +25,8 @@ export const CodeSandbox = _ref => {
     editorApi,
     cssCode,
     styMap,
-    cssParse
+    cssParse,
+    noTypeInit
   } = _ref;
   const iframeRef = useRef();
   const [ts, setTs] = useState(Date.now());
@@ -54,6 +55,7 @@ export const CodeSandbox = _ref => {
     }
   }, 500), [show, styMap]);
   return /*#__PURE__*/React.createElement(Contain, null, /*#__PURE__*/React.createElement(Content, null, /*#__PURE__*/React.createElement(Main, null, styMap ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(MainHeader, null, /*#__PURE__*/React.createElement(MainHeaderItem, null, "CSS Style Sheet"), /*#__PURE__*/React.createElement(MainHeaderItem, null, "Js Code")), /*#__PURE__*/React.createElement(MainContent, null, /*#__PURE__*/React.createElement(CodeEditor, {
+    noTypeInit: true,
     isZhLanguage: isZhLanguage,
     baseUri: baseUri,
     txpCode: txpCode,
@@ -70,6 +72,7 @@ export const CodeSandbox = _ref => {
     },
     cssParse: cssParse
   }), /*#__PURE__*/React.createElement(CodeEditor, {
+    noTypeInit: noTypeInit,
     isZhLanguage: isZhLanguage,
     baseUri: baseUri,
     txpCode: txpCode,
@@ -88,6 +91,7 @@ export const CodeSandbox = _ref => {
   }))) : /*#__PURE__*/React.createElement(CodeEditor, {
     isZhLanguage: isZhLanguage,
     baseUri: baseUri,
+    noTypeInit: noTypeInit,
     txpCode: txpCode,
     height: "calc(90vh - 103px + 48px)",
     ref: apiRef,
@@ -97,7 +101,7 @@ export const CodeSandbox = _ref => {
     onChange: newCode => {
       postCode(newCode);
     }
-  })), /*#__PURE__*/React.createElement(Right, null, /*#__PURE__*/React.createElement(Demo, {
+  })), pageName && /*#__PURE__*/React.createElement(Right, null, /*#__PURE__*/React.createElement(Demo, {
     emptyText: emptyText,
     langKey: langKey,
     baseUri: baseUri,

package/package.json

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

package/README-zh_CN.md

@@ -1,121 +0,0 @@
-[English](./README.md) | 简体中文
-
-# @ray-js/code-sandbox
-
-[![latest](https://img.shields.io/npm/v/@ray-js/code-sandbox/latest.svg)](https://www.npmjs.com/package/@ray-js/code-sandbox) [![download](https://img.shields.io/npm/dt/@ray-js/code-sandbox.svg)](https://www.npmjs.com/package/@ray-js/code-sandbox)
-
-> 小程序 CodeSandbox 容器
-
-## 安装
-
-```sh
-$ npm install @ray-js/code-sandbox
-// 或者
-$ yarn add @ray-js/code-sandbox
-```
-
-## 开发
-
-```sh
-# 实时编译组件代码
-yarn watch
-# 实时编译Demo代码
-yarn start:tuya
-```
-
-## 使用
-
-### 小程序对接
-
-安装必须的依赖
-
-```sh
-yarn add @ray-js/code-sandbox
-```
-
-pages 目录下新建 playground 页面，内容如下
-
-```tsx
-import React from 'react';
-import CodeSandbox from '@ray-js/code-sandbox';
-
-import * as RayComponents from '@ray-js/ray';
-
-export default function Home() {
-  return (
-    <CodeSandbox
-      defaultTitle="CodeSandbox"
-      context={{
-        // CodeSandbox 中可 import from 的三方库
-        '@ray-js/ray': RayComponents,
-      }}
-    />
-  );
-}
-```
-
-页面 index.config 配置自定义 Topbar
-
-```tsx
-export default {
-  navigationStyle: 'custom',
-};
-
-```
-
-### 平台对接
-
-安装必须的依赖
-
-```sh
-yarn add @ray-js/code-sandbox antd axios styled-components lodash @saber2pr/monaco
-```
-
-方式1: 引入 CodeSandbox 编辑器到页面中：
-
-```tsx
-import { CodeSandboxButton } from '@ray-js/code-sandbox/lib/txp'
-
-<CodeSandboxButton
-  title="Playground" // 编辑器弹窗的标题
-  code={`
-import { Button } from '@ray-js/smartui';
-
-export default function Demo() {
-return <Button>测试</Button>
-}
-
-`}
-  txpCode="SmartUi" // 这里填写 TxP 上的组件code
-  pageName="playground" // 小程序项目中引入 codesandbox 组件的页面名，例如pages/playground/index，pageName就是playground
-/>
-```
-
-点击按钮后就会弹窗打开 codesandbox 编辑器
-
-方式2: 不使用按钮弹窗，直接接入编辑器+模拟器：
-
-```tsx
-import { CodeSandbox } from '@ray-js/code-sandbox/lib/txp'
-
-  <CodeSandbox
-    title="Button 组件" // demo 容器中的标题
-    code={`
-import { Button } from '@ray-js/smartui';
-
-export default function Demo() {
-  return <Button>测试</Button>
-}
-
-`}
-    txpCode="SmartUi" // 这里填写 TxP 上的组件code
-    pageName="playground" // 小程序项目中引入 codesandbox 组件的页面名，例如pages/playground/index，pageName就是playground
-  />
-```
-
-### 注意
-
-1. txpCode 指定的组件，需要在 TxP 平台上经过 ci Demo构建才可以接入到 CodeSandbox 模拟器中。
-
-2. 编辑器涉及的资源、组件 Demo 容器都已上传到涂鸦 CDN，可在对外项目中使用。
-3. 模拟器中大部分 BaseKit 能力支持，部分设备相关的 TTT 方法暂不支持。