sveld 0.25.5 → 0.25.7

package/README.md

@@ -14,7 +14,7 @@ The purpose of this project is to make third party Svelte component libraries co
 - [Component Index](https://github.com/IBM/carbon-components-svelte/blob/master/COMPONENT_INDEX.md): Markdown file documenting component props, slots, and events
 - [Component API](https://github.com/IBM/carbon-components-svelte/blob/master/docs/src/COMPONENT_API.json): Component API metadata in JSON format
 
-**Please note** that the generated TypeScript definitions require Svelte version 3.55 or greater.
+**Note:** `sveld` supports Svelte 3, 4, and 5, but does not support Svelte 5-specific syntax or runes-only usage. Components must use traditional Svelte syntax (e.g., `export let` for props, not `$props()`).
 
 ---
 
@@ -125,6 +125,7 @@ export default class Button extends SvelteComponentTyped<
   - [@type](#type)
   - [@typedef](#typedef)
   - [@slot](#slot)
+    - [Svelte 5 Snippet Compatibility](#svelte-5-snippet-compatibility)
   - [@event](#event)
   - [Context API](#context-api)
   - [@restProps](#restprops)
@@ -534,6 +535,94 @@ Example:
 </p>
 ```
 
+#### Svelte 5 Snippet Compatibility
+
+For Svelte 5 compatibility, `sveld` automatically generates optional snippet props for all slots. This allows consumers to use either the traditional slot syntax or Svelte 5's `{#snippet}` syntax.
+
+For slots with props (e.g., `let:prop`), the generated type uses a Snippet-compatible signature:
+
+```ts
+slotName?: (this: void, ...args: [{ prop: PropType }]) => void;
+```
+
+For slots without props:
+
+```ts
+slotName?: (this: void) => void;
+```
+
+**Why this signature?**
+
+- **`this: void`** – Ensures the snippet cannot be called with a `this` context, matching Svelte's internal enforcement that snippets are pure render functions
+- **`...args: [Props]`** – Uses tuple spread for type-safe parameters. This accepts fixed-length tuples (like `[{ row: Row }]`) while rejecting array types (like `Props[]`), matching how Svelte's `Snippet<T>` type works
+
+**Default slot (`children` prop):**
+
+The default slot generates an optional `children` snippet prop:
+
+```svelte
+<!-- Component with default slot that passes props -->
+<Dropdown {items} selectedId="1">
+  {#snippet children({ item, index })}
+    <span>{item.text} (#{index})</span>
+  {/snippet}
+</Dropdown>
+```
+
+Generated types:
+
+```ts
+type DropdownProps = {
+  items: Item[];
+  selectedId?: string;
+
+  // Default slot as children snippet prop
+  children?: (this: void, ...args: [{ item: Item; index: number }]) => void;
+};
+```
+
+**Named slots:**
+
+```svelte
+<!-- Using the generated types with Svelte 5 syntax -->
+<DataTable headers={headers} rows={rows}>
+  {#snippet cell({ cell, row })}
+    {#if cell.key === 'actions'}
+      <Button on:click={() => handleAction(row)}>Edit</Button>
+    {:else}
+      {cell.value}
+    {/if}
+  {/snippet}
+</DataTable>
+```
+
+The generated TypeScript definition includes both the snippet prop and the traditional slot definition:
+
+```ts
+type DataTableProps<Row> = {
+  // ... other props
+
+  // Snippet prop for Svelte 5 compatibility
+  cell?: (
+    this: void,
+    ...args: [{ row: Row; cell: DataTableCell<Row>; rowIndex: number; cellIndex: number }]
+  ) => void;
+
+  // Default slot as children prop
+  children?: (this: void) => void;
+};
+
+export default class DataTable<Row> extends SvelteComponentTyped<
+  DataTableProps<Row>,
+  { /* events */ },
+  {
+    // Traditional slot definition (Svelte 3/4)
+    default: Record<string, never>;
+    cell: { row: Row; cell: DataTableCell<Row>; rowIndex: number; cellIndex: number };
+  }
+> {}
+```
+
 ### `@event`
 
 Use the `@event` tag to type dispatched events. An event name is required and a description optional.

package/lib/writer/writer-ts-definitions-core.js

@@ -95,15 +95,33 @@ function genPropDef(def) {
     });
     // Generate snippet props for named slots (Svelte 5 compatibility)
     // Skip default slots and slots that conflict with existing prop names
-    const snippet_props = (def.slots || [])
+    const named_snippet_props = (def.slots || [])
         .filter((slot) => !slot.default && slot.name != null && !existingPropNames.has(slot.name))
         .map((slot) => {
         const slotName = slot.name;
         const key = clampKey(slotName);
         const description = slot.description ? `/** ${slot.description} */\n      ` : "";
+        // Use Snippet-compatible type: (this: void, ...args: [Props]) => void for slots with props
+        // or (this: void) => void for slots without props
+        const hasSlotProps = slot.slot_props && slot.slot_props !== "Record<string, never>";
+        const snippetType = hasSlotProps ? `(this: void, ...args: [${slot.slot_props}]) => void` : "(this: void) => void";
         return `
-      ${description}${key}?: () => void;`;
+      ${description}${key}?: ${snippetType};`;
     });
+    // Generate children snippet prop for default slot (Svelte 5 compatibility)
+    const default_slot = (def.slots || []).find((slot) => slot.default || slot.name === null);
+    const children_snippet_prop = default_slot
+        ? (() => {
+            const description = default_slot.description ? `/** ${default_slot.description} */\n      ` : "";
+            const hasSlotProps = default_slot.slot_props && default_slot.slot_props !== "Record<string, never>";
+            const snippetType = hasSlotProps
+                ? `(this: void, ...args: [${default_slot.slot_props}]) => void`
+                : "(this: void) => void";
+            return `
+      ${description}children?: ${snippetType};`;
+        })()
+        : "";
+    const snippet_props = [...named_snippet_props, children_snippet_prop].filter(Boolean);
     const props = [...initial_props, ...snippet_props].join("\n");
     const props_name = `${def.moduleName}Props`;
     let prop_def = EMPTY_STR;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sveld",
-  "version": "0.25.5",
+  "version": "0.25.7",
   "license": "Apache-2.0",
   "description": "Generate TypeScript definitions for your Svelte components.",
   "main": "./lib/index.js",