chore: Making it more Svelte 5 compatible (#529)

huntabyte · May 1, 2024 · 98d5bd0 · 98d5bd0
1 parent e1c85eb
commit 98d5bd0
Show file tree

Hide file tree

Showing 28 changed files with 58 additions and 52 deletions.
diff --git a/.changeset/sixty-pens-confess.md b/.changeset/sixty-pens-confess.md
@@ -0,0 +1,5 @@
+---
+"bits-ui": patch
+---
+
+chore: Updated a11y warnings for better Svelte 5 compatibility
diff --git a/eslint.config.js b/eslint.config.js
@@ -2,4 +2,10 @@ import config, { DEFAULT_IGNORES } from "@huntabyte/eslint-config";
 
 const ignores = ["**/extended-types"];
 
-export default config({ svelte: true, ignores: [...DEFAULT_IGNORES, ...ignores] });
+export default config({
+	svelte: true,
+	ignores: [...DEFAULT_IGNORES, ...ignores],
+}).override("huntabyte:svelte:rules", {
+	// we ignore as it complains about the changed warning names in Svelte 5
+	rules: { "svelte/no-unused-svelte-ignore": "off" },
+});
diff --git a/packages/bits-ui/src/lib/bits/button/components/button.svelte b/packages/bits-ui/src/lib/bits/button/components/button.svelte
@@ -14,7 +14,7 @@
 </script>
 
 {#if builders && builders.length}
-	<!-- svelte-ignore a11y-no-static-element-interactions -->
+	<!-- svelte-ignore a11y-no-static-element-interactions a11y_no_static_element_interactions -->
 	<svelte:element
 		this={href ? "a" : "button"}
 		bind:this={el}
@@ -35,7 +35,7 @@
 		<slot />
 	</svelte:element>
 {:else}
-	<!-- svelte-ignore a11y-no-static-element-interactions -->
+	<!-- svelte-ignore a11y-no-static-element-interactions a11y_no_static_element_interactions -->
 	<svelte:element
 		this={href ? "a" : "button"}
 		bind:this={el}

diff --git a/packages/bits-ui/src/lib/bits/combobox/components/combobox-content.svelte b/packages/bits-ui/src/lib/bits/combobox/components/combobox-content.svelte
@@ -61,7 +61,7 @@
 		});
 </script>
 
-<!-- svelte-ignore a11y-no-static-element-interactions -->
+<!-- svelte-ignore a11y-no-static-element-interactions a11y_no_static_element_interactions -->
 {#if asChild && $open}
 	<slot {builder} />
 {:else if transition && $open}

diff --git a/packages/bits-ui/src/lib/bits/combobox/components/combobox-item.svelte b/packages/bits-ui/src/lib/bits/combobox/components/combobox-item.svelte
@@ -29,8 +29,7 @@
 	$: isSelected = $isSelectedStore(value);
 </script>
 
-<!-- svelte-ignore a11y-no-static-element-interactions-->
-
+<!-- svelte-ignore a11y-no-static-element-interactions a11y_no_static_element_interactions -->
 {#if asChild}
 	<slot {builder} {isSelected} />
 {:else}

diff --git a/packages/bits-ui/src/lib/bits/dialog/components/dialog-overlay.svelte b/packages/bits-ui/src/lib/bits/dialog/components/dialog-overlay.svelte
@@ -34,7 +34,7 @@
 {#if asChild && $open}
 	<slot {builder} />
 {:else if transition && $open}
-	<!-- svelte-ignore a11y-no-static-element-interactions -->
+	<!-- svelte-ignore a11y-no-static-element-interactions a11y_no_static_element_interactions -->
 	<div
 		on:mouseup
 		bind:this={el}
@@ -43,7 +43,7 @@
 		{...$$restProps}
 	></div>
 {:else if inTransition && outTransition && $open}
-	<!-- svelte-ignore a11y-no-static-element-interactions -->
+	<!-- svelte-ignore a11y-no-static-element-interactions a11y_no_static_element_interactions -->
 	<div
 		bind:this={el}
 		in:inTransition={inTransitionConfig}
@@ -53,7 +53,7 @@
 		{...$$restProps}
 	></div>
 {:else if inTransition && $open}
-	<!-- svelte-ignore a11y-no-static-element-interactions -->
+	<!-- svelte-ignore a11y-no-static-element-interactions a11y_no_static_element_interactions -->
 	<div
 		bind:this={el}
 		in:inTransition={inTransitionConfig}
@@ -62,7 +62,7 @@
 		{...$$restProps}
 	></div>
 {:else if outTransition && $open}
-	<!-- svelte-ignore a11y-no-static-element-interactions -->
+	<!-- svelte-ignore a11y-no-static-element-interactions a11y_no_static_element_interactions -->
 	<div
 		bind:this={el}
 		out:outTransition={outTransitionConfig}
@@ -71,6 +71,6 @@
 		{...$$restProps}
 	></div>
 {:else if $open}
-	<!-- svelte-ignore a11y-no-static-element-interactions -->
+	<!-- svelte-ignore a11y-no-static-element-interactions a11y_no_static_element_interactions -->
 	<div bind:this={el} use:melt={builder} on:mouseup {...$$restProps}></div>
 {/if}
diff --git a/packages/bits-ui/src/lib/bits/link-preview/components/link-preview-trigger.svelte b/packages/bits-ui/src/lib/bits/link-preview/components/link-preview-trigger.svelte
@@ -30,8 +30,8 @@
 {#if asChild}
 	<slot {builder} />
 {:else}
-	<svelte:element
-		this={"a"}
+	<!-- svelte-ignore a11y-missing-attribute a11y_missing_attribute -->
+	<a
 		bind:this={el}
 		use:melt={builder}
 		{...$$restProps}
@@ -42,5 +42,5 @@
 		on:m-pointerleave={dispatch}
 	>
 		<slot {builder} />
-	</svelte:element>
+	</a>
 {/if}
diff --git a/packages/bits-ui/src/lib/bits/select/components/select-content.svelte b/packages/bits-ui/src/lib/bits/select/components/select-content.svelte
@@ -66,7 +66,7 @@
 	}
 </script>
 
-<!-- svelte-ignore a11y-no-static-element-interactions -->
+<!-- svelte-ignore a11y-no-static-element-interactions a11y_no_static_element_interactions -->
 {#if asChild && $open}
 	<slot {builder} />
 {:else if transition && $open}

diff --git a/packages/bits-ui/src/lib/bits/select/components/select-item.svelte b/packages/bits-ui/src/lib/bits/select/components/select-item.svelte
@@ -27,7 +27,7 @@
 	$: isSelected = $isSelectedStore(value);
 </script>
 
-<!-- svelte-ignore a11y-no-static-element-interactions -->
+<!-- svelte-ignore a11y-no-static-element-interactions a11y_no_static_element_interactions -->
 {#if asChild}
 	<slot {builder} {isSelected} />
 {:else}

diff --git a/packages/bits-ui/src/lib/bits/toolbar/components/toolbar-link.svelte b/packages/bits-ui/src/lib/bits/toolbar/components/toolbar-link.svelte
@@ -25,15 +25,9 @@
 {#if asChild}
 	<slot {builder} />
 {:else}
-	<!-- svelte-ignore a11y-no-static-element-interactions -->
-	<svelte:element
-		this={"a"}
-		bind:this={el}
-		use:melt={builder}
-		{...$$restProps}
-		on:click
-		on:m-keydown={dispatch}
-	>
+	<!-- svelte-ignore a11y-no-static-element-interactions a11y_no_static_element_interactions -->
+	<!-- svelte-ignore a11y-missing-attribute a11y_missing_attribute -->
+	<a bind:this={el} use:melt={builder} {...$$restProps} on:click on:m-keydown={dispatch}>
 		<slot {builder} />
-	</svelte:element>
+	</a>
 {/if}
diff --git a/packages/bits-ui/src/tests/alert-dialog/AlertDialogTest.svelte b/packages/bits-ui/src/tests/alert-dialog/AlertDialogTest.svelte
@@ -30,5 +30,5 @@
 	<p data-testid="binding">{open}</p>
 	<button data-testid="toggle" on:click={() => (open = !open)}> toggle </button>
 
-	<div id="portalTarget" data-testid="portalTarget" />
+	<div id="portalTarget" data-testid="portalTarget"></div>
 </main>
diff --git a/packages/bits-ui/src/tests/combobox/ComboboxTest.svelte b/packages/bits-ui/src/tests/combobox/ComboboxTest.svelte
@@ -38,7 +38,7 @@
 		</Combobox.Content>
 		<Combobox.HiddenInput data-testid="hidden-input" />
 	</Combobox.Root>
-	<div data-testid="outside" />
+	<div data-testid="outside"></div>
 	<button data-testid="input-binding" on:click={() => (inputValue = "")}>
 		{#if inputValue === ""}
 			empty

diff --git a/packages/bits-ui/src/tests/context-menu/ContextMenuTest.svelte b/packages/bits-ui/src/tests/context-menu/ContextMenuTest.svelte
@@ -98,5 +98,5 @@
 	<button aria-label="radio-sub" data-testid="sub-radio-binding" on:click={() => (subRadio = "")}
 		>{subRadio}</button
 	>
-	<div id="portal-target" data-testid="portal-target" />
+	<div id="portal-target" data-testid="portal-target"></div>
 </main>
diff --git a/packages/bits-ui/src/tests/dialog/DialogTest.svelte b/packages/bits-ui/src/tests/dialog/DialogTest.svelte
@@ -26,5 +26,5 @@
 	</Dialog.Root>
 	<p data-testid="binding">{open}</p>
 	<button data-testid="toggle" on:click={() => (open = !open)}>toggle</button>
-	<div id="portalTarget" data-testid="portalTarget" />
+	<div id="portalTarget" data-testid="portalTarget"></div>
 </main>
diff --git a/packages/bits-ui/src/tests/dropdown-menu/DropdownMenuTest.svelte b/packages/bits-ui/src/tests/dropdown-menu/DropdownMenuTest.svelte
@@ -93,5 +93,5 @@
 	<button aria-label="radio-sub" data-testid="sub-radio-binding" on:click={() => (subRadio = "")}
 		>{subRadio}</button
 	>
-	<div id="portal-target" data-testid="portal-target" />
+	<div id="portal-target" data-testid="portal-target"></div>
 </main>
diff --git a/packages/bits-ui/src/tests/select/SelectTest.svelte b/packages/bits-ui/src/tests/select/SelectTest.svelte
@@ -38,7 +38,7 @@
 		</Select.Content>
 		<Select.Input data-testid="input" />
 	</Select.Root>
-	<div data-testid="outside" />
+	<div data-testid="outside"></div>
 	<button data-testid="open-binding" on:click={() => (open = !open)}>
 		{open}
 	</button>

diff --git a/sites/docs/src/lib/components/api-ref/props-table.svelte b/sites/docs/src/lib/components/api-ref/props-table.svelte
@@ -6,7 +6,7 @@
 	import { parseMarkdown } from "$lib/utils/index.js";
 
 	export let props: PropObj<Record<string, unknown>>;
-	export let slot = false;
+	export let slotted = false;
 
 	$: propData = Object.entries(props).map(([name, prop]) => {
 		const { type, description, default: defaultVal, required } = prop as PropSchema;
@@ -18,7 +18,7 @@
 	<Table.Header>
 		<Table.Row class="w-1/4">
 			<Table.Head class="w-[38%] whitespace-nowrap pr-1"
-				>{slot ? "Slot" : ""} Property</Table.Head
+				>{slotted ? "Slot" : ""} Property</Table.Head
 			>
 			<Table.Head class="w-[22%] whitespace-nowrap pr-1">Type</Table.Head>
 			<Table.Head class="w-[40%] whitespace-nowrap">Description</Table.Head>
@@ -42,14 +42,14 @@
 						<!--  eslint-disable-next-line svelte/no-at-html-tags -->
 						{@html parseMarkdown(description)}
 					</p>
-					{#if !slot}
+					{#if !slotted}
 						<div class="mt-2">
 							<Code class="h-auto bg-background px-0">
 								Default:
 								{#if defaultVal}
 									{` ${defaultVal}`}
 								{:else}
-									<span aria-hidden> &nbsp;—— </span>
+									<span aria-hidden="true"> &nbsp;—— </span>
 									<span class="sr-only"> undefined </span>
 								{/if}
 							</Code>

diff --git a/sites/docs/src/lib/components/api-section.svelte b/sites/docs/src/lib/components/api-section.svelte
@@ -29,7 +29,7 @@
 					<PropsTable props={schema.props} />
 				{/if}
 				{#if schema.slotProps}
-					<PropsTable slot props={schema.slotProps} />
+					<PropsTable slotted props={schema.slotProps} />
 				{/if}
 				{#if schema.dataAttributes && schema.dataAttributes.length}
 					<DataAttrsTable dataAttrs={schema.dataAttributes} />

diff --git a/sites/docs/src/lib/components/component-preview.svelte b/sites/docs/src/lib/components/component-preview.svelte
@@ -43,7 +43,7 @@
 						class="absolute left-0 top-0 h-8 w-full rounded-[7px] bg-background dark:bg-muted"
 						in:send={{ key: "active" }}
 						out:receive={{ key: "active" }}
-					/>
+					></div>
 				{/if}
 			</Tabs.Trigger>
 			<Tabs.Trigger
@@ -66,7 +66,7 @@
 						class="absolute left-0 top-0 h-8 w-full rounded-[7px] bg-background dark:bg-muted"
 						in:send={{ key: "active" }}
 						out:receive={{ key: "active" }}
-					/>
+					></div>
 				{/if}
 			</Tabs.Trigger>
 		</Tabs.List>

diff --git a/sites/docs/src/lib/components/demos/calendar-demo.svelte b/sites/docs/src/lib/components/demos/calendar-demo.svelte
@@ -57,7 +57,7 @@
 									>
 										<div
 											class="absolute top-[5px] hidden size-1 rounded-full bg-foreground group-data-[today]:block group-data-[selected]:bg-background"
-										/>
+										></div>
 										{date.day}
 									</Calendar.Day>
 								</Calendar.Cell>

diff --git a/sites/docs/src/lib/components/demos/date-picker-demo.svelte b/sites/docs/src/lib/components/demos/date-picker-demo.svelte
@@ -86,7 +86,7 @@
 												>
 													<div
 														class="absolute top-[5px] hidden size-1 rounded-full bg-foreground transition-all group-data-[today]:block group-data-[selected]:bg-background"
-													/>
+													></div>
 													{date.day}
 												</DatePicker.Day>
 											</DatePicker.Cell>

diff --git a/sites/docs/src/lib/components/demos/date-range-field-demo.svelte b/sites/docs/src/lib/components/demos/date-range-field-demo.svelte
@@ -38,7 +38,7 @@
 					{/if}
 				</div>
 			{/each}
-			<div aria-hidden class="px-1 text-muted-foreground">–⁠⁠⁠⁠⁠</div>
+			<div aria-hidden="true" class="px-1 text-muted-foreground">–⁠⁠⁠⁠⁠</div>
 			{#each segments.end as { part, value }}
 				<div class="inline-block select-none">
 					{#if part === "literal"}

diff --git a/sites/docs/src/lib/components/demos/date-range-picker-demo.svelte b/sites/docs/src/lib/components/demos/date-range-picker-demo.svelte
@@ -36,7 +36,7 @@
 					{/if}
 				</div>
 			{/each}
-			<div aria-hidden class="px-1 text-muted-foreground">–</div>
+			<div aria-hidden="true" class="px-1 text-muted-foreground">–</div>
 			{#each segments.end as { part, value }}
 				<div class="inline-block select-none">
 					{#if part === "literal"}
@@ -114,7 +114,7 @@
 												>
 													<div
 														class="absolute top-[5px] hidden size-1 rounded-full bg-foreground transition-all group-data-[today]:block group-data-[selected]:bg-background"
-													/>
+													></div>
 													{date.day}
 												</DateRangePicker.Day>
 											</DateRangePicker.Cell>

diff --git a/sites/docs/src/lib/components/demos/popover-demo.svelte b/sites/docs/src/lib/components/demos/popover-demo.svelte
@@ -33,8 +33,9 @@
 			<div class="mr-2 flex items-center">
 				<div class="relative mr-2">
 					<span class="sr-only">Width</span>
-					<span aria-hidden class="absolute left-5 top-4 text-xxs text-muted-foreground"
-						>W</span
+					<span
+						aria-hidden="true"
+						class="absolute left-5 top-4 text-xxs text-muted-foreground">W</span
 					>
 					<input
 						type="number"
@@ -44,8 +45,9 @@
 				</div>
 				<div class="relative">
 					<span class="sr-only">Height</span>
-					<span aria-hidden class="absolute left-5 top-4 text-xxs text-muted-foreground"
-						>H</span
+					<span
+						aria-hidden="true"
+						class="absolute left-5 top-4 text-xxs text-muted-foreground">H</span
 					>
 					<input
 						type="number"

diff --git a/sites/docs/src/lib/components/demos/progress-demo.svelte b/sites/docs/src/lib/components/demos/progress-demo.svelte
@@ -17,5 +17,5 @@
 	<div
 		class="h-full w-full flex-1 rounded-full bg-foreground shadow-mini-inset transition-all duration-1000 ease-in-out"
 		style={`transform: translateX(-${100 - (100 * (value ?? 0)) / (100 ?? 1)}%)`}
-	/>
+	></div>
 </Progress.Root>
diff --git a/sites/docs/src/lib/components/demos/range-calendar-demo.svelte b/sites/docs/src/lib/components/demos/range-calendar-demo.svelte
@@ -55,7 +55,7 @@
 									>
 										<div
 											class="absolute top-[5px] hidden size-1 rounded-full bg-foreground group-data-[today]:block group-data-[selected]:bg-background"
-										/>
+										></div>
 										{date.day}
 									</RangeCalendar.Day>
 								</RangeCalendar.Cell>

diff --git a/sites/docs/src/lib/components/icons/switch-off.svelte b/sites/docs/src/lib/components/icons/switch-off.svelte
@@ -3,5 +3,5 @@
 >
 	<span
 		class="pointer-events-none block size-[13px] shrink-0 translate-x-0 rounded-full bg-background shadow-mini transition-transform dark:border dark:border-border-input dark:shadow-mini"
-	/>
+	></span>
 </div>
diff --git a/sites/docs/src/lib/components/icons/switch-on.svelte b/sites/docs/src/lib/components/icons/switch-on.svelte
@@ -3,5 +3,5 @@
 >
 	<span
 		class="pointer-events-none block size-[13px] shrink-0 translate-x-[10px] rounded-full bg-background dark:border-border-input dark:shadow-mini"
-	/>
+	></span>
 </div>