From 9abf179d6558c2c3efffce01c582a5abcc21ea6a Mon Sep 17 00:00:00 2001
From: Nicola Clark <nicola@slottedspoon.dev>
Date: Thu, 17 Oct 2024 11:09:38 -0500
Subject: [PATCH] refactor preview logic out of component

---
 src/lib/components/preview.svelte | 28 ++--------------------------
 src/lib/render-preview.ts         | 28 ++++++++++++++++++++++++++++
 2 files changed, 30 insertions(+), 26 deletions(-)
 create mode 100644 src/lib/render-preview.ts

diff --git a/src/lib/components/preview.svelte b/src/lib/components/preview.svelte
index 6b3984d..392da4e 100644
--- a/src/lib/components/preview.svelte
+++ b/src/lib/components/preview.svelte
@@ -1,12 +1,6 @@
 <script lang="ts">
-  import rehypeDocument from 'rehype-document';
-  import rehypeSanitize, { defaultSchema } from 'rehype-sanitize';
-  import rehypeStringify from 'rehype-stringify';
-  import remarkParse from 'remark-parse';
-  import remarkRehype from 'remark-rehype';
-  import { unified } from 'unified';
-
   import { pane } from '$lib/stores/nav.js';
+  import renderPreview from '$lib/render-preview';
 
   interface Props {
     mobile?: boolean;
@@ -18,25 +12,7 @@
 
   let hidden: boolean = $derived(mobile ? $pane !== 'preview' : true);
 
-  let output: Promise<string> = $derived.by(async () => {
-    let allowedTags: string[] = ['body', 'head', 'html', 'style'];
-    if (defaultSchema.tagNames) {
-      allowedTags = [...defaultSchema.tagNames, ...allowedTags];
-    }
-    return String(
-      await unified()
-        .use(remarkParse)
-        .use(remarkRehype)
-        .use(rehypeDocument, { style: stylesheet })
-        .use(rehypeSanitize, {
-          ...defaultSchema,
-          allowDoctypes: true,
-          tagNames: allowedTags,
-        })
-        .use(rehypeStringify)
-        .process(markdown),
-    );
-  });
+  let output: Promise<string> = $derived.by(() => renderPreview(markdown, stylesheet));
 </script>
 
 <main class:hidden class:mobile data-testid="preview-pane">
diff --git a/src/lib/render-preview.ts b/src/lib/render-preview.ts
new file mode 100644
index 0000000..62ca291
--- /dev/null
+++ b/src/lib/render-preview.ts
@@ -0,0 +1,28 @@
+import rehypeDocument from 'rehype-document';
+import rehypeSanitize, { defaultSchema } from 'rehype-sanitize';
+import rehypeStringify from 'rehype-stringify';
+import remarkParse from 'remark-parse';
+import remarkRehype from 'remark-rehype';
+import { unified } from 'unified';
+
+const renderPreview = async (markdown: string, stylesheet: string): Promise<string> => {
+  let allowedTags: string[] = ['body', 'head', 'html', 'style'];
+  if (defaultSchema.tagNames) {
+    allowedTags = [...defaultSchema.tagNames, ...allowedTags];
+  }
+  return String(
+    await unified()
+      .use(remarkParse)
+      .use(remarkRehype)
+      .use(rehypeDocument, { style: stylesheet })
+      .use(rehypeSanitize, {
+        ...defaultSchema,
+        allowDoctypes: true,
+        tagNames: allowedTags,
+      })
+      .use(rehypeStringify)
+      .process(markdown),
+  );
+};
+
+export default renderPreview;