rehype-mdx-fenced-code-meta-support - npm Package Compare versions

Comparing version 1.0.3 to 1.0.4

package.json

 {
   "name": "rehype-mdx-fenced-code-meta-support",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "A rehype MDX plugin for interpreting meta data tags passed to fenced code blocks in mdx.",
@@ -5,0 +5,0 @@ "author": "Mudit Juneja <[e-mail]>",

README.md

@@ -1,2 +0,1 @@
-# rehype-mdx-fenced-code-meta
 
@@ -7,2 +6,3 @@ A [rehype](https://github.com/rehypejs/rehype) [MDX](https://mdxjs.com) plugin for adding metadata to code elements.
 
+- [Why](#why)
 - [Installation](#installation)
@@ -15,2 +15,14 @@ - [Usage](#usage)
 
+
+## Why
+
+With the latest version of mdx-js, random props could not be fetched if they were in format below -
+
+````
+```mdx path=google.com src=no-src
+# Heading 1
+```
+````
+This was working in mdx v1. This package adds a new prop named `metaData` for the fenced code blocks of the format `path=google.com src=no-src` which can be parsed using a regex and accessed in your custom code component.
+
 ## Installation
@@ -62,11 +74,11 @@
   code: (props) => {
-      console.log("props", props);
-      const regex = /^(```\w+) *(path=[^ ]+)? *(src=[^ ]+)?/; // Adjust regex if needed
+    console.log("props", props);
+    const metaDataObject = props.metaData.split(' ').reduce((obj, item) => {
+        const [key, value] = item.split('=');
+        obj[key] = value;
+        return obj;
+      }, {});
 
-      // Extract path and src if possible
-      const path = match?.[2]?.split('=')[1] || null;
-      const src = match?.[3]?.split('=')[1] || null;
-
-      return <Code {...props} path={path} src={src} />;
-    },
+    return <Code {...props} path={metaDataObject.path} src={metaDataObject.src} />;
+  },
 }
@@ -73,0 +85,0 @@

No alert changes

Improved metrics

Total package byte prevSize

4841

increased by7.7%

Number of lines in readme file

108

increased by12.5%

No dependency changes