feat: added export options (zip or self-contained page) on the menubar

henryhale · henryhale · commit da5fc279bf47 · 2025-12-01T16:46:46.000+03:00
diff --git a/package.json b/package.json
@@ -34,6 +34,7 @@
     "@codemirror/view": "^6.36.1",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "jszip": "^3.10.1",
     "lucide-vue-next": "^0.469.0",
     "pinia": "^2.3.0",
     "radix-vue": "^1.9.11",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/source/components/AppPreview.vue b/source/components/AppPreview.vue
@@ -1,13 +1,14 @@
 <script setup>
 import { computed, ref, watchEffect } from 'vue'
 import { useAppStore } from '@/store'
+import { generatePageContent } from '@/helpers/code'
 
 const store = useAppStore()
 
 const iframe = ref()
 
 const content = computed(() => {
-	return `<html><head><style type="text/css">${store.code.css}</style></head><body>${store.code.html}<script type="module">${store.code.js}</` + `script></body></html>`
+	return generatePageContent(store.code)
 })
 
 let tid, objectURL;
diff --git a/source/components/BaseHeader.vue b/source/components/BaseHeader.vue
@@ -17,6 +17,7 @@ import { ArrowUpRightIcon, PanelLeftIcon, PanelRightIcon, Columns2Icon, Rows2Ico
 import { useAppStore } from '@/store'
 import { useFullscreen } from '@/helpers/fullscreen'
 import { onMounted, onBeforeUnmount } from 'vue'
+import {exportAsPage, exportAsZip} from '@/helpers/code'
 
 const fullscreen = useFullscreen()
 const store = useAppStore()
@@ -25,6 +26,8 @@ const switchView = (v) => store.layout = v
 const newTab = () => window.open(window.location.href)
 const closeTab = () => window.close()
 const reloadTab = () => window.location.reload()
+const downloadAsPage = () => exportAsPage(store.code) 
+const downloadAsZip = () => exportAsZip(store.code) 
 
 function newTabHandler(ev) {
 	if (ev.key?.toLowerCase() === 'n' && ev.ctrlKey && ev.altKey) {
@@ -52,6 +55,13 @@ onBeforeUnmount(() => {
 					<MenubarItem @click="store.saveSession()">
 						Save <MenubarShortcut>Ctrl+S</MenubarShortcut>
 					</MenubarItem>
+					<MenubarSub>
+						<MenubarSubTrigger>Export As</MenubarSubTrigger>
+						<MenubarSubContent>
+							<MenubarItem @click="downloadAsPage()">Single page (.html)</MenubarItem>
+							<MenubarItem @click="downloadAsZip()">Zip (.zip)</MenubarItem>
+						</MenubarSubContent>
+					</MenubarSub>
 					<MenubarSeparator />
 					<MenubarItem @click="newTab()">
 						New Window <MenubarShortcut>Ctrl+Alt+N</MenubarShortcut>
diff --git a/source/helpers/code.js b/source/helpers/code.js
@@ -0,0 +1,44 @@
+import JSZip from "jszip";
+
+export function generatePageContent({html, css, js}) {
+    return `<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style type="text/css">${css}</style></head><body>${html}<script type="module">${js}</` + `script></body></html>`
+}
+
+function downloadFile(blob, zip = false) {
+    const link = document.createElement("a");
+    const hash = new Date().getTime().toString(16)
+    link.href = URL.createObjectURL(blob);
+    link.download = `project-${hash}.${zip ? 'zip' : 'html'}`;
+    link.click();
+}
+
+export function exportAsPage({ html = '', css = '', js = '' }) {
+    const page = generatePageContent({html, css, js})
+    downloadFile(new Blob([page], { type: 'text/html'}), false)
+}
+
+export function exportAsZip({ html = '', css = '', js = '' }) {
+    const zip = new JSZip();
+
+    zip.file("index.html", 
+        '<!DOCTYPE html>' +
+        '<html lang="en">' +
+        '<head>' +
+        '    <meta charset="UTF-8">' +
+        '    <meta name="viewport" content="width=device-width, initial-scale=1.0">' + 
+        '    <title>Document</title>' +
+        '    <link rel="stylesheet" href="./style.css">' +
+        '</head>' +
+        '<body>' +
+            html +
+        '    <script src="./main.js"></script>' +
+        // '    <script type="module" src="./main.js"></script>' +
+        '</body>' +
+        '</html>');
+    zip.file("style.css", css);
+    zip.file("main.js", js);
+
+    zip.generateAsync({ type: "blob" }).then(function (content) {
+        downloadFile(content, true)
+    });
+}
