@readme/markdown 8.1.0 → 8.2.0

package/README.md

@@ -1,9 +1,27 @@
-# <img align="right" width="26%" src="https://owlbertsio-resized.s3.amazonaws.com/Reading.psd.full.png"> `@readme/markdown`
-
-<img align=right src=https://github.com/readmeio/markdown/workflows/CI/badge.svg alt="RDMD CI Status"> ReadMe's MDX rendering engine and custom component collection.
-<br/>  *(Use ReadMe? [Learn more about our upcoming move to MDX](https://docs.readme.com/rdmd/page/mdx-engine)!)*
-
-## Getting Started
+<p align="center">
+  <a href="https://npm.im/@readme/markdown">
+    <img src="https://owlbertsio-resized.s3.amazonaws.com/Reading.psd.full.png" width="150" alt="rmdx" />
+  </a>
+</p>
+
+<p align="center">
+  ReadMe's MDX rendering engine and custom component collection.<br />
+  <sub>
+    Use ReadMe? <a href="https://docs.readme.com/rdmd/page/mdx-engine">Learn more about our upcoming move to MDX!</a>
+  </sub>
+</p>
+
+<p align="center">
+  <a href="https://npm.im/@readme/markdown"><img src="https://img.shields.io/npm/v/@readme/markdown?style=for-the-badge" alt="NPM Version" /></a>
+  <a href="https://npm.im/@readme/markdown"><img src="https://img.shields.io/npm/l/@readme/markdown?style=for-the-badge" alt="MIT License" /></a>
+  <a href="https://github.com/readmeio/markdown"><img src="https://img.shields.io/github/actions/workflow/status/readmeio/markdown/ci.yml?branch=main&style=for-the-badge" alt="Build status" /></a>
+</p>
+
+<p align="center">
+  <a href="https://readme.com"><img src="https://raw.githubusercontent.com/readmeio/.github/main/oss-badge.svg" /></a>
+</p>
+
+## Usage
 
 To use the engine, install it from NPM:
 
@@ -16,11 +34,7 @@ Then [`compile`](#compile) and [`run`](#run) your MDX:
 ```jsx
 import RMDX from '@readme/markdown';
 
-export default ({ body }) => (
-  <div className="markdown-body">
-    {RMDX.run(RMDX.compile(body))}
-  </div>
-);
+export default ({ body }) => <div className="markdown-body">{RMDX.run(RMDX.compile(body))}</div>;
 ```
 
 ## API
@@ -42,13 +56,15 @@ A string of compiled Javascript module code.
 
 > [!CAUTION]
 > This is essentially a wrapper around [`mdx.run`](https://mdxjs.com/packages/mdx/#runcode-options) and **it will `eval` the compiled MDX**. Make sure you only call `run` on safe syntax from a trusted author!
->
-> #### Parameters
-> - **`string`** (`string`)—a compiled mdx document
-> - **`opts`** (`RunOpts`, optional)—configuration
->
-> #### Returns
-> An [`RMDXModule`](#rmdxmodule) of renderable components.
+
+#### Parameters
+
+- **`string`** (`string`)—a compiled mdx document
+- **`opts`** (`RunOpts`, optional)—configuration
+
+#### Returns
+
+An [`RMDXModule`](#rmdxmodule) of renderable components.
 
 ### `mdx`
 
@@ -57,7 +73,7 @@ Compiles an AST to a string of MDX syntax.
 #### Parameters
 
 - **`tree`** (`object`)—an abstract syntax tree
-- **`opts`** ([`Options`](https://github.com/remarkjs/remark/tree/main/packages/remark-stringify#options "`remark-stringify` Options type"))—`remark-stringify` configuration.
+- **`opts`** ([`Options`](https://github.com/remarkjs/remark/tree/main/packages/remark-stringify#options '`remark-stringify` Options type'))—`remark-stringify` configuration.
 
 #### Returns
 
@@ -67,8 +83,8 @@ An MDX string.
 
 - **`mdast`**: parse MDX syntax to MDAST.
 - **`hast`**: parse MDX syntax to HAST.
-- **`plain`**: parse MDX to a plaintext string with all Markdown syntax removed. (This *does not* `eval` the doc.)
-- **`tags`**: get a list of tag names from the doc. (This *does not* `eval` the doc.)
+- **`plain`**: parse MDX to a plaintext string with all Markdown syntax removed. (This _does not_ `eval` the doc.)
+- **`tags`**: get a list of tag names from the doc. (This _does not_ `eval` the doc.)
 - **`utils`**: additional defaults, helper methods, components, and so on.
 
 ## Types
@@ -103,7 +119,7 @@ Extends [`RunOptions`](https://mdxjs.com/packages/mdx/#runoptions)
 - **`toc`** (`HastHeading[]`)—a list of headings in the document
 - **`Toc`** (`() => MDCContent`)—a table of contents component
 
-## Local Development and Testing
+## Local development and testing
 
 To make changes to the RDMD engine locally, run the local development server. Clone the repo, `cd` in to it, `npm install`, and `npm run start`!
 

package/dist/main.js

@@ -52911,6 +52911,72 @@ const hasNamedExport = (tree, name) => {
     });
     return hasExport;
 };
+/* Example mdast structures to find first export name in a mdxjsEsm node:
+There are three types of export declarations that we need to consider:
+1. VARIABLE DECLARATION
+      "type": "mdxjsEsm",
+      "value": "export const Foo = () => <div>Hello world</div>\nexport const Bar = () => <div>hello darkness my old friend</div>",
+      "data": {
+        "estree": {
+          "type": "Program",
+          "body": [
+            {
+              "type": "ExportNamedDeclaration",
+              "declaration": {
+                "type": "VariableDeclaration",
+                "declarations": [
+                  {
+                    "type": "VariableDeclarator",
+                    "id": {
+                      "type": "Identifier",
+                      "name": "Foo" // --------> This is the export name
+                    },
+                    ...
+
+2/3. FUNCTION DECLARATION & CLASS DECLARATION
+      "estree": {
+          "type": "Program",
+          "body": [
+            {
+              "type": "ExportNamedDeclaration",
+              "declaration": {
+                "type": "ClassDeclaration" | "FunctionDeclaration",
+                "id": {
+                  "type": "Identifier",
+                  "name": "Foo" // --------> This is the export name
+                },
+*/
+const getExports = (tree) => {
+    const set = new Set();
+    visit(tree, isMDXEsm, (node) => {
+        // Once inside an mdxjsEsm node, we need to check for one or more declared exports within data.estree.body
+        // This is because single newlines \n are not considered as a new block, so there may be more than one export statement in a single mdxjsEsm node
+        const body = node.data?.estree.body;
+        if (!body)
+            return;
+        for (const child of body) {
+            if (child.type === 'ExportNamedDeclaration') {
+                // There are three types of ExportNamedDeclaration that we need to consider: VariableDeclaration, FunctionDeclaration, ClassDeclaration
+                const declaration = child.declaration;
+                // FunctionDeclaration and ClassDeclaration have the same structure
+                if (declaration.type !== 'VariableDeclaration') {
+                    // Note: declaration.id.type is always 'Identifier' for FunctionDeclarations and ClassDeclarations
+                    set.add(declaration.id.name);
+                }
+                else {
+                    const declarations = declaration.declarations;
+                    for (const declaration of declarations) {
+                        const id = declaration.id;
+                        if (id.type === 'Identifier') {
+                            set.add(id.name);
+                        }
+                    }
+                }
+            }
+        }
+    });
+    return Array.from(set);
+};
 
 ;// ./processor/transform/images.ts
 
@@ -71309,9 +71375,13 @@ const injectTailwindRoot = ({ components = {} }) => (node, index, parent) => {
     parent.children.splice(index, 1, wrapper);
     return SKIP;
 };
-const tailwind = ({ components }) => async (tree) => {
-    visit(tree, isMDXElement, injectTailwindRoot({ components }));
-    await exportTailwindStylesheet(tree, components);
+const tailwind = ({ components }) => async (tree, vfile) => {
+    const localComponents = getExports(tree).reduce((acc, name) => {
+        acc[name] = String(vfile);
+        return acc;
+    }, {});
+    visit(tree, isMDXElement, injectTailwindRoot({ components: { ...components, ...localComponents } }));
+    await exportTailwindStylesheet(tree, { ...components, ...localComponents });
     return tree;
 };
 /* harmony default export */ const transform_tailwind = (tailwind);
@@ -83527,72 +83597,8 @@ const compile_compile = async (text, { components = {}, copyButtons, useTailwind
 ;// ./lib/exports.ts
 
 
-
-/* Example mdast structures to find first export name in a mdxjsEsm node:
-There are three types of export declarations that we need to consider:
-1. VARIABLE DECLARATION
-      "type": "mdxjsEsm",
-      "value": "export const Foo = () => <div>Hello world</div>\nexport const Bar = () => <div>hello darkness my old friend</div>",
-      "data": {
-        "estree": {
-          "type": "Program",
-          "body": [
-            {
-              "type": "ExportNamedDeclaration",
-              "declaration": {
-                "type": "VariableDeclaration",
-                "declarations": [
-                  {
-                    "type": "VariableDeclarator",
-                    "id": {
-                      "type": "Identifier",
-                      "name": "Foo" // --------> This is the export name
-                    },
-                    ...
-
-2/3. FUNCTION DECLARATION & CLASS DECLARATION
-      "estree": {
-          "type": "Program",
-          "body": [
-            {
-              "type": "ExportNamedDeclaration",
-              "declaration": {
-                "type": "ClassDeclaration" | "FunctionDeclaration",
-                "id": {
-                  "type": "Identifier",
-                  "name": "Foo" // --------> This is the export name
-                },
-*/
 const exports_exports = (doc) => {
-    const set = new Set();
-    visit(lib_mdast(doc), isMDXEsm, (node) => {
-        // Once inside an mdxjsEsm node, we need to check for one or more declared exports within data.estree.body
-        // This is because single newlines \n are not considered as a new block, so there may be more than one export statement in a single mdxjsEsm node
-        const body = node.data?.estree.body;
-        if (!body)
-            return;
-        for (const child of body) {
-            if (child.type === 'ExportNamedDeclaration') {
-                // There are three types of ExportNamedDeclaration that we need to consider: VariableDeclaration, FunctionDeclaration, ClassDeclaration
-                const declaration = child.declaration;
-                // FunctionDeclaration and ClassDeclaration have the same structure 
-                if (declaration.type !== 'VariableDeclaration') {
-                    // Note: declaration.id.type is always 'Identifier' for FunctionDeclarations and ClassDeclarations
-                    set.add(declaration.id.name);
-                }
-                else {
-                    const declarations = declaration.declarations;
-                    for (const declaration of declarations) {
-                        const id = declaration.id;
-                        if (id.type === 'Identifier') {
-                            set.add(id.name);
-                        }
-                    }
-                }
-            }
-        }
-    });
-    return Array.from(set);
+    return getExports(lib_mdast(doc));
 };
 /* harmony default export */ const lib_exports = (exports_exports);
 

package/dist/main.node.js

@@ -57493,6 +57493,72 @@ const hasNamedExport = (tree, name) => {
     });
     return hasExport;
 };
+/* Example mdast structures to find first export name in a mdxjsEsm node:
+There are three types of export declarations that we need to consider:
+1. VARIABLE DECLARATION
+      "type": "mdxjsEsm",
+      "value": "export const Foo = () => <div>Hello world</div>\nexport const Bar = () => <div>hello darkness my old friend</div>",
+      "data": {
+        "estree": {
+          "type": "Program",
+          "body": [
+            {
+              "type": "ExportNamedDeclaration",
+              "declaration": {
+                "type": "VariableDeclaration",
+                "declarations": [
+                  {
+                    "type": "VariableDeclarator",
+                    "id": {
+                      "type": "Identifier",
+                      "name": "Foo" // --------> This is the export name
+                    },
+                    ...
+
+2/3. FUNCTION DECLARATION & CLASS DECLARATION
+      "estree": {
+          "type": "Program",
+          "body": [
+            {
+              "type": "ExportNamedDeclaration",
+              "declaration": {
+                "type": "ClassDeclaration" | "FunctionDeclaration",
+                "id": {
+                  "type": "Identifier",
+                  "name": "Foo" // --------> This is the export name
+                },
+*/
+const getExports = (tree) => {
+    const set = new Set();
+    visit(tree, isMDXEsm, (node) => {
+        // Once inside an mdxjsEsm node, we need to check for one or more declared exports within data.estree.body
+        // This is because single newlines \n are not considered as a new block, so there may be more than one export statement in a single mdxjsEsm node
+        const body = node.data?.estree.body;
+        if (!body)
+            return;
+        for (const child of body) {
+            if (child.type === 'ExportNamedDeclaration') {
+                // There are three types of ExportNamedDeclaration that we need to consider: VariableDeclaration, FunctionDeclaration, ClassDeclaration
+                const declaration = child.declaration;
+                // FunctionDeclaration and ClassDeclaration have the same structure
+                if (declaration.type !== 'VariableDeclaration') {
+                    // Note: declaration.id.type is always 'Identifier' for FunctionDeclarations and ClassDeclarations
+                    set.add(declaration.id.name);
+                }
+                else {
+                    const declarations = declaration.declarations;
+                    for (const declaration of declarations) {
+                        const id = declaration.id;
+                        if (id.type === 'Identifier') {
+                            set.add(id.name);
+                        }
+                    }
+                }
+            }
+        }
+    });
+    return Array.from(set);
+};
 
 ;// ./processor/transform/images.ts
 
@@ -75891,9 +75957,13 @@ const injectTailwindRoot = ({ components = {} }) => (node, index, parent) => {
     parent.children.splice(index, 1, wrapper);
     return SKIP;
 };
-const tailwind = ({ components }) => async (tree) => {
-    visit(tree, isMDXElement, injectTailwindRoot({ components }));
-    await exportTailwindStylesheet(tree, components);
+const tailwind = ({ components }) => async (tree, vfile) => {
+    const localComponents = getExports(tree).reduce((acc, name) => {
+        acc[name] = String(vfile);
+        return acc;
+    }, {});
+    visit(tree, isMDXElement, injectTailwindRoot({ components: { ...components, ...localComponents } }));
+    await exportTailwindStylesheet(tree, { ...components, ...localComponents });
     return tree;
 };
 /* harmony default export */ const transform_tailwind = (tailwind);
@@ -88109,72 +88179,8 @@ const compile_compile = async (text, { components = {}, copyButtons, useTailwind
 ;// ./lib/exports.ts
 
 
-
-/* Example mdast structures to find first export name in a mdxjsEsm node:
-There are three types of export declarations that we need to consider:
-1. VARIABLE DECLARATION
-      "type": "mdxjsEsm",
-      "value": "export const Foo = () => <div>Hello world</div>\nexport const Bar = () => <div>hello darkness my old friend</div>",
-      "data": {
-        "estree": {
-          "type": "Program",
-          "body": [
-            {
-              "type": "ExportNamedDeclaration",
-              "declaration": {
-                "type": "VariableDeclaration",
-                "declarations": [
-                  {
-                    "type": "VariableDeclarator",
-                    "id": {
-                      "type": "Identifier",
-                      "name": "Foo" // --------> This is the export name
-                    },
-                    ...
-
-2/3. FUNCTION DECLARATION & CLASS DECLARATION
-      "estree": {
-          "type": "Program",
-          "body": [
-            {
-              "type": "ExportNamedDeclaration",
-              "declaration": {
-                "type": "ClassDeclaration" | "FunctionDeclaration",
-                "id": {
-                  "type": "Identifier",
-                  "name": "Foo" // --------> This is the export name
-                },
-*/
 const exports_exports = (doc) => {
-    const set = new Set();
-    visit(lib_mdast(doc), isMDXEsm, (node) => {
-        // Once inside an mdxjsEsm node, we need to check for one or more declared exports within data.estree.body
-        // This is because single newlines \n are not considered as a new block, so there may be more than one export statement in a single mdxjsEsm node
-        const body = node.data?.estree.body;
-        if (!body)
-            return;
-        for (const child of body) {
-            if (child.type === 'ExportNamedDeclaration') {
-                // There are three types of ExportNamedDeclaration that we need to consider: VariableDeclaration, FunctionDeclaration, ClassDeclaration
-                const declaration = child.declaration;
-                // FunctionDeclaration and ClassDeclaration have the same structure 
-                if (declaration.type !== 'VariableDeclaration') {
-                    // Note: declaration.id.type is always 'Identifier' for FunctionDeclarations and ClassDeclarations
-                    set.add(declaration.id.name);
-                }
-                else {
-                    const declarations = declaration.declarations;
-                    for (const declaration of declarations) {
-                        const id = declaration.id;
-                        if (id.type === 'Identifier') {
-                            set.add(id.name);
-                        }
-                    }
-                }
-            }
-        }
-    });
-    return Array.from(set);
+    return getExports(lib_mdast(doc));
 };
 /* harmony default export */ const lib_exports = (exports_exports);