Sveld for Components

Skeleton implements Sveld to automatically document props, events, and slots from within each component. This is handled by appending TSDoc comments - a superset of JSDoc. This also enables IntelliSense for end users.

Sveld Documentation

Sveld for Props

View Documentation

To document component properties, add TSDoc comments using the /** ... */ format. In most use cases Sveld will automatically parse relevant information - including the property name, type, value, and your description.

javascript

/** Set the preferred search method. */
export let mode = 'fizzbuzz';

The CssClasses class denotes properties that use Tailwind utility classes. Set this to aid IntelliSense features.

javascript

import type { CssClasses } from '$lib';

/** Provide classes to set vertical item spacing. */
export let spacing: CssClasses = 'space-y-1';

For advanced or custom types, you may need to specify this information. This can be accomplished using the @type tag with block-style comments. Specify the type in curly brackets immediately following the tag.

javascript

/**
 * Bind this to your form data, represents the "files" data from the input.
 * @type {FileList}
 */
export let files: FileList;

Ensure you document Context API getContext values to provide Intellisense for child components. However, we intentionally exclude these values from the Props table.

javascript

/** Provide classes to set the hover background color. */
export let hover = getContext('hover');

See the Accordion component for a reference using both parent and child components.

Sveld for Slots

View Documentation

Slot documentation is handle via TSDoc block comments at the top of your script tag (by convention). Note that Sveld does not currently support descriptions for the default slot. Instead, we recommend you opt for a Usage tab example and instructions to illustrate the use of this slot.

javascript

// Slots
/**
 * @slot lead - Provide a leading element, such as an icon.
 * @slot content - Provide the alert message text.
 */

Sveld for Events

View Documentation

Sveld will automatically document forwarded events. You should not attempt to document these! However, dispatched events may be documented similar to props - with a TSDocs comment applied directly above the dispatch() method. Provide the event response in curly brackets, followed by the event name, a dash, and then the event description.

javascript

/** @event {{ event: DragEvent }} dragover - When a file is dragged over. */
dispatch('dragover', event);

Implementing Sveld

We cover how to implement the Sveld data in the Documentation Pages section.