next: improve tree-shaking (#728)

.changeset/slimy-mails-argue.md

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

.github/workflows/ci.yml

@@ -68,4 +68,7 @@ jobs:
             - name: Install dependencies
               run: pnpm install
 
+            - name: Build packages
+              run: pnpm build:packages
+
             - run: pnpm test

package.json

@@ -11,7 +11,8 @@
 		"format": "prettier --write .",
 		"lint": "prettier --check . && eslint .",
 		"lint:fix": "eslint --fix .",
-		"test": "pnpm -F bits-ui test"
+		"test": "pnpm -F \"./packages/**\" --parallel --reporter append-only --color test",
+		"test:components": "pnpm -F @bits-ui/tests test"
 	},
 	"keywords": [],
 	"author": "Hunter Johnston <https://github.com/huntabyte>",

packages/bits-ui/package.json

@@ -30,20 +30,12 @@
 		"@sveltejs/kit": "^2.5.28",
 		"@sveltejs/package": "^2.3.5",
 		"@sveltejs/vite-plugin-svelte": "4.0.0-next.7",
-		"@testing-library/dom": "^10.3.1",
-		"@testing-library/jest-dom": "^6.4.6",
-		"@testing-library/svelte": "^5.2.1",
-		"@testing-library/user-event": "^14.5.2",
-		"@types/jest-axe": "^3.5.9",
 		"@types/node": "^20.14.10",
 		"@types/resize-observer-browser": "^0.1.11",
-		"@types/testing-library__jest-dom": "^5.14.9",
-		"@vitest/ui": "^2.1.1",
 		"csstype": "^3.1.3",
 		"jest-axe": "^9.0.0",
 		"jsdom": "^24.1.0",
 		"publint": "^0.2.11",
-		"resize-observer-polyfill": "^1.5.1",
 		"svelte": "5.0.0-next.260",
 		"svelte-check": "4.0.3",
 		"tslib": "^2.7.0",
@@ -57,7 +49,7 @@
 	"dependencies": {
 		"@floating-ui/core": "^1.6.4",
 		"@floating-ui/dom": "^1.6.7",
-		"@internationalized/date": "^3.5.4",
+		"@internationalized/date": "^3.5.6",
 		"clsx": "^2.1.1",
 		"esm-env": "^1.0.0",
 		"runed": "^0.15.2",
@@ -71,5 +63,6 @@
 		"pnpm": ">=8.7.0",
 		"node": ">=18"
 	},
+	"sideEffects": false,
 	"packageManager": "[email protected]"
 }

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

@@ -1,6 +1,6 @@
 import type { Box, ReadableBoxedValues, WritableBoxedValues } from "$lib/internal/box.svelte.js";
 import type { WithRefProps } from "$lib/internal/types.js";
-import { afterTick } from "$lib/internal/afterTick.js";
+import { afterTick } from "$lib/internal/after-tick.js";
 import {
 	getAriaDisabled,
 	getAriaExpanded,
@@ -9,10 +9,13 @@ import {
 	getDataOrientation,
 } from "$lib/internal/attrs.js";
 import { kbd } from "$lib/internal/kbd.js";
-import { useRefById } from "$lib/internal/useRefById.svelte.js";
-import { type UseRovingFocusReturn, useRovingFocus } from "$lib/internal/useRovingFocus.svelte.js";
+import { useRefById } from "$lib/internal/use-ref-by-id.svelte.js";
+import {
+	type UseRovingFocusReturn,
+	useRovingFocus,
+} from "$lib/internal/use-roving-focus.svelte.js";
 import type { Orientation } from "$lib/shared/index.js";
-import { createContext } from "$lib/internal/createContext.js";
+import { createContext } from "$lib/internal/create-context.js";
 
 const ACCORDION_ROOT_ATTR = "data-accordion-root";
 const ACCORDION_TRIGGER_ATTR = "data-accordion-trigger";
@@ -163,18 +166,6 @@ export class AccordionItemState {
 		this.root.toggleItem(this.value.current);
 	};
 
-	createTrigger(props: AccordionTriggerStateProps) {
-		return new AccordionTriggerState(props, this);
-	}
-
-	createContent(props: AccordionContentStateProps) {
-		return new AccordionContentState(props, this);
-	}
-
-	createHeader(props: AccordionHeaderStateProps) {
-		return new AccordionHeaderState(props, this);
-	}
-
 	props = $derived.by(
 		() =>
 			({
@@ -426,13 +417,16 @@ export function useAccordionItem(props: Omit<AccordionItemStateProps, "rootState
 }
 
 export function useAccordionTrigger(props: AccordionTriggerStateProps): AccordionTriggerState {
-	return getAccordionItemContext().createTrigger(props);
+	const item = getAccordionItemContext();
+	return new AccordionTriggerState(props, item);
 }
 
 export function useAccordionContent(props: AccordionContentStateProps): AccordionContentState {
-	return getAccordionItemContext().createContent(props);
+	const item = getAccordionItemContext();
+	return new AccordionContentState(props, item);
 }
 
 export function useAccordionHeader(props: AccordionHeaderStateProps): AccordionHeaderState {
-	return getAccordionItemContext().createHeader(props);
+	const item = getAccordionItemContext();
+	return new AccordionHeaderState(props, item);
 }

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

@@ -3,8 +3,8 @@
 	import { useAccordionContent } from "../accordion.svelte.js";
 	import type { AccordionContentProps } from "../types.js";
 	import { PresenceLayer } from "$lib/bits/utilities/presence-layer/index.js";
-	import { mergeProps } from "$lib/internal/mergeProps.js";
-	import { useId } from "$lib/internal/useId.js";
+	import { mergeProps } from "$lib/internal/merge-props.js";
+	import { useId } from "$lib/internal/use-id.js";
 
 	let {
 		child,

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

@@ -2,8 +2,8 @@
 	import { box } from "svelte-toolbelt";
 	import type { AccordionHeaderProps } from "../types.js";
 	import { useAccordionHeader } from "../accordion.svelte.js";
-	import { mergeProps } from "$lib/internal/mergeProps.js";
-	import { useId } from "$lib/internal/useId.js";
+	import { mergeProps } from "$lib/internal/merge-props.js";
+	import { useId } from "$lib/internal/use-id.js";
 
 	let {
 		id = useId(),

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

@@ -2,8 +2,8 @@
 	import { box } from "svelte-toolbelt";
 	import type { AccordionItemProps } from "../types.js";
 	import { useAccordionItem } from "../accordion.svelte.js";
-	import { mergeProps } from "$lib/internal/mergeProps.js";
-	import { useId } from "$lib/internal/useId.js";
+	import { mergeProps } from "$lib/internal/merge-props.js";
+	import { useId } from "$lib/internal/use-id.js";
 
 	let {
 		id = useId(),

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

@@ -2,8 +2,8 @@
 	import { box } from "svelte-toolbelt";
 	import type { AccordionTriggerProps } from "../types.js";
 	import { useAccordionTrigger } from "../accordion.svelte.js";
-	import { mergeProps } from "$lib/internal/mergeProps.js";
-	import { useId } from "$lib/internal/useId.js";
+	import { mergeProps } from "$lib/internal/merge-props.js";
+	import { useId } from "$lib/internal/use-id.js";
 
 	let {
 		disabled = false,

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

@@ -1,9 +1,9 @@
 <script lang="ts">
 	import { type WritableBox, box } from "svelte-toolbelt";
 	import { useAccordionRoot } from "../accordion.svelte.js";
-	import type { RootProps } from "../index.js";
-	import { mergeProps } from "$lib/internal/mergeProps.js";
-	import { useId } from "$lib/internal/useId.js";
+	import type { AccordionRootProps } from "../types.js";
+	import { mergeProps } from "$lib/internal/merge-props.js";
+	import { useId } from "$lib/internal/use-id.js";
 	import { noop } from "$lib/internal/callbacks.js";
 
 	let {
@@ -19,7 +19,7 @@
 		orientation = "vertical",
 		controlledValue = false,
 		...restProps
-	}: RootProps = $props();
+	}: AccordionRootProps = $props();
 
 	value === undefined && (value = type === "single" ? "" : []);
 

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

@@ -0,0 +1,13 @@
+export { default as Root } from "./components/accordion.svelte";
+export { default as Item } from "./components/accordion-item.svelte";
+export { default as Header } from "./components/accordion-header.svelte";
+export { default as Trigger } from "./components/accordion-trigger.svelte";
+export { default as Content } from "./components/accordion-content.svelte";
+
+export type {
+	AccordionRootProps as RootProps,
+	AccordionItemProps as ItemProps,
+	AccordionHeaderProps as HeaderProps,
+	AccordionTriggerProps as TriggerProps,
+	AccordionContentProps as ContentProps,
+} from "./types.js";

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

@@ -1,13 +1 @@
-export { default as Root } from "./components/accordion.svelte";
-export { default as Item } from "./components/accordion-item.svelte";
-export { default as Header } from "./components/accordion-header.svelte";
-export { default as Trigger } from "./components/accordion-trigger.svelte";
-export { default as Content } from "./components/accordion-content.svelte";
-
-export type {
-	AccordionRootProps as RootProps,
-	AccordionItemProps as ItemProps,
-	AccordionHeaderProps as HeaderProps,
-	AccordionTriggerProps as TriggerProps,
-	AccordionContentProps as ContentProps,
-} from "./types.js";
+export * as Accordion from "./exports.js";

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

@@ -19,7 +19,7 @@ export type BaseAccordionRootPropsWithoutHTML = {
 	loop?: boolean;
 
 	/**
-	 * The orienation of the accordion.
+	 * The orientation of the accordion.
 	 *
 	 * @defaultValue "vertical"
 	 */

packages/bits-ui/src/lib/bits/alert-dialog/components/alert-dialog-action.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
 	import { box } from "svelte-toolbelt";
-	import type { ActionProps } from "../index.js";
-	import { mergeProps } from "$lib/internal/mergeProps.js";
-	import { useId } from "$lib/internal/useId.js";
+	import type { AlertDialogActionProps } from "../types.js";
+	import { mergeProps } from "$lib/internal/merge-props.js";
+	import { useId } from "$lib/internal/use-id.js";
 	import { useAlertDialogAction } from "$lib/bits/dialog/dialog.svelte.js";
 
 	let {
@@ -11,7 +11,7 @@
 		id = useId(),
 		ref = $bindable(null),
 		...restProps
-	}: ActionProps = $props();
+	}: AlertDialogActionProps = $props();
 
 	const actionState = useAlertDialogAction({
 		id: box.with(() => id),

packages/bits-ui/src/lib/bits/alert-dialog/components/alert-dialog-cancel.svelte

@@ -1,17 +1,17 @@
 <script lang="ts">
 	import { box } from "svelte-toolbelt";
-	import type { CancelProps } from "../index.js";
+	import type { AlertDialogCancelProps } from "../types.js";
 	import { useAlertDialogCancel } from "$lib/bits/dialog/dialog.svelte.js";
-	import { useId } from "$lib/internal/useId.js";
-	import { mergeProps } from "$lib/internal/mergeProps.js";
+	import { useId } from "$lib/internal/use-id.js";
+	import { mergeProps } from "$lib/internal/merge-props.js";
 
 	let {
 		id = useId(),
 		ref = $bindable(null),
 		children,
 		child,
 		...restProps
-	}: CancelProps = $props();
+	}: AlertDialogCancelProps = $props();
 
 	const cancelState = useAlertDialogCancel({
 		id: box.with(() => id),

packages/bits-ui/src/lib/bits/alert-dialog/components/alert-dialog-content.svelte

@@ -1,13 +1,13 @@
 <script lang="ts">
 	import { box } from "svelte-toolbelt";
-	import type { ContentProps } from "../index.js";
+	import type { AlertDialogContentProps } from "../types.js";
 	import DismissibleLayer from "$lib/bits/utilities/dismissible-layer/dismissible-layer.svelte";
 	import EscapeLayer from "$lib/bits/utilities/escape-layer/escape-layer.svelte";
 	import FocusScope from "$lib/bits/utilities/focus-scope/focus-scope.svelte";
 	import PresenceLayer from "$lib/bits/utilities/presence-layer/presence-layer.svelte";
 	import TextSelectionLayer from "$lib/bits/utilities/text-selection-layer/text-selection-layer.svelte";
-	import { mergeProps } from "$lib/internal/mergeProps.js";
-	import { useId } from "$lib/internal/useId.js";
+	import { mergeProps } from "$lib/internal/merge-props.js";
+	import { useId } from "$lib/internal/use-id.js";
 	import { noop } from "$lib/internal/callbacks.js";
 	import ScrollLock from "$lib/bits/utilities/scroll-lock/scroll-lock.svelte";
 	import { useDialogContent } from "$lib/bits/dialog/dialog.svelte.js";
@@ -26,7 +26,7 @@
 		preventScroll = true,
 		trapFocus = true,
 		...restProps
-	}: ContentProps = $props();
+	}: AlertDialogContentProps = $props();
 
 	const contentState = useDialogContent({
 		id: box.with(() => id),

packages/bits-ui/src/lib/bits/alert-dialog/components/alert-dialog.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { box } from "svelte-toolbelt";
-	import type { RootProps } from "../index.js";
+	import type { AlertDialogRootProps } from "../types.js";
 	import { noop } from "$lib/internal/callbacks.js";
 	import { useDialogRoot } from "$lib/bits/dialog/dialog.svelte.js";
 
@@ -9,7 +9,7 @@
 		onOpenChange = noop,
 		controlledOpen = false,
 		children,
-	}: RootProps = $props();
+	}: AlertDialogRootProps = $props();
 
 	useDialogRoot({
 		variant: box.with(() => "alert-dialog"),

packages/bits-ui/src/lib/bits/alert-dialog/exports.ts

@@ -0,0 +1,21 @@
+export { default as Root } from "./components/alert-dialog.svelte";
+export { default as Title } from "$lib/bits/dialog/components/dialog-title.svelte";
+export { default as Action } from "./components/alert-dialog-action.svelte";
+export { default as Cancel } from "./components/alert-dialog-cancel.svelte";
+export { default as Portal } from "$lib/bits/utilities/portal/portal.svelte";
+export { default as Content } from "./components/alert-dialog-content.svelte";
+export { default as Overlay } from "$lib/bits/dialog/components/dialog-overlay.svelte";
+export { default as Trigger } from "$lib/bits/dialog/components/dialog-trigger.svelte";
+export { default as Description } from "$lib/bits/dialog/components/dialog-description.svelte";
+
+export type {
+	AlertDialogRootProps as RootProps,
+	AlertDialogTitleProps as TitleProps,
+	AlertDialogActionProps as ActionProps,
+	AlertDialogCancelProps as CancelProps,
+	AlertDialogPortalProps as PortalProps,
+	AlertDialogContentProps as ContentProps,
+	AlertDialogOverlayProps as OverlayProps,
+	AlertDialogTriggerProps as TriggerProps,
+	AlertDialogDescriptionProps as DescriptionProps,
+} from "./types.js";

packages/bits-ui/src/lib/bits/alert-dialog/index.ts

@@ -1,21 +1 @@
-export { default as Root } from "./components/alert-dialog.svelte";
-export { default as Title } from "$lib/bits/dialog/components/dialog-title.svelte";
-export { default as Action } from "./components/alert-dialog-action.svelte";
-export { default as Cancel } from "./components/alert-dialog-cancel.svelte";
-export { default as Portal } from "$lib/bits/utilities/portal/portal.svelte";
-export { default as Content } from "./components/alert-dialog-content.svelte";
-export { default as Overlay } from "$lib/bits/dialog/components/dialog-overlay.svelte";
-export { default as Trigger } from "$lib/bits/dialog/components/dialog-trigger.svelte";
-export { default as Description } from "$lib/bits/dialog/components/dialog-description.svelte";
-
-export type {
-	AlertDialogRootProps as RootProps,
-	AlertDialogTitleProps as TitleProps,
-	AlertDialogActionProps as ActionProps,
-	AlertDialogCancelProps as CancelProps,
-	AlertDialogPortalProps as PortalProps,
-	AlertDialogContentProps as ContentProps,
-	AlertDialogOverlayProps as OverlayProps,
-	AlertDialogTriggerProps as TriggerProps,
-	AlertDialogDescriptionProps as DescriptionProps,
-} from "./types.js";
+export * as AlertDialog from "./exports.js";

packages/bits-ui/src/lib/bits/aspect-ratio/aspect-ratio.svelte.ts

@@ -1,4 +1,4 @@
-import { useRefById } from "$lib/internal/useRefById.svelte.js";
+import { useRefById } from "$lib/internal/use-ref-by-id.svelte.js";
 import type { ReadableBoxedValues } from "$lib/internal/box.svelte.js";
 import type { WithRefProps } from "$lib/internal/types.js";
 

packages/bits-ui/src/lib/bits/aspect-ratio/components/aspect-ratio.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
 	import { box } from "svelte-toolbelt";
-	import type { RootProps } from "../index.js";
+	import type { AspectRatioRootProps } from "../types.js";
 	import { useAspectRatioRoot } from "../aspect-ratio.svelte.js";
-	import { mergeProps } from "$lib/internal/mergeProps.js";
-	import { useId } from "$lib/internal/useId.js";
+	import { mergeProps } from "$lib/internal/merge-props.js";
+	import { useId } from "$lib/internal/use-id.js";
 
 	let {
 		ref = $bindable(null),
@@ -12,7 +12,7 @@
 		children,
 		child,
 		...restProps
-	}: RootProps = $props();
+	}: AspectRatioRootProps = $props();
 
 	const rootState = useAspectRatioRoot({
 		id: box.with(() => id),

packages/bits-ui/src/lib/bits/aspect-ratio/exports.ts

@@ -0,0 +1,3 @@
+export { default as Root } from "./components/aspect-ratio.svelte";
+
+export type { AspectRatioRootProps as RootProps } from "./types.js";

packages/bits-ui/src/lib/bits/aspect-ratio/index.ts

@@ -1,3 +1 @@
-export { default as Root } from "./components/aspect-ratio.svelte";
-
-export type { AspectRatioProps as RootProps } from "./types.js";
+export * as AspectRatio from "./exports.js";