@ray-js/code-sandbox 0.0.5 → 0.0.7

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

@@ -1,5 +1,6 @@
-import { DrawerProps } from 'antd';
+import { ButtonProps, DrawerProps } from 'antd';
 import React from 'react';
+import { EditorAPI } from '@saber2pr/monaco';
 export interface CodeSandboxProps {
     code: string;
     title: string;
@@ -10,6 +11,7 @@ export interface CodeSandboxProps {
     langKey?: string;
     emptyText?: string;
     isZhLanguage?: boolean;
+    editorApi?: EditorAPI;
 }
 export declare const CodeSandbox: React.FC<CodeSandboxProps>;
 export declare const checkShowCodeSandbox: (code: string) => boolean;
@@ -25,8 +27,9 @@ export interface UseCodeSandboxDrawerOps {
     isZhLanguage?: boolean;
     code: string;
     langKey?: string;
+    editorApi?: EditorAPI;
 }
-export declare const useCodeSandboxDrawer: ({ getContainer, title, height, placement, isZhLanguage, pageName, txpCode, emptyText, langKey, baseUri, code, }: UseCodeSandboxDrawerOps) => {
+export declare const useCodeSandboxDrawer: ({ getContainer, title, height, placement, isZhLanguage, pageName, txpCode, emptyText, langKey, baseUri, code, editorApi, }: UseCodeSandboxDrawerOps) => {
     modal: React.JSX.Element;
     show: boolean;
     setShow: React.Dispatch<React.SetStateAction<boolean>>;
@@ -41,4 +44,6 @@ export declare const CodeSandboxButton: React.FC<{
     baseUri: string;
     emptyText?: string;
     isZhLanguage?: boolean;
+    editorApi?: EditorAPI;
+    buttonProps?: ButtonProps;
 }>;

package/lib/txp/codesandbox/index.js

@@ -1,6 +1,8 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-const _excluded = ["tooltip"];
+const _excluded = ["tooltip", "buttonProps"];
+/* eslint-disable react/self-closing-comp */
 import { Button, Drawer, Tooltip } from 'antd';
 import _ from 'lodash';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
@@ -19,11 +21,12 @@ export const CodeSandbox = _ref => {
     baseUri,
     langKey,
     emptyText,
-    isZhLanguage
+    isZhLanguage,
+    editorApi
   } = _ref;
   const iframeRef = useRef();
   const [ts, setTs] = useState(Date.now());
-  const apiRef = useRef();
+  const apiRef = useRef(editorApi);
   useEffect(() => {
     const handle = event => {
       var _event$data;
@@ -86,7 +89,8 @@ export const useCodeSandboxDrawer = _ref2 => {
     emptyText,
     langKey,
     baseUri,
-    code
+    code,
+    editorApi
   } = _ref2;
   const [show, setShow] = useState(false);
   return {
@@ -107,6 +111,7 @@ export const useCodeSandboxDrawer = _ref2 => {
         setShow(false);
       }
     }, /*#__PURE__*/React.createElement(CodeSandbox, {
+      editorApi: editorApi,
       isZhLanguage: isZhLanguage,
       emptyText: emptyText,
       langKey: langKey,
@@ -123,7 +128,8 @@ export const useCodeSandboxDrawer = _ref2 => {
 };
 export const CodeSandboxButton = _ref3 => {
   let {
-      tooltip
+      tooltip,
+      buttonProps
     } = _ref3,
     props = _objectWithoutProperties(_ref3, _excluded);
   const api = useCodeSandboxDrawer(_objectSpread(_objectSpread({}, props), {}, {
@@ -135,7 +141,7 @@ export const CodeSandboxButton = _ref3 => {
     ref: ref
   }, /*#__PURE__*/React.createElement(Tooltip, {
     title: tooltip
-  }, /*#__PURE__*/React.createElement(Button, {
+  }, /*#__PURE__*/React.createElement(Button, _extends({
     type: "link",
     icon: /*#__PURE__*/React.createElement(CodeSandboxOutlined, {
       style: {
@@ -149,5 +155,5 @@ export const CodeSandboxButton = _ref3 => {
       justifyContent: 'center'
     },
     onClick: () => api.setShow(true)
-  })), api.modal);
+  }, buttonProps || {}))), api.modal);
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ray-js/code-sandbox",
-  "version": "0.0.5",
+  "version": "0.0.7",
   "description": "小程序 CodeSandbox 容器",
   "main": "lib/index",
   "files": [
@@ -17,7 +17,7 @@
   ],
   "scripts": {
     "lint": "eslint src --ext .js,.jsx,.ts,.tsx --fix",
-    "build": "patch-package && ray build --type=component",
+    "build": "export BROWSERSLIST='Last 3 versions' && patch-package && ray build --type=component",
     "watch": "ray start --type=component --output ./example/src/lib",
     "build:tuya": "ray build ./example",
     "build:wechat": "ray build ./example --target=wechat",

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 方法暂不支持。