feat: update [email protected].* + @sveltejs/[email protected]

.github/actions/init-env-node/action.yaml

@@ -10,6 +10,7 @@ runs:
       name: Setup node
       with:
         cache: pnpm
+        node-version-file: '.nvmrc'
 
     - name: Get pnpm store directory
       shell: bash

app/package.json

@@ -18,8 +18,8 @@
 		"build": "vite build",
 		"check": "svelte-check --tsconfig ./tsconfig.json",
 		"check:watch": "pnpm check --watch",
-		"lint": "prettier --no-editorconfig --check . && eslint .",
-		"format": "prettier --no-editorconfig --write .",
+		"lint": "prettier --check . && eslint .",
+		"format": "prettier --write .",
 		"fix": "eslint --fix .",
 		"tauri": "tauri",
 		"prepare": "svelte-kit sync"
@@ -47,17 +47,18 @@
 		"@octokit/rest": "^20.1.1",
 		"@playwright/test": "^1.44.1",
 		"@replit/codemirror-lang-svelte": "^6.0.0",
-		"@sentry/sveltekit": "^7.114.0",
-		"@sveltejs/adapter-static": "^2.0.3",
-		"@sveltejs/kit": "^1.30.4",
+		"@sentry/sveltekit": "^8.9.2",
+		"@sveltejs/adapter-static": "^3.0.1",
+		"@sveltejs/kit": "^2.5.10",
+		"@sveltejs/vite-plugin-svelte": "^3.1.1",
 		"@tauri-apps/api": "^1.5.5",
 		"@types/crypto-js": "^4.2.2",
 		"@types/diff": "^5.2.1",
 		"@types/diff-match-patch": "^1.0.36",
 		"@types/lscache": "^1.3.4",
 		"@types/marked": "^5.0.2",
-		"@typescript-eslint/eslint-plugin": "^7.11.0",
-		"@typescript-eslint/parser": "^7.11.0",
+		"@typescript-eslint/eslint-plugin": "^7.13.0",
+		"@typescript-eslint/parser": "^7.13.0",
 		"autoprefixer": "^10.4.19",
 		"class-transformer": "^0.5.1",
 		"crypto-js": "^4.2.0",
@@ -68,7 +69,7 @@
 		"eslint-import-resolver-typescript": "^3.6.1",
 		"eslint-plugin-import": "^2.29.1",
 		"eslint-plugin-square-svelte-store": "^1.0.0",
-		"eslint-plugin-svelte": "^2.39.0",
+		"eslint-plugin-svelte": "^2.39.3",
 		"inter-ui": "^4.0.2",
 		"leven": "^4.0.0",
 		"lscache": "^1.3.2",
@@ -80,11 +81,11 @@
 		"postcss-load-config": "^5.1.0",
 		"postcss-pxtorem": "^6.1.0",
 		"posthog-js": "1.136.4",
-		"prettier": "^3.3.0",
-		"prettier-plugin-svelte": "^3.2.3",
+		"prettier": "^3.3.2",
+		"prettier-plugin-svelte": "^3.2.4",
 		"reflect-metadata": "^0.2.2",
 		"rxjs": "^7.8.1",
-		"svelte": "^4.2.16",
+		"svelte": "5.0.0-next.149",
 		"svelte-check": "^3.8.0",
 		"svelte-floating-ui": "^1.5.8",
 		"svelte-french-toast": "^1.2.0",
@@ -94,9 +95,9 @@
 		"tauri-plugin-log-api": "github:tauri-apps/tauri-plugin-log#v1",
 		"tauri-plugin-store-api": "github:tauri-apps/tauri-plugin-store#v1",
 		"tinykeys": "^2.1.0",
-		"tslib": "^2.6.2",
+		"tslib": "^2.6.3",
 		"typescript": "^5.4.5",
-		"vite": "^4.5.3",
+		"vite": "^5.2.13",
 		"vitest": "^0.34.6"
 	},
 	"dependencies": {

app/src/app.d.ts

@@ -3,6 +3,8 @@
 // and what to do when importing types
 declare namespace App {}
 
+declare module 'tinykeys';
+
 interface HTMLElement {
 	scrollIntoViewIfNeeded: (centerIfNeeded?: boolean) => void;
 }

app/src/lib/components/AIPromptEdit/Content.svelte

@@ -203,10 +203,6 @@
 	.sections-divider {
 		user-select: none;
 		border-top: 1px solid var(--clr-border-3);
-
-		&.empty {
-			opacity: 0;
-		}
 	}
 
 	.actions {

app/src/lib/components/AIPromptEdit/DialogBubble.svelte

@@ -3,7 +3,6 @@
 	import Button from '$lib/components/Button.svelte';
 	import Icon from '$lib/components/Icon.svelte';
 	import { useAutoHeight } from '$lib/utils/useAutoHeight';
-	import { useResize } from '$lib/utils/useResize';
 	import { marked } from 'marked';
 	import { createEventDispatcher } from 'svelte';
 
@@ -69,10 +68,7 @@
 				on:change={(e) => {
 					useAutoHeight(e.currentTarget);
 				}}
-				use:useResize={() => {
-					if (textareaElement) useAutoHeight(textareaElement);
-				}}
-			/>
+			></textarea>
 		{:else}
 			<div class="markdown bubble-message scrollbar text-base-body-13">
 				{@html marked.parse(promptMessage.content)}
@@ -92,14 +88,14 @@
 					Remove example
 				</Button>
 			{/if}
-			<Button style="ghost" outline grow on:click={() => dispatcher('addExample')}
-				>Add new example</Button
-			>
+			<Button style="ghost" outline grow on:click={() => dispatcher('addExample')}>
+				Add new example
+			</Button>
 		</div>
 	{/if}
 </div>
 
-<style lang="post-css">
+<style lang="postcss">
 	.bubble-wrap {
 		display: flex;
 		flex-direction: column;

app/src/lib/components/AppUpdater.svelte

@@ -121,7 +121,7 @@
 				Release notes
 			</Button>
 			<div class="status-section">
-				<div class="sliding-gradient" />
+				<div class="sliding-gradient"></div>
 
 				{#if !$update$.status}
 					<div class="cta-btn" transition:fade={{ duration: 100 }}>

app/src/lib/components/Avatar.svelte

@@ -20,7 +20,7 @@
 		class:integrated={status === 'integrated'}
 		class:shadow-lane={shadowLane}
 		use:tooltip={help}
-	/>
+	></div>
 {:else}
 	<img
 		class="avatar"

app/src/lib/components/BaseBranch.svelte

@@ -113,7 +113,7 @@
 		<span class="text-base-12">Don't show this again</span>
 	</label>
 
-	<svelte:fragment slot="controls" let:close>
+	{#snippet controls(close)}
 		<Button style="ghost" outline on:click={close}>Cancel</Button>
 		<Button
 			style="pop"
@@ -128,7 +128,7 @@
 		>
 			Merge Upstream
 		</Button>
-	</svelte:fragment>
+	{/snippet}
 </Modal>
 
 <style>

app/src/lib/components/BaseBranchCard.svelte

@@ -15,6 +15,7 @@
 	const project = getContext(Project);
 
 	$: base = baseBranchService.base;
+	// eslint-disable-next-line svelte/valid-compile
 	$: selected = $page.url.href.endsWith('/base');
 
 	let baseContents: HTMLElement;

app/src/lib/components/Board.svelte

@@ -82,7 +82,7 @@
 		}}
 	>
 		{#each $activeBranches.sort((a, b) => a.order - b.order) as branch (branch.id)}
-			<!-- svelte-ignore a11y-no-static-element-interactions -->
+			<!-- svelte-ignore a11y_no_static_element_interactions -->
 			<div
 				class="branch draggable-branch"
 				draggable="true"

app/src/lib/components/BranchCard.svelte

@@ -247,7 +247,7 @@
 									/>
 									{#if branch.active && branch.conflicted}
 										<div class="card-notifications">
-											<InfoMessage noRadius filled outlined={false} style="error">
+											<InfoMessage filled outlined={false} style="error">
 												<svelte:fragment slot="title">
 													{#if branch.files.some((f) => f.conflicted)}
 														This virtual branch conflicts with upstream changes. Please resolve all

app/src/lib/components/BranchHeader.svelte

@@ -190,8 +190,10 @@
 								help="New changes will land here"
 								icon="target"
 								clickable={false}
-								disabled={isUnapplied}>Default branch</Button
+								disabled={isUnapplied}
 							>
+								Default branch
+							</Button>
 						{:else}
 							<Button
 								style="ghost"
@@ -258,7 +260,7 @@
 						<div class="header__buttons">
 							{#if !hasPullRequest}
 								<PullRequestButton
-									on:click={async (e) => await createPr({ draft: e.detail.action === 'draft' })}
+									on:exec={async (e) => await createPr({ draft: e.detail.action === 'draft' })}
 									loading={isLoading}
 								/>
 							{/if}
@@ -285,7 +287,7 @@
 				</div>
 			</div>
 		</div>
-		<div class="header__top-overlay" data-remove-from-draggable data-tauri-drag-region />
+		<div class="header__top-overlay" data-remove-from-draggable data-tauri-drag-region></div>
 	</div>
 {/if}
 

app/src/lib/components/BranchItem.svelte

@@ -18,6 +18,7 @@
 	}
 
 	$: href = getBranchLink(branch);
+	// eslint-disable-next-line svelte/valid-compile
 	$: selected = href ? $page.url.href.endsWith(href) : false;
 </script>
 

app/src/lib/components/BranchLanePopupMenu.svelte

@@ -130,29 +130,29 @@
 	</ContextMenu>
 {/if}
 
-<Modal
-	width="small"
-	bind:this={renameRemoteModal}
-	on:submit={() => {
-		branchController.updateBranchRemoteName(branch.id, newRemoteName);
-		renameRemoteModal.close();
-	}}
->
-	<svelte:fragment>
-		<TextBox label="Remote branch name" id="newRemoteName" bind:value={newRemoteName} focus />
-	</svelte:fragment>
+<Modal width="small" bind:this={renameRemoteModal}>
+	<TextBox label="Remote branch name" id="newRemoteName" bind:value={newRemoteName} focus />
 
-	<svelte:fragment slot="controls" let:close>
+	{#snippet controls(close)}
 		<Button style="ghost" outline type="reset" on:click={close}>Cancel</Button>
-		<Button style="pop" kind="solid" type="submit">Rename</Button>
-	</svelte:fragment>
+		<Button
+			style="pop"
+			kind="solid"
+			on:click={() => {
+				branchController.updateBranchRemoteName(branch.id, newRemoteName);
+				close();
+			}}
+		>
+			Rename
+		</Button>
+	{/snippet}
 </Modal>
 
-<Modal width="small" title="Delete branch" bind:this={deleteBranchModal} let:item={branch}>
-	<svelte:fragment>
+<Modal width="small" title="Delete branch" bind:this={deleteBranchModal}>
+	{#snippet children(branch)}
 		Deleting <code class="code-string">{branch.name}</code> cannot be undone.
-	</svelte:fragment>
-	<svelte:fragment slot="controls" let:close let:item={branch}>
+	{/snippet}
+	{#snippet controls(close)}
 		<Button style="ghost" outline on:click={close}>Cancel</Button>
 		<Button
 			style="error"
@@ -164,5 +164,5 @@
 		>
 			Delete
 		</Button>
-	</svelte:fragment>
+	{/snippet}
 </Modal>

app/src/lib/components/BranchPreviewHeader.svelte

@@ -9,7 +9,7 @@
 	import { tooltip } from '$lib/utils/tooltip';
 	import { openExternalUrl } from '$lib/utils/url';
 	import { BranchController } from '$lib/vbranches/branchController';
-	import { onDestroy } from 'svelte';
+	import { mount, onDestroy, unmount } from 'svelte';
 	import type { PullRequest } from '$lib/github/types';
 	import type { BaseBranch, RemoteBranch } from '$lib/vbranches/types';
 	import { goto } from '$app/navigation';
@@ -24,8 +24,8 @@
 	let isApplying = false;
 
 	function updateContextMenu(copyablePrUrl: string) {
-		if (popupMenu) popupMenu.$destroy();
-		return new ViewPrContextMenu({
+		if (popupMenu) unmount(popupMenu);
+		return mount(ViewPrContextMenu, {
 			target: document.body,
 			props: { prUrl: copyablePrUrl }
 		});
@@ -35,7 +35,7 @@
 
 	onDestroy(() => {
 		if (popupMenu) {
-			popupMenu.$destroy();
+			unmount(popupMenu);
 		}
 	});
 </script>
@@ -112,7 +112,7 @@
 			</div>
 		</div>
 	</div>
-	<div class="header__top-overlay" data-tauri-drag-region />
+	<div class="header__top-overlay" data-tauri-drag-region></div>
 </div>
 
 <style lang="postcss">

app/src/lib/components/Button.svelte

@@ -32,8 +32,6 @@
 	export let icon: keyof typeof iconsJson | undefined = undefined;
 	export let help = '';
 	export let helpShowDelay = 1200;
-
-	const SLOTS = $$props.$$slots;
 </script>
 
 <button
@@ -46,7 +44,7 @@
 	class:wide
 	class:grow
 	class:not-clickable={!clickable}
-	class:fixed-width={!SLOTS && !wide}
+	class:fixed-width={!$$slots.default && !wide}
 	class:is-dropdown={isDropdownChild}
 	style:align-self={align}
 	style:width={width ? pxToRem(width) : undefined}
@@ -63,7 +61,7 @@
 	{id}
 	tabindex={clickable ? tabindex : -1}
 >
-	{#if SLOTS}
+	{#if $$slots.default}
 		<span
 			class="label text-semibold"
 			class:text-base-12={size === 'button' || size === 'cta'}

app/src/lib/components/CloudForm.svelte

@@ -149,7 +149,7 @@
 	</Section>
 {/if}
 
-<style lang="post-css">
+<style lang="postcss">
 	.options {
 		display: flex;
 		flex-direction: column;