sveld 0.22.3 → 0.22.4

package/lib/ComponentParser.d.ts

@@ -29,6 +29,7 @@ interface ForwardedEvent {
     name: string;
     element: ComponentInlineElement | ComponentElement;
     description?: string;
+    detail?: string;
 }
 interface DispatchedEvent {
     type: "dispatched";
@@ -92,8 +93,8 @@ export default class ComponentParser {
     private static assignValue;
     private static formatComment;
     /**
-     * Finds the last JSDoc block comment from an array of leading comments.
-     * Filters out single-line comments and TypeScript directives.
+     * Finds the last comment from an array of leading comments.
+     * TypeScript directives are stripped before parsing, so we can safely take the last comment.
      */
     private static findJSDocComment;
     private sourceAtPos;
@@ -105,6 +106,10 @@ export default class ComponentParser {
     private addDispatchedEvent;
     private parseCustomTypes;
     cleanup(): void;
+    /**
+     * Strips TypeScript directive comments from script blocks only.
+     */
+    private static stripTypeScriptDirectivesFromScripts;
     parseSvelteComponent(source: string, diagnostics: ComponentParserDiagnostics): ParsedComponent;
 }
 export {};

package/lib/ComponentParser.js

@@ -78,19 +78,13 @@ class ComponentParser {
         return formatted_comment;
     }
     /**
-     * Finds the last JSDoc block comment from an array of leading comments.
-     * Filters out single-line comments and TypeScript directives.
+     * Finds the last comment from an array of leading comments.
+     * TypeScript directives are stripped before parsing, so we can safely take the last comment.
      */
     static findJSDocComment(leadingComments) {
-        // Search from end to find the last JSDoc block comment
-        for (let i = leadingComments.length - 1; i >= 0; i--) {
-            const comment = leadingComments[i];
-            // JSDoc comments are block comments (/* */) where the value starts with *
-            if (comment.type === "Block" && comment.value.trimStart().startsWith("*")) {
-                return comment;
-            }
-        }
-        return undefined;
+        if (!leadingComments || leadingComments.length === 0)
+            return undefined;
+        return leadingComments[leadingComments.length - 1];
     }
     sourceAtPos(start, end) {
         return this.source?.slice(start, end);
@@ -107,8 +101,6 @@ class ComponentParser {
             return;
         if (this.props.has(prop_name)) {
             const existing_slot = this.props.get(prop_name);
-            if (!existing_slot)
-                return;
             this.props.set(prop_name, {
                 ...existing_slot,
                 ...data,
@@ -123,8 +115,6 @@ class ComponentParser {
             return;
         if (this.moduleExports.has(prop_name)) {
             const existing_slot = this.moduleExports.get(prop_name);
-            if (!existing_slot)
-                return;
             this.moduleExports.set(prop_name, {
                 ...existing_slot,
                 ...data,
@@ -147,8 +137,6 @@ class ComponentParser {
         const description = slot_description?.split("-").pop()?.trim();
         if (this.slots.has(name)) {
             const existing_slot = this.slots.get(name);
-            if (!existing_slot)
-                return;
             this.slots.set(name, {
                 ...existing_slot,
                 fallback,
@@ -262,14 +250,27 @@ class ComponentParser {
         this.generics = null;
         this.bindings.clear();
     }
+    /**
+     * Strips TypeScript directive comments from script blocks only.
+     */
+    static stripTypeScriptDirectivesFromScripts(source) {
+        // Find all script blocks and strip directives only from within them
+        return source.replace(/(<script[^>]*>)([\s\S]*?)(<\/script>)/gi, (_match, openTag, scriptContent, closeTag) => {
+            // Remove TypeScript directives from script content only
+            const cleanedContent = scriptContent.replace(/\/\/\s*@ts-[^\n\r]*/g, "");
+            return openTag + cleanedContent + closeTag;
+        });
+    }
     parseSvelteComponent(source, diagnostics) {
         if (this.options?.verbose) {
             console.log(`[parsing] "${diagnostics.moduleName}" ${diagnostics.filePath}`);
         }
         this.cleanup();
-        this.source = source;
-        this.compiled = (0, compiler_1.compile)(source);
-        this.parsed = (0, compiler_1.parse)(source);
+        // Strip TypeScript directives from script blocks only to prevent interference with JSDoc
+        const cleanedSource = ComponentParser.stripTypeScriptDirectivesFromScripts(source);
+        this.source = cleanedSource;
+        this.compiled = (0, compiler_1.compile)(cleanedSource);
+        this.parsed = (0, compiler_1.parse)(cleanedSource);
         this.collectReactiveVars();
         this.parseCustomTypes();
         if (this.parsed?.module) {
@@ -484,7 +485,7 @@ class ComponentParser {
                             replace: false,
                         };
                         if (value === undefined)
-                            return slot_props;
+                            return {};
                         if (value[0]) {
                             const { type, expression, raw, start, end } = value[0];
                             if (type === "Text") {
@@ -554,8 +555,6 @@ class ComponentParser {
                     const element_name = parent.name;
                     if (this.bindings.has(prop_name)) {
                         const existing_bindings = this.bindings.get(prop_name);
-                        if (!existing_bindings)
-                            return;
                         if (!existing_bindings.elements.includes(element_name)) {
                             this.bindings.set(prop_name, {
                                 ...existing_bindings,
@@ -601,12 +600,18 @@ class ComponentParser {
             if (event && event.type === "dispatched" && !actuallyDispatchedEvents.has(eventName)) {
                 const description = this.eventDescriptions.get(eventName);
                 const event_description = description?.split("-").pop()?.trim();
-                this.events.set(eventName, {
+                const forwardedEvent = {
                     type: "forwarded",
                     name: eventName,
                     element: element,
                     description: event_description,
-                });
+                };
+                // Only preserve detail if it was explicitly set and is not "null"
+                // (null means no detail was specified in @event tag)
+                if (event.detail !== undefined && event.detail !== "null") {
+                    forwardedEvent.detail = event.detail;
+                }
+                this.events.set(eventName, forwardedEvent);
             }
         });
         return {
@@ -634,9 +639,16 @@ class ComponentParser {
                         if (slot_props[key].replace && slot_props[key].value !== undefined) {
                             slot_props[key].value = this.props.get(slot_props[key].value)?.type;
                         }
-                        if (slot_props[key].value === undefined)
-                            slot_props[key].value = "any";
-                        new_props.push(`${key}: ${slot_props[key].value}`);
+                        let propValue = slot_props[key].value;
+                        if (propValue === undefined) {
+                            propValue = "any";
+                        }
+                        else if (typeof propValue === "string" && propValue.startsWith("{")) {
+                            // If the value starts with {, it's a complex expression
+                            // Use 'any' to avoid invalid TypeScript syntax
+                            propValue = "any";
+                        }
+                        new_props.push(`${key}: ${propValue}`);
                     });
                     const formatted_slot_props = new_props.length === 0 ? "{}" : `{ ${new_props.join(", ")} }`;
                     return { ...slot, slot_props: formatted_slot_props };

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

@@ -176,7 +176,25 @@ function genEventDef(def) {
         if (event.description) {
             description = `/** ${event.description} */\n`;
         }
-        return `${description}${clampKey(event.name)}: ${event.type === "dispatched" ? createDispatchedEvent(event.detail) : `${mapEvent()}["${event.name}"]`};\n`;
+        let eventType;
+        if (event.type === "dispatched") {
+            eventType = createDispatchedEvent(event.detail);
+        }
+        else {
+            // For forwarded events, check if it's from a native HTML element or a component
+            // If element starts with uppercase, it's a component, so treat as CustomEvent
+            // Also check if the forwarded event has detail type information preserved
+            const elementName = typeof event.element === "string" ? event.element : event.element.name;
+            const isComponent = elementName && /^[A-Z]/.test(elementName);
+            const hasDetail = event.detail && event.detail !== "undefined" && event.detail !== "null";
+            if (isComponent || hasDetail) {
+                eventType = createDispatchedEvent(event.detail);
+            }
+            else {
+                eventType = `${mapEvent()}["${event.name}"]`;
+            }
+        }
+        return `${description}${clampKey(event.name)}: ${eventType};\n`;
     })
         .join("");
     return `{${events_map}}`;

package/package.json

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