@ray-js/code-sandbox 0.0.2

package/README.md

@@ -0,0 +1,121 @@
+English | [简体中文](./README-zh_CN.md)
+
+# @ray/code-sandbox
+
+[![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 容器
+
+## Installation
+
+```sh
+$ npm install @ray/code-sandbox
+# or
+$ yarn add @ray/code-sandbox
+```
+
+## Develop
+
+```sh
+# watch compile component code
+yarn watch
+# watch compile demo
+yarn start:tuya
+```
+
+## Usage
+
+### 小程序对接
+
+安装必须的依赖
+
+```sh
+yarn add @ray/code-sandbox @ray-js/ray @ray-js/smart-ui @tuya-miniapp/smart-ui
+```
+
+pages 目录下新建 playground 页面，内容如下
+
+```tsx
+import React from 'react';
+import CodeSandbox from '@ray/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/code-sandbox antd axios styled-components lodash @saber2pr/monaco
+```
+
+方式1: 引入 CodeSandbox 编辑器到页面中：
+
+```tsx
+import { CodeSandboxButton } from '@ray/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/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 方法暂不支持。

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

@@ -0,0 +1,15 @@
+import React from 'react';
+interface State {
+    hasError: boolean;
+}
+interface IProps {
+}
+export default class CatchError extends React.Component<IProps, State> {
+    static defaultProps: IProps;
+    constructor(props: IProps);
+    static getDerivedStateFromError(error: any): {
+        hasError: boolean;
+    };
+    render(): React.ReactNode;
+}
+export {};

package/lib/catch-error/index.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import { SandboxLoading } from '../loading';
+// 记录一下react层崩溃
+// react层崩溃会导致后续的eventchannel代码拿不到
+export default class CatchError extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      hasError: false
+    };
+  }
+  static getDerivedStateFromError() {
+    return {
+      hasError: true
+    };
+  }
+  render() {
+    if (this.state.hasError) {
+      return /*#__PURE__*/React.createElement(SandboxLoading, {
+        type: "crash"
+      });
+    }
+    return this.props.children;
+  }
+}

package/lib/codesandbox/index.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export interface SandboxProps {
+    defaultTitle?: string;
+    context: any;
+}
+declare const CodeSandbox: React.FC<SandboxProps>;
+export default CodeSandbox;

package/lib/codesandbox/index.js

@@ -0,0 +1,50 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import React, * as ReactLib from 'react';
+import Decoder from '../decoder';
+import { SandboxLoading } from '../loading';
+import styles from './index.module.less';
+import { ScrollView, View } from '@ray-js/ray';
+const CodeSandbox = _ref => {
+  let {
+    context: __ctx,
+    defaultTitle = 'CodeSandbox'
+  } = _ref;
+  // 创建上下文对象
+  // 设置上下文可用的组件
+  const context = _objectSpread(_objectSpread({}, __ctx || {}), {}, {
+    ___setContent___: () => /*#__PURE__*/React.createElement(React.Fragment, null),
+    __loading__: SandboxLoading,
+    // CodeSandbox 中可 import from 的三方库
+    React,
+    react: ReactLib
+  });
+  const [title, setTitle] = React.useState(defaultTitle);
+  const [content, setContent] = React.useState( /*#__PURE__*/React.createElement(context.__loading__, null));
+  // @ts-ignore
+  context.___setContent___ = setContent;
+  // @ts-ignore
+  context.___setTitle___ = setTitle;
+  return /*#__PURE__*/React.createElement(View, {
+    className: styles.contain
+  }, /*#__PURE__*/React.createElement(View, {
+    className: styles.topbar
+  }, title), /*#__PURE__*/React.createElement(ScrollView, {
+    className: styles.content,
+    scrollY: true,
+    refresherTriggered: false
+  }, /*#__PURE__*/React.createElement(Decoder, {
+    onCodeChange: code => {
+      // 获取到txp编辑器发送的js代码
+      // 闭包保留变量名
+      (function (__ctx__) {
+        console.log(__ctx__); // 这里需要引用一下闭包变量来绑定, 请勿删除此行
+        try {
+          eval(`${code}`);
+        } catch (error) {
+          console.log('[sandbox] error', error);
+        }
+      })(context);
+    }
+  }, content)));
+};
+export default CodeSandbox;

package/lib/codesandbox/index.module.less

@@ -0,0 +1,18 @@
+page {
+  height: 100vh;
+}
+
+.contain {
+  height: 100vh;
+}
+
+.topbar {
+  border-bottom: 1px solid #efefef;
+  background-color: #fff;
+  height: 60px;
+  padding-top: 28px;
+}
+
+.content {
+  height: calc(100vh - 60px);
+}

package/lib/decoder/index.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export interface DecoderProps {
+    onCodeChange(code: string): void;
+    children?: React.ReactNode;
+}
+export declare const Decoder: React.FC<DecoderProps>;
+export default Decoder;

package/lib/decoder/index.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import Channel from '../listener';
+import * as Bases64 from 'js-base64';
+import CatchError from '../catch-error';
+export const Decoder = _ref => {
+  let {
+    onCodeChange,
+    children
+  } = _ref;
+  return /*#__PURE__*/React.createElement(CatchError, null, /*#__PURE__*/React.createElement(Channel, {
+    binddata: event => {
+      const code = Bases64.decode(event.detail);
+      onCodeChange(code);
+    }
+  }), children);
+};
+export default Decoder;

package/lib/index.d.ts

@@ -0,0 +1,6 @@
+export * from './catch-error';
+export * from './decoder';
+export * from './listener';
+export * from './loading';
+export * from './codesandbox';
+export { default } from './codesandbox';

package/lib/index.js

@@ -0,0 +1,6 @@
+export * from './catch-error';
+export * from './decoder';
+export * from './listener';
+export * from './loading';
+export * from './codesandbox';
+export { default } from './codesandbox';

package/lib/listener/index.css

@@ -0,0 +1 @@
+/* pages/sandbox.css */

package/lib/listener/index.d.ts

@@ -0,0 +1,10 @@
+/* eslint-disable react/require-default-props */
+import React from 'react';
+
+export interface ChannelProps {
+  binddata(event: { detail: string });
+}
+
+const Channel: React.FC<ChannelProps>;
+
+export default Channel;

package/lib/listener/index.js

@@ -0,0 +1,5 @@
+Component({
+  properties: {
+    instanceId: String
+  }
+});

package/lib/listener/index.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}

package/lib/listener/index.sjs

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

package/lib/listener/index.tyml

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

package/lib/loading/index.d.ts

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

package/lib/loading/index.js

@@ -0,0 +1,22 @@
+import { View } from '@ray-js/ray';
+import React from 'react';
+import { Loading, Button } from '@ray-js/smart-ui';
+import styles from './index.module.less';
+export const SandboxLoading = _ref => {
+  let {
+    type = 'compile'
+  } = _ref;
+  return /*#__PURE__*/React.createElement(View, {
+    className: styles.loading
+  }, /*#__PURE__*/React.createElement(View, null, type === 'compile' ? /*#__PURE__*/React.createElement(Loading, null) : /*#__PURE__*/React.createElement(Button, {
+    onClick: () => {
+      // reloadSandbox 方法是 ci 打包时注入的 api，和 txp 平台交互（postmessage）
+      // @ts-ignore
+      ty.reloadSandbox();
+    }
+  }, "\u70B9\u51FB\u5237\u65B0")), /*#__PURE__*/React.createElement(View, {
+    style: {
+      marginTop: 16
+    }
+  }, type === 'compile' ? `小程序 CodeSandbox 编译中` : '语法错误，请修正后刷新'));
+};

package/lib/loading/index.module.less

@@ -0,0 +1,8 @@
+.loading {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 200px;
+  width: 100%;
+}

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

@@ -0,0 +1,42 @@
+import React from 'react';
+export interface CodeEditorProps {
+    code: string;
+    onChange(code: string): void;
+    title: string;
+    show: boolean;
+    height: string;
+    txpCode: string;
+    baseUri: string;
+}
+export declare const CodeEditor: React.ForwardRefExoticComponent<CodeEditorProps & React.RefAttributes<{
+    monaco: typeof import("monaco-editor");
+    setValue: (value: string, fileName?: string | undefined) => void;
+    getValue: (fileName?: string | undefined) => string;
+    getInstance: () => import("monaco-editor").editor.IStandaloneCodeEditor;
+    changeModel: (fileName: string) => void;
+    getData: () => import("@saber2pr/monaco").EditorData;
+    setSize: (width: number, height: number) => void;
+    getSize: () => import("monaco-editor").editor.EditorLayoutInfo;
+    getModel: (fileName?: string | undefined) => import("monaco-editor").editor.ITextModel;
+    getState: (fileName: string) => import("monaco-editor").editor.ICodeEditorViewState;
+    setState: (fileName: string, state: any) => void;
+    getMarkers: (fileName?: string | undefined) => import("monaco-editor").editor.IMarker[];
+    setTheme: (themeName: import("@saber2pr/monaco").ThemeNames) => Promise<void>;
+    hasTheme: (theme: string) => any;
+    getThemeConfig: (themeFile: string) => Promise<any>;
+    getThemeList: () => Promise<any>;
+    getOutput: (fileName?: string | undefined) => Promise<{
+        markers: import("monaco-editor").editor.IMarker[];
+        output: string;
+        diagnostics: import("monaco-editor").languages.typescript.Diagnostic[];
+    }>;
+    addExtraLib: (content: string, filePath?: string | undefined) => import("monaco-editor").IDisposable;
+    getTypescriptDefaults: () => import("monaco-editor").languages.typescript.LanguageServiceDefaults;
+    compileTS: (uri?: import("monaco-editor").Uri | undefined) => Promise<{
+        output: string;
+        diagnostics: import("monaco-editor").languages.typescript.Diagnostic[];
+    }>;
+    updateCompilerOptions: (options: import("monaco-editor").languages.typescript.CompilerOptions) => void;
+    addModuleDeclaration: (url: string, moduleName?: string | undefined) => Promise<any>;
+    getNavigationBarItems: (uri?: import("monaco-editor").Uri | undefined) => Promise<import("typescript").NavigationBarItem[]>;
+}>>;

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

@@ -0,0 +1,152 @@
+import { Spin } from 'antd';
+import { getComponentResource } from '../../services';
+import React, { useEffect, useImperativeHandle, useRef, useState } from 'react';
+import { Editor } from '@saber2pr/monaco';
+const timeout = function () {
+  let delay = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1000;
+  return new Promise(resolve => setTimeout(resolve, delay));
+};
+export const CodeEditor = /*#__PURE__*/React.forwardRef((_ref, parentRef) => {
+  let {
+    code,
+    onChange,
+    title,
+    show,
+    height,
+    txpCode,
+    baseUri
+  } = _ref;
+  const [initloading, setInitLoading] = useState(true);
+  const ref = useRef();
+  const initMonaco = async editor => {
+    ref.current = editor;
+    editor.setValue(`${code}`);
+    editor.getModel().onDidChangeContent(async () => {
+      const result = await editor.compileTS();
+      onChange(result.output);
+    });
+    const addTypeLib = async (name, wrapName) => {
+      try {
+        let smartUiTypes = await getComponentResource(baseUri, txpCode, name);
+        if (wrapName) {
+          smartUiTypes = `declare module "${wrapName}" { ${smartUiTypes} };`;
+        }
+        editor.addExtraLib(smartUiTypes, name);
+      } catch (error) {}
+    };
+
+    // 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');
+
+    // rayKit
+    await addTypeLib('rayKit.d.ts');
+  };
+  useEffect(() => {
+    const handle = async event => {
+      const data = (event === null || event === void 0 ? void 0 : event.data) || {};
+      if (data.type === 'sandbox-inited') {
+        let editor = ref.current;
+
+        // wait for editor inited
+        // max 30s
+        let index = 0;
+        while (true) {
+          index++;
+          if (index > 60) {
+            break;
+          }
+          editor = ref.current;
+          if (editor) {
+            break;
+          }
+          await timeout(500);
+        }
+        if (editor) {
+          const result = await editor.compileTS();
+          onChange(result.output);
+        }
+      }
+    };
+    window.addEventListener('message', handle);
+    return () => {
+      window.removeEventListener('message', handle);
+    };
+  }, [show]);
+  useEffect(() => {
+    const destroyOnClose = () => {
+      const api = ref.current;
+      if (!show) {
+        if (api) {
+          const model = api.getModel();
+          if (model) {
+            model.dispose();
+          }
+        }
+      }
+    };
+    destroyOnClose();
+    return () => {
+      destroyOnClose();
+    };
+  }, [show]);
+  useImperativeHandle(parentRef, () => ref.current);
+  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/`
+    },
+    theme: "monokai-bright",
+    style: {
+      height
+    },
+    options: {
+      minimap: {
+        enabled: false
+      },
+      theme: 'vs-dark'
+    },
+    deps: [title, code],
+    modalFiles: {
+      'main.tsx': ''
+    },
+    tsconfig: {
+      strict: false,
+      lib: ['esnext', 'dom'],
+      module: 3,
+      jsx: 2,
+      allowJs: true,
+      skipLibCheck: true,
+      moduleResolution: 2
+    },
+    onInit: async editor => {
+      initMonaco(editor);
+      setInitLoading(false);
+    }
+  }));
+});

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

@@ -0,0 +1,19 @@
+import React from 'react';
+export interface CodeSandboxProps {
+    code: string;
+    title: string;
+    show?: boolean;
+    txpCode: string;
+    pageName: string;
+    baseUri: string;
+}
+export declare const CodeSandbox: React.FC<CodeSandboxProps>;
+export declare const checkShowCodeSandbox: (code: string) => boolean;
+export declare const CodeSandboxButton: React.FC<{
+    code: string;
+    title: string;
+    txpCode: string;
+    tooltip?: string;
+    pageName: string;
+    baseUri: string;
+}>;