update to svelte 3

2019-05-02 00:47:44 +02:00 · 2019-05-02 00:47:44 +02:00 · 1d57bb23c3
parent 0f13f3bd29
commit 1d57bb23c3
6 changed files with 102 additions and 76 deletions
--- a/assets/settings.js
+++ b/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
    })
--- a/components/ArchiveForm.html
+++ b/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;
 }

-
-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>
--- a/components/Banner.html
+++ b/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 {
-    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)}`;
+}

-    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`;
-        },
-    },
+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`;
+}

-    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);
-        }
-    },
+import { onDestroy, createEventDispatcher } from 'svelte';

-    oncreate () {
-      this.interval = setInterval( () => {
-        this.set({ now: +(new Date()) });
-      }, 1000 );
-    },
+const dispatch = createEventDispatcher();

-    ondestroy () {
-      clearInterval( this.interval );
-    },
+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;
+
+let now = +(new Date());
+
+let interval = setInterval(() =>
+    now = +(new Date())
+, 1000 );
+
+onDestroy(()=> clearInterval(interval));
 </script>
--- a/package-lock.json
+++ b/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",
-      "resolved": "https://registry.npmjs.org/svelte/-/svelte-2.16.1.tgz",
-      "integrity": "sha512-TpXdfukSkmWkMnH6PPVm7FRW8SSFcTyqBiP+6VN8rtZJ7Lp1Xbf/e3oz73eQBxF0UPZw1aAn1b91lX2XTeD3zg==",
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/svelte/-/svelte-3.1.0.tgz",
+      "integrity": "sha512-b5TyzV7Dx1ijN4QPNarhKq5rX98QHDmi18nF0G8KV3d5KX3Jj98Yu4+tzM97ktnXcfoVJmvONvPaX1ZI0mr8Dw==",
      "dev": true
    },
    "to-object-path": {
--- a/package.json
+++ b/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"
  }
 }
--- a/rollup.config.js
+++ b/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(),
    ]
 }