svelte2tsx 0.7.50 → 0.7.51

package/index.js

@@ -1668,6 +1668,7 @@ function blankVerbatimContent(htmlx, verbatimElements) {
     return output;
 }
 function parseHtmlx(htmlx, parse, options) {
+    var _a, _b;
     //Svelte tries to parse style and script tags which doesn't play well with typescript, so we blank them out.
     //HTMLx spec says they should just be retained after processing as is, so this is fine
     const verbatimElements = findVerbatimElements(htmlx);
@@ -1676,7 +1677,9 @@ function parseHtmlx(htmlx, parse, options) {
     const parsingCode = options.emitOnTemplateError && !options.svelte5Plus
         ? blankPossiblyErrorOperatorOrPropertyAccess(deconstructed)
         : deconstructed;
-    const htmlxAst = parse(parsingCode, options.svelte5Plus ? { loose: options.emitOnTemplateError } : undefined).html;
+    const parsed = parse(parsingCode, options.svelte5Plus ? { loose: options.emitOnTemplateError } : undefined);
+    const htmlxAst = parsed.html;
+    htmlxAst._comments = (_b = (_a = parsed._comments) !== null && _a !== void 0 ? _a : parsed.comments) !== null && _b !== void 0 ? _b : [];
     //restore our script and style tags as nodes to maintain validity with HTMLx
     for (const s of verbatimElements) {
         htmlxAst.children.push(s);
@@ -1740,11 +1743,125 @@ function blankPossiblyErrorOperatorOrPropertyAccess(htmlx) {
     return htmlx;
 }
 
+/**
+ * Removes comment altogether as it's unimportant for the output
+ */
+function handleComment(str, node) {
+    str.overwrite(node.start, node.end, '', { contentOnly: true });
+}
+/**
+ * Handles comments that are directly before an element start tag and output them into the generated code as leading comments for the given node.
+ * @param str The MagicString instance to operate on
+ * @param node The node above which should be searched for a comment
+ * @param ast The full Svelte AST
+ */
+function handleLeadingStartComment(str, node, ast) {
+    var _a, _b;
+    const comments = (_a = ast._comments) !== null && _a !== void 0 ? _a : [];
+    if (!comments.length || ((_b = node.leadingComments) === null || _b === void 0 ? void 0 : _b.length)) {
+        return;
+    }
+    const leadingComments = [];
+    let searchEnd = node.start;
+    for (let i = comments.length - 1; i >= 0; i--) {
+        const comment = comments[i];
+        if (comment.end > searchEnd) {
+            continue;
+        }
+        if (!/^\s*$/.test(str.original.slice(comment.end, searchEnd))) {
+            break;
+        }
+        leadingComments.unshift(comment);
+        searchEnd = comment.start;
+    }
+    if (leadingComments.length) {
+        for (const leading of leadingComments) {
+            if (/\n[ \t]*$/.test(str.original.slice(Math.max(leading.start - 100, 0), leading.start))) {
+                leading.newline = true;
+            }
+        }
+        node.leadingComments = leadingComments;
+    }
+}
+/**
+ * Handles comments that are directly after the last node inside an element/component start tag
+ * and output them into the generated code as trailing comments for the given node.
+ */
+function handleTrailingEndComment(str, node, parent, ast) {
+    var _a, _b;
+    const comments = (_a = ast._comments) !== null && _a !== void 0 ? _a : [];
+    const attributes = parent.attributes;
+    if (!comments.length || ((_b = node.trailingComments) === null || _b === void 0 ? void 0 : _b.length) || !(attributes === null || attributes === void 0 ? void 0 : attributes.length)) {
+        return;
+    }
+    if (attributes[attributes.length - 1] !== node) {
+        return;
+    }
+    const tag_end = str.original.indexOf('>', node.end);
+    if (tag_end < 0) {
+        return;
+    }
+    const trailingComments = [];
+    let searchStart = node.end;
+    for (const comment of comments) {
+        if (comment.start < searchStart) {
+            continue;
+        }
+        if (comment.end > tag_end) {
+            break;
+        }
+        if (!/^\s*$/.test(str.original.slice(searchStart, comment.start))) {
+            break;
+        }
+        trailingComments.push(comment);
+        searchStart = comment.end;
+    }
+    if (!trailingComments.length) {
+        return;
+    }
+    if (!/^\s*\/?\s*$/.test(str.original.slice(searchStart, tag_end))) {
+        return;
+    }
+    for (const trailing of trailingComments) {
+        if (/\n[ \t]*$/.test(str.original.slice(Math.max(trailing.start - 100, 0), trailing.start))) {
+            trailing.newline = true;
+        }
+    }
+    node.trailingComments = trailingComments;
+}
+function getLeadingCommentTransformation(node) {
+    var _a;
+    if (!((_a = node.leadingComments) === null || _a === void 0 ? void 0 : _a.length)) {
+        return [];
+    }
+    const transformations = [];
+    for (const comment of node.leadingComments) {
+        if (comment.newline)
+            transformations.push('\n');
+        transformations.push([comment.start, comment.end]);
+    }
+    transformations.push('\n');
+    return transformations;
+}
+function getTrailingCommentTransformation(node) {
+    var _a;
+    if (!((_a = node.trailingComments) === null || _a === void 0 ? void 0 : _a.length)) {
+        return [];
+    }
+    const transformations = [];
+    for (const comment of node.trailingComments) {
+        transformations.push(comment.newline ? '\n' : ' ');
+        transformations.push([comment.start, comment.end]);
+    }
+    transformations.push('\n');
+    return transformations;
+}
+
 /**
  * use:xxx={params}   --->    __sveltets_2_ensureAction(xxx(svelte.mapElementTag('ParentNodeName'),(params)));
  */
 function handleActionDirective(attr, element) {
-    element.addAction(attr);
+    element.addAction(attr, getLeadingCommentTransformation(attr), getTrailingCommentTransformation(attr));
 }
 
 /**
@@ -1960,7 +2077,9 @@ function isImplicitlyClosedBlock(end, block) {
  * animate:xxx(yyy)   --->   __sveltets_2_ensureAnimation(xxx(svelte.mapElementTag('..'),__sveltets_2_AnimationMove,(yyy)));
  */
 function handleAnimateDirective(str, attr, element) {
+    const trailingComments = getTrailingCommentTransformation(attr);
     const transformations = [
+        ...getLeadingCommentTransformation(attr),
         '__sveltets_2_ensureAnimation(',
         getDirectiveNameStartEndIdx(str, attr),
         `(${element.typingsNamespace}.mapElementTag('${element.tagName}'),__sveltets_2_AnimationMove`
@@ -1968,7 +2087,7 @@ function handleAnimateDirective(str, attr, element) {
     if (attr.expression) {
         transformations.push(',(', rangeWithTrailingPropertyAccess(str.original, attr.expression), ')');
     }
-    transformations.push('));');
+    transformations.push('));', ...trailingComments);
     element.appendToStartEnd(transformations);
 }
 
@@ -2104,17 +2223,17 @@ class Element {
         this.slotLetsTransformation = this.slotLetsTransformation || [['default'], []];
         this.slotLetsTransformation[1].push(...transformation, ',');
     }
-    addAction(attr) {
+    addAction(attr, leadingComments = [], trailingComments = []) {
         const id = `$$action_${this.actionIdentifiers.length}`;
         this.actionIdentifiers.push(id);
         if (!this.actionsTransformation.length) {
             this.actionsTransformation.push('{');
         }
-        this.actionsTransformation.push(`const ${id} = __sveltets_2_ensureAction(`, getDirectiveNameStartEndIdx(this.str, attr), `(${this.typingsNamespace}.mapElementTag('${this.tagName}')`);
+        this.actionsTransformation.push(...leadingComments, `const ${id} = __sveltets_2_ensureAction(`, getDirectiveNameStartEndIdx(this.str, attr), `(${this.typingsNamespace}.mapElementTag('${this.tagName}')`);
         if (attr.expression) {
             this.actionsTransformation.push(',(', rangeWithTrailingPropertyAccess(this.str.original, attr.expression), ')');
         }
-        this.actionsTransformation.push('));');
+        this.actionsTransformation.push('));', ...trailingComments);
     }
     /**
      * Add something right after the start tag end.
@@ -2394,8 +2513,8 @@ class InlineComponent {
      * @param name Event name
      * @param expression Event handler, if present
      */
-    addEvent([nameStart, nameEnd], expression) {
-        this.eventsTransformation.push(`${this.name}.$on(`, surroundWith(this.str, [nameStart, nameEnd], '"', '"'), ', ', expression ? expression : '() => {}', ');');
+    addEvent([nameStart, nameEnd], expression, leadingComments = [], trailingComments = []) {
+        this.eventsTransformation.push(...leadingComments, `${this.name}.$on(`, surroundWith(this.str, [nameStart, nameEnd], '"', '"'), ', ', expression ? expression : '() => {}', ');', ...trailingComments);
     }
     /**
      * Handle the slot of `<... slot=".." />`
@@ -2622,7 +2741,8 @@ function handleAttribute(str, attr, parent, preserveCase, svelte5Plus, element)
         }
     };
     // Handle attribute name
-    const attributeName = [];
+    const attributeName = getLeadingCommentTransformation(attr);
+    const trailingComments = getTrailingCommentTransformation(attr);
     if (attributeValueIsOfType(attr.value, 'AttributeShorthand')) {
         // For the attribute shorthand, the name will be the mapped part
         let [start, end] = [attr.value[0].start, attr.value[0].end];
@@ -2632,7 +2752,7 @@ function handleAttribute(str, attr, parent, preserveCase, svelte5Plus, element)
             start--;
             str.overwrite(start, end, ' ', { contentOnly: true });
         }
-        addAttribute([[start, end]]);
+        addAttribute([[start, end], ...trailingComments]);
         return;
     }
     else {
@@ -2655,13 +2775,13 @@ function handleAttribute(str, attr, parent, preserveCase, svelte5Plus, element)
     // Handle attribute value
     const attributeValue = [];
     if (attr.value === true) {
-        attributeValue.push(attr.name === 'popover' ? '""' : 'true');
+        attributeValue.push(attr.name === 'popover' ? '""' : 'true', ...trailingComments);
         addAttribute(attributeName, attributeValue);
         return;
     }
     if (attr.value.length == 0) {
         // shouldn't happen
-        addAttribute(attributeName, ['""']);
+        addAttribute(attributeName, ['""', ...trailingComments]);
         return;
     }
     //handle single value
@@ -2701,6 +2821,7 @@ function handleAttribute(str, attr, parent, preserveCase, svelte5Plus, element)
             if (!needsNumberConversion) {
                 attributeValue.push(quote);
             }
+            attributeValue.push(...trailingComments);
             addAttribute(attributeName, attributeValue);
         }
         else if (attrVal.type == 'MustacheTag') {
@@ -2711,7 +2832,7 @@ function handleAttribute(str, attr, parent, preserveCase, svelte5Plus, element)
                 start--;
                 str.overwrite(start, end, ' ', { contentOnly: true });
             }
-            attributeValue.push([start, end]);
+            attributeValue.push([start, end], ...trailingComments);
             addAttribute(attributeName, attributeValue);
         }
         return;
@@ -2722,7 +2843,7 @@ function handleAttribute(str, attr, parent, preserveCase, svelte5Plus, element)
             str.appendRight(n.start, '$');
         }
     }
-    attributeValue.push('`', [attr.value[0].start, attr.value[attr.value.length - 1].end], '`');
+    attributeValue.push('`', [attr.value[0].start, attr.value[attr.value.length - 1].end], '`', ...trailingComments);
     addAttribute(attributeName, attributeValue);
 }
 function attributeValueIsOfType(value, type) {
@@ -2842,6 +2963,8 @@ const supportsBindThis = [
 function handleBinding(str, attr, parent, element, preserveBind, isSvelte5Plus, emitJsDoc, isTsFile) {
     const isGetSetBinding = attr.expression.type === 'SequenceExpression';
     const [get, set] = isGetSetBinding ? attr.expression.expressions : [];
+    const leadingComments = getLeadingCommentTransformation(attr);
+    const trailingComments = getTrailingCommentTransformation(attr);
     // bind this
     if (attr.name === 'this' && supportsBindThis.includes(parent.type)) {
         // bind:this is effectively only works bottom up - the variable is updated by the element, not
@@ -2850,10 +2973,16 @@ function handleBinding(str, attr, parent, element, preserveBind, isSvelte5Plus,
         // the value becomes null, but we don't add it to the clause because it would introduce
         // worse DX for the 99% use case, and because null !== undefined which others might use to type the declaration.
         if (isGetSetBinding) {
-            element.appendToStartEnd(['(', [set.start, getEnd(set)], `)(${element.name});`]);
+            element.appendToStartEnd([
+                ...leadingComments,
+                '(',
+                [set.start, getEnd(set)],
+                `)(${element.name});`,
+                ...trailingComments
+            ]);
         }
         else {
-            appendOneWayBinding(attr, ` = ${element.name}`, element);
+            appendOneWayBinding(attr, ` = ${element.name}`, element, leadingComments, trailingComments);
         }
         return;
     }
@@ -2861,12 +2990,12 @@ function handleBinding(str, attr, parent, element, preserveBind, isSvelte5Plus,
         // bind group on input
         if (element instanceof Element && attr.name == 'group' && parent.name == 'input') {
             // add reassignment to force TS to widen the type of the declaration (in case it's never reassigned anywhere else)
-            appendOneWayBinding(attr, ' = __sveltets_2_any(null)', element);
+            appendOneWayBinding(attr, ' = __sveltets_2_any(null)', element, leadingComments, trailingComments);
             return;
         }
         // one way binding
         if (oneWayBindingAttributes.has(attr.name) && element instanceof Element) {
-            appendOneWayBinding(attr, `= ${element.name}.${attr.name}`, element);
+            appendOneWayBinding(attr, `= ${element.name}.${attr.name}`, element, leadingComments, trailingComments);
             return;
         }
         // one way binding whose property is not on the element
@@ -2877,8 +3006,10 @@ function handleBinding(str, attr, parent, element, preserveBind, isSvelte5Plus,
                 ? `null as ${bindingType}`
                 : `/** @type {${bindingType}} */ (null)`;
             element.appendToStartEnd([
+                ...leadingComments,
                 [attr.expression.start, getEnd(attr.expression)],
-                `= ${surroundWithIgnoreComments(bindingValue)};`
+                `= ${surroundWithIgnoreComments(bindingValue)};`,
+                ...trailingComments
             ]);
             return;
         }
@@ -2893,12 +3024,18 @@ function handleBinding(str, attr, parent, element, preserveBind, isSvelte5Plus,
     const name = preserveBind && element instanceof Element
         ? // HTML typings - preserve the bind: prefix
             isShorthand
-                ? [`"${str.original.substring(attr.start, attr.end)}"`]
-                : ['"', [attr.start, str.original.lastIndexOf('=', attr.expression.start)], '"']
+                ? [...leadingComments, `"${str.original.substring(attr.start, attr.end)}"`]
+                : [
+                    ...leadingComments,
+                    '"',
+                    [attr.start, str.original.lastIndexOf('=', attr.expression.start)],
+                    '"'
+                ]
         : // Other typings - remove the bind: prefix
             isShorthand
-                ? [[attr.expression.start, attr.expression.end]]
+                ? [...leadingComments, [attr.expression.start, attr.expression.end]]
                 : [
+                    ...leadingComments,
                     [
                         attr.start + 'bind:'.length,
                         str.original.lastIndexOf('=', attr.expression.start)
@@ -2906,7 +3043,7 @@ function handleBinding(str, attr, parent, element, preserveBind, isSvelte5Plus,
                 ];
     const value = isShorthand
         ? preserveBind && element instanceof Element
-            ? [rangeWithTrailingPropertyAccess(str.original, attr.expression)]
+            ? [rangeWithTrailingPropertyAccess(str.original, attr.expression), ...trailingComments]
             : undefined
         : isGetSetBinding
             ? [
@@ -2914,9 +3051,13 @@ function handleBinding(str, attr, parent, element, preserveBind, isSvelte5Plus,
                 [get.start, get.end],
                 ',',
                 rangeWithTrailingPropertyAccess(str.original, set),
-                ')'
+                ')',
+                ...trailingComments
             ]
-            : [rangeWithTrailingPropertyAccess(str.original, attr.expression)];
+            : [rangeWithTrailingPropertyAccess(str.original, attr.expression), ...trailingComments];
+    if (!value) {
+        name.push(...trailingComments);
+    }
     if (isSvelte5Plus && element instanceof InlineComponent) {
         // To check if property is actually bindable
         element.appendToStartEnd([`${element.name}.$$bindings = '${attr.name}';`]);
@@ -2928,13 +3069,15 @@ function handleBinding(str, attr, parent, element, preserveBind, isSvelte5Plus,
         element.addProp(name, value);
     }
 }
-function appendOneWayBinding(attr, assignment, element) {
+function appendOneWayBinding(attr, assignment, element, leadingComments, trailingComments) {
     const expression = attr.expression;
     const end = getEnd(expression);
     const hasTypeAnnotation = expression.typeAnnotation || isTypescriptNode(expression);
     const array = [
+        ...leadingComments,
         [expression.start, end],
-        assignment + (hasTypeAnnotation ? '' : ';')
+        assignment + (hasTypeAnnotation ? '' : ';'),
+        ...trailingComments
     ];
     if (hasTypeAnnotation) {
         array.push([end, expression.end], ';');
@@ -2949,13 +3092,6 @@ function handleClassDirective(str, attr, element) {
     element.appendToStartEnd([rangeWithTrailingPropertyAccess(str.original, attr.expression), ';']);
 }
 
-/**
- * Removes comment altogether as it's unimportant for the output
- */
-function handleComment(str, node) {
-    str.overwrite(node.start, node.end, '', { contentOnly: true });
-}
-
 /**
  * `{@const x = y}` --> `const x = y;`
  *
@@ -3075,18 +3211,23 @@ function handleEventHandler(str, attr, element) {
     const nameStart = str.original.indexOf(':', attr.start) + 1;
     // If there's no expression, it's event bubbling (on:click)
     const nameEnd = nameStart + attr.name.length;
+    const leadingComments = getLeadingCommentTransformation(attr);
+    const trailingComments = getTrailingCommentTransformation(attr);
     if (element instanceof Element) {
         // Prefix with "on:" for better mapping.
         // Surround with quotes because event name could contain invalid prop chars.
         surroundWith(str, [nameStart, nameEnd], '"on:', '"');
-        element.addAttribute([[nameStart, nameEnd]], attr.expression
-            ? [rangeWithTrailingPropertyAccess(str.original, attr.expression)]
-            : ['undefined']);
+        element.addAttribute([...leadingComments, [nameStart, nameEnd]], attr.expression
+            ? [
+                rangeWithTrailingPropertyAccess(str.original, attr.expression),
+                ...trailingComments
+            ]
+            : ['undefined', ...trailingComments]);
     }
     else {
         element.addEvent([nameStart, nameEnd], attr.expression
             ? rangeWithTrailingPropertyAccess(str.original, attr.expression)
-            : undefined);
+            : undefined, leadingComments, trailingComments);
     }
 }
 
@@ -3180,18 +3321,22 @@ function handleLet(str, node, parent, preserveCase, svelte5Plus, element) {
                             expression: node.expression
                         }
                     ]
-                    : true
+                    : true,
+                leadingComments: node.leadingComments,
+                trailingComments: node.trailingComments
             }, parent, preserveCase, svelte5Plus, element);
         }
     }
 }
 function addSlotLet(node, element) {
     const letTransformation = [
+        ...getLeadingCommentTransformation(node),
         [node.start + 'let:'.length, node.start + 'let:'.length + node.name.length]
     ];
     if (node.expression) {
         letTransformation.push(':', [node.expression.start, node.expression.end]);
     }
+    letTransformation.push(...getTrailingCommentTransformation(node));
     element.addSlotLet(letTransformation);
 }
 
@@ -3229,7 +3374,11 @@ function handleRawHtml(str, node) {
  * `{...xx}` -> `...x`
  */
 function handleSpread(node, element) {
-    const transformation = [[node.start + 1, node.end - 1]];
+    const transformation = [
+        ...getLeadingCommentTransformation(node),
+        [node.start + 1, node.end - 1],
+        ...getTrailingCommentTransformation(node)
+    ];
     if (element instanceof Element) {
         element.addAttribute(transformation);
     }
@@ -3310,7 +3459,9 @@ function handleText(str, node, parent) {
  * transition|modifier:xxx(yyy)   --->   __sveltets_2_ensureTransition(xxx(svelte.mapElementTag('..'),(yyy)));
  */
 function handleTransitionDirective(str, attr, element) {
+    const trailingComments = getTrailingCommentTransformation(attr);
     const transformations = [
+        ...getLeadingCommentTransformation(attr),
         '__sveltets_2_ensureTransition(',
         getDirectiveNameStartEndIdx(str, attr),
         `(${element.typingsNamespace}.mapElementTag('${element.tagName}')`
@@ -3318,7 +3469,7 @@ function handleTransitionDirective(str, attr, element) {
     if (attr.expression) {
         transformations.push(',(', rangeWithTrailingPropertyAccess(str.original, attr.expression), ')');
     }
-    transformations.push('));');
+    transformations.push('));', ...trailingComments);
     element.appendToStartEnd(transformations);
 }
 
@@ -4888,12 +5039,17 @@ function checkIfDeclarationInstantiatedEventDispatcher(node, eventDispatcherImpo
  * {@attach xxx}   --->    [Symbol()]: xxx
  */
 function handleAttachTag(tag, element) {
+    const transformation = [...getLeadingCommentTransformation(tag), '[Symbol("@attach")]'];
+    const value = [
+        [tag.expression.start, tag.expression.end],
+        ...getTrailingCommentTransformation(tag)
+    ];
     // element.addAttachment(attr);
     if (element instanceof InlineComponent) {
-        element.addProp(['[Symbol("@attach")]'], [[tag.expression.start, tag.expression.end]]);
+        element.addProp(transformation, value);
     }
     else {
-        element.addAttribute(['[Symbol("@attach")]'], [[tag.expression.start, tag.expression.end]]);
+        element.addAttribute(transformation, value);
     }
 }
 
@@ -5241,6 +5397,8 @@ function convertHtmlxToJsx(str, ast, tags, options = { svelte5Plus: false }) {
                         handleRenderTag(str, node);
                         break;
                     case 'AttachTag':
+                        handleLeadingStartComment(str, node, ast);
+                        handleTrailingEndComment(str, node, parent, ast);
                         handleAttachTag(node, element);
                         break;
                     case 'InlineComponent':
@@ -5293,6 +5451,8 @@ function convertHtmlxToJsx(str, ast, tags, options = { svelte5Plus: false }) {
                         handleComment(str, node);
                         break;
                     case 'Binding':
+                        handleLeadingStartComment(str, node, ast);
+                        handleTrailingEndComment(str, node, parent, ast);
                         handleBinding(str, node, parent, element, options.typingsNamespace === 'svelteHTML', options.svelte5Plus, emitJsDoc, isTsFile);
                         break;
                     case 'Class':
@@ -5302,28 +5462,42 @@ function convertHtmlxToJsx(str, ast, tags, options = { svelte5Plus: false }) {
                         handleStyleDirective(str, node, element);
                         break;
                     case 'Action':
+                        handleLeadingStartComment(str, node, ast);
+                        handleTrailingEndComment(str, node, parent, ast);
                         stores.handleDirective(node, str);
                         handleActionDirective(node, element);
                         break;
                     case 'Transition':
+                        handleLeadingStartComment(str, node, ast);
+                        handleTrailingEndComment(str, node, parent, ast);
                         stores.handleDirective(node, str);
                         handleTransitionDirective(str, node, element);
                         break;
                     case 'Animation':
+                        handleLeadingStartComment(str, node, ast);
+                        handleTrailingEndComment(str, node, parent, ast);
                         stores.handleDirective(node, str);
                         handleAnimateDirective(str, node, element);
                         break;
                     case 'Attribute':
+                        handleLeadingStartComment(str, node, ast);
+                        handleTrailingEndComment(str, node, parent, ast);
                         handleAttribute(str, node, parent, preserveAttributeCase, options.svelte5Plus, element);
                         break;
                     case 'Spread':
+                        handleLeadingStartComment(str, node, ast);
+                        handleTrailingEndComment(str, node, parent, ast);
                         handleSpread(node, element);
                         break;
                     case 'EventHandler':
+                        handleLeadingStartComment(str, node, ast);
+                        handleTrailingEndComment(str, node, parent, ast);
                         eventHandler.handleEventHandler(node, parent);
                         handleEventHandler(str, node, element);
                         break;
                     case 'Let':
+                        handleLeadingStartComment(str, node, ast);
+                        handleTrailingEndComment(str, node, parent, ast);
                         handleLet(str, node, parent, preserveAttributeCase, options.svelte5Plus, element);
                         break;
                     case 'Text':

package/index.mjs

@@ -1648,6 +1648,7 @@ function blankVerbatimContent(htmlx, verbatimElements) {
     return output;
 }
 function parseHtmlx(htmlx, parse, options) {
+    var _a, _b;
     //Svelte tries to parse style and script tags which doesn't play well with typescript, so we blank them out.
     //HTMLx spec says they should just be retained after processing as is, so this is fine
     const verbatimElements = findVerbatimElements(htmlx);
@@ -1656,7 +1657,9 @@ function parseHtmlx(htmlx, parse, options) {
     const parsingCode = options.emitOnTemplateError && !options.svelte5Plus
         ? blankPossiblyErrorOperatorOrPropertyAccess(deconstructed)
         : deconstructed;
-    const htmlxAst = parse(parsingCode, options.svelte5Plus ? { loose: options.emitOnTemplateError } : undefined).html;
+    const parsed = parse(parsingCode, options.svelte5Plus ? { loose: options.emitOnTemplateError } : undefined);
+    const htmlxAst = parsed.html;
+    htmlxAst._comments = (_b = (_a = parsed._comments) !== null && _a !== void 0 ? _a : parsed.comments) !== null && _b !== void 0 ? _b : [];
     //restore our script and style tags as nodes to maintain validity with HTMLx
     for (const s of verbatimElements) {
         htmlxAst.children.push(s);
@@ -1720,11 +1723,125 @@ function blankPossiblyErrorOperatorOrPropertyAccess(htmlx) {
     return htmlx;
 }
 
+/**
+ * Removes comment altogether as it's unimportant for the output
+ */
+function handleComment(str, node) {
+    str.overwrite(node.start, node.end, '', { contentOnly: true });
+}
+/**
+ * Handles comments that are directly before an element start tag and output them into the generated code as leading comments for the given node.
+ * @param str The MagicString instance to operate on
+ * @param node The node above which should be searched for a comment
+ * @param ast The full Svelte AST
+ */
+function handleLeadingStartComment(str, node, ast) {
+    var _a, _b;
+    const comments = (_a = ast._comments) !== null && _a !== void 0 ? _a : [];
+    if (!comments.length || ((_b = node.leadingComments) === null || _b === void 0 ? void 0 : _b.length)) {
+        return;
+    }
+    const leadingComments = [];
+    let searchEnd = node.start;
+    for (let i = comments.length - 1; i >= 0; i--) {
+        const comment = comments[i];
+        if (comment.end > searchEnd) {
+            continue;
+        }
+        if (!/^\s*$/.test(str.original.slice(comment.end, searchEnd))) {
+            break;
+        }
+        leadingComments.unshift(comment);
+        searchEnd = comment.start;
+    }
+    if (leadingComments.length) {
+        for (const leading of leadingComments) {
+            if (/\n[ \t]*$/.test(str.original.slice(Math.max(leading.start - 100, 0), leading.start))) {
+                leading.newline = true;
+            }
+        }
+        node.leadingComments = leadingComments;
+    }
+}
+/**
+ * Handles comments that are directly after the last node inside an element/component start tag
+ * and output them into the generated code as trailing comments for the given node.
+ */
+function handleTrailingEndComment(str, node, parent, ast) {
+    var _a, _b;
+    const comments = (_a = ast._comments) !== null && _a !== void 0 ? _a : [];
+    const attributes = parent.attributes;
+    if (!comments.length || ((_b = node.trailingComments) === null || _b === void 0 ? void 0 : _b.length) || !(attributes === null || attributes === void 0 ? void 0 : attributes.length)) {
+        return;
+    }
+    if (attributes[attributes.length - 1] !== node) {
+        return;
+    }
+    const tag_end = str.original.indexOf('>', node.end);
+    if (tag_end < 0) {
+        return;
+    }
+    const trailingComments = [];
+    let searchStart = node.end;
+    for (const comment of comments) {
+        if (comment.start < searchStart) {
+            continue;
+        }
+        if (comment.end > tag_end) {
+            break;
+        }
+        if (!/^\s*$/.test(str.original.slice(searchStart, comment.start))) {
+            break;
+        }
+        trailingComments.push(comment);
+        searchStart = comment.end;
+    }
+    if (!trailingComments.length) {
+        return;
+    }
+    if (!/^\s*\/?\s*$/.test(str.original.slice(searchStart, tag_end))) {
+        return;
+    }
+    for (const trailing of trailingComments) {
+        if (/\n[ \t]*$/.test(str.original.slice(Math.max(trailing.start - 100, 0), trailing.start))) {
+            trailing.newline = true;
+        }
+    }
+    node.trailingComments = trailingComments;
+}
+function getLeadingCommentTransformation(node) {
+    var _a;
+    if (!((_a = node.leadingComments) === null || _a === void 0 ? void 0 : _a.length)) {
+        return [];
+    }
+    const transformations = [];
+    for (const comment of node.leadingComments) {
+        if (comment.newline)
+            transformations.push('\n');
+        transformations.push([comment.start, comment.end]);
+    }
+    transformations.push('\n');
+    return transformations;
+}
+function getTrailingCommentTransformation(node) {
+    var _a;
+    if (!((_a = node.trailingComments) === null || _a === void 0 ? void 0 : _a.length)) {
+        return [];
+    }
+    const transformations = [];
+    for (const comment of node.trailingComments) {
+        transformations.push(comment.newline ? '\n' : ' ');
+        transformations.push([comment.start, comment.end]);
+    }
+    transformations.push('\n');
+    return transformations;
+}
+
 /**
  * use:xxx={params}   --->    __sveltets_2_ensureAction(xxx(svelte.mapElementTag('ParentNodeName'),(params)));
  */
 function handleActionDirective(attr, element) {
-    element.addAction(attr);
+    element.addAction(attr, getLeadingCommentTransformation(attr), getTrailingCommentTransformation(attr));
 }
 
 /**
@@ -1940,7 +2057,9 @@ function isImplicitlyClosedBlock(end, block) {
  * animate:xxx(yyy)   --->   __sveltets_2_ensureAnimation(xxx(svelte.mapElementTag('..'),__sveltets_2_AnimationMove,(yyy)));
  */
 function handleAnimateDirective(str, attr, element) {
+    const trailingComments = getTrailingCommentTransformation(attr);
     const transformations = [
+        ...getLeadingCommentTransformation(attr),
         '__sveltets_2_ensureAnimation(',
         getDirectiveNameStartEndIdx(str, attr),
         `(${element.typingsNamespace}.mapElementTag('${element.tagName}'),__sveltets_2_AnimationMove`
@@ -1948,7 +2067,7 @@ function handleAnimateDirective(str, attr, element) {
     if (attr.expression) {
         transformations.push(',(', rangeWithTrailingPropertyAccess(str.original, attr.expression), ')');
     }
-    transformations.push('));');
+    transformations.push('));', ...trailingComments);
     element.appendToStartEnd(transformations);
 }
 
@@ -2084,17 +2203,17 @@ class Element {
         this.slotLetsTransformation = this.slotLetsTransformation || [['default'], []];
         this.slotLetsTransformation[1].push(...transformation, ',');
     }
-    addAction(attr) {
+    addAction(attr, leadingComments = [], trailingComments = []) {
         const id = `$$action_${this.actionIdentifiers.length}`;
         this.actionIdentifiers.push(id);
         if (!this.actionsTransformation.length) {
             this.actionsTransformation.push('{');
         }
-        this.actionsTransformation.push(`const ${id} = __sveltets_2_ensureAction(`, getDirectiveNameStartEndIdx(this.str, attr), `(${this.typingsNamespace}.mapElementTag('${this.tagName}')`);
+        this.actionsTransformation.push(...leadingComments, `const ${id} = __sveltets_2_ensureAction(`, getDirectiveNameStartEndIdx(this.str, attr), `(${this.typingsNamespace}.mapElementTag('${this.tagName}')`);
         if (attr.expression) {
             this.actionsTransformation.push(',(', rangeWithTrailingPropertyAccess(this.str.original, attr.expression), ')');
         }
-        this.actionsTransformation.push('));');
+        this.actionsTransformation.push('));', ...trailingComments);
     }
     /**
      * Add something right after the start tag end.
@@ -2374,8 +2493,8 @@ class InlineComponent {
      * @param name Event name
      * @param expression Event handler, if present
      */
-    addEvent([nameStart, nameEnd], expression) {
-        this.eventsTransformation.push(`${this.name}.$on(`, surroundWith(this.str, [nameStart, nameEnd], '"', '"'), ', ', expression ? expression : '() => {}', ');');
+    addEvent([nameStart, nameEnd], expression, leadingComments = [], trailingComments = []) {
+        this.eventsTransformation.push(...leadingComments, `${this.name}.$on(`, surroundWith(this.str, [nameStart, nameEnd], '"', '"'), ', ', expression ? expression : '() => {}', ');', ...trailingComments);
     }
     /**
      * Handle the slot of `<... slot=".." />`
@@ -2602,7 +2721,8 @@ function handleAttribute(str, attr, parent, preserveCase, svelte5Plus, element)
         }
     };
     // Handle attribute name
-    const attributeName = [];
+    const attributeName = getLeadingCommentTransformation(attr);
+    const trailingComments = getTrailingCommentTransformation(attr);
     if (attributeValueIsOfType(attr.value, 'AttributeShorthand')) {
         // For the attribute shorthand, the name will be the mapped part
         let [start, end] = [attr.value[0].start, attr.value[0].end];
@@ -2612,7 +2732,7 @@ function handleAttribute(str, attr, parent, preserveCase, svelte5Plus, element)
             start--;
             str.overwrite(start, end, ' ', { contentOnly: true });
         }
-        addAttribute([[start, end]]);
+        addAttribute([[start, end], ...trailingComments]);
         return;
     }
     else {
@@ -2635,13 +2755,13 @@ function handleAttribute(str, attr, parent, preserveCase, svelte5Plus, element)
     // Handle attribute value
     const attributeValue = [];
     if (attr.value === true) {
-        attributeValue.push(attr.name === 'popover' ? '""' : 'true');
+        attributeValue.push(attr.name === 'popover' ? '""' : 'true', ...trailingComments);
         addAttribute(attributeName, attributeValue);
         return;
     }
     if (attr.value.length == 0) {
         // shouldn't happen
-        addAttribute(attributeName, ['""']);
+        addAttribute(attributeName, ['""', ...trailingComments]);
         return;
     }
     //handle single value
@@ -2681,6 +2801,7 @@ function handleAttribute(str, attr, parent, preserveCase, svelte5Plus, element)
             if (!needsNumberConversion) {
                 attributeValue.push(quote);
             }
+            attributeValue.push(...trailingComments);
             addAttribute(attributeName, attributeValue);
         }
         else if (attrVal.type == 'MustacheTag') {
@@ -2691,7 +2812,7 @@ function handleAttribute(str, attr, parent, preserveCase, svelte5Plus, element)
                 start--;
                 str.overwrite(start, end, ' ', { contentOnly: true });
             }
-            attributeValue.push([start, end]);
+            attributeValue.push([start, end], ...trailingComments);
             addAttribute(attributeName, attributeValue);
         }
         return;
@@ -2702,7 +2823,7 @@ function handleAttribute(str, attr, parent, preserveCase, svelte5Plus, element)
             str.appendRight(n.start, '$');
         }
     }
-    attributeValue.push('`', [attr.value[0].start, attr.value[attr.value.length - 1].end], '`');
+    attributeValue.push('`', [attr.value[0].start, attr.value[attr.value.length - 1].end], '`', ...trailingComments);
     addAttribute(attributeName, attributeValue);
 }
 function attributeValueIsOfType(value, type) {
@@ -2822,6 +2943,8 @@ const supportsBindThis = [
 function handleBinding(str, attr, parent, element, preserveBind, isSvelte5Plus, emitJsDoc, isTsFile) {
     const isGetSetBinding = attr.expression.type === 'SequenceExpression';
     const [get, set] = isGetSetBinding ? attr.expression.expressions : [];
+    const leadingComments = getLeadingCommentTransformation(attr);
+    const trailingComments = getTrailingCommentTransformation(attr);
     // bind this
     if (attr.name === 'this' && supportsBindThis.includes(parent.type)) {
         // bind:this is effectively only works bottom up - the variable is updated by the element, not
@@ -2830,10 +2953,16 @@ function handleBinding(str, attr, parent, element, preserveBind, isSvelte5Plus,
         // the value becomes null, but we don't add it to the clause because it would introduce
         // worse DX for the 99% use case, and because null !== undefined which others might use to type the declaration.
         if (isGetSetBinding) {
-            element.appendToStartEnd(['(', [set.start, getEnd(set)], `)(${element.name});`]);
+            element.appendToStartEnd([
+                ...leadingComments,
+                '(',
+                [set.start, getEnd(set)],
+                `)(${element.name});`,
+                ...trailingComments
+            ]);
         }
         else {
-            appendOneWayBinding(attr, ` = ${element.name}`, element);
+            appendOneWayBinding(attr, ` = ${element.name}`, element, leadingComments, trailingComments);
         }
         return;
     }
@@ -2841,12 +2970,12 @@ function handleBinding(str, attr, parent, element, preserveBind, isSvelte5Plus,
         // bind group on input
         if (element instanceof Element && attr.name == 'group' && parent.name == 'input') {
             // add reassignment to force TS to widen the type of the declaration (in case it's never reassigned anywhere else)
-            appendOneWayBinding(attr, ' = __sveltets_2_any(null)', element);
+            appendOneWayBinding(attr, ' = __sveltets_2_any(null)', element, leadingComments, trailingComments);
             return;
         }
         // one way binding
         if (oneWayBindingAttributes.has(attr.name) && element instanceof Element) {
-            appendOneWayBinding(attr, `= ${element.name}.${attr.name}`, element);
+            appendOneWayBinding(attr, `= ${element.name}.${attr.name}`, element, leadingComments, trailingComments);
             return;
         }
         // one way binding whose property is not on the element
@@ -2857,8 +2986,10 @@ function handleBinding(str, attr, parent, element, preserveBind, isSvelte5Plus,
                 ? `null as ${bindingType}`
                 : `/** @type {${bindingType}} */ (null)`;
             element.appendToStartEnd([
+                ...leadingComments,
                 [attr.expression.start, getEnd(attr.expression)],
-                `= ${surroundWithIgnoreComments(bindingValue)};`
+                `= ${surroundWithIgnoreComments(bindingValue)};`,
+                ...trailingComments
             ]);
             return;
         }
@@ -2873,12 +3004,18 @@ function handleBinding(str, attr, parent, element, preserveBind, isSvelte5Plus,
     const name = preserveBind && element instanceof Element
         ? // HTML typings - preserve the bind: prefix
             isShorthand
-                ? [`"${str.original.substring(attr.start, attr.end)}"`]
-                : ['"', [attr.start, str.original.lastIndexOf('=', attr.expression.start)], '"']
+                ? [...leadingComments, `"${str.original.substring(attr.start, attr.end)}"`]
+                : [
+                    ...leadingComments,
+                    '"',
+                    [attr.start, str.original.lastIndexOf('=', attr.expression.start)],
+                    '"'
+                ]
         : // Other typings - remove the bind: prefix
             isShorthand
-                ? [[attr.expression.start, attr.expression.end]]
+                ? [...leadingComments, [attr.expression.start, attr.expression.end]]
                 : [
+                    ...leadingComments,
                     [
                         attr.start + 'bind:'.length,
                         str.original.lastIndexOf('=', attr.expression.start)
@@ -2886,7 +3023,7 @@ function handleBinding(str, attr, parent, element, preserveBind, isSvelte5Plus,
                 ];
     const value = isShorthand
         ? preserveBind && element instanceof Element
-            ? [rangeWithTrailingPropertyAccess(str.original, attr.expression)]
+            ? [rangeWithTrailingPropertyAccess(str.original, attr.expression), ...trailingComments]
             : undefined
         : isGetSetBinding
             ? [
@@ -2894,9 +3031,13 @@ function handleBinding(str, attr, parent, element, preserveBind, isSvelte5Plus,
                 [get.start, get.end],
                 ',',
                 rangeWithTrailingPropertyAccess(str.original, set),
-                ')'
+                ')',
+                ...trailingComments
             ]
-            : [rangeWithTrailingPropertyAccess(str.original, attr.expression)];
+            : [rangeWithTrailingPropertyAccess(str.original, attr.expression), ...trailingComments];
+    if (!value) {
+        name.push(...trailingComments);
+    }
     if (isSvelte5Plus && element instanceof InlineComponent) {
         // To check if property is actually bindable
         element.appendToStartEnd([`${element.name}.$$bindings = '${attr.name}';`]);
@@ -2908,13 +3049,15 @@ function handleBinding(str, attr, parent, element, preserveBind, isSvelte5Plus,
         element.addProp(name, value);
     }
 }
-function appendOneWayBinding(attr, assignment, element) {
+function appendOneWayBinding(attr, assignment, element, leadingComments, trailingComments) {
     const expression = attr.expression;
     const end = getEnd(expression);
     const hasTypeAnnotation = expression.typeAnnotation || isTypescriptNode(expression);
     const array = [
+        ...leadingComments,
         [expression.start, end],
-        assignment + (hasTypeAnnotation ? '' : ';')
+        assignment + (hasTypeAnnotation ? '' : ';'),
+        ...trailingComments
     ];
     if (hasTypeAnnotation) {
         array.push([end, expression.end], ';');
@@ -2929,13 +3072,6 @@ function handleClassDirective(str, attr, element) {
     element.appendToStartEnd([rangeWithTrailingPropertyAccess(str.original, attr.expression), ';']);
 }
 
-/**
- * Removes comment altogether as it's unimportant for the output
- */
-function handleComment(str, node) {
-    str.overwrite(node.start, node.end, '', { contentOnly: true });
-}
-
 /**
  * `{@const x = y}` --> `const x = y;`
  *
@@ -3055,18 +3191,23 @@ function handleEventHandler(str, attr, element) {
     const nameStart = str.original.indexOf(':', attr.start) + 1;
     // If there's no expression, it's event bubbling (on:click)
     const nameEnd = nameStart + attr.name.length;
+    const leadingComments = getLeadingCommentTransformation(attr);
+    const trailingComments = getTrailingCommentTransformation(attr);
     if (element instanceof Element) {
         // Prefix with "on:" for better mapping.
         // Surround with quotes because event name could contain invalid prop chars.
         surroundWith(str, [nameStart, nameEnd], '"on:', '"');
-        element.addAttribute([[nameStart, nameEnd]], attr.expression
-            ? [rangeWithTrailingPropertyAccess(str.original, attr.expression)]
-            : ['undefined']);
+        element.addAttribute([...leadingComments, [nameStart, nameEnd]], attr.expression
+            ? [
+                rangeWithTrailingPropertyAccess(str.original, attr.expression),
+                ...trailingComments
+            ]
+            : ['undefined', ...trailingComments]);
     }
     else {
         element.addEvent([nameStart, nameEnd], attr.expression
             ? rangeWithTrailingPropertyAccess(str.original, attr.expression)
-            : undefined);
+            : undefined, leadingComments, trailingComments);
     }
 }
 
@@ -3160,18 +3301,22 @@ function handleLet(str, node, parent, preserveCase, svelte5Plus, element) {
                             expression: node.expression
                         }
                     ]
-                    : true
+                    : true,
+                leadingComments: node.leadingComments,
+                trailingComments: node.trailingComments
             }, parent, preserveCase, svelte5Plus, element);
         }
     }
 }
 function addSlotLet(node, element) {
     const letTransformation = [
+        ...getLeadingCommentTransformation(node),
         [node.start + 'let:'.length, node.start + 'let:'.length + node.name.length]
     ];
     if (node.expression) {
         letTransformation.push(':', [node.expression.start, node.expression.end]);
     }
+    letTransformation.push(...getTrailingCommentTransformation(node));
     element.addSlotLet(letTransformation);
 }
 
@@ -3209,7 +3354,11 @@ function handleRawHtml(str, node) {
  * `{...xx}` -> `...x`
  */
 function handleSpread(node, element) {
-    const transformation = [[node.start + 1, node.end - 1]];
+    const transformation = [
+        ...getLeadingCommentTransformation(node),
+        [node.start + 1, node.end - 1],
+        ...getTrailingCommentTransformation(node)
+    ];
     if (element instanceof Element) {
         element.addAttribute(transformation);
     }
@@ -3290,7 +3439,9 @@ function handleText(str, node, parent) {
  * transition|modifier:xxx(yyy)   --->   __sveltets_2_ensureTransition(xxx(svelte.mapElementTag('..'),(yyy)));
  */
 function handleTransitionDirective(str, attr, element) {
+    const trailingComments = getTrailingCommentTransformation(attr);
     const transformations = [
+        ...getLeadingCommentTransformation(attr),
         '__sveltets_2_ensureTransition(',
         getDirectiveNameStartEndIdx(str, attr),
         `(${element.typingsNamespace}.mapElementTag('${element.tagName}')`
@@ -3298,7 +3449,7 @@ function handleTransitionDirective(str, attr, element) {
     if (attr.expression) {
         transformations.push(',(', rangeWithTrailingPropertyAccess(str.original, attr.expression), ')');
     }
-    transformations.push('));');
+    transformations.push('));', ...trailingComments);
     element.appendToStartEnd(transformations);
 }
 
@@ -4868,12 +5019,17 @@ function checkIfDeclarationInstantiatedEventDispatcher(node, eventDispatcherImpo
  * {@attach xxx}   --->    [Symbol()]: xxx
  */
 function handleAttachTag(tag, element) {
+    const transformation = [...getLeadingCommentTransformation(tag), '[Symbol("@attach")]'];
+    const value = [
+        [tag.expression.start, tag.expression.end],
+        ...getTrailingCommentTransformation(tag)
+    ];
     // element.addAttachment(attr);
     if (element instanceof InlineComponent) {
-        element.addProp(['[Symbol("@attach")]'], [[tag.expression.start, tag.expression.end]]);
+        element.addProp(transformation, value);
     }
     else {
-        element.addAttribute(['[Symbol("@attach")]'], [[tag.expression.start, tag.expression.end]]);
+        element.addAttribute(transformation, value);
     }
 }
 
@@ -5221,6 +5377,8 @@ function convertHtmlxToJsx(str, ast, tags, options = { svelte5Plus: false }) {
                         handleRenderTag(str, node);
                         break;
                     case 'AttachTag':
+                        handleLeadingStartComment(str, node, ast);
+                        handleTrailingEndComment(str, node, parent, ast);
                         handleAttachTag(node, element);
                         break;
                     case 'InlineComponent':
@@ -5273,6 +5431,8 @@ function convertHtmlxToJsx(str, ast, tags, options = { svelte5Plus: false }) {
                         handleComment(str, node);
                         break;
                     case 'Binding':
+                        handleLeadingStartComment(str, node, ast);
+                        handleTrailingEndComment(str, node, parent, ast);
                         handleBinding(str, node, parent, element, options.typingsNamespace === 'svelteHTML', options.svelte5Plus, emitJsDoc, isTsFile);
                         break;
                     case 'Class':
@@ -5282,28 +5442,42 @@ function convertHtmlxToJsx(str, ast, tags, options = { svelte5Plus: false }) {
                         handleStyleDirective(str, node, element);
                         break;
                     case 'Action':
+                        handleLeadingStartComment(str, node, ast);
+                        handleTrailingEndComment(str, node, parent, ast);
                         stores.handleDirective(node, str);
                         handleActionDirective(node, element);
                         break;
                     case 'Transition':
+                        handleLeadingStartComment(str, node, ast);
+                        handleTrailingEndComment(str, node, parent, ast);
                         stores.handleDirective(node, str);
                         handleTransitionDirective(str, node, element);
                         break;
                     case 'Animation':
+                        handleLeadingStartComment(str, node, ast);
+                        handleTrailingEndComment(str, node, parent, ast);
                         stores.handleDirective(node, str);
                         handleAnimateDirective(str, node, element);
                         break;
                     case 'Attribute':
+                        handleLeadingStartComment(str, node, ast);
+                        handleTrailingEndComment(str, node, parent, ast);
                         handleAttribute(str, node, parent, preserveAttributeCase, options.svelte5Plus, element);
                         break;
                     case 'Spread':
+                        handleLeadingStartComment(str, node, ast);
+                        handleTrailingEndComment(str, node, parent, ast);
                         handleSpread(node, element);
                         break;
                     case 'EventHandler':
+                        handleLeadingStartComment(str, node, ast);
+                        handleTrailingEndComment(str, node, parent, ast);
                         eventHandler.handleEventHandler(node, parent);
                         handleEventHandler(str, node, element);
                         break;
                     case 'Let':
+                        handleLeadingStartComment(str, node, ast);
+                        handleTrailingEndComment(str, node, parent, ast);
                         handleLet(str, node, parent, preserveAttributeCase, options.svelte5Plus, element);
                         break;
                     case 'Text':

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "svelte2tsx",
-  "version": "0.7.50",
+  "version": "0.7.51",
   "description": "Convert Svelte components to TSX for type checking",
   "author": "The Svelte Community",
   "license": "MIT",