@ray-js/code-sandbox 0.0.3-beta-8 → 0.0.4-beta.1

package/lib/codesandbox/index.js

@@ -26,7 +26,7 @@ const CodeSandbox = _ref => {
     react: ReactLib
   });
   const [title, setTitle] = React.useState(defaultTitle);
-  const [content, setContent] = React.useState( /*#__PURE__*/React.createElement(context.__loading__, null));
+  const [content, setContent] = React.useState(/*#__PURE__*/React.createElement(context.__loading__, null));
   // @ts-ignore
   context.___setContent___ = setContent;
   // @ts-ignore

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/loading/index.js

@@ -1,6 +1,6 @@
 import { Button, View } from '@ray-js/ray';
 import React from 'react';
-import Loading from '@ray-js/components-ty-loading';
+import Loading from './ray-loading';
 import styles from './index.module.less';
 export const SandboxLoading = _ref => {
   let {

package/lib/loading/ray-loading/index.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { IProps } from './props';
+declare const Loading: React.FC<IProps>;
+export default Loading;

package/lib/loading/ray-loading/index.js

@@ -0,0 +1,32 @@
+/* eslint-disable react/self-closing-comp */
+/* eslint-disable react/no-unknown-property */
+import React from 'react';
+import styles from './index.module.less';
+import { defaultProps } from './props';
+import { View } from '@ray-js/ray';
+function createSvgIcon(svg) {
+  return `data:image/svg+xml,${encodeURIComponent(`${svg}`)}`;
+}
+function CircularLoading(_ref) {
+  let {
+    color = '#1989FA'
+  } = _ref;
+  return createSvgIcon(`<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="32" height="32" viewBox="0 0 32 32"><defs><clipPath id="master_svg0_1695_29273"><rect x="0" y="0" width="32" height="32" rx="0"/></clipPath></defs><g clip-path="url(#master_svg0_1695_29273)"><g><path d="M14.73077392578125,8.807690000000001L14.73077392578125,6.26923C14.73077392578125,5.568254,15.29902692578125,5,16.00000392578125,5C16.70097392578125,5,17.26923392578125,5.568254,17.26923392578125,6.26923L17.26923392578125,8.807690000000001C17.26923392578125,9.50867,16.70097392578125,10.07693,16.00000392578125,10.07693C15.29902692578125,10.07693,14.73077392578125,9.50867,14.73077392578125,8.807690000000001Z" fill="#3678E3" fill-opacity="1"/></g><g transform="matrix(0.7071067690849304,0.7071067690849304,-0.7071067690849304,0.7071067690849304,11.880707750418878,-14.033822285849965)" style="opacity:0.05000000074505806;"><path d="M22.88067626953125,11.132061337890626L22.88067626953125,8.593601337890625C22.88067626953125,7.892624337890625,23.44892926953125,7.324371337890625,24.14990626953125,7.324371337890625C24.85088626953125,7.324371337890625,25.41913626953125,7.892624337890625,25.41913626953125,8.593601337890625L25.41913626953125,11.132061337890626C25.41913626953125,11.833041337890625,24.85088626953125,12.401291337890626,24.14990626953125,12.401291337890626C23.44892926953125,12.401291337890626,22.88067626953125,11.833041337890625,22.88067626953125,11.132061337890626Z" fill="#3678E3" fill-opacity="1"/></g><g transform="matrix(0,1,-1,0,41.73081970214844,-12.269180297851562)" style="opacity:0.10000000149011612;"><path d="M27,18.53850970214844L27,16.000049702148438C27,15.299072702148438,27.568253,14.730819702148438,28.26923,14.730819702148438C28.97021,14.730819702148438,29.53846,15.299072702148438,29.53846,16.000049702148438L29.53846,18.53850970214844C29.53846,19.23948970214844,28.97021,19.80773970214844,28.26923,19.80773970214844C27.568253,19.80773970214844,27,19.23948970214844,27,18.53850970214844Z" fill="#3678E3" fill-opacity="1"/></g><g transform="matrix(-0.7071067690849304,0.7071067690849304,-0.7071067690849304,-0.7071067690849304,58.30294381839121,21.611726407169044)" style="opacity:0.15000000596046448;"><path d="M24.675537109375,26.68848833984375L24.675537109375,24.15002833984375C24.675537109375,23.44905133984375,25.243790109375,22.88079833984375,25.944767109375,22.88079833984375C26.645747109375,22.88079833984375,27.213997109375,23.44905133984375,27.213997109375,24.15002833984375L27.213997109375,26.68848833984375C27.213997109375,27.389468339843752,26.645747109375,27.95771833984375,25.944767109375,27.95771833984375C25.243790109375,27.95771833984375,24.675537109375,27.389468339843752,24.675537109375,26.68848833984375Z" fill="#3678E3" fill-opacity="1"/></g><g transform="matrix(-1,0,0,-1,34.5384521484375,54)" style="opacity:0.30000001192092896;"><path d="M17.26922607421875,30.80769L17.26922607421875,28.26923C17.26922607421875,27.568254,17.83747907421875,27,18.53845607421875,27C19.23942607421875,27,19.80768607421875,27.568254,19.80768607421875,28.26923L19.80768607421875,30.80769C19.80768607421875,31.508670000000002,19.23942607421875,32.07693,18.53845607421875,32.07693C17.83747907421875,32.07693,17.26922607421875,31.508670000000002,17.26922607421875,30.80769Z" fill="#3678E3" fill-opacity="1"/></g><g transform="matrix(-0.7071068286895752,-0.7071067094802856,0.7071067094802856,-0.7071068286895752,-1.8805817391439632,48.572416538932885)" style="opacity:0.550000011920929;"><path d="M9.119384765625,28.483379697265626L9.119384765625,25.944919697265625C9.119384765625,25.243942697265624,9.687637765625,24.675689697265625,10.388614765625,24.675689697265625C11.089594765625,24.675689697265625,11.657844765625,25.243942697265624,11.657844765625,25.944919697265625L11.657844765625,28.483379697265626C11.657844765625,29.184359697265627,11.089594765625,29.752609697265626,10.388614765625,29.752609697265626C9.687637765625,29.752609697265626,9.119384765625,29.184359697265627,9.119384765625,28.483379697265626Z" fill="#3678E3" fill-opacity="1"/></g><g transform="matrix(0,-1,1,0,-12.269241333007812,22.269241333007812)" style="opacity:0.699999988079071;"><path d="M5,21.076931333007813L5,18.538471333007813C5,17.83749433300781,5.568253,17.269241333007812,6.26923,17.269241333007812C6.97021,17.269241333007812,7.538460000000001,17.83749433300781,7.538460000000001,18.538471333007813L7.538460000000001,21.076931333007813C7.538460000000001,21.777911333007815,6.97021,22.346161333007814,6.26923,22.346161333007814C5.568253,22.346161333007814,5,21.777911333007815,5,21.076931333007813Z" fill="#3678E3" fill-opacity="1"/></g><g transform="matrix(0.7071066498756409,-0.70710688829422,0.70710688829422,0.7071066498756409,-4.303046450104375,7.850115344526785)" style="opacity:0.8500000238418579;"><path d="M7.32440185546875,12.926983212890626L7.32440185546875,10.388523212890625C7.32440185546875,9.687546212890625,7.89265485546875,9.119293212890625,8.59363185546875,9.119293212890625C9.29461185546875,9.119293212890625,9.86286185546875,9.687546212890625,9.86286185546875,10.388523212890625L9.86286185546875,12.926983212890626C9.86286185546875,13.627963212890625,9.29461185546875,14.196213212890626,8.59363185546875,14.196213212890626C7.89265485546875,14.196213212890626,7.32440185546875,13.627963212890625,7.32440185546875,12.926983212890626Z" fill="#3678E3" fill-opacity="1"/></g></g></svg>`);
+}
+const Loading = props => {
+  const icon = CircularLoading({
+    color: '#1989FA'
+  });
+  return /*#__PURE__*/React.createElement(View, {
+    className: styles.loading,
+    style: {
+      backgroundImage: `url('${icon}')`,
+      backgroundSize: `${props.size} ${props.size}`,
+      width: props.size,
+      height: props.size
+    }
+  });
+};
+Loading.displayName = 'Loading';
+Loading.defaultProps = defaultProps;
+export default Loading;

package/lib/loading/ray-loading/index.module.less

@@ -0,0 +1,17 @@
+@keyframes animation-rotate {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.loading {
+  animation-duration: 0.5s;
+  animation-delay: 0s;
+  animation-name: animation-rotate;
+  animation-timing-function: steps(8);
+  animation-iteration-count: infinite;
+}

package/lib/loading/ray-loading/props.d.ts

@@ -0,0 +1,26 @@
+/// <reference types="react" />
+export interface IProps {
+    /**
+     * @description.zh 类名
+     * @description.en class name
+     */
+    className?: string;
+    /**
+     * @description.zh 样式
+     * @description.en Style
+     */
+    style?: React.CSSProperties;
+    /**
+     * @description.zh 颜色
+     * @description.en Color
+     * @default '#000000'
+     */
+    color?: string;
+    /**
+     * @description.zh 加载图标大小
+     * @description.en  Size of loading icon
+     * @default '60rpx'
+     */
+    size?: string;
+}
+export declare const defaultProps: IProps;

package/lib/loading/ray-loading/props.js

@@ -0,0 +1,4 @@
+export const defaultProps = {
+  size: '60rpx',
+  color: '#000000'
+};

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

@@ -4,10 +4,14 @@ export interface CodeEditorProps {
     onChange(code: string): void;
     title: string;
     show: boolean;
-    height: string;
+    height?: string;
     txpCode: string;
     baseUri: string;
     isZhLanguage: boolean;
+    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

@@ -1,4 +1,6 @@
-import { Spin } from 'antd';
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+/* eslint-disable no-await-in-loop */
+import { Skeleton } from 'antd';
 import React, { useEffect, useImperativeHandle, useRef, useState } from 'react';
 import { getComponentResource } from '../../services';
 import { Editor } from '@saber2pr/monaco';
@@ -15,7 +17,11 @@ export const CodeEditor = /*#__PURE__*/React.forwardRef((_ref, parentRef) => {
     height,
     txpCode,
     baseUri,
-    isZhLanguage = true
+    isZhLanguage = true,
+    style,
+    fileName = 'main.tsx',
+    cssParse,
+    noTypeInit = false
   } = _ref;
   const [initloading, setInitLoading] = useState(true);
   const ref = useRef();
@@ -23,8 +29,13 @@ export const CodeEditor = /*#__PURE__*/React.forwardRef((_ref, parentRef) => {
     ref.current = editor;
     editor.setValue(`${code}`);
     editor.getModel().onDidChangeContent(async () => {
-      const result = await editor.compileTS();
-      onChange(result.output);
+      if (/\.(tsx|ts|jsx|js)$/.test(fileName)) {
+        const result = await editor.compileTS();
+        onChange(result.output);
+      } else {
+        const cssCode = editor.getValue(fileName);
+        onChange(cssParse ? await cssParse(cssCode) : cssCode);
+      }
     });
     const addTypeLib = async (name, wrapName) => {
       try {
@@ -35,29 +46,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 => {
@@ -80,8 +92,13 @@ export const CodeEditor = /*#__PURE__*/React.forwardRef((_ref, parentRef) => {
           await timeout(500);
         }
         if (editor) {
-          const result = await editor.compileTS();
-          onChange(result.output);
+          if (/\.(tsx|ts|jsx|js)$/.test(fileName)) {
+            const result = await editor.compileTS();
+            onChange(result.output);
+          } else {
+            const cssCode = editor.getValue(fileName);
+            onChange(cssParse ? await cssParse(cssCode) : cssCode);
+          }
         }
       }
     };
@@ -89,24 +106,18 @@ export const CodeEditor = /*#__PURE__*/React.forwardRef((_ref, parentRef) => {
     return () => {
       window.removeEventListener('message', handle);
     };
-  }, [show]);
+  }, [show, fileName]);
   useEffect(() => {
-    const destroyOnClose = () => {
+    return () => {
       const api = ref.current;
-      if (!show) {
-        if (api) {
-          const model = api.getModel();
-          if (model) {
-            model.dispose();
-          }
+      if (api) {
+        const model = api.getModel();
+        if (model) {
+          model.dispose();
         }
       }
     };
-    destroyOnClose();
-    return () => {
-      destroyOnClose();
-    };
-  }, [show]);
+  }, []);
   useImperativeHandle(parentRef, () => ref.current);
   const loaderConfig = {
     paths: {
@@ -121,14 +132,12 @@ export const CodeEditor = /*#__PURE__*/React.forwardRef((_ref, parentRef) => {
       }
     };
   }
-  return /*#__PURE__*/React.createElement(Spin, {
-    spinning: initloading
-  }, code && /*#__PURE__*/React.createElement(Editor, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, code && /*#__PURE__*/React.createElement(Editor, {
     loaderConfig: loaderConfig,
     theme: "monokai-bright",
-    style: {
+    style: _objectSpread(_objectSpread({}, style || {}), {}, {
       height
-    },
+    }),
     options: {
       minimap: {
         enabled: false
@@ -137,7 +146,7 @@ export const CodeEditor = /*#__PURE__*/React.forwardRef((_ref, parentRef) => {
     },
     deps: [title, code],
     modalFiles: {
-      'main.tsx': ''
+      [fileName]: ''
     },
     tsconfig: {
       strict: false,
@@ -152,5 +161,16 @@ export const CodeEditor = /*#__PURE__*/React.forwardRef((_ref, parentRef) => {
       initMonaco(editor);
       setInitLoading(false);
     }
-  }));
+  }), initloading && /*#__PURE__*/React.createElement("div", {
+    style: _objectSpread(_objectSpread({
+      position: 'absolute',
+      zIndex: 10
+    }, style || {}), {}, {
+      height
+    })
+  }, /*#__PURE__*/React.createElement(Skeleton, {
+    active: true,
+    title: true,
+    paragraph: true
+  })));
 });

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

@@ -1,15 +1,21 @@
-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;
     show?: boolean;
     txpCode: string;
-    pageName: string;
+    pageName?: string;
     baseUri: string;
     langKey?: string;
     emptyText?: string;
     isZhLanguage?: boolean;
+    editorApi?: EditorAPI;
+    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;
@@ -19,14 +25,20 @@ export interface UseCodeSandboxDrawerOps {
     height?: string;
     placement?: DrawerProps['placement'];
     txpCode: string;
-    pageName: string;
+    pageName?: string;
     baseUri: string;
     emptyText?: string;
     isZhLanguage?: boolean;
     code: string;
     langKey?: string;
+    editorApi?: EditorAPI;
+    cssCode?: string;
+    styMap?: any;
+    cssParse?: (css: string) => Promise<string>;
+    noTypeInit?: boolean;
+    extra?: React.ReactNode;
 }
-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, cssCode, styMap, cssParse, noTypeInit, extra, }: UseCodeSandboxDrawerOps) => {
     modal: React.JSX.Element;
     show: boolean;
     setShow: React.Dispatch<React.SetStateAction<boolean>>;
@@ -37,8 +49,16 @@ export declare const CodeSandboxButton: React.FC<{
     langKey?: string;
     tooltip?: string;
     txpCode: string;
-    pageName: string;
+    pageName?: string;
     baseUri: string;
     emptyText?: string;
     isZhLanguage?: boolean;
+    editorApi?: EditorAPI;
+    buttonProps?: ButtonProps;
+    cssCode?: string;
+    styMap?: any;
+    noTypeInit?: boolean;
+    cssParse?: (css: string) => Promise<string>;
+    drawerGetContainer?: DrawerProps['getContainer'];
+    extra?: React.ReactNode;
 }>;

package/lib/txp/codesandbox/index.js

@@ -1,14 +1,16 @@
+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", "extra", "drawerGetContainer"];
+/* eslint-disable react/self-closing-comp */
 import { Button, Drawer, Tooltip } from 'antd';
 import _ from 'lodash';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { CodeSandboxOutlined } from '@ant-design/icons';
 import { Demo } from '../demo';
 import { CodeEditor } from './code-editor';
-import { Contain, Content, DrawerContain, Main, Right } from './index.style';
-import { postSandboxCode } from './postSandboxCode';
+import { Contain, Content, DrawerContain, Main, MainContent, MainHeader, MainHeaderItem, Right } from './index.style';
+import { postSandboxCode, postSandboxStyleCode } from './postSandboxCode';
 export const CodeSandbox = _ref => {
   let {
     txpCode,
@@ -19,11 +21,16 @@ export const CodeSandbox = _ref => {
     baseUri,
     langKey,
     emptyText,
-    isZhLanguage
+    isZhLanguage,
+    editorApi,
+    cssCode,
+    styMap,
+    cssParse,
+    noTypeInit
   } = _ref;
   const iframeRef = useRef();
   const [ts, setTs] = useState(Date.now());
-  const apiRef = useRef();
+  const apiRef = useRef(editorApi);
   useEffect(() => {
     const handle = event => {
       var _event$data;
@@ -42,19 +49,63 @@ export const CodeSandbox = _ref => {
       postSandboxCode(iframeRef.current, newCode, title);
     }
   }, 500), [show]);
-  return /*#__PURE__*/React.createElement(Contain, null, /*#__PURE__*/React.createElement(Content, null, /*#__PURE__*/React.createElement(Main, null, /*#__PURE__*/React.createElement(CodeEditor, {
+  const postStyleCode = useCallback(_.debounce(newCode => {
+    if (iframeRef.current && styMap) {
+      postSandboxStyleCode(iframeRef.current, newCode, styMap);
+    }
+  }, 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,
+    style: {
+      width: '50%'
+    },
+    show: show,
+    title: title,
+    fileName: `${txpCode || 'main'}.less`,
+    code: cssCode,
+    onChange: newCode => {
+      postStyleCode(newCode);
+    },
+    cssParse: cssParse
+  }), /*#__PURE__*/React.createElement(CodeEditor, {
+    noTypeInit: noTypeInit,
+    isZhLanguage: isZhLanguage,
+    baseUri: baseUri,
+    txpCode: txpCode,
+    fileName: `${txpCode || 'main'}.tsx`,
+    style: {
+      width: '50%'
+    },
+    ref: apiRef,
+    show: show,
+    title: title,
+    code: code,
+    onChange: newCode => {
+      postCode(newCode);
+    }
+  }))) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(MainHeader, null, /*#__PURE__*/React.createElement(MainHeaderItem, {
+    style: {
+      width: '100%'
+    }
+  }, "Js Code")), /*#__PURE__*/React.createElement(MainContent, null, /*#__PURE__*/React.createElement(CodeEditor, {
     isZhLanguage: isZhLanguage,
     baseUri: baseUri,
+    noTypeInit: noTypeInit,
     txpCode: txpCode,
-    height: `calc(90vh - 103px + 48px)`,
     ref: apiRef,
     show: show,
+    style: {
+      width: '100%'
+    },
     title: title,
     code: code,
     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,
@@ -86,7 +137,13 @@ export const useCodeSandboxDrawer = _ref2 => {
     emptyText,
     langKey,
     baseUri,
-    code
+    code,
+    editorApi,
+    cssCode,
+    styMap,
+    cssParse,
+    noTypeInit,
+    extra
   } = _ref2;
   const [show, setShow] = useState(false);
   return {
@@ -100,6 +157,7 @@ export const useCodeSandboxDrawer = _ref2 => {
       style: {
         padding: 0
       },
+      extra: extra,
       placement: placement,
       destroyOnClose: true,
       open: show,
@@ -107,6 +165,8 @@ export const useCodeSandboxDrawer = _ref2 => {
         setShow(false);
       }
     }, /*#__PURE__*/React.createElement(CodeSandbox, {
+      noTypeInit: noTypeInit,
+      editorApi: editorApi,
       isZhLanguage: isZhLanguage,
       emptyText: emptyText,
       langKey: langKey,
@@ -115,7 +175,10 @@ export const useCodeSandboxDrawer = _ref2 => {
       pageName: pageName,
       show: show,
       title: title,
-      code: code
+      code: code,
+      styMap: styMap,
+      cssCode: cssCode,
+      cssParse: cssParse
     })),
     show,
     setShow
@@ -123,19 +186,23 @@ export const useCodeSandboxDrawer = _ref2 => {
 };
 export const CodeSandboxButton = _ref3 => {
   let {
-      tooltip
+      tooltip,
+      buttonProps,
+      extra,
+      drawerGetContainer
     } = _ref3,
     props = _objectWithoutProperties(_ref3, _excluded);
   const api = useCodeSandboxDrawer(_objectSpread(_objectSpread({}, props), {}, {
     height: '90vh',
-    getContainer: () => ref.current
+    getContainer: drawerGetContainer || (() => ref.current),
+    extra
   }));
   const ref = useRef();
   return /*#__PURE__*/React.createElement(DrawerContain, {
     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 +216,5 @@ export const CodeSandboxButton = _ref3 => {
       justifyContent: 'center'
     },
     onClick: () => api.setShow(true)
-  })), api.modal);
+  }, buttonProps || {}))), api.modal);
 };

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

@@ -3,5 +3,8 @@ export declare const Contain: import("styled-components/dist/types").IStyledComp
 export declare const Bottom: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const Content: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const Main: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const MainHeader: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const MainHeaderItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const MainContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const Right: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const DrawerContain: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/lib/txp/codesandbox/index.style.js

@@ -14,6 +14,25 @@ export const Content = styled.div`
 `;
 export const Main = styled.div`
   flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+`;
+export const MainHeader = styled.div`
+  display: flex;
+  border-bottom: 1px solid #0078d4;
+`;
+export const MainHeaderItem = styled.div`
+  background-color: #1f1f1f;
+  font-size: 16px;
+  font-weight: bold;
+  width: 50%;
+  color: #e2e2e2;
+  padding: 0 28px;
+`;
+export const MainContent = styled.div`
+  display: flex;
+  flex: 1;
 `;
 export const Right = styled.div`
   display: flex;
@@ -23,6 +42,6 @@ export const Right = styled.div`
 `;
 export const DrawerContain = styled.div`
   .ant-drawer-body {
-    padding: 0;
+    padding: 20;
   }
 `;

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

@@ -1,2 +1,3 @@
 import { DemoRef } from '../demo';
 export declare const postSandboxCode: (iframe: DemoRef, code: string, title: string) => void;
+export declare const postSandboxStyleCode: (iframe: DemoRef, code: string, styMap: any) => void;

package/lib/txp/codesandbox/postSandboxCode.js

@@ -38,4 +38,15 @@ export const postSandboxCode = (iframe, code, title) => {
       }
     });
   }
+};
+export const postSandboxStyleCode = (iframe, code, styMap) => {
+  if (iframe) {
+    iframe.postMsg({
+      type: 'addStyle',
+      payload: {
+        code: Base64.encode(code),
+        styMap
+      }
+    });
+  }
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ray-js/code-sandbox",
-  "version": "0.0.3-beta-8",
+  "version": "0.0.4-beta.1",
   "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' && 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",
@@ -27,8 +27,8 @@
     "start:tuya": "ray start ./example",
     "start:wechat": "ray start ./example -t wechat --verbose",
     "start:web": "ray start ./example -t web",
-    "prepublishOnly": "yarn build",
-    "release-it": "standard-version"
+    "release-it": "standard-version",
+    "prepublishOnly": "yarn build"
   },
   "peerDependencies": {
     "@ray-js/ray": "^1.4.9"
@@ -37,15 +37,17 @@
     "clsx": "^1.2.1",
     "js-base64": "^3.7.7"
   },
+  "resolutions": {
+    "axios": "1.13.5"
+  },
   "devDependencies": {
     "@commitlint/cli": "^7.2.1",
     "@commitlint/config-conventional": "^9.0.1",
-    "@ray-js/cli": "^1.4.9",
-    "@ray-js/components-ty-loading": "^0.1.1",
-    "@ray-js/ray": "^1.4.9",
+    "@ray-js/cli": "^1.5.45",
+    "@ray-js/ray": "^1.5.45",
     "@saber2pr/monaco": "^0.0.90",
     "antd": "^5.20.2",
-    "axios": "^1.7.4",
+    "axios": "^1.13.5",
     "core-js": "^3.19.1",
     "eslint-config-tuya-panel": "^0.4.2",
     "husky": "^1.2.0",
@@ -55,9 +57,6 @@
     "standard-version": "9.3.2",
     "styled-components": "^6.1.12"
   },
-  "resolutions": {
-    "@ray-js/builder-mp": "1.4.15"
-  },
   "husky": {
     "hooks": {
       "commit-msg": "commitlint -E HUSKY_GIT_PARAMS --config commitlint.config.js",