Allow plugin options for both remark and rehype plugins (#1699)

* Allow plugin options for both remark and rehype plugins

* Fix types

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 [any]));
     });
   }
 
@@ -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 [any]));
     });
   }
 

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 { Pluggable } 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 = Pluggable;
 
 export interface CompileResult {
   component?: ComponentLike;

packages/ember-repl/test-app/tests/rendering/markdown-test.gts

@@ -6,13 +6,13 @@ import { setupRenderingTest } from 'ember-qunit';
 import { stripIndent } from 'common-tags';
 import { compile } from 'ember-repl';
 import { CACHE } from 'ember-repl/__PRIVATE__DO_NOT_USE__';
-import { type Plugin } from 'unified';
 import { visit } from 'unist-util-visit';
 
 import type { ComponentLike } from '@glint/template';
+import type { PluggableList } from 'unified';
 import type { Parent } from 'unist';
 
-export type UnifiedPlugin = Plugin; // Parameters<ReturnType<(typeof unified)>['use']>[0];
+export type UnifiedPlugin = PluggableList[0];
 type Build = (plugin?: UnifiedPlugin) => Promise<void>;
 
 module('Rendering | compile()', function (hooks) {
@@ -98,7 +98,7 @@ module('Rendering | compile()', function (hooks) {
          * unformatted mess in a p tag
          */
         const uncodeSnippet: UnifiedPlugin = (/* options */) => {
-          return function transformer(tree) {
+          return function transformer(tree: Parameters<typeof visit>[0]) {
             visit(tree, ['code'], function (node, index, parent: Parent) {
               if (!parent) return;
               if (undefined === index) return;
@@ -263,8 +263,8 @@ module('Rendering | compile()', function (hooks) {
 
         remarkPlugins: [
           function noH1(/* options */) {
-            return (tree) => {
-              return visit(tree, ['heading'], function (node) {
+            return (tree: Parameters<typeof visit>[0]) => {
+              visit(tree, ['heading'], function (node) {
                 if (!('depth' in node)) return;
 
                 if (node.depth === 1) {

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: { depth: number }) {
+              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: { depth: number }) {
+              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 () {