Skip to content

Invalid syntax in docs regarding the Action interface #14263

@dgrbrady

Description

@dgrbrady

Describe the bug

Sorry if this isn't the right place to report issues with the docs, but I didn't see any other option.

On this page of the docs: https://svelte.dev/docs/svelte/use#Typing, the code snippet provided is not valid Typescript as it is missing the }> characters before the assignment operator.

	import { on } from 'svelte/events'; // THIS IS NOT NEEDED ANYMORE
	import type { Action } from 'svelte/action';

	const gestures: Action<
		HTMLDivElement,
		null,
		{
			onswiperight: (e: CustomEvent) => void;
			onswipeleft: (e: CustomEvent) => void = (node) => { // THIS LINE IS INVALID SYNTAX
		$effect(() => {
			// ...
			node.dispatchEvent(new CustomEvent('swipeleft'));

			// ...
			node.dispatchEvent(new CustomEvent('swiperight'));
		});
	};
</script>

Should be updated to:

	import type { Action } from 'svelte/action';

	const gestures: Action<
		HTMLDivElement,
		null,
		{
			onswiperight: (e: CustomEvent) => void;
			onswipeleft: (e: CustomEvent) => void;
		}
	> = (node) => {
		$effect(() => {
			// ...
			node.dispatchEvent(new CustomEvent('swipeleft'));

			// ...
			node.dispatchEvent(new CustomEvent('swiperight'));
		});
	};

Reproduction

Go to https://svelte.dev/docs/svelte/use#Typing and see the code snippet

	import { on } from 'svelte/events'; // THIS IS NOT NEEDED ANYMORE
	import type { Action } from 'svelte/action';

	const gestures: Action<
		HTMLDivElement,
		null,
		{
			onswiperight: (e: CustomEvent) => void;
			onswipeleft: (e: CustomEvent) => void = (node) => { // THIS LINE IS INVALID SYNTAX
		$effect(() => {
			// ...
			node.dispatchEvent(new CustomEvent('swipeleft'));

			// ...
			node.dispatchEvent(new CustomEvent('swiperight'));
		});
	};
</script>

Logs

No response

System Info

N/a

Severity

annoyance

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions