feat(pat-markdown): Soft-depend on pat-syntax-highlight.

Only highlight code blocks when the pattern is available.

Not hard-depending and importing pat-syntax-highlight fixes a problem
where only including pat-markup also included pat-syntax-highlight and
it's big highlight.js library.

This can reduce the generated bundle size significantly.

Author: thet

src/pat/markdown/markdown.js

@@ -29,20 +29,25 @@ class Pattern extends BasePattern {
     async render(text) {
         const marked = (await import("marked")).marked;
         const DOMPurify = (await import("dompurify")).default;
-        const SyntaxHighlight = (await import("../syntax-highlight/syntax-highlight")).default; // prettier-ignore
 
         const wrapper = document.createElement("div");
         const parsed = DOMPurify.sanitize(marked.parse(text));
         wrapper.innerHTML = parsed;
-        for (const item of wrapper.querySelectorAll("pre > code")) {
-            const pre = item.parentElement;
-            pre.classList.add("pat-syntax-highlight");
-            // If the code block language was set in a fenced code block,
-            // marked has already set the language as a class on the code tag.
-            // pat-syntax-highlight will understand this.
-            new SyntaxHighlight(pre);
-            await events.await_event(pre, "init.syntax-highlight.patterns");
+
+        // If pat-syntax-highlight is available, highlight code blocks.
+        const SyntaxHighlight = registry.patterns["syntax-highlight"];
+        if (SyntaxHighlight) {
+            for (const item of wrapper.querySelectorAll("pre > code")) {
+                const pre = item.parentElement;
+                pre.classList.add("pat-syntax-highlight");
+                // If the code block language was set in a fenced code block,
+                // marked has already set the language as a class on the code tag.
+                // pat-syntax-highlight will understand this.
+                new SyntaxHighlight(pre);
+                await events.await_event(pre, "init.syntax-highlight.patterns");
+            }
         }
+
         return $(wrapper);
     }
 

src/pat/markdown/markdown.test.js

@@ -170,6 +170,8 @@ describe("pat-markdown", function () {
 
     describe("Code blocks", function () {
         it("It correctly renders code blocks", async function () {
+            await import("../syntax-highlight/syntax-highlight");
+
             document.body.innerHTML = `
                 <main>
                     <div class="pat-markdown">
@@ -187,7 +189,6 @@ some content
 
             const instance = new Pattern(document.querySelector(".pat-markdown"));
             await events.await_pattern_init(instance);
-            await utils.timeout(1); // wait a tick for async to settle.
 
             expect(document.body.querySelector("main > div > h1").textContent).toBe("Title"); // prettier-ignore
             expect(document.body.querySelector("main > div > p").textContent).toBe("some content"); // prettier-ignore