dumi 2.3.0-beta.4 → 2.3.0-beta.6

package/dist/client/theme-api/useRouteMeta.d.ts

@@ -2,4 +2,4 @@ import type { IRouteMeta } from './types';
 /**
  * hook for get matched route meta
  */
-export declare const useRouteMeta: () => IRouteMeta | Promise<IRouteMeta>;
+export declare const useRouteMeta: () => IRouteMeta;

package/dist/client/theme-api/useRouteMeta.js

@@ -8,6 +8,7 @@ import { getRouteMetaById, matchRoutes, useAppData, useLocation, useRouteData }
 import { useCallback, useState } from 'react';
 import { useIsomorphicLayoutEffect } from "./utils";
 var cache = new Map();
+var asyncCache = new Map();
 var EMPTY_META = {
   frontmatter: {},
   toc: [],
@@ -16,7 +17,6 @@ var EMPTY_META = {
 var ASYNC_META_PROPS = ['texts'];
 function getCachedRouteMeta(route) {
   var cacheKey = route.id;
-  var pendingCacheKey = "".concat(cacheKey, ":pending");
   if (!cache.get(cacheKey)) {
     var _meta$tabs;
     var merge = function merge() {
@@ -34,15 +34,15 @@ function getCachedRouteMeta(route) {
     }));
     var proxyGetter = function proxyGetter(target, prop) {
       if (ASYNC_META_PROPS.includes(prop)) {
-        if (!cache.get(pendingCacheKey)) {
+        if (!asyncCache.get(cacheKey)) {
           // load async meta then replace cache
-          cache.set(pendingCacheKey, getRouteMetaById(route.id).then(function (full) {
+          asyncCache.set(cacheKey, getRouteMetaById(route.id).then(function (full) {
             return cache.set(cacheKey, merge(full)).get(cacheKey);
           }));
         }
 
         // throw promise to trigger suspense
-        throw cache.get(pendingCacheKey);
+        throw asyncCache.get(cacheKey);
       }
       return target[prop];
     };

package/dist/templates/meta/exports.ts.tpl

@@ -138,8 +138,8 @@ export function getRouteMetaById<T extends { syncOnly?: boolean }>(
   id: string,
   opts?: T,
 ): T extends { syncOnly: true }
-  ? undefined | IRouteMeta
-  : Promise<undefined | IRouteMeta> | undefined {
+  ? IRouteMeta | undefined
+  : Promise<IRouteMeta> | undefined {
   if (filesMeta[id]) {
     const { frontmatter, toc, textGetter, tabs } = filesMeta[id];
     const routeMeta: IRouteMeta = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dumi",
-  "version": "2.3.0-beta.4",
+  "version": "2.3.0-beta.6",
   "description": "📖 Documentation Generator of React Component",
   "keywords": [
     "generator",

package/theme-default/builtins/SourceCode/index.d.ts

@@ -7,6 +7,7 @@ interface SourceCodeProps {
     lang: Language;
     highlightLines?: number[];
     extra?: ReactNode;
+    textarea?: ReactNode;
 }
 declare const SourceCode: FC<SourceCodeProps>;
 export default SourceCode;

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

@@ -46,22 +46,7 @@ var SourceCode = function SourceCode(props) {
       setText(_text);
     }
   }, [lang, children]);
-  return /*#__PURE__*/React.createElement("div", {
-    className: "dumi-default-source-code"
-  }, /*#__PURE__*/React.createElement(CopyToClipboard, {
-    text: text,
-    onCopy: function onCopy() {
-      setIsCopied(true);
-      clearTimeout(timer.current);
-      timer.current = window.setTimeout(function () {
-        return setIsCopied(false);
-      }, 2000);
-    }
-  }, /*#__PURE__*/React.createElement("button", {
-    type: "button",
-    className: "dumi-default-source-code-copy",
-    "data-copied": isCopied || undefined
-  }, isCopied ? /*#__PURE__*/React.createElement(IconCheck, null) : /*#__PURE__*/React.createElement(IconCopy, null))), /*#__PURE__*/React.createElement(Highlight, _extends({}, defaultProps, {
+  var code = /*#__PURE__*/React.createElement(Highlight, _extends({}, defaultProps, {
     code: children,
     language: SIMILAR_DSL[lang] || lang,
     theme: undefined
@@ -102,6 +87,26 @@ var SourceCode = function SourceCode(props) {
         );
       })));
     }));
-  }), props.extra);
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    className: "dumi-default-source-code"
+  }, /*#__PURE__*/React.createElement(CopyToClipboard, {
+    text: text,
+    onCopy: function onCopy() {
+      setIsCopied(true);
+      clearTimeout(timer.current);
+      timer.current = window.setTimeout(function () {
+        return setIsCopied(false);
+      }, 2000);
+    }
+  }, /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: "dumi-default-source-code-copy",
+    "data-copied": isCopied || undefined
+  }, isCopied ? /*#__PURE__*/React.createElement(IconCheck, null) : /*#__PURE__*/React.createElement(IconCopy, null))), props.textarea ? /*#__PURE__*/React.createElement("div", {
+    className: "dumi-default-source-code-scroll-container"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "dumi-default-source-code-scroll-content"
+  }, code, props.textarea)) : code, props.extra);
 };
 export default SourceCode;

package/theme-default/builtins/SourceCode/index.less

@@ -25,7 +25,32 @@
   border-bottom-left-radius: 4px;
   border-bottom-right-radius: 4px;
 
+  &-scroll-container {
+    overflow: auto;
+    width: 100%;
+    height: 100%;
+  }
+
+  &-scroll-content {
+    position: relative;
+    width: max-content;
+    height: max-content;
+    min-width: 100%;
+    min-height: 100%;
+
+    > pre.prism-code {
+      width: max-content;
+      position: relative;
+      overflow: visible;
+    }
+  }
+
   > pre.prism-code {
+    overflow: auto;
+  }
+
+  > pre.prism-code,
+  &-scroll-content > pre.prism-code {
     margin: 0;
     padding: 18px 24px;
     font-size: 14px;

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

@@ -43,7 +43,7 @@ var SourceCodeEditor = function SourceCodeEditor(props) {
     className: "dumi-default-source-code-editor",
     ref: elm
   }, /*#__PURE__*/React.createElement(SourceCode, _extends({}, props, {
-    extra: style && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("textarea", {
+    textarea: style && /*#__PURE__*/React.createElement("textarea", {
       className: "dumi-default-source-code-editor-textarea",
       style: style,
       value: code,
@@ -77,7 +77,8 @@ var SourceCodeEditor = function SourceCodeEditor(props) {
       autoComplete: "off",
       autoCorrect: "off",
       autoSave: "off"
-    }), props.extra)
+    }),
+    extra: style && props.extra
   }), code));
 };
 export default SourceCodeEditor;

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

@@ -30,11 +30,7 @@
     }
 
     &:focus {
-      box-shadow: 0 0 0 1px lighten(@c-primary, 20%) inset;
-
       @{dark-selector} & {
-        box-shadow: 0 0 0 1px darken(@c-primary-dark, 20%) inset;
-
         // for firefox because its selection color is not translucent when color-scheme is dark
         &::selection {
           background-color: fade(@c-primary-dark, 30%);
@@ -42,4 +38,26 @@
       }
     }
   }
+
+  &::after {
+    content: '';
+    position: absolute;
+    z-index: 0;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border-bottom-left-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+
+  &:focus-within {
+    &::after {
+      box-shadow: 0 0 0 1px @c-primary inset;
+
+      @{dark-selector} & {
+        box-shadow: 0 0 0 1px @c-primary-dark inset;
+      }
+    }
+  }
 }