Prop types

These four types standardize the props most reusable components need. Combine them with &.

ClassProp

Accepts an optional external class string.

<script lang="ts">
  import type { ClassProp } from "@atom-forge/svelte-helpers";
  import { twMerge } from "tailwind-merge"; // external, not part of this package

  let { class: classes }: ClassProp = $props();
  const cls = $derived(twMerge("base-styles", classes));
</script>

<div class={cls}></div>

AnyProp

Allows extra attributes that you spread onto an element. Its index signature accepts any, so it does not validate attribute names or values. By convention, place it last in the intersection.

<script lang="ts">
  import type { AnyProp, ClassProp } from "@atom-forge/svelte-helpers";

  let { class: classes, ...props }: ClassProp & AnyProp = $props();
</script>

<input {...props} class={classes} />

ChildrenProp and ChildrenPropOptional

Consistent names for the children snippet. The generic parameter lists the snippet arguments.

// Required children
let { children }: ChildrenProp = $props();

// Optional children
let { children }: ChildrenPropOptional = $props();

// Children snippet that receives an argument
let { children }: ChildrenProp<[Item]> = $props();

With the optional form, guard the render: {@render children?.()}.