sveld 0.24.6 → 0.24.8

package/README.md

@@ -38,7 +38,7 @@ The generated definition extends the official `SvelteComponentTyped` interface e
 **Button.svelte.d.ts**
 
 ```ts
-import type { SvelteComponentTyped } from "svelte";
+import { SvelteComponentTyped } from "svelte";
 import type { SvelteHTMLElements } from "svelte/elements";
 
 type $RestProps = SvelteHTMLElements["button"];

package/lib/ComponentParser.d.ts

@@ -60,6 +60,7 @@ interface ComponentInlineElement {
 interface ComponentElement {
     type: "Element";
     name: string;
+    thisValue?: string;
 }
 type RestProps = undefined | ComponentInlineElement | ComponentElement;
 interface Extends {

package/lib/ComponentParser.js

@@ -783,10 +783,20 @@ class ComponentParser {
                 }
                 if (node.type === "Spread" && node?.expression.name === "$$restProps") {
                     if (this.rest_props === undefined && (parent?.type === "InlineComponent" || parent?.type === "Element")) {
-                        this.rest_props = {
+                        const restProps = {
                             type: parent.type,
                             name: parent.name,
                         };
+                        // Handle svelte:element - check if this attribute is hardcoded
+                        if (parent.type === "Element" && parent.name === "svelte:element") {
+                            // The 'this' value is stored in the 'tag' property of the Element node
+                            // If tag is a string, it's hardcoded; if undefined/null, it's dynamic
+                            if (typeof parent.tag === "string") {
+                                restProps.thisValue = parent.tag;
+                            }
+                            // If tag is undefined or not a string, thisValue remains undefined (dynamic)
+                        }
+                        this.rest_props = restProps;
                     }
                 }
                 if (node.type === "VariableDeclaration") {

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

@@ -89,13 +89,29 @@ function genPropDef(def) {
     let prop_def = EMPTY_STR;
     const genericsName = def.generics ? `<${def.generics[0]}>` : "";
     if (def.rest_props?.type === "Element") {
-        const extend_tag_map = def.rest_props.name
-            .split("|")
-            .map((name) => {
-            const element = name.trim();
-            return `SvelteHTMLElements["${element}"]`;
-        })
-            .join("&");
+        let extend_tag_map;
+        // Handle svelte:element specially
+        if (def.rest_props.name === "svelte:element") {
+            // If thisValue is provided (hardcoded element tag), use that element type
+            // Otherwise, fallback to HTMLElement for dynamic this attribute
+            if (def.rest_props.thisValue) {
+                extend_tag_map = `SvelteHTMLElements["${def.rest_props.thisValue}"]`;
+            }
+            else {
+                // Dynamic this attribute - use generic HTMLElement
+                extend_tag_map = "HTMLAttributes<HTMLElement>";
+            }
+        }
+        else {
+            // Regular element - use existing logic
+            extend_tag_map = def.rest_props.name
+                .split("|")
+                .map((name) => {
+                const element = name.trim();
+                return `SvelteHTMLElements["${element}"]`;
+            })
+                .join("&");
+        }
         /**
          * Components that extend HTML elements should allow for `data-*` attributes.
          * @see https://github.com/sveltejs/language-tools/issues/1825
@@ -423,8 +439,12 @@ function writeTsDefinition(component) {
     });
     const generic = generics ? `<${generics[1]}>` : "";
     const genericProps = generics ? `${props_name}<${generics[0]}>` : props_name;
+    // Determine imports needed for rest_props
+    const needsSvelteHTMLElements = rest_props?.type === "Element" &&
+        (rest_props.name !== "svelte:element" || (rest_props.name === "svelte:element" && rest_props.thisValue));
+    const needsHTMLAttributes = rest_props?.type === "Element" && rest_props.name === "svelte:element" && !rest_props.thisValue;
     return `
-  import type { SvelteComponentTyped } from "svelte";${rest_props?.type === "Element" ? `import type { SvelteHTMLElements } from "svelte/elements";\n` : ""}
+  import { SvelteComponentTyped } from "svelte";${needsSvelteHTMLElements ? `import type { SvelteHTMLElements } from "svelte/elements";\n` : ""}${needsHTMLAttributes ? `import type { HTMLAttributes } from "svelte/elements";\n` : ""}
   ${genImports({ extends: _extends })}
   ${genModuleExports({ moduleExports })}
   ${getTypeDefs({ typedefs })}

package/package.json

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