diff --git a/packages/ember-repl/addon/src/compile/formats/markdown.ts b/packages/ember-repl/addon/src/compile/formats/markdown.ts index 1cae67d94..68b6065da 100644 --- a/packages/ember-repl/addon/src/compile/formats/markdown.ts +++ b/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])); }); } diff --git a/packages/ember-repl/addon/src/compile/types.ts b/packages/ember-repl/addon/src/compile/types.ts index e3c930e64..afbccc790 100644 --- a/packages/ember-repl/addon/src/compile/types.ts +++ b/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['use']>[0]; +export type UnifiedPlugin = Pluggable; export interface CompileResult { component?: ComponentLike; diff --git a/packages/ember-repl/test-app/tests/rendering/markdown-test.gts b/packages/ember-repl/test-app/tests/rendering/markdown-test.gts index 361957ec0..3e1fcab15 100644 --- a/packages/ember-repl/test-app/tests/rendering/markdown-test.gts +++ b/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['use']>[0]; +export type UnifiedPlugin = PluggableList[0]; type Build = (plugin?: UnifiedPlugin) => Promise; 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[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[0]) => { + visit(tree, ['heading'], function (node) { if (!('depth' in node)) return; if (node.depth === 1) { diff --git a/packages/ember-repl/test-app/tests/unit/markdown-test.ts b/packages/ember-repl/test-app/tests/unit/markdown-test.ts index fd2bec38b..d23e3e65e 100644 --- a/packages/ember-repl/test-app/tests/unit/markdown-test.ts +++ b/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, `

Title

`); + + 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, `

Title

`); + + assert.deepEqual(result.blocks, []); + }); }); module('hbs', function () {