svelte2tsx 0.4.13 → 0.5.2

package/index.js

@@ -1137,7 +1137,7 @@ function parseAttributes(str, start) {
     });
     return attrs;
 }
-function extractTag(htmlx, tag) {
+function extractTag(htmlx, tag, useNewTransformation) {
     const exp = new RegExp(`(<!--[^]*?-->)|(<${tag}([\\S\\s]*?)>)([\\S\\s]*?)<\\/${tag}>`, 'g');
     const matches = [];
     let match = null;
@@ -1146,10 +1146,16 @@ function extractTag(htmlx, tag) {
             // Tag is inside comment
             continue;
         }
-        const content = match[4];
+        let content = match[4];
         if (!content) {
-            // Self-closing/empty tags don't need replacement
-            continue;
+            if (useNewTransformation) {
+                // Keep tag and transform it properly by removing it
+                content = '';
+            }
+            else {
+                // Self-closing/empty tags don't need replacement
+                continue;
+            }
         }
         const start = match.index + match[2].length;
         const end = start + content.length;
@@ -1172,8 +1178,11 @@ function extractTag(htmlx, tag) {
     }
     return matches;
 }
-function findVerbatimElements(htmlx) {
-    return [...extractTag(htmlx, 'script'), ...extractTag(htmlx, 'style')];
+function findVerbatimElements(htmlx, useNewTransformation) {
+    return [
+        ...extractTag(htmlx, 'script', useNewTransformation),
+        ...extractTag(htmlx, 'style', useNewTransformation)
+    ];
 }
 function blankVerbatimContent(htmlx, verbatimElements) {
     let output = htmlx;
@@ -1196,7 +1205,7 @@ function blankVerbatimContent(htmlx, verbatimElements) {
 function parseHtmlx(htmlx, options) {
     //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);
+    const verbatimElements = findVerbatimElements(htmlx, options === null || options === void 0 ? void 0 : options.useNewTransformation);
     const deconstructed = blankVerbatimContent(htmlx, verbatimElements);
     //extract the html content parsed as htmlx this excludes our script and style tags
     const parsingCode = (options === null || options === void 0 ? void 0 : options.emitOnTemplateError)
@@ -1574,7 +1583,7 @@ function getInstanceTypeForDefaultSlot(node, originalStr, replacedPropsPrefix) {
     const propsStr = getNameValuePairsFromAttributes(node, originalStr)
         .map(({ name, value, identifier, complexExpression }) => {
         if (complexExpression || lets.has(identifier)) {
-            const replacement = replacedPropsPrefix + sanitizePropName(name);
+            const replacement = replacedPropsPrefix + sanitizePropName$1(name);
             shadowedProps.push({ name, value, replacement });
             return `'${name}':${replacement}`;
         }
@@ -1632,7 +1641,7 @@ function getNameValuePairsFromAttributes(node, originalStr) {
         return { name, value: `\`${value}\`` };
     });
 }
-function sanitizePropName(name) {
+function sanitizePropName$1(name) {
     return name
         .split('')
         .map((char) => (/[0-9A-Za-z$_]/.test(char) ? char : '_'))
@@ -1677,11 +1686,26 @@ function usesLet(node) {
     var _a;
     return (_a = node.attributes) === null || _a === void 0 ? void 0 : _a.some((attr) => attr.type === 'Let');
 }
+function buildTemplateString(attr, str, htmlx, leadingOverride, trailingOverride, overrideStart) {
+    overrideStart = overrideStart !== null && overrideStart !== void 0 ? overrideStart : htmlx.lastIndexOf('=', attr.value[0].start);
+    str.overwrite(overrideStart, attr.value[0].start, leadingOverride);
+    for (const n of attr.value) {
+        if (n.type == 'MustacheTag') {
+            str.appendRight(n.start, '$');
+        }
+    }
+    if (isQuote(htmlx[attr.end - 1])) {
+        str.overwrite(attr.end - 1, attr.end, trailingOverride);
+    }
+    else {
+        str.appendLeft(attr.end, trailingOverride);
+    }
+}
 
 /**
  * use:xxx={params}   --->    {...__sveltets_1_ensureAction(xxx(__sveltets_1_mapElementTag('ParentNodeName'),(params)))}
  */
-function handleActionDirective(htmlx, str, attr, parent) {
+function handleActionDirective$1(htmlx, str, attr, parent) {
     str.overwrite(attr.start, attr.start + 'use:'.length, '{...__sveltets_1_ensureAction(');
     const name = parent.name === 'svelte:body' ? 'body' : parent.name;
     if (!attr.expression) {
@@ -1699,7 +1723,7 @@ function handleActionDirective(htmlx, str, attr, parent) {
 /**
  * animate:xxx(yyy)   --->   {...__sveltets_1_ensureAnimation(xxx(__sveltets_1_mapElementTag('..'),__sveltets_1_AnimationMove,(yyy)))}
  */
-function handleAnimateDirective(htmlx, str, attr, parent) {
+function handleAnimateDirective$1(htmlx, str, attr, parent) {
     str.overwrite(attr.start, htmlx.indexOf(':', attr.start) + 1, '{...__sveltets_1_ensureAnimation(');
     const nodeType = `__sveltets_1_mapElementTag('${parent.name}')`;
     if (!attr.expression) {
@@ -1713,12 +1737,12 @@ function handleAnimateDirective(htmlx, str, attr, parent) {
     }
 }
 
-var svgAttributes = 'accent-height accumulate additive alignment-baseline allowReorder alphabetic amplitude arabic-form ascent attributeName attributeType autoReverse azimuth baseFrequency baseline-shift baseProfile bbox begin bias by calcMode cap-height class clip clipPathUnits clip-path clip-rule color color-interpolation color-interpolation-filters color-profile color-rendering contentScriptType contentStyleType cursor cx cy d decelerate descent diffuseConstant direction display divisor dominant-baseline dur dx dy edgeMode elevation enable-background end exponent externalResourcesRequired fill fill-opacity fill-rule filter filterRes filterUnits flood-color flood-opacity font-family font-size font-size-adjust font-stretch font-style font-variant font-weight format from fr fx fy g1 g2 glyph-name glyph-orientation-horizontal glyph-orientation-vertical glyphRef gradientTransform gradientUnits hanging height href horiz-adv-x horiz-origin-x id ideographic image-rendering in in2 intercept k k1 k2 k3 k4 kernelMatrix kernelUnitLength kerning keyPoints keySplines keyTimes lang lengthAdjust letter-spacing lighting-color limitingConeAngle local marker-end marker-mid marker-start markerHeight markerUnits markerWidth mask maskContentUnits maskUnits mathematical max media method min mode name numOctaves offset onabort onactivate onbegin onclick onend onerror onfocusin onfocusout onload onmousedown onmousemove onmouseout onmouseover onmouseup onrepeat onresize onscroll onunload opacity operator order orient orientation origin overflow overline-position overline-thickness panose-1 paint-order pathLength patternContentUnits patternTransform patternUnits pointer-events points pointsAtX pointsAtY pointsAtZ preserveAlpha preserveAspectRatio primitiveUnits r radius refX refY rendering-intent repeatCount repeatDur requiredExtensions requiredFeatures restart result rotate rx ry scale seed shape-rendering slope spacing specularConstant specularExponent speed spreadMethod startOffset stdDeviation stemh stemv stitchTiles stop-color stop-opacity strikethrough-position strikethrough-thickness string stroke stroke-dasharray stroke-dashoffset stroke-linecap stroke-linejoin stroke-miterlimit stroke-opacity stroke-width style surfaceScale systemLanguage tabindex tableValues target targetX targetY text-anchor text-decoration text-rendering textLength to transform type u1 u2 underline-position underline-thickness unicode unicode-bidi unicode-range units-per-em v-alphabetic v-hanging v-ideographic v-mathematical values version vert-adv-y vert-origin-x vert-origin-y viewBox viewTarget visibility width widths word-spacing writing-mode x x-height x1 x2 xChannelSelector xlink:actuate xlink:arcrole xlink:href xlink:role xlink:show xlink:title xlink:type xml:base xml:lang xml:space y y1 y2 yChannelSelector z zoomAndPan'.split(' ');
+var svgAttributes$1 = 'accent-height accumulate additive alignment-baseline allowReorder alphabetic amplitude arabic-form ascent attributeName attributeType autoReverse azimuth baseFrequency baseline-shift baseProfile bbox begin bias by calcMode cap-height class clip clipPathUnits clip-path clip-rule color color-interpolation color-interpolation-filters color-profile color-rendering contentScriptType contentStyleType cursor cx cy d decelerate descent diffuseConstant direction display divisor dominant-baseline dur dx dy edgeMode elevation enable-background end exponent externalResourcesRequired fill fill-opacity fill-rule filter filterRes filterUnits flood-color flood-opacity font-family font-size font-size-adjust font-stretch font-style font-variant font-weight format from fr fx fy g1 g2 glyph-name glyph-orientation-horizontal glyph-orientation-vertical glyphRef gradientTransform gradientUnits hanging height href horiz-adv-x horiz-origin-x id ideographic image-rendering in in2 intercept k k1 k2 k3 k4 kernelMatrix kernelUnitLength kerning keyPoints keySplines keyTimes lang lengthAdjust letter-spacing lighting-color limitingConeAngle local marker-end marker-mid marker-start markerHeight markerUnits markerWidth mask maskContentUnits maskUnits mathematical max media method min mode name numOctaves offset onabort onactivate onbegin onclick onend onerror onfocusin onfocusout onload onmousedown onmousemove onmouseout onmouseover onmouseup onrepeat onresize onscroll onunload opacity operator order orient orientation origin overflow overline-position overline-thickness panose-1 paint-order pathLength patternContentUnits patternTransform patternUnits pointer-events points pointsAtX pointsAtY pointsAtZ preserveAlpha preserveAspectRatio primitiveUnits r radius refX refY rendering-intent repeatCount repeatDur requiredExtensions requiredFeatures restart result rotate rx ry scale seed shape-rendering slope spacing specularConstant specularExponent speed spreadMethod startOffset stdDeviation stemh stemv stitchTiles stop-color stop-opacity strikethrough-position strikethrough-thickness string stroke stroke-dasharray stroke-dashoffset stroke-linecap stroke-linejoin stroke-miterlimit stroke-opacity stroke-width style surfaceScale systemLanguage tabindex tableValues target targetX targetY text-anchor text-decoration text-rendering textLength to transform type u1 u2 underline-position underline-thickness unicode unicode-bidi unicode-range units-per-em v-alphabetic v-hanging v-ideographic v-mathematical values version vert-adv-y vert-origin-x vert-origin-y viewBox viewTarget visibility width widths word-spacing writing-mode x x-height x1 x2 xChannelSelector xlink:actuate xlink:arcrole xlink:href xlink:role xlink:show xlink:title xlink:type xml:base xml:lang xml:space y y1 y2 yChannelSelector z zoomAndPan'.split(' ');
 
 /**
  * List taken from `svelte-jsx.d.ts` by searching for all attributes of type number
  */
-const numberOnlyAttributes = new Set([
+const numberOnlyAttributes$1 = new Set([
     'cols',
     'colspan',
     'currenttime',
@@ -1746,7 +1770,7 @@ const numberOnlyAttributes = new Set([
  * - lowercase DOM attributes
  * - multi-value handling
  */
-function handleAttribute(htmlx, str, attr, parent, preserveCase) {
+function handleAttribute$1(htmlx, str, attr, parent, preserveCase) {
     var _a, _b, _c;
     const shouldApplySlotCheck = parent.type === 'Slot' && attr.name !== 'name';
     const slotName = shouldApplySlotCheck
@@ -1755,7 +1779,7 @@ function handleAttribute(htmlx, str, attr, parent, preserveCase) {
     const ensureSlotStr = `__sveltets_ensureSlot("${slotName}","${attr.name}",`;
     let transformedFromDirectiveOrNamespace = false;
     const transformAttributeCase = (name) => {
-        if (!preserveCase && !svgAttributes.find((x) => x == name)) {
+        if (!preserveCase && !svgAttributes$1.find((x) => x == name)) {
             return name.toLowerCase();
         }
         else {
@@ -1835,7 +1859,7 @@ function handleAttribute(htmlx, str, attr, parent, preserveCase) {
                 htmlx.lastIndexOf("}'", attrVal.end) === attrVal.end - 1;
             const needsNumberConversion = !hasBrackets &&
                 parent.type === 'Element' &&
-                numberOnlyAttributes.has(attr.name.toLowerCase()) &&
+                numberOnlyAttributes$1.has(attr.name.toLowerCase()) &&
                 !isNaN(attrVal.data);
             if (needsNumberConversion) {
                 const begin = '{' + (shouldApplySlotCheck ? ensureSlotStr : '');
@@ -1879,21 +1903,6 @@ function handleAttribute(htmlx, str, attr, parent, preserveCase) {
     // We have multiple attribute values, so we build a template string out of them.
     buildTemplateString(attr, str, htmlx, shouldApplySlotCheck ? `={${ensureSlotStr}\`` : '={`', shouldApplySlotCheck ? '`)}' : '`}');
 }
-function buildTemplateString(attr, str, htmlx, leadingOverride, trailingOverride) {
-    const equals = htmlx.lastIndexOf('=', attr.value[0].start);
-    str.overwrite(equals, attr.value[0].start, leadingOverride);
-    for (const n of attr.value) {
-        if (n.type == 'MustacheTag') {
-            str.appendRight(n.start, '$');
-        }
-    }
-    if (isQuote(htmlx[attr.end - 1])) {
-        str.overwrite(attr.end - 1, attr.end, trailingOverride);
-    }
-    else {
-        str.appendLeft(attr.end, trailingOverride);
-    }
-}
 function sanitizeLeadingChars(attrName) {
     let sanitizedName = '';
     for (let i = 0; i < attrName.length; i++) {
@@ -1908,10 +1917,28 @@ function sanitizeLeadingChars(attrName) {
     return sanitizedName;
 }
 
+function extractConstTags(children) {
+    const tags = [];
+    for (const child of children) {
+        if (child.type === 'ConstTag') {
+            const constTag = child;
+            tags.push((insertionPoint, str) => {
+                str.appendRight(constTag.expression.left.start, 'const ');
+                str.move(constTag.expression.left.start, constTag.expression.right.end, insertionPoint);
+                str.appendLeft(constTag.expression.right.end, ';');
+                str.overwrite(constTag.start + 1, constTag.expression.left.start - 1, '', {
+                    contentOnly: true
+                });
+            });
+        }
+    }
+    return tags;
+}
+
 /**
  * Transform {#await ...} into something JSX understands
  */
-function handleAwait(htmlx, str, awaitBlock, ifScope, templateScopeManager) {
+function handleAwait$1(htmlx, str, awaitBlock, ifScope, templateScopeManager) {
     // {#await somePromise then value} ->
     // {() => {let _$$p = (somePromise);
     let ifCondition = ifScope.getFullCondition();
@@ -1973,16 +2000,24 @@ function handleAwaitThen(awaitBlock, htmlx, str, ifScope) {
     }
     if (awaitBlock.value) {
         str.overwrite(thenStart, awaitBlock.value.start, '__sveltets_1_awaitThen(_$$p, (');
-        str.overwrite(awaitBlock.value.end, thenEnd, `) => {${ifScope.addPossibleIfCondition()}<>`);
+        str.overwrite(awaitBlock.value.end, thenEnd, ') => {');
+        extractConstTags(awaitBlock.then.children).forEach((insertion) => {
+            insertion(thenEnd, str);
+        });
+        str.appendRight(thenEnd, `${ifScope.addPossibleIfCondition()}<>`);
     }
     else {
-        const awaitThenFn = `__sveltets_1_awaitThen(_$$p, () => {${ifScope.addPossibleIfCondition()}<>`; // eslint-disable-line
+        const awaitThenFn = '__sveltets_1_awaitThen(_$$p, () => {';
         if (thenStart === thenEnd) {
             str.appendLeft(thenStart, awaitThenFn);
         }
         else {
             str.overwrite(thenStart, thenEnd, awaitThenFn);
         }
+        extractConstTags(awaitBlock.then.children).forEach((insertion) => {
+            insertion(thenEnd, str);
+        });
+        str.appendRight(thenEnd, `${ifScope.addPossibleIfCondition()}<>`); // eslint-disable-line
     }
 }
 function handleAwaitCatch(awaitBlock, htmlx, str, ifScope) {
@@ -1994,12 +2029,20 @@ function handleAwaitCatch(awaitBlock, htmlx, str, ifScope) {
             // {#await ... catch ...}
             const catchBegin = htmlx.indexOf('}', awaitBlock.error.end) + 1;
             str.overwrite(awaitBlock.expression.end, awaitBlock.error.start, '); __sveltets_1_awaitThen(_$$p, () => {}, (');
-            str.overwrite(awaitBlock.error.end, catchBegin, ') => {<>');
+            str.overwrite(awaitBlock.error.end, catchBegin, ') => {');
+            extractConstTags(awaitBlock.catch.children).forEach((insertion) => {
+                insertion(catchBegin, str);
+            });
+            str.appendRight(catchBegin, '<>');
         }
         else {
             // {#await ... catch}
             const catchBegin = htmlx.indexOf('}', awaitBlock.expression.end) + 1;
-            str.overwrite(awaitBlock.expression.end, catchBegin, '); __sveltets_1_awaitThen(_$$p, () => {}, () => {<>');
+            str.overwrite(awaitBlock.expression.end, catchBegin, '); __sveltets_1_awaitThen(_$$p, () => {}, () => {');
+            extractConstTags(awaitBlock.catch.children).forEach((insertion) => {
+                insertion(catchBegin, str);
+            });
+            str.appendRight(catchBegin, '<>');
         }
     }
     else {
@@ -2012,11 +2055,15 @@ function handleAwaitCatch(awaitBlock, htmlx, str, ifScope) {
         const errorEnd = awaitBlock.error ? awaitBlock.error.end : errorStart;
         const catchEnd = htmlx.indexOf('}', errorEnd) + 1;
         str.overwrite(catchStart, errorStart, '</>}, (');
-        str.overwrite(errorEnd, catchEnd, `) => {${ifScope.addPossibleIfCondition()}<>`);
+        str.overwrite(errorEnd, catchEnd, ') => {');
+        extractConstTags(awaitBlock.catch.children).forEach((insertion) => {
+            insertion(catchEnd, str);
+        });
+        str.appendRight(catchEnd, `${ifScope.addPossibleIfCondition()}<>`);
     }
 }
 
-const oneWayBindingAttributes = new Map(['clientWidth', 'clientHeight', 'offsetWidth', 'offsetHeight']
+const oneWayBindingAttributes$1 = new Map(['clientWidth', 'clientHeight', 'offsetWidth', 'offsetHeight']
     .map((e) => [e, 'HTMLDivElement'])
     .concat(['duration', 'buffered', 'seekable', 'seeking', 'played', 'ended'].map((e) => [
     e,
@@ -2026,11 +2073,11 @@ const oneWayBindingAttributes = new Map(['clientWidth', 'clientHeight', 'offsetW
  * List of all binding names that are transformed to sth like `binding = variable`.
  * This applies to readonly bindings and the this binding.
  */
-const assignmentBindings = new Set([...oneWayBindingAttributes.keys(), 'this']);
+const assignmentBindings = new Set([...oneWayBindingAttributes$1.keys(), 'this']);
 /**
  * Transform bind:xxx into something that conforms to JSX
  */
-function handleBinding(htmlx, str, attr, el) {
+function handleBinding$1(htmlx, str, attr, el) {
     //bind group on input
     if (attr.name == 'group' && el.name == 'input') {
         str.remove(attr.start, attr.expression.start);
@@ -2069,16 +2116,16 @@ function handleBinding(htmlx, str, attr, el) {
         }
     }
     //one way binding
-    if (oneWayBindingAttributes.has(attr.name) && el.type === 'Element') {
+    if (oneWayBindingAttributes$1.has(attr.name) && el.type === 'Element') {
         str.remove(attr.start, attr.expression.start);
         str.appendLeft(attr.expression.start, '{...__sveltets_1_empty(');
         if (isShortHandAttribute(attr)) {
             // eslint-disable-next-line max-len
-            str.appendLeft(attr.end, `=__sveltets_1_instanceOf(${oneWayBindingAttributes.get(attr.name)}).${attr.name})}`);
+            str.appendLeft(attr.end, `=__sveltets_1_instanceOf(${oneWayBindingAttributes$1.get(attr.name)}).${attr.name})}`);
         }
         else {
             // eslint-disable-next-line max-len
-            str.overwrite(attr.expression.end, attr.end, `=__sveltets_1_instanceOf(${oneWayBindingAttributes.get(attr.name)}).${attr.name})}`);
+            str.overwrite(attr.expression.end, attr.end, `=__sveltets_1_instanceOf(${oneWayBindingAttributes$1.get(attr.name)}).${attr.name})}`);
         }
         return;
     }
@@ -2100,7 +2147,7 @@ function handleBinding(htmlx, str, attr, el) {
 /**
  * class:xx={yyy}   --->   {...__sveltets_1_ensureType(Boolean, !!(yyy))}
  */
-function handleClassDirective(str, attr) {
+function handleClassDirective$1(str, attr) {
     str.overwrite(attr.start, attr.expression.start, '{...__sveltets_1_ensureType(Boolean, !!(');
     const endBrackets = '))}';
     if (attr.end !== attr.expression.end) {
@@ -2114,20 +2161,29 @@ function handleClassDirective(str, attr) {
 /**
  * Removes comment
  */
-function handleComment(str, node) {
+function handleComment$1(str, node) {
     str.overwrite(node.start, node.end, '', { contentOnly: true });
 }
 
 const shadowedPropsSymbol = Symbol('shadowedProps');
 /**
- * Transforms the usage of a slot (let:xx)
+ * Transforms the usage of a slot (slot="xxx")
+ * - transforms let:xx, {@const xx}
  */
 function handleSlot(htmlx, str, slotEl, component, slotName, ifScope, templateScope) {
     var _a;
     //collect "let" definitions
     const slotElIsComponent = slotEl === component;
-    let hasMoved = false;
+    let hasMovedLet = false;
     let slotDefInsertionPoint;
+    // lazily calculate insertion point only when needed
+    const calculateSlotDefInsertionPoint = () => {
+        slotDefInsertionPoint =
+            slotDefInsertionPoint ||
+                (slotElIsComponent
+                    ? htmlx.lastIndexOf('>', slotEl.children[0].start) + 1
+                    : slotEl.start);
+    };
     for (const attr of slotEl.attributes) {
         if (attr.type != 'Let') {
             continue;
@@ -2137,19 +2193,15 @@ function handleSlot(htmlx, str, slotEl, component, slotName, ifScope, templateSc
             str.remove(attr.start, attr.end);
             continue;
         }
-        slotDefInsertionPoint =
-            slotDefInsertionPoint ||
-                (slotElIsComponent
-                    ? htmlx.lastIndexOf('>', slotEl.children[0].start) + 1
-                    : slotEl.start);
+        calculateSlotDefInsertionPoint();
         str.move(attr.start, attr.end, slotDefInsertionPoint);
         //remove let:
         str.remove(attr.start, attr.start + 'let:'.length);
-        if (hasMoved) {
+        if (hasMovedLet) {
             str.appendRight(attr.start + 'let:'.length, ', ');
         }
         templateScope.inits.add(((_a = attr.expression) === null || _a === void 0 ? void 0 : _a.name) || attr.name);
-        hasMoved = true;
+        hasMovedLet = true;
         if (attr.expression) {
             //overwrite the = as a :
             const equalSign = htmlx.lastIndexOf('=', attr.expression.start);
@@ -2158,13 +2210,34 @@ function handleSlot(htmlx, str, slotEl, component, slotName, ifScope, templateSc
             str.remove(attr.expression.end, attr.end);
         }
     }
-    if (!hasMoved) {
+    const hasConstTag = slotEl.children.some((child) => child.type === 'ConstTag');
+    if (!hasMovedLet && !hasConstTag) {
         return;
     }
+    calculateSlotDefInsertionPoint();
     const { singleSlotDef, constRedeclares } = getSingleSlotDefAndConstsRedeclaration(component, slotName, str.original, ifScope, slotElIsComponent);
     const prefix = constRedeclares ? `() => {${constRedeclares}` : '';
-    str.appendLeft(slotDefInsertionPoint, `{${prefix}() => { let {`);
-    str.appendRight(slotDefInsertionPoint, `} = ${singleSlotDef}` + `;${ifScope.addPossibleIfCondition()}<>`);
+    str.appendLeft(slotDefInsertionPoint, `{${prefix}() => { `);
+    if (hasMovedLet) {
+        str.appendLeft(slotDefInsertionPoint, 'let {');
+        str.appendRight(slotDefInsertionPoint, `} = ${singleSlotDef};`);
+    }
+    if (hasConstTag) {
+        // unable to move multiple codes to the same place while insert code in between
+        // NOTE: cheat by move to `slotDefInsertionPoint + 1` position
+        // then copy the character in str[slotDefInsertionPoint...slotDefInsertionPoint + 1] to the back
+        // and comment out the original str[slotDefInsertionPoint...slotDefInsertionPoint + 1]
+        str.appendRight(slotDefInsertionPoint, '/*');
+        extractConstTags(slotEl.children).forEach((insertion) => {
+            insertion(slotDefInsertionPoint + 1, str);
+        });
+        str.appendRight(slotDefInsertionPoint + 1, `${ifScope.addPossibleIfCondition()}<>`);
+        str.appendRight(slotDefInsertionPoint + 1, str.original.slice(slotDefInsertionPoint, slotDefInsertionPoint + 1));
+        str.appendLeft(slotDefInsertionPoint + 1, '*/');
+    }
+    else {
+        str.appendRight(slotDefInsertionPoint, `${ifScope.addPossibleIfCondition()}<>`);
+    }
     const closeSlotDefInsertionPoint = slotElIsComponent
         ? htmlx.lastIndexOf('<', slotEl.end - 1)
         : slotEl.end;
@@ -2219,7 +2292,7 @@ function handleComponent(htmlx, str, el, parent, ifScope, templateScope) {
  * {@debug a, b}	--->   {a}{b}
  * tsx won't accept commas, must split
  */
-function handleDebug(_htmlx, str, debugBlock) {
+function handleDebug$1(_htmlx, str, debugBlock) {
     let cursor = debugBlock.start;
     for (const identifier of debugBlock.identifiers) {
         str.remove(cursor, identifier.start);
@@ -2233,7 +2306,7 @@ function handleDebug(_htmlx, str, debugBlock) {
 /**
  * Transform each block into something JSX can understand.
  */
-function handleEach(htmlx, str, eachBlock, ifScope) {
+function handleEach$1(htmlx, str, eachBlock, ifScope) {
     // {#each items as item,i (key)} ->
     // {__sveltets_1_each(items, (item,i) => (key) && (possible if expression &&) <>
     const constRedeclares = ifScope.getConstDeclaration();
@@ -2250,7 +2323,11 @@ function handleEach(htmlx, str, eachBlock, ifScope) {
         const idxLoc = htmlx.indexOf(eachBlock.index, contextEnd);
         contextEnd = idxLoc + eachBlock.index.length;
     }
-    str.prependLeft(contextEnd, ') =>');
+    const constTags = extractConstTags(eachBlock.children);
+    str.prependLeft(contextEnd, ') =>' + (constTags.length ? ' {' : ''));
+    constTags.forEach((insertion) => {
+        insertion(contextEnd, str);
+    });
     if (eachBlock.key) {
         const endEachStart = htmlx.indexOf('}', eachBlock.key.end);
         str.overwrite(endEachStart, endEachStart + 1, ` && ${ifScope.addPossibleIfCondition()}<>`);
@@ -2260,8 +2337,8 @@ function handleEach(htmlx, str, eachBlock, ifScope) {
         str.overwrite(endEachStart, endEachStart + 1, ` ${ifScope.addPossibleIfCondition()}<>`);
     }
     const endEach = htmlx.lastIndexOf('{', eachBlock.end - 1);
-    const suffix = constRedeclares ? '</>)}}}' : '</>)}';
-    // {/each} -> </>)} or {:else} -> </>)}
+    const suffix = '</>' + (constTags.length ? '}' : '') + (constRedeclares ? ')}}}' : ')}');
+    // {/each} -> </>})} or {:else} -> </>})}
     if (eachBlock.else) {
         const elseEnd = htmlx.lastIndexOf('}', eachBlock.else.start);
         const elseStart = htmlx.lastIndexOf('{', elseEnd);
@@ -2299,7 +2376,7 @@ function handleElement(htmlx, str, node, parent, ifScope, templateScope) {
  * - For DOM elements: ---> onxxx={yyy}
  * - For Svelte components/special elements: ---> {__sveltets_1_instanceOf(..ComponentType..).$on("xxx", yyy)}
  */
-function handleEventHandler(htmlx, str, attr, parent) {
+function handleEventHandler$1(htmlx, str, attr, parent) {
     const jsxEventName = attr.name;
     if (['Element', 'Window', 'Body'].includes(parent.type) /*&& KnownEvents.indexOf('on'+jsxEventName) >= 0*/) {
         if (attr.expression) {
@@ -2338,7 +2415,7 @@ function handleEventHandler(htmlx, str, attr, parent) {
 /**
  * {# if ...}...{/if}   --->   {() => {if(...){<>...</>}}}
  */
-function handleIf(htmlx, str, ifBlock, ifScope) {
+function handleIf$1(htmlx, str, ifBlock, ifScope) {
     const endIf = htmlx.lastIndexOf('{', ifBlock.end - 1);
     if (ifBlock.elseif) {
         // {:else if expr}  ->  : (expr) ? <>
@@ -2369,7 +2446,7 @@ function handleIf(htmlx, str, ifBlock, ifScope) {
 /**
  * {:else}   --->   </> : <>
  */
-function handleElse(htmlx, str, elseBlock, parent, ifScope) {
+function handleElse$1(htmlx, str, elseBlock, parent, ifScope) {
     var _a, _b;
     if (parent.type !== 'IfBlock' ||
         (((_a = elseBlock.children[0]) === null || _a === void 0 ? void 0 : _a.type) === 'IfBlock' && ((_b = elseBlock.children[0]) === null || _b === void 0 ? void 0 : _b.elseif))) {
@@ -2661,7 +2738,7 @@ class IfScope {
 /**
  * {#key expr}content{/key}   --->   {expr} content
  */
-function handleKey(htmlx, str, keyBlock) {
+function handleKey$1(htmlx, str, keyBlock) {
     // {#key expr}   ->   {expr}
     str.overwrite(keyBlock.start, keyBlock.expression.start, '{');
     const end = htmlx.indexOf('}', keyBlock.expression.end);
@@ -2674,11 +2751,45 @@ function handleKey(htmlx, str, keyBlock) {
 /**
  * {@html ...}   --->   {...}
  */
-function handleRawHtml(htmlx, str, rawBlock) {
+function handleRawHtml$1(htmlx, str, rawBlock) {
     const tokenStart = htmlx.indexOf('@html', rawBlock.start);
     str.remove(tokenStart, tokenStart + '@html'.length);
 }
 
+/**
+ * style:xx         --->  __sveltets_1_ensureType(String, Number, xx);
+ * style:xx={yy}    --->  __sveltets_1_ensureType(String, Number, yy);
+ * style:xx="yy"    --->  __sveltets_1_ensureType(String, Number, "yy");
+ * style:xx="a{b}"  --->  __sveltets_1_ensureType(String, Number, `a${b}`);
+ */
+function handleStyleDirective$1(str, style) {
+    const htmlx = str.original;
+    if (style.value === true || style.value.length === 0) {
+        str.overwrite(style.start, htmlx.indexOf(':', style.start) + 1, '{...__sveltets_1_ensureType(String, Number, ');
+        str.appendLeft(style.end, ')}');
+        return;
+    }
+    if (style.value.length > 1) {
+        buildTemplateString(style, str, htmlx, '{...__sveltets_1_ensureType(String, Number, `', '`)}', style.start);
+        return;
+    }
+    const styleVal = style.value[0];
+    if (styleVal.type === 'Text') {
+        str.overwrite(style.start, styleVal.start, '{...__sveltets_1_ensureType(String, Number, "');
+        if (styleVal.end === style.end) {
+            str.appendLeft(style.end, '")}');
+        }
+        else {
+            str.overwrite(styleVal.end, style.end, '")}');
+        }
+    }
+    else {
+        // MustacheTag
+        str.overwrite(style.start, styleVal.start + 1, '{...__sveltets_1_ensureType(String, Number, ');
+        str.overwrite(styleVal.end - 1, style.end, ')}');
+    }
+}
+
 /**
  * `<svelte:window>...</svelte:window>`   ---->    `<sveltewindow>...</sveltewindow>`
  * (same for :head, :body, :options, :fragment)
@@ -2753,135 +2864,1558 @@ function extract_identifiers(param, nodes = []) {
 	return nodes;
 }
 
-class TemplateScope$1 {
-    constructor(parent) {
-        this.inits = new Set();
-        this.parent = parent;
+class TemplateScope$1 {
+    constructor(parent) {
+        this.inits = new Set();
+        this.parent = parent;
+    }
+    child() {
+        const child = new TemplateScope$1(this);
+        return child;
+    }
+}
+class TemplateScopeManager {
+    constructor() {
+        this.value = new TemplateScope$1();
+    }
+    eachEnter(node) {
+        this.value = this.value.child();
+        if (node.context) {
+            this.handleScope(node.context, node.children);
+        }
+        if (node.index) {
+            this.value.inits.add(node.index);
+        }
+    }
+    eachLeave(node) {
+        if (!node.else) {
+            this.value = this.value.parent;
+        }
+    }
+    awaitEnter(node) {
+        var _a;
+        this.value = this.value.child();
+        if (node.value) {
+            this.handleScope(node.value, (_a = node.then) === null || _a === void 0 ? void 0 : _a.children);
+        }
+        if (node.error) {
+            this.handleScope(node.error, []);
+        }
+    }
+    awaitPendingEnter(node, parent) {
+        if (node.skip || parent.type !== 'AwaitBlock') {
+            return;
+        }
+        // Reset inits, as pending can have no inits
+        this.value.inits.clear();
+    }
+    awaitThenEnter(node, parent) {
+        if (node.skip || parent.type !== 'AwaitBlock') {
+            return;
+        }
+        // Reset inits, this time only taking the then
+        // scope into account.
+        this.value.inits.clear();
+        if (parent.value) {
+            this.handleScope(parent.value, node.children);
+        }
+    }
+    awaitCatchEnter(node, parent) {
+        if (node.skip || parent.type !== 'AwaitBlock') {
+            return;
+        }
+        // Reset inits, this time only taking the error
+        // scope into account.
+        this.value.inits.clear();
+        if (parent.error) {
+            this.handleScope(parent.error, node.children);
+        }
+    }
+    awaitLeave() {
+        this.value = this.value.parent;
+    }
+    elseEnter(parent) {
+        if (parent.type === 'EachBlock') {
+            this.value = this.value.parent;
+        }
+    }
+    componentOrSlotTemplateOrElementEnter(node) {
+        var _a;
+        const hasConstTags = (_a = node.children) === null || _a === void 0 ? void 0 : _a.some((child) => child.type === 'ConstTag');
+        if (usesLet(node) || hasConstTags) {
+            this.value = this.value.child();
+            this.handleScope({}, node.children);
+        }
+    }
+    componentOrSlotTemplateOrElementLeave(node) {
+        if (usesLet(node)) {
+            this.value = this.value.parent;
+        }
+    }
+    handleScope(identifierDef, children) {
+        if (isIdentifier(identifierDef)) {
+            this.value.inits.add(identifierDef.name);
+        }
+        if (isDestructuringPatterns(identifierDef)) {
+            // the node object is returned as-it with no mutation
+            const identifiers = extract_identifiers(identifierDef);
+            identifiers.forEach((id) => this.value.inits.add(id.name));
+        }
+        if (children === null || children === void 0 ? void 0 : children.length) {
+            children.forEach((child) => {
+                if (child.type === 'ConstTag') {
+                    const identifiers = extract_identifiers(child.expression.left);
+                    identifiers.forEach((id) => this.value.inits.add(id.name));
+                }
+            });
+        }
+    }
+}
+
+function handleText$1(str, node) {
+    if (!node.data) {
+        return;
+    }
+    const needsRemoves = ['}', '>'];
+    for (const token of needsRemoves) {
+        let index = node.data.indexOf(token);
+        while (index >= 0) {
+            str.remove(index + node.start, index + node.start + 1);
+            index = node.data.indexOf(token, index + 1);
+        }
+    }
+}
+
+/**
+ * transition:xxx(yyy)   --->   {...__sveltets_1_ensureTransition(xxx(__sveltets_1_mapElementTag('..'),(yyy)))}
+ */
+function handleTransitionDirective$1(htmlx, str, attr, parent) {
+    str.overwrite(attr.start, htmlx.indexOf(':', attr.start) + 1, '{...__sveltets_1_ensureTransition(');
+    if (attr.modifiers.length) {
+        const local = htmlx.indexOf('|', attr.start);
+        str.remove(local, attr.expression ? attr.expression.start : attr.end);
+    }
+    const nodeType = `__sveltets_1_mapElementTag('${parent.name}')`;
+    if (!attr.expression) {
+        str.appendLeft(attr.end, `(${nodeType},{}))}`);
+        return;
+    }
+    str.overwrite(htmlx.indexOf(':', attr.start) + 1 + `${attr.name}`.length, attr.expression.start, `(${nodeType},(`);
+    str.appendLeft(attr.expression.end, ')))');
+    if (isQuote(htmlx[attr.end - 1])) {
+        str.remove(attr.end - 1, attr.end);
+    }
+}
+
+function stripDoctype$1(str) {
+    const regex = /<!doctype(.+?)>(\n)?/i;
+    const result = regex.exec(str.original);
+    if (result) {
+        str.remove(result.index, result.index + result[0].length);
+    }
+}
+/**
+ * Walks the HTMLx part of the Svelte component
+ * and converts it to JSX
+ */
+function convertHtmlxToJsx$1(str, ast, onWalk = null, onLeave = null, options = {}) {
+    const htmlx = str.original;
+    stripDoctype$1(str);
+    str.prepend('<>');
+    str.append('</>');
+    const templateScopeManager = new TemplateScopeManager();
+    let ifScope = new IfScope(templateScopeManager);
+    compiler.walk(ast, {
+        enter: (node, parent, prop, index) => {
+            try {
+                switch (node.type) {
+                    case 'IfBlock':
+                        handleIf$1(htmlx, str, node, ifScope);
+                        if (!node.elseif) {
+                            ifScope = ifScope.getChild();
+                        }
+                        break;
+                    case 'EachBlock':
+                        templateScopeManager.eachEnter(node);
+                        handleEach$1(htmlx, str, node, ifScope);
+                        break;
+                    case 'ElseBlock':
+                        templateScopeManager.elseEnter(parent);
+                        handleElse$1(htmlx, str, node, parent, ifScope);
+                        break;
+                    case 'AwaitBlock':
+                        handleAwait$1(htmlx, str, node, ifScope, templateScopeManager);
+                        break;
+                    case 'PendingBlock':
+                        templateScopeManager.awaitPendingEnter(node, parent);
+                        handleAwaitPending(parent, htmlx, str, ifScope);
+                        break;
+                    case 'ThenBlock':
+                        templateScopeManager.awaitThenEnter(node, parent);
+                        handleAwaitThen(parent, htmlx, str, ifScope);
+                        break;
+                    case 'CatchBlock':
+                        templateScopeManager.awaitCatchEnter(node, parent);
+                        handleAwaitCatch(parent, htmlx, str, ifScope);
+                        break;
+                    case 'KeyBlock':
+                        handleKey$1(htmlx, str, node);
+                        break;
+                    case 'RawMustacheTag':
+                        handleRawHtml$1(htmlx, str, node);
+                        break;
+                    case 'DebugTag':
+                        handleDebug$1(htmlx, str, node);
+                        break;
+                    case 'InlineComponent':
+                        templateScopeManager.componentOrSlotTemplateOrElementEnter(node);
+                        handleComponent(htmlx, str, node, parent, ifScope, templateScopeManager.value);
+                        break;
+                    case 'Element':
+                        templateScopeManager.componentOrSlotTemplateOrElementEnter(node);
+                        handleElement(htmlx, str, node, parent, ifScope, templateScopeManager.value);
+                        break;
+                    case 'Comment':
+                        handleComment$1(str, node);
+                        break;
+                    case 'Binding':
+                        handleBinding$1(htmlx, str, node, parent);
+                        break;
+                    case 'Class':
+                        handleClassDirective$1(str, node);
+                        break;
+                    case 'StyleDirective':
+                        handleStyleDirective$1(str, node);
+                        break;
+                    case 'Action':
+                        handleActionDirective$1(htmlx, str, node, parent);
+                        break;
+                    case 'Transition':
+                        handleTransitionDirective$1(htmlx, str, node, parent);
+                        break;
+                    case 'Animation':
+                        handleAnimateDirective$1(htmlx, str, node, parent);
+                        break;
+                    case 'Attribute':
+                        handleAttribute$1(htmlx, str, node, parent, options.preserveAttributeCase);
+                        break;
+                    case 'EventHandler':
+                        handleEventHandler$1(htmlx, str, node, parent);
+                        break;
+                    case 'Options':
+                        handleSvelteTag(htmlx, str, node);
+                        break;
+                    case 'Window':
+                        handleSvelteTag(htmlx, str, node);
+                        break;
+                    case 'Head':
+                        handleSvelteTag(htmlx, str, node);
+                        break;
+                    case 'Body':
+                        handleSvelteTag(htmlx, str, node);
+                        break;
+                    case 'SlotTemplate':
+                        handleSvelteTag(htmlx, str, node);
+                        templateScopeManager.componentOrSlotTemplateOrElementEnter(node);
+                        handleSlot(htmlx, str, node, parent, getSlotName(node) || 'default', ifScope, templateScopeManager.value);
+                        break;
+                    case 'Text':
+                        handleText$1(str, node);
+                        break;
+                }
+                if (onWalk) {
+                    onWalk(node, parent, prop, index);
+                }
+            }
+            catch (e) {
+                console.error('Error walking node ', node, e);
+                throw e;
+            }
+        },
+        leave: (node, parent, prop, index) => {
+            try {
+                switch (node.type) {
+                    case 'IfBlock':
+                        if (!node.elseif) {
+                            ifScope = ifScope.getParent();
+                        }
+                        break;
+                    case 'EachBlock':
+                        templateScopeManager.eachLeave(node);
+                        break;
+                    case 'AwaitBlock':
+                        templateScopeManager.awaitLeave();
+                        break;
+                    case 'InlineComponent':
+                    case 'Element':
+                    case 'SlotTemplate':
+                        templateScopeManager.componentOrSlotTemplateOrElementLeave(node);
+                        break;
+                }
+                if (onLeave) {
+                    onLeave(node, parent, prop, index);
+                }
+            }
+            catch (e) {
+                console.error('Error leaving node ', node);
+                throw e;
+            }
+        }
+    });
+}
+
+/**
+ * Moves or inserts text to the specified end in order.
+ * "In order" means that the transformation of the text before
+ * the given position reads exactly what was moved/inserted
+ * from left to right.
+ * After the transformation is done, everything inside the start-end-range that was
+ * not moved will be removed. If there's a delete position given, things will be moved
+ * to the end first before getting deleted. This may ensure better mappings for auto completion
+ * for example.
+ */
+function transform(str, start, end, _xxx, // TODO
+transformations) {
+    const moves = [];
+    let appendPosition = end;
+    let ignoreNextString = false;
+    let deletePos;
+    let deleteDest;
+    for (let i = 0; i < transformations.length; i++) {
+        const transformation = transformations[i];
+        if (typeof transformation === 'number') {
+            deletePos = moves.length;
+            deleteDest = transformation;
+        }
+        else if (typeof transformation === 'string') {
+            if (!ignoreNextString) {
+                str.appendLeft(appendPosition, transformation);
+            }
+            ignoreNextString = false;
+        }
+        else {
+            const tStart = transformation[0];
+            let tEnd = transformation[1];
+            if (tStart === tEnd) {
+                // zero-range selection, don't move, it would
+                // cause bugs and isn't necessary anyway
+                continue;
+            }
+            if (tEnd < end - 1 &&
+                // TODO can we somehow make this more performant?
+                !transformations.some((t) => typeof t !== 'string' && (t[0] === tEnd + 1 || t[0] === tEnd))) {
+                tEnd += 1;
+                const next = transformations[i + 1];
+                ignoreNextString = typeof next === 'string';
+                // Do not append the next string, rather overwrite the next character. This ensures
+                // that mappings of the string afterwards are not mapped to a previous character, making
+                // mappings of ranges one character too short. If there's no string in the next transformation,
+                // completely delete the first character afterwards. This also makes the mapping more correct,
+                // so that autocompletion triggered on the last character works correctly.
+                const overwrite = typeof next === 'string' ? next : '';
+                str.overwrite(tEnd - 1, tEnd, overwrite, { contentOnly: true });
+            }
+            appendPosition = ignoreNextString ? tEnd : transformation[1];
+            moves.push([tStart, tEnd]);
+        }
+    }
+    deletePos = deletePos !== null && deletePos !== void 0 ? deletePos : moves.length;
+    for (let i = 0; i < deletePos; i++) {
+        str.move(moves[i][0], moves[i][1], end);
+    }
+    let removeStart = start;
+    for (const transformation of [...moves].sort((t1, t2) => t1[0] - t2[0])) {
+        if (removeStart < transformation[0]) {
+            if (deletePos !== moves.length && removeStart > deleteDest) {
+                str.move(removeStart, transformation[0], end);
+            }
+            // Use one space because of hover etc: This will make map deleted characters to the whitespace
+            str.overwrite(removeStart, transformation[0], ' ', { contentOnly: true });
+        }
+        removeStart = transformation[1];
+    }
+    if (removeStart < end) {
+        // Completely delete the first character afterwards. This makes the mapping more correct,
+        // so that autocompletion triggered on the last character works correctly.
+        str.overwrite(removeStart, removeStart + 1, '', { contentOnly: true });
+        removeStart++;
+    }
+    if (removeStart < end) {
+        // Use one space because of hover etc: This will map deleted characters to the whitespace
+        if (deletePos !== moves.length && removeStart > deleteDest && removeStart + 1 < end) {
+            // Can only move stuff up to the end, not including, else we get a "cannot move inside itself" error
+            str.move(removeStart, end - 1, end);
+            str.overwrite(removeStart, end - 1, ' ', { contentOnly: true });
+            str.overwrite(end - 1, end, '', { contentOnly: true });
+        }
+        else {
+            str.overwrite(removeStart, end, ' ', { contentOnly: true });
+        }
+    }
+    for (let i = deletePos; i < moves.length; i++) {
+        str.move(moves[i][0], moves[i][1], end);
+    }
+}
+/**
+ * Surrounds given range with a prefix and suffix. This is benefitial
+ * for better mappings in some cases. Example: If we transform `foo` to `"foo"`
+ * and if TS underlines the whole `"foo"`, we need to make sure that the quotes
+ * are also mapped to the correct positions.
+ * Returns the input start/end transformation for convenience.
+ */
+function surroundWith(str, [start, end], prefix, suffix) {
+    if (start + 1 === end) {
+        str.overwrite(start, end, `${prefix}${str.original.charAt(start)}${suffix}`, {
+            contentOnly: true
+        });
+    }
+    else {
+        str.overwrite(start, start + 1, `${prefix}${str.original.charAt(start)}`, {
+            contentOnly: true
+        });
+        str.overwrite(end - 1, end, `${str.original.charAt(end - 1)}${suffix}`, {
+            contentOnly: true
+        });
+    }
+    return [start, end];
+}
+/**
+ * Returns the [start, end] indexes of a directive (action,animation,etc) name.
+ * Example: use:foo --> [startOfFoo, endOfFoo]
+ */
+function getDirectiveNameStartEndIdx(str, node) {
+    const colonIdx = str.original.indexOf(':', node.start);
+    return [colonIdx + 1, colonIdx + 1 + `${node.name}`.length];
+}
+/**
+ * Removes characters from the string that are invalid for TS variable names.
+ * Careful: This does not check if the leading character
+ * is valid (numerical values aren't for example).
+ */
+function sanitizePropName(name) {
+    return name
+        .split('')
+        .map((char) => (/[0-9A-Za-z$_]/.test(char) ? char : '_'))
+        .join('');
+}
+
+/**
+ * use:xxx={params}   --->    __sveltets_2_ensureAction(xxx(svelte.mapElementTag('ParentNodeName'),(params)));
+ */
+function handleActionDirective(str, attr, element) {
+    const transformations = [
+        '__sveltets_2_ensureAction(',
+        getDirectiveNameStartEndIdx(str, attr),
+        `(${element.typingsNamespace}.mapElementTag('${element.tagName}')`
+    ];
+    if (attr.expression) {
+        transformations.push(',(', [attr.expression.start, attr.expression.end], ')');
+    }
+    transformations.push('));');
+    element.appendToStartEnd(transformations);
+}
+
+/**
+ * animate:xxx(yyy)   --->   __sveltets_2_ensureAnimation(xxx(svelte.mapElementTag('..'),__sveltets_2_AnimationMove,(yyy)));
+ */
+function handleAnimateDirective(str, attr, element) {
+    const transformations = [
+        '__sveltets_2_ensureAnimation(',
+        getDirectiveNameStartEndIdx(str, attr),
+        `(${element.typingsNamespace}.mapElementTag('${element.tagName}'),__sveltets_2_AnimationMove`
+    ];
+    if (attr.expression) {
+        transformations.push(',(', [attr.expression.start, attr.expression.end], ')');
+    }
+    transformations.push('));');
+    element.appendToStartEnd(transformations);
+}
+
+var svgAttributes = 'accent-height accumulate additive alignment-baseline allowReorder alphabetic amplitude arabic-form ascent attributeName attributeType autoReverse azimuth baseFrequency baseline-shift baseProfile bbox begin bias by calcMode cap-height class clip clipPathUnits clip-path clip-rule color color-interpolation color-interpolation-filters color-profile color-rendering contentScriptType contentStyleType cursor cx cy d decelerate descent diffuseConstant direction display divisor dominant-baseline dur dx dy edgeMode elevation enable-background end exponent externalResourcesRequired fill fill-opacity fill-rule filter filterRes filterUnits flood-color flood-opacity font-family font-size font-size-adjust font-stretch font-style font-variant font-weight format from fr fx fy g1 g2 glyph-name glyph-orientation-horizontal glyph-orientation-vertical glyphRef gradientTransform gradientUnits hanging height href horiz-adv-x horiz-origin-x id ideographic image-rendering in in2 intercept k k1 k2 k3 k4 kernelMatrix kernelUnitLength kerning keyPoints keySplines keyTimes lang lengthAdjust letter-spacing lighting-color limitingConeAngle local marker-end marker-mid marker-start markerHeight markerUnits markerWidth mask maskContentUnits maskUnits mathematical max media method min mode name numOctaves offset onabort onactivate onbegin onclick onend onerror onfocusin onfocusout onload onmousedown onmousemove onmouseout onmouseover onmouseup onrepeat onresize onscroll onunload opacity operator order orient orientation origin overflow overline-position overline-thickness panose-1 paint-order pathLength patternContentUnits patternTransform patternUnits pointer-events points pointsAtX pointsAtY pointsAtZ preserveAlpha preserveAspectRatio primitiveUnits r radius refX refY rendering-intent repeatCount repeatDur requiredExtensions requiredFeatures restart result rotate rx ry scale seed shape-rendering slope spacing specularConstant specularExponent speed spreadMethod startOffset stdDeviation stemh stemv stitchTiles stop-color stop-opacity strikethrough-position strikethrough-thickness string stroke stroke-dasharray stroke-dashoffset stroke-linecap stroke-linejoin stroke-miterlimit stroke-opacity stroke-width style surfaceScale systemLanguage tabindex tableValues target targetX targetY text-anchor text-decoration text-rendering textLength to transform type u1 u2 underline-position underline-thickness unicode unicode-bidi unicode-range units-per-em v-alphabetic v-hanging v-ideographic v-mathematical values version vert-adv-y vert-origin-x vert-origin-y viewBox viewTarget visibility width widths word-spacing writing-mode x x-height x1 x2 xChannelSelector xlink:actuate xlink:arcrole xlink:href xlink:role xlink:show xlink:title xlink:type xml:base xml:lang xml:space y y1 y2 yChannelSelector z zoomAndPan'.split(' ');
+
+const voidTags = 'area,base,br,col,embed,hr,img,input,link,meta,param,source,track,wbr'.split(',');
+/**
+ * Handles HTML elements as well as svelte:options, svelte:head, svelte:window, svelte:body
+ *
+ * Children of this element should call the methods on this class to add themselves to the correct
+ * position within the transformation.
+ *
+ * The transformation result does not have anything to do with HTMLx, it instead uses plan JS,
+ * leveraging scoped blocks (`{ ... }`). Each element is transformed to something that is
+ * contained in such a block. This ensures we can declare variables inside that do not leak
+ * to the outside while preserving TypeScript's control flow.
+ *
+ * A transformation reads for example like this:
+ * ```
+ * // before
+ * <div class={foo} />
+ * // after
+ * { const $$_div = __sveltets_2_createElement("div", {"class": foo,}); }
+ * ```
+ */
+class Element {
+    /**
+     * @param str The MagicString instance used to manipulate the text
+     * @param node The Svelte AST node that represents this element
+     * @param typingsNamespace Determines which namespace to use for the createElement function
+     * @param parent The Svelte AST parent node
+     */
+    constructor(str, node, typingsNamespace, parent) {
+        var _a, _b;
+        this.str = str;
+        this.node = node;
+        this.typingsNamespace = typingsNamespace;
+        this.parent = parent;
+        this.startTransformation = [];
+        this.startEndTransformation = ['});'];
+        this.attrsTransformation = [];
+        this.endTransformation = [];
+        if (parent) {
+            parent.child = this;
+        }
+        this.tagName = this.node.name === 'svelte:body' ? 'body' : this.node.name;
+        this.isSelfclosing = this.computeIsSelfclosing();
+        this.startTagStart = this.node.start;
+        this.startTagEnd = this.computeStartTagEnd();
+        const createElement = `${this.typingsNamespace}.createElement`;
+        const tagEnd = this.startTagStart + this.node.name.length + 1;
+        // Ensure deleted characters are mapped to the attributes object so we
+        // get autocompletion when triggering it on a whitespace.
+        if (/\s/.test(str.original.charAt(tagEnd))) {
+            this.attrsTransformation.push(tagEnd);
+            this.attrsTransformation.push([tagEnd, tagEnd + 1]);
+            // Overwrite necessary or else we get really weird mappings
+            this.str.overwrite(tagEnd, tagEnd + 1, '', { contentOnly: true });
+        }
+        switch (this.node.name) {
+            // Although not everything that is possible to add to Element
+            // is valid on the special svelte elements,
+            // we still also handle them here and let the Svelte parser handle invalid
+            // cases. For us it doesn't make a difference to a normal HTML element.
+            case 'svelte:options':
+            case 'svelte:head':
+            case 'svelte:window':
+            case 'svelte:body':
+            case 'svelte:fragment': {
+                // remove the colon: svelte:xxx -> sveltexxx
+                const nodeName = `svelte${this.node.name.substring(7)}`;
+                this._name = '$$_' + nodeName + this.computeDepth();
+                this.startTransformation.push(`{ ${createElement}("${nodeName}", {`);
+                this.addNameConstDeclaration = () => (this.startTransformation[0] = `{ const ${this._name} = ${createElement}("${nodeName}", {`);
+                break;
+            }
+            case 'slot': {
+                // If the element is a <slot> tag, create the element with the createSlot-function
+                // which is created inside createRenderFunction.ts to check that the name and attributes
+                // of the slot tag are correct. The check will error if the user defined $$Slots
+                // and the slot definition or its attributes contradict that type definition.
+                this._name = '$$_slot' + this.computeDepth();
+                const slotName = ((_b = (_a = this.node.attributes) === null || _a === void 0 ? void 0 : _a.find((a) => a.name === 'name')) === null || _b === void 0 ? void 0 : _b.value[0]) ||
+                    'default';
+                this.startTransformation.push('{ __sveltets_createSlot(', typeof slotName === 'string'
+                    ? `"${slotName}"`
+                    : surroundWith(this.str, [slotName.start, slotName.end], '"', '"'), ', {');
+                this.addNameConstDeclaration = () => (this.startTransformation[0] = `{ const ${this._name} = __sveltets_createSlot(`);
+                break;
+            }
+            default: {
+                this._name = '$$_' + sanitizePropName(this.node.name) + this.computeDepth();
+                this.startTransformation.push(`{ ${createElement}("`, [this.node.start + 1, this.node.start + 1 + this.node.name.length], '", {');
+                this.addNameConstDeclaration = () => (this.startTransformation[0] = `{ const ${this._name} = ${createElement}("`);
+                break;
+            }
+        }
+    }
+    get name() {
+        if (this.addNameConstDeclaration) {
+            this.addNameConstDeclaration();
+            this.addNameConstDeclaration = undefined;
+        }
+        return this._name;
+    }
+    /**
+     * attribute={foo}  -->  "attribute": foo,
+     * @param name Attribute name
+     * @param value Attribute value, if present. If not present, this is treated as a shorthand attribute
+     */
+    addAttribute(name, value) {
+        if (value) {
+            this.attrsTransformation.push(...name, ':', ...value, ',');
+        }
+        else {
+            this.attrsTransformation.push(...name, ',');
+        }
+    }
+    /**
+     * Handle the slot of `<... slot=".." />`
+     * @param transformation Slot name transformation
+     */
+    addSlotName(transformation) {
+        this.slotLetsTransformation = this.slotLetsTransformation || [[], []];
+        this.slotLetsTransformation[0] = transformation;
+    }
+    /**
+     * Handle the let: of `<... let:xx={yy} />`
+     * @param transformation Let transformation
+     */
+    addSlotLet(transformation) {
+        this.slotLetsTransformation = this.slotLetsTransformation || [['default'], []];
+        this.slotLetsTransformation[1].push(...transformation, ',');
+    }
+    /**
+     * Add something right after the start tag end.
+     */
+    appendToStartEnd(value) {
+        this.startEndTransformation.push(...value);
+    }
+    performTransformation() {
+        this.endTransformation.push('}');
+        const slotLetTransformation = [];
+        if (this.slotLetsTransformation) {
+            if (this.slotLetsTransformation[0][0] === 'default') {
+                slotLetTransformation.push(
+                // add dummy destructuring parameter because if all parameters are unused,
+                // the mapping will be confusing, because TS will highlight the whole destructuring
+                `{const {${surroundWithIgnoreComments('$$_$$')},`, ...this.slotLetsTransformation[1], `} = ${this.parent.name}.$$slot_def.default;$$_$$;`);
+            }
+            else {
+                slotLetTransformation.push(
+                // See comment above
+                `{const {${surroundWithIgnoreComments('$$_$$')},`, ...this.slotLetsTransformation[1], `} = ${this.parent.name}.$$slot_def["`, ...this.slotLetsTransformation[0], '"];$$_$$;');
+            }
+            this.endTransformation.push('}');
+        }
+        if (this.isSelfclosing) {
+            transform(this.str, this.startTagStart, this.startTagEnd, 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
+                ...slotLetTransformation,
+                ...this.startTransformation,
+                ...this.attrsTransformation,
+                ...this.startEndTransformation,
+                ...this.endTransformation
+            ]);
+        }
+        else {
+            transform(this.str, this.startTagStart, this.startTagEnd, this.startTagEnd, [
+                ...slotLetTransformation,
+                ...this.startTransformation,
+                ...this.attrsTransformation,
+                ...this.startEndTransformation
+            ]);
+            const tagEndIdx = this.str.original
+                .substring(this.node.start, this.node.end)
+                .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);
+        }
+    }
+    computeStartTagEnd() {
+        var _a;
+        if ((_a = this.node.children) === null || _a === void 0 ? void 0 : _a.length) {
+            return this.node.children[0].start;
+        }
+        return this.isSelfclosing
+            ? this.node.end
+            : this.str.original.lastIndexOf('>', this.node.end - 2) + 1;
+    }
+    computeIsSelfclosing() {
+        var _a;
+        if (this.str.original[this.node.end - 2] === '/' || voidTags.includes(this.node.name)) {
+            return true;
+        }
+        return (!((_a = this.node.children) === null || _a === void 0 ? void 0 : _a.length) &&
+            // Paranoid check because theoretically there could be other void
+            // tags in different namespaces other than HTML
+            !this.str.original
+                .substring(this.node.start, this.node.end)
+                .match(new RegExp(`</${this.node.name}\\s*>$`)));
+    }
+    computeDepth() {
+        let idx = 0;
+        let parent = this.parent;
+        while (parent) {
+            parent = parent.parent;
+            idx++;
+        }
+        return idx;
+    }
+}
+
+/**
+ * Handles Svelte components as well as svelte:self and svelte:component
+ *
+ * Children of this element should call the methods on this class to add themselves to the correct
+ * position within the transformation.
+ *
+ * The transformation result does not have anything to do with HTMLx, it instead uses plan JS,
+ * leveraging scoped blocks (`{ ... }`). Each element is transformed to something that is
+ * contained in such a block. This ensures we can declare variables inside that do not leak
+ * to the outside while preserving TypeScript's control flow.
+ *
+ * A transformation reads for example like this:
+ * ```
+ * // before
+ * <Comp prop={foo} />
+ * // after
+ * { const $$_Comp = new Comp({ target: __sveltets_2_any(), props: {"prop": foo,}}); }
+ * ```
+ */
+class InlineComponent {
+    constructor(str, node, parent) {
+        this.str = str;
+        this.node = node;
+        this.parent = parent;
+        this.startTransformation = [];
+        this.startEndTransformation = [];
+        this.propsTransformation = [];
+        this.eventsTransformation = [];
+        this.endTransformation = [];
+        if (parent) {
+            parent.child = this;
+        }
+        this.isSelfclosing = this.computeIsSelfclosing();
+        this.startTagStart = this.node.start;
+        this.startTagEnd = this.computeStartTagEnd();
+        const tagEnd = this.startTagStart + this.node.name.length + 1;
+        // Ensure deleted characters are mapped to the attributes object so we
+        // get autocompletion when triggering it on a whitespace.
+        if (/\s/.test(str.original.charAt(tagEnd))) {
+            this.propsTransformation.push(tagEnd);
+            this.propsTransformation.push([tagEnd, tagEnd + 1]);
+            // Overwrite necessary or else we get really weird mappings
+            this.str.overwrite(tagEnd, tagEnd + 1, '', { contentOnly: true });
+        }
+        if (this.node.name === 'svelte:self') {
+            // TODO try to get better typing here, maybe TS allows us to use the created class
+            // even if it's used in the function that is used to create it
+            this._name = '$$_svelteself' + this.computeDepth();
+            this.startTransformation.push('{ __sveltets_2_createComponentAny({');
+            this.addNameConstDeclaration = () => (this.startTransformation[0] = `{ const ${this._name} = __sveltets_2_createComponentAny({`);
+            this.startEndTransformation.push('});');
+        }
+        else {
+            const isSvelteComponentTag = this.node.name === 'svelte:component';
+            // We don't know if the thing we use to create the Svelte component with
+            // is actually a proper Svelte component, which would lead to errors
+            // when accessing things like $$prop_def. Therefore widen the type
+            // here, falling back to a any-typed component to ensure the user doesn't
+            // get weird follup-errors all over the place. The diagnostic error
+            // will be on the __sveltets_2_ensureComponent part, giving a more helpful message
+            this._name = '$$_' + sanitizePropName(this.node.name) + this.computeDepth();
+            const constructorName = this._name + 'C';
+            const nodeNameStart = isSvelteComponentTag
+                ? this.node.expression.start
+                : this.str.original.indexOf(this.node.name, this.node.start);
+            const nodeNameEnd = isSvelteComponentTag
+                ? this.node.expression.end
+                : nodeNameStart + this.node.name.length;
+            this.startTransformation.push(`{ const ${constructorName} = __sveltets_2_ensureComponent(`, [nodeNameStart, nodeNameEnd], `); new ${constructorName}({ target: __sveltets_2_any(), props: {`);
+            this.addNameConstDeclaration = () => (this.startTransformation[2] = `); const ${this._name} = new ${constructorName}({ target: __sveltets_2_any(), props: {`);
+            this.startEndTransformation.push('}});');
+        }
+    }
+    get name() {
+        if (this.addNameConstDeclaration) {
+            this.addNameConstDeclaration();
+            this.addNameConstDeclaration = undefined;
+        }
+        return this._name;
+    }
+    /**
+     * prop={foo}  -->  "prop": foo,
+     * @param name Property name
+     * @param value Attribute value, if present. If not present, this is treated as a shorthand attribute
+     */
+    addProp(name, value) {
+        if (value) {
+            this.propsTransformation.push(...name, ':', ...value, ',');
+        }
+        else {
+            this.propsTransformation.push(...name, ',');
+        }
+    }
+    /**
+     * on:click={xxx}  -->  $$_Component.$on("click", xxx)
+     * @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 : '() => {}', ');');
+    }
+    /**
+     * Handle the slot of `<... slot=".." />`
+     * @param transformation Slot name transformation
+     */
+    addSlotName(transformation) {
+        this.slotLetsTransformation = this.slotLetsTransformation || [[], []];
+        this.slotLetsTransformation[0] = transformation;
+    }
+    /**
+     * Handle the let: of `<... let:xx={yy} />`
+     * @param transformation Let transformation
+     */
+    addSlotLet(transformation) {
+        this.slotLetsTransformation = this.slotLetsTransformation || [['default'], []];
+        this.slotLetsTransformation[1].push(...transformation, ',');
+    }
+    /**
+     * Add something right after the start tag end.
+     */
+    appendToStartEnd(value) {
+        this.startEndTransformation.push(...value);
+    }
+    performTransformation() {
+        const namedSlotLetTransformation = [];
+        const defaultSlotLetTransformation = [];
+        if (this.slotLetsTransformation) {
+            if (this.slotLetsTransformation[0][0] === 'default') {
+                defaultSlotLetTransformation.push(
+                // add dummy destructuring parameter because if all parameters are unused,
+                // the mapping will be confusing, because TS will highlight the whole destructuring
+                `{const {${surroundWithIgnoreComments('$$_$$')},`, ...this.slotLetsTransformation[1], `} = ${this.name}.$$slot_def.default;$$_$$;`);
+            }
+            else {
+                namedSlotLetTransformation.push(
+                // See comment above
+                `{const {${surroundWithIgnoreComments('$$_$$')},`, ...this.slotLetsTransformation[1], `} = ${this.parent.name}.$$slot_def["`, ...this.slotLetsTransformation[0], '"];$$_$$;');
+            }
+            this.endTransformation.push('}');
+        }
+        if (this.isSelfclosing) {
+            this.endTransformation.push('}');
+            transform(this.str, this.startTagStart, this.startTagEnd, 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
+                ...namedSlotLetTransformation,
+                ...this.startTransformation,
+                ...this.propsTransformation,
+                ...this.startEndTransformation,
+                ...this.eventsTransformation,
+                ...defaultSlotLetTransformation,
+                ...this.endTransformation
+            ]);
+        }
+        else {
+            const endStart = this.str.original
+                .substring(this.node.start, this.node.end)
+                .lastIndexOf(`</${this.node.name}`) + this.node.start;
+            if (!this.node.name.startsWith('svelte:')) {
+                // 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, [
+                // See comment above why this goes first
+                ...namedSlotLetTransformation,
+                ...this.startTransformation,
+                ...this.propsTransformation,
+                ...this.startEndTransformation,
+                ...this.eventsTransformation,
+                ...defaultSlotLetTransformation
+            ]);
+            transform(this.str, endStart, this.node.end, this.node.end, this.endTransformation);
+        }
+    }
+    computeStartTagEnd() {
+        var _a;
+        if ((_a = this.node.children) === null || _a === void 0 ? void 0 : _a.length) {
+            return this.node.children[0].start;
+        }
+        return this.isSelfclosing
+            ? this.node.end
+            : this.str.original.lastIndexOf('>', this.node.end - 2) + 1;
+    }
+    computeIsSelfclosing() {
+        return this.str.original[this.node.end - 2] === '/';
+    }
+    computeDepth() {
+        let idx = 0;
+        let parent = this.parent;
+        while (parent) {
+            parent = parent.parent;
+            idx++;
+        }
+        return idx;
+    }
+}
+
+/**
+ * List taken from `svelte-jsx.d.ts` by searching for all attributes of type number
+ */
+const numberOnlyAttributes = new Set([
+    'cols',
+    'colspan',
+    'currenttime',
+    'defaultplaybackrate',
+    'high',
+    'low',
+    'marginheight',
+    'marginwidth',
+    'minlength',
+    'maxlength',
+    'optimum',
+    'rows',
+    'rowspan',
+    'size',
+    'span',
+    'start',
+    'tabindex',
+    'results',
+    'volume'
+]);
+const sapperLinkActions = ['sapper:prefetch', 'sapper:noscroll'];
+const sveltekitLinkActions = ['sveltekit:prefetch', 'sveltekit:noscroll'];
+/**
+ * Handle various kinds of attributes and make them conform to being valid in context of a object definition
+ * - {x}   --->    x
+ * - x="{..}"   --->    x:..
+ * - lowercase DOM attributes
+ * - multi-value handling
+ */
+function handleAttribute(str, attr, parent, preserveCase, element) {
+    if (parent.name === '!DOCTYPE' ||
+        ['Style', 'Script'].includes(parent.type) ||
+        (attr.name === 'name' && parent.type === 'Slot')) {
+        // - <!DOCTYPE html> is already removed by now from MagicString
+        // - Don't handle script / style tag attributes (context or lang for example)
+        // - name=".." of <slot> tag is already handled in Element
+        return;
+    }
+    if (attr.name === 'slot' &&
+        attributeValueIsOfType(attr.value, 'Text') &&
+        element.parent instanceof InlineComponent) {
+        // - slot=".." in context of slots with let:xx is handled differently
+        element.addSlotName([[attr.value[0].start, attr.value[0].end]]);
+        return;
+    }
+    const addAttribute = element instanceof Element
+        ? (name, value) => {
+            if (attr.name.startsWith('data-')) {
+                // any attribute prefixed with data- is valid, but we can't
+                // type that statically, so we need this workaround
+                name.unshift('...__sveltets_2_empty({');
+                if (!value) {
+                    value = ['__sveltets_2_any()'];
+                }
+                value.push('})');
+            }
+            element.addAttribute(name, value);
+        }
+        : (name, value) => {
+            if (attr.name.startsWith('--') && attr.value !== true) {
+                // CSS custom properties are not part of the props
+                // definition, so wrap them to not get "--xx is invalid prop" errors
+                name.unshift('...__sveltets_2_cssProp({');
+                if (!value) {
+                    value = ['""'];
+                }
+                value.push('})');
+            }
+            element.addProp(name, value);
+        };
+    /**
+     * lowercase the attribute name to make it adhere to our intrinsic elements definition
+     */
+    const transformAttributeCase = (name) => {
+        if (!preserveCase && !svgAttributes.find((x) => x == name)) {
+            return name.toLowerCase();
+        }
+        else {
+            return name;
+        }
+    };
+    // Handle attribute name
+    const attributeName = [];
+    if (sapperLinkActions.includes(attr.name) || sveltekitLinkActions.includes(attr.name)) {
+        //strip ":" from out attribute name and uppercase the next letter to convert to jsx attribute
+        const parts = attr.name.split(':');
+        const name = parts[0] + parts[1][0].toUpperCase() + parts[1].substring(1);
+        str.overwrite(attr.start, attr.start + attr.name.length, name);
+        attributeName.push([attr.start, attr.start + attr.name.length]);
+    }
+    else 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]]);
+        return;
+    }
+    else {
+        let name = element instanceof Element && parent.type === 'Element'
+            ? transformAttributeCase(attr.name)
+            : attr.name;
+        // surround with quotes because dashes or other invalid property characters could be part of the name
+        // Overwrite first char with "+char because TS will squiggle the whole "prop" including quotes when something is wrong
+        if (name !== attr.name) {
+            name = '"' + name;
+            str.overwrite(attr.start, attr.start + attr.name.length, name);
+        }
+        else {
+            str.overwrite(attr.start, attr.start + 1, '"' + str.original.charAt(attr.start), {
+                contentOnly: true
+            });
+        }
+        attributeName.push([attr.start, attr.start + attr.name.length], '"');
+    }
+    // Handle attribute value
+    const attributeValue = [];
+    if (attr.value === true) {
+        attributeValue.push('true');
+        addAttribute(attributeName, attributeValue);
+        return;
+    }
+    if (attr.value.length == 0) {
+        // attr=""
+        addAttribute(attributeName, ['""']);
+        return;
+    }
+    //handle single value
+    if (attr.value.length == 1) {
+        const attrVal = attr.value[0];
+        if (attrVal.type == 'Text') {
+            const hasBrackets = str.original.lastIndexOf('}', attrVal.end) === attrVal.end - 1 ||
+                str.original.lastIndexOf('}"', attrVal.end) === attrVal.end - 1 ||
+                str.original.lastIndexOf("}'", attrVal.end) === attrVal.end - 1;
+            const needsNumberConversion = !hasBrackets &&
+                parent.type === 'Element' &&
+                numberOnlyAttributes.has(attr.name.toLowerCase()) &&
+                !isNaN(attrVal.data);
+            const includesTemplateLiteralQuote = attrVal.data.includes('`');
+            const quote = !includesTemplateLiteralQuote
+                ? '`'
+                : ['"', "'"].includes(str.original[attrVal.start - 1])
+                    ? str.original[attrVal.start - 1]
+                    : '"';
+            if (!needsNumberConversion) {
+                attributeValue.push(quote);
+            }
+            if (includesTemplateLiteralQuote && attrVal.data.split('\n').length > 1) {
+                // Multiline attribute value text which can't be wrapped in a template literal
+                // -> ensure it's still a valid transformation by transforming the actual line break
+                str.overwrite(attrVal.start, attrVal.end, attrVal.data.split('\n').join('\\n'), {
+                    contentOnly: true
+                });
+            }
+            attributeValue.push([attrVal.start, attrVal.end]);
+            if (!needsNumberConversion) {
+                attributeValue.push(quote);
+            }
+            addAttribute(attributeName, attributeValue);
+        }
+        else if (attrVal.type == 'MustacheTag') {
+            attributeValue.push([attrVal.expression.start, attrVal.expression.end]);
+            addAttribute(attributeName, attributeValue);
+        }
+        return;
+    }
+    // We have multiple attribute values, so we build a template string out of them.
+    for (const n of attr.value) {
+        if (n.type === 'MustacheTag') {
+            str.appendRight(n.start, '$');
+        }
+    }
+    attributeValue.push('`', [attr.value[0].start, attr.value[attr.value.length - 1].end], '`');
+    addAttribute(attributeName, attributeValue);
+}
+function attributeValueIsOfType(value, type) {
+    return value !== true && value.length == 1 && value[0].type == type;
+}
+
+/**
+ * This needs to be called on the way out, not on the way on, when walking,
+ * because else the order of moves might get messed up with moves in
+ * the children.
+ *
+ * The await block consists of these blocks:
+ *- expression: the promise - has start and end
+ *- value: the result of the promise - has start and end
+ *- error: the error branch value - has start and end
+ *- pending: start/end of the pending block (if exists), with skip boolean
+ *- then: start/end of the then block (if exists), with skip boolean
+ *- catch: start/end of the catch block (if exists), with skip boolean
+ *
+ * Implementation note:
+ * As soon there's a `then` with a value, we transform that to
+ * `{const $$_value = foo; {const foo = await $$_value;..}}` because
+ *
+ * - `{#await foo then foo}` or `{#await foo}..{:then foo}..` is valid Svelte code
+ * - `{#await foo} {bar} {:then bar} {bar} {/await} is valid Svelte code`
+ *
+ *  Both would throw "variable used before declaration" if we didn't do the
+ * transformation this way.
+ */
+function handleAwait(str, awaitBlock) {
+    var _a, _b;
+    const transforms = ['{ '];
+    if (!awaitBlock.pending.skip) {
+        transforms.push([awaitBlock.pending.start, awaitBlock.pending.end]);
+    }
+    if (awaitBlock.error || !awaitBlock.catch.skip) {
+        transforms.push('try { ');
+    }
+    if (awaitBlock.value) {
+        transforms.push('const $$_value = ');
+    }
+    transforms.push('await (', [awaitBlock.expression.start, awaitBlock.expression.end], '); ');
+    if (awaitBlock.value) {
+        transforms.push('{ const ', [awaitBlock.value.start, awaitBlock.value.end], ' = $$_value; ');
+    }
+    if (!awaitBlock.then.skip) {
+        if (awaitBlock.pending.skip) {
+            transforms.push([awaitBlock.then.start, awaitBlock.then.end]);
+        }
+        else if ((_a = awaitBlock.then.children) === null || _a === void 0 ? void 0 : _a.length) {
+            transforms.push([
+                awaitBlock.then.children[0].start,
+                awaitBlock.then.children[awaitBlock.then.children.length - 1].end
+            ]);
+        }
+    }
+    if (awaitBlock.value) {
+        transforms.push('}');
+    }
+    if (awaitBlock.error || !awaitBlock.catch.skip) {
+        transforms.push('} catch($$_e) { ');
+        if (awaitBlock.error) {
+            transforms.push('const ', [awaitBlock.error.start, awaitBlock.error.end], ' = __sveltets_2_any();');
+        }
+        if (!awaitBlock.catch.skip && ((_b = awaitBlock.catch.children) === null || _b === void 0 ? void 0 : _b.length)) {
+            transforms.push([
+                awaitBlock.catch.children[0].start,
+                awaitBlock.catch.children[awaitBlock.catch.children.length - 1].end
+            ]);
+        }
+        transforms.push('}');
+    }
+    transforms.push('}');
+    transform(str, awaitBlock.start, awaitBlock.end, awaitBlock.end, transforms);
+}
+
+const oneWayBindingAttributes = new Map(['clientWidth', 'clientHeight', 'offsetWidth', 'offsetHeight']
+    .map((e) => [e, 'HTMLDivElement'])
+    .concat(['duration', 'buffered', 'seekable', 'seeking', 'played', 'ended'].map((e) => [
+    e,
+    'HTMLMediaElement'
+])));
+/**
+ * List of all binding names that are transformed to sth like `binding = variable`.
+ * This applies to readonly bindings and the this binding.
+ */
+new Set([...oneWayBindingAttributes.keys(), 'this']);
+const supportsBindThis = [
+    'InlineComponent',
+    'Element',
+    'Body',
+    'Slot' // only valid for Web Components compile target
+];
+/**
+ * Transform bind:xxx into something that conforms to JS/TS
+ */
+function handleBinding(str, attr, parent, element) {
+    // bind group on input
+    if (element instanceof Element && attr.name == 'group' && parent.name == 'input') {
+        element.appendToStartEnd([[attr.expression.start, attr.expression.end], ';']);
+        return;
+    }
+    // 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
+        // the other way round. So we check if the instance is assignable to the variable.
+        // Note: If the component unmounts (it's inside an if block, or svelte:component this={null},
+        // 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.
+        element.appendToStartEnd([
+            [attr.expression.start, attr.expression.end],
+            ` = ${element.name};`
+        ]);
+        return;
+    }
+    // one way binding
+    if (oneWayBindingAttributes.has(attr.name) && element instanceof Element) {
+        element.appendToStartEnd([
+            [attr.expression.start, attr.expression.end],
+            `= ${element.name}.${attr.name};`
+        ]);
+        return;
+    }
+    // other bindings which are transformed to normal attributes/props
+    const isShorthand = attr.expression.start === attr.start + 'bind:'.length;
+    const name = isShorthand
+        ? [[attr.expression.start, attr.expression.end]]
+        : [[attr.start + 'bind:'.length, str.original.lastIndexOf('=', attr.expression.start)]];
+    const value = isShorthand
+        ? undefined
+        : [[attr.expression.start, attr.expression.end]];
+    if (element instanceof Element) {
+        element.addAttribute(name, value);
+    }
+    else {
+        element.addProp(name, value);
+    }
+}
+
+/**
+ * class:xx={yyy}   --->   yyy;
+ */
+function handleClassDirective(attr, element) {
+    element.appendToStartEnd([[attr.expression.start, attr.expression.end], ';']);
+}
+
+/**
+ * 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;`
+ *
+ * The transformation happens directly in-place. This is more strict than the
+ * Svelte compiler because the compiler moves all const declarations to the top.
+ * This transformation results in `x used before being defined` errors if someone
+ * uses a const variable before declaring it, which arguably is more helpful
+ * than what the Svelte compiler does.
+ */
+function handleConstTag(str, constTag) {
+    transform(str, constTag.start, constTag.end, constTag.end, [
+        'const ',
+        [constTag.expression.start, constTag.expression.end],
+        ';'
+    ]);
+}
+
+/**
+ * {@debug a}		--->   ;a;
+ * {@debug a, b}	--->   ;a;b;
+ */
+function handleDebug(str, debugBlock) {
+    let cursor = debugBlock.start;
+    for (const identifier of debugBlock.identifiers) {
+        str.overwrite(cursor, identifier.start, ';', { contentOnly: true });
+        cursor = identifier.end;
+    }
+    str.overwrite(cursor, debugBlock.end, ';', { contentOnly: true });
+}
+
+/**
+ * Transform #each into a for-of loop
+ *
+ * Implementation notes:
+ * - If code is
+ *   `{#each items as items,i (key)}`
+ *   then the transformation is
+ *   `{ const $$_each = __sveltets_2_ensureArray(items); for (const items of $$_each) { let i = 0;key;`.
+ *   Transform it this way because `{#each items as items}` is valid Svelte code, but the transformation
+ *   `for(const items of items){..}` is invalid ("variable used before declaration"). Don't do the transformation
+ *   like this everytime because `$$_each` could turn up in the auto completion.
+ *
+ * - The `ensureArray` method checks that only `ArrayLike` objects are passed to `#each`.
+ *   `for (const ..)` wouldn't error in this case because it accepts any kind of iterable.
+ *
+ * - `{#each true, items as item}` is valid, we need to add braces around that expression, else
+ *   `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;
+    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 arrayAndItemVarTheSame = str.original.substring(eachBlock.expression.start, eachBlock.expression.end) ===
+        str.original.substring(eachBlock.context.start, eachBlock.context.end);
+    if (arrayAndItemVarTheSame) {
+        transforms = [
+            `{ const $$_each = __sveltets_2_ensureArray(${containsComma ? '(' : ''}`,
+            [eachBlock.expression.start, eachBlock.expression.end],
+            `${containsComma ? ')' : ''}); for(const `,
+            [eachBlock.context.start, eachBlock.context.end],
+            ' of $$_each){'
+        ];
     }
-    child() {
-        const child = new TemplateScope$1(this);
-        return child;
+    else {
+        transforms = [
+            'for(const ',
+            [eachBlock.context.start, eachBlock.context.end],
+            ` of __sveltets_2_ensureArray(${containsComma ? '(' : ''}`,
+            [eachBlock.expression.start, eachBlock.expression.end],
+            `${containsComma ? ')' : ''})){`
+        ];
+    }
+    if (eachBlock.key) {
+        transforms.push([eachBlock.key.start, eachBlock.key.end], ';');
+    }
+    if (eachBlock.index) {
+        const indexStart = str.original.indexOf(eachBlock.index, eachBlock.context.end);
+        const indexEnd = indexStart + eachBlock.index.length;
+        transforms.push('let ', [indexStart, indexEnd], ' = 1;');
+    }
+    transform(str, eachBlock.start, startEnd, startEnd, transforms);
+    const endEach = str.original.lastIndexOf('{', eachBlock.end - 1);
+    // {/each} -> } or {:else} -> }
+    if (eachBlock.else) {
+        const elseEnd = str.original.lastIndexOf('}', eachBlock.else.start);
+        const elseStart = str.original.lastIndexOf('{', elseEnd);
+        str.overwrite(elseStart, elseEnd + 1, '}' + (arrayAndItemVarTheSame ? '}' : ''), {
+            contentOnly: true
+        });
+        str.remove(endEach, eachBlock.end);
+    }
+    else {
+        str.overwrite(endEach, eachBlock.end, '}' + (arrayAndItemVarTheSame ? '}' : ''), {
+            contentOnly: true
+        });
     }
 }
-class TemplateScopeManager {
-    constructor() {
-        this.value = new TemplateScope$1();
+
+/**
+ * Transform on:xxx={yyy}
+ * - For DOM elements: ---> onxxx: yyy,
+ * - For Svelte components/special elements: ---> componentInstance.$on("xxx", yyy)}
+ */
+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;
+    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 ? [[attr.expression.start, attr.expression.end]] : ['undefined']);
     }
-    eachEnter(node) {
-        this.value = this.value.child();
-        if (node.context) {
-            this.handleScope(node.context);
-        }
-        if (node.index) {
-            this.value.inits.add(node.index);
-        }
+    else {
+        element.addEvent([nameStart, nameEnd], attr.expression ? [attr.expression.start, attr.expression.end] : undefined);
     }
-    eachLeave(node) {
-        if (!node.else) {
-            this.value = this.value.parent;
-        }
+}
+
+/**
+ * Transforms #if and :else if to a regular if control block.
+ */
+function handleIf(str, ifBlock) {
+    if (ifBlock.elseif) {
+        // {:else if expr}  -->  } else if(expr) {
+        const start = str.original.lastIndexOf('{:', ifBlock.expression.start);
+        str.overwrite(start, ifBlock.expression.start, '} else if (');
     }
-    awaitEnter(node) {
-        this.value = this.value.child();
-        if (node.value) {
-            this.handleScope(node.value);
-        }
-        if (node.error) {
-            this.handleScope(node.error);
-        }
+    else {
+        // {#if expr}  -->  if (expr){
+        str.overwrite(ifBlock.start, ifBlock.expression.start, 'if(');
     }
-    awaitPendingEnter(node, parent) {
-        if (node.skip || parent.type !== 'AwaitBlock') {
-            return;
-        }
-        // Reset inits, as pending can have no inits
-        this.value.inits.clear();
+    const end = str.original.indexOf('}', ifBlock.expression.end);
+    str.overwrite(ifBlock.expression.end, end + 1, '){');
+    // {/if} -> }
+    const endif = str.original.lastIndexOf('{', ifBlock.end - 1);
+    str.overwrite(endif, ifBlock.end, '}');
+}
+/**
+ * {:else}   --->   } else {
+ */
+function handleElse(str, elseBlock, parent) {
+    if (parent.type !== 'IfBlock') {
+        // This is the else branch of an #each block which is handled elsewhere
+        return;
     }
-    awaitThenEnter(node, parent) {
-        if (node.skip || parent.type !== 'AwaitBlock') {
-            return;
-        }
-        // Reset inits, this time only taking the then
-        // scope into account.
-        this.value.inits.clear();
-        if (parent.value) {
-            this.handleScope(parent.value);
-        }
+    const elseEnd = str.original.lastIndexOf('}', elseBlock.start);
+    const elseword = str.original.lastIndexOf(':else', elseEnd);
+    const elseStart = str.original.lastIndexOf('{', elseword);
+    str.overwrite(elseStart, elseStart + 1, '}');
+    str.overwrite(elseEnd, elseEnd + 1, '{');
+    const colon = str.original.indexOf(':', elseword);
+    str.remove(colon, colon + 1);
+}
+
+/**
+ * {#key expr}content{/key}   --->   expr; content
+ */
+function handleKey(str, keyBlock) {
+    // {#key expr}   ->   expr;
+    str.overwrite(keyBlock.start, keyBlock.expression.start, '', { contentOnly: true });
+    const end = str.original.indexOf('}', keyBlock.expression.end);
+    str.overwrite(keyBlock.expression.end, end + 1, '; ');
+    // {/key}   ->
+    const endKey = str.original.lastIndexOf('{', keyBlock.end - 1);
+    str.overwrite(endKey, keyBlock.end, '', { contentOnly: true });
+}
+
+/**
+ * `let:foo={bar}`  -->  `foo:bar`, which becomes `const {foo:bar} = $$_parent.$$slotDef['slotName'];`
+ * @param node
+ * @param element
+ */
+function handleLet(str, node, parent, preserveCase, element) {
+    if (element instanceof InlineComponent) {
+        // let:xx belongs to either the default slot or a named slot,
+        // which is determined in Attribute.ts
+        addSlotLet(node, element);
     }
-    awaitCatchEnter(node, parent) {
-        if (node.skip || parent.type !== 'AwaitBlock') {
-            return;
+    else {
+        if (element.parent instanceof InlineComponent) {
+            // let:xx is on a HTML element and belongs to a (named slot of a parent component
+            addSlotLet(node, element);
         }
-        // Reset inits, this time only taking the error
-        // scope into account.
-        this.value.inits.clear();
-        if (parent.error) {
-            this.handleScope(parent.error);
+        else {
+            // let:xx is a regular HTML attribute (probably a mistake by the user)
+            handleAttribute(str, {
+                start: node.start,
+                end: node.end,
+                type: 'Attribute',
+                name: 'let:' + node.name,
+                value: node.expression
+                    ? [
+                        {
+                            type: 'MustacheTag',
+                            start: node.expression.start,
+                            end: node.expression.end,
+                            expression: node.expression
+                        }
+                    ]
+                    : true
+            }, parent, preserveCase, element);
         }
     }
-    awaitLeave() {
-        this.value = this.value.parent;
-    }
-    elseEnter(parent) {
-        if (parent.type === 'EachBlock') {
-            this.value = this.value.parent;
-        }
+}
+function addSlotLet(node, element) {
+    const letTransformation = [
+        [node.start + 'let:'.length, node.start + 'let:'.length + node.name.length]
+    ];
+    if (node.expression) {
+        letTransformation.push(':', [node.expression.start, node.expression.end]);
     }
-    componentOrSlotTemplateOrElementEnter(node) {
-        if (usesLet(node)) {
-            this.value = this.value.child();
-        }
+    element.addSlotLet(letTransformation);
+}
+
+/**
+ * Handle mustache tags that are not part of attributes
+ * {a}  -->  a;
+ */
+function handleMustacheTag(str, node, parent) {
+    if (parent.type === 'Attribute') {
+        // handles inside Attribute.ts
+        return;
     }
-    componentOrSlotTemplateOrElementLeave(node) {
-        if (usesLet(node)) {
-            this.value = this.value.parent;
-        }
+    str.overwrite(node.start, node.start + 1, '', { contentOnly: true });
+    str.overwrite(node.end - 1, node.end, ';', { contentOnly: true });
+}
+
+/**
+ * {@html ...}   --->   ...;
+ */
+function handleRawHtml(str, node) {
+    transform(str, node.start, node.end, node.end, [
+        [node.expression.start, node.expression.end],
+        ';'
+    ]);
+}
+
+/**
+ * Handle spreaded attributes/props on elements/components by removing the braces.
+ * That way they can be added as a regular object spread.
+ * `{...xx}` -> `...x`
+ */
+function handleSpread(node, element) {
+    const transformation = [[node.start + 1, node.end - 1]];
+    if (element instanceof Element) {
+        element.addAttribute(transformation);
     }
-    handleScope(identifierDef) {
-        if (isIdentifier(identifierDef)) {
-            this.value.inits.add(identifierDef.name);
-        }
-        if (isDestructuringPatterns(identifierDef)) {
-            // the node object is returned as-it with no mutation
-            const identifiers = extract_identifiers(identifierDef);
-            identifiers.forEach((id) => this.value.inits.add(id.name));
-        }
+    else {
+        element.addProp(transformation);
     }
 }
 
-function handleText(str, node) {
-    if (!node.data) {
+/**
+ * style:xx         --->  __sveltets_2_ensureType(String, Number, xx);
+ * style:xx={yy}    --->  __sveltets_2_ensureType(String, Number, yy);
+ * style:xx="yy"    --->  __sveltets_2_ensureType(String, Number, "yy");
+ * style:xx="a{b}"  --->  __sveltets_2_ensureType(String, Number, `a${b}`);
+ */
+function handleStyleDirective(str, style, element) {
+    const htmlx = str.original;
+    if (style.value === true || style.value.length === 0) {
+        element.appendToStartEnd([
+            '__sveltets_2_ensureType(String, Number, ',
+            [htmlx.indexOf(':', style.start) + 1, style.end],
+            ');'
+        ]);
         return;
     }
-    const needsRemoves = ['}', '>'];
-    for (const token of needsRemoves) {
-        let index = node.data.indexOf(token);
-        while (index >= 0) {
-            str.remove(index + node.start, index + node.start + 1);
-            index = node.data.indexOf(token, index + 1);
+    let start = style.value[0].start;
+    if (style.value[0].type === 'MustacheTag') {
+        start++;
+    }
+    const last = style.value[style.value.length - 1];
+    let end = last.end;
+    if (last.type === 'MustacheTag') {
+        end--;
+    }
+    if (style.value.length > 1) {
+        // We have multiple attribute values, so we build a template string out of them.
+        for (const n of style.value) {
+            if (n.type === 'MustacheTag') {
+                str.appendRight(n.start, '$');
+            }
         }
+        element.appendToStartEnd([
+            '__sveltets_2_ensureType(String, Number, `',
+            [start, end],
+            '`);'
+        ]);
+        return;
+    }
+    const styleVal = style.value[0];
+    if (styleVal.type === 'Text') {
+        const quote = ['"', "'"].includes(str.original[styleVal.start - 1])
+            ? str.original[styleVal.start - 1]
+            : '"';
+        element.appendToStartEnd([
+            `__sveltets_2_ensureType(String, Number, ${quote}`,
+            [start, end],
+            `${quote});`
+        ]);
+    }
+    else {
+        // MustacheTag
+        element.appendToStartEnd(['__sveltets_2_ensureType(String, Number, ', [start, end], ');']);
     }
 }
 
 /**
- * transition:xxx(yyy)   --->   {...__sveltets_1_ensureTransition(xxx(__sveltets_1_mapElementTag('..'),(yyy)))}
+ * Handles a text node transformation.
+ * Removes everything except whitespace (for better visual output) when it's normal HTML text for example inside an element
+ * to not clutter up the output. For attributes it leaves the text as is.
  */
-function handleTransitionDirective(htmlx, str, attr, parent) {
-    str.overwrite(attr.start, htmlx.indexOf(':', attr.start) + 1, '{...__sveltets_1_ensureTransition(');
-    if (attr.modifiers.length) {
-        const local = htmlx.indexOf('|', attr.start);
-        str.remove(local, attr.expression ? attr.expression.start : attr.end);
-    }
-    const nodeType = `__sveltets_1_mapElementTag('${parent.name}')`;
-    if (!attr.expression) {
-        str.appendLeft(attr.end, `(${nodeType},{}))}`);
+function handleText(str, node, parent) {
+    if (!node.data || parent.type === 'Attribute') {
         return;
     }
-    str.overwrite(htmlx.indexOf(':', attr.start) + 1 + `${attr.name}`.length, attr.expression.start, `(${nodeType},(`);
-    str.appendLeft(attr.expression.end, ')))');
-    if (isQuote(htmlx[attr.end - 1])) {
-        str.remove(attr.end - 1, attr.end);
+    let replacement = node.data.replace(/\S/g, '');
+    if (!replacement && node.data.length) {
+        // minimum of 1 whitespace which ensure hover or other things don't give weird results
+        // where for example you hover over a text and get a hover info about the containing tag.
+        replacement = ' ';
+    }
+    str.overwrite(node.start, node.end, replacement, {
+        contentOnly: true
+    });
+}
+
+/**
+ * transition|modifier:xxx(yyy)   --->   __sveltets_2_ensureTransition(xxx(svelte.mapElementTag('..'),(yyy)));
+ */
+function handleTransitionDirective(str, attr, element) {
+    const transformations = [
+        '__sveltets_2_ensureTransition(',
+        getDirectiveNameStartEndIdx(str, attr),
+        `(${element.typingsNamespace}.mapElementTag('${element.tagName}')`
+    ];
+    if (attr.expression) {
+        transformations.push(',(', [attr.expression.start, attr.expression.end], ')');
     }
+    transformations.push('));');
+    element.appendToStartEnd(transformations);
 }
 
 function stripDoctype(str) {
@@ -2896,107 +4430,101 @@ function stripDoctype(str) {
  * and converts it to JSX
  */
 function convertHtmlxToJsx(str, ast, onWalk = null, onLeave = null, options = {}) {
-    const htmlx = str.original;
+    str.original;
+    options = { preserveAttributeCase: false, ...options };
+    options.typingsNamespace = options.typingsNamespace || 'svelteHTML';
     stripDoctype(str);
-    str.prepend('<>');
-    str.append('</>');
-    const templateScopeManager = new TemplateScopeManager();
-    let ifScope = new IfScope(templateScopeManager);
+    let element;
     compiler.walk(ast, {
         enter: (node, parent, prop, index) => {
             try {
                 switch (node.type) {
                     case 'IfBlock':
-                        handleIf(htmlx, str, node, ifScope);
-                        if (!node.elseif) {
-                            ifScope = ifScope.getChild();
-                        }
+                        handleIf(str, node);
                         break;
                     case 'EachBlock':
-                        templateScopeManager.eachEnter(node);
-                        handleEach(htmlx, str, node, ifScope);
+                        handleEach(str, node);
                         break;
                     case 'ElseBlock':
-                        templateScopeManager.elseEnter(parent);
-                        handleElse(htmlx, str, node, parent, ifScope);
-                        break;
-                    case 'AwaitBlock':
-                        handleAwait(htmlx, str, node, ifScope, templateScopeManager);
-                        break;
-                    case 'PendingBlock':
-                        templateScopeManager.awaitPendingEnter(node, parent);
-                        handleAwaitPending(parent, htmlx, str, ifScope);
-                        break;
-                    case 'ThenBlock':
-                        templateScopeManager.awaitThenEnter(node, parent);
-                        handleAwaitThen(parent, htmlx, str, ifScope);
-                        break;
-                    case 'CatchBlock':
-                        templateScopeManager.awaitCatchEnter(node, parent);
-                        handleAwaitCatch(parent, htmlx, str, ifScope);
+                        handleElse(str, node, parent);
                         break;
                     case 'KeyBlock':
-                        handleKey(htmlx, str, node);
+                        handleKey(str, node);
+                        break;
+                    case 'MustacheTag':
+                        handleMustacheTag(str, node, parent);
                         break;
                     case 'RawMustacheTag':
-                        handleRawHtml(htmlx, str, node);
+                        handleRawHtml(str, node);
                         break;
                     case 'DebugTag':
-                        handleDebug(htmlx, str, node);
+                        handleDebug(str, node);
+                        break;
+                    case 'ConstTag':
+                        handleConstTag(str, node);
                         break;
                     case 'InlineComponent':
-                        templateScopeManager.componentOrSlotTemplateOrElementEnter(node);
-                        handleComponent(htmlx, str, node, parent, ifScope, templateScopeManager.value);
+                        if (element) {
+                            element.child = new InlineComponent(str, node, element);
+                            element = element.child;
+                        }
+                        else {
+                            element = new InlineComponent(str, node);
+                        }
                         break;
                     case 'Element':
-                        templateScopeManager.componentOrSlotTemplateOrElementEnter(node);
-                        handleElement(htmlx, str, node, parent, ifScope, templateScopeManager.value);
+                    case 'Options':
+                    case 'Window':
+                    case 'Head':
+                    case 'Title':
+                    case 'Body':
+                    case 'Slot':
+                    case 'SlotTemplate':
+                        if (node.name !== '!DOCTYPE') {
+                            if (element) {
+                                element.child = new Element(str, node, options.typingsNamespace, element);
+                                element = element.child;
+                            }
+                            else {
+                                element = new Element(str, node, options.typingsNamespace);
+                            }
+                        }
                         break;
                     case 'Comment':
                         handleComment(str, node);
                         break;
                     case 'Binding':
-                        handleBinding(htmlx, str, node, parent);
+                        handleBinding(str, node, parent, element);
                         break;
                     case 'Class':
-                        handleClassDirective(str, node);
+                        handleClassDirective(node, element);
+                        break;
+                    case 'StyleDirective':
+                        handleStyleDirective(str, node, element);
                         break;
                     case 'Action':
-                        handleActionDirective(htmlx, str, node, parent);
+                        handleActionDirective(str, node, element);
                         break;
                     case 'Transition':
-                        handleTransitionDirective(htmlx, str, node, parent);
+                        handleTransitionDirective(str, node, element);
                         break;
                     case 'Animation':
-                        handleAnimateDirective(htmlx, str, node, parent);
+                        handleAnimateDirective(str, node, element);
                         break;
                     case 'Attribute':
-                        handleAttribute(htmlx, str, node, parent, options.preserveAttributeCase);
-                        break;
-                    case 'EventHandler':
-                        handleEventHandler(htmlx, str, node, parent);
-                        break;
-                    case 'Options':
-                        handleSvelteTag(htmlx, str, node);
-                        break;
-                    case 'Window':
-                        handleSvelteTag(htmlx, str, node);
+                        handleAttribute(str, node, parent, options.preserveAttributeCase, element);
                         break;
-                    case 'Head':
-                        handleSvelteTag(htmlx, str, node);
+                    case 'Spread':
+                        handleSpread(node, element);
                         break;
-                    case 'Body':
-                        handleSvelteTag(htmlx, str, node);
+                    case 'EventHandler':
+                        handleEventHandler(str, node, element);
                         break;
-                    case 'SlotTemplate':
-                        handleSvelteTag(htmlx, str, node);
-                        templateScopeManager.componentOrSlotTemplateOrElementEnter(node);
-                        if (usesLet(node)) {
-                            handleSlot(htmlx, str, node, parent, getSlotName(node) || 'default', ifScope, templateScopeManager.value);
-                        }
+                    case 'Let':
+                        handleLet(str, node, parent, options.preserveAttributeCase, element);
                         break;
                     case 'Text':
-                        handleText(str, node);
+                        handleText(str, node, parent);
                         break;
                 }
                 if (onWalk) {
@@ -3004,7 +4532,7 @@ function convertHtmlxToJsx(str, ast, onWalk = null, onLeave = null, options = {}
                 }
             }
             catch (e) {
-                console.error('Error walking node ', node);
+                console.error('Error walking node ', node, e);
                 throw e;
             }
         },
@@ -3012,20 +4540,25 @@ function convertHtmlxToJsx(str, ast, onWalk = null, onLeave = null, options = {}
             try {
                 switch (node.type) {
                     case 'IfBlock':
-                        if (!node.elseif) {
-                            ifScope = ifScope.getParent();
-                        }
                         break;
                     case 'EachBlock':
-                        templateScopeManager.eachLeave(node);
                         break;
                     case 'AwaitBlock':
-                        templateScopeManager.awaitLeave();
+                        handleAwait(str, node);
                         break;
                     case 'InlineComponent':
                     case 'Element':
+                    case 'Options':
+                    case 'Window':
+                    case 'Head':
+                    case 'Title':
+                    case 'Body':
+                    case 'Slot':
                     case 'SlotTemplate':
-                        templateScopeManager.componentOrSlotTemplateOrElementLeave(node);
+                        if (node.name !== '!DOCTYPE') {
+                            element.performTransformation();
+                            element = element.parent;
+                        }
                         break;
                 }
                 if (onLeave) {
@@ -4080,7 +5613,8 @@ class ImplicitStoreValues {
 class Scripts {
     constructor(htmlxAst) {
         this.htmlxAst = htmlxAst;
-        // All script tags, no matter at what level, are listed within the root children.
+        // All script tags, no matter at what level, are listed within the root children, because
+        // of the logic in htmlxparser.ts
         // To get the top level scripts, filter out all those that are part of children's children.
         // Those have another type ('Element' with name 'script').
         this.scriptTags = this.htmlxAst.children.filter((child) => child.type === 'Script');
@@ -5002,7 +6536,8 @@ function processInstanceScriptContent(str, script, events, implicitStoreValues,
         }
         // Defensively call function (checking for undefined) because it got added only recently (TS 4.0)
         // and therefore might break people using older TS versions
-        if ((_a = ts__namespace.isTypeAssertionExpression) === null || _a === void 0 ? void 0 : _a.call(ts__namespace, node)) {
+        // Don't transform in ts mode because <type>value type assertions are valid in this case
+        if (mode !== 'ts' && ((_a = ts__namespace.isTypeAssertionExpression) === null || _a === void 0 ? void 0 : _a.call(ts__namespace, node))) {
             handleTypeAssertion(str, node, astOffset);
         }
         //to save a bunch of condition checks on each node, we recurse into processChild which skips all the checks for top level items
@@ -5061,7 +6596,7 @@ function transformInterfacesToTypes(tsAst, str, astOffset) {
     });
 }
 
-function processModuleScriptTag(str, script, implicitStoreValues) {
+function processModuleScriptTag(str, script, implicitStoreValues, useNewTransformation) {
     const htmlx = str.original;
     const scriptContent = htmlx.substring(script.content.start, script.content.end);
     const tsAst = ts__default['default'].createSourceFile('component.module.ts.svelte', scriptContent, ts__default['default'].ScriptTarget.Latest, true, ts__default['default'].ScriptKind.TS);
@@ -5081,8 +6616,12 @@ function processModuleScriptTag(str, script, implicitStoreValues) {
     implicitStoreValues.modifyCode(astOffset, str);
     const scriptStartTagEnd = htmlx.indexOf('>', script.start) + 1;
     const scriptEndTagStart = htmlx.lastIndexOf('<', script.end - 1);
-    str.overwrite(script.start, scriptStartTagEnd, '</>;');
-    str.overwrite(scriptEndTagStart, script.end, ';<>');
+    str.overwrite(script.start, scriptStartTagEnd, useNewTransformation ? ';' : '</>;', {
+        contentOnly: true
+    });
+    str.overwrite(scriptEndTagStart, script.end, useNewTransformation ? ';' : ';<>', {
+        contentOnly: true
+    });
 }
 function resolveImplicitStoreValue(node, implicitStoreValues, str, astOffset) {
     var _a;
@@ -5254,6 +6793,7 @@ function classNameFromFilename(filename, appendSuffix) {
 }
 
 function createRenderFunction({ str, scriptTag, scriptDestination, slots, events, exportedNames, isTsFile, uses$$props, uses$$restProps, uses$$slots, uses$$SlotsInterface, generics, mode }) {
+    const useNewTransformation = mode === 'ts';
     const htmlx = str.original;
     let propsDecl = '';
     if (uses$$props) {
@@ -5272,24 +6812,30 @@ function createRenderFunction({ str, scriptTag, scriptDestination, slots, events
     }
     const slotsDeclaration = slots.size > 0 && mode !== 'dts'
         ? '\n' +
-            surroundWithIgnoreComments(';const __sveltets_ensureSlot = __sveltets_1_createEnsureSlot' +
-                (uses$$SlotsInterface ? '<$$Slots>' : '') +
-                '();')
+            surroundWithIgnoreComments(useNewTransformation
+                ? ';const __sveltets_createSlot = __sveltets_2_createCreateSlot' +
+                    (uses$$SlotsInterface ? '<$$Slots>' : '') +
+                    '();'
+                : ';const __sveltets_ensureSlot = __sveltets_1_createEnsureSlot' +
+                    (uses$$SlotsInterface ? '<$$Slots>' : '') +
+                    '();')
         : '';
     if (scriptTag) {
         //I couldn't get magicstring to let me put the script before the <> we prepend during conversion of the template to jsx, so we just close it instead
         const scriptTagEnd = htmlx.lastIndexOf('>', scriptTag.content.start) + 1;
-        str.overwrite(scriptTag.start, scriptTag.start + 1, '</>;');
+        str.overwrite(scriptTag.start, scriptTag.start + 1, useNewTransformation ? ';' : '</>;');
         str.overwrite(scriptTag.start + 1, scriptTagEnd, `function render${generics.toDefinitionString(true)}() {${propsDecl}\n`);
         const scriptEndTagStart = htmlx.lastIndexOf('<', scriptTag.end - 1);
         // wrap template with callback
-        str.overwrite(scriptEndTagStart, scriptTag.end, `${slotsDeclaration};\n() => (<>`, {
+        str.overwrite(scriptEndTagStart, scriptTag.end, useNewTransformation
+            ? `${slotsDeclaration};\nasync () => {`
+            : `${slotsDeclaration};\n() => (<>`, {
             contentOnly: true
         });
     }
     else {
-        str.prependRight(scriptDestination, `</>;function render${generics.toDefinitionString(true)}() {` +
-            `${propsDecl}${slotsDeclaration}\n<>`);
+        str.prependRight(scriptDestination, `${useNewTransformation ? '' : '</>'};function render${generics.toDefinitionString(true)}() {` +
+            `${propsDecl}${slotsDeclaration}\n${useNewTransformation ? 'async () => {' : '<>'}`);
     }
     const slotsAsDef = uses$$SlotsInterface
         ? '{} as unknown as $$Slots'
@@ -5310,14 +6856,20 @@ function createRenderFunction({ str, scriptTag, scriptDestination, slots, events
         `, getters: ${exportedNames.createRenderFunctionGetterStr()}` +
         `, events: ${events.toDefString()} }}`;
     // wrap template with callback
-    if (scriptTag) {
+    if (useNewTransformation) {
+        str.append('};');
+    }
+    else if (scriptTag) {
         str.append(');');
     }
     str.append(returnString);
 }
 
 function processSvelteTemplate(str, options) {
-    const { htmlxAst, tags } = parseHtmlx(str.original, options);
+    const { htmlxAst, tags } = parseHtmlx(str.original, {
+        ...options,
+        useNewTransformation: (options === null || options === void 0 ? void 0 : options.mode) === 'ts'
+    });
     let uses$$props = false;
     let uses$$restProps = false;
     let uses$$slots = false;
@@ -5497,9 +7049,17 @@ function processSvelteTemplate(str, options) {
                 break;
         }
     };
-    convertHtmlxToJsx(str, htmlxAst, onHtmlxWalk, onHtmlxLeave, {
-        preserveAttributeCase: (options === null || options === void 0 ? void 0 : options.namespace) == 'foreign'
-    });
+    if (options.mode === 'ts') {
+        convertHtmlxToJsx(str, htmlxAst, onHtmlxWalk, onHtmlxLeave, {
+            preserveAttributeCase: (options === null || options === void 0 ? void 0 : options.namespace) == 'foreign',
+            typingsNamespace: options.typingsNamespace
+        });
+    }
+    else {
+        convertHtmlxToJsx$1(str, htmlxAst, onHtmlxWalk, onHtmlxLeave, {
+            preserveAttributeCase: (options === null || options === void 0 ? void 0 : options.namespace) == 'foreign'
+        });
+    }
     // resolve scripts
     const { scriptTag, moduleScriptTag } = scripts.getTopLevelScriptTags();
     scripts.blankOtherScriptTags(str);
@@ -5519,6 +7079,8 @@ function processSvelteTemplate(str, options) {
     };
 }
 function svelte2tsx(svelte, options = {}) {
+    // TODO temporary
+    options.mode = options.mode || 'ts';
     const str = new MagicString(svelte);
     // process the htmlx as a svelte template
     let { moduleScriptTag, scriptTag, slots, uses$$props, uses$$slots, uses$$restProps, events, componentDocumentation, resolvedStores, usesAccessors } = processSvelteTemplate(str, options);
@@ -5575,7 +7137,7 @@ function svelte2tsx(svelte, options = {}) {
     });
     // we need to process the module script after the instance script has moved otherwise we get warnings about moving edited items
     if (moduleScriptTag) {
-        processModuleScriptTag(str, moduleScriptTag, new ImplicitStoreValues(implicitStoreValues.getAccessedStores(), renderFunctionStart, scriptTag ? undefined : (input) => `</>;${input}<>`));
+        processModuleScriptTag(str, moduleScriptTag, new ImplicitStoreValues(implicitStoreValues.getAccessedStores(), renderFunctionStart, scriptTag || options.mode === 'ts' ? undefined : (input) => `</>;${input}<>`), options.mode === 'ts');
     }
     addComponentExport({
         str,