snippets & render tags

8 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

invalid_default_snippet with let directive example

When a parent component uses `let:entry` directive with a List component, and the List component tries to render the default children snippet using `{@render children(item)}`, an invalid_default_snippet error is thrown because these APIs are incompatible.

snippet_without_render_tag pitfall

If a component receives a snippet prop via $props() and directly outputs it like `{children}` without using `{@render children()}`, the snippet will be stringified instead of rendered to the DOM, causing a snippet_without_render_tag error.

createRawSnippet function signature

createRawSnippet creates a snippet programmatically. Signature: function createRawSnippet<Params extends unknown[]>(fn: (...params: Getters<Params>) => { render: () => string; setup?: (element: Element) => void | (() => void); }): Snippet<Params>;

Snippet type for snippet parameters typing

Snippet is the type of a #snippet block. You can use it to express that your component expects a snippet of a certain type. Example: let { banner }: { banner: Snippet<[{ text: string }]> } = $props();. A snippet can only be called through the {@render ...} tag.

invalid_snippet error

The error 'Could not `{@render}` snippet due to the expression being `null` or `undefined`' occurs when attempting to render a snippet that is null or undefined. Consider using optional chaining like `{@render snippet?.()}`.

invalid_default_snippet shared error

The error 'Cannot use `{@render children(...)}` if the parent component uses `let:` directives' occurs when a child component tries to render a snippet with the default children slot, but the parent component uses deprecated `let:` directives. Consider using a named snippet instead.

invalid_snippet_arguments shared error

The error 'A snippet function was passed invalid arguments. Snippets should only be instantiated via `{@render ...}`' occurs when a snippet is called directly instead of being used with the `{@render}` tag.

snippet_without_render_tag shared error

The error 'Attempted to render a snippet without a `{@render}` block' occurs when a snippet is referenced directly without using the `{@render}` tag. This would cause the snippet code to be stringified instead of rendered to the DOM. Change `{snippet}` to `{@render snippet()}`. This error also occurs when a parent component passes a snippet to a child component that expects a non-snippet value.

Give your agent this brain