@readme/markdown 9.0.6 → 9.1.1

package/dist/main.js

@@ -18217,9 +18217,15 @@ const themes = {
     '\u2139\uFE0F': 'info',
     '\u26A0': 'warn',
 };
+const defaultIcons = {
+    info: '\uD83D\uDCD8',
+    warn: '\uD83D\uDEA7',
+    okay: '\uD83D\uDC4D',
+    error: '\u2757\uFE0F',
+};
 const Callout = (props) => {
-    const { attributes, children, icon, empty } = props;
-    const theme = props.theme || themes[icon] || 'default';
+    const { attributes, children, theme, empty } = props;
+    const icon = props.icon || defaultIcons[theme] || '❗';
     return (
     // @ts-expect-error -- theme is not a valid attribute
     // eslint-disable-next-line react/jsx-props-no-spreading, react/no-unknown-property
@@ -18237,7 +18243,7 @@ const Callout = (props) => {
 const Card = ({ children, href, icon, iconColor, target, title }) => {
     const Tag = href ? 'a' : 'div';
     return (external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement(Tag, { className: "Card", href: href, target: target },
-        icon && external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("i", { className: `Card-icon fa-duotone fa-solid ${icon}`, style: { color: `${iconColor}` } }),
+        icon && external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("i", { className: `Card-icon fa-duotone fa-solid ${icon}`, style: { '--Card-icon-color': iconColor } }),
         title && external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("p", { className: "Card-title" }, title),
         external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("div", { className: "Card-content" }, children)));
 };
@@ -18251,9 +18257,15 @@ const CardsGrid = ({ columns = 2, children }) => {
 // EXTERNAL MODULE: ./node_modules/copy-to-clipboard/index.js
 var copy_to_clipboard = __webpack_require__(7965);
 var copy_to_clipboard_default = /*#__PURE__*/__webpack_require__.n(copy_to_clipboard);
+;// ./contexts/Theme.ts
+
+const ThemeContext = (0,external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_.createContext)('light');
+/* harmony default export */ const Theme = (ThemeContext);
+
 ;// ./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
@@ -18280,7 +18292,8 @@ function CopyCode({ codeRef, rootClass = 'rdmd-code-copy', className = '', }) {
     return external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("button", { ref: buttonRef, "aria-label": "Copy Code", className: `${rootClass} ${className}`, onClick: copier });
 }
 const Code = (props) => {
-    const { children, copyButtons, lang, theme, value } = props;
+    const { children, copyButtons, lang, value } = props;
+    const theme = (0,external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_.useContext)(Theme);
     const language = canonicalLanguage(lang);
     const codeRef = (0,external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_.createRef)();
     const codeOpts = {
@@ -18304,9 +18317,11 @@ var dist = __webpack_require__(4668);
 ;// ./components/CodeTabs/index.tsx
 
 
+
 let mermaid;
 const CodeTabs = (props) => {
-    const { children, theme } = props;
+    const { children } = props;
+    const theme = (0,external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_.useContext)(Theme);
     // render Mermaid diagram
     (0,external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_.useEffect)(() => {
         if (typeof window !== 'undefined') {
@@ -53166,6 +53181,7 @@ var NodeTypes;
 
 
 
+
 const callouts_regex = `^(${emoji_regex().source}|⚠)(\\s+|$)`;
 const calloutTransformer = () => {
     return (tree) => {
@@ -53177,6 +53193,7 @@ const calloutTransformer = () => {
             if (icon && match) {
                 const heading = startText.slice(match.length);
                 const empty = !heading.length && node.children[0].children.length === 1;
+                const theme = themes[icon] || 'default';
                 node.children[0].children[0].value = heading;
                 Object.assign(node, {
                     type: NodeTypes.callout,
@@ -53185,6 +53202,7 @@ const calloutTransformer = () => {
                         hProperties: {
                             icon,
                             empty,
+                            theme,
                         },
                     },
                 });
@@ -70596,6 +70614,28 @@ const getExports = (tree) => {
     return Array.from(set);
 };
 
+;// ./processor/transform/handle-missing-components.ts
+
+
+
+const handleMissingComponents = ({ components, missingComponents }) => tree => {
+    const allComponents = new Set([
+        ...getExports(tree),
+        ...Object.keys(components_namespaceObject),
+        ...Object.keys(components),
+        'Variable',
+    ]);
+    visit(tree, isMDXElement, (node, index, parent) => {
+        if (allComponents.has(node.name) || node.name.match(/^[a-z]/))
+            return;
+        if (missingComponents === 'throw') {
+            throw new Error(`Expected component \`${node.name}\` to be defined: you likely forgot to import, pass, or provide it.`);
+        }
+        parent.children.splice(index, 1);
+    }, true);
+};
+/* harmony default export */ const handle_missing_components = (handleMissingComponents);
+
 ;// ./processor/transform/images.ts
 
 
@@ -70706,6 +70746,7 @@ const mermaidTransformer = () => (tree) => {
 
 
 
+
 const readme_components_types = {
     Callout: NodeTypes.callout,
     Code: 'code',
@@ -70822,13 +70863,15 @@ const coerceJsxToMd = ({ components = {}, html = false } = {}) => (node, index,
         return SKIP;
     }
     else if (node.name === 'Callout') {
+        const attrs = getAttrs(node);
         const { icon, empty = false } = getAttrs(node);
+        const theme = attrs.theme || themes[icon] || 'default';
         const mdNode = {
             children: node.children,
             type: NodeTypes.callout,
             data: {
                 hName: node.name,
-                hProperties: { icon, empty },
+                hProperties: { icon, empty, theme },
             },
             position: node.position,
         };
@@ -70962,6 +71005,42 @@ const readmeToMdx = () => tree => {
             },
         });
     });
+    const isVariable = (node) => 'type' in node && node.type === NodeTypes.variable;
+    visit(tree, isVariable, (node, index, parent) => {
+        const identifier = (node.data.hProperties.variable || node.data.hProperties.name).toString();
+        const validIdentifier = identifier.match(/^(\p{Letter}|[$_])(\p{Letter}|[$_0-9])*$/u);
+        const value = validIdentifier ? `user.${identifier}` : `user[${JSON.stringify(identifier)}]`;
+        const mdxFlowExpression = {
+            type: 'mdxFlowExpression',
+            value,
+            data: {
+                estree: {
+                    type: 'Program',
+                    body: [
+                        {
+                            type: 'ExpressionStatement',
+                            expression: {
+                                type: 'MemberExpression',
+                                object: {
+                                    type: 'Identifier',
+                                    name: 'user',
+                                },
+                                property: {
+                                    type: 'Identifier',
+                                    name: identifier,
+                                },
+                                computed: false,
+                                optional: false,
+                            },
+                        },
+                    ],
+                    sourceType: 'module',
+                    comments: [],
+                },
+            },
+        };
+        parent.children.splice(index, 1, mdxFlowExpression);
+    });
     return tree;
 };
 /* harmony default export */ const readme_to_mdx = (readmeToMdx);
@@ -71178,6 +71257,7 @@ const variables = ({ asMdx } = { asMdx: true }) => tree => {
 
 
 
+
 const defaultTransforms = {
     calloutTransformer: callouts,
     codeTabsTransformer: code_tabs,
@@ -71196,12 +71276,22 @@ const defaultTransforms = {
 
 const remarkPlugins = [remarkFrontmatter, remarkGfm, ...transform];
 const rehypePlugins = [rehypeSlug, transform_mermaid];
-const astProcessor = (opts = { components: {} }) => remark()
-    .use(remarkMdx)
-    .use(remarkPlugins)
-    .use(opts.remarkPlugins)
-    .use(transform_variables, { asMdx: false })
-    .use(readme_components({ components: opts.components }));
+const astProcessor = (opts = {}) => {
+    const components = opts.components || {};
+    let processor = remark()
+        .use(remarkMdx)
+        .use(remarkPlugins)
+        .use(opts.remarkPlugins)
+        .use(transform_variables, { asMdx: false })
+        .use(readme_components({ components }));
+    if (['ignore', 'throw'].includes(opts.missingComponents)) {
+        processor = processor.use(handle_missing_components, {
+            components,
+            missingComponents: opts.missingComponents,
+        });
+    }
+    return processor;
+};
 /* harmony default export */ const ast_processor = (astProcessor);
 
 ;// ./node_modules/markdown-extensions/index.js
@@ -83752,12 +83842,16 @@ const tocHastToMdx = (toc, components) => {
 
 
 const { codeTabsTransformer: compile_codeTabsTransformer, ...transforms } = defaultTransforms;
-const compile_compile = async (text, { components = {}, copyButtons, useTailwind, ...opts } = {}) => {
+const compile_compile = async (text, { components = {}, missingComponents, copyButtons, useTailwind, ...opts } = {}) => {
     const remarkPlugins = [
         remarkFrontmatter,
         remarkGfm,
         ...Object.values(transforms),
         [compile_codeTabsTransformer, { copyButtons }],
+        [
+            handle_missing_components,
+            { components, missingComponents: ['ignore', 'throw'].includes(missingComponents) ? missingComponents : 'ignore' },
+        ],
     ];
     if (useTailwind) {
         remarkPlugins.push([transform_tailwind, { components }]);
@@ -88633,15 +88727,6 @@ ${reformatHTML(html)}
 };
 /* harmony default export */ const html_block = (htmlBlock);
 
-;// ./processor/compile/variable.ts
-const variable = (node) => {
-    // @note: coming from RDMD, it's set as `variable`. But when mdx is parsed,
-    // it's set as `name`
-    const name = node.data.hProperties.variable || node.data.hProperties.name;
-    return name.toString().match(/ /) ? `{user[${JSON.stringify(name)}]}` : `{user.${name}}`;
-};
-/* harmony default export */ const compile_variable = (variable);
-
 ;// ./processor/compile/index.ts
 
 
@@ -88650,7 +88735,6 @@ const variable = (node) => {
 
 
 
-
 function compilers() {
     const data = this.data();
     const toMarkdownExtensions = data.toMarkdownExtensions || (data.toMarkdownExtensions = []);
@@ -88662,7 +88746,6 @@ function compilers() {
         [NodeTypes.glossary]: compile_compatibility,
         [NodeTypes.htmlBlock]: html_block,
         [NodeTypes.reusableContent]: compile_compatibility,
-        [NodeTypes.variable]: compile_variable,
         embed: compile_compatibility,
         escape: compile_compatibility,
         figure: compile_compatibility,
@@ -99121,24 +99204,25 @@ function runSync(code, options) {
   return new Function(String(code))(options)
 }
 
-// EXTERNAL MODULE: external "@readme/variable"
-var variable_ = __webpack_require__(8167);
-var variable_default = /*#__PURE__*/__webpack_require__.n(variable_);
 // EXTERNAL MODULE: ./node_modules/react/jsx-runtime.js
 var jsx_runtime = __webpack_require__(4848);
 var jsx_runtime_namespaceObject = /*#__PURE__*/__webpack_require__.t(jsx_runtime, 2);
+// EXTERNAL MODULE: external "@readme/variable"
+var variable_ = __webpack_require__(8167);
+var variable_default = /*#__PURE__*/__webpack_require__.n(variable_);
 ;// ./contexts/index.tsx
 
 
 
 
+
 const compose = (children, ...contexts) => {
     return contexts.reduce((content, [Context, value]) => {
         return external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement(Context.Provider, { value: value }, content);
     }, children);
 };
-const Contexts = ({ children, terms = [], variables = { user: {}, defaults: [] }, baseUrl = '/' }) => {
-    return compose(children, [GlossaryTerms, terms], [variable_.VariablesContext, variables], [BaseUrl, baseUrl]);
+const Contexts = ({ children, terms = [], variables = { user: {}, defaults: [] }, baseUrl = '/', theme }) => {
+    return compose(children, [GlossaryTerms, terms], [variable_.VariablesContext, variables], [BaseUrl, baseUrl], [Theme, theme]);
 };
 /* harmony default export */ const contexts = (Contexts);
 
@@ -99160,14 +99244,7 @@ const User = (variables) => {
 };
 /* harmony default export */ const user = (User);
 
-;// ./lib/run.tsx
-
-
-
-
-
-
-
+;// ./lib/utils/makeUseMdxComponents.ts
 
 
 const makeUseMDXComponents = (more = {}) => {
@@ -99190,9 +99267,20 @@ const makeUseMDXComponents = (more = {}) => {
         ...headings,
         ...more,
     };
-    // @ts-expect-error I'm not sure how to coerce the correct type
-    return () => components;
+    return (() => components);
 };
+/* harmony default export */ const makeUseMdxComponents = (makeUseMDXComponents);
+
+;// ./lib/run.tsx
+
+
+
+
+
+
+
+
+
 const run_run = async (string, _opts = {}) => {
     const { Fragment } = jsx_runtime_namespaceObject;
     const { components = {}, terms, variables, baseUrl, imports = {}, ...opts } = _opts;
@@ -99209,7 +99297,7 @@ const run_run = async (string, _opts = {}) => {
         }
         return memo;
     }, {});
-    const exec = (text, { useMDXComponents = makeUseMDXComponents(exportedComponents) } = {}) => {
+    const exec = (text, { useMDXComponents = makeUseMdxComponents(exportedComponents) } = {}) => {
         return run(text, {
             ...jsx_runtime_namespaceObject,
             Fragment,
@@ -99229,7 +99317,7 @@ const run_run = async (string, _opts = {}) => {
         Toc = tocModule.default;
     }
     return {
-        default: props => (external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement(contexts, { baseUrl: baseUrl, terms: terms, variables: variables },
+        default: (props) => (external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement(contexts, { baseUrl: baseUrl, terms: terms, theme: props.theme, variables: variables },
             external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement(Content, { ...props }))),
         toc,
         Toc: props => Toc ? (external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement(components_TableOfContents, null,