Enable attachment to enhance typings on applied element

[vnphanquang]

Describe the problem

Before Svelte attachment, Svelte action allows specifying additional attributes (including custom event listeners) on the element it is placed on:

svelte/packages/svelte/src/action/public.d.ts

Lines 27 to 38 in 5912754

	export interface ActionReturn<
	Parameter = undefined,
	Attributes extends Record<string, any> = Record<never, any>
	> {
	update?: (parameter: Parameter) => void;
	destroy?: () => void;
	/**
	* ### DO NOT USE THIS
	* This exists solely for type-checking and has no effect at runtime.
	* Set this through the `Attributes` generic instead.
	*/
	$$_attributes?: Attributes;

For example:

<script lang="ts">
  import { type ActionReturn } from 'svelte/action';

	interface ClickOutsideAttributes {
		musthave: string;
		onclickoutside?: (event: CustomEvent) => void;
	}

  function clickoutside(node: Element): ActionReturn<void, ClickOutsideAttributes> {
		/* ... */
		return {};
	}
</script>

<dialog use:clickoutside musthave="something">
	<!-- ... -->
</dialog>

As one would expect, the editor tooling will pick up onclickoutside as optional, and musthave as required - a nice ergonomics for element enhancement. I am missing this handy feature when using attachment, especially as a lib author.

Having this level of feature parity is also nice to encourage attachment over action, which I think is the right direction going forward. The action docs seems to suggest so too:

This module provides types for actions, which have been superseded by attachments.

Describe the proposed solution

The current Attachment interface...

svelte/packages/svelte/src/attachments/public.d.ts

Lines 8 to 10 in bde51ed

	export interface Attachment<T extends EventTarget = Element> {
	(element: T): void | (() => void);
	}

...can perhaps become:

	export interface Attachment<
		Element extends EventTarget = Element,
		Attributes extends Record<string, any> = Record<never, any>,
	> {
		(element: Element): void | AttachmentReturn<Attributes>
	}

	export interface AttachmentReturn<
		Attributes extends Record<string, any> = Record<never, any>
	> {
		(): void;
		/**
		 * ### DO NOT USE THIS
		 * This exists solely for type-checking and has no effect at runtime.
		 * Set this through the `Attributes` generic instead.
		 */
		$$_attributes?: Attributes;
	}

fromAction can infer accordingly.

I suspect, however, much of the work required for this is on the language-tools side. Svelte attachment can also live within an object being spread onto the element, and I am not sure if that indicates any additional complexity.

Related artifacts:

• (feat) enable actions to enhance typings on applied element language-tools#1553
• feat: attachments #15000
• [TypeScript] Action Type #6538

Originally discussed in #16676

Importance

nice to have

[MotionlessTrain]

Wouldn’t it be possible to give those to the attachment directly?
E.g.

<script lang=“ts”>
function clickoutside(musthave: string, onclickoutside?: () => void) {
  return (node: HTMLElement) => {
    // use the arguments here, potentially within an inner effect if the attachment doesn’t need to be destroyed when the parameter changes 
  }
}
</script>

<dialog {@attach clickoutside("something")}>
  <!-- … -->
</dialog>

[brunnerh]

That should work, though you then cannot have all event listeners neatly in the same place, directly on the element.

(This also carries a little bit of overhead since a new function is created for every instance but that should be negligible in most cases.)

So the case for this is probably mostly aesthetics 🤔

[dummdidumm]

It's mostly aesthetics, correct, and due to this we so far have not implemented this because we feel like the callback version better shows "these events are there because of this attachment"

[vnphanquang]

Thanks everyone for the input. Agreed that it's somewhat aesthetics. Personally I prefer to keep attributes that are intended for lib users on the element itself. Say an attachment that enhances dialog and:

1. may fire a open custom event
2. forces users to specify aria-labelledby & aria-describedby when certain settings are met, for better a11y (ref: Dialog (Modal) Pattern - ARIA APG)

i.e. something like this if using action:

<script lang="ts">
	import { type ActionReturn } from 'svelte/action';

	interface EnhanceDialogAttributes {
		'aria-labelledby': string;
		'aria-describedby': string;
		onopen?: (event: CustomEvent) => void;
	}

	function enhanceDialog(node: HTMLDialogElement): ActionReturn<void, EnhanceDialogAttributes> {
		return {};
	}
</script>

<dialog use:enhanceDialog onopen={() => console.log('...')}>
	<!-- Type '{}' is missing the following properties from type 'EnhanceDialogAttributes': 'aria-labelledby', 'aria-describedby' [2345] -->
</dialog>

In this case, it feels natural for me to place these attributes, especially the HTML aria-* ones, on the element instead of proxying via the action/attachment parameters. Additionally, a custom event may be set to bubble up the DOM tree (see this REPL), whereas a callback does not afford that very easily.

In one past instance, I implemented an action that expects a data-... attribute on the element and uses MutationObserver to react to changes to that attributes, either programmatically or directly via the dev tool, something that is not possible if the variable binding is done via parameter.

---

[...] callback version better shows "these events are there because of this attachment".

That's true, although the type error as in the example above is not too bad and does point the attributes to the right 'source'.