sveld 0.22.5 → 0.23.0

package/README.md

@@ -62,7 +62,7 @@ export type ButtonProps = Omit<$RestProps, keyof $Props> & $Props;
 export default class Button extends SvelteComponentTyped<
   ButtonProps,
   { click: WindowEventMap["click"] },
-  { default: {} }
+  { default: Record<string, never> }
 > {}
 ```
 
@@ -105,7 +105,7 @@ export type ButtonProps = Omit<$RestProps, keyof $Props> & $Props;
 export default class Button extends SvelteComponentTyped<
   ButtonProps,
   { click: WindowEventMap["click"] },
-  { default: {} }
+  { default: Record<string, never> }
 > {}
 ```
 
@@ -126,6 +126,7 @@ export default class Button extends SvelteComponentTyped<
   - [@typedef](#typedef)
   - [@slot](#slot)
   - [@event](#event)
+  - [Context API](#context-api)
   - [@restProps](#restprops)
   - [@extends](#extends)
   - [@generics](#generics)
@@ -143,6 +144,7 @@ Extracted metadata include:
 - slots
 - forwarded events
 - dispatched events
+- context (setContext/getContext)
 - `$$restProps`
 
 This library adopts a progressively enhanced approach. Any property type that cannot be inferred (e.g., "hello" is a string) falls back to "any" to minimize incorrectly typed properties or signatures. To mitigate this, the library author can add JSDoc annotations to specify types that cannot be reliably inferred. This represents a progressively enhanced approach because JSDocs are comments that can be ignored by the compiler.
@@ -364,6 +366,55 @@ export let author = {};
 export let authors = [];
 ```
 
+#### Using `@property` for complex typedefs
+
+For complex object types, use the `@property` tag to document individual properties. This provides better documentation and IDE support with per-property tooltips.
+
+Signature:
+
+```js
+/**
+ * Type description
+ * @typedef {object} TypeName
+ * @property {Type} propertyName - Property description
+ */
+```
+
+Example:
+
+```js
+/**
+ * Represents a user in the system
+ * @typedef {object} User
+ * @property {string} name - The user's full name
+ * @property {string} email - The user's email address
+ * @property {number} age - The user's age in years
+ */
+
+/** @type {User} */
+export let user = { name: "John", email: "john@example.com", age: 30 };
+```
+
+Output:
+
+```ts
+export type User = {
+  /** The user's full name */ name: string;
+  /** The user's email address */ email: string;
+  /** The user's age in years */ age: number;
+};
+
+export type ComponentProps = {
+  /**
+   * Represents a user in the system
+   * @default { name: "John", email: "john@example.com", age: 30 }
+   */
+  user?: User;
+};
+```
+
+> **Note:** The inline syntax `@typedef {{ name: string }} User` continues to work for backwards compatibility.
+
 ### `@slot`
 
 Use the `@slot` tag for typing component slots. Note that `@slot` is a non-standard JSDoc tag.
@@ -417,7 +468,8 @@ Signature:
 
 ```js
 /**
- * @event {EventDetail} eventname [event description]
+ * Optional event description
+ * @event {EventDetail} eventname [inline description]
  */
 ```
 
@@ -448,10 +500,230 @@ export default class Component extends SvelteComponentTyped<
     "button:key": CustomEvent<{ key: string }>;
     /** Fired when `key` changes. */ key: CustomEvent<null>;
   },
-  {}
+  Record<string, never>
+> {}
+```
+
+#### Using `@property` for complex event details
+
+For events with complex object payloads, use the `@property` tag to document individual properties. The main comment description will be used as the event description.
+
+Signature:
+
+```js
+/**
+ * Event description
+ * @event eventname
+ * @type {object}
+ * @property {Type} propertyName - Property description
+ */
+```
+
+Example:
+
+```js
+/**
+ * Fired when the user submits the form
+ *
+ * @event submit
+ * @type {object}
+ * @property {string} name - The user's name
+ * @property {string} email - The user's email address
+ * @property {boolean} newsletter - Whether the user opted into the newsletter
+ */
+
+import { createEventDispatcher } from "svelte";
+
+const dispatch = createEventDispatcher();
+
+function handleSubmit() {
+  dispatch("submit", {
+    name: "Jane Doe",
+    email: "jane@example.com",
+    newsletter: true
+  });
+}
+```
+
+Output:
+
+```ts
+export default class Component extends SvelteComponentTyped<
+  ComponentProps,
+  {
+    /** Fired when the user submits the form */
+    submit: CustomEvent<{
+      /** The user's name */ name: string;
+      /** The user's email address */ email: string;
+      /** Whether the user opted into the newsletter */ newsletter: boolean;
+    }>;
+  },
+  Record<string, never>
+> {}
+```
+
+### Context API
+
+`sveld` automatically generates TypeScript definitions for Svelte's `setContext`/`getContext` API by extracting types from JSDoc annotations on the context values.
+
+#### How it works
+
+When you use `setContext` in a component, `sveld` will:
+
+1. Detect the `setContext` call
+2. Extract the context key (must be a string literal)
+3. Find JSDoc `@type` annotations on the variables being passed
+4. Generate a TypeScript type export for the context
+
+#### Example
+
+**Modal.svelte**
+
+```svelte
+<script>
+  import { setContext } from 'svelte';
+
+  /**
+   * Close the modal
+   * @type {() => void}
+   */
+  const close = () => {
+    // Close logic
+  };
+
+  /**
+   * Open the modal with content
+   * @type {(component: any, props?: any) => void}
+   */
+  const open = (component, props) => {
+    // Open logic
+  };
+
+  setContext('simple-modal', { open, close });
+</script>
+
+<div class="modal">
+  <slot />
+</div>
+```
+
+**Generated TypeScript definition:**
+
+```ts
+export type SimpleModalContext = {
+  /** Open the modal with content */
+  open: (component: any, props?: any) => void;
+  /** Close the modal */
+  close: () => void;
+};
+
+export type ModalProps = {};
+
+export default class Modal extends SvelteComponentTyped<
+  ModalProps,
+  Record<string, any>,
+  { default: Record<string, never> }
 > {}
 ```
 
+**Consumer usage:**
+
+```svelte
+<script>
+  import { getContext } from 'svelte';
+  import type { SimpleModalContext } from 'modal-library/Modal.svelte';
+
+  // Fully typed with autocomplete!
+  const { close, open } = getContext<SimpleModalContext>('simple-modal');
+</script>
+
+<button on:click={close}>Close</button>
+```
+
+#### Explicitly typing contexts
+
+There are several ways to provide type information for contexts:
+
+**Option 1: Inline JSDoc on variables (recommended)**
+
+```svelte
+<script>
+  import { setContext } from 'svelte';
+
+  /**
+   * @type {() => void}
+   */
+  const close = () => {};
+
+  setContext('modal', { close });
+</script>
+```
+
+**Option 2: Using @typedef for complex types**
+
+```svelte
+<script>
+  import { setContext } from 'svelte';
+
+  /**
+   * @typedef {object} TabData
+   * @property {string} id
+   * @property {string} label
+   * @property {boolean} [disabled]
+   */
+
+  /**
+   * @type {(tab: TabData) => void}
+   */
+  const addTab = (tab) => {};
+
+  setContext('tabs', { addTab });
+</script>
+```
+
+**Option 3: Referencing imported types**
+
+```svelte
+<script>
+  import { setContext } from 'svelte';
+
+  /**
+   * @type {typeof import("./types").ModalAPI}
+   */
+  const modalAPI = {
+    open: () => {},
+    close: () => {}
+  };
+
+  setContext('modal', modalAPI);
+</script>
+```
+
+**Option 4: Direct object literal with inline functions**
+
+```svelte
+<script>
+  import { setContext } from 'svelte';
+
+  // sveld infers basic function signatures
+  setContext('modal', {
+    open: (component, props) => {}, // Inferred as (arg, arg) => any
+    close: () => {}                 // Inferred as () => any
+  });
+</script>
+```
+
+> **Note:** For best results, use explicit JSDoc `@type` annotations. Inline functions without annotations will be inferred with generic signatures.
+
+#### Notes
+
+- Context keys must be string literals (dynamic keys are not supported)
+- Variables passed to `setContext` should have JSDoc `@type` annotations for accurate types
+- The generated type name follows the pattern: `{PascalCase}Context`
+  - `"simple-modal"` → `SimpleModalContext`
+  - `"Tabs"` → `TabsContext`
+- If no type annotation is found, the type defaults to `any` with a warning
+
 ### `@restProps`
 
 `sveld` can pick up inline HTML elements that `$$restProps` is forwarded to. However, it cannot infer the underlying element for instantiated components.
@@ -593,7 +865,11 @@ Output:
  *   Text
  * </Button>
  */
-export default class Button extends SvelteComponentTyped<ButtonProps, {}, { default: {} }> {}
+export default class Button extends SvelteComponentTyped<
+  ButtonProps,
+  Record<string, any>,
+  { default: Record<string, never> }
+> {}
 ```
 
 ## Contributing

package/lib/ComponentParser.d.ts

@@ -18,7 +18,7 @@ interface ComponentProp {
     reactive: boolean;
 }
 interface ComponentSlot {
-    name?: string;
+    name?: string | null;
     default: boolean;
     fallback?: string;
     slot_props?: string;
@@ -58,6 +58,18 @@ interface Extends {
     interface: string;
     import: string;
 }
+interface ComponentContextProp {
+    name: string;
+    type: string;
+    description?: string;
+    optional: boolean;
+}
+interface ComponentContext {
+    key: string;
+    typeName: string;
+    description?: string;
+    properties: ComponentContextProp[];
+}
 export interface ParsedComponent {
     props: ComponentProp[];
     moduleExports: ComponentProp[];
@@ -68,6 +80,7 @@ export interface ParsedComponent {
     rest_props: RestProps;
     extends?: Extends;
     componentComment?: string;
+    contexts?: ComponentContext[];
 }
 export default class ComponentParser {
     private options?;
@@ -88,6 +101,7 @@ export default class ComponentParser {
     private readonly typedefs;
     private readonly generics;
     private readonly bindings;
+    private readonly contexts;
     constructor(options?: ComponentParserOptions);
     private static mapToArray;
     private static assignValue;
@@ -105,6 +119,11 @@ export default class ComponentParser {
     private addSlot;
     private addDispatchedEvent;
     private parseCustomTypes;
+    private buildEventDetailFromProperties;
+    private generateContextTypeName;
+    private findVariableTypeAndDescription;
+    private parseContextValue;
+    private parseSetContextCall;
     cleanup(): void;
     /**
      * Strips TypeScript directive comments from script blocks only.

package/lib/ComponentParser.js

@@ -38,7 +38,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const commentParser = __importStar(require("comment-parser"));
 const compiler_1 = require("svelte/compiler");
 const element_tag_map_1 = require("./element-tag-map");
-const DEFAULT_SLOT_NAME = "__default__";
+const DEFAULT_SLOT_NAME = null;
 class ComponentParser {
     options;
     source;
@@ -58,6 +58,7 @@ class ComponentParser {
     typedefs = new Map();
     generics = null;
     bindings = new Map();
+    contexts = new Map();
     constructor(options) {
         this.options = options;
     }
@@ -182,7 +183,70 @@ class ComponentParser {
         }
     }
     parseCustomTypes() {
-        commentParser.parse(this.source, { spacing: "preserve" }).forEach(({ tags }) => {
+        commentParser.parse(this.source, { spacing: "preserve" }).forEach(({ tags, description: commentDescription }) => {
+            let currentEventName;
+            let currentEventType;
+            let currentEventDescription;
+            const eventProperties = [];
+            let currentTypedefName;
+            let currentTypedefType;
+            let currentTypedefDescription;
+            const typedefProperties = [];
+            const finalizeEvent = () => {
+                if (currentEventName !== undefined) {
+                    let detailType;
+                    if (eventProperties.length > 0) {
+                        detailType = this.buildEventDetailFromProperties(eventProperties, currentEventName);
+                    }
+                    else {
+                        detailType = currentEventType || "";
+                    }
+                    this.addDispatchedEvent({
+                        name: currentEventName,
+                        detail: detailType,
+                        has_argument: false,
+                        description: currentEventDescription,
+                    });
+                    this.eventDescriptions.set(currentEventName, currentEventDescription);
+                    eventProperties.length = 0;
+                    currentEventName = undefined;
+                    currentEventType = undefined;
+                    currentEventDescription = undefined;
+                }
+            };
+            const finalizeTypedef = () => {
+                if (currentTypedefName !== undefined) {
+                    let typedefType;
+                    let typedefTs;
+                    if (typedefProperties.length > 0) {
+                        // Build type alias with property descriptions
+                        typedefType = this.buildEventDetailFromProperties(typedefProperties);
+                        typedefTs = `type ${currentTypedefName} = ${typedefType}`;
+                    }
+                    else if (currentTypedefType) {
+                        // Use inline type definition (existing behavior)
+                        typedefType = currentTypedefType;
+                        typedefTs = /(\}|\};)$/.test(typedefType)
+                            ? `interface ${currentTypedefName} ${typedefType}`
+                            : `type ${currentTypedefName} = ${typedefType}`;
+                    }
+                    else {
+                        // No type or properties specified, default to empty object
+                        typedefType = "{}";
+                        typedefTs = `type ${currentTypedefName} = ${typedefType}`;
+                    }
+                    this.typedefs.set(currentTypedefName, {
+                        type: typedefType,
+                        name: currentTypedefName,
+                        description: ComponentParser.assignValue(currentTypedefDescription),
+                        ts: typedefTs,
+                    });
+                    typedefProperties.length = 0;
+                    currentTypedefName = undefined;
+                    currentTypedefType = undefined;
+                    currentTypedefDescription = undefined;
+                }
+            };
             tags.forEach(({ tag, type: tagType, name, description }) => {
                 const type = this.aliasType(tagType);
                 switch (tag) {
@@ -206,32 +270,250 @@ class ComponentParser {
                         });
                         break;
                     case "event":
-                        // Store event metadata (description and detail) from JSDoc
-                        // This will be used later when we determine if the event is forwarded or dispatched
-                        this.eventDescriptions.set(name, description ? description : undefined);
-                        // For dispatched events, also store the detail type
-                        this.addDispatchedEvent({
-                            name,
-                            detail: type,
-                            has_argument: false,
-                            description: description ? description : undefined,
-                        });
+                        // Finalize any previous event being built
+                        finalizeEvent();
+                        // Start tracking new event
+                        currentEventName = name;
+                        currentEventType = type;
+                        // Use the main comment description if available, otherwise use inline description
+                        currentEventDescription = commentDescription?.trim() || description || undefined;
                         break;
-                    case "typedef":
-                        this.typedefs.set(name, {
-                            type,
-                            name,
-                            description: ComponentParser.assignValue(description),
-                            ts: /(\}|\};)$/.test(type) ? `interface ${name} ${type}` : `type ${name} = ${type}`,
-                        });
+                    case "type":
+                        // Track the @type tag for the current event
+                        if (currentEventName !== undefined) {
+                            currentEventType = type;
+                        }
                         break;
+                    case "property":
+                        // Collect properties for the current event or typedef
+                        if (currentEventName !== undefined) {
+                            eventProperties.push({
+                                name,
+                                type,
+                                description: description?.replace(/^-\s*/, "").trim(),
+                            });
+                        }
+                        else if (currentTypedefName !== undefined) {
+                            typedefProperties.push({
+                                name,
+                                type,
+                                description: description?.replace(/^-\s*/, "").trim(),
+                            });
+                        }
+                        break;
+                    case "typedef": {
+                        // Finalize any previous typedef being built
+                        finalizeTypedef();
+                        // Start tracking new typedef
+                        currentTypedefName = name;
+                        currentTypedefType = type;
+                        // Use inline description if present, otherwise use comment description
+                        const trimmedCommentDesc = commentDescription?.trim();
+                        currentTypedefDescription =
+                            description || (trimmedCommentDesc && trimmedCommentDesc !== "}" ? trimmedCommentDesc : undefined);
+                        break;
+                    }
                     case "generics":
                         this.generics = [name, type];
                         break;
                 }
             });
+            // Finalize any remaining event or typedef
+            finalizeEvent();
+            finalizeTypedef();
         });
     }
+    buildEventDetailFromProperties(properties) {
+        if (properties.length === 0)
+            return "null";
+        // Build inline object type with property descriptions as JSDoc comments
+        const props = properties
+            .map(({ name, type, description }) => {
+            if (description) {
+                return `/** ${description} */ ${name}: ${type};`;
+            }
+            return `${name}: ${type};`;
+        })
+            .join(" ");
+        return `{ ${props} }`;
+    }
+    generateContextTypeName(key) {
+        // Convert "simple-modal" -> "SimpleModalContext"
+        // Convert "Tabs" -> "TabsContext"
+        const parts = key.split(/[-_\s]+/);
+        const capitalized = parts.map((p) => p.charAt(0).toUpperCase() + p.slice(1)).join("");
+        return `${capitalized}Context`;
+    }
+    findVariableTypeAndDescription(varName) {
+        // Search through the source code directly for JSDoc comments
+        if (!this.source)
+            return null;
+        // Build a map of variable names to their types by looking at the source
+        const lines = this.source.split("\n");
+        for (let i = 0; i < lines.length; i++) {
+            const line = lines[i].trim();
+            // Check if this line declares our variable
+            // Match patterns like: const varName = ..., let varName = ..., function varName
+            const constMatch = line.match(new RegExp(`const\\s+${varName}\\s*=`));
+            const letMatch = line.match(new RegExp(`let\\s+${varName}\\s*=`));
+            const funcMatch = line.match(new RegExp(`function\\s+${varName}\\s*\\(`));
+            if (constMatch || letMatch || funcMatch) {
+                // Look backwards for JSDoc comment
+                for (let j = i - 1; j >= 0; j--) {
+                    const prevLine = lines[j].trim();
+                    // Stop if we hit a non-comment, non-empty line
+                    if (prevLine && !prevLine.startsWith("*") && !prevLine.startsWith("/*") && !prevLine.startsWith("//")) {
+                        break;
+                    }
+                    // Found start of JSDoc comment
+                    if (prevLine.startsWith("/**")) {
+                        // Extract the JSDoc comment block
+                        const commentLines = [];
+                        for (let k = j; k < i; k++) {
+                            commentLines.push(lines[k]);
+                        }
+                        const commentBlock = commentLines.join("\n");
+                        // Parse the JSDoc
+                        const parsed = commentParser.parse(commentBlock, { spacing: "preserve" });
+                        if (parsed[0]?.tags) {
+                            const typeTag = parsed[0].tags.find((t) => t.tag === "type");
+                            if (typeTag) {
+                                return {
+                                    type: this.aliasType(typeTag.type),
+                                    description: parsed[0].description || typeTag.description,
+                                };
+                            }
+                        }
+                        break;
+                    }
+                }
+            }
+        }
+        return null;
+    }
+    parseContextValue(node, key) {
+        if (node.type === "ObjectExpression") {
+            // Parse object literal: { open, close }
+            const properties = [];
+            for (const prop of node.properties) {
+                if (prop.type === "Property" || prop.type === "ObjectProperty") {
+                    const propName = prop.key.name || prop.key.value;
+                    // Try to find the variable definition to get its JSDoc type
+                    let propType = "any";
+                    let propDescription;
+                    if (prop.value.type === "Identifier") {
+                        const varName = prop.value.name;
+                        const varInfo = this.findVariableTypeAndDescription(varName);
+                        if (varInfo) {
+                            propType = varInfo.type;
+                            propDescription = varInfo.description;
+                        }
+                        else if (this.options?.verbose) {
+                            console.warn(`Warning: Context "${key}" property "${propName}" has no type annotation. Using "any".`);
+                        }
+                    }
+                    else if (prop.value.type === "ArrowFunctionExpression" || prop.value.type === "FunctionExpression") {
+                        // Inline function
+                        const params = prop.value.params.map((p) => `${p.name || "arg"}: any`).join(", ");
+                        propType = `(${params}) => any`;
+                    }
+                    else if (prop.value.type === "Literal") {
+                        // Literal value
+                        propType = typeof prop.value.value;
+                    }
+                    properties.push({
+                        name: propName,
+                        type: propType,
+                        description: propDescription,
+                        optional: false,
+                    });
+                }
+            }
+            return {
+                key,
+                typeName: this.generateContextTypeName(key),
+                properties,
+                description: undefined,
+            };
+        }
+        else if (node.type === "Identifier") {
+            // setContext('key', someVariable)
+            const varName = node.name;
+            const varInfo = this.findVariableTypeAndDescription(varName);
+            if (varInfo) {
+                return {
+                    key,
+                    typeName: this.generateContextTypeName(key),
+                    properties: [
+                        {
+                            name: varName,
+                            type: varInfo.type,
+                            description: varInfo.description,
+                            optional: false,
+                        },
+                    ],
+                };
+            }
+            else if (this.options?.verbose) {
+                console.warn(`Warning: Context "${key}" variable "${varName}" has no type annotation. Using "any".`);
+            }
+            // Still create context with 'any' type
+            return {
+                key,
+                typeName: this.generateContextTypeName(key),
+                properties: [
+                    {
+                        name: varName,
+                        type: "any",
+                        description: undefined,
+                        optional: false,
+                    },
+                ],
+            };
+        }
+        return null;
+    }
+    parseSetContextCall(node) {
+        // Extract context key (first argument)
+        const keyArg = node.arguments[0];
+        if (!keyArg)
+            return;
+        let contextKey = null;
+        if (keyArg.type === "Literal") {
+            contextKey = keyArg.value;
+        }
+        else if (keyArg.type === "TemplateLiteral") {
+            // Handle simple template literals
+            if (keyArg.quasis?.length === 1) {
+                contextKey = keyArg.quasis[0].value.cooked;
+            }
+            else if (this.options?.verbose) {
+                console.warn("Warning: Skipping setContext with dynamic template literal key");
+            }
+        }
+        else if (this.options?.verbose) {
+            console.warn(`Warning: Skipping setContext with non-literal key (type: ${keyArg.type})`);
+        }
+        if (!contextKey)
+            return;
+        // Extract context value (second argument)
+        const valueArg = node.arguments[1];
+        if (!valueArg)
+            return;
+        // Parse the context object
+        const contextInfo = this.parseContextValue(valueArg, contextKey);
+        if (contextInfo) {
+            // Check if context with same key already exists
+            if (this.contexts.has(contextKey)) {
+                if (this.options?.verbose) {
+                    console.warn(`Warning: Multiple setContext calls with key "${contextKey}". Using first occurrence.`);
+                }
+            }
+            else {
+                this.contexts.set(contextKey, contextInfo);
+            }
+        }
+    }
     cleanup() {
         this.source = undefined;
         this.compiled = undefined;
@@ -249,6 +531,7 @@ class ComponentParser {
         this.typedefs.clear();
         this.generics = null;
         this.bindings.clear();
+        this.contexts.clear();
     }
     /**
      * Strips TypeScript directive comments from script blocks only.
@@ -356,6 +639,9 @@ class ComponentParser {
                     if (node.callee.name === "createEventDispatcher") {
                         dispatcher_name = parent?.id.name;
                     }
+                    if (node.callee.name === "setContext") {
+                        this.parseSetContextCall(node, parent);
+                    }
                     callees.push({
                         name: node.callee.name,
                         arguments: node.arguments,
@@ -644,7 +930,7 @@ class ComponentParser {
                             slot_props[key].value = "any";
                         new_props.push(`${key}: ${slot_props[key].value}`);
                     });
-                    const formatted_slot_props = new_props.length === 0 ? "{}" : `{ ${new_props.join(", ")} }`;
+                    const formatted_slot_props = new_props.length === 0 ? "Record<string, never>" : `{ ${new_props.join(", ")} }`;
                     return { ...slot, slot_props: formatted_slot_props };
                 }
                 catch (_e) {
@@ -664,6 +950,7 @@ class ComponentParser {
             rest_props: this.rest_props,
             extends: this.extends,
             componentComment: this.componentComment,
+            contexts: ComponentParser.mapToArray(this.contexts),
         };
     }
 }

package/lib/writer/writer-markdown.js

@@ -42,7 +42,7 @@ const WriterMarkdown_1 = __importDefault(require("./WriterMarkdown"));
 const writer_ts_definitions_1 = require("./writer-ts-definitions");
 const PROP_TABLE_HEADER = `| Prop name | Required | Kind | Reactive | Type | Default value | Description |\n| :- | :- | :- | :- |\n`;
 const SLOT_TABLE_HEADER = `| Slot name | Default | Props | Fallback |\n| :- | :- | :- | :- |\n`;
-const EVENT_TABLE_HEADER = `| Event name | Type | Detail |\n| :- | :- | :- |\n`;
+const EVENT_TABLE_HEADER = `| Event name | Type | Detail | Description |\n| :- | :- | :- | :- |\n`;
 const MD_TYPE_UNDEFINED = "--";
 function formatPropType(type) {
     if (type === undefined)
@@ -130,7 +130,7 @@ async function writeMarkdown(components, options) {
         if (component.events.length > 0) {
             document.append("raw", EVENT_TABLE_HEADER);
             component.events.forEach((event) => {
-                document.append("raw", `| ${event.name} | ${event.type} | ${event.type === "dispatched" ? formatEventDetail(event.detail) : MD_TYPE_UNDEFINED} |\n`);
+                document.append("raw", `| ${event.name} | ${event.type} | ${event.type === "dispatched" ? formatEventDetail(event.detail) : MD_TYPE_UNDEFINED} | ${formatPropDescription(event.description)} |\n`);
             });
         }
         else {

package/lib/writer/writer-ts-definitions.d.ts

@@ -2,6 +2,7 @@ import type { ParsedExports } from "../parse-exports";
 import type { ComponentDocApi, ComponentDocs } from "../rollup-plugin";
 export declare function formatTsProps(props?: string): string;
 export declare function getTypeDefs(def: Pick<ComponentDocApi, "typedefs">): string;
+export declare function getContextDefs(def: Pick<ComponentDocApi, "contexts">): string;
 export declare function writeTsDefinition(component: ComponentDocApi): string;
 export interface WriteTsDefinitionsOptions {
     outDir: string;

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

@@ -38,6 +38,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.formatTsProps = formatTsProps;
 exports.getTypeDefs = getTypeDefs;
+exports.getContextDefs = getContextDefs;
 exports.writeTsDefinition = writeTsDefinition;
 exports.default = writeTsDefinitions;
 const path = __importStar(require("node:path"));
@@ -47,6 +48,8 @@ const ANY_TYPE = "any";
 const EMPTY_STR = "";
 // Svelte 4 is not compatible with `{}`
 const EMPTY_EVENTS = "Record<string, any>";
+// Avoid `{}` type per Biome linter rule noBannedTypes
+const EMPTY_OBJECT = "Record<string, never>";
 function formatTsProps(props) {
     if (props === undefined)
         return ANY_TYPE;
@@ -57,9 +60,26 @@ function getTypeDefs(def) {
         return EMPTY_STR;
     return def.typedefs.map((typedef) => `export ${typedef.ts}`).join("\n\n");
 }
+function getContextDefs(def) {
+    if (!def.contexts || def.contexts.length === 0)
+        return EMPTY_STR;
+    return def.contexts
+        .map((context) => {
+        const props = context.properties
+            .map((prop) => {
+            const comment = prop.description ? `/** ${prop.description} */\n  ` : "";
+            const optional = prop.optional ? "?" : "";
+            return `${comment}${prop.name}${optional}: ${prop.type};`;
+        })
+            .join("\n  ");
+        const contextComment = context.description ? `/**\n * ${context.description}\n */\n` : "";
+        return `${contextComment}export type ${context.typeName} = {\n  ${props}\n};`;
+    })
+        .join("\n\n");
+}
 function clampKey(key) {
     if (/(-|\s+|:)/.test(key)) {
-        return /("|')/.test(key) ? key : `["${key}"]`;
+        return /("|')/.test(key) ? key : `"${key}"`;
     }
     return key;
 }
@@ -138,11 +158,19 @@ function genPropDef(def) {
         }
     }
     else {
-        prop_def = `
+        // Use EMPTY_OBJECT when there are no props and no extends
+        if (props.trim() === "" && def.extends === undefined) {
+            prop_def = `
+    export type ${props_name}${genericsName} = ${EMPTY_OBJECT};
+  `;
+        }
+        else {
+            prop_def = `
     export type ${props_name}${genericsName} = ${def.extends !== undefined ? `${def.extends.interface} & ` : ""} {
       ${props}
     }
   `;
+        }
     }
     return {
         props_name,
@@ -150,13 +178,16 @@ function genPropDef(def) {
     };
 }
 function genSlotDef(def) {
-    return def.slots
+    if (def.slots.length === 0)
+        return EMPTY_OBJECT;
+    const slotDefs = def.slots
         .map(({ name, slot_props, ...rest }) => {
-        const key = rest.default ? "default" : clampKey(name ?? "");
+        const key = rest.default || name === null ? "default" : clampKey(name ?? "");
         const description = rest.description ? `/** ${rest.description} */\n` : "";
         return `${description}${clampKey(key)}: ${formatTsProps(slot_props)};`;
     })
         .join("\n");
+    return `{${slotDefs}}`;
 }
 const mapEvent = () => {
     // lib.dom.d.ts should map event types by name.
@@ -353,7 +384,7 @@ function genModuleExports(def) {
         .join("\n");
 }
 function writeTsDefinition(component) {
-    const { moduleName, typedefs, generics, props, moduleExports, slots, events, rest_props, extends: _extends, componentComment, } = component;
+    const { moduleName, typedefs, generics, props, moduleExports, slots, events, rest_props, extends: _extends, componentComment, contexts, } = component;
     const { props_name, prop_def } = genPropDef({
         moduleName,
         props,
@@ -368,12 +399,13 @@ function writeTsDefinition(component) {
   ${genImports({ extends: _extends })}
   ${genModuleExports({ moduleExports })}
   ${getTypeDefs({ typedefs })}
+  ${getContextDefs({ contexts })}
   ${prop_def}
   ${genComponentComment({ componentComment })}
   export default class ${moduleName === "default" ? "" : moduleName}${generic} extends SvelteComponentTyped<
       ${genericProps},
       ${genEventDef({ events })},
-      {${genSlotDef({ slots })}}
+      ${genSlotDef({ slots })}
     > {
       ${genAccessors({ props })}
     }`;

package/package.json

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