next: cleanup props (#484)

huntabyte · Apr 18, 2024 · d97b8d6 · d97b8d6
1 parent 9c6f951
commit d97b8d6
Show file tree

Hide file tree

Showing 22 changed files with 153 additions and 191 deletions.
diff --git a/packages/bits-ui/src/lib/bits/accordion/components/accordion-content.svelte b/packages/bits-ui/src/lib/bits/accordion/components/accordion-content.svelte
@@ -9,17 +9,18 @@
 		child,
 		asChild,
 		el = $bindable(),
-		id: idProp = generateId(),
-		forceMount: forceMountProp = false,
+		id = generateId(),
+		forceMount = false,
 		children,
-		style: styleProp = {},
+		style = {},
 		...restProps
 	}: AccordionContentProps = $props();
 
-	const id = readonlyBox(() => idProp);
-	const style = readonlyBox(() => styleProp);
-	const forceMount = readonlyBox(() => forceMountProp);
-	const content = getAccordionContentState({ forceMount, id, style });
+	const content = getAccordionContentState({
+		forceMount: readonlyBox(() => forceMount),
+		id: readonlyBox(() => id),
+		style: readonlyBox(() => style),
+	});
 </script>
 
 <Presence forceMount={true} present={content.present} node={content.node}>

diff --git a/packages/bits-ui/src/lib/bits/accordion/components/accordion-item.svelte b/packages/bits-ui/src/lib/bits/accordion/components/accordion-item.svelte
@@ -5,27 +5,25 @@
 	import { styleToString } from "$lib/internal/style.js";
 	let {
 		asChild,
-		disabled: disabledProp = false,
-		value: valueProp,
+		disabled = false,
+		value,
 		children,
 		child,
 		el = $bindable(),
 		style,
 		...restProps
 	}: AccordionItemProps = $props();
 
-	const disabled = readonlyBox(() => disabledProp);
-	const value = readonlyBox(() => valueProp);
-
-	const item = setAccordionItemState({ value, disabled });
-
-	const isDisabled = $derived(disabled || item.root.disabled);
+	const item = setAccordionItemState({
+		value: readonlyBox(() => value),
+		disabled: readonlyBox(() => disabled),
+	});
 
 	const mergedProps = $derived({
 		...restProps,
 		...item.props,
 		"data-state": item.isSelected ? "open" : "closed",
-		"data-disabled": isDisabled ? "" : undefined,
+		"data-disabled": item.isDisabled ? "" : undefined,
 		style: styleToString(style),
 	});
 </script>

diff --git a/packages/bits-ui/src/lib/bits/accordion/components/accordion-trigger.svelte b/packages/bits-ui/src/lib/bits/accordion/components/accordion-trigger.svelte
@@ -6,28 +6,23 @@
 	import { styleToString } from "$lib/internal/style.js";
 
 	let {
-		disabled: disabledProp = false,
+		disabled = false,
 		asChild,
 		el,
-		id: idProp = generateId(),
-		onkeydown: onkeydownProp = () => {},
-		onclick: onclickProp = () => {},
+		id = generateId(),
+		onkeydown = () => {},
+		onclick = () => {},
 		children,
 		child,
 		style,
 		...restProps
 	}: AccordionTriggerProps = $props();
 
-	const disabled = readonlyBox(() => disabledProp);
-	const id = readonlyBox(() => idProp);
-	const onkeydown = readonlyBox(() => onkeydownProp);
-	const onclick = readonlyBox(() => onclickProp);
-
 	const trigger = getAccordionTriggerState({
-		disabled,
-		onkeydown,
-		onclick,
-		id,
+		disabled: readonlyBox(() => disabled),
+		onkeydown: readonlyBox(() => onkeydown),
+		onclick: readonlyBox(() => onclick),
+		id: readonlyBox(() => id),
 	});
 
 	const mergedProps = $derived({

diff --git a/packages/bits-ui/src/lib/bits/accordion/components/accordion.svelte b/packages/bits-ui/src/lib/bits/accordion/components/accordion.svelte
@@ -6,33 +6,33 @@
 	import { styleToString } from "$lib/internal/style.js";
 
 	let {
-		disabled: disabledProp = false,
+		disabled = false,
 		asChild,
 		children,
 		child,
 		type,
 		value: valueProp = $bindable(),
 		el = $bindable(),
-		id: idProp = generateId(),
+		id = generateId(),
 		style,
 		onValueChange,
 		...restProps
 	}: AccordionRootProps = $props();
 
 	valueProp === undefined && (valueProp = type === "single" ? "" : []);
 
-	const value = box(
-		() => valueProp!,
-		(v) => {
-			valueProp = v;
-			onValueChange?.(v as any);
-		}
-	) as Box<string> | Box<string[]>;
-
-	const id = readonlyBox(() => idProp);
-	const disabled = readonlyBox(() => disabledProp);
-
-	const rootState = setAccordionRootState({ type, value, id, disabled });
+	const rootState = setAccordionRootState({
+		type,
+		value: box(
+			() => valueProp!,
+			(v) => {
+				valueProp = v;
+				onValueChange?.(v as any);
+			}
+		) as Box<string> | Box<string[]>,
+		id: readonlyBox(() => id),
+		disabled: readonlyBox(() => disabled),
+	});
 
 	const mergedProps = {
 		...rootState.props,

diff --git a/packages/bits-ui/src/lib/bits/avatar/components/avatar-fallback.svelte b/packages/bits-ui/src/lib/bits/avatar/components/avatar-fallback.svelte
@@ -8,13 +8,11 @@
 		children,
 		child,
 		el = $bindable(),
-		style: styleProp = {},
+		style = {},
 		...restProps
 	}: FallbackProps = $props();
 
-	const style = readonlyBox(() => styleProp);
-
-	const fallbackState = getAvatarFallbackState({ style });
+	const fallbackState = getAvatarFallbackState({ style: readonlyBox(() => style) });
 
 	const mergedProps = {
 		...fallbackState.props,

diff --git a/packages/bits-ui/src/lib/bits/avatar/components/avatar-image.svelte b/packages/bits-ui/src/lib/bits/avatar/components/avatar-image.svelte
@@ -3,19 +3,12 @@
 	import { getAvatarImageState } from "../avatar.svelte.js";
 	import { readonlyBox } from "$lib/internal/box.svelte.js";
 
-	let {
-		src: srcProp,
-		asChild,
-		child,
-		el = $bindable(),
-		style: styleProp = {},
-		...restProps
-	}: ImageProps = $props();
+	let { src, asChild, child, el = $bindable(), style = {}, ...restProps }: ImageProps = $props();
 
-	const src = readonlyBox(() => srcProp);
-	const style = readonlyBox(() => styleProp);
-
-	const imageState = getAvatarImageState({ style, src });
+	const imageState = getAvatarImageState({
+		style: readonlyBox(() => style),
+		src: readonlyBox(() => src),
+	});
 
 	const mergedProps = {
 		...imageState.props,

diff --git a/packages/bits-ui/src/lib/bits/avatar/components/avatar.svelte b/packages/bits-ui/src/lib/bits/avatar/components/avatar.svelte
@@ -4,33 +4,27 @@
 	import { box, readonlyBox } from "$lib/internal/box.svelte.js";
 
 	let {
-		delayMs: delayMsProp = 0,
-		loadingStatus: loadingStatusProp = $bindable("loading"),
+		delayMs = 0,
+		loadingStatus = $bindable("loading"),
 		onLoadingStatusChange,
 		asChild,
 		child,
 		children,
 		el = $bindable(),
-		style: styleProp = {},
+		style = {},
 		...restProps
 	}: RootProps = $props();
 
-	const loadingStatus = box(
-		() => loadingStatusProp,
-		(v) => {
-			loadingStatusProp = v;
-			onLoadingStatusChange?.(v);
-		}
-	);
-
-	const style = readonlyBox(() => styleProp);
-
-	const delayMs = readonlyBox(() => delayMsProp);
-
 	const rootState = setAvatarRootState({
-		delayMs,
-		loadingStatus,
-		style,
+		delayMs: readonlyBox(() => delayMs),
+		loadingStatus: box(
+			() => loadingStatus,
+			(v) => {
+				loadingStatus = v;
+				onLoadingStatusChange?.(v);
+			}
+		),
+		style: readonlyBox(() => style),
 	});
 
 	const mergedProps = {

diff --git a/packages/bits-ui/src/lib/bits/collapsible/components/collapsible-content.svelte b/packages/bits-ui/src/lib/bits/collapsible/components/collapsible-content.svelte
@@ -9,18 +9,18 @@
 		child,
 		asChild,
 		el = $bindable(),
-		forceMount: forceMountProp = false,
+		forceMount = false,
 		children,
-		id: idProp = generateId(),
-		style: styleProp = {},
+		id = generateId(),
+		style = {},
 		...restProps
 	}: CollapsibleContentProps & { forceMount?: boolean } = $props();
 
-	const id = readonlyBox(() => idProp);
-	const forceMount = readonlyBox(() => forceMountProp);
-
-	const style = readonlyBox(() => styleProp);
-	const content = getCollapsibleContentState({ id, style, forceMount });
+	const content = getCollapsibleContentState({
+		id: readonlyBox(() => id),
+		style: readonlyBox(() => style),
+		forceMount: readonlyBox(() => forceMount),
+	});
 </script>
 
 <Presence forceMount={true} present={content.present} node={content.node}>

diff --git a/packages/bits-ui/src/lib/bits/collapsible/components/collapsible-trigger.svelte b/packages/bits-ui/src/lib/bits/collapsible/components/collapsible-trigger.svelte
@@ -9,14 +9,12 @@
 		children,
 		child,
 		el = $bindable(),
-		onclick: onclickProp = () => {},
+		onclick = () => {},
 		style = {},
 		...restProps
 	}: TriggerProps = $props();
 
-	const onclick = readonlyBox(() => onclickProp);
-
-	const triggerState = getCollapsibleTriggerState({ onclick });
+	const triggerState = getCollapsibleTriggerState({ onclick: readonlyBox(() => onclick) });
 
 	const mergedProps = $derived({
 		...triggerState.props,

diff --git a/packages/bits-ui/src/lib/bits/collapsible/components/collapsible.svelte b/packages/bits-ui/src/lib/bits/collapsible/components/collapsible.svelte
@@ -8,25 +8,21 @@
 		children,
 		child,
 		el = $bindable(),
-		open: openProp = $bindable(false),
-		disabled: disabledProp = false,
+		open = $bindable(false),
+		disabled = false,
 		onOpenChange,
 		...restProps
 	}: RootProps = $props();
 
-	const open = box(
-		() => openProp,
-		(v) => {
-			openProp = v;
-			onOpenChange?.(v);
-		}
-	);
-
-	const disabled = readonlyBox(() => disabledProp);
-
 	const rootState = setCollapsibleRootState({
-		open,
-		disabled,
+		open: box(
+			() => open,
+			(v) => {
+				open = v;
+				onOpenChange?.(v);
+			}
+		),
+		disabled: readonlyBox(() => disabled),
 	});
 
 	const mergedProps = $derived({

diff --git a/packages/bits-ui/src/lib/bits/label/components/label.svelte b/packages/bits-ui/src/lib/bits/label/components/label.svelte
@@ -5,7 +5,7 @@
 	import { styleToString } from "$lib/internal/style.js";
 
 	let {
-		onmousedown: onmousedownProp = () => {},
+		onmousedown = () => {},
 		asChild,
 		children,
 		child,
@@ -15,9 +15,7 @@
 		...restProps
 	}: RootProps = $props();
 
-	const onmousedown = readonlyBox(() => onmousedownProp);
-
-	const rootState = setLabelRootState({ onmousedown });
+	const rootState = setLabelRootState({ onmousedown: readonlyBox(() => onmousedown) });
 	const mergedProps = $derived({
 		...restProps,
 		...rootState.props,

diff --git a/packages/bits-ui/src/lib/bits/progress/components/progress.svelte b/packages/bits-ui/src/lib/bits/progress/components/progress.svelte
@@ -8,17 +8,17 @@
 		asChild,
 		child,
 		children,
-		value: valueProp = 0,
-		max: maxProp = 100,
+		value = 0,
+		max = 100,
 		el = $bindable(),
 		style = {},
 		...restProps
 	}: RootProps = $props();
 
-	const value = readonlyBox(() => valueProp);
-	const max = readonlyBox(() => maxProp);
-
-	const progress = setProgressRootState({ value, max });
+	const progress = setProgressRootState({
+		value: readonlyBox(() => value),
+		max: readonlyBox(() => max),
+	});
 
 	const mergedProps = {
 		...restProps,

diff --git a/packages/bits-ui/src/lib/bits/radio-group/components/radio-group-item.svelte b/packages/bits-ui/src/lib/bits/radio-group/components/radio-group-item.svelte
@@ -6,27 +6,27 @@
 	import { styleToString } from "$lib/internal/style.js";
 
 	let {
-		id: idProp = generateId(),
+		id = generateId(),
 		asChild,
 		children,
 		indicator,
 		child,
-		value: valueProp,
-		disabled: disabledProp = false,
-		onclick: onclickProp = () => {},
-		onkeydown: onkeydownProp = () => {},
+		value,
+		disabled = false,
+		onclick = () => {},
+		onkeydown = () => {},
 		el = $bindable(),
 		style = {},
 		...restProps
 	}: ItemProps = $props();
 
-	const value = readonlyBox(() => valueProp);
-	const disabled = readonlyBox(() => disabledProp);
-	const id = readonlyBox(() => idProp);
-	const onclick = readonlyBox(() => onclickProp);
-	const onkeydown = readonlyBox(() => onkeydownProp);
-
-	const item = setRadioGroupItemState({ value, disabled, id, onclick, onkeydown });
+	const item = setRadioGroupItemState({
+		value: readonlyBox(() => value),
+		disabled: readonlyBox(() => disabled),
+		id: readonlyBox(() => id),
+		onclick: readonlyBox(() => onclick),
+		onkeydown: readonlyBox(() => onkeydown),
+	});
 
 	const mergedProps = $derived({
 		...restProps,