dumi 2.3.0-beta.2 → 2.3.0-beta.4

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

@@ -53,7 +53,10 @@ var ColorSwitch = function ColorSwitch() {
     onChange: function onChange(ev) {
       return setPrefersColor(ev.target.value);
     },
-    value: prefersColor
+    value: prefersColor,
+    onClick: function onClick(e) {
+      return e.stopPropagation();
+    }
   }, ['light', 'dark', 'auto'].map(function (c) {
     return /*#__PURE__*/React.createElement("option", {
       value: c,

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

@@ -16,6 +16,7 @@ export interface IPreviewerActionsProps extends IPreviewerProps {
         err?: null;
         source: Record<string, string>;
     }) => void;
+    onSourceChange?: (source: Record<string, string>) => void;
 }
 declare const PreviewerActions: FC<IPreviewerActionsProps>;
 export default PreviewerActions;

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

@@ -15,7 +15,7 @@ import { ReactComponent as IconSketch } from '@ant-design/icons-svg/inline-svg/o
 import { ReactComponent as IconStackBlitz } from '@ant-design/icons-svg/inline-svg/outlined/thunderbolt.svg';
 import classNames from 'classnames';
 import copy from 'copy-to-clipboard';
-import { getSketchJSON, openCodeSandbox, openStackBlitz, useIntl } from 'dumi';
+import { getSketchJSON, openCodeSandbox, openStackBlitz, useDemo, useIntl } from 'dumi';
 import SourceCode from 'dumi/theme/builtins/SourceCode';
 import PreviewerActionsExtra from 'dumi/theme/slots/PreviewerActionsExtra';
 import SourceCodeEditor from 'dumi/theme/slots/SourceCodeEditor';
@@ -53,6 +53,8 @@ var PreviewerActions = function PreviewerActions(props) {
       type = _ref2[1].type;
     return type === 'FILE';
   });
+  var _ref3 = useDemo(props.asset.id),
+    renderOpts = _ref3.renderOpts;
   var _useState = useState(0),
     _useState2 = _slicedToArray(_useState, 2),
     activeKey = _useState2[0],
@@ -167,31 +169,24 @@ var PreviewerActions = function PreviewerActions(props) {
     onChange: function onChange(key) {
       return setActiveKey(Number(key));
     },
-    items: files.map(function (_ref3, i) {
-      var _ref4 = _slicedToArray(_ref3, 1),
-        filename = _ref4[0];
+    items: files.map(function (_ref4, i) {
+      var _ref5 = _slicedToArray(_ref4, 1),
+        filename = _ref5[0];
       return {
         key: String(i),
         // remove leading ./ prefix
         label: filename.replace(/^\.\//, ''),
         // only support to edit entry file currently
-        children: i === 0 ? /*#__PURE__*/React.createElement(SourceCodeEditor, {
+        children: i === 0 && renderOpts !== null && renderOpts !== void 0 && renderOpts.compile ? /*#__PURE__*/React.createElement(SourceCodeEditor, {
           lang: lang,
           initialValue: files[i][1].value.trim(),
-          onTranspile: function onTranspile(_ref5) {
-            var err = _ref5.err,
-              code = _ref5.code;
-            if (err) {
-              var _props$onSourceTransp;
-              (_props$onSourceTransp = props.onSourceTranspile) === null || _props$onSourceTransp === void 0 ? void 0 : _props$onSourceTransp.call(props, {
-                err: err
-              });
-            } else {
-              var _props$onSourceTransp2;
-              (_props$onSourceTransp2 = props.onSourceTranspile) === null || _props$onSourceTransp2 === void 0 ? void 0 : _props$onSourceTransp2.call(props, {
-                source: _defineProperty({}, files[i][0], code)
-              });
-            }
+          onChange: function onChange(code) {
+            var _props$onSourceChange, _props$onSourceTransp;
+            (_props$onSourceChange = props.onSourceChange) === null || _props$onSourceChange === void 0 ? void 0 : _props$onSourceChange.call(props, _defineProperty({}, files[i][0], code));
+            // FIXME: remove before publish
+            (_props$onSourceTransp = props.onSourceTranspile) === null || _props$onSourceTransp === void 0 ? void 0 : _props$onSourceTransp.call(props, {
+              source: _defineProperty({}, files[i][0], code)
+            });
           },
           extra: /*#__PURE__*/React.createElement("button", {
             type: "button",
@@ -202,7 +197,10 @@ var PreviewerActions = function PreviewerActions(props) {
           }, /*#__PURE__*/React.createElement(IconEdit, null))
         }) : /*#__PURE__*/React.createElement(SourceCode, {
           lang: lang,
-          extra: /*#__PURE__*/React.createElement("button", {
+          extra:
+          // only show readonly tip for non-entry files
+          // because readonly entry file means live compile is not available for this demo tech stack
+          i !== 0 && /*#__PURE__*/React.createElement("button", {
             type: "button",
             className: "dumi-default-previewer-editor-tip-btn",
             "data-dumi-tooltip": intl.formatMessage({

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

@@ -56,7 +56,10 @@
         background-color: @c-site-bg-dark;
         box-shadow: 0 0 0 3px fade(@c-primary-dark, 10%);
       }
+    }
 
+    &:focus,
+    &:not(:placeholder-shown) {
       ~ .@{prefix}-search-shortcut {
         opacity: 0;
       }

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

@@ -5,7 +5,8 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import { ReactComponent as IconInbox } from '@ant-design/icons-svg/inline-svg/outlined/inbox.svg';
-import { FormattedMessage, history, Link } from 'dumi';
+import animateScrollTo from 'animated-scroll-to';
+import { FormattedMessage, history, Link, useLocation } from 'dumi';
 import React, { Fragment, useCallback, useEffect, useState } from 'react';
 import "./index.less";
 var IconTitle = function IconTitle() {
@@ -98,6 +99,20 @@ var SearchResult = function SearchResult(props) {
     _useState4 = _slicedToArray(_useState3, 2),
     activeIndex = _useState4[0],
     setActiveIndex = _useState4[1];
+  var _useLocation = useLocation(),
+    pathname = _useLocation.pathname;
+  var onItemSelect = function onItemSelect(item) {
+    var _props$onItemSelect;
+    (_props$onItemSelect = props.onItemSelect) === null || _props$onItemSelect === void 0 ? void 0 : _props$onItemSelect.call(props, item);
+    var url = new URL(item === null || item === void 0 ? void 0 : item.link, location.origin);
+    if ((url === null || url === void 0 ? void 0 : url.pathname) === pathname && !url.hash) {
+      setTimeout(function () {
+        animateScrollTo(0, {
+          maxDuration: 300
+        });
+      }, 1);
+    }
+  };
   useEffect(function () {
     var handler = function handler(ev) {
       // TODO: scroll into view for invisible items
@@ -106,12 +121,11 @@ var SearchResult = function SearchResult(props) {
       } else if (ev.key === 'ArrowUp') {
         setActiveIndex((activeIndex + histsCount - 1) % histsCount);
       } else if (ev.key === 'Enter' && activeIndex >= 0) {
-        var _props$onItemSelect;
         var _item = data.find(function (item) {
           return item.type === 'hint' && item.activeIndex === activeIndex;
         }).value;
         history.push(_item.link);
-        (_props$onItemSelect = props.onItemSelect) === null || _props$onItemSelect === void 0 ? void 0 : _props$onItemSelect.call(props, _item);
+        onItemSelect === null || onItemSelect === void 0 ? void 0 : onItemSelect(_item);
         document.activeElement.blur();
       }
       if (['Escape', 'Enter'].includes(ev.key)) {
@@ -140,8 +154,7 @@ var SearchResult = function SearchResult(props) {
         to: item.value.link,
         "data-active": activeIndex === item.activeIndex || undefined,
         onClick: function onClick() {
-          var _props$onItemSelect2;
-          return (_props$onItemSelect2 = props.onItemSelect) === null || _props$onItemSelect2 === void 0 ? void 0 : _props$onItemSelect2.call(props, item.value);
+          return onItemSelect === null || onItemSelect === void 0 ? void 0 : onItemSelect(item.value);
         }
       }, /*#__PURE__*/React.createElement(ICONS_MAPPING[item.value.type]), /*#__PURE__*/React.createElement("h4", null, /*#__PURE__*/React.createElement(Highlight, {
         texts: item.value.highlightTitleTexts

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

@@ -10,6 +10,7 @@ interface ISourceCodeEditorProps extends Omit<ComponentProps<typeof SourceCode>,
         err?: null;
         code: string;
     }) => void;
+    onChange?: (code: string) => void;
 }
 /**
  * simple source code editor based on textarea

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

@@ -6,8 +6,7 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import SourceCode from 'dumi/theme/builtins/SourceCode';
-import throttle from 'lodash.throttle';
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import "./index.less";
 /**
  * simple source code editor based on textarea
@@ -22,25 +21,6 @@ var SourceCodeEditor = function SourceCodeEditor(props) {
     _useState4 = _slicedToArray(_useState3, 2),
     code = _useState4[0],
     setCode = _useState4[1];
-  var sucraseDefer = useRef();
-  var transpile = useCallback(throttle(function (value) {
-    // transform code when change
-    sucraseDefer.current.then(function (transform) {
-      try {
-        var _props$onTranspile;
-        (_props$onTranspile = props.onTranspile) === null || _props$onTranspile === void 0 ? void 0 : _props$onTranspile.call(props, {
-          code: transform(value, {
-            transforms: ['typescript', 'jsx', 'imports']
-          }).code
-        });
-      } catch (err) {
-        var _props$onTranspile2;
-        (_props$onTranspile2 = props.onTranspile) === null || _props$onTranspile2 === void 0 ? void 0 : _props$onTranspile2.call(props, {
-          err: err
-        });
-      }
-    });
-  }, 500), [props.onTranspile]);
 
   // generate style from pre element, for adapting to the custom theme
   useEffect(function () {
@@ -67,18 +47,15 @@ var SourceCodeEditor = function SourceCodeEditor(props) {
       className: "dumi-default-source-code-editor-textarea",
       style: style,
       value: code,
-      onFocus: function onFocus() {
-        // load sucrase when focus on editor
-        if (!sucraseDefer.current) {
-          sucraseDefer.current = import('sucrase').then(function (_ref) {
-            var transform = _ref.transform;
-            return transform;
-          });
-        }
-      },
       onChange: function onChange(ev) {
+        var _props$onChange, _props$onTranspile;
         setCode(ev.target.value);
-        transpile(ev.target.value);
+        (_props$onChange = props.onChange) === null || _props$onChange === void 0 ? void 0 : _props$onChange.call(props, ev.target.value);
+        // FIXME: remove before publish
+        (_props$onTranspile = props.onTranspile) === null || _props$onTranspile === void 0 ? void 0 : _props$onTranspile.call(props, {
+          err: null,
+          code: ev.target.value
+        });
       },
       onKeyDown: function onKeyDown(ev) {
         // support tab to space