svelte2tsx 0.4.10 → 0.4.14

package/index.d.ts

@@ -55,7 +55,7 @@ export function svelte2tsx(
     }
 ): SvelteCompiledToTsx
 
-export interface EmitDtsConig {
+export interface EmitDtsConfig {
     /**
      * Where to output the declaration files
      */
@@ -74,10 +74,14 @@ export interface EmitDtsConig {
     libRoot?: string;
 }
 
+// to make typo fix non-breaking, continue to export the old name but mark it as deprecated
+/**@deprecated*/
+export interface EmitDtsConig extends EmitDtsConfig {} /* eslint-disable-line @typescript-eslint/no-empty-interface */
+
 /**
  * Searches for a jsconfig or tsconfig starting at `root` and emits d.ts files
  * into `declarationDir` using the ambient file from `svelteShimsPath`.
  * Note: Handwritten `d.ts` files are not copied over; TypeScript does not
  * touch these files.
  */
-export function emitDts(config: EmitDtsConig): Promise<void>;
+export function emitDts(config: EmitDtsConfig): Promise<void>;

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)))}
@@ -1799,8 +1814,9 @@ function handleAttribute(htmlx, str, attr, parent, preserveCase) {
         }
         return;
     }
-    if (attr.value.length == 0)
+    if (attr.value.length == 0) {
         return; //wut?
+    }
     //handle single value
     if (attr.value.length == 1) {
         const attrVal = attr.value[0];
@@ -1878,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++) {
@@ -1907,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
  */
@@ -1947,7 +1966,7 @@ function handleAwaitThen(awaitBlock, htmlx, str, ifScope) {
     if (awaitBlock.then.skip) {
         return;
     }
-    // then value } | {:then value} | {await ..} .. {/await} ->
+    // then value } | then} | {:then value} | {await ..} .. {/await} ->
     // __sveltets_1_awaitThen(_$$p, (value) => {(possibleIfCondition && )<>
     let thenStart;
     let thenEnd;
@@ -1972,22 +1991,54 @@ 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) {
-    //{:catch error} ->
-    //</>}, (error) => {<>
-    if (!awaitBlock.catch.skip) {
+    if (awaitBlock.catch.skip) {
+        return;
+    }
+    if (awaitBlock.pending.skip && awaitBlock.then.skip) {
+        if (awaitBlock.error) {
+            // {#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, ') => {');
+            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, () => {}, () => {');
+            extractConstTags(awaitBlock.catch.children).forEach((insertion) => {
+                insertion(catchBegin, str);
+            });
+            str.appendRight(catchBegin, '<>');
+        }
+    }
+    else {
+        //{:catch error} ->
+        //</>}, (error) => {<>
         //catch block includes the {:catch}
         const catchStart = awaitBlock.catch.start;
         const catchSymbolEnd = htmlx.indexOf(':catch', catchStart) + ':catch'.length;
@@ -1995,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()}<>`);
     }
 }
 
@@ -2103,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;
@@ -2120,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);
@@ -2141,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;
@@ -2233,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()}<>`);
@@ -2243,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);
@@ -2662,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)
@@ -2753,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);
@@ -2765,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) {
@@ -2788,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) {
@@ -2799,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() {
@@ -2811,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) {
@@ -2820,7 +2943,7 @@ class TemplateScopeManager {
             this.value = this.value.parent;
         }
     }
-    handleScope(identifierDef) {
+    handleScope(identifierDef, children) {
         if (isIdentifier(identifierDef)) {
             this.value.inits.add(identifierDef.name);
         }
@@ -2829,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));
+                }
+            });
+        }
     }
 }
 
@@ -2944,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;
@@ -2974,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);
@@ -3767,9 +3899,6 @@ class ExportedNames {
             `\n    /**accessor*/\n    set ${name}(_) {}`)
             .join('');
     }
-    setUses$$Props() {
-        this.uses$$Props = true;
-    }
     /**
      * Marks a top level declaration as a possible export
      * which could be exported through `export { .. }` later.
@@ -3866,6 +3995,9 @@ class ExportedNames {
                 '...__sveltets_1_ensureRightProps<Partial<$$Props>>({' +
                 this.createReturnElements(lets, false).join(',') +
                 '}), ...{} as unknown as $$Props, ...{' +
+                // We add other exports of classes and functions here because
+                // they need to appear in the props object in order to properly
+                // type bind:xx but they are not needed to be part of $$Props
                 this.createReturnElements(others, false).join(', ') +
                 '} as {' +
                 this.createReturnElementsType(others).join(',') +
@@ -4099,8 +4231,9 @@ class Scripts {
 }
 
 function attributeStrValueAsJsExpression(attr) {
-    if (attr.value.length == 0)
+    if (attr.value.length == 0) {
         return "''"; //wut?
+    }
     //handle single value
     if (attr.value.length == 1) {
         const attrVal = attr.value[0];
@@ -4133,6 +4266,12 @@ class SlotHandler {
         }
         return resolved;
     }
+    /**
+     * Returns a string which expresses the given identifier unpacked to
+     * the top level in order to express the slot types correctly later on.
+     *
+     * Example: {#each items as item} ---> __sveltets_1_unwrapArr(items)
+     */
     getResolveExpressionStr(identifierDef, scope, initExpression) {
         const { name } = identifierDef;
         const owner = scope.getOwner(name);
@@ -4201,6 +4340,10 @@ class SlotHandler {
             slotName
         }));
     }
+    /**
+     * Resolves the slot expression to a string that can be used
+     * in the props-object in the return type of the render function
+     */
     resolveExpression(expression, scope) {
         let resolved = this.resolvedExpression.get(expression);
         if (resolved) {
@@ -4213,8 +4356,9 @@ class SlotHandler {
             enter(node, parent, prop) {
                 if (node.type === 'Identifier') {
                     if (parent) {
-                        if (isMember$1(parent, prop))
+                        if (isMember$1(parent, prop)) {
                             return;
+                        }
                         if (isObjectKey(parent, prop)) {
                             return;
                         }
@@ -4257,10 +4401,18 @@ class SlotHandler {
         //collect attributes
         const attributes = new Map();
         for (const attr of node.attributes) {
-            if (attr.name == 'name')
+            if (attr.name == 'name') {
                 continue;
-            if (!((_a = attr.value) === null || _a === void 0 ? void 0 : _a.length))
+            }
+            if (attr.type === 'Spread') {
+                const rawName = attr.expression.name;
+                const init = scope.getInit(rawName);
+                const name = init ? this.resolved.get(init) : rawName;
+                attributes.set(`__spread__${name}`, name);
+            }
+            if (!((_a = attr.value) === null || _a === void 0 ? void 0 : _a.length)) {
                 continue;
+            }
             if (attributeValueIsString(attr)) {
                 attributes.set(attr.name, attributeStrValueAsJsExpression(attr));
                 continue;
@@ -4325,10 +4477,12 @@ function handleStore(node, parent, str) {
     // handle $store++, $store--, ++$store, --$store
     if (parent.type == 'UpdateExpression') {
         let simpleOperator;
-        if (parent.operator === '++')
+        if (parent.operator === '++') {
             simpleOperator = '+';
-        if (parent.operator === '--')
+        }
+        if (parent.operator === '--') {
             simpleOperator = '-';
+        }
         if (simpleOperator) {
             const storename = node.name.slice(1); // drop the $
             str.overwrite(parent.start, parent.end, `${storename}.set( $${storename} ${simpleOperator} 1)`);
@@ -4691,6 +4845,25 @@ class Generics {
     }
 }
 
+/**
+ * move imports to top of script so they appear outside our render function
+ */
+function handleImportDeclaration(node, str, astOffset, scriptStart) {
+    var _a;
+    const comments = (_a = ts__default['default'].getLeadingCommentRanges(node.getFullText(), 0)) !== null && _a !== void 0 ? _a : [];
+    for (const comment of comments) {
+        const commentEnd = node.pos + comment.end + astOffset;
+        str.move(node.pos + comment.pos + astOffset, commentEnd, scriptStart + 1);
+        if (comment.hasTrailingNewLine) {
+            str.overwrite(commentEnd - 1, commentEnd, str.original[commentEnd - 1] + '\n');
+        }
+    }
+    str.move(node.getStart() + astOffset, node.end + astOffset, scriptStart + 1);
+    //add in a \n
+    const originalEndChar = str.original[node.end + astOffset - 1];
+    str.overwrite(node.end + astOffset - 1, node.end + astOffset, originalEndChar + '\n');
+}
+
 function processInstanceScriptContent(str, script, events, implicitStoreValues, mode) {
     const htmlx = str.original;
     const scriptContent = htmlx.substring(script.content.start, script.content.end);
@@ -4790,7 +4963,12 @@ function processInstanceScriptContent(str, script, events, implicitStoreValues,
         // - in order to get ts errors if store is not assignable to SvelteStore
         // - use $store variable defined above to get ts flow control
         const dollar = str.original.indexOf('$', ident.getStart() + astOffset);
-        const getPrefix = isSafeToPrefixWithSemicolon(ident) ? ';' : '';
+        const getPrefix = isSafeToPrefixWithSemicolon(ident)
+            ? ';'
+            : ts__namespace.isShorthandPropertyAssignment(parent)
+                ? // { $store } --> { $store: __sveltets_1_store_get(..)}
+                    ident.text + ': '
+                : '';
         str.overwrite(dollar, dollar + 1, getPrefix + '(__sveltets_1_store_get(');
         str.prependLeft(ident.end + astOffset, `), $${storename})`);
     };
@@ -4861,7 +5039,7 @@ function processInstanceScriptContent(str, script, events, implicitStoreValues,
             uses$$SlotsInterface = true;
         }
         if (is$$PropsDeclaration(node)) {
-            exportedNames.setUses$$Props();
+            exportedNames.uses$$Props = true;
         }
         if (ts__namespace.isVariableStatement(node)) {
             exportedNames.handleVariableStatement(node, parent);
@@ -4886,11 +5064,7 @@ function processInstanceScriptContent(str, script, events, implicitStoreValues,
             exportedNames.handleExportDeclaration(node);
         }
         if (ts__namespace.isImportDeclaration(node)) {
-            //move imports to top of script so they appear outside our render function
-            str.move(node.getStart() + astOffset, node.end + astOffset, script.start + 1);
-            //add in a \n
-            const originalEndChar = str.original[node.end + astOffset - 1];
-            str.overwrite(node.end + astOffset - 1, node.end + astOffset, originalEndChar + '\n');
+            handleImportDeclaration(node, str, astOffset, script.start);
             // Check if import is the event dispatcher
             events.checkIfImportIsEventDispatcher(node);
         }
@@ -5072,7 +5246,7 @@ function addComponentExport(params) {
         addSimpleComponentExport(params);
     }
 }
-function addGenericsComponentExport({ strictEvents, uses$$propsOr$$restProps, exportedNames, componentDocumentation, fileName, mode, usesAccessors, str, generics }) {
+function addGenericsComponentExport({ strictEvents, canHaveAnyProp, exportedNames, componentDocumentation, fileName, mode, usesAccessors, str, generics }) {
     const genericsDef = generics.toDefinitionString();
     const genericsRef = generics.toReferencesString();
     const doc = componentDocumentation.getFormatted();
@@ -5083,7 +5257,7 @@ function addGenericsComponentExport({ strictEvents, uses$$propsOr$$restProps, ex
     let statement = `
 class __sveltets_Render${genericsDef} {
     props() {
-        return ${props(true, uses$$propsOr$$restProps, exportedNames, `render${genericsRef}()`)}.props;
+        return ${props(true, canHaveAnyProp, exportedNames, `render${genericsRef}()`)}.props;
     }
     events() {
         return ${events(strictEvents, `render${genericsRef}()`)}.events;
@@ -5112,8 +5286,8 @@ class __sveltets_Render${genericsDef} {
     }
     str.append(statement);
 }
-function addSimpleComponentExport({ strictEvents, isTsFile, uses$$propsOr$$restProps, exportedNames, componentDocumentation, fileName, mode, usesAccessors, str }) {
-    const propDef = props(isTsFile, uses$$propsOr$$restProps, exportedNames, events(strictEvents, 'render()'));
+function addSimpleComponentExport({ strictEvents, isTsFile, canHaveAnyProp, exportedNames, componentDocumentation, fileName, mode, usesAccessors, str }) {
+    const propDef = props(isTsFile, canHaveAnyProp, exportedNames, events(strictEvents, 'render()'));
     const doc = componentDocumentation.getFormatted();
     const className = fileName && classNameFromFilename(fileName, mode !== 'dts');
     let statement;
@@ -5151,13 +5325,13 @@ function addSimpleComponentExport({ strictEvents, isTsFile, uses$$propsOr$$restP
 function events(strictEvents, renderStr) {
     return strictEvents ? renderStr : `__sveltets_1_with_any_event(${renderStr})`;
 }
-function props(isTsFile, uses$$propsOr$$restProps, exportedNames, renderStr) {
+function props(isTsFile, canHaveAnyProp, exportedNames, renderStr) {
     if (isTsFile) {
-        return uses$$propsOr$$restProps ? `__sveltets_1_with_any(${renderStr})` : renderStr;
+        return canHaveAnyProp ? `__sveltets_1_with_any(${renderStr})` : renderStr;
     }
     else {
         const optionalProps = exportedNames.createOptionalPropsArray();
-        const partial = `__sveltets_1_partial${uses$$propsOr$$restProps ? '_with_any' : ''}`;
+        const partial = `__sveltets_1_partial${canHaveAnyProp ? '_with_any' : ''}`;
         return optionalProps.length > 0
             ? `${partial}([${optionalProps.join(',')}], ${renderStr})`
             : `${partial}(${renderStr})`;
@@ -5238,7 +5412,9 @@ function createRenderFunction({ str, scriptTag, scriptDestination, slots, events
             Array.from(slots.entries())
                 .map(([name, attrs]) => {
                 const attrsAsString = Array.from(attrs.entries())
-                    .map(([exportName, expr]) => `${exportName}:${expr}`)
+                    .map(([exportName, expr]) => exportName.startsWith('__spread__')
+                    ? `...${expr}`
+                    : `${exportName}:${expr}`)
                     .join(', ');
                 return `'${name}': {${attrsAsString}}`;
             })
@@ -5518,7 +5694,7 @@ function svelte2tsx(svelte, options = {}) {
     }
     addComponentExport({
         str,
-        uses$$propsOr$$restProps: uses$$props || uses$$restProps,
+        canHaveAnyProp: !exportedNames.uses$$Props && (uses$$props || uses$$restProps),
         strictEvents: events.hasStrictEvents(),
         isTsFile: options === null || options === void 0 ? void 0 : options.isTsFile,
         exportedNames,