svelte2tsx 0.7.36 → 0.7.37

package/index.js

@@ -2037,7 +2037,7 @@ class Element {
         this.isSelfclosing = this.computeIsSelfclosing();
         this.startTagStart = this.node.start;
         this.startTagEnd = this.computeStartTagEnd();
-        const tagEnd = this.startTagStart + this.node.name.length + 1;
+        const tagEnd = (this.tagNameEnd = 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))) {
@@ -2143,7 +2143,16 @@ class Element {
             this.endTransformation.push('}');
         }
         if (this.isSelfclosing) {
-            transform(this.str, this.startTagStart, this.startTagEnd, [
+            // The transformation is the whole start tag + <, ex: <span
+            // To avoid the end tag transform being moved to before the tag name,
+            // manually remove the first character and let the `transform` function skip removing unused
+            let transformEnd = this.startTagEnd;
+            if (this.str.original[transformEnd - 1] !== '>' &&
+                (transformEnd === this.tagNameEnd || transformEnd === this.tagNameEnd + 1)) {
+                transformEnd = this.startTagStart;
+                this.str.remove(this.startTagStart, this.startTagStart + 1);
+            }
+            transform(this.str, this.startTagStart, transformEnd, [
                 // 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
@@ -2227,7 +2236,7 @@ class Element {
             default: {
                 createElementStatement = [
                     `${createElement}("`,
-                    [this.node.start + 1, this.node.start + 1 + this.node.name.length],
+                    [this.node.start + 1, this.tagNameEnd],
                     `"${addActions()}, {`
                 ];
                 break;
@@ -2314,7 +2323,7 @@ class InlineComponent {
         this.isSelfclosing = this.computeIsSelfclosing();
         this.startTagStart = this.node.start;
         this.startTagEnd = this.computeStartTagEnd();
-        const tagEnd = this.startTagStart + this.node.name.length + 1;
+        const tagEnd = (this.tagNameEnd = 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))) {
@@ -2449,7 +2458,7 @@ class InlineComponent {
             if (endStart === -1) {
                 // Can happen in loose parsing mode when there's no closing tag
                 endStart = this.node.end;
-                this.startTagEnd = this.node.end - 1;
+                this.startTagEnd = Math.max(this.node.end - 1, this.tagNameEnd);
             }
             else {
                 endStart += this.node.start;
@@ -2459,7 +2468,15 @@ class InlineComponent {
                 this.endTransformation.push([endStart + 2, endStart + this.node.name.length + 2]);
             }
             this.endTransformation.push('}');
-            transform(this.str, this.startTagStart, this.startTagEnd, [
+            let transformationEnd = this.startTagEnd;
+            // The transformation is the whole start tag + <, ex: <Comp
+            // To avoid the "cannot move inside itself" error,
+            // manually remove the first character and let the transform function skip removing unused
+            if (transformationEnd === this.tagNameEnd) {
+                transformationEnd = this.startTagStart;
+                this.str.remove(this.startTagStart, this.startTagStart + 1);
+            }
+            transform(this.str, this.startTagStart, transformationEnd, [
                 // See comment above why this goes first
                 ...namedSlotLetTransformation,
                 ...this.startTransformation,
@@ -3828,6 +3845,9 @@ function isNewGroup(sourceFile, topLevelImportDecl, scanner) {
     }
     return false;
 }
+function getTopLevelImports(sourceFile) {
+    return sourceFile.statements.filter(ts.isImportDeclaration).sort((a, b) => a.end - b.end);
+}
 
 /**
  * Get the constructor type of a component node
@@ -6082,9 +6102,15 @@ class HoistableInterfaces {
         if (ts.isInterfaceDeclaration(node)) {
             this.module_types.add(node.name.text);
         }
+        if (ts.isEnumDeclaration(node)) {
+            this.module_types.add(node.name.text);
+        }
+        if (ts.isModuleDeclaration(node) && ts.isIdentifier(node.name)) {
+            this.module_types.add(node.name.text);
+        }
     }
     analyzeInstanceScriptNode(node) {
-        var _a, _b, _c, _d;
+        var _a, _b, _c, _d, _e;
         // Handle Import Declarations
         if (ts.isImportDeclaration(node) && node.importClause) {
             const is_type_only = node.importClause.isTypeOnly;
@@ -6130,6 +6156,17 @@ class HoistableInterfaces {
                     });
                 }
             });
+            (_c = node.heritageClauses) === null || _c === void 0 ? void 0 : _c.forEach((clause) => {
+                clause.types.forEach((type) => {
+                    if (ts.isIdentifier(type.expression)) {
+                        const type_name = type.expression.text;
+                        if (!generics.includes(type_name)) {
+                            type_dependencies.add(type_name);
+                        }
+                    }
+                    this.collectTypeDependencies(type, type_dependencies, value_dependencies, generics);
+                });
+            });
             if (this.module_types.has(interface_name)) {
                 // shadowed; we can't hoist
                 this.disallowed_types.add(interface_name);
@@ -6147,7 +6184,7 @@ class HoistableInterfaces {
             const alias_name = node.name.text;
             const type_dependencies = new Set();
             const value_dependencies = new Set();
-            const generics = (_d = (_c = node.typeParameters) === null || _c === void 0 ? void 0 : _c.map((param) => param.name.text)) !== null && _d !== void 0 ? _d : [];
+            const generics = (_e = (_d = node.typeParameters) === null || _d === void 0 ? void 0 : _d.map((param) => param.name.text)) !== null && _e !== void 0 ? _e : [];
             this.collectTypeDependencies(node.type, type_dependencies, value_dependencies, generics);
             if (this.module_types.has(alias_name)) {
                 // shadowed; we can't hoist
@@ -6189,13 +6226,20 @@ class HoistableInterfaces {
         if (ts.isEnumDeclaration(node)) {
             this.disallowed_values.add(node.name.text);
         }
+        // namespace declaration should not be in the instance script.
+        // Only adding the top-level name to the disallowed list,
+        // so that at least there won't a confusing error message of "can't find namespace Foo"
+        if (ts.isModuleDeclaration(node) && ts.isIdentifier(node.name)) {
+            this.disallowed_types.add(node.name.text);
+            this.disallowed_values.add(node.name.text);
+        }
     }
     analyze$propsRune(node) {
         var _a, _b;
         if (((_a = node.initializer.typeArguments) === null || _a === void 0 ? void 0 : _a.length) > 0 || node.type) {
             const generic_arg = ((_b = node.initializer.typeArguments) === null || _b === void 0 ? void 0 : _b[0]) || node.type;
             if (ts.isTypeReferenceNode(generic_arg)) {
-                const name = this.getEntityNameText(generic_arg.typeName);
+                const name = this.getEntityNameRoot(generic_arg.typeName);
                 const interface_node = this.interface_map.get(name);
                 if (interface_node) {
                     this.props_interface.name = name;
@@ -6316,30 +6360,31 @@ class HoistableInterfaces {
     collectTypeDependencies(type_node, type_dependencies, value_dependencies, generics) {
         const walk = (node) => {
             if (ts.isTypeReferenceNode(node)) {
-                const type_name = this.getEntityNameText(node.typeName);
+                const type_name = this.getEntityNameRoot(node.typeName);
                 if (!generics.includes(type_name)) {
                     type_dependencies.add(type_name);
                 }
             }
             else if (ts.isTypeQueryNode(node)) {
                 // Handle 'typeof' expressions: e.g., foo: typeof bar
-                value_dependencies.add(this.getEntityNameText(node.exprName));
+                value_dependencies.add(this.getEntityNameRoot(node.exprName));
             }
             ts.forEachChild(node, walk);
         };
         walk(type_node);
     }
     /**
-     * Retrieves the full text of an EntityName (handles nested names).
+     * Retrieves the top-level variable/namespace of an EntityName (handles nested names).
+     * ex: `foo.bar.baz` -> `foo`
      * @param entity_name The EntityName to extract text from.
-     * @returns The full name as a string.
+     * @returns The top-level name as a string.
      */
-    getEntityNameText(entity_name) {
+    getEntityNameRoot(entity_name) {
         if (ts.isIdentifier(entity_name)) {
             return entity_name.text;
         }
         else {
-            return this.getEntityNameText(entity_name.left) + '.' + entity_name.right.text;
+            return this.getEntityNameRoot(entity_name.left);
         }
     }
 }
@@ -6960,10 +7005,10 @@ class ExportedNames {
         }
         return '';
     }
-    createReturnElements(names, dontAddTypeDef, omitTyped = false) {
+    createReturnElements(names, dontAddTypeDef, onlyTyped = false) {
         return names
             .map(([key, value]) => {
-            if (omitTyped && value.type)
+            if (onlyTyped && !value.type)
                 return;
             // Important to not use shorthand props for rename functionality
             return `${dontAddTypeDef && value.doc ? `\n${value.doc}` : ''}${value.identifierText || key}: ${key}`;
@@ -7383,7 +7428,7 @@ function handleImportDeclaration(node, str, astOffset, scriptStart, sourceFile)
  */
 function handleFirstInstanceImport(tsAst, astOffset, hasModuleScript, str) {
     var _a;
-    const imports = tsAst.statements.filter(ts.isImportDeclaration).sort((a, b) => a.end - b.end);
+    const imports = getTopLevelImports(tsAst);
     const firstImport = imports[0];
     if (!firstImport) {
         return;
@@ -7887,14 +7932,26 @@ function svelte2tsx(svelte, options = { parse: compiler.parse }) {
         exportedNames.hoistableInterfaces.analyzeSnippets(rootSnippets);
     }
     if (moduleScriptTag || scriptTag) {
+        let snippetHoistTargetForModule = 0;
+        if (rootSnippets.length) {
+            if (scriptTag) {
+                snippetHoistTargetForModule = scriptTag.start + 1; // +1 because imports are also moved at that position, and we want to move interfaces after imports
+            }
+            else {
+                const imports = getTopLevelImports(moduleAst.tsAst);
+                const lastImport = imports[imports.length - 1];
+                snippetHoistTargetForModule = lastImport
+                    ? lastImport.end + moduleAst.astOffset
+                    : moduleAst.astOffset;
+                str.appendLeft(snippetHoistTargetForModule, '\n');
+            }
+        }
         for (const [start, end, globals] of rootSnippets) {
             const hoist_to_module = moduleScriptTag &&
                 (globals.size === 0 ||
                     [...globals.keys()].every((id) => exportedNames.hoistableInterfaces.isAllowedReference(id)));
             if (hoist_to_module) {
-                str.move(start, end, scriptTag
-                    ? scriptTag.start + 1 // +1 because imports are also moved at that position, and we want to move interfaces after imports
-                    : instanceScriptTarget);
+                str.move(start, end, snippetHoistTargetForModule);
             }
             else if (scriptTag) {
                 str.move(start, end, renderFunctionStart);

package/index.mjs

@@ -2017,7 +2017,7 @@ class Element {
         this.isSelfclosing = this.computeIsSelfclosing();
         this.startTagStart = this.node.start;
         this.startTagEnd = this.computeStartTagEnd();
-        const tagEnd = this.startTagStart + this.node.name.length + 1;
+        const tagEnd = (this.tagNameEnd = 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))) {
@@ -2123,7 +2123,16 @@ class Element {
             this.endTransformation.push('}');
         }
         if (this.isSelfclosing) {
-            transform(this.str, this.startTagStart, this.startTagEnd, [
+            // The transformation is the whole start tag + <, ex: <span
+            // To avoid the end tag transform being moved to before the tag name,
+            // manually remove the first character and let the `transform` function skip removing unused
+            let transformEnd = this.startTagEnd;
+            if (this.str.original[transformEnd - 1] !== '>' &&
+                (transformEnd === this.tagNameEnd || transformEnd === this.tagNameEnd + 1)) {
+                transformEnd = this.startTagStart;
+                this.str.remove(this.startTagStart, this.startTagStart + 1);
+            }
+            transform(this.str, this.startTagStart, transformEnd, [
                 // 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
@@ -2207,7 +2216,7 @@ class Element {
             default: {
                 createElementStatement = [
                     `${createElement}("`,
-                    [this.node.start + 1, this.node.start + 1 + this.node.name.length],
+                    [this.node.start + 1, this.tagNameEnd],
                     `"${addActions()}, {`
                 ];
                 break;
@@ -2294,7 +2303,7 @@ class InlineComponent {
         this.isSelfclosing = this.computeIsSelfclosing();
         this.startTagStart = this.node.start;
         this.startTagEnd = this.computeStartTagEnd();
-        const tagEnd = this.startTagStart + this.node.name.length + 1;
+        const tagEnd = (this.tagNameEnd = 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))) {
@@ -2429,7 +2438,7 @@ class InlineComponent {
             if (endStart === -1) {
                 // Can happen in loose parsing mode when there's no closing tag
                 endStart = this.node.end;
-                this.startTagEnd = this.node.end - 1;
+                this.startTagEnd = Math.max(this.node.end - 1, this.tagNameEnd);
             }
             else {
                 endStart += this.node.start;
@@ -2439,7 +2448,15 @@ class InlineComponent {
                 this.endTransformation.push([endStart + 2, endStart + this.node.name.length + 2]);
             }
             this.endTransformation.push('}');
-            transform(this.str, this.startTagStart, this.startTagEnd, [
+            let transformationEnd = this.startTagEnd;
+            // The transformation is the whole start tag + <, ex: <Comp
+            // To avoid the "cannot move inside itself" error,
+            // manually remove the first character and let the transform function skip removing unused
+            if (transformationEnd === this.tagNameEnd) {
+                transformationEnd = this.startTagStart;
+                this.str.remove(this.startTagStart, this.startTagStart + 1);
+            }
+            transform(this.str, this.startTagStart, transformationEnd, [
                 // See comment above why this goes first
                 ...namedSlotLetTransformation,
                 ...this.startTransformation,
@@ -3808,6 +3825,9 @@ function isNewGroup(sourceFile, topLevelImportDecl, scanner) {
     }
     return false;
 }
+function getTopLevelImports(sourceFile) {
+    return sourceFile.statements.filter(ts.isImportDeclaration).sort((a, b) => a.end - b.end);
+}
 
 /**
  * Get the constructor type of a component node
@@ -6062,9 +6082,15 @@ class HoistableInterfaces {
         if (ts.isInterfaceDeclaration(node)) {
             this.module_types.add(node.name.text);
         }
+        if (ts.isEnumDeclaration(node)) {
+            this.module_types.add(node.name.text);
+        }
+        if (ts.isModuleDeclaration(node) && ts.isIdentifier(node.name)) {
+            this.module_types.add(node.name.text);
+        }
     }
     analyzeInstanceScriptNode(node) {
-        var _a, _b, _c, _d;
+        var _a, _b, _c, _d, _e;
         // Handle Import Declarations
         if (ts.isImportDeclaration(node) && node.importClause) {
             const is_type_only = node.importClause.isTypeOnly;
@@ -6110,6 +6136,17 @@ class HoistableInterfaces {
                     });
                 }
             });
+            (_c = node.heritageClauses) === null || _c === void 0 ? void 0 : _c.forEach((clause) => {
+                clause.types.forEach((type) => {
+                    if (ts.isIdentifier(type.expression)) {
+                        const type_name = type.expression.text;
+                        if (!generics.includes(type_name)) {
+                            type_dependencies.add(type_name);
+                        }
+                    }
+                    this.collectTypeDependencies(type, type_dependencies, value_dependencies, generics);
+                });
+            });
             if (this.module_types.has(interface_name)) {
                 // shadowed; we can't hoist
                 this.disallowed_types.add(interface_name);
@@ -6127,7 +6164,7 @@ class HoistableInterfaces {
             const alias_name = node.name.text;
             const type_dependencies = new Set();
             const value_dependencies = new Set();
-            const generics = (_d = (_c = node.typeParameters) === null || _c === void 0 ? void 0 : _c.map((param) => param.name.text)) !== null && _d !== void 0 ? _d : [];
+            const generics = (_e = (_d = node.typeParameters) === null || _d === void 0 ? void 0 : _d.map((param) => param.name.text)) !== null && _e !== void 0 ? _e : [];
             this.collectTypeDependencies(node.type, type_dependencies, value_dependencies, generics);
             if (this.module_types.has(alias_name)) {
                 // shadowed; we can't hoist
@@ -6169,13 +6206,20 @@ class HoistableInterfaces {
         if (ts.isEnumDeclaration(node)) {
             this.disallowed_values.add(node.name.text);
         }
+        // namespace declaration should not be in the instance script.
+        // Only adding the top-level name to the disallowed list,
+        // so that at least there won't a confusing error message of "can't find namespace Foo"
+        if (ts.isModuleDeclaration(node) && ts.isIdentifier(node.name)) {
+            this.disallowed_types.add(node.name.text);
+            this.disallowed_values.add(node.name.text);
+        }
     }
     analyze$propsRune(node) {
         var _a, _b;
         if (((_a = node.initializer.typeArguments) === null || _a === void 0 ? void 0 : _a.length) > 0 || node.type) {
             const generic_arg = ((_b = node.initializer.typeArguments) === null || _b === void 0 ? void 0 : _b[0]) || node.type;
             if (ts.isTypeReferenceNode(generic_arg)) {
-                const name = this.getEntityNameText(generic_arg.typeName);
+                const name = this.getEntityNameRoot(generic_arg.typeName);
                 const interface_node = this.interface_map.get(name);
                 if (interface_node) {
                     this.props_interface.name = name;
@@ -6296,30 +6340,31 @@ class HoistableInterfaces {
     collectTypeDependencies(type_node, type_dependencies, value_dependencies, generics) {
         const walk = (node) => {
             if (ts.isTypeReferenceNode(node)) {
-                const type_name = this.getEntityNameText(node.typeName);
+                const type_name = this.getEntityNameRoot(node.typeName);
                 if (!generics.includes(type_name)) {
                     type_dependencies.add(type_name);
                 }
             }
             else if (ts.isTypeQueryNode(node)) {
                 // Handle 'typeof' expressions: e.g., foo: typeof bar
-                value_dependencies.add(this.getEntityNameText(node.exprName));
+                value_dependencies.add(this.getEntityNameRoot(node.exprName));
             }
             ts.forEachChild(node, walk);
         };
         walk(type_node);
     }
     /**
-     * Retrieves the full text of an EntityName (handles nested names).
+     * Retrieves the top-level variable/namespace of an EntityName (handles nested names).
+     * ex: `foo.bar.baz` -> `foo`
      * @param entity_name The EntityName to extract text from.
-     * @returns The full name as a string.
+     * @returns The top-level name as a string.
      */
-    getEntityNameText(entity_name) {
+    getEntityNameRoot(entity_name) {
         if (ts.isIdentifier(entity_name)) {
             return entity_name.text;
         }
         else {
-            return this.getEntityNameText(entity_name.left) + '.' + entity_name.right.text;
+            return this.getEntityNameRoot(entity_name.left);
         }
     }
 }
@@ -6940,10 +6985,10 @@ class ExportedNames {
         }
         return '';
     }
-    createReturnElements(names, dontAddTypeDef, omitTyped = false) {
+    createReturnElements(names, dontAddTypeDef, onlyTyped = false) {
         return names
             .map(([key, value]) => {
-            if (omitTyped && value.type)
+            if (onlyTyped && !value.type)
                 return;
             // Important to not use shorthand props for rename functionality
             return `${dontAddTypeDef && value.doc ? `\n${value.doc}` : ''}${value.identifierText || key}: ${key}`;
@@ -7363,7 +7408,7 @@ function handleImportDeclaration(node, str, astOffset, scriptStart, sourceFile)
  */
 function handleFirstInstanceImport(tsAst, astOffset, hasModuleScript, str) {
     var _a;
-    const imports = tsAst.statements.filter(ts.isImportDeclaration).sort((a, b) => a.end - b.end);
+    const imports = getTopLevelImports(tsAst);
     const firstImport = imports[0];
     if (!firstImport) {
         return;
@@ -7867,14 +7912,26 @@ function svelte2tsx(svelte, options = { parse }) {
         exportedNames.hoistableInterfaces.analyzeSnippets(rootSnippets);
     }
     if (moduleScriptTag || scriptTag) {
+        let snippetHoistTargetForModule = 0;
+        if (rootSnippets.length) {
+            if (scriptTag) {
+                snippetHoistTargetForModule = scriptTag.start + 1; // +1 because imports are also moved at that position, and we want to move interfaces after imports
+            }
+            else {
+                const imports = getTopLevelImports(moduleAst.tsAst);
+                const lastImport = imports[imports.length - 1];
+                snippetHoistTargetForModule = lastImport
+                    ? lastImport.end + moduleAst.astOffset
+                    : moduleAst.astOffset;
+                str.appendLeft(snippetHoistTargetForModule, '\n');
+            }
+        }
         for (const [start, end, globals] of rootSnippets) {
             const hoist_to_module = moduleScriptTag &&
                 (globals.size === 0 ||
                     [...globals.keys()].every((id) => exportedNames.hoistableInterfaces.isAllowedReference(id)));
             if (hoist_to_module) {
-                str.move(start, end, scriptTag
-                    ? scriptTag.start + 1 // +1 because imports are also moved at that position, and we want to move interfaces after imports
-                    : instanceScriptTarget);
+                str.move(start, end, snippetHoistTargetForModule);
             }
             else if (scriptTag) {
                 str.move(start, end, renderFunctionStart);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "svelte2tsx",
-  "version": "0.7.36",
+  "version": "0.7.37",
   "description": "Convert Svelte components to TSX for type checking",
   "author": "The Svelte Community",
   "license": "MIT",