From 3de5e9a711b976a0345d04c549dc8648ef77a7df Mon Sep 17 00:00:00 2001
From: Zoey Kaiser <zoeykaiser8@gmail.com>
Date: Mon, 4 Mar 2024 12:55:21 +0100
Subject: [PATCH] began working on improving client side PDF export

---
 playground/components/TestStage.vue |  7 +++++++
 playground/pages/test.vue           | 23 +++++++++++++++++++++++
 src/module.ts                       |  9 ++++++++-
 src/runtime/components/PDFPage.vue  |  6 ++++++
 4 files changed, 44 insertions(+), 1 deletion(-)
 create mode 100644 playground/components/TestStage.vue
 create mode 100644 playground/pages/test.vue
 create mode 100644 src/runtime/components/PDFPage.vue

diff --git a/playground/components/TestStage.vue b/playground/components/TestStage.vue
new file mode 100644
index 0000000..eb133ae
--- /dev/null
+++ b/playground/components/TestStage.vue
@@ -0,0 +1,7 @@
+<template>
+  <PDFPage>
+    <h1>
+      Test
+    </h1>
+  </PDFPage>
+</template>
diff --git a/playground/pages/test.vue b/playground/pages/test.vue
new file mode 100644
index 0000000..e85dc9f
--- /dev/null
+++ b/playground/pages/test.vue
@@ -0,0 +1,23 @@
+<script lang="ts" setup>
+import { exportToPDF } from '#imports'
+
+const pdfSection = ref<HTMLElement | null>(null)
+</script>
+
+<template>
+  <div>
+    <div>
+      Export The page:
+      <button
+        style="border-radius: 0; font-size: 20px; cursor: pointer"
+        @click="exportToPDF('pdf_export.pdf', pdfSection as HTMLElement, undefined, {html2canvas: {scale: 0.7, useCORS: true}})"
+      >
+        Generate normal PDF
+      </button>
+    </div>
+    <hr>
+    <div ref="pdfSection">
+      <TestStage />
+    </div>
+  </div>
+</template>
diff --git a/src/module.ts b/src/module.ts
index 8f97289..bff8049 100644
--- a/src/module.ts
+++ b/src/module.ts
@@ -1,4 +1,4 @@
-import { defineNuxtModule, createResolver, addImportsDir } from '@nuxt/kit'
+import { defineNuxtModule, createResolver, addImportsDir, addComponent } from '@nuxt/kit'
 import { defu } from 'defu'
 import type { ModuleOptions } from './runtime/types'
 
@@ -48,5 +48,12 @@ export default defineNuxtModule<ModuleOptions>({
     // Step 2: Inject Client side composables to create pdfs from vue components
     const composables = resolver.resolve('./runtime/composables')
     addImportsDir(composables)
+
+    // Step 3: Inject PDF Components
+    addComponent({
+      name: 'PDFPage',
+      export: 'PDFPage',
+      filePath: resolver.resolve('runtime/components/PDFPage.vue')
+    })
   }
 })
diff --git a/src/runtime/components/PDFPage.vue b/src/runtime/components/PDFPage.vue
new file mode 100644
index 0000000..be8944e
--- /dev/null
+++ b/src/runtime/components/PDFPage.vue
@@ -0,0 +1,6 @@
+<template>
+  <div>
+    <h1>Test</h1>
+    <slot />
+  </div>
+</template>