sveld 0.22.3 → 0.22.5

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) {
@@ -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,19 @@ 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,
-                });
+                };
+                // Preserve detail type if it was explicitly set in @event tag
+                // Note: "null" is a valid explicit type (e.g., @event {null} eventname)
+                // Only skip if detail is truly undefined or the string "undefined"
+                if (event.detail !== undefined && event.detail !== "undefined") {
+                    forwardedEvent.detail = event.detail;
+                }
+                this.events.set(eventName, forwardedEvent);
             }
         });
         return {

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

@@ -168,6 +168,108 @@ function genEventDef(def) {
             return detail;
         return `CustomEvent<${detail}>`;
     };
+    // Check if an event name is a standard DOM event that exists in WindowEventMap
+    const isStandardDomEvent = (eventName) => {
+        // Standard DOM events that should use WindowEventMap
+        const standardEvents = new Set([
+            // Mouse events
+            "click",
+            "dblclick",
+            "mousedown",
+            "mouseup",
+            "mousemove",
+            "mouseover",
+            "mouseout",
+            "mouseenter",
+            "mouseleave",
+            "contextmenu",
+            "wheel",
+            // Keyboard events
+            "keydown",
+            "keyup",
+            "keypress",
+            // Form events
+            "submit",
+            "change",
+            "input",
+            "focus",
+            "blur",
+            "focusin",
+            "focusout",
+            "reset",
+            "select",
+            // Touch events
+            "touchstart",
+            "touchend",
+            "touchmove",
+            "touchcancel",
+            // Drag events
+            "drag",
+            "dragstart",
+            "dragend",
+            "dragover",
+            "dragenter",
+            "dragleave",
+            "drop",
+            // Pointer events
+            "pointerdown",
+            "pointerup",
+            "pointermove",
+            "pointerover",
+            "pointerout",
+            "pointerenter",
+            "pointerleave",
+            "pointercancel",
+            "gotpointercapture",
+            "lostpointercapture",
+            // Media events
+            "play",
+            "pause",
+            "ended",
+            "volumechange",
+            "timeupdate",
+            "loadeddata",
+            "loadedmetadata",
+            "canplay",
+            "canplaythrough",
+            "seeking",
+            "seeked",
+            "playing",
+            "waiting",
+            "stalled",
+            "suspend",
+            "abort",
+            "error",
+            "emptied",
+            "ratechange",
+            "durationchange",
+            "loadstart",
+            "progress",
+            "loadend",
+            // Animation/Transition events
+            "animationstart",
+            "animationend",
+            "animationiteration",
+            "animationcancel",
+            "transitionstart",
+            "transitionend",
+            "transitionrun",
+            "transitioncancel",
+            // Other events
+            "scroll",
+            "resize",
+            "load",
+            "unload",
+            "beforeunload",
+            "cut",
+            "copy",
+            "paste",
+            "compositionstart",
+            "compositionupdate",
+            "compositionend",
+        ]);
+        return standardEvents.has(eventName);
+    };
     if (def.events.length === 0)
         return EMPTY_EVENTS;
     const events_map = def.events
@@ -176,7 +278,33 @@ 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, determine the type based on @event JSDoc and element/event type
+            const elementName = typeof event.element === "string" ? event.element : event.element.name;
+            const isComponent = elementName && /^[A-Z]/.test(elementName);
+            const isStandardEvent = !isComponent || isStandardDomEvent(event.name);
+            // Check if there's an explicit non-null detail type from @event JSDoc
+            // Note: detail="null" on standard DOM events is treated as "not explicitly typed"
+            // because @event click (without {type}) defaults to null but shouldn't override WindowEventMap
+            const hasExplicitNonNullDetail = event.detail !== undefined && event.detail !== "undefined" && !(event.detail === "null" && isStandardEvent);
+            if (hasExplicitNonNullDetail) {
+                // If @event tag explicitly provides a non-null detail type, always use it (highest priority)
+                eventType = createDispatchedEvent(event.detail);
+            }
+            else if (isStandardEvent) {
+                // Standard DOM event (native element or standard event name) without explicit type
+                eventType = `${mapEvent()}["${event.name}"]`;
+            }
+            else {
+                // Custom event from component with no explicit type or explicit null
+                eventType = event.detail === "null" ? createDispatchedEvent("null") : createDispatchedEvent();
+            }
+        }
+        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.5",
   "license": "Apache-2.0",
   "description": "Generate TypeScript definitions for your Svelte components.",
   "main": "./lib/index.js",