sveld 0.25.8 → 0.25.10

package/README.md

@@ -196,7 +196,7 @@ By default, `sveld` will use the `"svelte"` field from your `package.json` to de
 ```js
 sveld({
   entry: "src/index.js",
-})
+});
 ```
 
 When building the library, TypeScript definitions are emitted to the `types` folder by default.
@@ -254,7 +254,10 @@ sveld({
   markdownOptions: {
     onAppend: (type, document, components) => {
       if (type === "h1")
-        document.append("quote", `${components.size} components exported from ${pkg.name}@${pkg.version}.`);
+        document.append(
+          "quote",
+          `${components.size} components exported from ${pkg.name}@${pkg.version}.`,
+        );
     },
   },
   json: true,
@@ -605,7 +608,14 @@ type DataTableProps<Row> = {
   // Snippet prop for Svelte 5 compatibility
   cell?: (
     this: void,
-    ...args: [{ row: Row; cell: DataTableCell<Row>; rowIndex: number; cellIndex: number }]
+    ...args: [
+      {
+        row: Row;
+        cell: DataTableCell<Row>;
+        rowIndex: number;
+        cellIndex: number;
+      },
+    ]
   ) => void;
 
   // Default slot as children prop
@@ -614,11 +624,18 @@ type DataTableProps<Row> = {
 
 export default class DataTable<Row> extends SvelteComponentTyped<
   DataTableProps<Row>,
-  { /* events */ },
+  {
+    /* events */
+  },
   {
     // Traditional slot definition (Svelte 3/4)
     default: Record<string, never>;
-    cell: { row: Row; cell: DataTableCell<Row>; rowIndex: number; cellIndex: number };
+    cell: {
+      row: Row;
+      cell: DataTableCell<Row>;
+      rowIndex: number;
+      cellIndex: number;
+    };
   }
 > {}
 ```
@@ -705,7 +722,7 @@ function handleSubmit() {
   dispatch("submit", {
     name: "Jane Doe",
     email: "jane@example.com",
-    newsletter: true
+    newsletter: true,
   });
 }
 ```
@@ -752,7 +769,7 @@ const dispatch = createEventDispatcher();
 function throwSnowball() {
   dispatch("snowball", {
     isPacked: true,
-    speed: 50
+    speed: 50,
   });
 }
 ```
@@ -1026,7 +1043,14 @@ Example
 The generated TypeScript definition will resemble the following:
 
 ```ts
-export default class Component<Row extends DataTableRow = any> extends SvelteComponentTyped<
+// Props type includes the full constraint, enabling indexed access types like Row["id"]
+export type ComponentProps<Row extends DataTableRow = any> = {
+  rows?: ReadonlyArray<Row>;
+};
+
+export default class Component<
+  Row extends DataTableRow = any,
+> extends SvelteComponentTyped<
   ComponentProps<Row>,
   Record<string, any>,
   Record<string, any>
@@ -1042,6 +1066,8 @@ For a parameter list, the name should be comma-separated but not include spaces.
 ```
 
 ```ts
+export type ComponentProps<Param1, Param2> = { ... };
+
 export default class Component<Param1, Param2> extends SvelteComponentTyped<
   ComponentProps<Name1, Name2>,
   Record<string, any>,

package/lib/ComponentParser.d.ts

@@ -129,6 +129,7 @@ export default class ComponentParser {
      */
     private isNumericConstant;
     private sourceAtPos;
+    private processInitializer;
     private collectReactiveVars;
     private addProp;
     private addModuleExport;

package/lib/ComponentParser.js

@@ -7,6 +7,12 @@ const compiler_1 = require("svelte/compiler");
 const element_tag_map_1 = require("./element-tag-map");
 const COMMENT_BLOCK_DESCRIPTION_REGEX = /^-\s*/;
 const VAR_DECLARATION_REGEX = /(?:const|let|function)\s+(\w+)\s*[=(]/;
+function extractDescriptionAfterDash(description) {
+    if (!description)
+        return undefined;
+    const dashIndex = description.lastIndexOf("-");
+    return dashIndex >= 0 ? description.substring(dashIndex + 1).trim() : description.trim();
+}
 const DEFAULT_SLOT_NAME = null;
 const TYPEDEF_END_REGEX = /(\}|\};)$/;
 const PROPERTY_DESCRIPTION_REGEX = /^-\s*/;
@@ -134,6 +140,50 @@ class ComponentParser {
     sourceAtPos(start, end) {
         return this.source?.slice(start, end);
     }
+    processInitializer(init) {
+        let value;
+        let type;
+        let isFunction = false;
+        if (init.type === "ObjectExpression" ||
+            init.type === "BinaryExpression" ||
+            init.type === "ArrayExpression" ||
+            init.type === "ArrowFunctionExpression") {
+            value = this.sourceAtPos(init.start, init.end)?.replace(NEWLINE_CR_REGEX, " ");
+            type = value;
+            isFunction = init.type === "ArrowFunctionExpression";
+            if (init.type === "BinaryExpression") {
+                if (init?.left.type === "Literal" && typeof init?.left.value === "string") {
+                    type = "string";
+                }
+            }
+            if (init.type === "ArrowFunctionExpression") {
+                type = "(...args: any[]) => any";
+                value = undefined;
+            }
+        }
+        else if (init.type === "UnaryExpression") {
+            value = this.sourceAtPos(init.start, init.end);
+            type = typeof init.argument?.value;
+        }
+        else if (init.type === "Identifier") {
+            value = this.sourceAtPos(init.start, init.end);
+        }
+        else if (init.type === "MemberExpression") {
+            value = this.sourceAtPos(init.start, init.end);
+            if (this.isNumericConstant(init)) {
+                type = "number";
+            }
+        }
+        else if (init.type === "TemplateLiteral") {
+            value = this.sourceAtPos(init.start, init.end);
+            type = "string";
+        }
+        else {
+            value = init.raw;
+            type = init.value == null ? undefined : typeof init.value;
+        }
+        return { value, type, isFunction };
+    }
     collectReactiveVars() {
         const reactiveVars = this.compiled?.vars.filter(({ reassigned, writable }) => reassigned && writable) ?? [];
         for (const { name } of reactiveVars) {
@@ -178,9 +228,7 @@ class ComponentParser {
         const name = default_slot ? DEFAULT_SLOT_NAME : (slot_name ?? "");
         const fallback = ComponentParser.assignValue(slot_fallback);
         const props = ComponentParser.assignValue(slot_props);
-        const description = slot_description
-            ? slot_description.substring(slot_description.lastIndexOf("-") + 1).trim()
-            : undefined;
+        const description = extractDescriptionAfterDash(slot_description);
         if (this.slots.has(name)) {
             const existing_slot = this.slots.get(name);
             this.slots.set(name, {
@@ -209,7 +257,7 @@ class ComponentParser {
          * `@event` is not specified.
          */
         const default_detail = !has_argument && !detail ? "null" : ComponentParser.assignValue(detail);
-        const event_description = description ? description.substring(description.lastIndexOf("-") + 1).trim() : undefined;
+        const event_description = extractDescriptionAfterDash(description);
         if (this.events.has(name)) {
             const existing_event = this.events.get(name);
             this.events.set(name, {
@@ -790,65 +838,12 @@ class ComponentParser {
                         }
                         const { type: declaration_type, id, init, } = node.declaration?.declarations ? node.declaration.declarations[0] : node.declaration;
                         const prop_name = id.name;
-                        let value;
-                        let type;
                         let kind = node.declaration.kind;
                         let description;
-                        let isFunction = false;
                         let isFunctionDeclaration = false;
-                        if (init != null) {
-                            if (init.type === "ObjectExpression" ||
-                                init.type === "BinaryExpression" ||
-                                init.type === "ArrayExpression" ||
-                                init.type === "ArrowFunctionExpression") {
-                                value = this.sourceAtPos(init.start, init.end)?.replace(NEWLINE_CR_REGEX, " ");
-                                type = value;
-                                isFunction = init.type === "ArrowFunctionExpression";
-                                if (init.type === "BinaryExpression") {
-                                    if (init?.left.type === "Literal" && typeof init?.left.value === "string") {
-                                        type = "string";
-                                    }
-                                }
-                                // For arrow functions, use a generic function type instead of the implementation
-                                // Don't store the implementation in value - it clutters documentation
-                                if (init.type === "ArrowFunctionExpression") {
-                                    type = "(...args: any[]) => any";
-                                    value = undefined;
-                                }
-                            }
-                            else {
-                                if (init.type === "UnaryExpression") {
-                                    value = this.sourceAtPos(init.start, init.end);
-                                    type = typeof init.argument?.value;
-                                }
-                                else if (init.type === "Identifier") {
-                                    // Handle non-literal defaults like variable references and global identifiers.
-                                    // Don't infer type, just preserve existing type annotation.
-                                    value = this.sourceAtPos(init.start, init.end);
-                                }
-                                else if (init.type === "MemberExpression") {
-                                    // Handle member expressions like Number.POSITIVE_INFINITY, Math.PI, etc.
-                                    value = this.sourceAtPos(init.start, init.end);
-                                    // Infer type as "number" for well-known numeric constants
-                                    if (this.isNumericConstant(init)) {
-                                        type = "number";
-                                    }
-                                    // Otherwise, don't infer type, just preserve existing type annotation.
-                                }
-                                else if (init.type === "TemplateLiteral") {
-                                    // Handle template literals - they always evaluate to strings
-                                    value = this.sourceAtPos(init.start, init.end);
-                                    type = "string";
-                                }
-                                else {
-                                    value = init.raw;
-                                    type = init.value == null ? undefined : typeof init.value;
-                                }
-                            }
-                        }
+                        const initResult = init != null ? this.processInitializer(init) : { isFunction: false };
+                        let { value, type, isFunction } = initResult;
                         if (declaration_type === "FunctionDeclaration") {
-                            // Don't store function body in value - it clutters documentation
-                            // The type signature is what matters for API docs
                             value = undefined;
                             type = "() => any";
                             kind = "function";
@@ -982,66 +977,13 @@ class ComponentParser {
                     }
                     const { type: declaration_type, id, init, } = node.declaration.declarations ? node.declaration.declarations[0] : node.declaration;
                     prop_name ??= id.name;
-                    let value;
-                    let type;
                     let kind = node.declaration.kind;
                     let description;
-                    let isFunction = false;
                     let isFunctionDeclaration = false;
                     const isRequired = kind === "let" && init == null;
-                    if (init != null) {
-                        if (init.type === "ObjectExpression" ||
-                            init.type === "BinaryExpression" ||
-                            init.type === "ArrayExpression" ||
-                            init.type === "ArrowFunctionExpression") {
-                            value = this.sourceAtPos(init.start, init.end)?.replace(NEWLINE_CR_REGEX, " ");
-                            type = value;
-                            isFunction = init.type === "ArrowFunctionExpression";
-                            if (init.type === "BinaryExpression") {
-                                if (init?.left.type === "Literal" && typeof init?.left.value === "string") {
-                                    type = "string";
-                                }
-                            }
-                            // For arrow functions, use a generic function type instead of the implementation
-                            // Don't store the implementation in value - it clutters documentation
-                            if (init.type === "ArrowFunctionExpression") {
-                                type = "(...args: any[]) => any";
-                                value = undefined;
-                            }
-                        }
-                        else {
-                            if (init.type === "UnaryExpression") {
-                                value = this.sourceAtPos(init.start, init.end);
-                                type = typeof init.argument?.value;
-                            }
-                            else if (init.type === "Identifier") {
-                                // Handle non-literal defaults like variable references and global identifiers.
-                                // Don't infer type, just preserve existing type annotation.
-                                value = this.sourceAtPos(init.start, init.end);
-                            }
-                            else if (init.type === "MemberExpression") {
-                                // Handle member expressions like Number.POSITIVE_INFINITY, Math.PI, etc.
-                                value = this.sourceAtPos(init.start, init.end);
-                                // Infer type as "number" for well-known numeric constants
-                                if (this.isNumericConstant(init)) {
-                                    type = "number";
-                                }
-                                // Otherwise, don't infer type, just preserve existing type annotation.
-                            }
-                            else if (init.type === "TemplateLiteral") {
-                                // Handle template literals - they always evaluate to strings
-                                value = this.sourceAtPos(init.start, init.end);
-                                type = "string";
-                            }
-                            else {
-                                value = init.raw;
-                                type = init.value == null ? undefined : typeof init.value;
-                            }
-                        }
-                    }
+                    const initResult = init != null ? this.processInitializer(init) : { isFunction: false };
+                    let { value, type, isFunction } = initResult;
                     if (declaration_type === "FunctionDeclaration") {
-                        // Don't store function body in value - it clutters documentation
-                        // The type signature is what matters for API docs
                         value = undefined;
                         type = "() => any";
                         kind = "function";
@@ -1167,9 +1109,7 @@ class ComponentParser {
                         const existing_event = this.events.get(node.name);
                         // Check if this event has a JSDoc description
                         const description = this.eventDescriptions.get(node.name);
-                        const event_description = description
-                            ? description.substring(description.lastIndexOf("-") + 1).trim()
-                            : undefined;
+                        const event_description = extractDescriptionAfterDash(description);
                         if (!existing_event) {
                             // Add new forwarded event
                             this.events.set(node.name, {
@@ -1239,9 +1179,7 @@ class ComponentParser {
             // If event is marked as dispatched but is NOT actually dispatched, convert it to forwarded
             if (event && event.type === "dispatched" && !actuallyDispatchedEvents.has(eventName)) {
                 const description = this.eventDescriptions.get(eventName);
-                const event_description = description
-                    ? description.substring(description.lastIndexOf("-") + 1).trim()
-                    : undefined;
+                const event_description = extractDescriptionAfterDash(description);
                 const forwardedEvent = {
                     type: "forwarded",
                     name: eventName,

package/lib/writer/markdown-format-utils.d.ts

@@ -0,0 +1,11 @@
+export declare const MD_TYPE_UNDEFINED = "--";
+export declare const PROP_TABLE_HEADER = "| Prop name | Required | Kind | Reactive | Type | Default value | Description |\n| :- | :- | :- | :- |\n";
+export declare const SLOT_TABLE_HEADER = "| Slot name | Default | Props | Fallback |\n| :- | :- | :- | :- |\n";
+export declare const EVENT_TABLE_HEADER = "| Event name | Type | Detail | Description |\n| :- | :- | :- | :- |\n";
+export declare function formatPropType(type?: string): string;
+export declare function escapeHtml(text: string): string;
+export declare function formatPropValue(value: string | undefined): string;
+export declare function formatPropDescription(description: string | undefined): string;
+export declare function formatSlotProps(props?: string): string;
+export declare function formatSlotFallback(fallback?: string): string;
+export declare function formatEventDetail(detail?: string): string;

package/lib/writer/markdown-format-utils.js

@@ -0,0 +1,53 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EVENT_TABLE_HEADER = exports.SLOT_TABLE_HEADER = exports.PROP_TABLE_HEADER = exports.MD_TYPE_UNDEFINED = void 0;
+exports.formatPropType = formatPropType;
+exports.escapeHtml = escapeHtml;
+exports.formatPropValue = formatPropValue;
+exports.formatPropDescription = formatPropDescription;
+exports.formatSlotProps = formatSlotProps;
+exports.formatSlotFallback = formatSlotFallback;
+exports.formatEventDetail = formatEventDetail;
+const writer_ts_definitions_core_1 = require("./writer-ts-definitions-core");
+exports.MD_TYPE_UNDEFINED = "--";
+exports.PROP_TABLE_HEADER = "| Prop name | Required | Kind | Reactive | Type | Default value | Description |\n| :- | :- | :- | :- |\n";
+exports.SLOT_TABLE_HEADER = "| Slot name | Default | Props | Fallback |\n| :- | :- | :- | :- |\n";
+exports.EVENT_TABLE_HEADER = "| Event name | Type | Detail | Description |\n| :- | :- | :- | :- |\n";
+const PIPE_REGEX = /\|/g;
+const LT_REGEX = /</g;
+const GT_REGEX = />/g;
+const BACKTICK_REGEX = /`/g;
+const NEWLINE_REGEX = /\n/g;
+function formatPropType(type) {
+    if (type === undefined)
+        return exports.MD_TYPE_UNDEFINED;
+    return `<code>${type.replace(PIPE_REGEX, "&#124;")}</code>`;
+}
+function escapeHtml(text) {
+    return text.replace(LT_REGEX, "&lt;").replace(GT_REGEX, "&gt;");
+}
+function formatPropValue(value) {
+    if (value === undefined)
+        return exports.MD_TYPE_UNDEFINED;
+    return `<code>${value.replace(BACKTICK_REGEX, "\\`").replace(PIPE_REGEX, "&#124;")}</code>`;
+}
+function formatPropDescription(description) {
+    if (description === undefined || description.trim().length === 0)
+        return exports.MD_TYPE_UNDEFINED;
+    return escapeHtml(description).replace(NEWLINE_REGEX, "<br />");
+}
+function formatSlotProps(props) {
+    if (props === undefined || props === "{}")
+        return exports.MD_TYPE_UNDEFINED;
+    return formatPropType((0, writer_ts_definitions_core_1.formatTsProps)(props).replace(NEWLINE_REGEX, " "));
+}
+function formatSlotFallback(fallback) {
+    if (fallback === undefined)
+        return exports.MD_TYPE_UNDEFINED;
+    return formatPropType(escapeHtml(fallback).replace(NEWLINE_REGEX, "<br />"));
+}
+function formatEventDetail(detail) {
+    if (detail === undefined)
+        return exports.MD_TYPE_UNDEFINED;
+    return formatPropType(detail.replace(NEWLINE_REGEX, " "));
+}

package/lib/writer/writer-json.js

@@ -7,37 +7,25 @@ exports.default = writeJson;
 const node_path_1 = __importDefault(require("node:path"));
 const path_1 = require("../path");
 const Writer_1 = __importDefault(require("./Writer"));
-async function writeJsonComponents(components, options) {
-    const output = Array.from(components, ([_moduleName, component]) => ({
+function transformAndSortComponents(components, inputDir) {
+    return Array.from(components, ([_moduleName, component]) => ({
         ...component,
-        filePath: (0, path_1.normalizeSeparators)(node_path_1.default.join(options.inputDir, node_path_1.default.normalize(component.filePath))),
-    })).sort((a, b) => {
-        if (a.moduleName < b.moduleName)
-            return -1;
-        if (a.moduleName > b.moduleName)
-            return 1;
-        return 0;
-    });
-    output.map((c) => {
+        filePath: (0, path_1.normalizeSeparators)(node_path_1.default.join(inputDir, node_path_1.default.normalize(component.filePath))),
+    })).sort((a, b) => a.moduleName.localeCompare(b.moduleName));
+}
+async function writeJsonComponents(components, options) {
+    const output = transformAndSortComponents(components, options.inputDir);
+    await Promise.all(output.map((c) => {
         const outFile = node_path_1.default.resolve(node_path_1.default.join(options.outDir || "", `${c.moduleName}.api.json`));
         const writer = new Writer_1.default({ parser: "json", printWidth: 80 });
         console.log(`created ${outFile}"\n`);
         return writer.write(outFile, JSON.stringify(c));
-    });
+    }));
 }
 async function writeJsonLocal(components, options) {
     const output = {
         total: components.size,
-        components: Array.from(components, ([_moduleName, component]) => ({
-            ...component,
-            filePath: (0, path_1.normalizeSeparators)(node_path_1.default.join(options.inputDir, node_path_1.default.normalize(component.filePath))),
-        })).sort((a, b) => {
-            if (a.moduleName < b.moduleName)
-                return -1;
-            if (a.moduleName > b.moduleName)
-                return 1;
-            return 0;
-        }),
+        components: transformAndSortComponents(components, options.inputDir),
     };
     const output_path = node_path_1.default.join(process.cwd(), options.outFile);
     const writer = new Writer_1.default({ parser: "json", printWidth: 80 });

package/lib/writer/writer-markdown-core.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.BrowserWriterMarkdown = void 0;
 exports.writeMarkdownCore = writeMarkdownCore;
+const markdown_format_utils_1 = require("./markdown-format-utils");
 const writer_ts_definitions_core_1 = require("./writer-ts-definitions-core");
 const BACKTICK_REGEX = /`/g;
 const WHITESPACE_REGEX = /\s+/g;
@@ -73,47 +74,6 @@ class BrowserWriterMarkdown {
     }
 }
 exports.BrowserWriterMarkdown = BrowserWriterMarkdown;
-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 | Description |\n| :- | :- | :- | :- |\n";
-const MD_TYPE_UNDEFINED = "--";
-const PIPE_REGEX = /\|/g;
-const LT_REGEX = /</g;
-const GT_REGEX = />/g;
-const NEWLINE_REGEX = /\n/g;
-function formatPropType(type) {
-    if (type === undefined)
-        return MD_TYPE_UNDEFINED;
-    return `<code>${type.replace(PIPE_REGEX, "&#124;")}</code>`;
-}
-function escapeHtml(text) {
-    return text.replace(LT_REGEX, "&lt;").replace(GT_REGEX, "&gt;");
-}
-function formatPropValue(value) {
-    if (value === undefined)
-        return MD_TYPE_UNDEFINED;
-    return `<code>${value.replace(BACKTICK_REGEX, "\\`").replace(PIPE_REGEX, "&#124;")}</code>`;
-}
-function formatPropDescription(description) {
-    if (description === undefined || description.trim().length === 0)
-        return MD_TYPE_UNDEFINED;
-    return escapeHtml(description).replace(NEWLINE_REGEX, "<br />");
-}
-function formatSlotProps(props) {
-    if (props === undefined || props === "{}")
-        return MD_TYPE_UNDEFINED;
-    return formatPropType((0, writer_ts_definitions_core_1.formatTsProps)(props).replace(NEWLINE_REGEX, " "));
-}
-function formatSlotFallback(fallback) {
-    if (fallback === undefined)
-        return MD_TYPE_UNDEFINED;
-    return formatPropType(escapeHtml(fallback).replace(NEWLINE_REGEX, "<br />"));
-}
-function formatEventDetail(detail) {
-    if (detail === undefined)
-        return MD_TYPE_UNDEFINED;
-    return formatPropType(detail.replace(NEWLINE_REGEX, " "));
-}
 function writeMarkdownCore(components, options) {
     const document = new BrowserWriterMarkdown({
         onAppend: (type, document) => {
@@ -136,7 +96,7 @@ function writeMarkdownCore(components, options) {
         }
         document.append("h3", "Props");
         if (component.props.length > 0) {
-            document.append("raw", PROP_TABLE_HEADER);
+            document.append("raw", markdown_format_utils_1.PROP_TABLE_HEADER);
             const sortedProps = [...component.props].sort((a) => {
                 if (a.reactive)
                     return -1;
@@ -145,7 +105,7 @@ function writeMarkdownCore(components, options) {
                 return 0;
             });
             for (const prop of sortedProps) {
-                document.append("raw", `| ${prop.name} | ${prop.isRequired ? "Yes" : "No"} | ${`<code>${prop.kind}</code>`} | ${prop.reactive ? "Yes" : "No"} | ${formatPropType(prop.type)} | ${formatPropValue(prop.value)} | ${formatPropDescription(prop.description)} |\n`);
+                document.append("raw", `| ${prop.name} | ${prop.isRequired ? "Yes" : "No"} | ${`<code>${prop.kind}</code>`} | ${prop.reactive ? "Yes" : "No"} | ${(0, markdown_format_utils_1.formatPropType)(prop.type)} | ${(0, markdown_format_utils_1.formatPropValue)(prop.value)} | ${(0, markdown_format_utils_1.formatPropDescription)(prop.description)} |\n`);
             }
         }
         else {
@@ -153,9 +113,9 @@ function writeMarkdownCore(components, options) {
         }
         document.append("h3", "Slots");
         if (component.slots.length > 0) {
-            document.append("raw", SLOT_TABLE_HEADER);
+            document.append("raw", markdown_format_utils_1.SLOT_TABLE_HEADER);
             for (const slot of component.slots) {
-                document.append("raw", `| ${slot.default ? MD_TYPE_UNDEFINED : slot.name} | ${slot.default ? "Yes" : "No"} | ${formatSlotProps(slot.slot_props)} | ${formatSlotFallback(slot.fallback)} |\n`);
+                document.append("raw", `| ${slot.default ? markdown_format_utils_1.MD_TYPE_UNDEFINED : slot.name} | ${slot.default ? "Yes" : "No"} | ${(0, markdown_format_utils_1.formatSlotProps)(slot.slot_props)} | ${(0, markdown_format_utils_1.formatSlotFallback)(slot.fallback)} |\n`);
             }
         }
         else {
@@ -163,9 +123,9 @@ function writeMarkdownCore(components, options) {
         }
         document.append("h3", "Events");
         if (component.events.length > 0) {
-            document.append("raw", EVENT_TABLE_HEADER);
+            document.append("raw", markdown_format_utils_1.EVENT_TABLE_HEADER);
             for (const event of component.events) {
-                document.append("raw", `| ${event.name} | ${event.type} | ${event.type === "dispatched" ? formatEventDetail(event.detail) : MD_TYPE_UNDEFINED} | ${formatPropDescription(event.description)} |\n`);
+                document.append("raw", `| ${event.name} | ${event.type} | ${event.type === "dispatched" ? (0, markdown_format_utils_1.formatEventDetail)(event.detail) : markdown_format_utils_1.MD_TYPE_UNDEFINED} | ${(0, markdown_format_utils_1.formatPropDescription)(event.description)} |\n`);
             }
         }
         else {

package/lib/writer/writer-markdown.js

@@ -5,50 +5,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = writeMarkdown;
 const node_path_1 = require("node:path");
+const markdown_format_utils_1 = require("./markdown-format-utils");
 const WriterMarkdown_1 = __importDefault(require("./WriterMarkdown"));
 const writer_ts_definitions_core_1 = require("./writer-ts-definitions-core");
-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 | Description |\n| :- | :- | :- | :- |\n";
-const MD_TYPE_UNDEFINED = "--";
-const PIPE_REGEX = /\|/g;
-const LT_REGEX = /</g;
-const GT_REGEX = />/g;
-const BACKTICK_REGEX = /`/g;
-const NEWLINE_REGEX = /\n/g;
-function formatPropType(type) {
-    if (type === undefined)
-        return MD_TYPE_UNDEFINED;
-    return `<code>${type.replace(PIPE_REGEX, "&#124;")}</code>`;
-}
-function escapeHtml(text) {
-    return text.replace(LT_REGEX, "&lt;").replace(GT_REGEX, "&gt;");
-}
-function formatPropValue(value) {
-    if (value === undefined)
-        return MD_TYPE_UNDEFINED;
-    return `<code>${value.replace(BACKTICK_REGEX, "\\`").replace(PIPE_REGEX, "&#124;")}</code>`;
-}
-function formatPropDescription(description) {
-    if (description === undefined || description.trim().length === 0)
-        return MD_TYPE_UNDEFINED;
-    return escapeHtml(description).replace(NEWLINE_REGEX, "<br />");
-}
-function formatSlotProps(props) {
-    if (props === undefined || props === "{}")
-        return MD_TYPE_UNDEFINED;
-    return formatPropType((0, writer_ts_definitions_core_1.formatTsProps)(props).replace(NEWLINE_REGEX, " "));
-}
-function formatSlotFallback(fallback) {
-    if (fallback === undefined)
-        return MD_TYPE_UNDEFINED;
-    return formatPropType(escapeHtml(fallback).replace(NEWLINE_REGEX, "<br />"));
-}
-function formatEventDetail(detail) {
-    if (detail === undefined)
-        return MD_TYPE_UNDEFINED;
-    return formatPropType(detail.replace(NEWLINE_REGEX, " "));
-}
 async function writeMarkdown(components, options) {
     const write = options?.write !== false;
     const document = new WriterMarkdown_1.default({
@@ -72,7 +31,7 @@ async function writeMarkdown(components, options) {
         }
         document.append("h3", "Props");
         if (component.props.length > 0) {
-            document.append("raw", PROP_TABLE_HEADER);
+            document.append("raw", markdown_format_utils_1.PROP_TABLE_HEADER);
             const sortedProps = [...component.props].sort((a) => {
                 if (a.reactive)
                     return -1;
@@ -81,7 +40,7 @@ async function writeMarkdown(components, options) {
                 return 0;
             });
             for (const prop of sortedProps) {
-                document.append("raw", `| ${prop.name} | ${prop.isRequired ? "Yes" : "No"} | ${`<code>${prop.kind}</code>`} | ${prop.reactive ? "Yes" : "No"} | ${formatPropType(prop.type)} | ${formatPropValue(prop.value)} | ${formatPropDescription(prop.description)} |\n`);
+                document.append("raw", `| ${prop.name} | ${prop.isRequired ? "Yes" : "No"} | ${`<code>${prop.kind}</code>`} | ${prop.reactive ? "Yes" : "No"} | ${(0, markdown_format_utils_1.formatPropType)(prop.type)} | ${(0, markdown_format_utils_1.formatPropValue)(prop.value)} | ${(0, markdown_format_utils_1.formatPropDescription)(prop.description)} |\n`);
             }
         }
         else {
@@ -89,9 +48,9 @@ async function writeMarkdown(components, options) {
         }
         document.append("h3", "Slots");
         if (component.slots.length > 0) {
-            document.append("raw", SLOT_TABLE_HEADER);
+            document.append("raw", markdown_format_utils_1.SLOT_TABLE_HEADER);
             for (const slot of component.slots) {
-                document.append("raw", `| ${slot.default ? MD_TYPE_UNDEFINED : slot.name} | ${slot.default ? "Yes" : "No"} | ${formatSlotProps(slot.slot_props)} | ${formatSlotFallback(slot.fallback)} |\n`);
+                document.append("raw", `| ${slot.default ? markdown_format_utils_1.MD_TYPE_UNDEFINED : slot.name} | ${slot.default ? "Yes" : "No"} | ${(0, markdown_format_utils_1.formatSlotProps)(slot.slot_props)} | ${(0, markdown_format_utils_1.formatSlotFallback)(slot.fallback)} |\n`);
             }
         }
         else {
@@ -99,9 +58,9 @@ async function writeMarkdown(components, options) {
         }
         document.append("h3", "Events");
         if (component.events.length > 0) {
-            document.append("raw", EVENT_TABLE_HEADER);
+            document.append("raw", markdown_format_utils_1.EVENT_TABLE_HEADER);
             for (const event of component.events) {
-                document.append("raw", `| ${event.name} | ${event.type} | ${event.type === "dispatched" ? formatEventDetail(event.detail) : MD_TYPE_UNDEFINED} | ${formatPropDescription(event.description)} |\n`);
+                document.append("raw", `| ${event.name} | ${event.type} | ${event.type === "dispatched" ? (0, markdown_format_utils_1.formatEventDetail)(event.detail) : markdown_format_utils_1.MD_TYPE_UNDEFINED} | ${(0, markdown_format_utils_1.formatPropDescription)(event.description)} |\n`);
             }
         }
         else {

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

@@ -133,7 +133,10 @@ function genPropDef(def) {
     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]}>` : "";
+    // Full constraints for type definitions (e.g., `type $Props<T extends Foo = Bar>`)
+    const genericsName = def.generics ? `<${def.generics[1]}>` : "";
+    // Names only for type references (e.g., `keyof $Props<T>`)
+    const genericsNameRef = def.generics ? `<${def.generics[0]}>` : "";
     if (def.rest_props?.type === "Element") {
         let extend_tag_map;
         // Handle svelte:element specially
@@ -176,7 +179,7 @@ function genPropDef(def) {
       ${dataAttributes}
     };
 
-    export type ${props_name}${genericsName} = Omit<$RestProps, keyof ($Props${genericsName} & ${def.extends.interface})> & $Props${genericsName} & ${def.extends.interface};
+    export type ${props_name}${genericsName} = Omit<$RestProps, keyof ($Props${genericsNameRef} & ${def.extends.interface})> & $Props${genericsNameRef} & ${def.extends.interface};
   `;
         }
         else {
@@ -188,7 +191,7 @@ function genPropDef(def) {
       ${dataAttributes}
     };
 
-    export type ${props_name}${genericsName} = Omit<$RestProps, keyof $Props${genericsName}> & $Props${genericsName};
+    export type ${props_name}${genericsName} = Omit<$RestProps, keyof $Props${genericsNameRef}> & $Props${genericsNameRef};
   `;
         }
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sveld",
-  "version": "0.25.8",
+  "version": "0.25.10",
   "license": "Apache-2.0",
   "description": "Generate TypeScript definitions for your Svelte components.",
   "main": "./lib/index.js",
@@ -9,7 +9,7 @@
     "@rollup/plugin-node-resolve": "^13.3.0",
     "acorn": "^8.14.1",
     "comment-parser": "^1.4.1",
-    "prettier": "^3.7.4",
+    "prettier": "^3.8.0",
     "rollup": "^2.79.2",
     "rollup-plugin-svelte": "^7.2.2",
     "svelte": "^4.2.20",