svelte2tsx 0.7.54 → 0.7.56

package/index.js

@@ -3112,6 +3112,14 @@ function handleConstTag(str, constTag) {
     str.overwrite(withTrailingPropertyAccess(str.original, constTag.expression.end), constTag.end, ';');
 }
 
+/**
+ * `{let x = y}` --> `let x = y;`
+ */
+function handleDeclarationTag(str, declarationTag) {
+    str.remove(declarationTag.start, declarationTag.declaration.start);
+    str.overwrite(declarationTag.declaration.end, declarationTag.end, ';');
+}
+
 /**
  * {@debug a}		--->   ;a;
  * {@debug a, b}	--->   ;a;b;
@@ -3641,6 +3649,34 @@ function hoistSnippetBlock(str, blockOrEl) {
         str.move(node.start, node.end, targetPosition);
     }
 }
+/**
+ * Periscopic's `analyze()` does not treat `<Foo />` template tags as references to `Foo`.
+ * Collect those component names so snippet hoisting does not move snippets that use
+ * instance-scope components into the module script.
+ */
+function collectSnippetComponentGlobals(body) {
+    const names = new Set();
+    for (const root of body !== null && body !== void 0 ? body : []) {
+        walk(root, {
+            enter(node) {
+                var _a;
+                if (node.type === 'InlineComponent') {
+                    if (node.name === 'svelte:component') {
+                        if (((_a = node.expression) === null || _a === void 0 ? void 0 : _a.type) === 'Identifier') {
+                            names.add(node.expression.name);
+                        }
+                    }
+                    else if (node.name !== 'svelte:self' &&
+                        !node.name.startsWith('svelte:') &&
+                        /^([A-Z]|([a-zA-Z]+\.))/.test(node.name)) {
+                        names.add(node.name);
+                    }
+                }
+            }
+        });
+    }
+    return [...names];
+}
 
 /**
  * `{@render foo(x)}` --> `;foo(x);`
@@ -5175,6 +5211,7 @@ function convertHtmlxToJsx(str, ast, tags, options = { svelte5Plus: false }) {
     const rootSnippets = [];
     let element;
     const pendingSnippetHoistCheck = new Set();
+    let elementBeforeSnippet = [];
     let uses$$props = false;
     let uses$$restProps = false;
     let uses$$slots = false;
@@ -5354,12 +5391,14 @@ function convertHtmlxToJsx(str, ast, tags, options = { svelte5Plus: false }) {
                         break;
                     case 'SnippetBlock':
                         scopeStack.push();
-                        handleSnippet(str, node, (element instanceof InlineComponent &&
+                        const parentComponent = (element instanceof InlineComponent &&
                             estreeTypedParent.type === 'InlineComponent') ||
-                            (element instanceof Element &&
-                                element.tagName === 'svelte:boundary')
+                            (element instanceof Element && element.tagName === 'svelte:boundary')
                             ? element
-                            : undefined, emitJsDoc, isTsFile);
+                            : undefined;
+                        elementBeforeSnippet.push(element);
+                        element = undefined;
+                        handleSnippet(str, node, parentComponent, emitJsDoc, isTsFile);
                         if (parent === ast) {
                             // root snippet -> move to instance script or possibly even module script
                             const result = analyze({
@@ -5375,6 +5414,11 @@ function convertHtmlxToJsx(str, ast, tags, options = { svelte5Plus: false }) {
                                     body: node.children // wrong AST, but periscopic doesn't care
                                 }
                             });
+                            for (const name of collectSnippetComponentGlobals(node.children)) {
+                                if (!result.globals.has(name)) {
+                                    result.globals.set(name, { name });
+                                }
+                            }
                             rootSnippets.push([
                                 node.start,
                                 node.end,
@@ -5399,6 +5443,9 @@ function convertHtmlxToJsx(str, ast, tags, options = { svelte5Plus: false }) {
                     case 'ConstTag':
                         handleConstTag(str, node);
                         break;
+                    case 'DeclarationTag':
+                        handleDeclarationTag(str, node);
+                        break;
                     case 'RenderTag':
                         handleRenderTag(str, node);
                         break;
@@ -5554,8 +5601,11 @@ function convertHtmlxToJsx(str, ast, tags, options = { svelte5Plus: false }) {
                     case 'BlockStatement':
                     case 'FunctionDeclaration':
                     case 'ArrowFunctionExpression':
+                        scopeStack.pop();
+                        break;
                     case 'SnippetBlock':
                         scopeStack.pop();
+                        element = elementBeforeSnippet.pop();
                         break;
                     case 'EachBlock':
                         onTemplateScopeLeave();
@@ -7081,6 +7131,7 @@ class ExportedNames {
     }
     handle$propsRune(node) {
         var _a, _b;
+        const bindingLocalNames = [];
         // Check if the $props() rune uses $bindable()
         if (ts.isObjectBindingPattern(node.name)) {
             for (const element of node.name.elements) {
@@ -7100,14 +7151,15 @@ class ExportedNames {
                         if (ts.isCallExpression(call) && ts.isIdentifier(call.expression)) {
                             if (call.expression.text === '$bindable') {
                                 this.$props.bindings.push(name);
+                                bindingLocalNames.push(element.name.text);
                             }
                         }
                     }
                 }
             }
         }
-        if (this.$props.bindings.length > 0) {
-            this.str.appendLeft(node.end + this.astOffset, surroundWithIgnoreComments(';' + this.$props.bindings.map((prop) => prop + ';').join('')));
+        if (bindingLocalNames.length > 0) {
+            this.str.appendLeft(node.end + this.astOffset, surroundWithIgnoreComments(';' + bindingLocalNames.map((prop) => prop + ';').join('')));
         }
         // Easy mode: User uses TypeScript and typed the $props() rune
         if (((_a = node.initializer.typeArguments) === null || _a === void 0 ? void 0 : _a.length) > 0 || node.type) {
@@ -8659,8 +8711,8 @@ function svelte2tsx(svelte, options = { parse: compiler.parse }) {
 
 async function emitDts(config) {
     const svelteMap = await createSvelteMap(config);
-    const { options, filenames } = loadTsconfig(config, svelteMap);
-    const host = await createTsCompilerHost(options, svelteMap);
+    const { options, filenames, absDeclarationDir } = loadTsconfig(config, svelteMap);
+    const host = await createTsCompilerHost(options, svelteMap, absDeclarationDir);
     const program = ts.createProgram(filenames, options, host);
     const result = program.emit();
     const likely_failed_files = result.diagnostics.filter((diagnostic) => {
@@ -8731,6 +8783,9 @@ function loadTsconfig(config, svelteMap) {
     // Add ambient functions so TS knows how to resolve its invocations in the
     // code output of svelte2tsx.
     filenames.push(config.svelteShimsPath);
+    const absDeclarationDir = path__namespace.isAbsolute(config.declarationDir)
+        ? config.declarationDir
+        : path__namespace.resolve(basepath, config.declarationDir);
     return {
         options: {
             ...options,
@@ -8745,10 +8800,11 @@ function loadTsconfig(config, svelteMap) {
             declarationDir: config.declarationDir, // Where to put the declarations
             allowNonTsExtensions: true
         },
-        filenames
+        filenames,
+        absDeclarationDir
     };
 }
-async function createTsCompilerHost(options, svelteMap) {
+async function createTsCompilerHost(options, svelteMap, absDeclarationDir) {
     const host = ts.createCompilerHost(options);
     // TypeScript writes the files relative to the found tsconfig/jsconfig
     // which - at least in the case of the tests - is wrong. Therefore prefix
@@ -8798,7 +8854,19 @@ async function createTsCompilerHost(options, svelteMap) {
             return ts.sys.readDirectory(path, extensionsWithSvelte, exclude, include, depth);
         },
         writeFile(fileName, data, writeByteOrderMark) {
-            fileName = pathPrefix ? path__namespace.join(pathPrefix, fileName) : fileName;
+            fileName =
+                pathPrefix && !path__namespace.isAbsolute(fileName)
+                    ? path__namespace.join(pathPrefix, fileName)
+                    : fileName;
+            // Drop declaration files emitted outside declarationDir.
+            // This happens when TypeScript follows imports to source files outside
+            // rootDir and falls back to emitting declarations next to the source.
+            if (fileName.endsWith('.d.ts') || fileName.endsWith('.d.ts.map')) {
+                const resolved = path__namespace.resolve(fileName).replace(/\\/g, '/');
+                if (!resolved.startsWith(absDeclarationDir.replace(/\\/g, '/') + '/')) {
+                    return;
+                }
+            }
             if (fileName.endsWith('d.ts.map')) {
                 data = data.replace(/"sources":\["(.+?)"\]/, (_, sourcePath) => {
                     // The inverse of the pathPrefix adjustment

package/index.mjs

@@ -3092,6 +3092,14 @@ function handleConstTag(str, constTag) {
     str.overwrite(withTrailingPropertyAccess(str.original, constTag.expression.end), constTag.end, ';');
 }
 
+/**
+ * `{let x = y}` --> `let x = y;`
+ */
+function handleDeclarationTag(str, declarationTag) {
+    str.remove(declarationTag.start, declarationTag.declaration.start);
+    str.overwrite(declarationTag.declaration.end, declarationTag.end, ';');
+}
+
 /**
  * {@debug a}		--->   ;a;
  * {@debug a, b}	--->   ;a;b;
@@ -3621,6 +3629,34 @@ function hoistSnippetBlock(str, blockOrEl) {
         str.move(node.start, node.end, targetPosition);
     }
 }
+/**
+ * Periscopic's `analyze()` does not treat `<Foo />` template tags as references to `Foo`.
+ * Collect those component names so snippet hoisting does not move snippets that use
+ * instance-scope components into the module script.
+ */
+function collectSnippetComponentGlobals(body) {
+    const names = new Set();
+    for (const root of body !== null && body !== void 0 ? body : []) {
+        walk(root, {
+            enter(node) {
+                var _a;
+                if (node.type === 'InlineComponent') {
+                    if (node.name === 'svelte:component') {
+                        if (((_a = node.expression) === null || _a === void 0 ? void 0 : _a.type) === 'Identifier') {
+                            names.add(node.expression.name);
+                        }
+                    }
+                    else if (node.name !== 'svelte:self' &&
+                        !node.name.startsWith('svelte:') &&
+                        /^([A-Z]|([a-zA-Z]+\.))/.test(node.name)) {
+                        names.add(node.name);
+                    }
+                }
+            }
+        });
+    }
+    return [...names];
+}
 
 /**
  * `{@render foo(x)}` --> `;foo(x);`
@@ -5155,6 +5191,7 @@ function convertHtmlxToJsx(str, ast, tags, options = { svelte5Plus: false }) {
     const rootSnippets = [];
     let element;
     const pendingSnippetHoistCheck = new Set();
+    let elementBeforeSnippet = [];
     let uses$$props = false;
     let uses$$restProps = false;
     let uses$$slots = false;
@@ -5334,12 +5371,14 @@ function convertHtmlxToJsx(str, ast, tags, options = { svelte5Plus: false }) {
                         break;
                     case 'SnippetBlock':
                         scopeStack.push();
-                        handleSnippet(str, node, (element instanceof InlineComponent &&
+                        const parentComponent = (element instanceof InlineComponent &&
                             estreeTypedParent.type === 'InlineComponent') ||
-                            (element instanceof Element &&
-                                element.tagName === 'svelte:boundary')
+                            (element instanceof Element && element.tagName === 'svelte:boundary')
                             ? element
-                            : undefined, emitJsDoc, isTsFile);
+                            : undefined;
+                        elementBeforeSnippet.push(element);
+                        element = undefined;
+                        handleSnippet(str, node, parentComponent, emitJsDoc, isTsFile);
                         if (parent === ast) {
                             // root snippet -> move to instance script or possibly even module script
                             const result = analyze({
@@ -5355,6 +5394,11 @@ function convertHtmlxToJsx(str, ast, tags, options = { svelte5Plus: false }) {
                                     body: node.children // wrong AST, but periscopic doesn't care
                                 }
                             });
+                            for (const name of collectSnippetComponentGlobals(node.children)) {
+                                if (!result.globals.has(name)) {
+                                    result.globals.set(name, { name });
+                                }
+                            }
                             rootSnippets.push([
                                 node.start,
                                 node.end,
@@ -5379,6 +5423,9 @@ function convertHtmlxToJsx(str, ast, tags, options = { svelte5Plus: false }) {
                     case 'ConstTag':
                         handleConstTag(str, node);
                         break;
+                    case 'DeclarationTag':
+                        handleDeclarationTag(str, node);
+                        break;
                     case 'RenderTag':
                         handleRenderTag(str, node);
                         break;
@@ -5534,8 +5581,11 @@ function convertHtmlxToJsx(str, ast, tags, options = { svelte5Plus: false }) {
                     case 'BlockStatement':
                     case 'FunctionDeclaration':
                     case 'ArrowFunctionExpression':
+                        scopeStack.pop();
+                        break;
                     case 'SnippetBlock':
                         scopeStack.pop();
+                        element = elementBeforeSnippet.pop();
                         break;
                     case 'EachBlock':
                         onTemplateScopeLeave();
@@ -7061,6 +7111,7 @@ class ExportedNames {
     }
     handle$propsRune(node) {
         var _a, _b;
+        const bindingLocalNames = [];
         // Check if the $props() rune uses $bindable()
         if (ts.isObjectBindingPattern(node.name)) {
             for (const element of node.name.elements) {
@@ -7080,14 +7131,15 @@ class ExportedNames {
                         if (ts.isCallExpression(call) && ts.isIdentifier(call.expression)) {
                             if (call.expression.text === '$bindable') {
                                 this.$props.bindings.push(name);
+                                bindingLocalNames.push(element.name.text);
                             }
                         }
                     }
                 }
             }
         }
-        if (this.$props.bindings.length > 0) {
-            this.str.appendLeft(node.end + this.astOffset, surroundWithIgnoreComments(';' + this.$props.bindings.map((prop) => prop + ';').join('')));
+        if (bindingLocalNames.length > 0) {
+            this.str.appendLeft(node.end + this.astOffset, surroundWithIgnoreComments(';' + bindingLocalNames.map((prop) => prop + ';').join('')));
         }
         // Easy mode: User uses TypeScript and typed the $props() rune
         if (((_a = node.initializer.typeArguments) === null || _a === void 0 ? void 0 : _a.length) > 0 || node.type) {
@@ -8639,8 +8691,8 @@ function svelte2tsx(svelte, options = { parse }) {
 
 async function emitDts(config) {
     const svelteMap = await createSvelteMap(config);
-    const { options, filenames } = loadTsconfig(config, svelteMap);
-    const host = await createTsCompilerHost(options, svelteMap);
+    const { options, filenames, absDeclarationDir } = loadTsconfig(config, svelteMap);
+    const host = await createTsCompilerHost(options, svelteMap, absDeclarationDir);
     const program = ts.createProgram(filenames, options, host);
     const result = program.emit();
     const likely_failed_files = result.diagnostics.filter((diagnostic) => {
@@ -8711,6 +8763,9 @@ function loadTsconfig(config, svelteMap) {
     // Add ambient functions so TS knows how to resolve its invocations in the
     // code output of svelte2tsx.
     filenames.push(config.svelteShimsPath);
+    const absDeclarationDir = path.isAbsolute(config.declarationDir)
+        ? config.declarationDir
+        : path.resolve(basepath, config.declarationDir);
     return {
         options: {
             ...options,
@@ -8725,10 +8780,11 @@ function loadTsconfig(config, svelteMap) {
             declarationDir: config.declarationDir, // Where to put the declarations
             allowNonTsExtensions: true
         },
-        filenames
+        filenames,
+        absDeclarationDir
     };
 }
-async function createTsCompilerHost(options, svelteMap) {
+async function createTsCompilerHost(options, svelteMap, absDeclarationDir) {
     const host = ts.createCompilerHost(options);
     // TypeScript writes the files relative to the found tsconfig/jsconfig
     // which - at least in the case of the tests - is wrong. Therefore prefix
@@ -8778,7 +8834,19 @@ async function createTsCompilerHost(options, svelteMap) {
             return ts.sys.readDirectory(path, extensionsWithSvelte, exclude, include, depth);
         },
         writeFile(fileName, data, writeByteOrderMark) {
-            fileName = pathPrefix ? path.join(pathPrefix, fileName) : fileName;
+            fileName =
+                pathPrefix && !path.isAbsolute(fileName)
+                    ? path.join(pathPrefix, fileName)
+                    : fileName;
+            // Drop declaration files emitted outside declarationDir.
+            // This happens when TypeScript follows imports to source files outside
+            // rootDir and falls back to emitting declarations next to the source.
+            if (fileName.endsWith('.d.ts') || fileName.endsWith('.d.ts.map')) {
+                const resolved = path.resolve(fileName).replace(/\\/g, '/');
+                if (!resolved.startsWith(absDeclarationDir.replace(/\\/g, '/') + '/')) {
+                    return;
+                }
+            }
             if (fileName.endsWith('d.ts.map')) {
                 data = data.replace(/"sources":\["(.+?)"\]/, (_, sourcePath) => {
                     // The inverse of the pathPrefix adjustment

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "svelte2tsx",
-  "version": "0.7.54",
+  "version": "0.7.56",
   "description": "Convert Svelte components to TSX for type checking",
   "author": "The Svelte Community",
   "license": "MIT",
@@ -39,11 +39,11 @@
     "svelte": "~4.2.19",
     "tiny-glob": "^0.2.6",
     "tslib": "^2.4.0",
-    "typescript": "^5.9.2"
+    "typescript": "^6.0.3"
   },
   "peerDependencies": {
     "svelte": "^3.55 || ^4.0.0-next.0 || ^4.0 || ^5.0.0-next.0",
-    "typescript": "^4.9.4 || ^5.0.0"
+    "typescript": "^4.9.4 || ^5.0.0 || ^6.0.0"
   },
   "files": [
     "index.mjs",