svelte2tsx 0.7.29 → 0.7.31

package/index.js

@@ -1673,10 +1673,10 @@ function parseHtmlx(htmlx, parse, options) {
     const verbatimElements = findVerbatimElements(htmlx);
     const deconstructed = blankVerbatimContent(htmlx, verbatimElements);
     //extract the html content parsed as htmlx this excludes our script and style tags
-    const parsingCode = options.emitOnTemplateError
+    const parsingCode = options.emitOnTemplateError && !options.svelte5Plus
         ? blankPossiblyErrorOperatorOrPropertyAccess(deconstructed)
         : deconstructed;
-    const htmlxAst = parse(parsingCode).html;
+    const htmlxAst = parse(parsingCode, options.svelte5Plus ? { loose: options.emitOnTemplateError } : undefined).html;
     //restore our script and style tags as nodes to maintain validity with HTMLx
     for (const s of verbatimElements) {
         htmlxAst.children.push(s);
@@ -1760,8 +1760,7 @@ function handleActionDirective(attr, element) {
  * you may need to find a different way because MagicString does not allow us to move a range
  * that goes from `start` to `end` to the `end` position.
  */
-function transform(str, start, end, _xxx, // TODO
-transformations) {
+function transform(str, start, end, transformations) {
     var _a, _b;
     const moves = [];
     let appendPosition = end;
@@ -1853,6 +1852,10 @@ transformations) {
         }
     }
     for (let i = deletePos; i < moves.length; i++) {
+        // Can happen when there's not enough space left at the end of an unfininished element/component tag.
+        // Better to leave potentially slightly disarranged code than fail loudly
+        if (moves[i][1] >= end && moves[i][0] <= end)
+            break;
         str.move(moves[i][0], moves[i][1], end);
     }
 }
@@ -1936,6 +1939,22 @@ function isTypescriptNode(node) {
         node.type === 'TSSatisfiesExpression' ||
         node.type === 'TSNonNullExpression');
 }
+/**
+ * Returns `true` if the given block is implicitly closed, which could be the case in loose parsing mode.
+ * E.g.:
+ * ```html
+ * <div>
+ *   {#if x}
+ * </div>
+ * ```
+ * @param end
+ * @param block
+ * @returns
+ */
+function isImplicitlyClosedBlock(end, block) {
+    var _a, _b;
+    return end < ((_b = (_a = block.children[block.children.length - 1]) === null || _a === void 0 ? void 0 : _a.end) !== null && _b !== void 0 ? _b : block.expression.end);
+}
 
 /**
  * animate:xxx(yyy)   --->   __sveltets_2_ensureAnimation(xxx(svelte.mapElementTag('..'),__sveltets_2_AnimationMove,(yyy)));
@@ -2124,7 +2143,7 @@ class Element {
             this.endTransformation.push('}');
         }
         if (this.isSelfclosing) {
-            transform(this.str, this.startTagStart, this.startTagEnd, this.startTagEnd, [
+            transform(this.str, this.startTagStart, this.startTagEnd, [
                 // Named slot transformations go first inside a outer block scope because
                 // <div let:xx {x} /> means "use the x of let:x", and without a separate
                 // block scope this would give a "used before defined" error
@@ -2137,7 +2156,7 @@ class Element {
             ]);
         }
         else {
-            transform(this.str, this.startTagStart, this.startTagEnd, this.startTagEnd, [
+            transform(this.str, this.startTagStart, this.startTagEnd, [
                 ...slotLetTransformation,
                 ...this.actionsTransformation,
                 ...this.getStartTransformation(),
@@ -2149,7 +2168,7 @@ class Element {
                 .lastIndexOf(`</${this.node.name}`);
             // tagEndIdx === -1 happens in situations of unclosed tags like `<p>fooo <p>anothertag</p>`
             const endStart = tagEndIdx === -1 ? this.node.end : tagEndIdx + this.node.start;
-            transform(this.str, endStart, this.node.end, this.node.end, this.endTransformation);
+            transform(this.str, endStart, this.node.end, this.endTransformation);
         }
     }
     getStartTransformation() {
@@ -2406,7 +2425,7 @@ class InlineComponent {
             : '';
         if (this.isSelfclosing) {
             this.endTransformation.push('}');
-            transform(this.str, this.startTagStart, this.startTagEnd, this.startTagEnd, [
+            transform(this.str, this.startTagStart, this.startTagEnd, [
                 // Named slot transformations go first inside a outer block scope because
                 // <Comp let:xx {x} /> means "use the x of let:x", and without a separate
                 // block scope this would give a "used before defined" error
@@ -2421,15 +2440,23 @@ class InlineComponent {
             ]);
         }
         else {
-            const endStart = this.str.original
+            let endStart = this.str.original
                 .substring(this.node.start, this.node.end)
-                .lastIndexOf(`</${this.node.name}`) + this.node.start;
-            if (!this.node.name.startsWith('svelte:')) {
+                .lastIndexOf(`</${this.node.name}`);
+            if (endStart === -1) {
+                // Can happen in loose parsing mode when there's no closing tag
+                endStart = this.node.end;
+                this.startTagEnd = this.node.end - 1;
+            }
+            else {
+                endStart += this.node.start;
+            }
+            if (!this.node.name.startsWith('svelte:') && endStart !== this.node.end) {
                 // Ensure the end tag is mapped, too. </Component> -> Component}
                 this.endTransformation.push([endStart + 2, endStart + this.node.name.length + 2]);
             }
             this.endTransformation.push('}');
-            transform(this.str, this.startTagStart, this.startTagEnd, this.startTagEnd, [
+            transform(this.str, this.startTagStart, this.startTagEnd, [
                 // See comment above why this goes first
                 ...namedSlotLetTransformation,
                 ...this.startTransformation,
@@ -2439,7 +2466,7 @@ class InlineComponent {
                 snippetPropVariablesDeclaration,
                 ...defaultSlotLetTransformation
             ]);
-            transform(this.str, endStart, this.node.end, this.node.end, this.endTransformation);
+            transform(this.str, endStart, this.node.end, this.endTransformation);
         }
     }
     computeStartTagEnd() {
@@ -2568,7 +2595,14 @@ function handleAttribute(str, attr, parent, preserveCase, svelte5Plus, element)
     const attributeName = [];
     if (attributeValueIsOfType(attr.value, 'AttributeShorthand')) {
         // For the attribute shorthand, the name will be the mapped part
-        addAttribute([[attr.value[0].start, attr.value[0].end]]);
+        let [start, end] = [attr.value[0].start, attr.value[0].end];
+        if (start === end) {
+            // Loose parsing mode, we have an empty attribute value, e.g. {}
+            // For proper intellisense we need to make this a non-empty expression.
+            start--;
+            str.overwrite(start, end, ' ', { contentOnly: true });
+        }
+        addAttribute([[start, end]]);
         return;
     }
     else {
@@ -2640,7 +2674,14 @@ function handleAttribute(str, attr, parent, preserveCase, svelte5Plus, element)
             addAttribute(attributeName, attributeValue);
         }
         else if (attrVal.type == 'MustacheTag') {
-            attributeValue.push(rangeWithTrailingPropertyAccess(str.original, attrVal.expression));
+            let [start, end] = rangeWithTrailingPropertyAccess(str.original, attrVal.expression);
+            if (start === end) {
+                // Loose parsing mode, we have an empty attribute value, e.g. attr={}
+                // For proper intellisense we need to make this a non-empty expression.
+                start--;
+                str.overwrite(start, end, ' ', { contentOnly: true });
+            }
+            attributeValue.push([start, end]);
             addAttribute(attributeName, attributeValue);
         }
         return;
@@ -2726,7 +2767,7 @@ function handleAwait(str, awaitBlock) {
         transforms.push('}');
     }
     transforms.push('}');
-    transform(str, awaitBlock.start, awaitBlock.end, awaitBlock.end, transforms);
+    transform(str, awaitBlock.start, awaitBlock.end, transforms);
 }
 
 /**
@@ -2919,17 +2960,18 @@ function handleDebug(str, debugBlock) {
  *   `ensureArray` will error that there are more args than expected
  */
 function handleEach(str, eachBlock) {
-    var _a;
-    const startEnd = str.original.indexOf('}', ((_a = eachBlock.key) === null || _a === void 0 ? void 0 : _a.end) || eachBlock.context.end) + 1;
+    var _a, _b, _c;
+    const startEnd = str.original.indexOf('}', ((_a = eachBlock.key) === null || _a === void 0 ? void 0 : _a.end) || ((_b = eachBlock.context) === null || _b === void 0 ? void 0 : _b.end) || eachBlock.expression.end) + 1;
     let transforms;
     // {#each true, [1,2]} is valid but for (const x of true, [1,2]) is not if not wrapped with braces
     const containsComma = str.original
         .substring(eachBlock.expression.start, eachBlock.expression.end)
         .includes(',');
     const expressionEnd = getEnd(eachBlock.expression);
-    const contextEnd = getEnd(eachBlock.context);
-    const arrayAndItemVarTheSame = str.original.substring(eachBlock.expression.start, expressionEnd) ===
-        str.original.substring(eachBlock.context.start, contextEnd);
+    const contextEnd = eachBlock.context && getEnd(eachBlock.context);
+    const arrayAndItemVarTheSame = !!eachBlock.context &&
+        str.original.substring(eachBlock.expression.start, expressionEnd) ===
+            str.original.substring(eachBlock.context.start, contextEnd);
     if (arrayAndItemVarTheSame) {
         transforms = [
             `{ const $$_each = __sveltets_2_ensureArray(${containsComma ? '(' : ''}`,
@@ -2942,21 +2984,21 @@ function handleEach(str, eachBlock) {
     else {
         transforms = [
             'for(let ',
-            [eachBlock.context.start, contextEnd],
+            eachBlock.context ? [eachBlock.context.start, contextEnd] : '$$each_item',
             ` of __sveltets_2_ensureArray(${containsComma ? '(' : ''}`,
             [eachBlock.expression.start, eachBlock.expression.end],
-            `${containsComma ? ')' : ''})){`
+            `${containsComma ? ')' : ''})){${eachBlock.context ? '' : '$$each_item;'}`
         ];
     }
     if (eachBlock.index) {
-        const indexStart = str.original.indexOf(eachBlock.index, eachBlock.context.end);
+        const indexStart = str.original.indexOf(eachBlock.index, ((_c = eachBlock.context) === null || _c === void 0 ? void 0 : _c.end) || eachBlock.expression.end);
         const indexEnd = indexStart + eachBlock.index.length;
         transforms.push('let ', [indexStart, indexEnd], ' = 1;');
     }
     if (eachBlock.key) {
         transforms.push([eachBlock.key.start, eachBlock.key.end], ';');
     }
-    transform(str, eachBlock.start, startEnd, startEnd, transforms);
+    transform(str, eachBlock.start, startEnd, transforms);
     const endEach = str.original.lastIndexOf('{', eachBlock.end - 1);
     // {/each} -> } or {:else} -> }
     if (eachBlock.else) {
@@ -2965,12 +3007,20 @@ function handleEach(str, eachBlock) {
         str.overwrite(elseStart, elseEnd + 1, '}' + (arrayAndItemVarTheSame ? '}' : ''), {
             contentOnly: true
         });
-        str.remove(endEach, eachBlock.end);
+        if (!isImplicitlyClosedBlock(endEach, eachBlock)) {
+            str.remove(endEach, eachBlock.end);
+        }
     }
     else {
-        str.overwrite(endEach, eachBlock.end, '}' + (arrayAndItemVarTheSame ? '}' : ''), {
-            contentOnly: true
-        });
+        const closing = '}' + (arrayAndItemVarTheSame ? '}' : '');
+        if (isImplicitlyClosedBlock(endEach, eachBlock)) {
+            str.prependLeft(eachBlock.end, closing);
+        }
+        else {
+            str.overwrite(endEach, eachBlock.end, closing, {
+                contentOnly: true
+            });
+        }
     }
 }
 
@@ -3014,9 +3064,14 @@ function handleIf(str, ifBlock) {
     const expressionEnd = withTrailingPropertyAccess(str.original, ifBlock.expression.end);
     const end = str.original.indexOf('}', expressionEnd);
     str.overwrite(expressionEnd, end + 1, '){');
-    // {/if} -> }
     const endif = str.original.lastIndexOf('{', ifBlock.end - 1);
-    str.overwrite(endif, ifBlock.end, '}');
+    if (isImplicitlyClosedBlock(endif, ifBlock)) {
+        str.prependLeft(ifBlock.end, '}');
+    }
+    else {
+        // {/if} -> }
+        str.overwrite(endif, ifBlock.end, '}');
+    }
 }
 /**
  * {:else}   --->   } else {
@@ -3046,7 +3101,9 @@ function handleKey(str, keyBlock) {
     str.overwrite(expressionEnd, end + 1, '; ');
     // {/key}   ->
     const endKey = str.original.lastIndexOf('{', keyBlock.end - 1);
-    str.overwrite(endKey, keyBlock.end, '', { contentOnly: true });
+    if (!isImplicitlyClosedBlock(endKey, keyBlock)) {
+        str.overwrite(endKey, keyBlock.end, '', { contentOnly: true });
+    }
 }
 
 /**
@@ -3244,9 +3301,14 @@ function handleSnippet(str, snippetBlock, component) {
     const afterSnippet = isImplicitProp
         ? `};return __sveltets_2_any(0)}`
         : `};return __sveltets_2_any(0)};`;
-    str.overwrite(endSnippet, snippetBlock.end, afterSnippet, {
-        contentOnly: true
-    });
+    if (isImplicitlyClosedBlock(endSnippet, snippetBlock)) {
+        str.prependLeft(snippetBlock.end, afterSnippet);
+    }
+    else {
+        str.overwrite(endSnippet, snippetBlock.end, afterSnippet, {
+            contentOnly: true
+        });
+    }
     const lastParameter = (_a = snippetBlock.parameters) === null || _a === void 0 ? void 0 : _a.at(-1);
     const startEnd = str.original.indexOf('}', (_d = (_c = (_b = lastParameter === null || lastParameter === void 0 ? void 0 : lastParameter.typeAnnotation) === null || _b === void 0 ? void 0 : _b.end) !== null && _c !== void 0 ? _c : lastParameter === null || lastParameter === void 0 ? void 0 : lastParameter.end) !== null && _d !== void 0 ? _d : snippetBlock.expression.end) + 1;
     let parameters;
@@ -3259,7 +3321,22 @@ function handleSnippet(str, snippetBlock, component) {
     // inner async function for potential #await blocks
     const afterParameters = ` => { async ()${IGNORE_POSITION_COMMENT} => {`;
     if (isImplicitProp) {
-        str.overwrite(snippetBlock.start, snippetBlock.expression.start, '', { contentOnly: true });
+        /** Can happen in loose parsing mode, e.g. code is currently `{#snippet }` */
+        const emptyId = snippetBlock.expression.start === snippetBlock.expression.end;
+        if (emptyId) {
+            // Give intellisense a way to map into the right position for implicit prop completion
+            str.overwrite(snippetBlock.start, snippetBlock.expression.start - 1, '', {
+                contentOnly: true
+            });
+            str.overwrite(snippetBlock.expression.start - 1, snippetBlock.expression.start, ' ', {
+                contentOnly: true
+            });
+        }
+        else {
+            str.overwrite(snippetBlock.start, snippetBlock.expression.start, '', {
+                contentOnly: true
+            });
+        }
         const transforms = ['('];
         if (parameters) {
             transforms.push(parameters);
@@ -3275,10 +3352,10 @@ function handleSnippet(str, snippetBlock, component) {
         transforms.push(')' + afterParameters);
         transforms.push([startEnd, snippetBlock.end]);
         if (component instanceof InlineComponent) {
-            component.addImplicitSnippetProp([snippetBlock.expression.start, snippetBlock.expression.end], transforms);
+            component.addImplicitSnippetProp([snippetBlock.expression.start - (emptyId ? 1 : 0), snippetBlock.expression.end], transforms);
         }
         else {
-            component.addAttribute([[snippetBlock.expression.start, snippetBlock.expression.end]], transforms);
+            component.addAttribute([[snippetBlock.expression.start - (emptyId ? 1 : 0), snippetBlock.expression.end]], transforms);
         }
     }
     else {
@@ -3293,7 +3370,7 @@ function handleSnippet(str, snippetBlock, component) {
         }
         transforms.push(')', surroundWithIgnoreComments(`: ReturnType<import('svelte').Snippet>`), // shows up nicely preserved on hover, other alternatives don't
         afterParameters);
-        transform(str, snippetBlock.start, startEnd, startEnd, transforms);
+        transform(str, snippetBlock.start, startEnd, transforms);
     }
 }
 function handleImplicitChildren(componentNode, component) {

package/index.mjs

@@ -1653,10 +1653,10 @@ function parseHtmlx(htmlx, parse, options) {
     const verbatimElements = findVerbatimElements(htmlx);
     const deconstructed = blankVerbatimContent(htmlx, verbatimElements);
     //extract the html content parsed as htmlx this excludes our script and style tags
-    const parsingCode = options.emitOnTemplateError
+    const parsingCode = options.emitOnTemplateError && !options.svelte5Plus
         ? blankPossiblyErrorOperatorOrPropertyAccess(deconstructed)
         : deconstructed;
-    const htmlxAst = parse(parsingCode).html;
+    const htmlxAst = parse(parsingCode, options.svelte5Plus ? { loose: options.emitOnTemplateError } : undefined).html;
     //restore our script and style tags as nodes to maintain validity with HTMLx
     for (const s of verbatimElements) {
         htmlxAst.children.push(s);
@@ -1740,8 +1740,7 @@ function handleActionDirective(attr, element) {
  * you may need to find a different way because MagicString does not allow us to move a range
  * that goes from `start` to `end` to the `end` position.
  */
-function transform(str, start, end, _xxx, // TODO
-transformations) {
+function transform(str, start, end, transformations) {
     var _a, _b;
     const moves = [];
     let appendPosition = end;
@@ -1833,6 +1832,10 @@ transformations) {
         }
     }
     for (let i = deletePos; i < moves.length; i++) {
+        // Can happen when there's not enough space left at the end of an unfininished element/component tag.
+        // Better to leave potentially slightly disarranged code than fail loudly
+        if (moves[i][1] >= end && moves[i][0] <= end)
+            break;
         str.move(moves[i][0], moves[i][1], end);
     }
 }
@@ -1916,6 +1919,22 @@ function isTypescriptNode(node) {
         node.type === 'TSSatisfiesExpression' ||
         node.type === 'TSNonNullExpression');
 }
+/**
+ * Returns `true` if the given block is implicitly closed, which could be the case in loose parsing mode.
+ * E.g.:
+ * ```html
+ * <div>
+ *   {#if x}
+ * </div>
+ * ```
+ * @param end
+ * @param block
+ * @returns
+ */
+function isImplicitlyClosedBlock(end, block) {
+    var _a, _b;
+    return end < ((_b = (_a = block.children[block.children.length - 1]) === null || _a === void 0 ? void 0 : _a.end) !== null && _b !== void 0 ? _b : block.expression.end);
+}
 
 /**
  * animate:xxx(yyy)   --->   __sveltets_2_ensureAnimation(xxx(svelte.mapElementTag('..'),__sveltets_2_AnimationMove,(yyy)));
@@ -2104,7 +2123,7 @@ class Element {
             this.endTransformation.push('}');
         }
         if (this.isSelfclosing) {
-            transform(this.str, this.startTagStart, this.startTagEnd, this.startTagEnd, [
+            transform(this.str, this.startTagStart, this.startTagEnd, [
                 // Named slot transformations go first inside a outer block scope because
                 // <div let:xx {x} /> means "use the x of let:x", and without a separate
                 // block scope this would give a "used before defined" error
@@ -2117,7 +2136,7 @@ class Element {
             ]);
         }
         else {
-            transform(this.str, this.startTagStart, this.startTagEnd, this.startTagEnd, [
+            transform(this.str, this.startTagStart, this.startTagEnd, [
                 ...slotLetTransformation,
                 ...this.actionsTransformation,
                 ...this.getStartTransformation(),
@@ -2129,7 +2148,7 @@ class Element {
                 .lastIndexOf(`</${this.node.name}`);
             // tagEndIdx === -1 happens in situations of unclosed tags like `<p>fooo <p>anothertag</p>`
             const endStart = tagEndIdx === -1 ? this.node.end : tagEndIdx + this.node.start;
-            transform(this.str, endStart, this.node.end, this.node.end, this.endTransformation);
+            transform(this.str, endStart, this.node.end, this.endTransformation);
         }
     }
     getStartTransformation() {
@@ -2386,7 +2405,7 @@ class InlineComponent {
             : '';
         if (this.isSelfclosing) {
             this.endTransformation.push('}');
-            transform(this.str, this.startTagStart, this.startTagEnd, this.startTagEnd, [
+            transform(this.str, this.startTagStart, this.startTagEnd, [
                 // Named slot transformations go first inside a outer block scope because
                 // <Comp let:xx {x} /> means "use the x of let:x", and without a separate
                 // block scope this would give a "used before defined" error
@@ -2401,15 +2420,23 @@ class InlineComponent {
             ]);
         }
         else {
-            const endStart = this.str.original
+            let endStart = this.str.original
                 .substring(this.node.start, this.node.end)
-                .lastIndexOf(`</${this.node.name}`) + this.node.start;
-            if (!this.node.name.startsWith('svelte:')) {
+                .lastIndexOf(`</${this.node.name}`);
+            if (endStart === -1) {
+                // Can happen in loose parsing mode when there's no closing tag
+                endStart = this.node.end;
+                this.startTagEnd = this.node.end - 1;
+            }
+            else {
+                endStart += this.node.start;
+            }
+            if (!this.node.name.startsWith('svelte:') && endStart !== this.node.end) {
                 // Ensure the end tag is mapped, too. </Component> -> Component}
                 this.endTransformation.push([endStart + 2, endStart + this.node.name.length + 2]);
             }
             this.endTransformation.push('}');
-            transform(this.str, this.startTagStart, this.startTagEnd, this.startTagEnd, [
+            transform(this.str, this.startTagStart, this.startTagEnd, [
                 // See comment above why this goes first
                 ...namedSlotLetTransformation,
                 ...this.startTransformation,
@@ -2419,7 +2446,7 @@ class InlineComponent {
                 snippetPropVariablesDeclaration,
                 ...defaultSlotLetTransformation
             ]);
-            transform(this.str, endStart, this.node.end, this.node.end, this.endTransformation);
+            transform(this.str, endStart, this.node.end, this.endTransformation);
         }
     }
     computeStartTagEnd() {
@@ -2548,7 +2575,14 @@ function handleAttribute(str, attr, parent, preserveCase, svelte5Plus, element)
     const attributeName = [];
     if (attributeValueIsOfType(attr.value, 'AttributeShorthand')) {
         // For the attribute shorthand, the name will be the mapped part
-        addAttribute([[attr.value[0].start, attr.value[0].end]]);
+        let [start, end] = [attr.value[0].start, attr.value[0].end];
+        if (start === end) {
+            // Loose parsing mode, we have an empty attribute value, e.g. {}
+            // For proper intellisense we need to make this a non-empty expression.
+            start--;
+            str.overwrite(start, end, ' ', { contentOnly: true });
+        }
+        addAttribute([[start, end]]);
         return;
     }
     else {
@@ -2620,7 +2654,14 @@ function handleAttribute(str, attr, parent, preserveCase, svelte5Plus, element)
             addAttribute(attributeName, attributeValue);
         }
         else if (attrVal.type == 'MustacheTag') {
-            attributeValue.push(rangeWithTrailingPropertyAccess(str.original, attrVal.expression));
+            let [start, end] = rangeWithTrailingPropertyAccess(str.original, attrVal.expression);
+            if (start === end) {
+                // Loose parsing mode, we have an empty attribute value, e.g. attr={}
+                // For proper intellisense we need to make this a non-empty expression.
+                start--;
+                str.overwrite(start, end, ' ', { contentOnly: true });
+            }
+            attributeValue.push([start, end]);
             addAttribute(attributeName, attributeValue);
         }
         return;
@@ -2706,7 +2747,7 @@ function handleAwait(str, awaitBlock) {
         transforms.push('}');
     }
     transforms.push('}');
-    transform(str, awaitBlock.start, awaitBlock.end, awaitBlock.end, transforms);
+    transform(str, awaitBlock.start, awaitBlock.end, transforms);
 }
 
 /**
@@ -2899,17 +2940,18 @@ function handleDebug(str, debugBlock) {
  *   `ensureArray` will error that there are more args than expected
  */
 function handleEach(str, eachBlock) {
-    var _a;
-    const startEnd = str.original.indexOf('}', ((_a = eachBlock.key) === null || _a === void 0 ? void 0 : _a.end) || eachBlock.context.end) + 1;
+    var _a, _b, _c;
+    const startEnd = str.original.indexOf('}', ((_a = eachBlock.key) === null || _a === void 0 ? void 0 : _a.end) || ((_b = eachBlock.context) === null || _b === void 0 ? void 0 : _b.end) || eachBlock.expression.end) + 1;
     let transforms;
     // {#each true, [1,2]} is valid but for (const x of true, [1,2]) is not if not wrapped with braces
     const containsComma = str.original
         .substring(eachBlock.expression.start, eachBlock.expression.end)
         .includes(',');
     const expressionEnd = getEnd(eachBlock.expression);
-    const contextEnd = getEnd(eachBlock.context);
-    const arrayAndItemVarTheSame = str.original.substring(eachBlock.expression.start, expressionEnd) ===
-        str.original.substring(eachBlock.context.start, contextEnd);
+    const contextEnd = eachBlock.context && getEnd(eachBlock.context);
+    const arrayAndItemVarTheSame = !!eachBlock.context &&
+        str.original.substring(eachBlock.expression.start, expressionEnd) ===
+            str.original.substring(eachBlock.context.start, contextEnd);
     if (arrayAndItemVarTheSame) {
         transforms = [
             `{ const $$_each = __sveltets_2_ensureArray(${containsComma ? '(' : ''}`,
@@ -2922,21 +2964,21 @@ function handleEach(str, eachBlock) {
     else {
         transforms = [
             'for(let ',
-            [eachBlock.context.start, contextEnd],
+            eachBlock.context ? [eachBlock.context.start, contextEnd] : '$$each_item',
             ` of __sveltets_2_ensureArray(${containsComma ? '(' : ''}`,
             [eachBlock.expression.start, eachBlock.expression.end],
-            `${containsComma ? ')' : ''})){`
+            `${containsComma ? ')' : ''})){${eachBlock.context ? '' : '$$each_item;'}`
         ];
     }
     if (eachBlock.index) {
-        const indexStart = str.original.indexOf(eachBlock.index, eachBlock.context.end);
+        const indexStart = str.original.indexOf(eachBlock.index, ((_c = eachBlock.context) === null || _c === void 0 ? void 0 : _c.end) || eachBlock.expression.end);
         const indexEnd = indexStart + eachBlock.index.length;
         transforms.push('let ', [indexStart, indexEnd], ' = 1;');
     }
     if (eachBlock.key) {
         transforms.push([eachBlock.key.start, eachBlock.key.end], ';');
     }
-    transform(str, eachBlock.start, startEnd, startEnd, transforms);
+    transform(str, eachBlock.start, startEnd, transforms);
     const endEach = str.original.lastIndexOf('{', eachBlock.end - 1);
     // {/each} -> } or {:else} -> }
     if (eachBlock.else) {
@@ -2945,12 +2987,20 @@ function handleEach(str, eachBlock) {
         str.overwrite(elseStart, elseEnd + 1, '}' + (arrayAndItemVarTheSame ? '}' : ''), {
             contentOnly: true
         });
-        str.remove(endEach, eachBlock.end);
+        if (!isImplicitlyClosedBlock(endEach, eachBlock)) {
+            str.remove(endEach, eachBlock.end);
+        }
     }
     else {
-        str.overwrite(endEach, eachBlock.end, '}' + (arrayAndItemVarTheSame ? '}' : ''), {
-            contentOnly: true
-        });
+        const closing = '}' + (arrayAndItemVarTheSame ? '}' : '');
+        if (isImplicitlyClosedBlock(endEach, eachBlock)) {
+            str.prependLeft(eachBlock.end, closing);
+        }
+        else {
+            str.overwrite(endEach, eachBlock.end, closing, {
+                contentOnly: true
+            });
+        }
     }
 }
 
@@ -2994,9 +3044,14 @@ function handleIf(str, ifBlock) {
     const expressionEnd = withTrailingPropertyAccess(str.original, ifBlock.expression.end);
     const end = str.original.indexOf('}', expressionEnd);
     str.overwrite(expressionEnd, end + 1, '){');
-    // {/if} -> }
     const endif = str.original.lastIndexOf('{', ifBlock.end - 1);
-    str.overwrite(endif, ifBlock.end, '}');
+    if (isImplicitlyClosedBlock(endif, ifBlock)) {
+        str.prependLeft(ifBlock.end, '}');
+    }
+    else {
+        // {/if} -> }
+        str.overwrite(endif, ifBlock.end, '}');
+    }
 }
 /**
  * {:else}   --->   } else {
@@ -3026,7 +3081,9 @@ function handleKey(str, keyBlock) {
     str.overwrite(expressionEnd, end + 1, '; ');
     // {/key}   ->
     const endKey = str.original.lastIndexOf('{', keyBlock.end - 1);
-    str.overwrite(endKey, keyBlock.end, '', { contentOnly: true });
+    if (!isImplicitlyClosedBlock(endKey, keyBlock)) {
+        str.overwrite(endKey, keyBlock.end, '', { contentOnly: true });
+    }
 }
 
 /**
@@ -3224,9 +3281,14 @@ function handleSnippet(str, snippetBlock, component) {
     const afterSnippet = isImplicitProp
         ? `};return __sveltets_2_any(0)}`
         : `};return __sveltets_2_any(0)};`;
-    str.overwrite(endSnippet, snippetBlock.end, afterSnippet, {
-        contentOnly: true
-    });
+    if (isImplicitlyClosedBlock(endSnippet, snippetBlock)) {
+        str.prependLeft(snippetBlock.end, afterSnippet);
+    }
+    else {
+        str.overwrite(endSnippet, snippetBlock.end, afterSnippet, {
+            contentOnly: true
+        });
+    }
     const lastParameter = (_a = snippetBlock.parameters) === null || _a === void 0 ? void 0 : _a.at(-1);
     const startEnd = str.original.indexOf('}', (_d = (_c = (_b = lastParameter === null || lastParameter === void 0 ? void 0 : lastParameter.typeAnnotation) === null || _b === void 0 ? void 0 : _b.end) !== null && _c !== void 0 ? _c : lastParameter === null || lastParameter === void 0 ? void 0 : lastParameter.end) !== null && _d !== void 0 ? _d : snippetBlock.expression.end) + 1;
     let parameters;
@@ -3239,7 +3301,22 @@ function handleSnippet(str, snippetBlock, component) {
     // inner async function for potential #await blocks
     const afterParameters = ` => { async ()${IGNORE_POSITION_COMMENT} => {`;
     if (isImplicitProp) {
-        str.overwrite(snippetBlock.start, snippetBlock.expression.start, '', { contentOnly: true });
+        /** Can happen in loose parsing mode, e.g. code is currently `{#snippet }` */
+        const emptyId = snippetBlock.expression.start === snippetBlock.expression.end;
+        if (emptyId) {
+            // Give intellisense a way to map into the right position for implicit prop completion
+            str.overwrite(snippetBlock.start, snippetBlock.expression.start - 1, '', {
+                contentOnly: true
+            });
+            str.overwrite(snippetBlock.expression.start - 1, snippetBlock.expression.start, ' ', {
+                contentOnly: true
+            });
+        }
+        else {
+            str.overwrite(snippetBlock.start, snippetBlock.expression.start, '', {
+                contentOnly: true
+            });
+        }
         const transforms = ['('];
         if (parameters) {
             transforms.push(parameters);
@@ -3255,10 +3332,10 @@ function handleSnippet(str, snippetBlock, component) {
         transforms.push(')' + afterParameters);
         transforms.push([startEnd, snippetBlock.end]);
         if (component instanceof InlineComponent) {
-            component.addImplicitSnippetProp([snippetBlock.expression.start, snippetBlock.expression.end], transforms);
+            component.addImplicitSnippetProp([snippetBlock.expression.start - (emptyId ? 1 : 0), snippetBlock.expression.end], transforms);
         }
         else {
-            component.addAttribute([[snippetBlock.expression.start, snippetBlock.expression.end]], transforms);
+            component.addAttribute([[snippetBlock.expression.start - (emptyId ? 1 : 0), snippetBlock.expression.end]], transforms);
         }
     }
     else {
@@ -3273,7 +3350,7 @@ function handleSnippet(str, snippetBlock, component) {
         }
         transforms.push(')', surroundWithIgnoreComments(`: ReturnType<import('svelte').Snippet>`), // shows up nicely preserved on hover, other alternatives don't
         afterParameters);
-        transform(str, snippetBlock.start, startEnd, startEnd, transforms);
+        transform(str, snippetBlock.start, startEnd, transforms);
     }
 }
 function handleImplicitChildren(componentNode, component) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "svelte2tsx",
-  "version": "0.7.29",
+  "version": "0.7.31",
   "description": "Convert Svelte components to TSX for type checking",
   "author": "David Pershouse",
   "license": "MIT",