svelte2tsx 0.4.4 → 0.4.8

package/index.js

@@ -1494,6 +1494,12 @@ function surroundWithIgnoreComments(str) {
     return IGNORE_START_COMMENT + str + IGNORE_END_COMMENT;
 }
 
+/**
+ * Get the constructor type of a component node
+ * @param node The component node to infer the this type from
+ * @param thisValue If node is svelte:component, you may pass the value
+ *                  of this={..} to use that instead of the more general componentType
+ */
 function getTypeForComponent(node) {
     if (node.name === 'svelte:component' || node.name === 'svelte:self') {
         return '__sveltets_1_componentType()';
@@ -1502,6 +1508,36 @@ function getTypeForComponent(node) {
         return node.name;
     }
 }
+/**
+ * Get the instance type of a node from its constructor.
+ */
+function getInstanceTypeSimple(node, str) {
+    const instanceOf = (str) => `__sveltets_1_instanceOf(${str})`;
+    switch (node.type) {
+        case 'InlineComponent':
+            if (node.name === 'svelte:component' && node.expression) {
+                const thisVal = str.original.substring(node.expression.start, node.expression.end);
+                return `new (${thisVal})({target: __sveltets_1_any(''), props: __sveltets_1_any('')})`;
+            }
+            else if (node.name === 'svelte:component' || node.name === 'svelte:self') {
+                return instanceOf('__sveltets_1_componentType()');
+            }
+            else {
+                return `new ${node.name}({target: __sveltets_1_any(''), props: __sveltets_1_any('')})`;
+            }
+        case 'Element':
+            return instanceOf(`__sveltets_1_ctorOf(__sveltets_1_mapElementTag('${node.name}'))`);
+        case 'Body':
+            return instanceOf('HTMLBodyElement');
+        case 'Slot': // Web Components only
+            return instanceOf('HTMLSlotElement');
+    }
+}
+/**
+ * Get the instance type of a node from its constructor.
+ * If it's a component, pass in the exact props. This ensures that
+ * the component instance has the right type in case of generic prop types.
+ */
 function getInstanceType(node, originalStr, replacedPropValues = []) {
     if (node.name === 'svelte:component' || node.name === 'svelte:self') {
         return '__sveltets_1_instanceOf(__sveltets_1_componentType())';
@@ -1564,7 +1600,10 @@ function getNameValuePairsFromAttributes(node, originalStr) {
                 return { name, value: name, identifier: name };
             }
             if (val.type === 'Text') {
-                return { name, value: `'${val.data || val.raw}'` };
+                const quote = ['"', "'"].includes(originalStr[val.start - 1])
+                    ? originalStr[val.start - 1]
+                    : "'";
+                return { name, value: `${quote}${val.data || val.raw}${quote}` };
             }
             if (val.type === 'MustacheTag') {
                 const valueStr = originalStr.substring(val.start + 1, val.end - 1);
@@ -1599,18 +1638,6 @@ function sanitizePropName(name) {
         .map((char) => (/[0-9A-Za-z$_]/.test(char) ? char : '_'))
         .join('');
 }
-function getThisType(node) {
-    switch (node.type) {
-        case 'InlineComponent':
-            return getTypeForComponent(node);
-        case 'Element':
-            return `__sveltets_1_ctorOf(__sveltets_1_mapElementTag('${node.name}'))`;
-        case 'Body':
-            return 'HTMLBodyElement';
-        case 'Slot': // Web Components only
-            return 'HTMLSlotElement';
-    }
-}
 function beforeStart(start) {
     return start - 1;
 }
@@ -1656,11 +1683,12 @@ function usesLet(node) {
  */
 function handleActionDirective(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) {
-        str.appendLeft(attr.end, `(__sveltets_1_mapElementTag('${parent.name}')))}`);
+        str.appendLeft(attr.end, `(__sveltets_1_mapElementTag('${name}')))}`);
         return;
     }
-    str.overwrite(attr.start + `use:${attr.name}`.length, attr.expression.start, `(__sveltets_1_mapElementTag('${parent.name}'),(`);
+    str.overwrite(attr.start + `use:${attr.name}`.length, attr.expression.start, `(__sveltets_1_mapElementTag('${name}'),(`);
     str.appendLeft(attr.expression.end, ')))');
     const lastChar = htmlx[attr.end - 1];
     if (isQuote(lastChar)) {
@@ -1977,6 +2005,11 @@ const oneWayBindingAttributes = new Map(['clientWidth', 'clientHeight', 'offsetW
     e,
     'HTMLMediaElement'
 ])));
+/**
+ * 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']);
 /**
  * Transform bind:xxx into something that conforms to JSX
  */
@@ -2002,11 +2035,19 @@ function handleBinding(htmlx, str, attr, el) {
     ];
     //bind this
     if (attr.name === 'this' && supportsBindThis.includes(el.type)) {
-        const thisType = getThisType(el);
+        // 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.
+        // Some notes:
+        // - 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.
+        // - This doesn't do a 100% correct job of infering the instance type in case someone used generics for input props.
+        //   For now it errs on the side of "no false positives" at the cost of maybe some missed type bugs
+        const thisType = getInstanceTypeSimple(el, str);
         if (thisType) {
-            str.remove(attr.start, attr.expression.start);
-            str.appendLeft(attr.expression.start, `{...__sveltets_1_ensureType(${thisType}, `);
-            str.overwrite(attr.expression.end, attr.end, ')}');
+            str.overwrite(attr.start, attr.expression.start, '{...__sveltets_1_empty(');
+            const instanceOfThisAssignment = ' = ' + surroundWithIgnoreComments(thisType) + ')}';
+            str.overwrite(attr.expression.end, attr.end, instanceOfThisAssignment);
             return;
         }
     }
@@ -3091,6 +3132,10 @@ function extractIdentifiers(node, identifiers = []) {
                 // in ts Ast { a = 1 } and { a } are both ShorthandPropertyAssignment
                 extractIdentifiers(child.name, identifiers);
             }
+            else if (ts__default['default'].isPropertyAssignment(child)) {
+                // { a: b }
+                extractIdentifiers(child.initializer, identifiers);
+            }
         });
     }
     else if (ts__default['default'].isArrayLiteralExpression(node)) {
@@ -3164,7 +3209,7 @@ function getNamesFromLabeledStatement(node) {
         // svelte won't let you create a variable with $ prefix (reserved for stores)
         .filter((name) => !name.startsWith('$')));
 }
-function isFirstInAnExpressionStatement(node) {
+function isSafeToPrefixWithSemicolon(node) {
     let parent = node.parent;
     while (parent && !ts__default['default'].isExpressionStatement(parent)) {
         parent = parent.parent;
@@ -3172,7 +3217,13 @@ function isFirstInAnExpressionStatement(node) {
     if (!parent) {
         return false;
     }
-    return parent.getStart() === node.getStart();
+    return (parent.getStart() === node.getStart() &&
+        !(parent.parent &&
+            (ts__default['default'].isIfStatement(parent.parent) ||
+                ts__default['default'].isForStatement(parent.parent) ||
+                ts__default['default'].isForInStatement(parent.parent) ||
+                ts__default['default'].isForOfStatement(parent.parent) ||
+                ts__default['default'].isWhileStatement(parent.parent))));
 }
 
 function is$$EventsDeclaration(node) {
@@ -3471,7 +3522,7 @@ function checkIfImportIsEventDispatcher(node) {
         return;
     }
     const namedImports = (_a = node.importClause) === null || _a === void 0 ? void 0 : _a.namedBindings;
-    if (ts__default['default'].isNamedImports(namedImports)) {
+    if (namedImports && ts__default['default'].isNamedImports(namedImports)) {
         const eventDispatcherImport = namedImports.elements.find(
         // If it's an aliased import, propertyName is set
         (el) => (el.propertyName || el.name).text === 'createEventDispatcher');
@@ -3781,9 +3832,15 @@ class ExportedNames {
     getDoc(target) {
         var _a, _b;
         let doc = undefined;
+        // Traverse `a` one up. If the declaration is part of a declaration list,
+        // the comment is at this point already
+        const variableDeclaration = target === null || target === void 0 ? void 0 : target.parent;
         // Traverse `a` up to `export let a`
         const exportExpr = (_b = (_a = target === null || target === void 0 ? void 0 : target.parent) === null || _a === void 0 ? void 0 : _a.parent) === null || _b === void 0 ? void 0 : _b.parent;
-        if (exportExpr) {
+        if (variableDeclaration) {
+            doc = getLastLeadingDoc(variableDeclaration);
+        }
+        if (exportExpr && !doc) {
             doc = getLastLeadingDoc(exportExpr);
         }
         return doc;
@@ -3928,8 +3985,9 @@ function updatePrepends(str, index, toAppend, removeExisting) {
  * were used as stores are appended with `let $xx = __sveltets_1_store_get(xx)` to create the store variables.
  */
 class ImplicitStoreValues {
-    constructor(storesResolvedInTemplate = [], renderFunctionStart) {
+    constructor(storesResolvedInTemplate = [], renderFunctionStart, storeFromImportsWrapper = (input) => input) {
         this.renderFunctionStart = renderFunctionStart;
+        this.storeFromImportsWrapper = storeFromImportsWrapper;
         this.accessedStores = new Set();
         this.variableDeclarations = [];
         this.reactiveDeclarations = [];
@@ -3989,7 +4047,7 @@ class ImplicitStoreValues {
         if (!storeNames.length) {
             return;
         }
-        const storeDeclarations = surroundWithIgnoreComments(this.createStoreDeclarations(storeNames));
+        const storeDeclarations = this.storeFromImportsWrapper(surroundWithIgnoreComments(this.createStoreDeclarations(storeNames)));
         str.appendRight(this.renderFunctionStart, storeDeclarations);
     }
     createStoreDeclarations(storeNames) {
@@ -4285,10 +4343,19 @@ function handleStore(node, parent, str) {
         }
         return;
     }
+    const dollar = str.original.indexOf('$', node.start);
+    // handle bindings which are transformed to assignments. These need special treatment because
+    // `(__sveltets_1_store_get(foo), foo$) = something` is syntactically invalid
+    // Therefore remove the outer commas. Note: This relies on the binding expression wrapping
+    // this statement with __sveltets_1_empty
+    if (parent.type === 'Binding' && assignmentBindings.has(parent.name)) {
+        str.overwrite(dollar, dollar + 1, '__sveltets_1_store_get(', { contentOnly: true });
+        str.prependLeft(node.end, `), $${storename}`);
+        return;
+    }
     // we change "$store" references into "(__sveltets_1_store_get(store), $store)"
     // - 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('$', node.start);
     str.overwrite(dollar, dollar + 1, '(__sveltets_1_store_get(', { contentOnly: true });
     str.prependLeft(node.end, `), $${storename})`);
 }
@@ -4413,8 +4480,11 @@ class ImplicitTopLevelNames {
         }
         const start = expression.getStart() + this.astOffset;
         const end = expression.getEnd() + this.astOffset;
-        // $: a = { .. }  /  $: a = .. as ..  =>   () => ( .. )
-        if (ts__default['default'].isObjectLiteralExpression(expression) || ts__default['default'].isAsExpression(expression)) {
+        // $: a = { .. }..  /  $: a = .. as ..  =>   () => ( .. )
+        if (ts__default['default'].isObjectLiteralExpression(expression) ||
+            (expression.getText().startsWith('{') &&
+                this.isNodeStartsWithObjectLiteral(expression)) ||
+            ts__default['default'].isAsExpression(expression)) {
             this.str.appendLeft(start, '(');
             this.str.appendRight(end, ')');
         }
@@ -4423,6 +4493,24 @@ class ImplicitTopLevelNames {
         // Not adding ';' at the end because right now this function is only invoked
         // in situations where there is a line break of ; guaranteed to be present (else the code is invalid)
     }
+    isNodeStartsWithObjectLiteral(node) {
+        if (ts__default['default'].isObjectLiteralExpression(node)) {
+            return true;
+        }
+        if (ts__default['default'].isElementAccessExpression(node)) {
+            return this.isNodeStartsWithObjectLiteral(node.expression);
+        }
+        if (ts__default['default'].isBinaryExpression(node)) {
+            return this.isNodeStartsWithObjectLiteral(node.left);
+        }
+        if (ts__default['default'].isConditionalExpression(node)) {
+            return this.isNodeStartsWithObjectLiteral(node.condition);
+        }
+        return node
+            .getChildren()
+            .filter((e) => e.pos === node.pos)
+            .some((child) => this.isNodeStartsWithObjectLiteral(child));
+    }
     modifyCode(rootVariables) {
         for (const node of this.map.values()) {
             const names = getNamesFromLabeledStatement(node);
@@ -4605,7 +4693,7 @@ class Generics {
     }
 }
 
-function processInstanceScriptContent(str, script, events, implicitStoreValues) {
+function processInstanceScriptContent(str, script, events, implicitStoreValues, mode) {
     const htmlx = str.original;
     const scriptContent = htmlx.substring(script.content.start, script.content.end);
     const tsAst = ts__namespace.createSourceFile('component.ts.svelte', scriptContent, ts__namespace.ScriptTarget.Latest, true, ts__namespace.ScriptKind.TS);
@@ -4676,8 +4764,12 @@ function processInstanceScriptContent(str, script, events, implicitStoreValues)
         }
         // handle $store++, $store--, ++$store, --$store
         if ((ts__namespace.isPrefixUnaryExpression(parent) || ts__namespace.isPostfixUnaryExpression(parent)) &&
-            parent.operator !==
-                ts__namespace.SyntaxKind.ExclamationToken /* `!$store` does not need processing */) {
+            ![
+                ts__namespace.SyntaxKind.ExclamationToken,
+                ts__namespace.SyntaxKind.PlusToken,
+                ts__namespace.SyntaxKind.MinusToken,
+                ts__namespace.SyntaxKind.TildeToken // ~$store
+            ].includes(parent.operator) /* `!$store` etc does not need processing */) {
             let simpleOperator;
             if (parent.operator === ts__namespace.SyntaxKind.PlusPlusToken) {
                 simpleOperator = '+';
@@ -4700,7 +4792,7 @@ 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 = isFirstInAnExpressionStatement(ident) ? ';' : '';
+        const getPrefix = isSafeToPrefixWithSemicolon(ident) ? ';' : '';
         str.overwrite(dollar, dollar + 1, getPrefix + '(__sveltets_1_store_get(');
         str.prependLeft(ident.end + astOffset, `), $${storename})`);
     };
@@ -4808,7 +4900,7 @@ function processInstanceScriptContent(str, script, events, implicitStoreValues)
         if (ts__namespace.isImportEqualsDeclaration(node)) {
             const end = node.getEnd() + astOffset;
             if (str.original[end - 1] !== ';') {
-                str.appendLeft(end, ';');
+                preprendStr(str, end, ';');
             }
         }
         if (ts__namespace.isVariableDeclaration(node)) {
@@ -4874,6 +4966,13 @@ function processInstanceScriptContent(str, script, events, implicitStoreValues)
     if (firstImport) {
         str.appendRight(firstImport.getStart() + astOffset, '\n');
     }
+    if (mode === 'dts') {
+        // Transform interface declarations to type declarations because indirectly
+        // using interfaces inside the return type of a function is forbidden.
+        // This is not a problem for intellisense/type inference but it will
+        // break dts generation (file will not be generated).
+        transformInterfacesToTypes(tsAst, str, astOffset);
+    }
     return {
         exportedNames,
         events,
@@ -4884,6 +4983,26 @@ function processInstanceScriptContent(str, script, events, implicitStoreValues)
         generics
     };
 }
+function transformInterfacesToTypes(tsAst, str, astOffset) {
+    tsAst.statements.filter(ts__namespace.isInterfaceDeclaration).forEach((node) => {
+        var _a;
+        str.overwrite(node.getStart() + astOffset, node.getStart() + astOffset + 'interface'.length, 'type');
+        if ((_a = node.heritageClauses) === null || _a === void 0 ? void 0 : _a.length) {
+            const extendsStart = node.heritageClauses[0].getStart() + astOffset;
+            str.overwrite(extendsStart, extendsStart + 'extends'.length, '=');
+            const extendsList = node.heritageClauses[0].types;
+            let prev = extendsList[0];
+            extendsList.slice(1).forEach((heritageClause) => {
+                str.overwrite(prev.getEnd() + astOffset, heritageClause.getStart() + astOffset, ' & ');
+                prev = heritageClause;
+            });
+            str.appendLeft(node.heritageClauses[0].getEnd() + astOffset, ' & ');
+        }
+        else {
+            str.prependLeft(str.original.indexOf('{', node.getStart() + astOffset), '=');
+        }
+    });
+}
 
 function processModuleScriptTag(str, script, implicitStoreValues) {
     const htmlx = str.original;
@@ -5373,7 +5492,7 @@ function svelte2tsx(svelte, options = {}) {
         if (scriptTag.start != instanceScriptTarget) {
             str.move(scriptTag.start, scriptTag.end, instanceScriptTarget);
         }
-        const res = processInstanceScriptContent(str, scriptTag, events, implicitStoreValues);
+        const res = processInstanceScriptContent(str, scriptTag, events, implicitStoreValues, options.mode);
         uses$$props = uses$$props || res.uses$$props;
         uses$$restProps = uses$$restProps || res.uses$$restProps;
         uses$$slots = uses$$slots || res.uses$$slots;
@@ -5397,7 +5516,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));
+        processModuleScriptTag(str, moduleScriptTag, new ImplicitStoreValues(implicitStoreValues.getAccessedStores(), renderFunctionStart, scriptTag ? undefined : (input) => `</>;${input}<>`));
     }
     addComponentExport({
         str,