svelte2tsx 0.4.13 → 0.4.14

package/index.js

@@ -1677,6 +1677,21 @@ 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)))}
@@ -1879,21 +1894,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,6 +1908,24 @@ 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
  */
@@ -1973,16 +1991,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 +2020,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,7 +2046,11 @@ 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()}<>`);
     }
 }
 
@@ -2120,14 +2158,23 @@ function handleComment(str, node) {
 
 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 +2184,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 +2201,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;
@@ -2250,7 +2314,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 +2328,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);
@@ -2679,6 +2747,40 @@ function handleRawHtml(htmlx, str, rawBlock) {
     str.remove(tokenStart, tokenStart + '@html'.length);
 }
 
+/**
+ * style:xx         --->  __sveltets_1_ensureType(String, xx);
+ * style:xx={yy}    --->  __sveltets_1_ensureType(String, yy);
+ * style:xx="yy"    --->  __sveltets_1_ensureType(String, "yy");
+ * style:xx="a{b}"  --->  __sveltets_1_ensureType(String, `a${b}`);
+ */
+function handleStyleDirective(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, ');
+        str.appendLeft(style.end, ')}');
+        return;
+    }
+    if (style.value.length > 1) {
+        buildTemplateString(style, str, htmlx, '{...__sveltets_1_ensureType(String, `', '`)}', style.start);
+        return;
+    }
+    const styleVal = style.value[0];
+    if (styleVal.type === 'Text') {
+        str.overwrite(style.start, styleVal.start, '{...__sveltets_1_ensureType(String, "');
+        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, ');
+        str.overwrite(styleVal.end - 1, style.end, ')}');
+    }
+}
+
 /**
  * `<svelte:window>...</svelte:window>`   ---->    `<sveltewindow>...</sveltewindow>`
  * (same for :head, :body, :options, :fragment)
@@ -2770,7 +2872,7 @@ class TemplateScopeManager {
     eachEnter(node) {
         this.value = this.value.child();
         if (node.context) {
-            this.handleScope(node.context);
+            this.handleScope(node.context, node.children);
         }
         if (node.index) {
             this.value.inits.add(node.index);
@@ -2782,12 +2884,13 @@ class TemplateScopeManager {
         }
     }
     awaitEnter(node) {
+        var _a;
         this.value = this.value.child();
         if (node.value) {
-            this.handleScope(node.value);
+            this.handleScope(node.value, (_a = node.then) === null || _a === void 0 ? void 0 : _a.children);
         }
         if (node.error) {
-            this.handleScope(node.error);
+            this.handleScope(node.error, []);
         }
     }
     awaitPendingEnter(node, parent) {
@@ -2805,7 +2908,7 @@ class TemplateScopeManager {
         // scope into account.
         this.value.inits.clear();
         if (parent.value) {
-            this.handleScope(parent.value);
+            this.handleScope(parent.value, node.children);
         }
     }
     awaitCatchEnter(node, parent) {
@@ -2816,7 +2919,7 @@ class TemplateScopeManager {
         // scope into account.
         this.value.inits.clear();
         if (parent.error) {
-            this.handleScope(parent.error);
+            this.handleScope(parent.error, node.children);
         }
     }
     awaitLeave() {
@@ -2828,8 +2931,11 @@ class TemplateScopeManager {
         }
     }
     componentOrSlotTemplateOrElementEnter(node) {
-        if (usesLet(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) {
@@ -2837,7 +2943,7 @@ class TemplateScopeManager {
             this.value = this.value.parent;
         }
     }
-    handleScope(identifierDef) {
+    handleScope(identifierDef, children) {
         if (isIdentifier(identifierDef)) {
             this.value.inits.add(identifierDef.name);
         }
@@ -2846,6 +2952,14 @@ class TemplateScopeManager {
             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));
+                }
+            });
+        }
     }
 }
 
@@ -2961,6 +3075,9 @@ function convertHtmlxToJsx(str, ast, onWalk = null, onLeave = null, options = {}
                     case 'Class':
                         handleClassDirective(str, node);
                         break;
+                    case 'StyleDirective':
+                        handleStyleDirective(str, node);
+                        break;
                     case 'Action':
                         handleActionDirective(htmlx, str, node, parent);
                         break;
@@ -2991,9 +3108,7 @@ function convertHtmlxToJsx(str, ast, onWalk = null, onLeave = null, options = {}
                     case 'SlotTemplate':
                         handleSvelteTag(htmlx, str, node);
                         templateScopeManager.componentOrSlotTemplateOrElementEnter(node);
-                        if (usesLet(node)) {
-                            handleSlot(htmlx, str, node, parent, getSlotName(node) || 'default', ifScope, templateScopeManager.value);
-                        }
+                        handleSlot(htmlx, str, node, parent, getSlotName(node) || 'default', ifScope, templateScopeManager.value);
                         break;
                     case 'Text':
                         handleText(str, node);

package/index.mjs

@@ -1647,6 +1647,21 @@ 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)))}
@@ -1849,21 +1864,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++) {
@@ -1878,6 +1878,24 @@ 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
  */
@@ -1943,16 +1961,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) {
@@ -1964,12 +1990,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 {
@@ -1982,7 +2016,11 @@ 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()}<>`);
     }
 }
 
@@ -2090,14 +2128,23 @@ function handleComment(str, node) {
 
 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;
@@ -2107,19 +2154,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);
@@ -2128,13 +2171,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;
@@ -2220,7 +2284,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()}<>`);
@@ -2230,8 +2298,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);
@@ -2649,6 +2717,40 @@ function handleRawHtml(htmlx, str, rawBlock) {
     str.remove(tokenStart, tokenStart + '@html'.length);
 }
 
+/**
+ * style:xx         --->  __sveltets_1_ensureType(String, xx);
+ * style:xx={yy}    --->  __sveltets_1_ensureType(String, yy);
+ * style:xx="yy"    --->  __sveltets_1_ensureType(String, "yy");
+ * style:xx="a{b}"  --->  __sveltets_1_ensureType(String, `a${b}`);
+ */
+function handleStyleDirective(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, ');
+        str.appendLeft(style.end, ')}');
+        return;
+    }
+    if (style.value.length > 1) {
+        buildTemplateString(style, str, htmlx, '{...__sveltets_1_ensureType(String, `', '`)}', style.start);
+        return;
+    }
+    const styleVal = style.value[0];
+    if (styleVal.type === 'Text') {
+        str.overwrite(style.start, styleVal.start, '{...__sveltets_1_ensureType(String, "');
+        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, ');
+        str.overwrite(styleVal.end - 1, style.end, ')}');
+    }
+}
+
 /**
  * `<svelte:window>...</svelte:window>`   ---->    `<sveltewindow>...</sveltewindow>`
  * (same for :head, :body, :options, :fragment)
@@ -2740,7 +2842,7 @@ class TemplateScopeManager {
     eachEnter(node) {
         this.value = this.value.child();
         if (node.context) {
-            this.handleScope(node.context);
+            this.handleScope(node.context, node.children);
         }
         if (node.index) {
             this.value.inits.add(node.index);
@@ -2752,12 +2854,13 @@ class TemplateScopeManager {
         }
     }
     awaitEnter(node) {
+        var _a;
         this.value = this.value.child();
         if (node.value) {
-            this.handleScope(node.value);
+            this.handleScope(node.value, (_a = node.then) === null || _a === void 0 ? void 0 : _a.children);
         }
         if (node.error) {
-            this.handleScope(node.error);
+            this.handleScope(node.error, []);
         }
     }
     awaitPendingEnter(node, parent) {
@@ -2775,7 +2878,7 @@ class TemplateScopeManager {
         // scope into account.
         this.value.inits.clear();
         if (parent.value) {
-            this.handleScope(parent.value);
+            this.handleScope(parent.value, node.children);
         }
     }
     awaitCatchEnter(node, parent) {
@@ -2786,7 +2889,7 @@ class TemplateScopeManager {
         // scope into account.
         this.value.inits.clear();
         if (parent.error) {
-            this.handleScope(parent.error);
+            this.handleScope(parent.error, node.children);
         }
     }
     awaitLeave() {
@@ -2798,8 +2901,11 @@ class TemplateScopeManager {
         }
     }
     componentOrSlotTemplateOrElementEnter(node) {
-        if (usesLet(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) {
@@ -2807,7 +2913,7 @@ class TemplateScopeManager {
             this.value = this.value.parent;
         }
     }
-    handleScope(identifierDef) {
+    handleScope(identifierDef, children) {
         if (isIdentifier(identifierDef)) {
             this.value.inits.add(identifierDef.name);
         }
@@ -2816,6 +2922,14 @@ class TemplateScopeManager {
             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));
+                }
+            });
+        }
     }
 }
 
@@ -2931,6 +3045,9 @@ function convertHtmlxToJsx(str, ast, onWalk = null, onLeave = null, options = {}
                     case 'Class':
                         handleClassDirective(str, node);
                         break;
+                    case 'StyleDirective':
+                        handleStyleDirective(str, node);
+                        break;
                     case 'Action':
                         handleActionDirective(htmlx, str, node, parent);
                         break;
@@ -2961,9 +3078,7 @@ function convertHtmlxToJsx(str, ast, onWalk = null, onLeave = null, options = {}
                     case 'SlotTemplate':
                         handleSvelteTag(htmlx, str, node);
                         templateScopeManager.componentOrSlotTemplateOrElementEnter(node);
-                        if (usesLet(node)) {
-                            handleSlot(htmlx, str, node, parent, getSlotName(node) || 'default', ifScope, templateScopeManager.value);
-                        }
+                        handleSlot(htmlx, str, node, parent, getSlotName(node) || 'default', ifScope, templateScopeManager.value);
                         break;
                     case 'Text':
                         handleText(str, node);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "svelte2tsx",
-  "version": "0.4.13",
+  "version": "0.4.14",
   "description": "Convert Svelte components to TSX for type checking",
   "author": "David Pershouse",
   "license": "MIT",
@@ -34,7 +34,7 @@
     "source-map": "^0.6.1",
     "source-map-support": "^0.5.16",
     "sourcemap-codec": "^1.4.8",
-    "svelte": "~3.44.3",
+    "svelte": "~3.46.1",
     "tiny-glob": "^0.2.6",
     "tslib": "^1.10.0",
     "typescript": "^4.5.3"