next: initial svelte 5 setup

eslint.config.js

@@ -2,4 +2,11 @@ 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(
+	"antfu/typescript/rules",
+	{
+		rules: {
+			"ts/consistent-type-definitions": "off",
+		},
+	}
+);

package.json

@@ -18,15 +18,16 @@
 	"license": "MIT",
 	"devDependencies": {
 		"@changesets/cli": "^2.27.1",
-		"@huntabyte/eslint-config": "^0.1.1",
+		"@huntabyte/eslint-config": "^0.3.1",
+		"@huntabyte/eslint-plugin": "^0.1.0",
 		"@svitejs/changesets-changelog-github-compact": "^1.1.0",
-		"eslint": "^8.56.0",
-		"eslint-plugin-svelte": "^2.35.1",
+		"eslint": "^9.0.0",
+		"eslint-plugin-svelte": "^2.37.0",
 		"prettier": "^3.2.5",
 		"prettier-plugin-svelte": "^3.2.2",
 		"prettier-plugin-tailwindcss": "0.5.13",
-		"svelte": "^4.2.9",
-		"svelte-eslint-parser": "^0.33.1",
+		"svelte": "5.0.0-next.100",
+		"svelte-eslint-parser": "^0.34.1",
 		"wrangler": "^3.44.0"
 	},
 	"type": "module",

packages/bits-ui/package.json

@@ -30,23 +30,23 @@
 		"@melt-ui/pp": "^0.3.0",
 		"@sveltejs/kit": "^2.5.0",
 		"@sveltejs/package": "^2.2.7",
-		"@sveltejs/vite-plugin-svelte": "^3.0.2",
+		"@sveltejs/vite-plugin-svelte": "^3.1.0",
 		"@testing-library/dom": "^9.3.4",
 		"@testing-library/jest-dom": "^6.4.1",
 		"@testing-library/svelte": "^4.1.0",
 		"@testing-library/user-event": "^14.5.2",
 		"@types/jest-axe": "^3.5.9",
+		"@types/node": "^20.12.2",
 		"@types/testing-library__jest-dom": "^5.14.9",
-		"autoprefixer": "^10.4.17",
 		"jest-axe": "^8.0.0",
 		"jsdom": "^24.0.0",
 		"publint": "^0.2.7",
 		"resize-observer-polyfill": "^1.5.1",
-		"svelte": "^4.2.9",
-		"svelte-check": "^3.6.3",
+		"svelte": "5.0.0-next.100",
+		"svelte-check": "^3.6.9",
 		"tslib": "^2.6.2",
 		"typescript": "^5.3.3",
-		"vite": "^5.0.12",
+		"vite": "^5.2.8",
 		"vitest": "^1.2.2"
 	},
 	"svelte": "./dist/index.js",
@@ -55,9 +55,10 @@
 	"dependencies": {
 		"@internationalized/date": "^3.5.1",
 		"@melt-ui/svelte": "0.76.2",
+		"esm-env": "^1.0.0",
 		"nanoid": "^5.0.5"
 	},
 	"peerDependencies": {
-		"svelte": "^4.0.0"
+		"svelte": "^5.0.0"
 	}
 }

packages/bits-ui/src/lib/bits/accordion/components/accordion-content.svelte

@@ -1,68 +1,27 @@
-<script lang="ts">
-	import { melt } from "@melt-ui/svelte";
-	import type { ContentProps } from "../index.js";
-	import { getContent } from "../ctx.js";
+<script lang="ts" context="module">
+	// eslint-disable-next-line unused-imports/no-unused-imports, ts/no-unused-vars
 	import type { Transition } from "$lib/internal/index.js";
+</script>
 
-	type T = $$Generic<Transition>;
-	type In = $$Generic<Transition>;
-	type Out = $$Generic<Transition>;
-
-	type $$Props = ContentProps<T, In, Out>;
-
-	export let transition: $$Props["transition"] = undefined;
-	export let transitionConfig: $$Props["transitionConfig"] = undefined;
-	export let inTransition: $$Props["inTransition"] = undefined;
-	export let inTransitionConfig: ContentProps<T>["inTransitionConfig"] = undefined;
-	export let outTransition: $$Props["outTransition"] = undefined;
-	export let outTransitionConfig: $$Props["outTransitionConfig"] = undefined;
-	export let asChild: $$Props["asChild"] = false;
-	export let el: $$Props["el"] = undefined;
+<script lang="ts" generics="T extends Transition, In extends Transition, Out extends Transition">
+	import { getAccordionContentState } from "../state.svelte.js";
+	import type { AccordionContentProps } from "../types.js";
+	import WithTransition from "$lib/bits/utilities/with-transition.svelte";
 
-	const {
-		elements: { content },
-		helpers: { isSelected },
-		props,
-		getAttrs,
-	} = getContent();
+	let { child, asChild, ...restProps }: AccordionContentProps<T, In, Out> = $props();
 
-	const attrs = getAttrs("content");
+	const content = getAccordionContentState();
 
-	$: builder = $content(props);
-	$: Object.assign(builder, attrs);
+	const mergedProps = $derived({
+		...restProps,
+		...content.props,
+	});
 </script>
 
-{#if asChild && $isSelected(props)}
-	<slot {builder} />
-{:else if transition && $isSelected(props)}
-	<div
-		bind:this={el}
-		transition:transition={transitionConfig}
-		use:melt={builder}
-		{...$$restProps}
-	>
-		<slot {builder} />
-	</div>
-{:else if inTransition && outTransition && $isSelected(props)}
-	<div
-		bind:this={el}
-		in:inTransition={inTransitionConfig}
-		out:outTransition={outTransitionConfig}
-		use:melt={builder}
-		{...$$restProps}
-	>
-		<slot {builder} />
-	</div>
-{:else if inTransition && $isSelected(props)}
-	<div bind:this={el} in:inTransition={inTransitionConfig} use:melt={builder} {...$$restProps}>
-		<slot {builder} />
-	</div>
-{:else if outTransition && $isSelected(props)}
-	<div bind:this={el} out:outTransition={outTransitionConfig} use:melt={builder} {...$$restProps}>
-		<slot {builder} />
-	</div>
-{:else if $isSelected(props)}
-	<div bind:this={el} use:melt={builder} {...$$restProps}>
-		<slot {builder} />
-	</div>
+{#if asChild && content.item.isSelected}
+	{#if child}
+		{@render child(mergedProps)}
+	{/if}
+{:else}
+	<WithTransition {...mergedProps} condition={content.item.isSelected} />
 {/if}

packages/bits-ui/src/lib/bits/accordion/components/accordion-header.svelte

@@ -1,29 +1,22 @@
 <script lang="ts">
-	import { melt } from "@melt-ui/svelte";
-	import { getCtx } from "../ctx.js";
-	import type { HeaderProps } from "../index.js";
+	import type { AccordionHeaderProps } from "../types.js";
 
-	type $$Props = HeaderProps;
+	let { asChild, level = 2, children, child, ...restProps }: AccordionHeaderProps = $props();
 
-	export let level = 3;
-	export let asChild: $$Props["asChild"] = false;
-	export let el: $$Props["el"] = undefined;
-
-	const {
-		elements: { heading: header },
-		getAttrs,
-	} = getCtx();
-
-	const attrs = getAttrs("header");
-
-	$: builder = $header(level);
-	$: Object.assign(builder, attrs);
+	const mergedProps = $derived({
+		...restProps,
+		role: "heading",
+		"aria-level": level,
+		"data-heading-level": level,
+	});
 </script>
 
-{#if asChild}
-	<slot {builder} />
+{#if asChild && child}
+	{@render child(mergedProps)}
 {:else}
-	<div bind:this={el} use:melt={builder} {...$$restProps}>
-		<slot {builder} />
+	<div {...mergedProps}>
+		{#if children}
+			{@render children()}
+		{/if}
 	</div>
 {/if}

packages/bits-ui/src/lib/bits/accordion/components/accordion-item.svelte

@@ -1,29 +1,41 @@
 <script lang="ts">
-	import { melt } from "@melt-ui/svelte";
-	import { setItem } from "../ctx.js";
-	import type { ItemProps } from "../index.js";
-	type $$Props = ItemProps;
+	import type { AccordionItemProps } from "../types.js";
+	import { setAccordionItemState } from "../state.svelte.js";
+	let {
+		asChild,
+		disabled = false,
+		value,
+		children,
+		child,
+		el,
+		...restProps
+	}: AccordionItemProps = $props();
 
-	export let value: $$Props["value"];
-	export let disabled: $$Props["disabled"] = undefined;
-	export let asChild: $$Props["asChild"] = false;
-	export let el: $$Props["el"] = undefined;
+	const item = setAccordionItemState({ value, disabled });
 
-	const {
-		elements: { item },
-		props,
-		getAttrs,
-	} = setItem({ value, disabled });
-	const attrs = getAttrs("item");
+	let isDisabled = $derived(disabled || item.root.disabled);
 
-	$: builder = $item(props);
-	$: Object.assign(builder, attrs);
+	$effect.pre(() => {
+		item.disabled = disabled;
+	});
+
+	$effect.pre(() => {
+		item.value = value;
+	});
+
+	const mergedProps = $derived({
+		...restProps,
+		"data-state": item.isSelected ? "open" : "closed",
+		"data-disabled": isDisabled ? "" : undefined,
+	});
 </script>
 
-{#if asChild}
-	<slot {builder} />
+{#if asChild && child}
+	{@render child(mergedProps)}
 {:else}
-	<div bind:this={el} use:melt={builder} {...$$restProps}>
-		<slot {builder} />
+	<div {...mergedProps} bind:this={el}>
+		{#if children}
+			{@render children()}
+		{/if}
 	</div>
 {/if}

packages/bits-ui/src/lib/bits/accordion/components/accordion-trigger.svelte

@@ -1,38 +1,49 @@
 <script lang="ts">
-	import { melt } from "@melt-ui/svelte";
-	import { getTrigger } from "../ctx.js";
-	import type { TriggerEvents, TriggerProps } from "../index.js";
-	import { createDispatcher } from "$lib/internal/events.js";
+	import type { AccordionTriggerProps } from "../types.js";
+	import { getAccordionTriggerState } from "../state.svelte.js";
 
-	type $$Props = TriggerProps;
-	type $$Events = TriggerEvents;
+	let {
+		disabled = false,
+		asChild,
+		el,
+		onkeydown = undefined,
+		onclick = undefined,
+		children,
+		child,
+		...restProps
+	}: AccordionTriggerProps = $props();
 
-	export let asChild: $$Props["asChild"] = false;
-	export let el: $$Props["el"] = undefined;
+	const trigger = getAccordionTriggerState({
+		disabled,
+		onkeydown,
+		onclick,
+	});
 
-	const {
-		elements: { trigger },
-		props,
-		getAttrs,
-	} = getTrigger();
-	const dispatch = createDispatcher();
-	const attrs = getAttrs("trigger");
+	$effect.pre(() => {
+		trigger.disabled = disabled;
+	});
+	$effect.pre(() => {
+		trigger.el = el;
+	});
+	$effect.pre(() => {
+		trigger.handlers.click = onclick;
+	});
+	$effect.pre(() => {
+		trigger.handlers.keydown = onkeydown;
+	});
 
-	$: builder = $trigger(props);
-	$: Object.assign(builder, attrs);
+	const mergedProps = $derived({
+		...restProps,
+		...trigger.props,
+	});
 </script>
 
-{#if asChild}
-	<slot {builder} />
+{#if asChild && child}
+	{@render child(mergedProps)}
 {:else}
-	<button
-		bind:this={el}
-		use:melt={builder}
-		type="button"
-		{...$$restProps}
-		on:m-keydown={dispatch}
-		on:m-click={dispatch}
-	>
-		<slot {builder} />
+	<button bind:this={el} type="button" {...mergedProps}>
+		{#if children}
+			{@render children()}
+		{/if}
 	</button>
 {/if}