Better error handling

src/packager/P4.svelte

@@ -2,6 +2,7 @@
   import ProjectPackager from './packager';
   import SelectProject from './SelectProject.svelte';
   import PackagerOptions from './PackagerOptions.svelte';
+  import {error} from './stores';
 
   let packager = new ProjectPackager();
   let projectData;
@@ -13,6 +14,14 @@
 
   $: if (projectData) {
     packager.vm = projectData.vm;
+  } else {
+    packager.vm = null;
+  }
+
+  $: if ($error) {
+    console.error($error);
+    alert($error);
+    $error = null;
   }
 </script>
 

src/packager/PackagerOptions.svelte

@@ -1,6 +1,7 @@
 <script>
   import ProjectPackager from './packager';
   import writablePersistentStore from './persistent-store';
+  import {error} from './stores';
 
   export let projectData;
   export let packager;
@@ -30,17 +31,21 @@
     url = URL.createObjectURL(result.blob);
   };
 
-  const pack = async () => {
+  const withErrorHandling = (fn) => () => fn().catch((e) => {
+    $error = e
+  });
+
+  const pack = withErrorHandling(async () => {
     await runPackager(packager.child());
     downloadURL(result.filename, url);
-  };
+  });
 
-  const preview = async () => {
+  const preview = withErrorHandling(async () => {
     const child = packager.child();
     child.options.target = 'html';
     await runPackager(child);
     window.open(url);
-  };
+  });
 </script>
 
 <style>
@@ -123,7 +128,7 @@
 </label>
 <label>
   <input type="radio" bind:group={$options.target} value="zip">
-  Zip
+  Zip (each asset gets separate file)
 </label>
 
 <div>

src/packager/SelectProject.svelte

@@ -1,5 +1,6 @@
 <script>
   import writablePersistentStore from './persistent-store';
+  import {error} from './stores';
 
   export let projectData = null
   export let progress;
@@ -7,7 +8,11 @@
   const projectId = writablePersistentStore('SelectProject.id', '1');
   let files = null;
 
-  const load = async () => {
+  const withErrorHandling = (fn) => () => fn().catch((e) => {
+    $error = e
+  });
+
+  const load = withErrorHandling(async () => {
     const [
       VirtualMachine,
       Storage
@@ -69,7 +74,7 @@
       await vm.loadProject(data);
     }
     projectData = newProjectData
-  };
+  });
 </script>
 
 <style>

src/packager/stores.js

@@ -0,0 +1,7 @@
+import {writable} from 'svelte/store';
+
+const error = writable(null);
+
+export {
+  error
+};