Allow plugin options for both remark and rehype plugins

Author: NullVoxPopuli

packages/ember-repl/addon/src/compile/formats/markdown.ts

@@ -240,7 +240,11 @@ function buildCompiler(options: ParseMarkdownOptions) {
    */
   if (options.remarkPlugins) {
     options.remarkPlugins.forEach((plugin) => {
-      compiler = compiler.use(plugin) as any;
+      // Arrays are how plugins are passed options (for some reason?)
+      // why not just invoke the the function?
+      let p = Array.isArray(plugin) ? plugin : [plugin];
+
+      compiler = compiler.use(...(p as Parameters<typeof compiler.use>));
     });
   }
 
@@ -296,7 +300,11 @@ function buildCompiler(options: ParseMarkdownOptions) {
 
   if (options.rehypePlugins) {
     options.rehypePlugins.forEach((plugin) => {
-      compiler = compiler.use(plugin) as any;
+      // Arrays are how plugins are passed options (for some reason?)
+      // why not just invoke the the function?
+      let p = Array.isArray(plugin) ? plugin : [plugin];
+
+      compiler = compiler.use(...(p as Parameters<typeof compiler.use>));
     });
   }
 

packages/ember-repl/addon/src/compile/types.ts

@@ -1,5 +1,5 @@
 import type { ComponentLike } from '@glint/template';
-import type { Plugin } from 'unified';
+import type { unified } from 'unified';
 
 export interface EvalImportMap {
   [moduleName: string]: ScopeMap;
@@ -9,7 +9,7 @@ export interface ScopeMap {
   [localName: string]: unknown;
 }
 
-export type UnifiedPlugin = Plugin; // Parameters<ReturnType<typeof unified>['use']>[0];
+export type UnifiedPlugin = Parameters<ReturnType<typeof unified>['use']>[0];
 
 export interface CompileResult {
   component?: ComponentLike;

packages/ember-repl/test-app/tests/unit/markdown-test.ts

@@ -97,6 +97,32 @@ module('Unit | parseMarkdown()', function () {
       assert.deepEqual(result.blocks, []);
     });
 
+    test('remarkPlugins w/ options', async function (assert) {
+      let result = await parseMarkdown(`# Title`, {
+        remarkPlugins: [
+          [
+            function noH1(options) {
+              return (tree) => {
+                return visit(tree, ['heading'], function (node) {
+                  if (!('depth' in node)) return;
+
+                  if (node.depth === 1) {
+                    node.depth = options.depth;
+                  }
+
+                  return 'skip';
+                });
+              };
+            },
+            { depth: 3 },
+          ],
+        ],
+      });
+
+      assertOutput(result.templateOnlyGlimdown, `<h3>Title</h3>`);
+
+      assert.deepEqual(result.blocks, []);
+    });
     test('rehypePlugins', async function (assert) {
       let result = await parseMarkdown(`# Title`, {
         rehypePlugins: [
@@ -125,6 +151,33 @@ module('Unit | parseMarkdown()', function () {
 
       assert.deepEqual(result.blocks, []);
     });
+
+    test('rehypePlugins w/ options', async function (assert) {
+      let result = await parseMarkdown(`# Title`, {
+        rehypePlugins: [
+          [
+            function noH1(options) {
+              return (tree) => {
+                return visit(tree, ['element'], function (node) {
+                  if (!('tagName' in node)) return;
+
+                  if (node.tagName === 'h1') {
+                    node.tagName = `h${options.depth ?? 2}`;
+                  }
+
+                  return 'skip';
+                });
+              };
+            },
+            { depth: 3 },
+          ],
+        ],
+      });
+
+      assertOutput(result.templateOnlyGlimdown, `<h3>Title</h3>`);
+
+      assert.deepEqual(result.blocks, []);
+    });
   });
 
   module('hbs', function () {