fix: more tree shaking work (#257)

.changeset/wet-humans-deliver.md

@@ -0,0 +1,5 @@
+---
+"bits-ui": patch
+---
+
+fix: improve tree-shaking

src/content/api-reference/extended-types/index.d.ts

@@ -0,0 +1,4 @@
+import type { PropType } from "@/types";
+export declare const monthsPropType: PropType;
+export declare const focusProp: PropType;
+export declare const pageItemProp: PropType;

src/lib/bits/slider/components/slider-input.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { getCtx } from "../ctx.js";
 	import type { InputProps } from "../types.js";
-	import { srOnlyStyles } from "$lib/internal/style.js";
+	import { getSrOnlyStyles } from "$lib/internal/style.js";
 
 	type $$Props = InputProps;
 	export let el: $$Props["el"] = undefined;
@@ -21,7 +21,7 @@
 
 	const attrs = {
 		...getAttrs("input"),
-		style: srOnlyStyles
+		style: getSrOnlyStyles()
 	};
 
 	$: inputValue = getValue($value);

src/lib/internal/kbd.ts

@@ -1,35 +1,37 @@
-export const kbd = {
-	ALT: "Alt",
-	ARROW_DOWN: "ArrowDown",
-	ARROW_LEFT: "ArrowLeft",
-	ARROW_RIGHT: "ArrowRight",
-	ARROW_UP: "ArrowUp",
-	BACKSPACE: "Backspace",
-	CAPS_LOCK: "CapsLock",
-	CONTROL: "Control",
-	DELETE: "Delete",
-	END: "End",
-	ENTER: "Enter",
-	ESCAPE: "Escape",
-	F1: "F1",
-	F10: "F10",
-	F11: "F11",
-	F12: "F12",
-	F2: "F2",
-	F3: "F3",
-	F4: "F4",
-	F5: "F5",
-	F6: "F6",
-	F7: "F7",
-	F8: "F8",
-	F9: "F9",
-	HOME: "Home",
-	META: "Meta",
-	PAGE_DOWN: "PageDown",
-	PAGE_UP: "PageUp",
-	SHIFT: "Shift",
-	SPACE: " ",
-	TAB: "Tab",
-	CTRL: "Control",
-	ASTERISK: "*"
-};
+export function getKbd() {
+	return {
+		ALT: "Alt",
+		ARROW_DOWN: "ArrowDown",
+		ARROW_LEFT: "ArrowLeft",
+		ARROW_RIGHT: "ArrowRight",
+		ARROW_UP: "ArrowUp",
+		BACKSPACE: "Backspace",
+		CAPS_LOCK: "CapsLock",
+		CONTROL: "Control",
+		DELETE: "Delete",
+		END: "End",
+		ENTER: "Enter",
+		ESCAPE: "Escape",
+		F1: "F1",
+		F10: "F10",
+		F11: "F11",
+		F12: "F12",
+		F2: "F2",
+		F3: "F3",
+		F4: "F4",
+		F5: "F5",
+		F6: "F6",
+		F7: "F7",
+		F8: "F8",
+		F9: "F9",
+		HOME: "Home",
+		META: "Meta",
+		PAGE_DOWN: "PageDown",
+		PAGE_UP: "PageUp",
+		SHIFT: "Shift",
+		SPACE: " ",
+		TAB: "Tab",
+		CTRL: "Control",
+		ASTERISK: "*"
+	};
+}

src/lib/internal/style.ts

@@ -5,24 +5,16 @@ export function styleToString(style: Record<string, number | string | undefined>
 	}, "");
 }
 
-export const srOnlyStyles = styleToString({
-	position: "absolute",
-	width: "1px",
-	height: "1px",
-	padding: "0",
-	margin: "-1px",
-	overflow: "hidden",
-	clip: "rect(0, 0, 0, 0)",
-	whiteSpace: "nowrap",
-	borderWidth: "0"
-});
-
-export const hiddenInputStyles = styleToString({
-	position: "absolute",
-	width: "25px",
-	height: "25px",
-	opacity: "0",
-	margin: "0px",
-	pointerEvents: "none",
-	transform: "translateX(-100%)"
-});
+export function getSrOnlyStyles() {
+	return styleToString({
+		position: "absolute",
+		width: "1px",
+		height: "1px",
+		padding: "0",
+		margin: "-1px",
+		overflow: "hidden",
+		clip: "rect(0, 0, 0, 0)",
+		whiteSpace: "nowrap",
+		borderWidth: "0"
+	});
+}

src/tests/accordion/Accordion.spec.ts

@@ -4,9 +4,11 @@ import { axe } from "jest-axe";
 import { describe, it } from "vitest";
 import AccordionTest from "./AccordionTest.svelte";
 import type { Item } from "./AccordionTest.svelte";
-import { testKbd as kbd } from "../utils";
+import { getTestKbd } from "../utils";
 import AccordionTestIsolated from "./AccordionTestIsolated.svelte";
 
+const kbd = getTestKbd();
+
 const items: Item[] = [
 	{
 		value: "item-1",

src/tests/alert-dialog/AlertDialog.spec.ts

@@ -3,10 +3,12 @@ import userEvent from "@testing-library/user-event";
 import { axe } from "jest-axe";
 import { describe, it } from "vitest";
 import AlertDialogTest from "./AlertDialogTest.svelte";
-import { testKbd as kbd } from "../utils.js";
+import { getTestKbd } from "../utils.js";
 import { sleep } from "$lib/internal";
 import type { AlertDialog } from "$lib";
 
+const kbd = getTestKbd();
+
 function expectIsClosed(
 	queryByTestId: (id: Matcher, options?: MatcherOptions | undefined) => HTMLElement | null
 ) {

src/tests/calendar/Calendar.spec.ts

@@ -2,13 +2,15 @@ import { render } from "@testing-library/svelte";
 import userEvent from "@testing-library/user-event";
 import { axe } from "jest-axe";
 import { describe, it } from "vitest";
-import { testKbd as kbd } from "../utils.js";
+import { getTestKbd } from "../utils.js";
 import CalendarTest from "./CalendarTest.svelte";
 import type { Calendar } from "$lib";
 import { CalendarDate, CalendarDateTime, toZoned } from "@internationalized/date";
 import CalendarMultiTest from "./CalendarMultiTest.svelte";
 import { getSelectedDay, getSelectedDays } from "../helpers/calendar.js";
 
+const kbd = getTestKbd();
+
 const calendarDate = new CalendarDate(1980, 1, 20);
 const calendarDateTime = new CalendarDateTime(1980, 1, 20, 12, 30, 0, 0);
 const zonedDateTime = toZoned(calendarDateTime, "America/New_York");

src/tests/checkbox/Checkbox.spec.ts

@@ -3,10 +3,12 @@ import userEvent from "@testing-library/user-event";
 import { axe } from "jest-axe";
 import { describe, it } from "vitest";
 import CheckboxTest from "./CheckboxTest.svelte";
-import { testKbd as kbd } from "../utils.js";
+import { getTestKbd } from "../utils.js";
 import { tick } from "svelte";
 import type { Checkbox } from "$lib";
 
+const kbd = getTestKbd();
+
 function setup(props?: Checkbox.Props) {
 	const user = userEvent.setup();
 	const returned = render(CheckboxTest, props);

src/tests/context-menu/ContextMenu.spec.ts

@@ -3,9 +3,11 @@ import userEvent from "@testing-library/user-event";
 import { axe } from "jest-axe";
 import { describe, it } from "vitest";
 import ContextMenuTest from "./ContextMenuTest.svelte";
-import { testKbd as kbd } from "../utils.js";
+import { getTestKbd } from "../utils.js";
 import type { ContextMenuTestProps } from "./ContextMenuTest.svelte";
 
+const kbd = getTestKbd();
+
 /**
  * Helper function to reduce boilerplate in tests
  */

src/tests/date-field/DateField.spec.ts

@@ -2,7 +2,7 @@ import { render } from "@testing-library/svelte";
 import userEvent from "@testing-library/user-event";
 import { axe } from "jest-axe";
 import { describe, it } from "vitest";
-import { testKbd as kbd } from "../utils.js";
+import { getTestKbd } from "../utils.js";
 import DateFieldTest from "./DateFieldTest.svelte";
 import type { DateField } from "$lib";
 import {
@@ -15,6 +15,8 @@ import {
 	parseAbsoluteToLocal
 } from "@internationalized/date";
 
+const kbd = getTestKbd();
+
 const calendarDate = new CalendarDate(1980, 1, 20);
 const calendarDateTime = new CalendarDateTime(1980, 1, 20, 12, 30, 0, 0);
 const zonedDateTime = toZoned(calendarDateTime, "America/New_York");

src/tests/date-range-field/DateRangeField.spec.ts

@@ -2,11 +2,13 @@ import { render } from "@testing-library/svelte";
 import userEvent from "@testing-library/user-event";
 import { axe } from "jest-axe";
 import { describe, it } from "vitest";
-import { testKbd as kbd } from "../utils.js";
+import { getTestKbd } from "../utils.js";
 import DateRangeFieldTest from "./DateRangeFieldTest.svelte";
 import type { DateRangeField } from "$lib";
 import { CalendarDate, CalendarDateTime, toZoned } from "@internationalized/date";
 
+const kbd = getTestKbd();
+
 const calendarDate = {
 	start: new CalendarDate(2022, 1, 1),
 	end: new CalendarDate(2022, 3, 1)

src/tests/dialog/Dialog.spec.ts

@@ -3,10 +3,12 @@ import userEvent from "@testing-library/user-event";
 import { axe } from "jest-axe";
 import { describe, it } from "vitest";
 import DialogTest from "./DialogTest.svelte";
-import { testKbd as kbd } from "../utils.js";
+import { getTestKbd } from "../utils.js";
 import { sleep } from "$lib/internal";
 import type { Dialog } from "$lib";
 
+const kbd = getTestKbd();
+
 function expectIsClosed(
 	queryByTestId: (id: Matcher, options?: MatcherOptions | undefined) => HTMLElement | null
 ) {

src/tests/dropdown-menu/DropdownMenu.spec.ts

@@ -3,9 +3,10 @@ import userEvent from "@testing-library/user-event";
 import { axe } from "jest-axe";
 import { describe, it } from "vitest";
 import DropdownMenuTest from "./DropdownMenuTest.svelte";
-import { testKbd as kbd } from "../utils.js";
+import { getTestKbd } from "../utils.js";
 import type { DropdownMenuTestProps } from "./DropdownMenuTest.svelte";
 
+const kbd = getTestKbd();
 const OPEN_KEYS = [kbd.ENTER, kbd.ARROW_DOWN, kbd.SPACE];
 
 /**

src/tests/link-preview/LinkPreview.spec.ts

@@ -2,10 +2,12 @@ import { render, waitFor } from "@testing-library/svelte";
 import userEvent from "@testing-library/user-event";
 import { axe } from "jest-axe";
 import { describe, it } from "vitest";
-import { testKbd as kbd } from "../utils.js";
+import { getTestKbd } from "../utils.js";
 import LinkPreviewTest from "./LinkPreviewTest.svelte";
 import type { LinkPreview } from "$lib";
 
+const kbd = getTestKbd();
+
 function setup(props: LinkPreview.Props = {}) {
 	const user = userEvent.setup();
 	const { getByTestId, queryByTestId } = render(LinkPreviewTest, { ...props });

src/tests/menubar/Menubar.spec.ts

@@ -3,9 +3,11 @@ import userEvent from "@testing-library/user-event";
 import { axe } from "jest-axe";
 import { describe, it } from "vitest";
 import MenubarTest from "./MenubarTest.svelte";
-import { testKbd as kbd } from "../utils.js";
+import { getTestKbd } from "../utils.js";
 import type { Menubar } from "$lib";
 
+const kbd = getTestKbd();
+
 /**
  * Helper function to reduce boilerplate in tests
  */

src/tests/pin-input/PinInput.spec.ts

@@ -2,10 +2,12 @@ import { render, waitFor } from "@testing-library/svelte";
 import userEvent from "@testing-library/user-event";
 import { axe } from "jest-axe";
 import { describe, it } from "vitest";
-import { testKbd as kbd } from "../utils.js";
+import { getTestKbd } from "../utils.js";
 import type { PinInput } from "$lib";
 import PinInputTest from "./PinInputTest.svelte";
 
+const kbd = getTestKbd();
+
 function setup(props: PinInput.Props = {}) {
 	const user = userEvent.setup();
 	const returned = render(PinInputTest, { ...props });

src/tests/popover/Popover.spec.ts

@@ -2,10 +2,12 @@ import { render, waitFor } from "@testing-library/svelte";
 import userEvent from "@testing-library/user-event";
 import { axe } from "jest-axe";
 import { describe, it } from "vitest";
-import { testKbd as kbd } from "../utils.js";
+import { getTestKbd } from "../utils.js";
 import PopoverTest from "./PopoverTest.svelte";
 import type { Popover } from "$lib";
 
+const kbd = getTestKbd();
+
 function setup(props: Popover.Props = {}) {
 	const user = userEvent.setup();
 	const returned = render(PopoverTest, { ...props });

src/tests/radio-group/RadioGroup.spec.ts

@@ -4,9 +4,11 @@ import { axe } from "jest-axe";
 import { describe, it } from "vitest";
 import RadioGroupTest from "./RadioGroupTest.svelte";
 import type { Item } from "./RadioGroupTest.svelte";
-import { testKbd as kbd } from "../utils.js";
+import { getTestKbd } from "../utils.js";
 import type { RadioGroup } from "$lib";
 
+const kbd = getTestKbd();
+
 const testItems: Item[] = [
 	{
 		value: "a",

src/tests/range-calendar/RangeCalendar.spec.ts

@@ -2,13 +2,15 @@ import { render } from "@testing-library/svelte";
 import userEvent from "@testing-library/user-event";
 import { axe } from "jest-axe";
 import { describe, it } from "vitest";
-import { testKbd as kbd } from "../utils.js";
+import { getTestKbd } from "../utils.js";
 import RangeCalendarTest from "./RangeCalendarTest.svelte";
 import type { RangeCalendar } from "$lib";
 import { CalendarDate, CalendarDateTime, toZoned } from "@internationalized/date";
 import { getSelectedDays } from "../helpers/calendar.js";
 import { tick } from "svelte";
 
+const kbd = getTestKbd();
+
 const calendarDateRange = {
 	start: new CalendarDate(1980, 1, 20),
 	end: new CalendarDate(1980, 1, 25)

src/tests/select/Select.spec.ts

@@ -4,9 +4,11 @@ import { axe } from "jest-axe";
 import { describe, it } from "vitest";
 import SelectTest from "./SelectTest.svelte";
 import type { Item } from "./SelectTest.svelte";
-import { testKbd as kbd } from "../utils.js";
+import { getTestKbd } from "../utils.js";
 import type { Select } from "$lib";
 
+const kbd = getTestKbd();
+
 const testItems: Item[] = [
 	{
 		value: "1",

src/tests/slider/Slider.spec.ts

@@ -6,7 +6,9 @@ import { describe, it } from "vitest";
 import SliderTest from "./SliderTest.svelte";
 import SliderRangeTest from "./SliderRangeTest.svelte";
 import type { Slider } from "$lib";
-import { testKbd as kbd } from "../utils";
+import { getTestKbd } from "../utils";
+
+const kbd = getTestKbd();
 
 function renderSlider(props: Slider.Props = {}) {
 	return render(SliderTest, { ...props });