From 190bac8c70ed04d821ece7a94fbf8c242d417a0b Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Wed, 30 Oct 2024 23:38:20 +0530 Subject: [PATCH] Svelte 5 migration --- .eslintrc.cjs | 2 +- package.json | 16 +- src/lib/components/Actions.svelte | 42 +-- src/lib/components/Card/Card.svelte | 48 +++- src/lib/components/Card/Tabs.svelte | 53 ++-- src/lib/components/Editor.svelte | 8 +- src/lib/components/History/History.svelte | 94 +++---- src/lib/components/Navbar.svelte | 25 +- src/lib/components/Preset.svelte | 4 +- src/lib/components/Theme.svelte | 8 +- src/lib/components/View.svelte | 18 +- src/lib/util/promos/August2024.svelte | 2 +- src/routes/+layout.svelte | 16 +- src/routes/edit/+page.svelte | 148 ++++++----- yarn.lock | 308 ++++++++++------------ 15 files changed, 411 insertions(+), 381 deletions(-) diff --git a/.eslintrc.cjs b/.eslintrc.cjs index 56196729..bc6f10b9 100644 --- a/.eslintrc.cjs +++ b/.eslintrc.cjs @@ -86,7 +86,7 @@ module.exports = { j: true, k: true, param: true, - props: true, + Props: true, req: true, res: true, str: true, diff --git a/package.json b/package.json index 4d7c3fa2..aca36fc1 100644 --- a/package.json +++ b/package.json @@ -25,8 +25,8 @@ "@cypress/snapshot": "2.1.7", "@fortawesome/fontawesome-free": "^6.5.1", "@sveltejs/adapter-static": "3.0.4", - "@sveltejs/kit": "2.5.26", - "@sveltejs/vite-plugin-svelte": "^3.0.1", + "@sveltejs/kit": "^2.5.27", + "@sveltejs/vite-plugin-svelte": "^4.0.0", "@testing-library/svelte": "4.2.3", "@types/dompurify": "^3.0.5", "@types/lodash-es": "^4.17.12", @@ -47,7 +47,7 @@ "eslint-plugin-es": "^4.1.0", "eslint-plugin-no-only-tests": "^3.1.0", "eslint-plugin-postcss-modules": "^2.0.0", - "eslint-plugin-svelte": "^2.35.1", + "eslint-plugin-svelte": "^2.45.1", "eslint-plugin-tailwindcss": "^3.13.1", "eslint-plugin-unicorn": "^50.0.1", "eslint-plugin-vitest": "^0.5.0", @@ -59,14 +59,14 @@ "postcss": "^8.4.33", "postcss-load-config": "5.1.0", "prettier": "^3.1.0", - "prettier-plugin-svelte": "^3.1.2", + "prettier-plugin-svelte": "^3.2.6", "prettier-plugin-tailwindcss": "^0.6.0", - "svelte": "^4.2.8", - "svelte-preprocess": "^5.1.3", + "svelte": "^5.0.0", + "svelte-preprocess": "^6.0.0", "tailwindcss": "^3.4.1", "tslib": "^2.6.2", - "typescript": "^5.3.3", - "vite": "^5.0.11", + "typescript": "^5.5.0", + "vite": "^5.4.4", "vitest": "^1.1.3", "vitest-dom": "^0.1.1" }, diff --git a/src/lib/components/Actions.svelte b/src/lib/components/Actions.svelte index a222e57a..8e703412 100644 --- a/src/lib/components/Actions.svelte +++ b/src/lib/components/Actions.svelte @@ -6,9 +6,9 @@ import { pakoSerde } from '$lib/util/serde'; import { stateStore } from '$lib/util/state'; import { logEvent } from '$lib/util/stats'; + import { version as FAVersion } from '@fortawesome/fontawesome-free/package.json'; import dayjs from 'dayjs'; import { toBase64 } from 'js-base64'; - import { version as FAVersion } from '@fortawesome/fontawesome-free/package.json'; const FONT_AWESOME_URL = `https://cdnjs.cloudflare.com/ajax/libs/font-awesome/${FAVersion}/css/all.min.css`; @@ -149,7 +149,7 @@ ${svgString}`); logEvent('copyMarkdown'); }; - let gistURL = ''; + let gistURL = $state(''); stateStore.subscribe(({ loader }) => { if (loader?.type === 'gist') { // @ts-expect-error Gist will have url @@ -165,14 +165,14 @@ ${svgString}`); logEvent('loadGist'); }; - let iUrl: string; - let svgUrl: string; - let krokiUrl: string; - let mdCode: string; - let imagemodeselected = 'auto'; - let userimagesize = 1080; + let iUrl: string | undefined = $state(); + let svgUrl: string | undefined = $state(); + let krokiUrl: string | undefined = $state(); + let mdCode: string | undefined = $state(); + let imagemodeselected = $state('auto'); + let userimagesize = $state(1080); - let isNetlify = false; + let isNetlify = $state(false); if (browser && ['mermaid.live', 'netlify'].some((path) => window.location.host.includes(path))) { isNetlify = true; } @@ -187,32 +187,32 @@ ${svgString}`);
{#if isClipboardAvailable()} - {/if} - - {#if rendererUrl} {/if} {#if krokiRendererUrl} {/if} @@ -244,9 +244,9 @@ ${svgString}`); {#if rendererUrl}
- + @@ -261,7 +261,7 @@ ${svgString}`); bind:value={gistURL} placeholder="Enter Gist URL" />
{#if isNetlify} diff --git a/src/lib/components/Card/Card.svelte b/src/lib/components/Card/Card.svelte index 3e107487..dbc92dc7 100644 --- a/src/lib/components/Card/Card.svelte +++ b/src/lib/components/Card/Card.svelte @@ -1,14 +1,38 @@
@@ -16,18 +40,18 @@ role="toolbar" tabindex="0" class="bg-primary p-2 {isTabsShown ? 'pb-0' : ''} flex-none cursor-pointer" - on:click={() => (isOpen = !isOpen)} - on:keypress={() => (isOpen = !isOpen)}> + onclick={toggleCardOpen} + onkeypress={toggleCardOpen}>
- +
- + {@render actions?.()}
{#if isOpen}
- + {@render children?.()}
{/if}
diff --git a/src/lib/components/Card/Tabs.svelte b/src/lib/components/Card/Tabs.svelte index 17fa57b3..6796ed8a 100644 --- a/src/lib/components/Card/Tabs.svelte +++ b/src/lib/components/Card/Tabs.svelte @@ -1,34 +1,43 @@
- (isOpen = !isOpen)} - on:keypress|stopPropagation={() => (isOpen = !isOpen)}> - {#if isCloseable} - + + {#if isClosable} + {/if} - {title} + {title} + {#if isOpen && tabs}
    {#each tabs as tab} @@ -36,9 +45,9 @@ role="tab" tabindex="0" class="tab tab-lifted {activeTabID === tab.id ? 'tab-active' : 'text-primary-content'}" - on:click|stopPropagation={() => toggleTabs(tab)} - on:keypress|stopPropagation={() => toggleTabs(tab)}> - + onclick={toggleTabs(tab)} + onkeypress={toggleTabs(tab)}> + {tab.title}
{/each} diff --git a/src/lib/components/Editor.svelte b/src/lib/components/Editor.svelte index eef1d1ef..7cb1e22f 100644 --- a/src/lib/components/Editor.svelte +++ b/src/lib/components/Editor.svelte @@ -1,4 +1,4 @@ -
-
+
{#if $stateStore.error instanceof Error}
-