Upgrade to Svelte 4 (#108)

* update dependencies * run svelte-migrate * fix qrcode type error * fix for imports
wharfkit · Aug 24, 2023 · 97b110c · 97b110c
1 parent 0ed6f57
commit 97b110c
Show file tree

Hide file tree

Showing 8 changed files with 154 additions and 59 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "typescript.tsdk": "node_modules/typescript/lib"
+}
diff --git a/package.json b/package.json
@@ -47,10 +47,10 @@
         "@rollup/plugin-json": "^6.0.0",
         "@rollup/plugin-node-resolve": "^15.0.1",
         "@rollup/plugin-replace": "^5.0.2",
-        "@rollup/plugin-typescript": "^10",
-        "@tsconfig/svelte": "^3.0.0",
-        "@typescript-eslint/eslint-plugin": "^5.49.0",
-        "@typescript-eslint/parser": "^5.49.0",
+        "@rollup/plugin-typescript": "^11.1.2",
+        "@tsconfig/svelte": "^5.0.0",
+        "@typescript-eslint/eslint-plugin": "^5.61.0",
+        "@typescript-eslint/parser": "^5.61.0",
         "@wharfkit/session": "^1.0.0",
         "@wharfkit/transact-plugin-autocorrect": "^1.0.0",
         "@wharfkit/transact-plugin-cosigner": "^1.0.0",
@@ -63,9 +63,9 @@
         "@wharfkit/wallet-plugin-mock": "^1.0.0",
         "@wharfkit/wallet-plugin-privatekey": "^1.0.0",
         "@wharfkit/wallet-plugin-wombat": "^1.0.0",
-        "core-js": "^3.27.2",
-        "eslint": "^8.32.0",
-        "eslint-config-prettier": "^8.6.0",
+        "core-js": "^3.31.0",
+        "eslint": "^8.44.0",
+        "eslint-config-prettier": "^8.8.0",
         "eslint-plugin-prettier": "^4.2.1",
         "node-sass": "^8.0.0",
         "prettier": "^2.8.3",
@@ -74,15 +74,15 @@
         "rollup-plugin-dts": "^4.2.1",
         "rollup-plugin-gzip": "^3.1.0",
         "rollup-plugin-livereload": "^2.0.0",
-        "rollup-plugin-svelte": "^7.1.0",
+        "rollup-plugin-svelte": "^7.1.5",
         "rollup-plugin-terser": "^7.0.0",
         "sass": "^1.58.3",
         "sirv-cli": "^2.0.0",
-        "svelte": "^3.55.1",
-        "svelte-preprocess": "^5.0.1",
+        "svelte": "^4.0.3",
+        "svelte-preprocess": "^5.0.4",
         "sveltekit-i18n": "^2.2.2",
-        "tslib": "^2.4.1",
-        "typescript": "^4.9.4",
+        "tslib": "^2.6.0",
+        "typescript": "^5.0.0",
         "vite": "^4.1.4",
         "yarn-deduplicate": "^6.0.1"
     },

diff --git a/src/lib/qrcode/QRCode.ts b/src/lib/qrcode/QRCode.ts
@@ -27,7 +27,7 @@ export default class QRCode {
         this.dataCache = null
     }
 
-    isDark(row: string | number, col: string | number) {
+    isDark(row: number, col: number) {
         if (row < 0 || this.moduleCount <= row || col < 0 || this.moduleCount <= col) {
             throw new Error(row + ',' + col)
         }
@@ -234,7 +234,7 @@ export default class QRCode {
         for (let col = this.moduleCount - 1; col > 0; col -= 2) {
             if (col == 6) col--
 
-            for (;;) {
+            for (; ;) {
                 for (let c = 0; c < 2; c++) {
                     if (this.modules[row][col - c] == null) {
                         let dark = false
@@ -294,10 +294,10 @@ export default class QRCode {
         if (buffer.getLengthInBits() > totalDataCount * 8) {
             throw new Error(
                 'code length overflow. (' +
-                    buffer.getLengthInBits() +
-                    '>' +
-                    totalDataCount * 8 +
-                    ')'
+                buffer.getLengthInBits() +
+                '>' +
+                totalDataCount * 8 +
+                ')'
             )
         }
 
@@ -312,7 +312,7 @@ export default class QRCode {
         }
 
         // padding
-        for (;;) {
+        for (; ;) {
             if (buffer.getLengthInBits() >= totalDataCount * 8) {
                 break
             }
@@ -327,7 +327,7 @@ export default class QRCode {
         return QRCode.createBytes(buffer, rsBlocks)
     }
 
-    static createBytes(buffer: {buffer: number[]}, rsBlocks: string | any[]) {
+    static createBytes(buffer: { buffer: number[] }, rsBlocks: string | any[]) {
         let offset = 0
 
         let maxDcCount = 0

diff --git a/src/ui/Prompt.svelte b/src/ui/Prompt.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import {ComponentType, createEventDispatcher, SvelteComponentTyped} from 'svelte'
+    import {ComponentType, createEventDispatcher, SvelteComponent} from 'svelte'
     import {derived} from 'svelte/store'
 
     import Accept from './components/Accept.svelte'
@@ -17,7 +17,7 @@
     import Message from './components/Message.svelte'
 
     interface UIComponent {
-        component: ComponentType<SvelteComponentTyped>
+        component: ComponentType<SvelteComponent>
         props: Record<string, unknown>
     }
 

diff --git a/src/ui/Settings.svelte b/src/ui/Settings.svelte
@@ -1,12 +1,12 @@
 <script lang="ts">
     import {onMount, getContext} from 'svelte'
     import {backAction, props, router, transitionDirection, initRouter, settings} from './state'
-    import {i18nType} from 'src/lib/translations'
+    import {i18nType} from '../lib/translations'
     import List from './components/List.svelte'
     import ListItem from './components/ListItem.svelte'
     import Transition from './components/Transition.svelte'
     import About from './settings/About.svelte'
-    import languages from 'src/lib/translations/lang.json'
+    import languages from '../lib/translations/lang.json'
     import Selector from './settings/Selector.svelte'
     import {get} from 'svelte/store'
 

diff --git a/src/ui/components/Checkbox.svelte b/src/ui/components/Checkbox.svelte
@@ -25,16 +25,16 @@
     {#if checked}
         <path
             id="box-fill"
-            in:scale={{duration: 300, easing: quintOut}}
-            out:scale={{duration: 100, easing: quintOut}}
+            in:scale|global={{duration: 300, easing: quintOut}}
+            out:scale|global={{duration: 100, easing: quintOut}}
             stroke="none"
             d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2Z"
         />
 
         <path
             id="check"
-            in:draw={{duration: 200, easing: quintOut}}
-            out:draw={{duration: 100, easing: quintOut}}
+            in:draw|global={{duration: 200, easing: quintOut}}
+            out:draw|global={{duration: 100, easing: quintOut}}
             fill="none"
             d="m9 11 3 3L22 4"
         />

diff --git a/src/ui/components/Transition.svelte b/src/ui/components/Transition.svelte
@@ -22,7 +22,7 @@
 </script>
 
 {#if animations}
-    <div class="transition" in:fly={{duration: 200, x, y}}>
+    <div class="transition" in:fly|global={{duration: 200, x, y}}>
         <slot />
     </div>
 {:else}