@ray-js/code-sandbox 0.0.5 → 0.0.7-beta-1

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,9 @@ export interface CodeSandboxProps {
     langKey?: string;
     emptyText?: string;
     isZhLanguage?: boolean;
+    editorApi?: EditorAPI;
+    cssCode?: string;
+    styMap?: any;
 }
 export declare const CodeSandbox: React.FC<CodeSandboxProps>;
 export declare const checkShowCodeSandbox: (code: string) => boolean;
@@ -25,8 +29,11 @@ export interface UseCodeSandboxDrawerOps {
     isZhLanguage?: boolean;
     code: string;
     langKey?: string;
+    editorApi?: EditorAPI;
+    cssCode?: string;
+    styMap?: any;
 }
-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, }: UseCodeSandboxDrawerOps) => {
     modal: React.JSX.Element;
     show: boolean;
     setShow: React.Dispatch<React.SetStateAction<boolean>>;
@@ -41,4 +48,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';
@@ -8,7 +10,7 @@ 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 { postSandboxCode, postSandboxStyleCode } from './postSandboxCode';
 export const CodeSandbox = _ref => {
   let {
     txpCode,
@@ -19,11 +21,14 @@ export const CodeSandbox = _ref => {
     baseUri,
     langKey,
     emptyText,
-    isZhLanguage
+    isZhLanguage,
+    editorApi,
+    cssCode,
+    styMap
   } = _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,7 +47,23 @@ 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(CodeEditor, {
+    isZhLanguage: isZhLanguage,
+    baseUri: baseUri,
+    txpCode: cssCode,
+    height: `calc(90vh - 103px + 48px)`,
+    show: show,
+    title: title,
+    code: code,
+    onChange: newCode => {
+      postStyleCode(newCode);
+    }
+  }), /*#__PURE__*/React.createElement(CodeEditor, {
     isZhLanguage: isZhLanguage,
     baseUri: baseUri,
     txpCode: txpCode,
@@ -86,7 +107,10 @@ export const useCodeSandboxDrawer = _ref2 => {
     emptyText,
     langKey,
     baseUri,
-    code
+    code,
+    editorApi,
+    cssCode,
+    styMap
   } = _ref2;
   const [show, setShow] = useState(false);
   return {
@@ -107,6 +131,7 @@ export const useCodeSandboxDrawer = _ref2 => {
         setShow(false);
       }
     }, /*#__PURE__*/React.createElement(CodeSandbox, {
+      editorApi: editorApi,
       isZhLanguage: isZhLanguage,
       emptyText: emptyText,
       langKey: langKey,
@@ -115,7 +140,9 @@ export const useCodeSandboxDrawer = _ref2 => {
       pageName: pageName,
       show: show,
       title: title,
-      code: code
+      code: code,
+      styMap: styMap,
+      cssCode: cssCode
     })),
     show,
     setShow
@@ -123,7 +150,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 +163,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 +177,5 @@ export const CodeSandboxButton = _ref3 => {
       justifyContent: 'center'
     },
     onClick: () => api.setShow(true)
-  })), api.modal);
+  }, buttonProps || {}))), api.modal);
 };

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

@@ -14,6 +14,7 @@ export const Content = styled.div`
 `;
 export const Main = styled.div`
   flex-grow: 1;
+  display: flex;
 `;
 export const Right = styled.div`
   display: flex;

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.5",
+  "version": "0.0.7-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' && 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",
@@ -27,7 +27,6 @@
     "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"
   },
   "peerDependencies": {
@@ -70,4 +69,4 @@
       "git add"
     ]
   }
-}
+}