dumi 2.1.19 → 2.2.0-alpha.1

package/dist/features/html2sketch.d.ts

@@ -0,0 +1,3 @@
+import type { IApi } from '../types';
+declare const _default: (api: IApi) => void;
+export default _default;

package/dist/features/html2sketch.js

@@ -0,0 +1,111 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/features/html2sketch.ts
+var html2sketch_exports = {};
+__export(html2sketch_exports, {
+  default: () => html2sketch_default
+});
+module.exports = __toCommonJS(html2sketch_exports);
+var SCRIPT_URL = "https://gw.alipayobjects.com/os/lib/html2sketch/1.0.1/dist/html2sketch.min.js";
+var CONTAINER_ATTR = "data-html2sketch-container";
+var RUNTIME_CONFIG = "toSketchJSON";
+var html2sketch_default = (api) => {
+  api.describe({
+    key: "html2sketch",
+    config: {
+      schema: (Joi) => Joi.object({ scriptUrl: Joi.string().optional() })
+    }
+  });
+  api.onGenerateFiles(() => {
+    if (api.config.html2sketch) {
+      api.writeTmpFile({
+        path: "msgExecutor.ts",
+        content: `import { getSketchJSON } from '.';
+
+window.addEventListener('message', (ev) => {
+  if (ev.data.type === 'dumi.html2sketch.exec') {
+    const { value: opts, token } = ev.data;
+
+    getSketchJSON(document, opts).then((value) => {
+      window.postMessage({ type: 'dumi.html2sketch.done', value, token }, '*');
+    });
+  }
+});
+`
+      });
+    }
+    api.writeTmpFile({
+      path: "index.ts",
+      content: `import type { nodeToGroup, nodeToSymbol, SketchFormat } from 'html2sketch';
+import { ApplyPluginsType } from 'dumi';
+import { getPluginManager } from '@@/core/plugin';
+
+const html2sketch = typeof window !== 'undefined' ? window.html2sketch as {
+  nodeToGroup: typeof nodeToGroup;
+  nodeToSymbol: typeof nodeToSymbol;
+} : null;
+
+async function toSketchJSON(
+  node: HTMLElement,
+  opts: { type: 'group' | 'symbol' },
+) {
+  return opts.type === 'group'
+    ? (await html2sketch.nodeToGroup(node)).toSketchJSON()
+    : (await html2sketch.nodeToSymbol(node)).toSketchJSON();
+}
+
+function runtimeToSketchJSON(
+  target: HTMLElement | Document,
+  opts: Parameters<typeof toSketchJSON>[1],
+): ReturnType<typeof toSketchJSON> | Promise<null> {
+  return getPluginManager().applyPlugins({
+    key: '${RUNTIME_CONFIG}',
+    type: ApplyPluginsType.modify,
+    initialValue: null,
+    args: { target, opts },
+    async: true,
+  });
+}
+
+export const getSketchJSON = ${api.config.html2sketch ? `async (
+  target: HTMLElement | Document,
+  opts: Parameters<typeof toSketchJSON>[1],
+): ReturnType<typeof toSketchJSON> => {
+  let node = target;
+
+  // handle iframe demo & post message executor
+  if (!(target instanceof HTMLElement) || target.tagName === 'IFRAME') {
+    const doc = target instanceof HTMLIFrameElement ? target.contentDocument! : target;
+
+    node = doc.querySelector('[${CONTAINER_ATTR}], #${api.config.mountElementId}');
+  }
+
+  return await runtimeToSketchJSON(node, opts) || await toSketchJSON(node, opts);
+}` : "null"};
+`
+    });
+  });
+  api.addEntryImports(() => api.config.html2sketch ? { source: "@@/plugin-html2sketch/msgExecutor" } : []);
+  api.addHTMLHeadScripts(() => {
+    return api.config.html2sketch ? [api.config.html2sketch.scriptUrl || SCRIPT_URL] : [];
+  });
+  api.addRuntimePluginKey(() => api.config.html2sketch ? [RUNTIME_CONFIG] : []);
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {});

package/dist/preset.js

@@ -44,7 +44,8 @@ var preset_default = (api) => {
       require.resolve("./features/parser"),
       require.resolve("./features/assets"),
       require.resolve("./features/exportStatic"),
-      require.resolve("./features/sitemap")
+      require.resolve("./features/sitemap"),
+      require.resolve("./features/html2sketch")
     ]
   };
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dumi",
-  "version": "2.1.19",
+  "version": "2.2.0-alpha.1",
   "description": "📖 Documentation Generator of React Component",
   "keywords": [
     "generator",
@@ -87,6 +87,7 @@
     "animated-scroll-to": "^2.3.0",
     "classnames": "2.3.2",
     "codesandbox": "^2.2.3",
+    "copy-to-clipboard": "^3.3.3",
     "deepmerge": "^4.2.2",
     "dumi-afx-deps": "^1.0.0-alpha.12",
     "dumi-assets-types": "2.0.0-alpha.0",
@@ -101,6 +102,7 @@
     "hast-util-to-string": "^2.0.0",
     "heti": "^0.9.2",
     "html-to-text": "^8.2.1",
+    "html2sketch": "^1.0.1",
     "js-yaml": "^4.1.0",
     "lodash.throttle": "^4.1.1",
     "mdast-util-to-string": "^3.1.0",

package/theme-default/builtins/Previewer/index.js

@@ -1,12 +1,18 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 
 import classnames from 'classnames';
 import { useLocation } from 'dumi';
 import PreviewerActions from 'dumi/theme/slots/PreviewerActions';
-import React from 'react';
+import React, { useRef } from 'react';
 import "./index.less";
 
 var Previewer = function Previewer(props) {
+  var _demoContainer$curren;
+
+  var demoContainer = useRef(null);
+
   var _useLocation = useLocation(),
       hash = _useLocation.hash;
 
@@ -24,7 +30,8 @@ var Previewer = function Previewer(props) {
     },
     "data-compact": props.compact || undefined,
     "data-transform": props.transform || undefined,
-    "data-iframe": props.iframe || undefined
+    "data-iframe": props.iframe || undefined,
+    ref: demoContainer
   }, props.iframe ? /*#__PURE__*/React.createElement("iframe", {
     style: ['string', 'number'].includes(_typeof(props.iframe)) ? {
       height: Number(props.iframe)
@@ -41,7 +48,9 @@ var Previewer = function Previewer(props) {
     dangerouslySetInnerHTML: {
       __html: props.description
     }
-  })), /*#__PURE__*/React.createElement(PreviewerActions, props)));
+  })), /*#__PURE__*/React.createElement(PreviewerActions, _extends({}, props, {
+    demoContainer: props.iframe ? (_demoContainer$curren = demoContainer.current) === null || _demoContainer$curren === void 0 ? void 0 : _demoContainer$curren.firstElementChild : demoContainer.current
+  }))));
 };
 
 export default Previewer;

package/theme-default/locales/en-US.json

@@ -13,6 +13,11 @@
   "header.social.linkedin": "Linkedin",
   "previewer.actions.code.expand": "Show Code",
   "previewer.actions.code.shrink": "Hide Code",
+  "previewer.actions.sketch": "Copy to Sketch app",
+  "previewer.actions.sketch.group": "Copy as Sketch Group",
+  "previewer.actions.sketch.symbol": "Copy as Sketch Symbol",
+  "previewer.actions.sketch.divider": "------------------------",
+  "previewer.actions.sketch.guide": "How to paste to Sketch?",
   "previewer.actions.codesandbox": "Open in CodeSandbox",
   "previewer.actions.codepen": "Open in CodePen (Not implemented)",
   "previewer.actions.stackblitz": "Open in StackBlitz",

package/theme-default/locales/zh-CN.json

@@ -14,7 +14,11 @@
   "previewer.actions.code.expand": "展开代码",
   "previewer.actions.code.shrink": "收起代码",
   "previewer.actions.codesandbox": "在 CodeSandbox 中打开",
-  "previewer.actions.codepen": "在 CodePen 中打开（未实现）",
+  "previewer.actions.sketch": "拷贝到 Sketch",
+  "previewer.actions.sketch.group": "拷贝为 Sketch Group",
+  "previewer.actions.sketch.symbol": "拷贝为 Sketch Symbol",
+  "previewer.actions.sketch.divider": "----------------------",
+  "previewer.actions.sketch.guide": "如何粘贴到 SKetch？",
   "previewer.actions.stackblitz": "在 StackBlitz 中打开",
   "previewer.actions.separate": "在独立页面中打开",
   "404.title": "页面未找到",

package/theme-default/slots/PreviewerActions/index.d.ts

@@ -5,8 +5,9 @@ export interface IPreviewerActionsProps extends IPreviewerProps {
     /**
      * disabled actions
      */
-    disabledActions?: ('CSB' | 'CODEPEN' | 'STACKBLITZ' | 'EXTERNAL')[];
+    disabledActions?: ('CSB' | 'STACKBLITZ' | 'EXTERNAL' | 'HTML2SKETCH')[];
     forceShowCode?: boolean;
+    demoContainer: HTMLDivElement | HTMLIFrameElement;
 }
 declare const PreviewerActions: FC<IPreviewerActionsProps>;
 export default PreviewerActions;

package/theme-default/slots/PreviewerActions/index.js

@@ -10,14 +10,16 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
-import { ReactComponent as IconCodeSandbox } from '@ant-design/icons-svg/inline-svg/outlined/code-sandbox.svg'; // import { ReactComponent as IconCodePen } from '@ant-design/icons-svg/inline-svg/outlined/codepen.svg';
-
+import { ReactComponent as IconCheck } from '@ant-design/icons-svg/inline-svg/outlined/check.svg';
+import { ReactComponent as IconCodeSandbox } from '@ant-design/icons-svg/inline-svg/outlined/code-sandbox.svg';
+import { ReactComponent as IconSketch } from '@ant-design/icons-svg/inline-svg/outlined/sketch.svg';
 import { ReactComponent as IconStackBlitz } from '@ant-design/icons-svg/inline-svg/outlined/thunderbolt.svg';
-import { openCodeSandbox, openStackBlitz, useIntl } from 'dumi';
+import copy from 'copy-to-clipboard';
+import { getSketchJSON, openCodeSandbox, openStackBlitz, useIntl } from 'dumi';
 import SourceCode from 'dumi/theme/builtins/SourceCode';
 import PreviewerActionsExtra from 'dumi/theme/slots/PreviewerActionsExtra';
 import Tabs from 'rc-tabs';
-import React, { useState } from 'react';
+import React, { useRef, useState } from 'react';
 import "./index.less";
 
 var IconCode = function IconCode() {
@@ -47,7 +49,7 @@ var IconExternalLink = function IconExternalLink() {
 };
 
 var PreviewerActions = function PreviewerActions(props) {
-  var _files$activeKey$0$ma, _props$disabledAction, _props$disabledAction2, _props$disabledAction3;
+  var _files$activeKey$0$ma, _props$disabledAction, _props$disabledAction2, _props$disabledAction3, _props$disabledAction4;
 
   var intl = useIntl();
   var files = Object.entries(props.asset.dependencies).filter(function (_ref) {
@@ -67,6 +69,13 @@ var PreviewerActions = function PreviewerActions(props) {
       showCode = _useState4[0],
       setShowCode = _useState4[1];
 
+  var copyTimer = useRef();
+
+  var _useState5 = useState(false),
+      _useState6 = _slicedToArray(_useState5, 2),
+      isCopied = _useState6[0],
+      setIsCopied = _useState6[1];
+
   var isSingleFile = files.length === 1;
   var lang = ((_files$activeKey$0$ma = files[activeKey][0].match(/\.([^.]+)$/)) === null || _files$activeKey$0$ma === void 0 ? void 0 : _files$activeKey$0$ma[1]) || 'text';
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
@@ -89,7 +98,60 @@ var PreviewerActions = function PreviewerActions(props) {
     onClick: function onClick() {
       return openStackBlitz(props);
     }
-  }, /*#__PURE__*/React.createElement(IconStackBlitz, null)), !((_props$disabledAction3 = props.disabledActions) !== null && _props$disabledAction3 !== void 0 && _props$disabledAction3.includes('EXTERNAL')) && /*#__PURE__*/React.createElement("a", {
+  }, /*#__PURE__*/React.createElement(IconStackBlitz, null)), !((_props$disabledAction3 = props.disabledActions) !== null && _props$disabledAction3 !== void 0 && _props$disabledAction3.includes('HTML2SKETCH')) && getSketchJSON && /*#__PURE__*/React.createElement("span", {
+    className: "dumi-default-previewer-action-btn dumi-default-previewer-action-sketch",
+    "data-dumi-tooltip": intl.formatMessage({
+      id: 'previewer.actions.sketch'
+    }),
+    "data-copied": isCopied || undefined
+  }, isCopied ? /*#__PURE__*/React.createElement(IconCheck, null) : /*#__PURE__*/React.createElement(IconSketch, null), /*#__PURE__*/React.createElement("select", {
+    value: "",
+    onChange: function onChange(ev) {
+      var type = ev.target.value;
+
+      switch (type) {
+        case 'group':
+        case 'symbol':
+          getSketchJSON(props.demoContainer, {
+            type: type
+          }).then(function (data) {
+            copy(JSON.stringify(data));
+            setIsCopied(true);
+            clearTimeout(copyTimer.current);
+            copyTimer.current = window.setTimeout(function () {
+              return setIsCopied(false);
+            }, 2000);
+          });
+          break;
+
+        case 'guide':
+          window.open('https://d.umijs.org/config#html2sketch');
+          break;
+
+        default:
+      }
+    }
+  }, /*#__PURE__*/React.createElement("option", {
+    value: "",
+    hidden: true
+  }), /*#__PURE__*/React.createElement("option", {
+    value: "group"
+  }, intl.formatMessage({
+    id: 'previewer.actions.sketch.group'
+  })), /*#__PURE__*/React.createElement("option", {
+    value: "symbol"
+  }, intl.formatMessage({
+    id: 'previewer.actions.sketch.symbol'
+  })), /*#__PURE__*/React.createElement("option", {
+    value: "-",
+    disabled: true
+  }, intl.formatMessage({
+    id: 'previewer.actions.sketch.divider'
+  })), /*#__PURE__*/React.createElement("option", {
+    value: "guide"
+  }, intl.formatMessage({
+    id: 'previewer.actions.sketch.guide'
+  })))), !((_props$disabledAction4 = props.disabledActions) !== null && _props$disabledAction4 !== void 0 && _props$disabledAction4.includes('EXTERNAL')) && /*#__PURE__*/React.createElement("a", {
     target: "_blank",
     rel: "noreferrer",
     href: props.demoUrl,

package/theme-default/slots/PreviewerActions/index.less

@@ -51,6 +51,21 @@
     }
   }
 
+  &-action-sketch {
+    > select {
+      position: absolute;
+      appearance: none;
+      width: 100%;
+      height: 100%;
+      opacity: 0;
+      cursor: pointer;
+    }
+
+    &[data-copied] > svg {
+      fill: @c-success;
+    }
+  }
+
   &-tabs {
     position: relative;
     padding: 0 12px;