rehype-expressive-code - npm Package Compare versions

Comparing version 0.35.0 to 0.35.1

dist/index.d.ts

@@ -1,2 +0,3 @@
-import { VFileWithOutput, Plugin } from 'unified';
+import { VFileWithOutput } from 'unified';
+import { VFile } from 'vfile';
 import { ExpressiveCodeConfig, ExpressiveCodeBlockOptions, ExpressiveCodeBlock, BundledShikiTheme, ExpressiveCodeTheme, ExpressiveCodeThemeInput, ExpressiveCode } from 'expressive-code';
@@ -6,2 +7,4 @@ export * from 'expressive-code';
 
+type AnyVFile = VFile | VFileWithOutput<null>;
+
 type RehypeExpressiveCodeOptions = Omit<ExpressiveCodeConfig, 'themes'> & {
@@ -44,3 +47,3 @@ /**
         input: ExpressiveCodeBlockOptions;
-        file: VFileWithOutput<null>;
+        file: AnyVFile;
     }) => string | undefined | Promise<string | undefined>) | undefined;
@@ -60,3 +63,3 @@ /**
         input: ExpressiveCodeBlockOptions;
-        file: VFileWithOutput<null>;
+        file: AnyVFile;
     }) => ExpressiveCodeBlock | Promise<ExpressiveCodeBlock>) | undefined;
@@ -93,4 +96,4 @@ /**
 declare function createRenderer(options?: RehypeExpressiveCodeOptions): Promise<RehypeExpressiveCodeRenderer>;
-declare const rehypeExpressiveCode: Plugin<[RehypeExpressiveCodeOptions] | unknown[], Root>;
+declare function rehypeExpressiveCode(options?: RehypeExpressiveCodeOptions): (tree: Root, file: AnyVFile) => Promise<void>;
 
 export { RehypeExpressiveCodeDocument, RehypeExpressiveCodeOptions, RehypeExpressiveCodeRenderer, ThemeObjectOrShikiThemeName, createRenderer, rehypeExpressiveCode as default };

dist/index.js

@@ -32,2 +32,76 @@ // src/index.ts
 }
+function createInlineAssetElement({
+  tagName,
+  properties = {},
+  innerHTML,
+  useMdxJsx
+}) {
+  if (useMdxJsx)
+    return createMdxJsxElementWithInnerHTML(tagName, properties, innerHTML);
+  return {
+    type: "element",
+    tagName,
+    properties,
+    children: [{ type: "text", value: innerHTML }]
+  };
+}
+function createMdxJsxElementWithInnerHTML(tagName, properties, innerHTML) {
+  const attrs = Object.entries(properties).map(([name, value]) => ({
+    type: "mdxJsxAttribute",
+    name,
+    value
+  }));
+  return {
+    type: "mdxJsxFlowElement",
+    name: tagName,
+    attributes: [
+      ...attrs,
+      {
+        type: "mdxJsxAttribute",
+        name: "dangerouslySetInnerHTML",
+        value: {
+          type: "mdxJsxAttributeValueExpression",
+          value: `{__html:${JSON.stringify(innerHTML)}}`,
+          data: {
+            estree: {
+              type: "Program",
+              body: [
+                {
+                  type: "ExpressionStatement",
+                  expression: {
+                    type: "ObjectExpression",
+                    properties: [
+                      {
+                        type: "Property",
+                        method: false,
+                        shorthand: false,
+                        computed: false,
+                        key: {
+                          type: "Identifier",
+                          name: "__html"
+                        },
+                        value: {
+                          type: "Literal",
+                          value: innerHTML,
+                          raw: JSON.stringify(innerHTML)
+                        },
+                        kind: "init"
+                      }
+                    ]
+                  }
+                }
+              ],
+              sourceType: "module",
+              comments: []
+            }
+          }
+        }
+      }
+    ],
+    data: {
+      _mdxExplicitJsx: true
+    },
+    children: []
+  };
+}
 
@@ -64,4 +138,3 @@ // src/index.ts
 }
-var rehypeExpressiveCode = (...settings) => {
-  const options = settings[0] ?? {};
+function rehypeExpressiveCode(options = {}) {
   const { tabWidth = 2, getBlockLocale, customCreateRenderer, customCreateBlock } = options;
@@ -73,3 +146,4 @@ let asyncRenderer;
     addedStyles,
-    addedJsModules
+    addedJsModules,
+    useMdxJsx
   }) => {
@@ -95,8 +169,9 @@ const { ec, baseStyles, themeStyles, jsModules } = renderer;
     if (stylesToPrepend.length) {
-      extraElements.push({
-        type: "element",
-        tagName: "style",
-        properties: {},
-        children: [{ type: "text", value: [...stylesToPrepend].join("") }]
-      });
+      extraElements.push(
+        createInlineAssetElement({
+          tagName: "style",
+          innerHTML: stylesToPrepend.join(""),
+          useMdxJsx
+        })
+      );
     }
@@ -107,8 +182,10 @@ jsModules.forEach((moduleCode) => {
       addedJsModules.add(moduleCode);
-      extraElements.push({
-        type: "element",
-        tagName: "script",
-        properties: { type: "module" },
-        children: [{ type: "text", value: moduleCode }]
-      });
+      extraElements.push(
+        createInlineAssetElement({
+          tagName: "script",
+          properties: { type: "module" },
+          innerHTML: moduleCode,
+          useMdxJsx
+        })
+      );
     });
@@ -133,2 +210,5 @@ renderedGroupAst.children.unshift(...extraElements);
     const renderer = await asyncRenderer;
+    const isAstro = file.data?.astro !== void 0;
+    const isMdx = file.path?.endsWith(".mdx") ?? false;
+    const useMdxJsx = !isAstro && isMdx;
     const addedStyles = /* @__PURE__ */ new Set();
@@ -158,3 +238,3 @@ const addedJsModules = /* @__PURE__ */ new Set();
       const codeBlock = customCreateBlock ? await customCreateBlock({ input, file }) : new ExpressiveCodeBlock(input);
-      const renderedBlock = await renderBlockToHast({ codeBlock, renderer, addedStyles, addedJsModules });
+      const renderedBlock = await renderBlockToHast({ codeBlock, renderer, addedStyles, addedJsModules, useMdxJsx });
       parent.children.splice(parent.children.indexOf(code.pre), 1, renderedBlock);
@@ -164,3 +244,3 @@ }
   return transformer;
-};
+}
 var src_default = rehypeExpressiveCode;
@@ -167,0 +247,0 @@ export {

package.json

 {
   "name": "rehype-expressive-code",
-  "version": "0.35.0",
+  "version": "0.35.1",
   "description": "Rehype plugin for Expressive Code, a text marking & annotation engine for presenting source code on the web.",
@@ -38,3 +38,3 @@ "keywords": [],
   "dependencies": {
-    "expressive-code": "^0.35.0"
+    "expressive-code": "^0.35.1"
   },
@@ -44,2 +44,3 @@ "devDependencies": {
     "@types/unist": "^2.0.6",
+    "mdast-util-mdx-jsx": "^3.1.2",
     "rehype-stringify": "^9.0.3",
@@ -50,2 +51,3 @@ "remark-parse": "^10.0.1",
     "unified": "^10.1.2",
+    "vfile": "^6.0.1",
     "@internal/test-utils": "^0.2.28"
@@ -52,0 +54,0 @@ },

No alert changes

Improved metrics

Total package byte prevSize

35082

increased by21.81%

Lines of code

335

increased by32.41%

Worsened metrics

Dev dependency count

10

increased by25%

Dependency changes

• Updatedexpressive-code@^0.35.1