Merge pull request #526 from appwrite/chore-upgrade-svelte-4

chore: upgrade Svelte 4 and other dependencies
appwrite · Oct 2, 2023 · af8453d · af8453d · vercel · Oct 2, 2023
2 parents c57a776 + d5ccbaa
commit af8453d
Show file tree

Hide file tree

Showing 60 changed files with 1,975 additions and 7,839 deletions.
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -1,24 +1,36 @@
 module.exports = {
     root: true,
+    extends: [
+        'eslint:recommended',
+        'plugin:@typescript-eslint/recommended',
+        'plugin:svelte/recommended',
+        'prettier'
+    ],
     parser: '@typescript-eslint/parser',
-    extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'prettier'],
-    plugins: ['svelte3', '@typescript-eslint'],
+    parserOptions: {
+        extraFileExtensions: ['.svelte'], // This is a required setting in `@typescript-eslint/parser` v4.24.0.
+        sourceType: 'module',
+        ecmaVersion: 2020
+    },
     ignorePatterns: ['*.cjs'],
     overrides: [
         {
             files: ['*.svelte'],
-            processor: 'svelte3/svelte3',
-            rules: {
-                'no-redeclare': 'off'
+            parser: 'svelte-eslint-parser',
+            parserOptions: {
+                parser: '@typescript-eslint/parser' //This is required to parse TypeScript inside Svelte files.
             }
         }
     ],
-    settings: {
-        'svelte3/typescript': () => require('typescript')
-    },
-    parserOptions: {
-        sourceType: 'module',
-        ecmaVersion: 2020
+    rules: {
+        'no-redeclare': 'off',
+        '@typescript-eslint/no-duplicate-enum-values': 'off',
+        'svelte/no-at-html-tags': 'off',
+        'no-unused-vars': 'off', // This rule is handled by `@typescript-eslint/no-unused-vars` so it needs to be disabled to avoid conflicts.
+        '@typescript-eslint/no-unused-vars': [
+            'error',
+            { argsIgnorePattern: '^_', varsIgnorePattern: '^(_|\\$\\$)' } // Ignore unused variables starting with `_` or `$$`.
+        ]
     },
     env: {
         browser: true,

diff --git a/.prettierrc b/.prettierrc
@@ -5,5 +5,5 @@
     "trailingComma": "none",
     "printWidth": 100,
     "bracketSameLine": true,
-    "svelteSortOrder": "scripts-options-markup-styles"
+    "plugins": ["prettier-plugin-svelte"]
 }
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -10,66 +10,66 @@
         "sync": "svelte-kit sync",
         "check": "svelte-check --tsconfig ./tsconfig.json --fail-on-warnings --threshold warning",
         "check:watch": "svelte-check --tsconfig ./tsconfig.json --watch",
-        "lint": "prettier --ignore-path .gitignore --check --plugin-search-dir=. . && eslint .",
-        "format": "prettier --ignore-path .gitignore --write --plugin-search-dir=. .",
+        "lint": "prettier --ignore-path .gitignore --check --plugin prettier-plugin-svelte . && eslint .",
+        "format": "prettier --ignore-path .gitignore --write --plugin prettier-plugin-svelte .",
         "test": "vitest run",
         "test:ui": "vitest --ui",
         "test:watch": "vitest watch",
         "e2e": "playwright test tests/e2e"
     },
     "dependencies": {
-        "@analytics/google-analytics": "^1.0.5",
-        "@analytics/google-tag-manager": "^0.5.3",
+        "@analytics/google-analytics": "^1.0.7",
+        "@analytics/google-tag-manager": "^0.5.5",
         "@appwrite.io/console": "^0.3.0",
         "@appwrite.io/pink": "0.1.0-next.9",
         "@appwrite.io/pink-icons": "^0.1.0-next.9",
-        "@popperjs/core": "^2.11.6",
-        "@sentry/svelte": "^7.44.2",
-        "@sentry/tracing": "^7.44.2",
-        "ai": "^2.1.15",
-        "analytics": "^0.8.1",
+        "@popperjs/core": "^2.11.8",
+        "@sentry/svelte": "^7.66.0",
+        "@sentry/tracing": "^7.66.0",
+        "ai": "^2.2.11",
+        "analytics": "^0.8.9",
         "dayjs": "^1.11.9",
         "deep-equal": "^2.2.2",
-        "dotenv": "^16.0.3",
-        "echarts": "^5.4.1",
-        "logrocket": "^3.0.1",
+        "dotenv": "^16.3.1",
+        "echarts": "^5.4.3",
+        "logrocket": "^5.0.1",
         "nanoid": "^4.0.2",
-        "pretty-bytes": "^6.1.0",
+        "pretty-bytes": "^6.1.1",
         "prismjs": "^1.29.0",
-        "svelte-confetti": "^1.2.2",
+        "svelte-confetti": "^1.3.0",
         "tippy.js": "^6.3.7",
-        "web-vitals": "^3.1.1"
+        "web-vitals": "^3.4.0"
     },
     "devDependencies": {
-        "@playwright/test": "^1.31.2",
-        "@sveltejs/adapter-static": "^2.0.2",
-        "@sveltejs/kit": "^1.15.4",
-        "@sveltejs/vite-plugin-svelte": "^2.0.4",
+        "@playwright/test": "^1.37.1",
+        "@sveltejs/adapter-static": "^2.0.3",
+        "@sveltejs/kit": "^1.24.0",
+        "@sveltejs/vite-plugin-svelte": "^2.4.5",
         "@testing-library/dom": "^9.0.1",
         "@testing-library/jest-dom": "^5.16.5",
-        "@testing-library/svelte": "^3.2.2",
+        "@testing-library/svelte": "^4.0.3",
         "@testing-library/user-event": "^14.4.3",
         "@types/deep-equal": "^1.0.1",
         "@types/prismjs": "^1.26.0",
-        "@typescript-eslint/eslint-plugin": "^5.56.0",
-        "@typescript-eslint/parser": "^5.56.0",
+        "@typescript-eslint/eslint-plugin": "^6.5.0",
+        "@typescript-eslint/parser": "^6.5.0",
         "@vitest/ui": "^0.29.7",
-        "eslint": "^8.36.0",
-        "eslint-config-prettier": "^8.8.0",
-        "eslint-plugin-svelte3": "^4.0.0",
-        "jsdom": "^21.1.1",
+        "eslint": "^8.48.0",
+        "eslint-config-prettier": "^9.0.0",
+        "eslint-plugin-svelte": "^2.33.0",
+        "jsdom": "^22.1.0",
         "kleur": "^4.1.5",
         "pre-commit": "^1.2.2",
-        "prettier": "^2.8.6",
-        "prettier-plugin-svelte": "^2.9.0",
-        "sass": "^1.59.3",
-        "svelte": "^3.57.0",
-        "svelte-check": "^3.1.4",
+        "prettier": "^3.0.3",
+        "prettier-plugin-svelte": "^3.0.3",
+        "sass": "^1.66.1",
+        "svelte": "^4.2.0",
+        "svelte-check": "^3.5.1",
         "svelte-jester": "^2.3.2",
-        "svelte-preprocess": "^5.0.3",
-        "tslib": "^2.5.0",
-        "typescript": "^5.0.2",
-        "vite": "^4.2.1",
+        "svelte-preprocess": "^5.0.4",
+        "tslib": "^2.6.2",
+        "typescript": "^5.2.2",
+        "vite": "^4.4.9",
         "vitest": "^0.29.7"
     },
     "type": "module",

diff --git a/src/app.html b/src/app.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
     <head>
         <meta charset="utf-8" />

diff --git a/src/lib/actions/analytics.ts b/src/lib/actions/analytics.ts
@@ -187,7 +187,7 @@ export enum Submit {
     FunctionUpdateLogging = 'submit_function_update_logging',
     FunctionUpdateTimeout = 'submit_function_update_timeout',
     FunctionUpdateEvents = 'submit_function_update_events',
-    FunctionConnectRepo = 'submit_function_disconnect_repo',
+    FunctionConnectRepo = 'submit_function_connect_repo',
     FunctionDisconnectRepo = 'submit_function_disconnect_repo',
     FunctionRedeploy = 'submit_function_redeploy',
     DeploymentCreate = 'submit_deployment_create',

diff --git a/src/lib/actions/multi-actions.ts b/src/lib/actions/multi-actions.ts
@@ -1,6 +1,8 @@
 import type { Action } from 'svelte/action';
 
-export type MultiActionArray = Array<(node: HTMLElement) => ReturnType<Action>>;
+export type MultiActionArray = Array<
+    (node: HTMLElement) => ReturnType<Action<HTMLElement, unknown>>
+>;
 
 export function multiAction(node: HTMLElement, arr: MultiActionArray) {
     const destroyFns = arr.map((fn) => {

diff --git a/src/lib/commandCenter/commandCenter.svelte b/src/lib/commandCenter/commandCenter.svelte
@@ -112,15 +112,15 @@
 <svelte:window on:mousedown={handleBlur} on:keydown={handleKeydown} />
 
 {#if openSubPanel}
-    <div class="dialog" bind:this={dialog} transition:fade={{ duration: 100 }}>
+    <div class="dialog" bind:this={dialog} transition:fade|global={{ duration: 100 }}>
         <svelte:component this={openSubPanel.component} />
     </div>
 {/if}
 
 {#if dev && debugOverlayEnabled}
     <div class="debug-keys" use:portal>
         {#each keys as key, i (i)}
-            <kbd class="kbd" transition:fade|local={{ duration: 150 }}>
+            <kbd class="kbd" transition:fade={{ duration: 150 }}>
                 {key.length === 1 ? key.toUpperCase() : key}
             </kbd>
         {/each}

diff --git a/src/lib/commandCenter/panels/template.svelte b/src/lib/commandCenter/panels/template.svelte
@@ -9,6 +9,7 @@
 
     import { clearSubPanels, popSubPanel, subPanels } from '../subPanels';
 
+    /* eslint no-undef: "off" */
     type Option = $$Generic<Omit<Command, 'group'> & { group?: string }>;
     export let options: Option[] | null = null;
     export let search = '';

diff --git a/src/lib/commandCenter/searchers/collections.ts b/src/lib/commandCenter/searchers/collections.ts
@@ -22,6 +22,6 @@ export const collectionsSearcher = (async (query: string) => {
                             `/console/project-${projectId}/databases/database-${databaseId}/collection-${col.$id}`
                         );
                     }
-                } as const)
+                }) as const
         );
 }) satisfies Searcher;
diff --git a/src/lib/commandCenter/searchers/databases.ts b/src/lib/commandCenter/searchers/databases.ts
@@ -18,6 +18,6 @@ export const dbSearcher = (async (query: string) => {
                         goto(`/console/project-${get(project).$id}/databases/database-${db.$id}`);
                     },
                     icon: 'database'
-                } as const)
+                }) as const
         );
 }) satisfies Searcher;
diff --git a/src/lib/commandCenter/searchers/teams.ts b/src/lib/commandCenter/searchers/teams.ts
@@ -13,7 +13,7 @@ const getTeamCommand = (team: Models.Team<Models.Preferences>, projectId: string
         },
         group: 'teams',
         icon: 'user-circle'
-    } satisfies Command);
+    }) satisfies Command;
 
 export const teamSearcher = (async (query: string) => {
     const { teams } = await sdk.forProject.teams.list([], query);

diff --git a/src/lib/commandCenter/searchers/users.ts b/src/lib/commandCenter/searchers/users.ts
@@ -14,7 +14,7 @@ const getUserCommand = (user: Models.User<Models.Preferences>, projectId: string
         },
         group: 'users',
         icon: 'user-circle'
-    } satisfies Command);
+    }) satisfies Command;
 
 export const userSearcher = (async (query: string) => {
     const { users } = await sdk.forProject.users.list([], query || undefined);

diff --git a/src/lib/commandCenter/subPanels.ts b/src/lib/commandCenter/subPanels.ts
@@ -1,9 +1,9 @@
-import type { SvelteComponentDev } from 'svelte/internal';
+import type { SvelteComponent } from 'svelte';
 import { writable } from 'svelte/store';
 
 export type SubPanel = {
     name: string;
-    component: typeof SvelteComponentDev;
+    component: typeof SvelteComponent<unknown>;
 };
 
 type CastSubPanel = Omit<SubPanel, 'component'> & {

diff --git a/src/lib/components/card.svelte b/src/lib/components/card.svelte
@@ -46,6 +46,7 @@
     class:is-allowed-focus={href}
     on:click
     on:keyup={clickOnEnter}
+    role={href || isButton ? 'button' : 'generic'}
     {href}>
     <slot />
 </svelte:element>
diff --git a/src/lib/components/code.svelte b/src/lib/components/code.svelte
@@ -64,6 +64,7 @@
         class:line-numbers={withLineNumbers}><code>{code}</code></pre>
 </section>
 
+<!-- svelte-ignore css-unused-selector -->
 <style lang="scss" global>
     @import 'prismjs/themes/prism.css';
     @import 'prismjs/plugins/line-numbers/prism-line-numbers.css';
@@ -189,13 +190,18 @@
                 color: #62aed2;
             }
         }
-        &.prism-regex,
         &.prism-important,
         &.prism-variable {
             color: #a1c4ff;
             body.theme-light & {
                 color: #62aed2;
             }
         }
+        &.prism-regex {
+            color: #a1c4ff;
+            body.theme-light & {
+                color: #62aed2;
+            }
+        }
     }
 </style>
diff --git a/src/lib/components/collapsibleItem.svelte b/src/lib/components/collapsibleItem.svelte
@@ -7,7 +7,13 @@
 
 <li class="collapsible-item">
     <details class="collapsible-wrapper" {open}>
-        <summary class="collapsible-button" on:keyup={clickOnEnter} on:click>
+        <!-- svelte-ignore a11y-no-redundant-roles -->
+        <summary
+            class="collapsible-button"
+            on:keyup={clickOnEnter}
+            on:click
+            role="button"
+            tabindex="0">
             <slot name="beforetitle" />
             <div>
                 <span class="text"><slot name="title" /></span>

diff --git a/src/lib/components/copy.svelte b/src/lib/components/copy.svelte
@@ -34,6 +34,8 @@
 
 <span
     data-private
+    role="button"
+    tabindex="0"
     style:cursor="pointer"
     on:click|preventDefault={handleClick}
     on:keyup={clickOnEnter}

diff --git a/src/lib/components/drop.svelte b/src/lib/components/drop.svelte
@@ -115,6 +115,7 @@
     {/if}
 </div>
 
+<!-- svelte-ignore css-unused-selector -->
 <style global lang="scss">
     .drop-tooltip[data-popper-placement^='top'] > .drop-arrow {
         bottom: -4px;

diff --git a/src/lib/components/dropListLink.svelte b/src/lib/components/dropListLink.svelte
@@ -1,14 +1,13 @@
 <script lang="ts">
-    import { clickOnEnter } from '$lib/helpers/a11y';
-
     export let href: string;
     export let icon: string = null;
     export let disabled = false;
     export let external = false;
 </script>
 
-<li class="drop-list-item" on:click on:keyup={clickOnEnter}>
+<li class="drop-list-item">
     <a
+        on:click
         {href}
         class="drop-button"
         class:is-disabled={disabled}

diff --git a/src/lib/components/eventModal.svelte b/src/lib/components/eventModal.svelte
@@ -339,6 +339,7 @@
             <div {...{ type: 'text' }} style="min-height: 2.5rem;">
                 {#each eventString as route, i}
                     <span
+                        role="tooltip"
                         class:u-opacity-0-5={helper !== route.description}
                         on:mouseenter={() => (helper = route.description)}
                         on:mouseleave={() => (helper = null)}>

diff --git a/src/lib/components/feedback/evaluation.svelte b/src/lib/components/feedback/evaluation.svelte
@@ -1,6 +1,4 @@
 <script lang="ts">
-    import { clickOnEnter } from '$lib/helpers/a11y';
-
     export let value: number = null;
 </script>
 
@@ -9,9 +7,10 @@
         <slot />
     </legend>
     <ul class="u-flex u-main-space-between u-margin-block-start-16">
-        {#each Array(10) as _, i}
-            <li on:keyup={clickOnEnter} on:click={() => (value = i)}>
+        {#each Array(11) as _, i}
+            <li>
                 <input
+                    on:click={() => (value = i)}
                     type="radio"
                     name="recommend"
                     class="radio-button"

diff --git a/src/lib/components/floatingActionBar.svelte b/src/lib/components/floatingActionBar.svelte
@@ -6,7 +6,7 @@
 </script>
 
 {#if show}
-    <div class="floating-action-bar" transition:fly|local={{ y: '6rem' }} use:portal>
+    <div class="floating-action-bar" transition:fly={{ y: '6rem' }} use:portal>
         <slot />
     </div>
 {/if}

diff --git a/src/lib/components/migrationBox.svelte b/src/lib/components/migrationBox.svelte
@@ -57,7 +57,7 @@
     fetchMigrations();
 
     onMount(async () => {
-        return sdk.forConsole.client.subscribe(['project', 'console'], async (response) => {
+        sdk.forConsole.client.subscribe(['project', 'console'], async (response) => {
             if (response.events.includes('migrations.*')) {
                 fetchMigrations();
             }

diff --git a/src/lib/components/permissions/row.svelte b/src/lib/components/permissions/row.svelte
@@ -115,6 +115,7 @@
     </div>
 </div>
 
+<!-- svelte-ignore css-unused-selector -->
 <style lang="scss" global>
     .tippy-user .tippy-box {
         --p-drop-bg-color: var(--color-neutral-500);