feat: use new zip.js module for backup (#929)

standardnotes · Mar 15, 2022 · 66c9b26 · 66c9b26
1 parent 8caf343
commit 66c9b26
Show file tree

Hide file tree

Showing 7 changed files with 46 additions and 5,414 deletions.
diff --git a/app/assets/javascripts/index.ts b/app/assets/javascripts/index.ts
@@ -4,11 +4,5 @@
 import '@reach/dialog/styles.css';
 import '../stylesheets/index.css.scss';
 
-// Vendor
-import '../../../vendor/assets/javascripts/zip/deflate';
-import '../../../vendor/assets/javascripts/zip/inflate';
-import '../../../vendor/assets/javascripts/zip/zip';
-import '../../../vendor/assets/javascripts/zip/z-worker';
-
 // entry point
 import './app';
diff --git a/app/assets/javascripts/services/archiveManager.ts b/app/assets/javascripts/services/archiveManager.ts
@@ -64,81 +64,54 @@ export class ArchiveManager {
     return string;
   }
 
-  private get zip() {
-    return (window as any).zip;
-  }
-
-  private async loadZip() {
-    if (this.zip) {
-      return;
-    }
-    const scriptTag = document.createElement('script');
-    scriptTag.src = '/assets/zip/zip.js';
-    scriptTag.async = false;
-    const headTag = document.getElementsByTagName('head')[0];
-    headTag.appendChild(scriptTag);
-    return new Promise<void>((resolve) => {
-      scriptTag.onload = () => {
-        this.zip.workerScriptsPath = 'assets/zip/';
-        resolve();
-      };
-    });
-  }
-
   private async downloadZippedDecryptedItems(data: BackupFile) {
-    await this.loadZip();
+    const zip = await import('@zip.js/zip.js');
+    const zipWriter = new zip.ZipWriter(new zip.BlobWriter('application/zip'));
     const items = data.items;
-    this.zip.createWriter(
-      new this.zip.BlobWriter('application/zip'),
-      async (zipWriter: any) => {
-        await new Promise((resolve) => {
-          const blob = new Blob([JSON.stringify(data, null, 2)], {
-            type: 'text/plain',
-          });
-          const fileName = zippableFileName(
-            'Standard Notes Backup and Import File'
-          );
-          zipWriter.add(fileName, new this.zip.BlobReader(blob), resolve);
-        });
-
-        let index = 0;
-        const nextFile = () => {
-          const item = items[index];
-          let name, contents;
-          if (item.content_type === ContentType.Note) {
-            const note = item as SNNote;
-            name = (note.content as PayloadContent).title;
-            contents = (note.content as PayloadContent).text;
-          } else {
-            name = item.content_type;
-            contents = JSON.stringify(item.content, null, 2);
-          }
-          if (!name) {
-            name = '';
-          }
-          const blob = new Blob([contents], { type: 'text/plain' });
-          const fileName =
-            `Items/${sanitizeFileName(item.content_type)}/` +
-            zippableFileName(name, `-${item.uuid.split('-')[0]}`);
-          zipWriter.add(fileName, new this.zip.BlobReader(blob), () => {
-            index++;
-            if (index < items.length) {
-              nextFile();
-            } else {
-              zipWriter.close((blob: any) => {
-                this.downloadData(
-                  blob,
-                  `Standard Notes Backup - ${this.formattedDate()}.zip`
-                );
-                zipWriter = null;
-              });
-            }
-          });
-        };
-        nextFile();
-      },
-      onerror
-    );
+
+    const blob = new Blob([JSON.stringify(data, null, 2)], {
+      type: 'text/plain',
+    });
+    const fileName = zippableFileName('Standard Notes Backup and Import File');
+    await zipWriter.add(fileName, new zip.BlobReader(blob));
+
+    let index = 0;
+    const nextFile = async () => {
+      const item = items[index];
+      let name, contents;
+
+      if (item.content_type === ContentType.Note) {
+        const note = item as SNNote;
+        name = (note.content as PayloadContent).title;
+        contents = (note.content as PayloadContent).text;
+      } else {
+        name = item.content_type;
+        contents = JSON.stringify(item.content, null, 2);
+      }
+
+      if (!name) {
+        name = '';
+      }
+
+      const blob = new Blob([contents], { type: 'text/plain' });
+      const fileName =
+        `Items/${sanitizeFileName(item.content_type)}/` +
+        zippableFileName(name, `-${item.uuid.split('-')[0]}`);
+      await zipWriter.add(fileName, new zip.BlobReader(blob));
+
+      index++;
+      if (index < items.length) {
+        await nextFile();
+      } else {
+        const finalBlob = await zipWriter.close();
+        this.downloadData(
+          finalBlob,
+          `Standard Notes Backup - ${this.formattedDate()}.zip`
+        );
+      }
+    };
+
+    await nextFile();
   }
 
   async zipData(data: ZippableData): Promise<Blob> {

diff --git a/config/initializers/assets.rb b/config/initializers/assets.rb
@@ -2,7 +2,6 @@
 Rails.application.config.assets.version = '1.0'
 
 Rails.application.config.assets.paths << Rails.root.join('vendor', 'assets')
-Rails.application.config.assets.precompile += %w( zip/zip.js zip/z-worker.js zip/inflate.js zip/deflate.js )
 
 # Recursively add all files and folders in 'dist'.
 Rails.application.config.assets.paths << Rails.root.join('dist')