sveld 0.25.4 → 0.25.6

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,67 @@ Example:
 </p>
 ```
 
+#### Svelte 5 Snippet Compatibility
+
+For Svelte 5 compatibility, `sveld` automatically generates optional snippet props for named 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
+
+**Example usage with Svelte 5 snippets:**
+
+```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;
+};
+
+export default class DataTable<Row> extends SvelteComponentTyped<
+  DataTableProps<Row>,
+  { /* events */ },
+  {
+    // Traditional slot definition (Svelte 3/4)
+    cell: { row: Row; cell: DataTableCell<Row>; rowIndex: number; cellIndex: number };
+  }
+> {}
+```
+
+> **Note:** Snippet props are only generated for named slots. The default slot does not generate a snippet prop to avoid conflicts with the `children` prop pattern.
+
 ### `@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

@@ -68,6 +68,8 @@ function addCommentLine(value, returnValue) {
     return `* ${returnValue || value}\n`;
 }
 function genPropDef(def) {
+    // Collect existing prop names to avoid conflicts with snippet props
+    const existingPropNames = new Set(def.props.filter((prop) => !prop.isFunctionDeclaration && prop.kind !== "const").map((prop) => prop.name));
     const initial_props = def.props
         .filter((prop) => !prop.isFunctionDeclaration && prop.kind !== "const")
         .map((prop) => {
@@ -91,7 +93,22 @@ function genPropDef(def) {
       ${prop_comments.length > 0 ? `/**\n${prop_comments}*/` : EMPTY_STR}
       ${prop.name}${prop.isRequired ? "" : "?"}: ${prop_value};`;
     });
-    const props = initial_props.join("\n");
+    // 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 || [])
+        .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}?: ${snippetType};`;
+    });
+    const props = [...initial_props, ...snippet_props].join("\n");
     const props_name = `${def.moduleName}Props`;
     let prop_def = EMPTY_STR;
     const genericsName = def.generics ? `<${def.generics[0]}>` : "";
@@ -443,6 +460,7 @@ function writeTsDefinition(component) {
         rest_props,
         extends: _extends,
         generics,
+        slots,
     });
     const generic = generics ? `<${generics[1]}>` : "";
     const genericProps = generics ? `${props_name}<${generics[0]}>` : props_name;

package/package.json

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