Refactor loader

- Switch to ESMs
- Make sure that two loader calls are isolated

ava.config.mjs

@@ -0,0 +1,3 @@
+export default {
+	files: ['test/**/*.mjs']
+};

package.json

@@ -2,12 +2,13 @@
   "name": "markdown-loader",
   "version": "7.0.0",
   "description": "markdown-loader for webpack",
-  "main": "index.js",
+  "main": "src/main.cjs",
+  "type": "module",
   "files": [
-    "index.js"
+    "src"
   ],
   "scripts": {
-    "test": "ava test/*.test.js"
+    "test": "ava"
   },
   "repository": {
     "type": "git",
@@ -26,13 +27,12 @@
   },
   "homepage": "https://github.com/peerigon/markdown-loader",
   "dependencies": {
-    "loader-utils": "^1.2.3",
     "marked": "^4.0.12"
   },
   "devDependencies": {
-    "ava": "^2.2.0",
-    "highlight.js": "^9.15.9",
-    "html-loader": "^1.3.0",
-    "webpack": "^4.38.0"
+    "ava": "^4.0.1",
+    "highlight.js": "^11.4.0",
+    "html-loader": "^3.1.0",
+    "webpack": "^5.67.0"
   }
 }

src/loader.js

@@ -0,0 +1,7 @@
+import {parse} from "marked";
+
+export function markdownLoader(markdown) {
+    const options = this.getOptions();
+
+    return parse(markdown, options);
+}

src/main.cjs

@@ -0,0 +1,9 @@
+const loaderImport = import("./loader.js");
+
+async function trampolin(...args) {
+    const {markdownLoader} = await loaderImport;
+
+    return markdownLoader.call(this, ...args);
+}
+
+module.exports = trampolin;

test/index.test.mjs

@@ -0,0 +1,107 @@
+import * as url from "url";
+import * as path from "path";
+import { createRequire } from "module";
+import test from "ava";
+import webpack from "webpack";
+import { Renderer } from "marked";
+
+const __dirname = path.dirname(url.fileURLToPath(import.meta.url));
+const require = createRequire(import.meta.url);
+
+async function createBundle({ fixture, output, options }) {
+    await new Promise((resolve, reject) => {
+        webpack(
+            {
+                entry: path.resolve(__dirname, "fixtures", fixture),
+                mode: "development",
+                module: {
+                    rules: [
+                        {
+                            test: /\.md$/,
+                            use: [
+                                {
+                                    loader: "html-loader",
+                                },
+                                {
+                                    loader: require.resolve("../src/main.cjs"),
+                                    options,
+                                },
+                            ],
+                        },
+                    ],
+                },
+                output: {
+                    library: {
+                        type: "commonjs2",
+                    },
+                    path: path.resolve(__dirname, "output"),
+                    filename: output,
+                },
+            },
+            function onCompilationFinished(error, stats) {
+                if (error) {
+                    return reject(error);
+                }
+                if (stats.hasErrors()) {
+                    return reject(stats.compilation.errors[0]);
+                }
+                if (stats.hasWarnings()) {
+                    return reject(stats.compilation.warnings[0]);
+                }
+                resolve();
+            }
+        );
+    });
+
+    const result = await import(`./output/${output}`);
+
+    // The result is wrapped in 2 default exports:
+    // - The html-loader creates an ESM with the string assigned to export default
+    // - The final bundle is a CommonJS module that re-exports the result from the html-loader
+    return result.default.default;
+}
+
+test("plain markdown", async (t) => {
+    const code = await createBundle({
+        fixture: "plain-markdown.md",
+        output: "plain-markdown.cjs",
+    });
+
+    t.snapshot(code);
+});
+
+test("with code", async (t) => {
+    const code = await createBundle({
+        fixture: "with-code.md",
+        output: "with-code.cjs",
+    });
+
+    t.snapshot(code);
+});
+
+test("with custom renderer", async (t) => {
+    class CustomRenderer extends Renderer {
+        text() {
+            return "CUSTOM RENDERER";
+        }
+    }
+
+    let code = await createBundle({
+        fixture: "plain-markdown.md",
+        output: "with-custom-renderer.cjs",
+        options: {
+            renderer: new CustomRenderer(),
+        },
+    });
+
+    t.assert(code.includes("CUSTOM RENDERER"));
+
+    // Make sure that the second call doesn't pick up custom renderer
+    // This would happen if we used setOptions(), see https://github.com/markedjs/marked/issues/907
+    code = await createBundle({
+        fixture: "plain-markdown.md",
+        output: "without-custom-renderer.cjs",
+    });
+
+    t.assert(code.includes("CUSTOM RENDERER") === false);
+});

test/snapshots/index.test.js.md → test/snapshots/index.test.mjs.md

@@ -1,8 +1,8 @@
-# Snapshot report for `test/index.test.js`
+# Snapshot report for `test/index.test.mjs`
 
-The actual snapshot is saved in `index.test.js.snap`.
+The actual snapshot is saved in `index.test.mjs.snap`.
 
-Generated by [AVA](https://ava.li).
+Generated by [AVA](https://avajs.dev).
 
 ## plain markdown
 
@@ -34,7 +34,7 @@ Generated by [AVA](https://ava.li).
     </ul>␊
     <h2 id="heading-2">heading 2</h2>␊
     <p><em>italic</em> is the new <strong>bold</strong></p>␊
-    <pre><code class="language-javascript"><span class="hljs-keyword">const</span> i = <span class="hljs-number">100</span>;␊
+    <pre><code class="language-javascript">const i = 100;␊
     </code></pre>␊
     <table>␊
     <thead>␊
@@ -49,3 +49,23 @@ Generated by [AVA](https://ava.li).
     </tr>␊
     </tbody></table>␊
     `
+
+## with custom highlighter
+
+> Snapshot 1
+
+    `<h1 id="heading-1">heading 1</h1>␊
+    <ul>␊
+    <li>buy pineapple</li>␊
+    </ul>␊
+    <h2 id="heading-2">heading 2</h2>␊
+    <p><em>italic</em> is the new <strong>bold</strong></p>␊
+    <table>␊
+    <thead>␊
+    <tr>␊
+    <th>name</th>␊
+    <th>type</th>␊
+    </tr>␊
+    </thead>␊
+    </table>␊
+    `