chore: cleanup internals, update Svelte

.changeset/serious-crabs-arrive.md

@@ -0,0 +1,5 @@
+---
+"bits-ui": patch
+---
+
+cleanup internals, update Svelte

eslint.config.js

@@ -1,29 +1,57 @@
-import config, { DEFAULT_IGNORES } from "@huntabyte/eslint-config";
+import eslint from "@eslint/js";
+import prettier from "eslint-config-prettier";
+import svelte from "eslint-plugin-svelte";
+import globals from "globals";
+import tseslint from "typescript-eslint";
 
-const ignores = ["**/extended-types", "**/.velite"];
-
-export default config({ svelte: true, ignores: [...DEFAULT_IGNORES, ...ignores] })
-	.override("antfu/typescript/rules", {
-		rules: {
-			"ts/consistent-type-definitions": "off",
-			"unused-imports/no-unused-imports": "off",
-			"unused-imports/no-unused-vars": "off",
-			"ts/no-unused-expressions": "off",
-			"no-unused-expressions": "off",
-			"ts/no-empty-object-type": "off",
+export default tseslint.config(
+	eslint.configs.recommended,
+	...tseslint.configs.recommended,
+	...svelte.configs["flat/recommended"],
+	prettier,
+	...svelte.configs["flat/prettier"],
+	{
+		languageOptions: {
+			globals: {
+				...globals.browser,
+				...globals.node,
+			},
 		},
-	})
-	.override("antfu/javascript/rules", {
-		rules: {
-			"no-unused-expressions": "off",
-			"unused-imports/no-unused-imports": "off",
+	},
+	{
+		files: ["**/*.svelte"],
+		languageOptions: {
+			parserOptions: {
+				parser: tseslint.parser,
+			},
 		},
-	})
-	.override("huntabyte/svelte/rules", {
+	},
+	{
 		rules: {
-			"svelte/no-at-html-tags": "off",
-			"unused-imports/no-unused-imports": "off",
-			"unused-imports/no-unused-vars": "off",
-			"import/no-self-import": "off",
+			"@typescript-eslint/no-unused-vars": [
+				"error",
+				{
+					argsIgnorePattern: "^_",
+					varsIgnorePattern: "^_",
+				},
+			],
+			"@typescript-eslint/no-unused-expressions": "off",
+			"@typescript-eslint/no-empty-object-type": "off",
+			"prefer-const": "off",
 		},
-	});
+	},
+	{
+		ignores: [
+			"build/",
+			".svelte-kit/",
+			"dist/",
+			".svelte-kit/**/*",
+			"sites/docs/.svelte-kit/**/*",
+			"sites/docs/.velite/**/*",
+			".svelte-kit",
+			"packages/bits-ui/dist/**/*",
+			"packages/bits-ui/.svelte-kit/**/*",
+			"packages/tests/.svelte-kit/**/*",
+		],
+	}
+);

package.json

@@ -20,23 +20,29 @@
 	"license": "MIT",
 	"devDependencies": {
 		"@changesets/cli": "^2.27.9",
-		"@huntabyte/eslint-config": "^0.3.2",
-		"@huntabyte/eslint-plugin": "^0.1.0",
+		"@eslint/js": "^9.12.0",
 		"@svitejs/changesets-changelog-github-compact": "^1.2.0",
-		"eslint": "^9.14.0",
-		"eslint-plugin-svelte": "^2.46.0",
+		"@typescript-eslint/eslint-plugin": "^8.10.0",
+		"@typescript-eslint/scope-manager": "^8.10.0",
+		"@typescript-eslint/utils": "^8.10.0",
+		"eslint": "^9.0.0",
+		"eslint-config-prettier": "^9.1.0",
+		"eslint-plugin-svelte": "^2.46.1",
+		"globals": "^15.11.0",
 		"prettier": "^3.3.3",
-		"prettier-plugin-svelte": "^3.2.8",
-		"prettier-plugin-tailwindcss": "0.5.13",
-		"svelte": "^5.1.16",
-		"svelte-eslint-parser": "^0.41.1",
+		"prettier-plugin-svelte": "^3.3.2",
+		"prettier-plugin-tailwindcss": "^0.6.8",
+		"svelte": "^5.16.0",
+		"svelte-eslint-parser": "^0.43.0",
+		"typescript": "^5.6.3",
+		"typescript-eslint": "^8.10.0",
 		"wrangler": "^3.87.0"
 	},
 	"type": "module",
 	"engines": {
-		"pnpm": ">=8.7.0",
+		"pnpm": ">=9.0.0",
 		"node": ">=18"
 	},
-	"packageManager": "pnpm@9.6.0",
+	"packageManager": "pnpm@9.14.4",
 	"private": true
 }

packages/bits-ui/package.json

@@ -29,19 +29,19 @@
 	"devDependencies": {
 		"@sveltejs/kit": "^2.8.1",
 		"@sveltejs/package": "^2.3.7",
-		"@sveltejs/vite-plugin-svelte": "4.0.0-next.7",
+		"@sveltejs/vite-plugin-svelte": "4.0.0",
 		"@types/node": "^20.17.6",
 		"@types/resize-observer-browser": "^0.1.11",
 		"csstype": "^3.1.3",
 		"jest-axe": "^9.0.0",
 		"jsdom": "^24.1.3",
 		"publint": "^0.2.12",
-		"svelte": "^5.1.16",
+		"svelte": "^5.16.0",
 		"svelte-check": "^4.0.7",
 		"tslib": "^2.8.1",
 		"typescript": "^5.6.3",
 		"vite": "^5.4.11",
-		"vitest": "^2.1.5"
+		"vitest": "^2.1.8"
 	},
 	"svelte": "./dist/index.js",
 	"types": "./dist/index.d.ts",
@@ -51,11 +51,11 @@
 		"@floating-ui/dom": "^1.6.7",
 		"@internationalized/date": "^3.5.6",
 		"esm-env": "^1.1.2",
-		"runed": "^0.15.2",
-		"svelte-toolbelt": "^0.4.4"
+		"runed": "^0.22.0",
+		"svelte-toolbelt": "^0.7.0"
 	},
 	"peerDependencies": {
-		"svelte": "^5.0.0"
+		"svelte": "^5.11.0"
 	},
 	"engines": {
 		"pnpm": ">=8.7.0",

packages/bits-ui/src/lib/app.d.ts

@@ -1,17 +1,14 @@
+/* eslint-disable no-var */
 import type { ReadableBox } from "svelte-toolbelt";
-import type { DismissibleLayerState } from "./bits/utilities/dismissible-layer/useDismissibleLayer.svelte.ts";
+import type { DismissibleLayerState } from "./bits/utilities/dismissible-layer/use-dismissable-layer.svelte.ts";
 import type { InteractOutsideBehaviorType } from "./bits/utilities/dismissible-layer/types.ts";
-import type { EscapeLayerState } from "./bits/utilities/escape-layer/useEscapeLayer.svelte.ts";
+import type { EscapeLayerState } from "./bits/utilities/escape-layer/use-escape-layer.svelte.ts";
 import type { EscapeBehaviorType } from "./bits/utilities/escape-layer/types.ts";
-import type { TextSelectionLayerState } from "./bits/utilities/text-selection-layer/useTextSelectionLayer.svelte.ts";
+import type { TextSelectionLayerState } from "./bits/utilities/text-selection-layer/use-text-selection-layer.svelte.ts";
 
 declare global {
-	// eslint-disable-next-line vars-on-top, no-var
 	var bitsDismissableLayers: Map<DismissibleLayerState, ReadableBox<InteractOutsideBehaviorType>>;
-	// eslint-disable-next-line vars-on-top, no-var
 	var bitsEscapeLayers: Map<EscapeLayerState, ReadableBox<EscapeBehaviorType>>;
-	// eslint-disable-next-line vars-on-top, no-var
 	var bitsTextSelectionLayers: Map<TextSelectionLayerState, ReadableBox<boolean>>;
-	// eslint-disable-next-line vars-on-top, no-var
 	var bitsIdCounter: { current: number };
 }

packages/bits-ui/src/lib/bits/accordion/accordion.svelte.ts

@@ -1,5 +1,5 @@
 import { afterTick, useRefById } from "svelte-toolbelt";
-import { watch } from "runed";
+import { Context, watch } from "runed";
 import type { Box, ReadableBoxedValues, WritableBoxedValues } from "$lib/internal/box.svelte.js";
 import type { BitsKeyboardEvent, BitsMouseEvent, WithRefProps } from "$lib/internal/types.js";
 import {
@@ -15,7 +15,6 @@ import {
 	useRovingFocus,
 } from "$lib/internal/use-roving-focus.svelte.js";
 import type { Orientation } from "$lib/shared/index.js";
-import { createContext } from "$lib/internal/create-context.js";
 
 const ACCORDION_ROOT_ATTR = "data-accordion-root";
 const ACCORDION_TRIGGER_ATTR = "data-accordion-trigger";
@@ -405,36 +404,31 @@ type InitAccordionProps = WithRefProps<
 	}>
 >;
 
-const [setAccordionRootContext, getAccordionRootContext] =
-	createContext<AccordionState>("Accordion.Root");
-const [setAccordionItemContext, getAccordionItemContext] =
-	createContext<AccordionItemState>("Accordion.Item");
+const AccordionRootContext = new Context<AccordionState>("Accordion.Root");
+const AccordionItemContext = new Context<AccordionItemState>("Accordion.Item");
 
 export function useAccordionRoot(props: InitAccordionProps) {
 	const { type, ...rest } = props;
 	const rootState =
 		type === "single"
 			? new AccordionSingleState(rest as AccordionSingleStateProps)
 			: new AccordionMultiState(rest as AccordionMultiStateProps);
-	return setAccordionRootContext(rootState);
+	return AccordionRootContext.set(rootState);
 }
 
 export function useAccordionItem(props: Omit<AccordionItemStateProps, "rootState">) {
-	const rootState = getAccordionRootContext();
-	return setAccordionItemContext(new AccordionItemState({ ...props, rootState }));
+	const rootState = AccordionRootContext.get();
+	return AccordionItemContext.set(new AccordionItemState({ ...props, rootState }));
 }
 
 export function useAccordionTrigger(props: AccordionTriggerStateProps): AccordionTriggerState {
-	const item = getAccordionItemContext();
-	return new AccordionTriggerState(props, item);
+	return new AccordionTriggerState(props, AccordionItemContext.get());
 }
 
 export function useAccordionContent(props: AccordionContentStateProps): AccordionContentState {
-	const item = getAccordionItemContext();
-	return new AccordionContentState(props, item);
+	return new AccordionContentState(props, AccordionItemContext.get());
 }
 
 export function useAccordionHeader(props: AccordionHeaderStateProps): AccordionHeaderState {
-	const item = getAccordionItemContext();
-	return new AccordionHeaderState(props, item);
+	return new AccordionHeaderState(props, AccordionItemContext.get());
 }

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

@@ -28,9 +28,11 @@
 			() => value!,
 			(v) => {
 				if (controlledValue) {
+					// eslint-disable-next-line @typescript-eslint/no-explicit-any
 					onValueChange(v as any);
 				} else {
 					value = v;
+					// eslint-disable-next-line @typescript-eslint/no-explicit-any
 					onValueChange(v as any);
 				}
 			}

packages/bits-ui/src/lib/bits/avatar/avatar.svelte.ts

@@ -1,8 +1,8 @@
 import { untrack } from "svelte";
 import { type ReadableBox, type WritableBox, useRefById } from "svelte-toolbelt";
 import type { HTMLImgAttributes } from "svelte/elements";
+import { Context } from "runed";
 import type { AvatarImageLoadingStatus } from "./types.js";
-import { createContext } from "$lib/internal/create-context.js";
 import type { ReadableBoxedValues } from "$lib/internal/box.svelte.js";
 import type { WithRefProps } from "$lib/internal/types.js";
 
@@ -175,22 +175,16 @@ class AvatarFallbackState {
 	);
 }
 
-/**
- * CONTEXT METHODS
- */
-
-const [setAvatarRootContext, getAvatarRootContext] = createContext<AvatarRootState>("Avatar.Root");
+const AvatarRootContext = new Context<AvatarRootState>("Avatar.Root");
 
 export function useAvatarRoot(props: AvatarRootStateProps) {
-	return setAvatarRootContext(new AvatarRootState(props));
+	return AvatarRootContext.set(new AvatarRootState(props));
 }
 
 export function useAvatarImage(props: AvatarImageStateProps) {
-	const root = getAvatarRootContext();
-	return new AvatarImageState(props, root);
+	return new AvatarImageState(props, AvatarRootContext.get());
 }
 
 export function useAvatarFallback(props: AvatarFallbackStateProps) {
-	const root = getAvatarRootContext();
-	return new AvatarFallbackState(props, root);
+	return new AvatarFallbackState(props, AvatarRootContext.get());
 }