Use new package for zip

midudev · Feb 5, 2024 · a0d5a95 · a0d5a95
1 parent 8c440be
commit a0d5a95
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 39 deletions.
diff --git a/index.html b/index.html
@@ -255,6 +255,21 @@
               </div>
             </div>
 
+            <div class="settings-item">
+              <strong>
+                <span class="settings-type">Workbench:</span>
+                Color theme
+              </strong>
+              <div class="select">
+                <select name="theme">
+                  <option value="vs-dark">Dark</option>
+                  <option value="vs">Light</option>
+                  <option value="hc-black">High Contrast Dark</option>
+                  <option value="hc-light">High Contrast Light</option>
+                </select>
+              </div>
+            </div>
+
             <div class="settings-item">
               <strong>
                 <span class="settings-type">Editor:</span>
@@ -285,21 +300,6 @@
               </div>
             </div>
 
-            <div class="settings-item">
-              <strong>
-                <span class="settings-type">Workbench:</span>
-                Color theme
-              </strong>
-              <div class="select">
-                <select name="theme">
-                  <option value="vs-dark">Dark</option>
-                  <option value="vs">Light</option>
-                  <option value="hc-black">High Contrast Dark</option>
-                  <option value="hc-light">High Contrast Light</option>
-                </select>
-              </div>
-            </div>
-
             <div class="settings-item">
               <strong>
                 <span class="settings-type">Workbench:</span>

diff --git a/package.json b/package.json
@@ -19,10 +19,10 @@
     "vite": "5.0.12"
   },
   "dependencies": {
+    "client-zip": "2.4.4",
     "emmet-monaco-es": "5.3.0",
     "escape-html": "1.0.3",
     "js-base64": "3.7.6",
-    "jszip": "3.10.1",
     "lit": "3.1.2",
     "monaco-editor": "0.45.0",
     "split-grid": "1.0.11",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/download.js b/src/download.js
@@ -1,7 +1,7 @@
 import { createHtml } from './utils/createHtml.js'
 
 const getZip = () =>
-  import('jszip').then(({ default: JSZip }) => new JSZip())
+  import('client-zip').then(({ downloadZip }) => downloadZip)
 
 const DEFAULT_ZIP_FILE_NAME = 'codi.link'
 
@@ -18,17 +18,14 @@ export async function downloadUserCode ({
     ? createZipWithSingleFile
     : createZipWithMultipleFiles
 
-  const zip = await createZip({ htmlContent, cssContent, jsContent })
-  return generateZip({ zip, zipFileName })
+  const zipBlob = await createZip({ htmlContent, cssContent, jsContent })
+  return generateZip({ zipBlob, zipFileName })
 }
 
 async function createZipWithSingleFile ({ htmlContent, cssContent, jsContent }) {
   const zip = await getZip()
   const indexHTML = createHtml({ css: cssContent, html: htmlContent, js: jsContent })
-
-  zip.file('index.html', indexHTML)
-
-  return zip
+  return await zip({ name: 'index.html', input: indexHTML }).blob()
 }
 
 async function createZipWithMultipleFiles ({ htmlContent, cssContent, jsContent }) {
@@ -45,20 +42,18 @@ async function createZipWithMultipleFiles ({ htmlContent, cssContent, jsContent
   </body>
 </html>`
 
-  zip.file('style.css', cssContent)
-  zip.file('script.js', jsContent)
-  zip.file('index.html', indexHtml)
-
-  return zip
+  return await zip([
+    { name: 'style.css', input: cssContent },
+    { name: 'script.js', input: jsContent },
+    { name: 'index.html', input: indexHtml }
+  ]).blob()
 }
 
-function generateZip ({ zip, zipFileName }) {
-  return zip.generateAsync({ type: 'blob' }).then((blobData) => {
-    const zipBlob = new window.Blob([blobData])
-    const element = window.document.createElement('a')
-
-    element.href = window.URL.createObjectURL(zipBlob)
-    element.download = `${zipFileName}.zip`
-    element.click()
-  })
+function generateZip ({ zipBlob, zipFileName }) {
+  console.log({ zipBlob, zipFileName })
+  const element = window.document.createElement('a')
+  element.href = window.URL.createObjectURL(zipBlob)
+  element.download = `${zipFileName}.zip`
+  element.click()
+  element.remove()
 }
diff --git a/src/state.js b/src/state.js
@@ -11,8 +11,8 @@ const useStore = createStore(
         set({ [key]: value })
       }
     }),
-    { name: 'appInitialState', getStorage: () => window.localStorage }
+    { name: 'appInitialState' }
   )
 )
 
-export const { getState, setState, subscribe, destroy } = useStore
+export const { getState, setState, subscribe } = useStore