refactor: improve markdown loader

Author: ije

framework/react/htmlpage.ts

@@ -0,0 +1,48 @@
+/// <reference lib="dom" />
+
+import React, { useEffect, useRef, RefObject, PropsWithRef, HTMLAttributes } from 'https://esm.sh/react'
+import { redirect } from '../core/redirect.ts'
+
+type HTMLPageProps = PropsWithRef<HTMLAttributes<{}> & {
+  ref?: RefObject<HTMLDivElement>
+  html: string
+}>
+
+export default function HTMLPage({
+  ref: pRef,
+  html,
+  children,
+  dangerouslySetInnerHTML,
+  ...rest
+}: HTMLPageProps) {
+  const ref = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    const REF = pRef || ref
+    const anchors: HTMLAnchorElement[] = []
+    const onClick = (e: MouseEvent) => {
+      e.preventDefault()
+      if (e.currentTarget) {
+        redirect((e.currentTarget as HTMLAnchorElement).getAttribute('href')!)
+      }
+    }
+
+    if (REF.current) {
+      REF.current.querySelectorAll('a').forEach((a: HTMLAnchorElement) => {
+        const href = a.getAttribute('href')
+        if (href && !/^[a-z0-9]+:/i.test(href)) {
+          a.addEventListener('click', onClick, false)
+          anchors.push(a)
+        }
+      })
+    }
+
+    return () => anchors.forEach(a => a.removeEventListener('click', onClick))
+  }, [])
+
+  return React.createElement('div', {
+    ...rest,
+    ref: pRef || ref,
+    dangerouslySetInnerHTML: { __html: html }
+  })
+}

plugins/markdown.ts

@@ -10,7 +10,6 @@ export default (): LoaderPlugin => {
     name: 'markdown-loader',
     type: 'loader',
     test: /\.(md|markdown)$/i,
-    acceptHMR: true,
     asPage: true,
     pagePathResolve: (url) => {
       let path = util.trimPrefix(url.replace(/\.(md|markdown)$/i, ''), '/pages')
@@ -25,40 +24,21 @@ export default (): LoaderPlugin => {
     },
     transform: ({ content }) => {
       const { __content, ...meta } = safeLoadFront(decoder.decode(content))
-      const html = marked.parse(__content)
+      const props = {
+        id: util.isString(meta.id) ? meta.id : undefined,
+        className: util.isString(meta.id) ? meta.className : undefined,
+        style: util.isPlainObject(meta.style) ? meta.style : undefined,
+        html: marked.parse(__content)
+      }
 
       return {
         code: [
-          `import React, { useEffect, useRef } from "https://esm.sh/react";`,
-          `import { redirect } from "https://deno.land/x/aleph/mod.ts";`,
+          `import { createElement } from 'https://esm.sh/react'`,
+          `import HTMLPage from "https://deno.land/x/aleph/framework/react/htmlpage.ts";`,
           `export default function MarkdownPage() {`,
-          `  const ref = useRef(null);`,
-          ``,
-          `  useEffect(() => {`,
-          `    const anchors = [];`,
-          `    const onClick = e => {`,
-          `      e.preventDefault();`,
-          `      redirect(e.currentTarget.getAttribute("href"));`,
-          `    };`,
-          `    if (ref.current) {`,
-          `      ref.current.querySelectorAll("a").forEach(a => {`,
-          `        const href = a.getAttribute("href");`,
-          `        if (href && !/^[a-z0-9]+:/i.test(href)) {`,
-          `          a.addEventListener("click", onClick, false);`,
-          `          anchors.push(a);`,
-          `        }`,
-          `      });`,
-          `    }`,
-          `    return () => anchors.forEach(a => a.removeEventListener("click", onClick));`,
-          `  }, []);`,
-          ``,
-          `  return React.createElement("div", {`,
-          `    className: "markdown-page",`,
-          `    ref,`,
-          `    dangerouslySetInnerHTML: { __html: ${JSON.stringify(html)} }`,
-          `  });`,
+          `  return createElement(HTMLPage, ${JSON.stringify(props)})`,
           `}`,
-          `MarkdownPage.meta = ${JSON.stringify(meta, undefined, 2)};`,
+          `MarkdownPage.meta = ${JSON.stringify(meta)}`,
         ].join('\n')
       }
     }

plugins/markdown_test.ts

@@ -7,6 +7,10 @@ Deno.test('markdown loader', async () => {
     url: '/test.md',
     content: (new TextEncoder).encode([
       '---',
+      'id: mark-page-1',
+      'className: mark-page',
+      'style:',
+      '  color: "#333"',
       'url: https://alephjs.org',
       '---',
       '',
@@ -16,12 +20,9 @@ Deno.test('markdown loader', async () => {
   })
   assertEquals(loader.test.test('/test.md'), true)
   assertEquals(loader.test.test('/test.markdown'), true)
-  assertEquals(loader.acceptHMR, true)
   assertEquals(loader.asPage, true)
   assertEquals(loader.pagePathResolve!('/pages/docs/get-started.md'), { path: '/docs/get-started', isIndex: false })
   assertEquals(loader.pagePathResolve!('/pages/docs/index.md'), { path: '/docs', isIndex: true })
-  assertEquals(code.includes('{ __html: "<h1 id=\\"alephjs\\">Aleph.js</h1>\\n<p>The Full-stack Framework in Deno.</p>\\n" }'), true)
-  assertEquals(code.includes('MarkdownPage.meta = {\n  "url": "https://alephjs.org"\n}'), true)
+  assertEquals(code.includes('html: "<h1 id=\\"alephjs\\">Aleph.js</h1>\\n<p>The Full-stack Framework in Deno.</p>\\n"'), true)
+  assertEquals(code.includes('MarkdownPage.meta = {"id":"mark-page-1","className":"mark-page","style":{"color":"#333"},"url":"https://alephjs.org"}'), true)
 })
-
-