@ray-js/code-sandbox 0.0.2

package/lib/txp/codesandbox/index.js

@@ -0,0 +1,121 @@
+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';
+export const CodeSandbox = _ref => {
+  let {
+    txpCode,
+    code,
+    title,
+    show,
+    pageName = 'playground',
+    baseUri
+  } = _ref;
+  const iframeRef = useRef();
+  const [ts, setTs] = useState(Date.now());
+  const apiRef = useRef();
+  useEffect(() => {
+    const handle = event => {
+      var _event$data;
+      const type = event === null || event === void 0 || (_event$data = event.data) === null || _event$data === void 0 ? void 0 : _event$data.type;
+      if (type === 'sandbox-reload') {
+        setTs(Date.now());
+      }
+    };
+    window.addEventListener('message', handle);
+    return () => {
+      window.removeEventListener('message', handle);
+    };
+  }, [show]);
+  const postCode = useCallback(_.debounce(newCode => {
+    if (iframeRef.current) {
+      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, {
+    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, {
+    baseUri: baseUri,
+    txpCode: txpCode,
+    ts: ts,
+    ref: iframeRef,
+    comId: pageName,
+    style: {
+      boxShadow: '0 8px 24px -2px rgb(0 0 0 / 26%)',
+      minWidth: 300
+    }
+  }))));
+};
+export const checkShowCodeSandbox = code => {
+  if (code) {
+    return code.includes('import') && code.includes('from') && code.includes('export default');
+  }
+  return false;
+};
+export const CodeSandboxButton = _ref2 => {
+  let {
+    code,
+    title,
+    txpCode,
+    tooltip = '在线编辑预览效果！',
+    pageName,
+    baseUri
+  } = _ref2;
+  const [show, setShow] = useState(false);
+  const ref = useRef();
+  return /*#__PURE__*/React.createElement(DrawerContain, {
+    ref: ref
+  }, /*#__PURE__*/React.createElement(Tooltip, {
+    title: tooltip
+  }, /*#__PURE__*/React.createElement(Button, {
+    type: "link",
+    icon: /*#__PURE__*/React.createElement(CodeSandboxOutlined, {
+      style: {
+        width: 14,
+        height: 14
+      }
+    }),
+    style: {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center'
+    },
+    onClick: () => setShow(true)
+  })), /*#__PURE__*/React.createElement(Drawer, {
+    getContainer: () => ref.current,
+    title: `${title}`,
+    height: "90vh",
+    contentWrapperStyle: {
+      padding: 0
+    },
+    style: {
+      padding: 0
+    },
+    placement: "bottom",
+    destroyOnClose: true,
+    open: show,
+    onClose: () => {
+      setShow(false);
+    }
+  }, /*#__PURE__*/React.createElement(CodeSandbox, {
+    baseUri: baseUri,
+    txpCode: txpCode,
+    pageName: pageName,
+    show: show,
+    title: title,
+    code: code
+  })));
+};

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

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export declare const Contain: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+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 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

@@ -0,0 +1,28 @@
+import styled from 'styled-components';
+export const Contain = styled.div`
+  position: relative;
+  height: 100%;
+`;
+export const Bottom = styled.div`
+  border-right: 1px solid #efefef;
+`;
+export const Content = styled.div`
+  display: flex;
+  flex-direction: row;
+  flex-grow: 1;
+  height: 100%;
+`;
+export const Main = styled.div`
+  flex-grow: 1;
+`;
+export const Right = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 400px;
+`;
+export const DrawerContain = styled.div`
+  .ant-drawer-body {
+    padding: 0;
+  }
+`;

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

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

package/lib/txp/codesandbox/postSandboxCode.js

@@ -0,0 +1,36 @@
+import * as Base64 from 'js-base64';
+export const postSandboxCode = (iframe, code, title) => {
+  if (iframe) {
+    iframe.postMsg({
+      type: 'addJs',
+      payload: {
+        code: Base64.encode(`RJSEventChannel.emit('sandbox-jsrun', '${Base64.encode(`
+    var exports = {};
+    function require(id) {
+      if(typeof id === 'string' && id.startsWith('@tuya-miniapp/icons/')) {
+        const comName = id.split('/').pop()
+        return __ctx__['@tuya-miniapp/icons'][comName]
+      }
+      return __ctx__[id]
+    };
+    var React = __ctx__.React;
+    try {
+      ${code};
+      __ctx__.___setTitle___("${title}");
+      __ctx__.___setContent___(__ctx__.react.createElement(__ctx__.__loading__));
+      setTimeout(() => {
+        if(exports.default) {
+          const childrenNode = __ctx__.react.createElement(exports.default)
+          if(__ctx__.React.isValidElement(childrenNode)) {
+            __ctx__.___setContent___(childrenNode);
+          }
+        }
+      }, 500)
+    } catch (e) {
+      console.log(e)
+    };
+    `)}')`)
+      }
+    });
+  }
+};

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

@@ -0,0 +1,13 @@
+import React from 'react';
+export interface DemoProps {
+    comId?: string;
+    onInit?(el: HTMLIFrameElement): void;
+    style?: React.CSSProperties;
+    ts?: number;
+    txpCode: string;
+    baseUri: string;
+}
+export interface DemoRef {
+    postMsg(data: any): void;
+}
+export declare const Demo: React.ForwardRefExoticComponent<DemoProps & React.RefAttributes<DemoRef>>;

package/lib/txp/demo/index.js

@@ -0,0 +1,54 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import React, { useImperativeHandle, useRef } from 'react';
+import { Sandbox } from '../sandbox';
+import { themeVars } from '../utils/theme-vars';
+import { Contain } from './index.style';
+import { createCompnentUri } from '../services';
+export const Demo = /*#__PURE__*/React.forwardRef((_ref, parentRef) => {
+  let {
+    comId,
+    onInit,
+    style,
+    ts,
+    txpCode,
+    baseUri
+  } = _ref;
+  let path = `${createCompnentUri(baseUri, txpCode, `index.html`)}?t=${ts || Date.now()}`;
+  path += `#!/pages/${comId}/index`;
+  const ref = useRef();
+  useImperativeHandle(parentRef, () => ({
+    postMsg: data => {
+      const el = ref.current;
+      if (el) {
+        el.contentWindow.window.postMessage(data, '*');
+      }
+    }
+  }), [comId]);
+  const sendMessage = (type, payload) => {
+    const el = ref.current;
+    if (el) {
+      el.contentWindow.window.postMessage({
+        type,
+        payload
+      }, '*');
+    }
+  };
+  return /*#__PURE__*/React.createElement(Contain, {
+    style: style
+  }, /*#__PURE__*/React.createElement(Sandbox, {
+    ref: el => {
+      if (el) {
+        ref.current = el;
+        sendMessage('theme', {
+          theme: 'light',
+          vars: _objectSpread({}, themeVars['light'] || {})
+        });
+        onInit && onInit(el);
+      }
+    },
+    src: path,
+    style: {
+      borderRadius: 0
+    }
+  }));
+});

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

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const Contain: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

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

@@ -0,0 +1,14 @@
+import styled from 'styled-components';
+export const Contain = styled.div`
+  position: -webkit-sticky;
+  position: sticky;
+  top: 0;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  border-radius: 32px;
+  overflow: hidden;
+  background-color: #fff;
+  border-radius: 8px;
+  padding: 8px;
+`;

package/lib/txp/hooks/useAsync.d.ts

@@ -0,0 +1,14 @@
+export type UseAsyncOps<T> = {
+    manual: boolean;
+    onSuccess?(result?: T): any;
+    onError?(err?: Error): any;
+};
+export type UseAsyncResult<A extends any[], T> = {
+    data: T;
+    loading: boolean;
+    setData(data: T): void;
+    run: (...args: A) => Promise<T>;
+};
+export declare function useAsync<A extends any[], T = any>(run: (...args: A) => Promise<T>): UseAsyncResult<A, T>;
+export declare function useAsync<A extends any[], T = any>(run: (...args: A) => Promise<T>, deps: any[]): UseAsyncResult<A, T>;
+export declare function useAsync<A extends any[], T = any>(run: (...args: A) => Promise<T>, deps: any[], ops: UseAsyncOps<T>): UseAsyncResult<A, T>;

package/lib/txp/hooks/useAsync.js

@@ -0,0 +1,37 @@
+import { useEffect, useState } from 'react';
+export function useAsync(run) {
+  let deps = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+  let ops = arguments.length > 2 ? arguments[2] : undefined;
+  const [data, setData] = useState();
+  const [loading, setLoading] = useState();
+  const main = async function () {
+    try {
+      setLoading(true);
+      const result = await run(...arguments);
+      if (ops !== null && ops !== void 0 && ops.onSuccess) {
+        await (ops === null || ops === void 0 ? void 0 : ops.onSuccess(result));
+      }
+      setData(result);
+      return result;
+    } catch (error) {
+      if (ops !== null && ops !== void 0 && ops.onError) {
+        await (ops === null || ops === void 0 ? void 0 : ops.onError(error));
+      } else {
+        console.log(`[useAsync] error`, error);
+      }
+    } finally {
+      setLoading(false);
+    }
+  };
+  useEffect(() => {
+    if (!(ops !== null && ops !== void 0 && ops.manual)) {
+      main();
+    }
+  }, [ops === null || ops === void 0 ? void 0 : ops.manual, ...deps]);
+  return {
+    data,
+    loading,
+    run: main,
+    setData
+  };
+}

package/lib/txp/hooks/useTestUrl.d.ts

@@ -0,0 +1 @@
+export declare const useTestUri: (src: string) => import("./useAsync").UseAsyncResult<[], boolean | undefined>;

package/lib/txp/hooks/useTestUrl.js

@@ -0,0 +1,12 @@
+import { useAsync } from './useAsync';
+import axios from 'axios';
+export const useTestUri = src => useAsync(async () => {
+  if (src) {
+    try {
+      await axios.get(src);
+      return true;
+    } catch (error) {
+      return false;
+    }
+  }
+}, [src]);

package/lib/txp/index.d.ts

@@ -0,0 +1,3 @@
+import { CodeSandboxButton, CodeSandbox } from './codesandbox';
+export * from './codesandbox';
+export { CodeSandbox, CodeSandboxButton };

package/lib/txp/index.js

@@ -0,0 +1,3 @@
+import { CodeSandboxButton, CodeSandbox } from './codesandbox';
+export * from './codesandbox';
+export { CodeSandbox, CodeSandboxButton };

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

@@ -0,0 +1,7 @@
+import React from 'react';
+export interface SandboxProps {
+    src: string;
+    style?: React.CSSProperties;
+    sandboxId?: string;
+}
+export declare const Sandbox: React.ForwardRefExoticComponent<SandboxProps & React.RefAttributes<HTMLIFrameElement>>;

package/lib/txp/sandbox/index.js

@@ -0,0 +1,32 @@
+import { useTestUri } from '../hooks/useTestUrl';
+import React from 'react';
+import { SandboxEmpty, SandboxFrame, SandboxSkeleton } from './index.style';
+export const Sandbox = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    src,
+    style,
+    sandboxId
+  } = _ref;
+  const {
+    data: hasUri,
+    loading
+  } = useTestUri(src);
+  let content = /*#__PURE__*/React.createElement(SandboxEmpty, {
+    description: "\u6682\u65E0\u6F14\u793A"
+  });
+  if (loading) {
+    content = /*#__PURE__*/React.createElement(SandboxSkeleton, {
+      paragraph: {
+        rows: 12
+      }
+    });
+  } else if (hasUri) {
+    content = /*#__PURE__*/React.createElement(SandboxFrame, {
+      id: sandboxId,
+      style: style,
+      ref: ref,
+      src: src
+    });
+  }
+  return content;
+});

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

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+export declare const SandboxFrame: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").IframeHTMLAttributes<HTMLIFrameElement>, HTMLIFrameElement>, never>> & string;
+export declare const SandboxEmpty: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("antd").EmptyProps & {
+    children?: import("react").ReactNode;
+}, never>> & string & Omit<import("react").FC<import("antd").EmptyProps> & {
+    PRESENTED_IMAGE_DEFAULT: import("react").ReactNode;
+    PRESENTED_IMAGE_SIMPLE: import("react").ReactNode;
+}, keyof import("react").Component<any, {}, any>>;
+export declare const SandboxSkeleton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("antd").SkeletonProps & {
+    children?: import("react").ReactNode;
+}, never>> & string & Omit<import("react").FC<import("antd").SkeletonProps> & {
+    Button: import("react").FC<import("antd/es/skeleton/Button").SkeletonButtonProps>;
+    Avatar: import("react").FC<import("antd/es/skeleton/Avatar").AvatarProps>;
+    Input: import("react").FC<import("antd/es/skeleton/Input").SkeletonInputProps>;
+    Image: import("react").FC<import("antd/es/skeleton/Image").SkeletonImageProps>;
+    Node: import("react").FC<import("antd/es/skeleton/Node").SkeletonNodeProps>;
+}, keyof import("react").Component<any, {}, any>>;

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

@@ -0,0 +1,20 @@
+import { Empty, Skeleton } from 'antd';
+import styled from 'styled-components';
+export const SandboxFrame = styled.iframe`
+  border: 0;
+  width: 100%;
+  height: 522px;
+  border-bottom-left-radius: 32px;
+  border-bottom-right-radius: 32px;
+`;
+export const SandboxEmpty = styled(Empty)`
+  border: 0;
+  width: 100%;
+  height: 522px;
+  padding-top: 140px;
+`;
+export const SandboxSkeleton = styled(Skeleton)`
+  border: 0;
+  width: 100%;
+  height: 522px;
+`;

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

@@ -0,0 +1,4 @@
+import { Components } from './interface';
+export declare const getComponents: (baseUri: string, src: string) => Promise<Components>;
+export declare const createCompnentUri: (baseUri: string, code: string, name: string) => string;
+export declare const getComponentResource: <T = any>(baseUri: string, src: string, readmeName: string) => Promise<T>;

package/lib/txp/services/index.js

@@ -0,0 +1,12 @@
+import axios from 'axios';
+export const getComponents = async (baseUri, src) => {
+  const res = await getComponentResource(baseUri, src, 'components.json');
+  return res;
+};
+export const createCompnentUri = (baseUri, code, name) => {
+  return `${baseUri}/static/txp-ray-${code}/${name}`;
+};
+export const getComponentResource = async (baseUri, src, readmeName) => {
+  const res = await axios.get(createCompnentUri(baseUri, src, `${readmeName}`) + `?t=${Date.now()}`);
+  return res.data;
+};

package/lib/txp/services/interface.d.ts

@@ -0,0 +1,9 @@
+export interface Components {
+    [name: string]: {
+        props: string;
+        name: string;
+        updateTime: number;
+        readmeName: string;
+        category: string;
+    };
+}

package/lib/txp/services/interface.js

@@ -0,0 +1 @@
+export {};