update to svelte 3

assets/settings.js

@@ -162,7 +162,7 @@ import {known_load, known_save} from './known_instances.js'
         if(viewer.last_delete){
             viewer.last_delete = new Date(viewer.last_delete);
         }
-        banner.set(viewer);
+        banner.$set(viewer);
     }
 
     let viewer_from_dom = JSON.parse(document.querySelector('script[data-viewer]').textContent)
@@ -175,7 +175,8 @@ import {known_load, known_save} from './known_instances.js'
     }
     set_viewer_timeout();
 
-    banner.on('toggle', enabled => {
+    banner.$on('toggle', event => {
+        let enabled = event.detail;
         send_settings({policy_enabled: enabled}).then(fetch_viewer).then(update_viewer);
         // TODO show error or spinner if it takes over a second
     })

components/ArchiveForm.html

@@ -11,12 +11,14 @@
         </div>
     {/if}
     <input type="file" name="file" accept="application/zip,.zip"
-        on:change="take_file(this.files)">
+        on:change={take_file(this.files)}>
     <input type="submit" value="Upload">
     <input type='hidden' name='csrf-token' value={csrf_token}>
 </form>
 
 <script>
+export let csrf_token, action;
+
 function get_file_size(file_list){
     /* returns size of selected file given an <input type="file">
         or 0 if no file is selected */
@@ -27,23 +29,10 @@ function get_file_size(file_list){
     return size;
 }
 
-
+function take_file(file_list){
-export default {
+    file_size: get_file_size(file_list);
-    data(){
-        return { file_size: 0 }
-    },
-
-    oncreate(){
-    },
-
-    methods: {
-        take_file(file_list){
-            this.set({file_size: get_file_size(file_list)});
-        },
-    },
-
-    computed: {
-        file_too_big: ({file_size}) => file_size > 10000000, // 10 MB
-    },
 }
+
+let file_size = 0;
+$: file_too_big = file_size > 10000000; // 10 MB
 </script>

components/Banner.html

@@ -1,6 +1,6 @@
 <div class='banner {policy_enabled?'enabled':'disabled'}'>
     <div class='btn-group right'>
-        <button class='btn {policy_enabled?"secondary":"primary"}' on:click='toggle(policy_enabled)'>{policy_enabled?'Disable':'Enable'}</button>
+        <button class='btn {policy_enabled?"secondary":"primary"}' on:click={toggle}>{policy_enabled?'Disable':'Enable'}</button>
     </div>
     <div>
         Forget is currently
@@ -12,12 +12,13 @@
         on your account.
     </div>
     <div class='timers'>
-        <span class='last-delete {(!last_delete)?'hidden':''}' title={last_delete}>
+        <span class='last-delete' class:hidden={!last_delete} title={last_delete}>
         {#if last_delete }
             Last delete {rel_past(now - last_delete)}.
         {/if }
         </span>
-        <span class='next-delete {(!policy_enabled || !next_delete || !eligible_for_delete_estimate)?'hidden':''}' title={next_delete}>
+        <span class='next-delete'
+              class:hidden={!policy_enabled || !next_delete || !eligible_for_delete_estimate} title={next_delete}>
             Next delete {rel_future(next_delete - now)}.
         </span>
     </div>
@@ -47,6 +48,7 @@
 
 <script>
 function absmod(n, x){
+    // it's like modulo but never negative
     n = n % x;
     if(n < 0){
         n += x
@@ -61,6 +63,7 @@ function s(n){
     return '';
 }
 function rel(millis){
+    // returns human-readable duration from duration in millis
     let secs = Math.round(millis/1000)
     if(secs <= 120){
         return `${secs} seconds`;
@@ -81,58 +84,50 @@ function rel(millis){
     return `${days} days`;
 }
 
-export default {
+function rel_future(millis){
-    data(){
+    // returns relative time from timestamp, assuming time is in the future
-        return {
+    if(millis < 2000){
-            policy_enabled: false,
+        let secs = Math.floor(millis/1000)
-            next_delete: null,
+        let ndots = absmod(-secs, 3);
-            last_delete: null,
+        let out = 'anytime now';
-            now: +(new Date()),
+        for(; ndots > 0; ndots--){
+            out += '.';
         }
-    },
+        return out;
+    }
+    return `in ${rel(millis)}`;
+}
 
-    helpers: {
+function rel_past(millis){
-        rel_future(millis){
+    // returns relative time from timestamp, assuming time is in the past
-            if(millis < 2000){
+    if(millis < 2000){
-                let secs = Math.floor(millis/1000)
+        return 'just now';
-                let ndots = absmod(-secs, 3);
+    }
-                let out = 'anytime now';
+    return `${rel(millis)} ago`;
-                for(; ndots > 0; ndots--){
+}
-                    out += '.';
-                }
-                return out;
-            }
-            return `in ${rel(millis)}`;
-        },
-        rel_past(millis){
-            if(millis < 2000){
-                return 'just now';
-            }
-            return `${rel(millis)} ago`;
-        },
-    },
 
-    methods: {
+import { onDestroy, createEventDispatcher } from 'svelte';
-        toggle(policy_enabled){
-            policy_enabled = !policy_enabled;
-            let obj = {policy_enabled}
-            if(policy_enabled){
-                obj.next_delete = null;
-            }
-            this.set(obj);
-            this.fire('toggle', policy_enabled);
-        }
-    },
 
-    oncreate () {
+const dispatch = createEventDispatcher();
-      this.interval = setInterval( () => {
-        this.set({ now: +(new Date()) });
-      }, 1000 );
-    },
 
-    ondestroy () {
+function toggle(){
-      clearInterval( this.interval );
+    console.log(policy_enabled);
-    },
+    policy_enabled = !policy_enabled;
+    if(policy_enabled){
+        next_delete = null;
+    }
+    dispatch('toggle', policy_enabled);
+}
 
-};
+
+export let next_delete, last_delete, eligible_for_delete_estimate;
+export let policy_enabled = false;
+
+let now = +(new Date());
+
+let interval = setInterval(() =>
+    now = +(new Date())
+, 1000 );
+
+onDestroy(()=> clearInterval(interval));
 </script>

package-lock.json

@@ -140,6 +140,12 @@
         }
       }
     },
+    "builtin-modules": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/builtin-modules/-/builtin-modules-2.0.0.tgz",
+      "integrity": "sha512-3U5kUA5VPsRUA3nofm/BXX7GVHKfxz0hOBAPxXrIvHzlDRkQVqEn6yi8QJegxl4LzOHLdvb7XF5dVawa/VVYBg==",
+      "dev": true
+    },
     "cache-base": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/cache-base/-/cache-base-1.0.1.tgz",
@@ -532,6 +538,12 @@
       "integrity": "sha1-YrEQ4omkcUGOPsNqYX1HLjAd/Ik=",
       "dev": true
     },
+    "is-module": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-module/-/is-module-1.0.0.tgz",
+      "integrity": "sha1-Mlj7afeMFNW4FdZkM2tM/7ZEFZE=",
+      "dev": true
+    },
     "is-number": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/is-number/-/is-number-3.0.0.tgz",
@@ -722,6 +734,12 @@
       "integrity": "sha1-s2PlXoAGym/iF4TS2yK9FdeRfxQ=",
       "dev": true
     },
+    "path-parse": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.6.tgz",
+      "integrity": "sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw==",
+      "dev": true
+    },
     "posix-character-classes": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/posix-character-classes/-/posix-character-classes-0.1.1.tgz",
@@ -756,6 +774,15 @@
       "integrity": "sha1-eZlTn8ngR6N5KPoZb44VY9q9Nt4=",
       "dev": true
     },
+    "resolve": {
+      "version": "1.10.1",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.10.1.tgz",
+      "integrity": "sha512-KuIe4mf++td/eFb6wkaPbMDnP6kObCaEtIDuHOUED6MNUo4K670KZUHuuvYPZDxNF0WVLw49n06M2m2dXphEzA==",
+      "dev": true,
+      "requires": {
+        "path-parse": "^1.0.6"
+      }
+    },
     "resolve-url": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/resolve-url/-/resolve-url-0.2.1.tgz",
@@ -779,6 +806,17 @@
         "acorn": "^6.1.1"
       }
     },
+    "rollup-plugin-node-resolve": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/rollup-plugin-node-resolve/-/rollup-plugin-node-resolve-3.4.0.tgz",
+      "integrity": "sha512-PJcd85dxfSBWih84ozRtBkB731OjXk0KnzN0oGp7WOWcarAFkVa71cV5hTJg2qpVsV2U8EUwrzHP3tvy9vS3qg==",
+      "dev": true,
+      "requires": {
+        "builtin-modules": "^2.0.0",
+        "is-module": "^1.0.0",
+        "resolve": "^1.1.6"
+      }
+    },
     "rollup-plugin-svelte": {
       "version": "5.0.3",
       "resolved": "https://registry.npmjs.org/rollup-plugin-svelte/-/rollup-plugin-svelte-5.0.3.tgz",
@@ -1001,9 +1039,9 @@
       }
     },
     "svelte": {
-      "version": "2.16.1",
+      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/svelte/-/svelte-2.16.1.tgz",
+      "resolved": "https://registry.npmjs.org/svelte/-/svelte-3.1.0.tgz",
-      "integrity": "sha512-TpXdfukSkmWkMnH6PPVm7FRW8SSFcTyqBiP+6VN8rtZJ7Lp1Xbf/e3oz73eQBxF0UPZw1aAn1b91lX2XTeD3zg==",
+      "integrity": "sha512-b5TyzV7Dx1ijN4QPNarhKq5rX98QHDmi18nF0G8KV3d5KX3Jj98Yu4+tzM97ktnXcfoVJmvONvPaX1ZI0mr8Dw==",
       "dev": true
     },
     "to-object-path": {

package.json

@@ -1,7 +1,8 @@
 {
   "devDependencies": {
     "rollup": "^1.3.3",
+    "rollup-plugin-node-resolve": "^3.4.0",
     "rollup-plugin-svelte": "^5.0.3",
-    "svelte": "^2.16.1"
+    "svelte": "^3.1.0"
   }
 }

rollup.config.js

@@ -1,4 +1,5 @@
 import svelte from 'rollup-plugin-svelte';
+import node_resolve from 'rollup-plugin-node-resolve';
 
 export default {
     output: {
@@ -9,5 +10,6 @@ export default {
             include: 'components/**/*.html',
             hydratable: true,
         }),
+        node_resolve(),
     ]
 }