@readme/markdown 11.1.0 → 11.1.2

package/dist/main.js

@@ -1458,7 +1458,7 @@ var hide = __webpack_require__(3341);
 var Iterators = __webpack_require__(906);
 var $iterCreate = __webpack_require__(6032);
 var setToStringTag = __webpack_require__(3844);
-var getPrototypeOf = __webpack_require__(3008);
+var getPrototypeOf = __webpack_require__(627);
 var ITERATOR = __webpack_require__(7574)('iterator');
 var BUGGY = !([].keys && 'next' in [].keys()); // Safari has buggy iterators w/o `next`
 var FF_ITERATOR = '@@iterator';
@@ -1771,7 +1771,7 @@ exports.f = Object.getOwnPropertySymbols;
 
 /***/ }),
 
-/***/ 3008:
+/***/ 627:
 /***/ ((module, __unused_webpack_exports, __webpack_require__) => {
 
 // 19.1.2.9 / 15.2.3.2 Object.getPrototypeOf(O)
@@ -8917,11 +8917,25 @@ const CodeOptsContext = (0,external_amd_react_commonjs_react_commonjs2_react_roo
 const ThemeContext = (0,external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_.createContext)('light');
 /* harmony default export */ const Theme = (ThemeContext);
 
+;// ./hooks/useHydrated/index.tsx
+
+/**
+ * A hook that returns whether or not the component has been hydrated.
+ * Useful for components that should only render in the browser, and not during SSR.
+ * Waiting to render until after hydration avoids React hydration mismatches.
+ */
+function useHydrated() {
+    const [isHydrated, setIsHydrated] = (0,external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_.useState)(false);
+    (0,external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_.useEffect)(() => setIsHydrated(true), []);
+    return isHydrated;
+}
+
 ;// ./components/Code/index.tsx
 
 
 
 
+
 // Only load CodeMirror in the browser, for SSR
 // apps. Necessary because of people like this:
 // https://github.com/codemirror/CodeMirror/issues/3701#issuecomment-164904534
@@ -8951,7 +8965,8 @@ const Code = (props) => {
     const { children, lang, value } = props;
     const theme = (0,external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_.useContext)(Theme);
     const copyButtons = (0,external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_.useContext)(CodeOpts) || props.copyButtons;
-    const language = canonicalLanguage(lang);
+    const isHydrated = useHydrated();
+    const language = isHydrated ? canonicalLanguage(lang) : '';
     const codeRef = (0,external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_.createRef)();
     const codeOpts = {
         inline: !lang,
@@ -8959,7 +8974,7 @@ const Code = (props) => {
         dark: theme === 'dark',
     };
     const code = value ?? (Array.isArray(children) ? children[0] : children) ?? '';
-    const highlightedCode = syntaxHighlighter && typeof syntaxHighlighter === 'function' && code
+    const highlightedCode = syntaxHighlighter && typeof syntaxHighlighter === 'function' && code && isHydrated
         ? syntaxHighlighter(code, language, codeOpts, { mdx: true })
         : code;
     if (language === 'mermaid') {
@@ -8967,7 +8982,7 @@ const Code = (props) => {
     }
     return (external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement((external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default()).Fragment, null,
         copyButtons && external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement(CopyCode, { className: "fa", codeRef: codeRef }),
-        external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("code", { ref: codeRef, className: ['rdmd-code', `lang-${language}`, `theme-${theme}`].join(' '), "data-lang": language, suppressHydrationWarning: true }, highlightedCode)));
+        external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("code", { ref: codeRef, className: ['rdmd-code', `lang-${language}`, `theme-${theme}`].join(' '), "data-lang": language }, highlightedCode)));
 };
 /* harmony default export */ const components_Code = (Code);
 
@@ -8988,9 +9003,12 @@ const CodeTabs = (props) => {
             Promise.resolve(/* import() */).then(__webpack_require__.t.bind(__webpack_require__, 1387, 23)).then(module => {
                 mermaid = module.default;
                 mermaid.initialize({
+                    startOnLoad: false,
                     theme: theme === 'dark' ? 'dark' : 'default',
                 });
-                mermaid.contentLoaded();
+                mermaid.run({
+                    nodes: document.querySelectorAll('.mermaid-render'),
+                });
             });
         }
     }, [hasMermaid, theme]);
@@ -9006,7 +9024,7 @@ const CodeTabs = (props) => {
     // render single Mermaid diagram
     if (hasMermaid) {
         const value = children.props.children.props.value;
-        return external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("pre", { className: "mermaid mermaid_single" }, value);
+        return external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("pre", { className: "mermaid-render mermaid_single" }, value);
     }
     return (external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("div", { className: `CodeTabs CodeTabs_initial theme-${theme}` },
         external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("div", { className: "CodeTabs-toolbar" }, (Array.isArray(children) ? children : [children]).map((pre, i) => {
@@ -67365,7 +67383,7 @@ const mermaidTransformer = () => (tree) => {
         if (child.type === 'element' && child.tagName === 'code' && child.properties.lang === 'mermaid') {
             node.properties = {
                 ...node.properties,
-                className: ['mermaid', ...(node.properties.className || [])],
+                className: ['mermaid-render', ...(node.properties.className || [])],
             };
         }
     });
@@ -67634,7 +67652,7 @@ const readmeToMdx = () => tree => {
             return;
         if ('url' in image)
             image.data.hProperties.src = image.url;
-        const attributes = toAttributes(image.data.hProperties, imageAttrs);
+        const attributes = toAttributes({ ...image, ...image.data.hProperties }, imageAttrs);
         if (image.data.hProperties.className === 'emoji') {
             parent.children.splice(index, 1, {
                 type: NodeTypes.emoji,
@@ -67652,7 +67670,7 @@ const readmeToMdx = () => tree => {
         }
     });
     visit(tree, NodeTypes.imageBlock, (image, index, parent) => {
-        const attributes = toAttributes(image.data.hProperties, imageAttrs);
+        const attributes = toAttributes({ ...image, ...image.data.hProperties }, imageAttrs);
         if (hasExtra(attributes)) {
             parent.children.splice(index, 1, {
                 type: 'mdxJsxFlowElement',

package/dist/main.node.js

@@ -16068,6 +16068,14 @@ module.exports = require("react");
 
 /***/ }),
 
+/***/ 6982:
+/***/ ((module) => {
+
+"use strict";
+module.exports = require("crypto");
+
+/***/ }),
+
 /***/ 9896:
 /***/ ((module) => {
 
@@ -16578,11 +16586,25 @@ const CodeOptsContext = (0,external_react_.createContext)(false);
 const ThemeContext = (0,external_react_.createContext)('light');
 /* harmony default export */ const Theme = (ThemeContext);
 
+;// ./hooks/useHydrated/index.tsx
+
+/**
+ * A hook that returns whether or not the component has been hydrated.
+ * Useful for components that should only render in the browser, and not during SSR.
+ * Waiting to render until after hydration avoids React hydration mismatches.
+ */
+function useHydrated() {
+    const [isHydrated, setIsHydrated] = (0,external_react_.useState)(false);
+    (0,external_react_.useEffect)(() => setIsHydrated(true), []);
+    return isHydrated;
+}
+
 ;// ./components/Code/index.tsx
 
 
 
 
+
 // Only load CodeMirror in the browser, for SSR
 // apps. Necessary because of people like this:
 // https://github.com/codemirror/CodeMirror/issues/3701#issuecomment-164904534
@@ -16612,7 +16634,8 @@ const Code = (props) => {
     const { children, lang, value } = props;
     const theme = (0,external_react_.useContext)(Theme);
     const copyButtons = (0,external_react_.useContext)(CodeOpts) || props.copyButtons;
-    const language = canonicalLanguage(lang);
+    const isHydrated = useHydrated();
+    const language = isHydrated ? canonicalLanguage(lang) : '';
     const codeRef = (0,external_react_.createRef)();
     const codeOpts = {
         inline: !lang,
@@ -16620,7 +16643,7 @@ const Code = (props) => {
         dark: theme === 'dark',
     };
     const code = value ?? (Array.isArray(children) ? children[0] : children) ?? '';
-    const highlightedCode = syntaxHighlighter && typeof syntaxHighlighter === 'function' && code
+    const highlightedCode = syntaxHighlighter && typeof syntaxHighlighter === 'function' && code && isHydrated
         ? syntaxHighlighter(code, language, codeOpts, { mdx: true })
         : code;
     if (language === 'mermaid') {
@@ -16628,7 +16651,7 @@ const Code = (props) => {
     }
     return (external_react_default().createElement((external_react_default()).Fragment, null,
         copyButtons && external_react_default().createElement(CopyCode, { className: "fa", codeRef: codeRef }),
-        external_react_default().createElement("code", { ref: codeRef, className: ['rdmd-code', `lang-${language}`, `theme-${theme}`].join(' '), "data-lang": language, suppressHydrationWarning: true }, highlightedCode)));
+        external_react_default().createElement("code", { ref: codeRef, className: ['rdmd-code', `lang-${language}`, `theme-${theme}`].join(' '), "data-lang": language }, highlightedCode)));
 };
 /* harmony default export */ const components_Code = (Code);
 
@@ -16649,9 +16672,12 @@ const CodeTabs = (props) => {
             __webpack_require__.e(/* import() */ 486).then(__webpack_require__.bind(__webpack_require__, 5486)).then(module => {
                 mermaid = module.default;
                 mermaid.initialize({
+                    startOnLoad: false,
                     theme: theme === 'dark' ? 'dark' : 'default',
                 });
-                mermaid.contentLoaded();
+                mermaid.run({
+                    nodes: document.querySelectorAll('.mermaid-render'),
+                });
             });
         }
     }, [hasMermaid, theme]);
@@ -16667,7 +16693,7 @@ const CodeTabs = (props) => {
     // render single Mermaid diagram
     if (hasMermaid) {
         const value = children.props.children.props.value;
-        return external_react_default().createElement("pre", { className: "mermaid mermaid_single" }, value);
+        return external_react_default().createElement("pre", { className: "mermaid-render mermaid_single" }, value);
     }
     return (external_react_default().createElement("div", { className: `CodeTabs CodeTabs_initial theme-${theme}` },
         external_react_default().createElement("div", { className: "CodeTabs-toolbar" }, (Array.isArray(children) ? children : [children]).map((pre, i) => {
@@ -87568,7 +87594,7 @@ const mermaidTransformer = () => (tree) => {
         if (child.type === 'element' && child.tagName === 'code' && child.properties.lang === 'mermaid') {
             node.properties = {
                 ...node.properties,
-                className: ['mermaid', ...(node.properties.className || [])],
+                className: ['mermaid-render', ...(node.properties.className || [])],
             };
         }
     });
@@ -87837,7 +87863,7 @@ const readmeToMdx = () => tree => {
             return;
         if ('url' in image)
             image.data.hProperties.src = image.url;
-        const attributes = toAttributes(image.data.hProperties, imageAttrs);
+        const attributes = toAttributes({ ...image, ...image.data.hProperties }, imageAttrs);
         if (image.data.hProperties.className === 'emoji') {
             parent.children.splice(index, 1, {
                 type: NodeTypes.emoji,
@@ -87855,7 +87881,7 @@ const readmeToMdx = () => tree => {
         }
     });
     visit(tree, NodeTypes.imageBlock, (image, index, parent) => {
-        const attributes = toAttributes(image.data.hProperties, imageAttrs);
+        const attributes = toAttributes({ ...image, ...image.data.hProperties }, imageAttrs);
         if (hasExtra(attributes)) {
             parent.children.splice(index, 1, {
                 type: 'mdxJsxFlowElement',