Add asChild prop & forward input events (#14)

.changeset/polite-needles-eat.md

@@ -0,0 +1,5 @@
+---
+"cmdk-sv": patch
+---
+
+Add `asChild` prop & forward input events

.eslintrc.cjs

@@ -10,51 +10,66 @@ module.exports = {
 	plugins: ['@typescript-eslint'],
 	parserOptions: {
 		sourceType: 'module',
-		ecmaVersion: 'lastest',
+		ecmaVersion: 'latest',
 		extraFileExtensions: ['.svelte']
 	},
 	env: {
 		browser: true,
 		es2024: true,
 		node: true
 	},
-	overrides: [
-		{
-			files: ['*.svelte'],
-			parser: 'svelte-eslint-parser',
-			parserOptions: {
-				parser: '@typescript-eslint/parser'
-			}
-		}
-	],
+	globals: { $$Generic: 'readable', NodeJS: true },
 	rules: {
-		// eslint
 		'no-console': 'warn',
-
-		// @typescript-eslint
 		'@typescript-eslint/no-unused-vars': [
 			'warn',
 			{
 				argsIgnorePattern: '^_',
 				varsIgnorePattern: '^_'
 			}
 		],
-
-		// eslint-plugin-svelte
 		'svelte/no-target-blank': 'error',
 		'svelte/no-immutable-reactive-statements': 'error',
 		'svelte/prefer-style-directive': 'error',
 		'svelte/no-reactive-literals': 'error',
 		'svelte/no-useless-mustaches': 'error',
-		// TODO: opt in to these at a later stage
 		'svelte/button-has-type': 'off',
 		'svelte/require-each-key': 'off',
 		'svelte/no-at-html-tags': 'off',
 		'svelte/no-unused-svelte-ignore': 'off',
 		'svelte/require-stores-init': 'off'
 	},
-	globals: {
-		NodeJS: true,
-		$$Generic: 'readable'
-	}
+	overrides: [
+		{
+			files: ['*.svelte'],
+			parser: 'svelte-eslint-parser',
+			parserOptions: {
+				parser: '@typescript-eslint/parser'
+			},
+			rules: {
+				'@typescript-eslint/no-unused-vars': [
+					'warn',
+					{
+						argsIgnorePattern: '^_',
+						varsIgnorePattern: '^\\$\\$(Props|Events|Slots|Generic)$'
+					}
+				]
+			}
+		},
+		{
+			files: ['*.ts'],
+			parser: '@typescript-eslint/parser',
+			rules: {
+				'@typescript-eslint/ban-types': [
+					'error',
+					{
+						extendDefaults: true,
+						types: {
+							'{}': false
+						}
+					}
+				]
+			}
+		}
+	]
 };

README.md

@@ -438,6 +438,12 @@ Render `Command` inside of the popover content:
 
 You can find global stylesheets to drop in as a starting point for styling. See [src/styles/cmdk](src/styles/cmdk) for examples.
 
+### Render Delegation
+
+Each of the components (except the dialog) accept an `asChild` prop that can be used to render a custom element in place of the default. When using this prop, you'll need to check the components slot props to see what attributes & actions you'll need to pass to your custom element.
+
+Components that contain only a single element will just have `attrs` & `action` slot props, or just `attrs`. Components that contain multiple elements will have an `attrs` and possibly an `actions` object whose properties are the attributes and actions for each element.
+
 ## FAQ
 
 **Accessible?** Yes. Labeling, aria attributes, and DOM ordering tested with Voice Over and Chrome DevTools. [Dialog](#dialog-cmdk-dialog-cmdk-overlay) composes an accessible Dialog implementation.

src/lib/cmdk/command.ts

@@ -73,11 +73,28 @@ const defaults = {
 	loop: false,
 	onValueChange: undefined,
 	value: undefined,
-	filter: defaultFilter
+	filter: defaultFilter,
+	ids: {
+		root: generateId(),
+		list: generateId(),
+		label: generateId(),
+		input: generateId()
+	}
 } satisfies CommandProps;
 
 export function createCommand(props: CommandProps) {
-	const withDefaults = { ...defaults, ...removeUndefined(props) } satisfies CommandProps;
+	const ids = {
+		root: generateId(),
+		list: generateId(),
+		label: generateId(),
+		input: generateId(),
+		...props.ids
+	};
+
+	const withDefaults = {
+		...defaults,
+		...removeUndefined(props)
+	} satisfies CommandProps;
 
 	const state =
 		props.state ??
@@ -90,16 +107,9 @@ export function createCommand(props: CommandProps) {
 	const allIds = writable<Map<string, string>>(new Map()); // id → value
 	const commandEl = writable<HTMLDivElement | null>(null);
 
-	const options = toWritableStores(omit(withDefaults, 'value'));
+	const options = toWritableStores(omit(withDefaults, 'value', 'ids'));
 	const { shouldFilter, loop, filter, label } = options;
 
-	const ids = {
-		root: generateId(),
-		list: generateId(),
-		label: generateId(),
-		input: generateId()
-	};
-
 	const context: Context = {
 		value: (id, value) => {
 			if (value !== get(allIds).get(id)) {

src/lib/cmdk/components/Command.svelte

@@ -1,10 +1,16 @@
 <script lang="ts">
-	import { srOnlyStyles, styleToString } from '$lib/internal/index.js';
+	import {
+		addEventListener,
+		executeCallbacks,
+		srOnlyStyles,
+		styleToString
+	} from '$lib/internal/index.js';
 	import { createCommand } from '../command.js';
 	import type { CommandProps } from '../types.js';
 
 	type $$Props = CommandProps & {
 		onKeydown?: (e: KeyboardEvent) => void;
+		asChild?: boolean;
 	};
 
 	export let label: $$Props['label'] = undefined;
@@ -15,11 +21,13 @@
 	export let loop: $$Props['loop'] = undefined;
 	export let onKeydown: $$Props['onKeydown'] = undefined;
 	export let state: $$Props['state'] = undefined;
+	export let ids: $$Props['ids'] = undefined;
+	export let asChild: $$Props['asChild'] = false;
 
 	const {
 		commandEl,
 		handleRootKeydown,
-		ids,
+		ids: commandIds,
 		state: stateStore
 	} = createCommand({
 		label,
@@ -33,7 +41,8 @@
 			}
 		},
 		loop,
-		state
+		state,
+		ids
 	});
 
 	function syncValueAndState(value: string | undefined) {
@@ -46,27 +55,47 @@
 
 	function rootAction(node: HTMLDivElement) {
 		commandEl.set(node);
+
+		const unsubEvents = executeCallbacks(addEventListener(node, 'keydown', handleKeydown));
+
+		return {
+			destroy: unsubEvents
+		};
 	}
 
+	const rootAttrs = {
+		role: 'application',
+		id: commandIds.root,
+		'data-cmdk-root': ''
+	};
+
+	const labelAttrs = {
+		'data-cmdk-label': '',
+		for: commandIds.input,
+		id: commandIds.label,
+		style: styleToString(srOnlyStyles)
+	};
+
 	function handleKeydown(e: KeyboardEvent) {
 		onKeydown?.(e);
 		if (e.defaultPrevented) return;
 		handleRootKeydown(e);
 	}
+
+	const root = {
+		action: rootAction,
+		attrs: rootAttrs
+	};
 </script>
 
-<!--  eslint-disable-next-line svelte/valid-compile -->
-<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
-<div
-	use:rootAction
-	on:keydown={handleKeydown}
-	role="application"
-	id={ids.root}
-	data-cmdk-root=""
-	{...$$restProps}
->
-	<label data-cmdk-label="" for={ids.input} id={ids.label} style={styleToString(srOnlyStyles)}>
-		{label ?? ''}
-	</label>
-	<slot />
-</div>
+{#if asChild}
+	<slot {root} label={{ attrs: labelAttrs }} />
+{:else}
+	<div use:rootAction {...rootAttrs} {...$$restProps}>
+		<!-- svelte-ignore a11y-label-has-associated-control applied in attrs -->
+		<label {...labelAttrs}>
+			{label ?? ''}
+		</label>
+		<slot {root} label={{ attrs: labelAttrs }} />
+	</div>
+{/if}

src/lib/cmdk/components/CommandEmpty.svelte

@@ -7,6 +7,8 @@
 	// eslint-disable-next-line @typescript-eslint/no-unused-vars
 	type $$Props = EmptyProps;
 
+	export let asChild: $$Props['asChild'] = false;
+
 	let isFirstRender = true;
 
 	onMount(() => {
@@ -15,10 +17,19 @@
 
 	const state = getState();
 	const render = derived(state, ($state) => $state.filtered.count === 0);
+
+	const attrs = {
+		'data-cmdk-empty': '',
+		role: 'presentation'
+	};
 </script>
 
 {#if !isFirstRender && $render}
-	<div data-cmdk-empty="" role="presentation" {...$$restProps}>
-		<slot />
-	</div>
+	{#if asChild}
+		<slot {attrs} />
+	{:else}
+		<div {...attrs} {...$$restProps}>
+			<slot />
+		</div>
+	{/if}
 {/if}

src/lib/cmdk/components/CommandGroup.svelte

@@ -10,6 +10,7 @@
 	export let heading: $$Props['heading'] = undefined;
 	export let value = '';
 	export let alwaysRender: $$Props['alwaysRender'] = false;
+	export let asChild: $$Props['asChild'] = false;
 
 	const { id } = createGroup(alwaysRender);
 
@@ -29,7 +30,7 @@
 		return unsubGroup;
 	});
 
-	function groupAction(node: HTMLElement) {
+	function containerAction(node: HTMLElement) {
 		if (value) {
 			context.value(id, value);
 			node.setAttribute(VALUE_ATTR, value);
@@ -45,22 +46,47 @@
 		context.value(id, value);
 		node.setAttribute(VALUE_ATTR, value);
 	}
+
+	$: containerAttrs = {
+		'data-cmdk-group': '',
+		role: 'presentation',
+		hidden: $render ? undefined : true,
+		'data-value': value
+	};
+
+	const headingAttrs = {
+		'data-cmdk-group-heading': '',
+		'aria-hidden': true,
+		id: headingId
+	};
+
+	$: groupAttrs = {
+		'data-cmdk-group-items': '',
+		role: 'group',
+		'aria-labelledby': heading ? headingId : undefined
+	};
+
+	$: container = {
+		action: containerAction,
+		attrs: containerAttrs
+	};
+
+	$: group = {
+		attrs: groupAttrs
+	};
 </script>
 
-<div
-	use:groupAction
-	data-cmdk-group=""
-	role="presentation"
-	hidden={$render ? undefined : true}
-	data-value={value}
-	{...$$restProps}
->
-	{#if heading}
-		<div data-cmdk-group-heading="" aria-hidden id={headingId}>
-			{heading}
+{#if asChild}
+	<slot {container} {group} heading={{ attrs: headingAttrs }} />
+{:else}
+	<div use:containerAction {...containerAttrs} {...$$restProps}>
+		{#if heading}
+			<div {...headingAttrs}>
+				{heading}
+			</div>
+		{/if}
+		<div {...groupAttrs}>
+			<slot {container} {group} heading={{ attrs: headingAttrs }} />
 		</div>
-	{/if}
-	<div data-cmdk-group-items="" role="group" aria-labelledby={heading ? headingId : undefined}>
-		<slot />
 	</div>
-</div>
+{/if}