@ray-js/code-sandbox 0.0.7-beta-4 → 0.0.7-beta-6

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

@@ -9,6 +9,8 @@ export interface CodeEditorProps {
     baseUri: string;
     isZhLanguage: boolean;
     style?: React.CSSProperties;
+    fileName?: string;
+    cssParse?: (css: string) => Promise<string>;
 }
 export declare const CodeEditor: React.ForwardRefExoticComponent<CodeEditorProps & React.RefAttributes<{
     monaco: typeof import("monaco-editor");

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

@@ -17,7 +17,9 @@ export const CodeEditor = /*#__PURE__*/React.forwardRef((_ref, parentRef) => {
     txpCode,
     baseUri,
     isZhLanguage = true,
-    style
+    style,
+    fileName = 'main.tsx',
+    cssParse
   } = _ref;
   const [initloading, setInitLoading] = useState(true);
   const ref = useRef();
@@ -25,8 +27,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 {
@@ -82,8 +89,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);
+          }
         }
       }
     };
@@ -91,7 +103,7 @@ export const CodeEditor = /*#__PURE__*/React.forwardRef((_ref, parentRef) => {
     return () => {
       window.removeEventListener('message', handle);
     };
-  }, [show]);
+  }, [show, fileName]);
   useEffect(() => {
     const destroyOnClose = () => {
       const api = ref.current;
@@ -123,13 +135,6 @@ export const CodeEditor = /*#__PURE__*/React.forwardRef((_ref, parentRef) => {
       }
     };
   }
-  if (initloading) {
-    return /*#__PURE__*/React.createElement(Skeleton, {
-      active: true,
-      title: true,
-      paragraph: true
-    });
-  }
   return /*#__PURE__*/React.createElement(React.Fragment, null, code && /*#__PURE__*/React.createElement(Editor, {
     loaderConfig: loaderConfig,
     theme: "monokai-bright",
@@ -144,7 +149,7 @@ export const CodeEditor = /*#__PURE__*/React.forwardRef((_ref, parentRef) => {
     },
     deps: [title, code],
     modalFiles: {
-      'main.tsx': ''
+      [fileName]: ''
     },
     tsconfig: {
       strict: false,
@@ -159,5 +164,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

@@ -14,6 +14,7 @@ export interface CodeSandboxProps {
     editorApi?: EditorAPI;
     cssCode?: string;
     styMap?: any;
+    cssParse?: (css: string) => Promise<string>;
 }
 export declare const CodeSandbox: React.FC<CodeSandboxProps>;
 export declare const checkShowCodeSandbox: (code: string) => boolean;
@@ -32,8 +33,10 @@ export interface UseCodeSandboxDrawerOps {
     editorApi?: EditorAPI;
     cssCode?: string;
     styMap?: any;
+    fileName?: string;
+    cssParse?: (css: string) => Promise<string>;
 }
-export declare const useCodeSandboxDrawer: ({ getContainer, title, height, placement, isZhLanguage, pageName, txpCode, emptyText, langKey, baseUri, code, editorApi, cssCode, styMap, }: UseCodeSandboxDrawerOps) => {
+export declare const useCodeSandboxDrawer: ({ getContainer, title, height, placement, isZhLanguage, pageName, txpCode, emptyText, langKey, baseUri, code, editorApi, cssCode, styMap, cssParse, }: UseCodeSandboxDrawerOps) => {
     modal: React.JSX.Element;
     show: boolean;
     setShow: React.Dispatch<React.SetStateAction<boolean>>;

package/lib/txp/codesandbox/index.js

@@ -9,7 +9,7 @@ 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 { Contain, Content, DrawerContain, Main, MainContent, MainHeader, MainHeaderItem, Right } from './index.style';
 import { postSandboxCode, postSandboxStyleCode } from './postSandboxCode';
 export const CodeSandbox = _ref => {
   let {
@@ -24,7 +24,8 @@ export const CodeSandbox = _ref => {
     isZhLanguage,
     editorApi,
     cssCode,
-    styMap
+    styMap,
+    cssParse
   } = _ref;
   const iframeRef = useRef();
   const [ts, setTs] = useState(Date.now());
@@ -52,27 +53,29 @@ export const CodeSandbox = _ref => {
       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, {
+  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, {
     isZhLanguage: isZhLanguage,
     baseUri: baseUri,
-    txpCode: cssCode,
+    txpCode: txpCode,
     height: `calc(90vh - 103px + 48px)`,
     style: {
-      flexGrow: 1
+      width: '50%'
     },
     show: show,
     title: title,
-    code: code,
+    fileName: "main.less",
+    code: cssCode,
     onChange: newCode => {
       postStyleCode(newCode);
-    }
+    },
+    cssParse: cssParse
   }), /*#__PURE__*/React.createElement(CodeEditor, {
     isZhLanguage: isZhLanguage,
     baseUri: baseUri,
     txpCode: txpCode,
     height: `calc(90vh - 103px + 48px)`,
     style: {
-      flexGrow: 1
+      width: '50%'
     },
     ref: apiRef,
     show: show,
@@ -81,6 +84,18 @@ export const CodeSandbox = _ref => {
     onChange: newCode => {
       postCode(newCode);
     }
+  }))) : /*#__PURE__*/React.createElement(CodeEditor, {
+    isZhLanguage: isZhLanguage,
+    baseUri: baseUri,
+    txpCode: txpCode,
+    height: `calc(90vh - 103px + 48px)`,
+    ref: apiRef,
+    show: show,
+    title: title,
+    code: code,
+    onChange: newCode => {
+      postCode(newCode);
+    }
   })), /*#__PURE__*/React.createElement(Right, null, /*#__PURE__*/React.createElement(Demo, {
     emptyText: emptyText,
     langKey: langKey,
@@ -116,7 +131,8 @@ export const useCodeSandboxDrawer = _ref2 => {
     code,
     editorApi,
     cssCode,
-    styMap
+    styMap,
+    cssParse
   } = _ref2;
   const [show, setShow] = useState(false);
   return {
@@ -148,7 +164,8 @@ export const useCodeSandboxDrawer = _ref2 => {
       title: title,
       code: code,
       styMap: styMap,
-      cssCode: cssCode
+      cssCode: cssCode,
+      cssParse: cssParse
     })),
     show,
     setShow

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,20 @@ export const Content = styled.div`
 `;
 export const Main = styled.div`
   flex-grow: 1;
+`;
+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;
 `;
 export const Right = styled.div`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ray-js/code-sandbox",
-  "version": "0.0.7-beta-4",
+  "version": "0.0.7-beta-6",
   "description": "小程序 CodeSandbox 容器",
   "main": "lib/index",
   "files": [