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 @@
     return size;
 }
 
-
-export default {
-    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
-    },
+function take_file(file_list){
+    file_size: get_file_size(file_list);
 }
+
+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 @@
     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 @@
     return `${days} days`;
 }
 
-export default {
-    data(){
-        return {
-            policy_enabled: false,
-            next_delete: null,
-            last_delete: null,
-            now: +(new Date()),
+function rel_future(millis){
+    // returns relative time from timestamp, assuming time is in the future
+    if(millis < 2000){
+        let secs = Math.floor(millis/1000)
+        let ndots = absmod(-secs, 3);
+        let out = 'anytime now';
+        for(; ndots > 0; ndots--){
+            out += '.';
         }
-    },
+        return out;
+    }
+    return `in ${rel(millis)}`;
+}
+
+function rel_past(millis){
+    // returns relative time from timestamp, assuming time is in the past
+    if(millis < 2000){
+        return 'just now';
+    }
+    return `${rel(millis)} ago`;
+}
 
-    helpers: {
-        rel_future(millis){
-            if(millis < 2000){
-                let secs = Math.floor(millis/1000)
-                let ndots = absmod(-secs, 3);
-                let out = 'anytime now';
-                for(; ndots > 0; ndots--){
-                    out += '.';
-                }
-                return out;
-            }
-            return `in ${rel(millis)}`;
-        },
-        rel_past(millis){
-            if(millis < 2000){
-                return 'just now';
-            }
-            return `${rel(millis)} ago`;
-        },
-    },
+import { onDestroy, createEventDispatcher } from 'svelte';
 
-    methods: {
-        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);
-        }
-    },
+const dispatch = createEventDispatcher();
+
+function toggle(){
+    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;
 
-    oncreate () {
-      this.interval = setInterval( () => {
-        this.set({ now: +(new Date()) });
-      }, 1000 );
-    },
+let now = +(new Date());
 
-    ondestroy () {
-      clearInterval( this.interval );
-    },
+let interval = setInterval(() =>
+    now = +(new Date())
+, 1000 );
 
-};
+onDestroy(()=> clearInterval(interval));
 </script>

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(),
     ]
 }