Merge pull request #1145 from PrefectHQ/nicholas/enhancement-markdown…

…-renderer-memory-2024-03-12

Enhancement: `PMarkdownRenderer` memory update

src/components/MarkdownRenderer/PMarkdownRenderer.vue

@@ -3,36 +3,20 @@
 </template>
 
 <script lang="ts" setup>
-  import { marked } from 'marked'
-  import { computed, ref, watch } from 'vue'
+  import { computed } from 'vue'
   import { getRootVNode } from '@/components/MarkdownRenderer/parser'
-  import MarkdownTokenWorker from '@/components/MarkdownRenderer/worker?worker&inline'
-  import type { ParseMessagePayload } from '@/types/markdownRenderer'
+  import { useMarkdownRenderer } from '@/compositions/useMarkdownRenderer'
 
   const props = defineProps<{
     text: string,
     linkBaseUrl?: string,
   }>()
 
-  const tokens = ref<marked.TokensList | []>([])
+  const { tokens } = useMarkdownRenderer(() => props.text)
 
   const renderRoot = computed(() => {
     return getRootVNode(tokens.value, { baseLinkUrl: props.linkBaseUrl })
   })
-
-  const handleWorkerMessage = (message: ParseMessagePayload): void => {
-    tokens.value = message.tokens
-  }
-
-  const worker = new MarkdownTokenWorker()
-
-  worker.onmessage = (event: MessageEvent<ParseMessagePayload>) => handleWorkerMessage(event.data)
-
-  watch(() => props.text, (text) => {
-    if (text) {
-      worker.postMessage({ text })
-    }
-  }, { immediate: true })
 </script>
 
 <style>

src/components/MarkdownRenderer/worker.ts

@@ -11,9 +11,9 @@ const parse = (text: string): marked.TokensList => {
 }
 
 const handleMessage = (message: MessageEvent<MarkdownMessagePayload>): void => {
-  const { text } = message.data
+  const { id, text } = message.data
   const tokens = parse(text)
-  const response: ParseMessagePayload = { tokens }
+  const response: ParseMessagePayload = { id, tokens }
   self.postMessage(response)
 }
 

src/compositions/index.ts

@@ -3,6 +3,7 @@ export * from './position'
 export * from './useColorTheme'
 export * from './useDrawer'
 export * from './useGlobalEventListener'
+export * from './useMarkdownRenderer'
 export * from './useModal'
 export * from './useOffsetStickyRootMargin'
 export * from './usePopOverGroup'

src/compositions/useMarkdownRenderer.ts

@@ -0,0 +1,38 @@
+import { marked } from 'marked'
+import { computed, getCurrentScope, MaybeRefOrGetter, onScopeDispose, onUnmounted, Ref, ref, toRef, toValue, watch, watchEffect } from 'vue'
+import MarkdownTokenWorker from '@/components/MarkdownRenderer/worker?worker&inline'
+import { ParseMessagePayload } from '@/types/markdownRenderer'
+import { randomId } from '@/utilities'
+
+export type Tokens = marked.TokensList | []
+export type MarkdownRendererCallback = (tokens: Tokens) => void
+export type UseMarkdownRenderer = {
+  tokens: Ref<Tokens>,
+}
+
+const callbacks = new Map<string, MarkdownRendererCallback>()
+const worker = new MarkdownTokenWorker()
+
+worker.onmessage = (message: MessageEvent<ParseMessagePayload>) => {
+  const { id, tokens } = message.data
+  const callback = callbacks.get(id)
+
+  if (callback) {
+    callback(tokens)
+  }
+}
+
+export function useMarkdownRenderer(text: MaybeRefOrGetter): UseMarkdownRenderer {
+  const id = randomId()
+  const tokensRef = ref<Tokens>([])
+
+  const rendererCallback = (tokens: Tokens): void => {
+    tokensRef.value = tokens
+  }
+
+  callbacks.set(id, rendererCallback)
+  watchEffect(() => worker.postMessage({ id, text: toValue(text) }))
+  onScopeDispose(() => callbacks.delete(id))
+
+  return { tokens: tokensRef }
+}

src/types/markdownRenderer.ts

@@ -5,10 +5,12 @@ export type Token = ReturnType<typeof marked.lexer>[number]
 export type VNodeChildren = VNode<RendererNode, RendererElement, Record<string, unknown>>[]
 
 export type MarkdownMessagePayload = {
+  id: string,
   text: string,
 }
 
 export type ParseMessagePayload = {
+  id: string,
   tokens: marked.TokensList,
 }