svelte2tsx 0.6.25 → 0.6.27

package/index.d.ts

@@ -79,6 +79,11 @@ export function svelte2tsx(
          * The Svelte parser to use. Defaults to the one bundled with `svelte2tsx`.
          */
         parse?: typeof import('svelte/compiler').parse;
+        /**
+         * The VERSION from 'svelte/compiler'. Defaults to the one bundled with `svelte2tsx`.
+         * Transpiled output may vary between versions.
+         */
+        version?: string;
     }
 ): SvelteCompiledToTsx
 

package/index.js

@@ -1479,8 +1479,11 @@ function parseAttributes(str, start) {
     }
     return attrs;
 }
+// Regex ensures that attributes with > characters in them still result in the content being matched correctly
+const scriptRegex = /(<!--[^]*?-->)|(<script((?:\s+[^=>'"\/]+=(?:"[^"]*"|'[^']*'|[^>\s]+)|\s+[^=>'"\/]+)*\s*)>)([\S\s]*?)<\/script>/g;
+const styleRegex = /(<!--[^]*?-->)|(<style((?:\s+[^=>'"\/]+=(?:"[^"]*"|'[^']*'|[^>\s]+)|\s+[^=>'"\/]+)*\s*)>)([\S\s]*?)<\/style>/g;
 function extractTag(htmlx, tag) {
-    const exp = new RegExp(`(<!--[^]*?-->)|(<${tag}([\\S\\s]*?)>)([\\S\\s]*?)<\\/${tag}>`, 'g');
+    const exp = tag === 'script' ? scriptRegex : styleRegex;
     const matches = [];
     let match = null;
     while ((match = exp.exec(htmlx)) != null) {
@@ -1677,9 +1680,12 @@ transformations) {
         str.move(moves[i][0], moves[i][1], end);
     }
     let removeStart = start;
-    for (const transformation of [...moves].sort((t1, t2) => t1[0] - t2[0])) {
+    const sortedMoves = [...moves].sort((t1, t2) => t1[0] - t2[0]);
+    for (const transformation of sortedMoves) {
         if (removeStart < transformation[0]) {
-            if (deletePos !== moves.length && removeStart > deleteDest) {
+            if (deletePos !== moves.length &&
+                removeStart > deleteDest &&
+                !(removeStart < end && transformation[0] >= end)) {
                 str.move(removeStart, transformation[0], end);
             }
             if (transformation[0] < end) {
@@ -1692,7 +1698,8 @@ transformations) {
     if (removeStart > end) {
         // Reset the end to the last transformation before the end if there were transformations after the end
         // so we still delete the correct range afterwards
-        removeStart = (_b = (_a = moves.find((m) => m[1] < end)) === null || _a === void 0 ? void 0 : _a[1]) !== null && _b !== void 0 ? _b : end;
+        let idx = sortedMoves.findIndex((m) => m[0] > end) - 1;
+        removeStart = (_b = (_a = sortedMoves[idx]) === null || _a === void 0 ? void 0 : _a[1]) !== null && _b !== void 0 ? _b : end;
     }
     if (removeStart < end) {
         // Completely delete the first character afterwards. This makes the mapping more correct,
@@ -2388,7 +2395,9 @@ function handleAttribute(str, attr, parent, preserveCase, element) {
      * lowercase the attribute name to make it adhere to our intrinsic elements definition
      */
     const transformAttributeCase = (name) => {
-        if (!preserveCase && !svgAttributes.find((x) => x == name)) {
+        if (!preserveCase &&
+            !svgAttributes.find((x) => x == name) &&
+            !(element instanceof Element && element.tagName.includes('-'))) {
             return name.toLowerCase();
         }
         else {
@@ -2440,9 +2449,10 @@ function handleAttribute(str, attr, parent, preserveCase, element) {
                 addAttribute(attributeName, [[attrVal.start - 1, attrVal.end + 1]]);
                 return;
             }
-            const hasBrackets = str.original.lastIndexOf('}', attrVal.end) === attrVal.end - 1 ||
-                str.original.lastIndexOf('}"', attrVal.end) === attrVal.end - 1 ||
-                str.original.lastIndexOf("}'", attrVal.end) === attrVal.end - 1;
+            const lastCharIndex = attrVal.end - 1;
+            const hasBrackets = str.original[lastCharIndex] === '}' ||
+                ((str.original[lastCharIndex] === '"' || str.original[lastCharIndex] === "'") &&
+                    str.original[lastCharIndex - 1] === '}');
             const needsNumberConversion = !hasBrackets &&
                 parent.type === 'Element' &&
                 numberOnlyAttributes.has(attr.name.toLowerCase()) &&
@@ -2644,7 +2654,12 @@ function handleBinding(str, attr, parent, element, preserveBind) {
         : // Other typings - remove the bind: prefix
             isShorthand
                 ? [[attr.expression.start, attr.expression.end]]
-                : [[attr.start + 'bind:'.length, str.original.lastIndexOf('=', attr.expression.start)]];
+                : [
+                    [
+                        attr.start + 'bind:'.length,
+                        str.original.lastIndexOf('=', attr.expression.start)
+                    ]
+                ];
     const value = isShorthand
         ? preserveBind && element instanceof Element
             ? [rangeWithTrailingPropertyAccess(str.original, attr.expression)]
@@ -2725,21 +2740,23 @@ function handleEach(str, eachBlock) {
     const containsComma = str.original
         .substring(eachBlock.expression.start, eachBlock.expression.end)
         .includes(',');
-    const arrayAndItemVarTheSame = str.original.substring(eachBlock.expression.start, eachBlock.expression.end) ===
-        str.original.substring(eachBlock.context.start, eachBlock.context.end);
+    const expressionEnd = getEnd(eachBlock.expression, str);
+    const contextEnd = getEnd(eachBlock.context, str);
+    const arrayAndItemVarTheSame = str.original.substring(eachBlock.expression.start, expressionEnd) ===
+        str.original.substring(eachBlock.context.start, contextEnd);
     if (arrayAndItemVarTheSame) {
         transforms = [
             `{ const $$_each = __sveltets_2_ensureArray(${containsComma ? '(' : ''}`,
             [eachBlock.expression.start, eachBlock.expression.end],
             `${containsComma ? ')' : ''}); for(let `,
-            [eachBlock.context.start, eachBlock.context.end],
+            [eachBlock.context.start, contextEnd],
             ' of $$_each){'
         ];
     }
     else {
         transforms = [
             'for(let ',
-            [eachBlock.context.start, eachBlock.context.end],
+            [eachBlock.context.start, contextEnd],
             ` of __sveltets_2_ensureArray(${containsComma ? '(' : ''}`,
             [eachBlock.expression.start, eachBlock.expression.end],
             `${containsComma ? ')' : ''})){`
@@ -2770,6 +2787,14 @@ function handleEach(str, eachBlock) {
         });
     }
 }
+/**
+ * Get the end of the node, excluding the type annotation
+ */
+function getEnd(node, str) {
+    return node.typeAnnotation
+        ? str.original.lastIndexOf(':', node.typeAnnotation.start)
+        : node.end;
+}
 
 /**
  * Transform on:xxx={yyy}
@@ -3034,14 +3059,15 @@ function handleTransitionDirective(str, attr, element) {
  * }
  * ```
  */
-function handleSnippet(str, snippetBlock, element) {
+function handleSnippet(str, snippetBlock, component) {
     var _a;
     const endSnippet = str.original.lastIndexOf('{', snippetBlock.end - 1);
-    str.overwrite(endSnippet, snippetBlock.end, '}', {
+    // Return something to silence the "snippet type not assignable to return type void" error
+    str.overwrite(endSnippet, snippetBlock.end, 'return __sveltets_2_any(0)}', {
         contentOnly: true
     });
     const startEnd = str.original.indexOf('}', ((_a = snippetBlock.context) === null || _a === void 0 ? void 0 : _a.end) || snippetBlock.expression.end) + 1;
-    if (element !== undefined) {
+    if (component !== undefined) {
         str.overwrite(snippetBlock.start, snippetBlock.expression.start, '', { contentOnly: true });
         const transforms = ['('];
         if (snippetBlock.context) {
@@ -3056,13 +3082,20 @@ function handleSnippet(str, snippetBlock, element) {
         }
         transforms.push(') => {');
         transforms.push([startEnd, snippetBlock.end]);
-        element.addProp([[snippetBlock.expression.start, snippetBlock.expression.end]], transforms);
+        component.addProp([[snippetBlock.expression.start, snippetBlock.expression.end]], transforms);
     }
     else {
+        const generic = snippetBlock.context
+            ? snippetBlock.context.typeAnnotation
+                ? `<${str.original.slice(snippetBlock.context.typeAnnotation.start, snippetBlock.context.typeAnnotation.end)}>`
+                : // slap any on to it to silence "implicit any" errors; JSDoc people can't add types to snippets
+                    '<any>'
+            : '';
+        const typeAnnotation = surroundWithIgnoreComments(`: import('svelte').Snippet${generic}`);
         const transforms = [
-            'const ',
+            'var ',
             [snippetBlock.expression.start, snippetBlock.expression.end],
-            ' = ('
+            typeAnnotation + ' = ('
         ];
         if (snippetBlock.context) {
             transforms.push([snippetBlock.context.start, snippetBlock.context.end]);
@@ -3071,17 +3104,53 @@ function handleSnippet(str, snippetBlock, element) {
         transform(str, snippetBlock.start, startEnd, startEnd, transforms);
     }
 }
+function handleImplicitChildren(componentNode, component) {
+    var _a;
+    if (((_a = componentNode.children) === null || _a === void 0 ? void 0 : _a.length) === 0) {
+        return;
+    }
+    let hasSlot = false;
+    for (const child of componentNode.children) {
+        if (child.type === 'SvelteSelf' ||
+            child.type === 'InlineComponent' ||
+            child.type === 'Element' ||
+            child.type === 'SlotTemplate') {
+            if (child.attributes.some((a) => {
+                var _a;
+                return a.type === 'Attribute' &&
+                    a.name === 'slot' &&
+                    ((_a = a.value[0]) === null || _a === void 0 ? void 0 : _a.data) !== 'default';
+            })) {
+                continue;
+            }
+        }
+        if (child.type === 'Text' && child.data.trim() === '') {
+            continue;
+        }
+        if (child.type !== 'SnippetBlock') {
+            hasSlot = true;
+            break;
+        }
+    }
+    if (!hasSlot) {
+        return;
+    }
+    // it's enough to fake a children prop, we don't need to actually move the content inside (which would also reset control flow)
+    component.addProp(['children'], ['() => { return __sveltets_2_any(0); }']);
+}
 
 /**
  * `{@render foo(x)}` --> `;foo(x);`
  */
 function handleRenderTag(str, renderTag) {
-    str.overwrite(renderTag.start, renderTag.expression.start, ';', { contentOnly: true });
+    str.overwrite(renderTag.start, renderTag.expression.start, ';__sveltets_2_ensureSnippet(', {
+        contentOnly: true
+    });
     if (renderTag.argument) {
-        str.overwrite(withTrailingPropertyAccess(str.original, renderTag.argument.end), renderTag.end, ');');
+        str.overwrite(withTrailingPropertyAccess(str.original, renderTag.argument.end), renderTag.end, '));');
     }
     else {
-        str.overwrite(withTrailingPropertyAccess(str.original, renderTag.expression.end), renderTag.end, '();');
+        str.overwrite(withTrailingPropertyAccess(str.original, renderTag.expression.end), renderTag.end, '());');
     }
 }
 
@@ -3096,11 +3165,12 @@ function stripDoctype(str) {
  * Walks the HTMLx part of the Svelte component
  * and converts it to JSX
  */
-function convertHtmlxToJsx(str, ast, onWalk = null, onLeave = null, options = {}) {
+function convertHtmlxToJsx(str, ast, onWalk = null, onLeave = null, options = { svelte5Plus: false }) {
     str.original;
     options = { preserveAttributeCase: false, ...options };
     options.typingsNamespace = options.typingsNamespace || 'svelteHTML';
     stripDoctype(str);
+    const rootSnippets = [];
     let element;
     walk(ast, {
         enter: (estreeTypedNode, estreeTypedParent, prop, index) => {
@@ -3125,6 +3195,10 @@ function convertHtmlxToJsx(str, ast, onWalk = null, onLeave = null, options = {}
                             estreeTypedParent.type === 'InlineComponent'
                             ? element
                             : undefined);
+                        if (!element) {
+                            // root snippet -> move to instance script
+                            rootSnippets.push([node.start, node.end]);
+                        }
                         break;
                     case 'MustacheTag':
                         handleMustacheTag(str, node, parent);
@@ -3149,6 +3223,9 @@ function convertHtmlxToJsx(str, ast, onWalk = null, onLeave = null, options = {}
                         else {
                             element = new InlineComponent(str, node);
                         }
+                        if (options.svelte5Plus) {
+                            handleImplicitChildren(node, element);
+                        }
                         break;
                     case 'Element':
                     case 'Options':
@@ -3253,6 +3330,7 @@ function convertHtmlxToJsx(str, ast, onWalk = null, onLeave = null, options = {}
             }
         }
     });
+    return rootSnippets;
 }
 
 /**
@@ -4255,10 +4333,11 @@ function is$$PropsDeclaration(node) {
     return isInterfaceOrTypeDeclaration(node) && node.name.text === '$$Props';
 }
 class ExportedNames {
-    constructor(str, astOffset, basename) {
+    constructor(str, astOffset, basename, isTsFile) {
         this.str = str;
         this.astOffset = astOffset;
         this.basename = basename;
+        this.isTsFile = isTsFile;
         /**
          * Uses the `$$Props` type
          */
@@ -4349,16 +4428,89 @@ class ExportedNames {
             this.$props.generic = node.initializer.typeArguments[0].getText();
         }
         else {
-            const nodeText = node.getFullText();
-            let comments = (_b = ts
-                .getLeadingCommentRanges(nodeText, 0)) === null || _b === void 0 ? void 0 : _b.map((c) => nodeText.substring(c.pos, c.end)).find((c) => c.includes('@type'));
-            if (!comments) {
-                const parentText = node.parent.getFullText();
-                comments = (_c = ts
-                    .getLeadingCommentRanges(parentText, node.parent.pos)) === null || _c === void 0 ? void 0 : _c.map((c) => parentText.substring(c.pos, c.end)).find((c) => c.includes('@type'));
+            if (!this.isTsFile) {
+                const text = node.getSourceFile().getFullText();
+                let comments = (_b = ts
+                    .getLeadingCommentRanges(text, node.pos)) === null || _b === void 0 ? void 0 : _b.map((c) => text.substring(c.pos, c.end)).find((c) => c.includes('@type'));
+                if (!comments) {
+                    comments = (_c = ts
+                        .getLeadingCommentRanges(text, node.parent.pos)) === null || _c === void 0 ? void 0 : _c.map((c) => text.substring(c.pos, c.end)).find((c) => c.includes('@type'));
+                }
+                // We don't bother extracting the type, we just use the comment as-is
+                this.$props.comment = comments || '';
+            }
+            if (this.$props.comment) {
+                return;
+            }
+            if (internalHelpers.isKitRouteFile(this.basename)) {
+                const kitType = this.basename.includes('layout')
+                    ? `{ data: import('./$types.js').LayoutData, form: import('./$types.js').ActionData, children: import('svelte').Snippet }`
+                    : `{ data: import('./$types.js').PageData, form: import('./$types.js').ActionData }`;
+                if (this.isTsFile) {
+                    this.$props.generic = kitType;
+                    preprendStr(this.str, node.initializer.expression.end + this.astOffset, surroundWithIgnoreComments(`<${kitType}>`));
+                }
+                else {
+                    this.$props.comment = `/** @type {${kitType}} */`;
+                    preprendStr(this.str, node.pos + this.astOffset, this.$props.comment);
+                }
+            }
+            else {
+                // Do a best-effort to extract the props from the object literal
+                let propsStr = '';
+                let withUnknown = false;
+                let props = [];
+                if (ts.isObjectBindingPattern(node.name)) {
+                    for (const element of node.name.elements) {
+                        if (!ts.isIdentifier(element.name) || !!element.dotDotDotToken) {
+                            withUnknown = true;
+                        }
+                        else {
+                            if (element.initializer) {
+                                const type = ts.isAsExpression(element.initializer)
+                                    ? element.initializer.type.getText()
+                                    : ts.isStringLiteral(element.initializer)
+                                        ? 'string'
+                                        : ts.isNumericLiteral(element.initializer)
+                                            ? 'number'
+                                            : element.initializer.kind === ts.SyntaxKind.TrueKeyword ||
+                                                element.initializer.kind === ts.SyntaxKind.FalseKeyword
+                                                ? 'boolean'
+                                                : ts.isIdentifier(element.initializer)
+                                                    ? `typeof ${element.initializer.text}`
+                                                    : 'unknown';
+                                props.push(`${element.name.text}?: ${type}`);
+                            }
+                            else {
+                                props.push(`${element.name.text}: unknown`);
+                            }
+                        }
+                    }
+                }
+                if (props.length > 0) {
+                    propsStr =
+                        `{ ${props.join(', ')} }` +
+                            (withUnknown ? ' & Record<string, unknown>' : '');
+                }
+                else if (withUnknown) {
+                    propsStr = 'Record<string, unknown>';
+                }
+                else {
+                    propsStr = 'Record<string, never>';
+                }
+                if (this.isTsFile) {
+                    this.$props.generic = propsStr;
+                    if (props.length > 0 || withUnknown) {
+                        preprendStr(this.str, node.initializer.expression.end + this.astOffset, surroundWithIgnoreComments(`<${propsStr}>`));
+                    }
+                }
+                else {
+                    this.$props.comment = `/** @type {${propsStr}} */`;
+                    if (props.length > 0 || withUnknown) {
+                        preprendStr(this.str, node.pos + this.astOffset, this.$props.comment);
+                    }
+                }
             }
-            // We don't bother extracting the type, we just use the comment as-is
-            this.$props.comment = comments || '';
         }
     }
     removeExport(start, end) {
@@ -4511,6 +4663,14 @@ class ExportedNames {
             });
         }
     }
+    addImplicitChildrenExport(hasAttributes) {
+        if (this.exports.has('children'))
+            return;
+        this.exports.set('children', {
+            isLet: true,
+            implicitChildren: hasAttributes ? 'attributes' : 'empty'
+        });
+    }
     /**
      * Adds export to map
      */
@@ -4570,7 +4730,7 @@ class ExportedNames {
      * @param isTsFile Whether this is a TypeScript file or not.
      * @param uses$$propsOr$$restProps whether the file references the $$props or $$restProps variable
      */
-    createPropsStr(isTsFile, uses$$propsOr$$restProps) {
+    createPropsStr(uses$$propsOr$$restProps) {
         const names = Array.from(this.exports.entries());
         if (this.$props.generic) {
             const others = names.filter(([, { isLet }]) => !isLet);
@@ -4606,11 +4766,11 @@ class ExportedNames {
         }
         if (names.length === 0 && !uses$$propsOr$$restProps) {
             // Necessary, because {} roughly equals to any
-            return isTsFile
+            return this.isTsFile
                 ? '{} as Record<string, never>'
                 : '/** @type {Record<string, never>} */ ({})';
         }
-        const dontAddTypeDef = !isTsFile || names.every(([_, value]) => !value.type && value.required);
+        const dontAddTypeDef = !this.isTsFile || names.every(([_, value]) => !value.type && value.required);
         const returnElements = this.createReturnElements(names, dontAddTypeDef);
         if (dontAddTypeDef) {
             // Only `typeof` exports -> omit the `as {...}` completely.
@@ -4622,12 +4782,22 @@ class ExportedNames {
     }
     createReturnElements(names, dontAddTypeDef) {
         return names.map(([key, value]) => {
+            if (value.implicitChildren) {
+                return `children?: ${value.implicitChildren === 'empty'
+                    ? '__sveltets_2_snippet()'
+                    : '$$implicit_children'}`;
+            }
             // Important to not use shorthand props for rename functionality
             return `${dontAddTypeDef && value.doc ? `\n${value.doc}` : ''}${value.identifierText || key}: ${key}`;
         });
     }
     createReturnElementsType(names) {
         return names.map(([key, value]) => {
+            if (value.implicitChildren) {
+                return `children?: ${value.implicitChildren === 'empty'
+                    ? `import('svelte').Snippet`
+                    : 'typeof $$implicit_children'}`;
+            }
             const identifier = `${value.doc ? `\n${value.doc}` : ''}${value.identifierText || key}${value.required ? '' : '?'}`;
             if (!value.type) {
                 return `${identifier}: typeof ${key}`;
@@ -4643,6 +4813,9 @@ class ExportedNames {
     getExportsMap() {
         return this.exports;
     }
+    uses$propsRune() {
+        return !!this.$props.generic || !!this.$props.comment;
+    }
 }
 
 function isMember(parent, prop) {
@@ -5588,12 +5761,12 @@ class InterfacesAndTypes {
     }
 }
 
-function processInstanceScriptContent(str, script, events, implicitStoreValues, mode, hasModuleScript, basename) {
+function processInstanceScriptContent(str, script, events, implicitStoreValues, mode, hasModuleScript, isTSFile, basename) {
     const htmlx = str.original;
     const scriptContent = htmlx.substring(script.content.start, script.content.end);
     const tsAst = ts.createSourceFile('component.ts.svelte', scriptContent, ts.ScriptTarget.Latest, true, ts.ScriptKind.TS);
     const astOffset = script.content.start;
-    const exportedNames = new ExportedNames(str, astOffset, basename);
+    const exportedNames = new ExportedNames(str, astOffset, basename, isTSFile);
     const generics = new Generics(str, astOffset, script);
     const interfacesAndTypes = new InterfacesAndTypes();
     const implicitTopLevelNames = new ImplicitTopLevelNames(str, astOffset);
@@ -6042,7 +6215,7 @@ function classNameFromFilename(filename, appendSuffix) {
     }
 }
 
-function createRenderFunction({ str, scriptTag, scriptDestination, slots, events, exportedNames, isTsFile, uses$$props, uses$$restProps, uses$$slots, uses$$SlotsInterface, generics, mode }) {
+function createRenderFunction({ str, scriptTag, scriptDestination, rootSnippets, slots, events, exportedNames, uses$$props, uses$$restProps, uses$$slots, uses$$SlotsInterface, generics, svelte5Plus, mode }) {
     const htmlx = str.original;
     let propsDecl = '';
     if (uses$$props) {
@@ -6089,6 +6262,9 @@ function createRenderFunction({ str, scriptTag, scriptDestination, slots, events
             str.overwrite(scriptTag.start + 1, scriptTagEnd, `function render${generics.toDefinitionString(true)}() {${propsDecl}\n`);
         }
         const scriptEndTagStart = htmlx.lastIndexOf('<', scriptTag.end - 1);
+        for (const rootSnippet of rootSnippets) {
+            str.move(rootSnippet[0], rootSnippet[1], scriptEndTagStart);
+        }
         // wrap template with callback
         str.overwrite(scriptEndTagStart, scriptTag.end, `${slotsDeclaration};\nasync () => {`, {
             contentOnly: true
@@ -6102,22 +6278,32 @@ function createRenderFunction({ str, scriptTag, scriptDestination, slots, events
         : '{' +
             Array.from(slots.entries())
                 .map(([name, attrs]) => {
-                const attrsAsString = Array.from(attrs.entries())
-                    .map(([exportName, expr]) => exportName.startsWith('__spread__')
-                    ? `...${expr}`
-                    : `${exportName}:${expr}`)
-                    .join(', ');
-                return `'${name}': {${attrsAsString}}`;
+                return `'${name}': {${slotAttributesToString(attrs)}}`;
             })
                 .join(', ') +
             '}';
-    const returnString = `\nreturn { props: ${exportedNames.createPropsStr(isTsFile, uses$$props || uses$$restProps)}` +
+    const needsImplicitChildrenProp = svelte5Plus &&
+        !exportedNames.uses$propsRune() &&
+        slots.has('default') &&
+        !exportedNames.getExportsMap().has('default');
+    if (needsImplicitChildrenProp) {
+        exportedNames.addImplicitChildrenExport(slots.get('default').size > 0);
+    }
+    const returnString = `${needsImplicitChildrenProp && slots.get('default').size > 0
+        ? `\nlet $$implicit_children = __sveltets_2_snippet({${slotAttributesToString(slots.get('default'))}});`
+        : ''}` +
+        `\nreturn { props: ${exportedNames.createPropsStr(uses$$props || uses$$restProps)}` +
         `, slots: ${slotsAsDef}` +
         `, events: ${events.toDefString()} }}`;
     // wrap template with callback
     str.append('};');
     str.append(returnString);
 }
+function slotAttributesToString(attrs) {
+    return Array.from(attrs.entries())
+        .map(([exportName, expr]) => exportName.startsWith('__spread__') ? `...${expr}` : `${exportName}:${expr}`)
+        .join(', ');
+}
 
 function processSvelteTemplate(str, parse, options) {
     const { htmlxAst, tags } = parseHtmlx(str.original, parse, options);
@@ -6303,9 +6489,10 @@ function processSvelteTemplate(str, parse, options) {
                 break;
         }
     };
-    convertHtmlxToJsx(str, htmlxAst, onHtmlxWalk, onHtmlxLeave, {
+    const rootSnippets = convertHtmlxToJsx(str, htmlxAst, onHtmlxWalk, onHtmlxLeave, {
         preserveAttributeCase: (options === null || options === void 0 ? void 0 : options.namespace) == 'foreign',
-        typingsNamespace: options.typingsNamespace
+        typingsNamespace: options.typingsNamespace,
+        svelte5Plus: options.svelte5Plus
     });
     // resolve scripts
     const { scriptTag, moduleScriptTag } = scripts.getTopLevelScriptTags();
@@ -6318,6 +6505,7 @@ function processSvelteTemplate(str, parse, options) {
         htmlAst: htmlxAst,
         moduleScriptTag,
         scriptTag,
+        rootSnippets,
         slots: slotHandler.getSlotDef(),
         events: new ComponentEvents(eventHandler, tags.some((tag) => { var _a; return (_a = tag.attributes) === null || _a === void 0 ? void 0 : _a.some((a) => a.name === 'strictEvents'); }), str),
         uses$$props,
@@ -6330,10 +6518,15 @@ function processSvelteTemplate(str, parse, options) {
 }
 function svelte2tsx(svelte, options = { parse: compiler.parse }) {
     options.mode = options.mode || 'ts';
+    options.version = options.version || compiler.VERSION;
     const str = new MagicString(svelte);
     const basename = path.basename(options.filename || '');
+    const svelte5Plus = Number(options.version[0]) > 4;
     // process the htmlx as a svelte template
-    let { htmlAst, moduleScriptTag, scriptTag, slots, uses$$props, uses$$slots, uses$$restProps, events, componentDocumentation, resolvedStores, usesAccessors } = processSvelteTemplate(str, options.parse || compiler.parse, options);
+    let { htmlAst, moduleScriptTag, scriptTag, rootSnippets, slots, uses$$props, uses$$slots, uses$$restProps, events, componentDocumentation, resolvedStores, usesAccessors } = processSvelteTemplate(str, options.parse || compiler.parse, {
+        ...options,
+        svelte5Plus
+    });
     /* Rearrange the script tags so that module is first, and instance second followed finally by the template
      * This is a bit convoluted due to some trouble I had with magic string. A simple str.move(start,end,0) for each script wasn't enough
      * since if the module script was already at 0, it wouldn't move (which is fine) but would mean the order would be swapped when the script tag tried to move to 0
@@ -6355,7 +6548,7 @@ function svelte2tsx(svelte, options = { parse: compiler.parse }) {
         : instanceScriptTarget;
     const implicitStoreValues = new ImplicitStoreValues(resolvedStores, renderFunctionStart);
     //move the instance script and process the content
-    let exportedNames = new ExportedNames(str, 0, basename);
+    let exportedNames = new ExportedNames(str, 0, basename, options === null || options === void 0 ? void 0 : options.isTsFile);
     let generics = new Generics(str, 0, { attributes: [] });
     let uses$$SlotsInterface = false;
     if (scriptTag) {
@@ -6364,7 +6557,7 @@ function svelte2tsx(svelte, options = { parse: compiler.parse }) {
             str.move(scriptTag.start, scriptTag.end, instanceScriptTarget);
         }
         const res = processInstanceScriptContent(str, scriptTag, events, implicitStoreValues, options.mode, 
-        /**hasModuleScripts */ !!moduleScriptTag, basename);
+        /**hasModuleScripts */ !!moduleScriptTag, options === null || options === void 0 ? void 0 : options.isTsFile, basename);
         uses$$props = uses$$props || res.uses$$props;
         uses$$restProps = uses$$restProps || res.uses$$restProps;
         uses$$slots = uses$$slots || res.uses$$slots;
@@ -6375,15 +6568,16 @@ function svelte2tsx(svelte, options = { parse: compiler.parse }) {
         str,
         scriptTag,
         scriptDestination: instanceScriptTarget,
+        rootSnippets,
         slots,
         events,
         exportedNames,
-        isTsFile: options === null || options === void 0 ? void 0 : options.isTsFile,
         uses$$props,
         uses$$restProps,
         uses$$slots,
         uses$$SlotsInterface,
         generics,
+        svelte5Plus,
         mode: options.mode
     });
     // we need to process the module script after the instance script has moved otherwise we get warnings about moving edited items
@@ -6490,13 +6684,13 @@ function loadTsconfig(config, svelteMap) {
     return {
         options: {
             ...options,
-            noEmit: false,
+            noEmit: false, // Set to true in case of jsconfig, force false, else nothing is emitted
             moduleResolution: 
             // NodeJS: up to 4.9, Node10: since 5.0
-            (_a = ts.ModuleResolutionKind.NodeJs) !== null && _a !== void 0 ? _a : ts.ModuleResolutionKind.Node10,
-            declaration: true,
-            emitDeclarationOnly: true,
-            declarationDir: config.declarationDir,
+            (_a = ts.ModuleResolutionKind.NodeJs) !== null && _a !== void 0 ? _a : ts.ModuleResolutionKind.Node10, // Classic if not set, which gives wrong results
+            declaration: true, // Needed for d.ts file generation
+            emitDeclarationOnly: true, // We only want d.ts file generation
+            declarationDir: config.declarationDir, // Where to put the declarations
             allowNonTsExtensions: true
         },
         filenames

package/index.mjs

@@ -3,7 +3,7 @@ import ts from 'typescript';
 import * as path from 'path';
 import path__default from 'path';
 import { pascalCase } from 'pascal-case';
-import { parse } from 'svelte/compiler';
+import { VERSION, parse } from 'svelte/compiler';
 
 const comma = ','.charCodeAt(0);
 const semicolon = ';'.charCodeAt(0);
@@ -1459,8 +1459,11 @@ function parseAttributes(str, start) {
     }
     return attrs;
 }
+// Regex ensures that attributes with > characters in them still result in the content being matched correctly
+const scriptRegex = /(<!--[^]*?-->)|(<script((?:\s+[^=>'"\/]+=(?:"[^"]*"|'[^']*'|[^>\s]+)|\s+[^=>'"\/]+)*\s*)>)([\S\s]*?)<\/script>/g;
+const styleRegex = /(<!--[^]*?-->)|(<style((?:\s+[^=>'"\/]+=(?:"[^"]*"|'[^']*'|[^>\s]+)|\s+[^=>'"\/]+)*\s*)>)([\S\s]*?)<\/style>/g;
 function extractTag(htmlx, tag) {
-    const exp = new RegExp(`(<!--[^]*?-->)|(<${tag}([\\S\\s]*?)>)([\\S\\s]*?)<\\/${tag}>`, 'g');
+    const exp = tag === 'script' ? scriptRegex : styleRegex;
     const matches = [];
     let match = null;
     while ((match = exp.exec(htmlx)) != null) {
@@ -1657,9 +1660,12 @@ transformations) {
         str.move(moves[i][0], moves[i][1], end);
     }
     let removeStart = start;
-    for (const transformation of [...moves].sort((t1, t2) => t1[0] - t2[0])) {
+    const sortedMoves = [...moves].sort((t1, t2) => t1[0] - t2[0]);
+    for (const transformation of sortedMoves) {
         if (removeStart < transformation[0]) {
-            if (deletePos !== moves.length && removeStart > deleteDest) {
+            if (deletePos !== moves.length &&
+                removeStart > deleteDest &&
+                !(removeStart < end && transformation[0] >= end)) {
                 str.move(removeStart, transformation[0], end);
             }
             if (transformation[0] < end) {
@@ -1672,7 +1678,8 @@ transformations) {
     if (removeStart > end) {
         // Reset the end to the last transformation before the end if there were transformations after the end
         // so we still delete the correct range afterwards
-        removeStart = (_b = (_a = moves.find((m) => m[1] < end)) === null || _a === void 0 ? void 0 : _a[1]) !== null && _b !== void 0 ? _b : end;
+        let idx = sortedMoves.findIndex((m) => m[0] > end) - 1;
+        removeStart = (_b = (_a = sortedMoves[idx]) === null || _a === void 0 ? void 0 : _a[1]) !== null && _b !== void 0 ? _b : end;
     }
     if (removeStart < end) {
         // Completely delete the first character afterwards. This makes the mapping more correct,
@@ -2368,7 +2375,9 @@ function handleAttribute(str, attr, parent, preserveCase, element) {
      * lowercase the attribute name to make it adhere to our intrinsic elements definition
      */
     const transformAttributeCase = (name) => {
-        if (!preserveCase && !svgAttributes.find((x) => x == name)) {
+        if (!preserveCase &&
+            !svgAttributes.find((x) => x == name) &&
+            !(element instanceof Element && element.tagName.includes('-'))) {
             return name.toLowerCase();
         }
         else {
@@ -2420,9 +2429,10 @@ function handleAttribute(str, attr, parent, preserveCase, element) {
                 addAttribute(attributeName, [[attrVal.start - 1, attrVal.end + 1]]);
                 return;
             }
-            const hasBrackets = str.original.lastIndexOf('}', attrVal.end) === attrVal.end - 1 ||
-                str.original.lastIndexOf('}"', attrVal.end) === attrVal.end - 1 ||
-                str.original.lastIndexOf("}'", attrVal.end) === attrVal.end - 1;
+            const lastCharIndex = attrVal.end - 1;
+            const hasBrackets = str.original[lastCharIndex] === '}' ||
+                ((str.original[lastCharIndex] === '"' || str.original[lastCharIndex] === "'") &&
+                    str.original[lastCharIndex - 1] === '}');
             const needsNumberConversion = !hasBrackets &&
                 parent.type === 'Element' &&
                 numberOnlyAttributes.has(attr.name.toLowerCase()) &&
@@ -2624,7 +2634,12 @@ function handleBinding(str, attr, parent, element, preserveBind) {
         : // Other typings - remove the bind: prefix
             isShorthand
                 ? [[attr.expression.start, attr.expression.end]]
-                : [[attr.start + 'bind:'.length, str.original.lastIndexOf('=', attr.expression.start)]];
+                : [
+                    [
+                        attr.start + 'bind:'.length,
+                        str.original.lastIndexOf('=', attr.expression.start)
+                    ]
+                ];
     const value = isShorthand
         ? preserveBind && element instanceof Element
             ? [rangeWithTrailingPropertyAccess(str.original, attr.expression)]
@@ -2705,21 +2720,23 @@ function handleEach(str, eachBlock) {
     const containsComma = str.original
         .substring(eachBlock.expression.start, eachBlock.expression.end)
         .includes(',');
-    const arrayAndItemVarTheSame = str.original.substring(eachBlock.expression.start, eachBlock.expression.end) ===
-        str.original.substring(eachBlock.context.start, eachBlock.context.end);
+    const expressionEnd = getEnd(eachBlock.expression, str);
+    const contextEnd = getEnd(eachBlock.context, str);
+    const arrayAndItemVarTheSame = str.original.substring(eachBlock.expression.start, expressionEnd) ===
+        str.original.substring(eachBlock.context.start, contextEnd);
     if (arrayAndItemVarTheSame) {
         transforms = [
             `{ const $$_each = __sveltets_2_ensureArray(${containsComma ? '(' : ''}`,
             [eachBlock.expression.start, eachBlock.expression.end],
             `${containsComma ? ')' : ''}); for(let `,
-            [eachBlock.context.start, eachBlock.context.end],
+            [eachBlock.context.start, contextEnd],
             ' of $$_each){'
         ];
     }
     else {
         transforms = [
             'for(let ',
-            [eachBlock.context.start, eachBlock.context.end],
+            [eachBlock.context.start, contextEnd],
             ` of __sveltets_2_ensureArray(${containsComma ? '(' : ''}`,
             [eachBlock.expression.start, eachBlock.expression.end],
             `${containsComma ? ')' : ''})){`
@@ -2750,6 +2767,14 @@ function handleEach(str, eachBlock) {
         });
     }
 }
+/**
+ * Get the end of the node, excluding the type annotation
+ */
+function getEnd(node, str) {
+    return node.typeAnnotation
+        ? str.original.lastIndexOf(':', node.typeAnnotation.start)
+        : node.end;
+}
 
 /**
  * Transform on:xxx={yyy}
@@ -3014,14 +3039,15 @@ function handleTransitionDirective(str, attr, element) {
  * }
  * ```
  */
-function handleSnippet(str, snippetBlock, element) {
+function handleSnippet(str, snippetBlock, component) {
     var _a;
     const endSnippet = str.original.lastIndexOf('{', snippetBlock.end - 1);
-    str.overwrite(endSnippet, snippetBlock.end, '}', {
+    // Return something to silence the "snippet type not assignable to return type void" error
+    str.overwrite(endSnippet, snippetBlock.end, 'return __sveltets_2_any(0)}', {
         contentOnly: true
     });
     const startEnd = str.original.indexOf('}', ((_a = snippetBlock.context) === null || _a === void 0 ? void 0 : _a.end) || snippetBlock.expression.end) + 1;
-    if (element !== undefined) {
+    if (component !== undefined) {
         str.overwrite(snippetBlock.start, snippetBlock.expression.start, '', { contentOnly: true });
         const transforms = ['('];
         if (snippetBlock.context) {
@@ -3036,13 +3062,20 @@ function handleSnippet(str, snippetBlock, element) {
         }
         transforms.push(') => {');
         transforms.push([startEnd, snippetBlock.end]);
-        element.addProp([[snippetBlock.expression.start, snippetBlock.expression.end]], transforms);
+        component.addProp([[snippetBlock.expression.start, snippetBlock.expression.end]], transforms);
     }
     else {
+        const generic = snippetBlock.context
+            ? snippetBlock.context.typeAnnotation
+                ? `<${str.original.slice(snippetBlock.context.typeAnnotation.start, snippetBlock.context.typeAnnotation.end)}>`
+                : // slap any on to it to silence "implicit any" errors; JSDoc people can't add types to snippets
+                    '<any>'
+            : '';
+        const typeAnnotation = surroundWithIgnoreComments(`: import('svelte').Snippet${generic}`);
         const transforms = [
-            'const ',
+            'var ',
             [snippetBlock.expression.start, snippetBlock.expression.end],
-            ' = ('
+            typeAnnotation + ' = ('
         ];
         if (snippetBlock.context) {
             transforms.push([snippetBlock.context.start, snippetBlock.context.end]);
@@ -3051,17 +3084,53 @@ function handleSnippet(str, snippetBlock, element) {
         transform(str, snippetBlock.start, startEnd, startEnd, transforms);
     }
 }
+function handleImplicitChildren(componentNode, component) {
+    var _a;
+    if (((_a = componentNode.children) === null || _a === void 0 ? void 0 : _a.length) === 0) {
+        return;
+    }
+    let hasSlot = false;
+    for (const child of componentNode.children) {
+        if (child.type === 'SvelteSelf' ||
+            child.type === 'InlineComponent' ||
+            child.type === 'Element' ||
+            child.type === 'SlotTemplate') {
+            if (child.attributes.some((a) => {
+                var _a;
+                return a.type === 'Attribute' &&
+                    a.name === 'slot' &&
+                    ((_a = a.value[0]) === null || _a === void 0 ? void 0 : _a.data) !== 'default';
+            })) {
+                continue;
+            }
+        }
+        if (child.type === 'Text' && child.data.trim() === '') {
+            continue;
+        }
+        if (child.type !== 'SnippetBlock') {
+            hasSlot = true;
+            break;
+        }
+    }
+    if (!hasSlot) {
+        return;
+    }
+    // it's enough to fake a children prop, we don't need to actually move the content inside (which would also reset control flow)
+    component.addProp(['children'], ['() => { return __sveltets_2_any(0); }']);
+}
 
 /**
  * `{@render foo(x)}` --> `;foo(x);`
  */
 function handleRenderTag(str, renderTag) {
-    str.overwrite(renderTag.start, renderTag.expression.start, ';', { contentOnly: true });
+    str.overwrite(renderTag.start, renderTag.expression.start, ';__sveltets_2_ensureSnippet(', {
+        contentOnly: true
+    });
     if (renderTag.argument) {
-        str.overwrite(withTrailingPropertyAccess(str.original, renderTag.argument.end), renderTag.end, ');');
+        str.overwrite(withTrailingPropertyAccess(str.original, renderTag.argument.end), renderTag.end, '));');
     }
     else {
-        str.overwrite(withTrailingPropertyAccess(str.original, renderTag.expression.end), renderTag.end, '();');
+        str.overwrite(withTrailingPropertyAccess(str.original, renderTag.expression.end), renderTag.end, '());');
     }
 }
 
@@ -3076,11 +3145,12 @@ function stripDoctype(str) {
  * Walks the HTMLx part of the Svelte component
  * and converts it to JSX
  */
-function convertHtmlxToJsx(str, ast, onWalk = null, onLeave = null, options = {}) {
+function convertHtmlxToJsx(str, ast, onWalk = null, onLeave = null, options = { svelte5Plus: false }) {
     str.original;
     options = { preserveAttributeCase: false, ...options };
     options.typingsNamespace = options.typingsNamespace || 'svelteHTML';
     stripDoctype(str);
+    const rootSnippets = [];
     let element;
     walk(ast, {
         enter: (estreeTypedNode, estreeTypedParent, prop, index) => {
@@ -3105,6 +3175,10 @@ function convertHtmlxToJsx(str, ast, onWalk = null, onLeave = null, options = {}
                             estreeTypedParent.type === 'InlineComponent'
                             ? element
                             : undefined);
+                        if (!element) {
+                            // root snippet -> move to instance script
+                            rootSnippets.push([node.start, node.end]);
+                        }
                         break;
                     case 'MustacheTag':
                         handleMustacheTag(str, node, parent);
@@ -3129,6 +3203,9 @@ function convertHtmlxToJsx(str, ast, onWalk = null, onLeave = null, options = {}
                         else {
                             element = new InlineComponent(str, node);
                         }
+                        if (options.svelte5Plus) {
+                            handleImplicitChildren(node, element);
+                        }
                         break;
                     case 'Element':
                     case 'Options':
@@ -3233,6 +3310,7 @@ function convertHtmlxToJsx(str, ast, onWalk = null, onLeave = null, options = {}
             }
         }
     });
+    return rootSnippets;
 }
 
 /**
@@ -4235,10 +4313,11 @@ function is$$PropsDeclaration(node) {
     return isInterfaceOrTypeDeclaration(node) && node.name.text === '$$Props';
 }
 class ExportedNames {
-    constructor(str, astOffset, basename) {
+    constructor(str, astOffset, basename, isTsFile) {
         this.str = str;
         this.astOffset = astOffset;
         this.basename = basename;
+        this.isTsFile = isTsFile;
         /**
          * Uses the `$$Props` type
          */
@@ -4329,16 +4408,89 @@ class ExportedNames {
             this.$props.generic = node.initializer.typeArguments[0].getText();
         }
         else {
-            const nodeText = node.getFullText();
-            let comments = (_b = ts
-                .getLeadingCommentRanges(nodeText, 0)) === null || _b === void 0 ? void 0 : _b.map((c) => nodeText.substring(c.pos, c.end)).find((c) => c.includes('@type'));
-            if (!comments) {
-                const parentText = node.parent.getFullText();
-                comments = (_c = ts
-                    .getLeadingCommentRanges(parentText, node.parent.pos)) === null || _c === void 0 ? void 0 : _c.map((c) => parentText.substring(c.pos, c.end)).find((c) => c.includes('@type'));
+            if (!this.isTsFile) {
+                const text = node.getSourceFile().getFullText();
+                let comments = (_b = ts
+                    .getLeadingCommentRanges(text, node.pos)) === null || _b === void 0 ? void 0 : _b.map((c) => text.substring(c.pos, c.end)).find((c) => c.includes('@type'));
+                if (!comments) {
+                    comments = (_c = ts
+                        .getLeadingCommentRanges(text, node.parent.pos)) === null || _c === void 0 ? void 0 : _c.map((c) => text.substring(c.pos, c.end)).find((c) => c.includes('@type'));
+                }
+                // We don't bother extracting the type, we just use the comment as-is
+                this.$props.comment = comments || '';
+            }
+            if (this.$props.comment) {
+                return;
+            }
+            if (internalHelpers.isKitRouteFile(this.basename)) {
+                const kitType = this.basename.includes('layout')
+                    ? `{ data: import('./$types.js').LayoutData, form: import('./$types.js').ActionData, children: import('svelte').Snippet }`
+                    : `{ data: import('./$types.js').PageData, form: import('./$types.js').ActionData }`;
+                if (this.isTsFile) {
+                    this.$props.generic = kitType;
+                    preprendStr(this.str, node.initializer.expression.end + this.astOffset, surroundWithIgnoreComments(`<${kitType}>`));
+                }
+                else {
+                    this.$props.comment = `/** @type {${kitType}} */`;
+                    preprendStr(this.str, node.pos + this.astOffset, this.$props.comment);
+                }
+            }
+            else {
+                // Do a best-effort to extract the props from the object literal
+                let propsStr = '';
+                let withUnknown = false;
+                let props = [];
+                if (ts.isObjectBindingPattern(node.name)) {
+                    for (const element of node.name.elements) {
+                        if (!ts.isIdentifier(element.name) || !!element.dotDotDotToken) {
+                            withUnknown = true;
+                        }
+                        else {
+                            if (element.initializer) {
+                                const type = ts.isAsExpression(element.initializer)
+                                    ? element.initializer.type.getText()
+                                    : ts.isStringLiteral(element.initializer)
+                                        ? 'string'
+                                        : ts.isNumericLiteral(element.initializer)
+                                            ? 'number'
+                                            : element.initializer.kind === ts.SyntaxKind.TrueKeyword ||
+                                                element.initializer.kind === ts.SyntaxKind.FalseKeyword
+                                                ? 'boolean'
+                                                : ts.isIdentifier(element.initializer)
+                                                    ? `typeof ${element.initializer.text}`
+                                                    : 'unknown';
+                                props.push(`${element.name.text}?: ${type}`);
+                            }
+                            else {
+                                props.push(`${element.name.text}: unknown`);
+                            }
+                        }
+                    }
+                }
+                if (props.length > 0) {
+                    propsStr =
+                        `{ ${props.join(', ')} }` +
+                            (withUnknown ? ' & Record<string, unknown>' : '');
+                }
+                else if (withUnknown) {
+                    propsStr = 'Record<string, unknown>';
+                }
+                else {
+                    propsStr = 'Record<string, never>';
+                }
+                if (this.isTsFile) {
+                    this.$props.generic = propsStr;
+                    if (props.length > 0 || withUnknown) {
+                        preprendStr(this.str, node.initializer.expression.end + this.astOffset, surroundWithIgnoreComments(`<${propsStr}>`));
+                    }
+                }
+                else {
+                    this.$props.comment = `/** @type {${propsStr}} */`;
+                    if (props.length > 0 || withUnknown) {
+                        preprendStr(this.str, node.pos + this.astOffset, this.$props.comment);
+                    }
+                }
             }
-            // We don't bother extracting the type, we just use the comment as-is
-            this.$props.comment = comments || '';
         }
     }
     removeExport(start, end) {
@@ -4491,6 +4643,14 @@ class ExportedNames {
             });
         }
     }
+    addImplicitChildrenExport(hasAttributes) {
+        if (this.exports.has('children'))
+            return;
+        this.exports.set('children', {
+            isLet: true,
+            implicitChildren: hasAttributes ? 'attributes' : 'empty'
+        });
+    }
     /**
      * Adds export to map
      */
@@ -4550,7 +4710,7 @@ class ExportedNames {
      * @param isTsFile Whether this is a TypeScript file or not.
      * @param uses$$propsOr$$restProps whether the file references the $$props or $$restProps variable
      */
-    createPropsStr(isTsFile, uses$$propsOr$$restProps) {
+    createPropsStr(uses$$propsOr$$restProps) {
         const names = Array.from(this.exports.entries());
         if (this.$props.generic) {
             const others = names.filter(([, { isLet }]) => !isLet);
@@ -4586,11 +4746,11 @@ class ExportedNames {
         }
         if (names.length === 0 && !uses$$propsOr$$restProps) {
             // Necessary, because {} roughly equals to any
-            return isTsFile
+            return this.isTsFile
                 ? '{} as Record<string, never>'
                 : '/** @type {Record<string, never>} */ ({})';
         }
-        const dontAddTypeDef = !isTsFile || names.every(([_, value]) => !value.type && value.required);
+        const dontAddTypeDef = !this.isTsFile || names.every(([_, value]) => !value.type && value.required);
         const returnElements = this.createReturnElements(names, dontAddTypeDef);
         if (dontAddTypeDef) {
             // Only `typeof` exports -> omit the `as {...}` completely.
@@ -4602,12 +4762,22 @@ class ExportedNames {
     }
     createReturnElements(names, dontAddTypeDef) {
         return names.map(([key, value]) => {
+            if (value.implicitChildren) {
+                return `children?: ${value.implicitChildren === 'empty'
+                    ? '__sveltets_2_snippet()'
+                    : '$$implicit_children'}`;
+            }
             // Important to not use shorthand props for rename functionality
             return `${dontAddTypeDef && value.doc ? `\n${value.doc}` : ''}${value.identifierText || key}: ${key}`;
         });
     }
     createReturnElementsType(names) {
         return names.map(([key, value]) => {
+            if (value.implicitChildren) {
+                return `children?: ${value.implicitChildren === 'empty'
+                    ? `import('svelte').Snippet`
+                    : 'typeof $$implicit_children'}`;
+            }
             const identifier = `${value.doc ? `\n${value.doc}` : ''}${value.identifierText || key}${value.required ? '' : '?'}`;
             if (!value.type) {
                 return `${identifier}: typeof ${key}`;
@@ -4623,6 +4793,9 @@ class ExportedNames {
     getExportsMap() {
         return this.exports;
     }
+    uses$propsRune() {
+        return !!this.$props.generic || !!this.$props.comment;
+    }
 }
 
 function isMember(parent, prop) {
@@ -5568,12 +5741,12 @@ class InterfacesAndTypes {
     }
 }
 
-function processInstanceScriptContent(str, script, events, implicitStoreValues, mode, hasModuleScript, basename) {
+function processInstanceScriptContent(str, script, events, implicitStoreValues, mode, hasModuleScript, isTSFile, basename) {
     const htmlx = str.original;
     const scriptContent = htmlx.substring(script.content.start, script.content.end);
     const tsAst = ts.createSourceFile('component.ts.svelte', scriptContent, ts.ScriptTarget.Latest, true, ts.ScriptKind.TS);
     const astOffset = script.content.start;
-    const exportedNames = new ExportedNames(str, astOffset, basename);
+    const exportedNames = new ExportedNames(str, astOffset, basename, isTSFile);
     const generics = new Generics(str, astOffset, script);
     const interfacesAndTypes = new InterfacesAndTypes();
     const implicitTopLevelNames = new ImplicitTopLevelNames(str, astOffset);
@@ -6022,7 +6195,7 @@ function classNameFromFilename(filename, appendSuffix) {
     }
 }
 
-function createRenderFunction({ str, scriptTag, scriptDestination, slots, events, exportedNames, isTsFile, uses$$props, uses$$restProps, uses$$slots, uses$$SlotsInterface, generics, mode }) {
+function createRenderFunction({ str, scriptTag, scriptDestination, rootSnippets, slots, events, exportedNames, uses$$props, uses$$restProps, uses$$slots, uses$$SlotsInterface, generics, svelte5Plus, mode }) {
     const htmlx = str.original;
     let propsDecl = '';
     if (uses$$props) {
@@ -6069,6 +6242,9 @@ function createRenderFunction({ str, scriptTag, scriptDestination, slots, events
             str.overwrite(scriptTag.start + 1, scriptTagEnd, `function render${generics.toDefinitionString(true)}() {${propsDecl}\n`);
         }
         const scriptEndTagStart = htmlx.lastIndexOf('<', scriptTag.end - 1);
+        for (const rootSnippet of rootSnippets) {
+            str.move(rootSnippet[0], rootSnippet[1], scriptEndTagStart);
+        }
         // wrap template with callback
         str.overwrite(scriptEndTagStart, scriptTag.end, `${slotsDeclaration};\nasync () => {`, {
             contentOnly: true
@@ -6082,22 +6258,32 @@ function createRenderFunction({ str, scriptTag, scriptDestination, slots, events
         : '{' +
             Array.from(slots.entries())
                 .map(([name, attrs]) => {
-                const attrsAsString = Array.from(attrs.entries())
-                    .map(([exportName, expr]) => exportName.startsWith('__spread__')
-                    ? `...${expr}`
-                    : `${exportName}:${expr}`)
-                    .join(', ');
-                return `'${name}': {${attrsAsString}}`;
+                return `'${name}': {${slotAttributesToString(attrs)}}`;
             })
                 .join(', ') +
             '}';
-    const returnString = `\nreturn { props: ${exportedNames.createPropsStr(isTsFile, uses$$props || uses$$restProps)}` +
+    const needsImplicitChildrenProp = svelte5Plus &&
+        !exportedNames.uses$propsRune() &&
+        slots.has('default') &&
+        !exportedNames.getExportsMap().has('default');
+    if (needsImplicitChildrenProp) {
+        exportedNames.addImplicitChildrenExport(slots.get('default').size > 0);
+    }
+    const returnString = `${needsImplicitChildrenProp && slots.get('default').size > 0
+        ? `\nlet $$implicit_children = __sveltets_2_snippet({${slotAttributesToString(slots.get('default'))}});`
+        : ''}` +
+        `\nreturn { props: ${exportedNames.createPropsStr(uses$$props || uses$$restProps)}` +
         `, slots: ${slotsAsDef}` +
         `, events: ${events.toDefString()} }}`;
     // wrap template with callback
     str.append('};');
     str.append(returnString);
 }
+function slotAttributesToString(attrs) {
+    return Array.from(attrs.entries())
+        .map(([exportName, expr]) => exportName.startsWith('__spread__') ? `...${expr}` : `${exportName}:${expr}`)
+        .join(', ');
+}
 
 function processSvelteTemplate(str, parse, options) {
     const { htmlxAst, tags } = parseHtmlx(str.original, parse, options);
@@ -6283,9 +6469,10 @@ function processSvelteTemplate(str, parse, options) {
                 break;
         }
     };
-    convertHtmlxToJsx(str, htmlxAst, onHtmlxWalk, onHtmlxLeave, {
+    const rootSnippets = convertHtmlxToJsx(str, htmlxAst, onHtmlxWalk, onHtmlxLeave, {
         preserveAttributeCase: (options === null || options === void 0 ? void 0 : options.namespace) == 'foreign',
-        typingsNamespace: options.typingsNamespace
+        typingsNamespace: options.typingsNamespace,
+        svelte5Plus: options.svelte5Plus
     });
     // resolve scripts
     const { scriptTag, moduleScriptTag } = scripts.getTopLevelScriptTags();
@@ -6298,6 +6485,7 @@ function processSvelteTemplate(str, parse, options) {
         htmlAst: htmlxAst,
         moduleScriptTag,
         scriptTag,
+        rootSnippets,
         slots: slotHandler.getSlotDef(),
         events: new ComponentEvents(eventHandler, tags.some((tag) => { var _a; return (_a = tag.attributes) === null || _a === void 0 ? void 0 : _a.some((a) => a.name === 'strictEvents'); }), str),
         uses$$props,
@@ -6310,10 +6498,15 @@ function processSvelteTemplate(str, parse, options) {
 }
 function svelte2tsx(svelte, options = { parse }) {
     options.mode = options.mode || 'ts';
+    options.version = options.version || VERSION;
     const str = new MagicString(svelte);
     const basename = path__default.basename(options.filename || '');
+    const svelte5Plus = Number(options.version[0]) > 4;
     // process the htmlx as a svelte template
-    let { htmlAst, moduleScriptTag, scriptTag, slots, uses$$props, uses$$slots, uses$$restProps, events, componentDocumentation, resolvedStores, usesAccessors } = processSvelteTemplate(str, options.parse || parse, options);
+    let { htmlAst, moduleScriptTag, scriptTag, rootSnippets, slots, uses$$props, uses$$slots, uses$$restProps, events, componentDocumentation, resolvedStores, usesAccessors } = processSvelteTemplate(str, options.parse || parse, {
+        ...options,
+        svelte5Plus
+    });
     /* Rearrange the script tags so that module is first, and instance second followed finally by the template
      * This is a bit convoluted due to some trouble I had with magic string. A simple str.move(start,end,0) for each script wasn't enough
      * since if the module script was already at 0, it wouldn't move (which is fine) but would mean the order would be swapped when the script tag tried to move to 0
@@ -6335,7 +6528,7 @@ function svelte2tsx(svelte, options = { parse }) {
         : instanceScriptTarget;
     const implicitStoreValues = new ImplicitStoreValues(resolvedStores, renderFunctionStart);
     //move the instance script and process the content
-    let exportedNames = new ExportedNames(str, 0, basename);
+    let exportedNames = new ExportedNames(str, 0, basename, options === null || options === void 0 ? void 0 : options.isTsFile);
     let generics = new Generics(str, 0, { attributes: [] });
     let uses$$SlotsInterface = false;
     if (scriptTag) {
@@ -6344,7 +6537,7 @@ function svelte2tsx(svelte, options = { parse }) {
             str.move(scriptTag.start, scriptTag.end, instanceScriptTarget);
         }
         const res = processInstanceScriptContent(str, scriptTag, events, implicitStoreValues, options.mode, 
-        /**hasModuleScripts */ !!moduleScriptTag, basename);
+        /**hasModuleScripts */ !!moduleScriptTag, options === null || options === void 0 ? void 0 : options.isTsFile, basename);
         uses$$props = uses$$props || res.uses$$props;
         uses$$restProps = uses$$restProps || res.uses$$restProps;
         uses$$slots = uses$$slots || res.uses$$slots;
@@ -6355,15 +6548,16 @@ function svelte2tsx(svelte, options = { parse }) {
         str,
         scriptTag,
         scriptDestination: instanceScriptTarget,
+        rootSnippets,
         slots,
         events,
         exportedNames,
-        isTsFile: options === null || options === void 0 ? void 0 : options.isTsFile,
         uses$$props,
         uses$$restProps,
         uses$$slots,
         uses$$SlotsInterface,
         generics,
+        svelte5Plus,
         mode: options.mode
     });
     // we need to process the module script after the instance script has moved otherwise we get warnings about moving edited items
@@ -6470,13 +6664,13 @@ function loadTsconfig(config, svelteMap) {
     return {
         options: {
             ...options,
-            noEmit: false,
+            noEmit: false, // Set to true in case of jsconfig, force false, else nothing is emitted
             moduleResolution: 
             // NodeJS: up to 4.9, Node10: since 5.0
-            (_a = ts.ModuleResolutionKind.NodeJs) !== null && _a !== void 0 ? _a : ts.ModuleResolutionKind.Node10,
-            declaration: true,
-            emitDeclarationOnly: true,
-            declarationDir: config.declarationDir,
+            (_a = ts.ModuleResolutionKind.NodeJs) !== null && _a !== void 0 ? _a : ts.ModuleResolutionKind.Node10, // Classic if not set, which gives wrong results
+            declaration: true, // Needed for d.ts file generation
+            emitDeclarationOnly: true, // We only want d.ts file generation
+            declarationDir: config.declarationDir, // Where to put the declarations
             allowNonTsExtensions: true
         },
         filenames

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "svelte2tsx",
-  "version": "0.6.25",
+  "version": "0.6.27",
   "description": "Convert Svelte components to TSX for type checking",
   "author": "David Pershouse",
   "license": "MIT",
@@ -40,7 +40,7 @@
     "svelte": "~3.57.0",
     "tiny-glob": "^0.2.6",
     "tslib": "^2.4.0",
-    "typescript": "^5.2.2"
+    "typescript": "^5.3.2"
   },
   "peerDependencies": {
     "svelte": "^3.55 || ^4.0.0-next.0 || ^4.0 || ^5.0.0-next.0",

package/svelte-shims-v4.d.ts

@@ -145,6 +145,11 @@ declare function __sveltets_2_nonNullable<T>(type: T): NonNullable<T>;
 
 declare function __sveltets_2_cssProp(prop: Record<string, any>): {};
 
+// @ts-ignore Svelte v3/v4 don't have this
+declare function __sveltets_2_ensureSnippet(val: ReturnType<import('svelte').Snippet>): any;
+// @ts-ignore Svelte v3/v4 don't have this
+declare function __sveltets_2_snippet<T = void>(t: T): import('svelte').Snippet<T>;
+
 /** @internal PRIVATE API, DO NOT USE */
 type __sveltets_2_SvelteAnimationReturnType = {
     delay?: number,