@ray-js/code-sandbox 0.0.7-beta-10 → 0.0.7-beta-12

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;
@@ -34,8 +35,9 @@ export interface UseCodeSandboxDrawerOps {
     cssCode?: string;
     styMap?: any;
     cssParse?: (css: string) => Promise<string>;
+    noTypeInit?: boolean;
 }
-export declare const useCodeSandboxDrawer: ({ getContainer, title, height, placement, isZhLanguage, pageName, txpCode, emptyText, langKey, baseUri, code, editorApi, cssCode, styMap, cssParse, }: UseCodeSandboxDrawerOps) => {
+export declare const useCodeSandboxDrawer: ({ getContainer, title, height, placement, isZhLanguage, pageName, txpCode, emptyText, langKey, baseUri, code, editorApi, cssCode, styMap, cssParse, noTypeInit, }: UseCodeSandboxDrawerOps) => {
     modal: React.JSX.Element;
     show: boolean;
     setShow: React.Dispatch<React.SetStateAction<boolean>>;
@@ -46,7 +48,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 +56,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,
@@ -133,7 +137,8 @@ export const useCodeSandboxDrawer = _ref2 => {
     editorApi,
     cssCode,
     styMap,
-    cssParse
+    cssParse,
+    noTypeInit
   } = _ref2;
   const [show, setShow] = useState(false);
   return {
@@ -154,6 +159,7 @@ export const useCodeSandboxDrawer = _ref2 => {
         setShow(false);
       }
     }, /*#__PURE__*/React.createElement(CodeSandbox, {
+      noTypeInit: noTypeInit,
       editorApi: editorApi,
       isZhLanguage: isZhLanguage,
       emptyText: emptyText,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ray-js/code-sandbox",
-  "version": "0.0.7-beta-10",
+  "version": "0.0.7-beta-12",
   "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 方法暂不支持。