chore(rdmd to rmdx): wrap scripts + styles in an <HTMLBlock>

__tests__/compilers/compatability.test.ts → __tests__/compilers/compatability.test.tsx

@@ -1,5 +1,9 @@
-import { mdx } from '../../index';
+import React from 'react';
 import fs from 'node:fs';
+import { vi } from 'vitest';
+import { render, screen, prettyDOM, configure } from '@testing-library/react';
+
+import { mdx, compile, run } from '../../index';
 import * as rdmd from '@readme/markdown-legacy';
 
 describe('compatability with RDMD', () => {
@@ -199,4 +203,68 @@ This is an image: <img src="http://example.com/#\\>" >
 
     expect(mdx(rdmd.mdast(md))).toBe(`Contact me at {user.email}\n`);
   });
+
+  describe('<HTMLBlock> wrapping', () => {
+  // configure({ defaultIgnore: undefined });
+
+    const rawStyle = `<style data-testid="style-tag">
+    p {
+      color: red;
+    }
+    </style>
+    `;
+    const rawScript = `<script data-testid="script-tag">
+    console.log('hello raw')
+    </script>
+    `;
+    const magicScript = `[block:html]
+    {
+      "html": "<script data-testid='script-block'>console.log('hello magic')</script>"
+    }
+    [/block]
+    `;
+
+    it('should wrap raw <style> tags in an <HTMLBlock>', async () => {
+      const legacyAST = rdmd.mdast(rawStyle);
+      const converted = mdx(legacyAST);
+      const compiled = compile(converted);
+      const Component = (await run(compiled)).default;
+      render(
+        <div className="markdown-body">
+          <Component />
+        </div>,
+      );
+      expect(screen.getByTestId('style-tag').tagName).toMatch('STYLE');
+    });
+
+    it('should wrap raw <script> tags in an <HTMLBlock>', async () => {
+      const legacyAST = rdmd.mdast(rawScript);
+      const converted = mdx(legacyAST);
+      const compiled = compile(converted);
+      const Component = (await run(compiled)).default;
+      render(
+        <div className="markdown-body">
+          <Component />
+        </div>,
+      );
+      expect(screen.queryByTestId('script-tag')).toBe(null);
+    });
+
+    it('should never execute <script> tags', async () => {
+      /**
+       * @note compatability mode has been deprecated for RMDX
+       */
+      const spy = vi.spyOn(console, 'log');
+      const legacyAST = rdmd.mdast(magicScript);
+      const converted = mdx(legacyAST);
+      const compiled = compile(converted);
+      const Component = await run(compiled);
+      render(
+        <div className="markdown-body">
+          <Component.default />
+        </div>,
+      );
+      expect(spy).toHaveBeenCalledTimes(0);
+    });
+  });
 });

processor/transform/readme-to-mdx.ts

@@ -5,6 +5,7 @@ import { MdxJsxAttribute } from 'mdast-util-mdx-jsx';
 
 import { visit } from 'unist-util-visit';
 import { toAttributes } from '../utils';
+import { type HTMLBlock } from 'types';
 
 const imageAttrs = ['align', 'alt', 'caption', 'border', 'src', 'title', 'width', 'lazy', 'className'];
 
@@ -75,6 +76,20 @@ const readmeToMdx = (): Transform => tree => {
     }
   });
 
+  visit(tree, 'html', (node, index, parent) => {
+    const html = node.value;
+    const isScriptOrStyleTag = [!!html.match(/^<(?:style|script)/i), !!html.match(/<\/(?:style|script)>$/i)];
+    if (!isScriptOrStyleTag.includes(true)) return;
+    parent.children.splice(index, 1, {
+      type: 'html-block',
+      children: [{ type: 'text', value: html }],
+      data: {
+        hName: 'html-block',
+        hProperties: { html },
+      },
+    } as HTMLBlock);
+  });
+
   return tree;
 };