tree-shake yaml, marked, and hljs from bundle

projects/frontend/src/main.ts

@@ -1,7 +1,8 @@
 import { ViteSSG } from 'vite-ssg'
 import { createPinia } from 'pinia'
-import hljs from 'highlight.js'
-import { marked } from 'marked'
+const hljs = import('highlight.js')
+import type { HLJSApi } from 'highlight.js'
+const marked = import('marked')
 import { markedHighlight } from 'marked-highlight'
 
 import type { RoutedWindow, SiteGlobals } from '@goldenwere/mackenzii-types'
@@ -16,16 +17,6 @@ import globals from 'content/config.json'
 
 declare const window: RoutedWindow
 
-marked
-.use(headingSectionsExtension() as any)
-.use(markedHighlight({
-  langPrefix: 'hljs language-',
-  highlight(code, lang) {
-    const language = hljs.getLanguage(lang) ? lang : 'plaintext'
-    return hljs.highlight(code, { language }).value
-  },
-}))
-
 export const createApp = ViteSSG(
   // the root component
   main,
@@ -33,12 +24,25 @@ export const createApp = ViteSSG(
   { routes: createRoutes(globals as SiteGlobals) },
   // function to have custom setups
   async ({ app, router, routes, isClient, initialState }) => {
+    const hljsResolved: HLJSApi = await hljs as any
+    const markedResolved = await marked
+    markedResolved
+    .use(headingSectionsExtension() as any)
+    .use(markedHighlight({
+      langPrefix: 'hljs language-',
+      highlight(code, lang) {
+        const language = hljsResolved.getLanguage(lang) ? lang : 'plaintext'
+        return hljsResolved.highlight(code, { language }).value
+      },
+    }))
+
     if (isClient) {
       import('@goldenwere/mackenzii-embeds').then(({ registerLinkEmbed }) => {
         registerLinkEmbed()
       })
       window.router = router
     }
+
     app.use(createPinia())
     initializeRouteStore(routes, globals as SiteGlobals)
   },

projects/frontend/src/utilities/fetch.ts

@@ -1,11 +1,12 @@
 import DOMPurify from 'dompurify'
-import { marked } from 'marked'
-import yaml from 'js-yaml'
+const yaml = import('js-yaml')
+
 import type {
   ListWithEntries,
   ResolvedListEntries,
 } from '@goldenwere/mackenzii-types'
 import { useRouteStore } from 'src/routes'
+import { parseMarkdown } from './parse'
 
 /**
  * Config used for DOMPurify.
@@ -115,7 +116,7 @@ export const fetchAndReturnText = async (path: string) => {
  */
 export const fetchAndParseYaml = async <T>(path: string) => {
   const text = await fetchAndReturnText(path)
-  return yaml.load(text) as T // do not catch exceptions
+  return (await yaml).load(text) as T // do not catch exceptions
 }
 
 /**
@@ -167,7 +168,7 @@ export const fetchAndParseMarkdown = async (path: string) => {
     return existing
   } else {
     const document = await fetchAndReturnText(path)
-    const parsed = marked.parse(document)
+    const parsed = parseMarkdown(document)
     store.cacheFile(path, parsed)
     return parsed
   }

projects/frontend/src/utilities/parse.ts

@@ -1,3 +1,5 @@
+const marked = import('marked')
+
 import type { DateRange } from '@goldenwere/mackenzii-types'
 
 /**
@@ -19,3 +21,12 @@ export const getFormattedDate = (date: DateRange | string | number): string => {
     return new Date(num).toLocaleDateString()
   }
 }
+
+/**
+ * Parses the given markdown to HTML
+ * @param md the markdown string to parse
+ * @returns the parsed HTML string
+ */
+export const parseMarkdown = async (md: string) => {
+  return (await marked).parse(md)
+}