svelte2tsx 0.7.6 → 0.7.7

package/index.js

@@ -2373,7 +2373,7 @@ const numberOnlyAttributes = new Set([
  * - lowercase DOM attributes
  * - multi-value handling
  */
-function handleAttribute(str, attr, parent, preserveCase, element) {
+function handleAttribute(str, attr, parent, preserveCase, svelte5Plus, element) {
     if (parent.name === '!DOCTYPE' ||
         ['Style', 'Script'].includes(parent.type) ||
         (attr.name === 'name' && parent.type === 'Slot')) {
@@ -2403,7 +2403,7 @@ function handleAttribute(str, attr, parent, preserveCase, element) {
             element.addAttribute(name, value);
         }
         : (name, value) => {
-            if (attr.name.startsWith('--') && attr.value !== true) {
+            if (attr.name.startsWith('--')) {
                 // CSS custom properties are not part of the props
                 // definition, so wrap them to not get "--xx is invalid prop" errors
                 name.unshift('...__sveltets_2_cssProp({');
@@ -2420,7 +2420,8 @@ function handleAttribute(str, attr, parent, preserveCase, element) {
     const transformAttributeCase = (name) => {
         if (!preserveCase &&
             !svgAttributes.find((x) => x == name) &&
-            !(element instanceof Element && element.tagName.includes('-'))) {
+            !(element instanceof Element && element.tagName.includes('-')) &&
+            !(svelte5Plus && name.startsWith('on'))) {
             return name.toLowerCase();
         }
         else {
@@ -2629,14 +2630,11 @@ const supportsBindThis = [
 /**
  * Transform bind:xxx into something that conforms to JS/TS
  */
-function handleBinding(str, attr, parent, element, preserveBind) {
+function handleBinding(str, attr, parent, element, preserveBind, isSvelte5Plus) {
     // bind group on input
     if (element instanceof Element && attr.name == 'group' && parent.name == 'input') {
         // add reassignment to force TS to widen the type of the declaration (in case it's never reassigned anywhere else)
-        const expressionStr = str.original.substring(attr.expression.start, getEnd(attr.expression));
-        element.appendToStartEnd([
-            surroundWithIgnoreComments(`() => ${expressionStr} = __sveltets_2_any(null);`)
-        ]);
+        appendOneWayBinding(attr, ' = __sveltets_2_any(null)', element);
         return;
     }
     // bind this
@@ -2688,8 +2686,18 @@ function handleBinding(str, attr, parent, element, preserveBind) {
     const value = isShorthand
         ? preserveBind && element instanceof Element
             ? [rangeWithTrailingPropertyAccess(str.original, attr.expression)]
-            : undefined
-        : [rangeWithTrailingPropertyAccess(str.original, attr.expression)];
+            : isSvelte5Plus
+                ? [
+                    `__sveltets_2_binding(${str.original.substring(attr.expression.start, attr.expression.end)})`
+                ]
+                : undefined
+        : element instanceof Element || !isSvelte5Plus
+            ? [rangeWithTrailingPropertyAccess(str.original, attr.expression)]
+            : [
+                '__sveltets_2_binding(',
+                rangeWithTrailingPropertyAccess(str.original, attr.expression),
+                ')'
+            ];
     if (element instanceof Element) {
         element.addAttribute(name, value);
     }
@@ -2906,7 +2914,7 @@ function handleKey(str, keyBlock) {
  * @param node
  * @param element
  */
-function handleLet(str, node, parent, preserveCase, element) {
+function handleLet(str, node, parent, preserveCase, svelte5Plus, element) {
     if (element instanceof InlineComponent) {
         // let:xx belongs to either the default slot or a named slot,
         // which is determined in Attribute.ts
@@ -2934,7 +2942,7 @@ function handleLet(str, node, parent, preserveCase, element) {
                         }
                     ]
                     : true
-            }, parent, preserveCase, element);
+            }, parent, preserveCase, svelte5Plus, element);
         }
     }
 }
@@ -3090,25 +3098,22 @@ function handleTransitionDirective(str, attr, element) {
  * ```
  */
 function handleSnippet(str, snippetBlock, component) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    var _a, _b, _c, _d, _e, _f;
     const isImplicitProp = component !== undefined;
     const endSnippet = str.original.lastIndexOf('{', snippetBlock.end - 1);
     // Return something to silence the "snippet type not assignable to return type void" error
-    str.overwrite(endSnippet, snippetBlock.end, `return __sveltets_2_any(0)}${isImplicitProp ? '' : ';'}`, {
+    str.overwrite(endSnippet, snippetBlock.end, `};return __sveltets_2_any(0)}${isImplicitProp ? '' : ';'}`, {
         contentOnly: true
     });
     const startEnd = str.original.indexOf('}', 
     // context was the first iteration in a .next release, remove at some point
-    ((_a = snippetBlock.context) === null || _a === void 0 ? void 0 : _a.end) ||
-        ((_c = (_b = snippetBlock.parameters) === null || _b === void 0 ? void 0 : _b.at(-1)) === null || _c === void 0 ? void 0 : _c.end) ||
-        snippetBlock.expression.end) + 1;
+    ((_b = (_a = snippetBlock.parameters) === null || _a === void 0 ? void 0 : _a.at(-1)) === null || _b === void 0 ? void 0 : _b.end) || snippetBlock.expression.end) + 1;
     if (isImplicitProp) {
         str.overwrite(snippetBlock.start, snippetBlock.expression.start, '', { contentOnly: true });
         const transforms = ['('];
-        if (snippetBlock.context || ((_d = snippetBlock.parameters) === null || _d === void 0 ? void 0 : _d.length)) {
-            // context was the first iteration in a .next release, remove at some point
-            const start = ((_e = snippetBlock.context) === null || _e === void 0 ? void 0 : _e.start) || ((_f = snippetBlock.parameters) === null || _f === void 0 ? void 0 : _f[0].start);
-            const end = ((_g = snippetBlock.context) === null || _g === void 0 ? void 0 : _g.end) || snippetBlock.parameters.at(-1).end;
+        if ((_c = snippetBlock.parameters) === null || _c === void 0 ? void 0 : _c.length) {
+            const start = (_d = snippetBlock.parameters) === null || _d === void 0 ? void 0 : _d[0].start;
+            const end = snippetBlock.parameters.at(-1).end;
             transforms.push([start, end]);
             str.overwrite(snippetBlock.expression.end, start, '', {
                 contentOnly: true
@@ -3118,20 +3123,13 @@ function handleSnippet(str, snippetBlock, component) {
         else {
             str.overwrite(snippetBlock.expression.end, startEnd, '', { contentOnly: true });
         }
-        transforms.push(') => {');
+        transforms.push(') => {async () => {'); // inner async function for potential #await blocks
         transforms.push([startEnd, snippetBlock.end]);
         component.addProp([[snippetBlock.expression.start, snippetBlock.expression.end]], transforms);
     }
     else {
         let generic = '';
-        // context was the first iteration in a .next release, remove at some point
-        if (snippetBlock.context) {
-            generic = snippetBlock.context.typeAnnotation
-                ? `<${str.original.slice(snippetBlock.context.typeAnnotation.start + 1, snippetBlock.context.typeAnnotation.end)}>`
-                : // slap any on to it to silence "implicit any" errors; JSDoc people can't add types to snippets
-                    '<any>';
-        }
-        else if ((_h = snippetBlock.parameters) === null || _h === void 0 ? void 0 : _h.length) {
+        if ((_e = snippetBlock.parameters) === null || _e === void 0 ? void 0 : _e.length) {
             generic = `<[${snippetBlock.parameters
                 .map((p) => p.typeAnnotation
                 ? str.original.slice(p.typeAnnotation.start + 1, p.typeAnnotation.end)
@@ -3145,16 +3143,12 @@ function handleSnippet(str, snippetBlock, component) {
             [snippetBlock.expression.start, snippetBlock.expression.end],
             typeAnnotation + ' = ('
         ];
-        // context was the first iteration in a .next release, remove at some point
-        if (snippetBlock.context) {
-            transforms.push([snippetBlock.context.start, snippetBlock.context.end]);
-        }
-        else if ((_j = snippetBlock.parameters) === null || _j === void 0 ? void 0 : _j.length) {
+        if ((_f = snippetBlock.parameters) === null || _f === void 0 ? void 0 : _f.length) {
             const start = snippetBlock.parameters[0].start;
             const end = snippetBlock.parameters.at(-1).end;
             transforms.push([start, end]);
         }
-        transforms.push(') => {');
+        transforms.push(') => {async () => {'); // inner async function for potential #await blocks
         transform(str, snippetBlock.start, startEnd, startEnd, transforms);
     }
 }
@@ -3197,22 +3191,10 @@ function handleImplicitChildren(componentNode, component) {
  * `{@render foo(x)}` --> `;foo(x);`
  */
 function handleRenderTag(str, renderTag) {
-    var _a;
     str.overwrite(renderTag.start, renderTag.expression.start, ';__sveltets_2_ensureSnippet(', {
         contentOnly: true
     });
-    // argument was present until https://github.com/sveltejs/svelte/pull/9988 / https://github.com/sveltejs/svelte/pull/10656,
-    // remove and only keep last else block at some point
-    const arg = renderTag.argument || ((_a = renderTag.arguments) === null || _a === void 0 ? void 0 : _a[renderTag.arguments.length - 1]);
-    if (arg) {
-        str.overwrite(withTrailingPropertyAccess(str.original, arg.end), renderTag.end, '));');
-    }
-    else if ('argument' in renderTag || 'arguments' in renderTag) {
-        str.overwrite(withTrailingPropertyAccess(str.original, renderTag.expression.end), renderTag.end, '());');
-    }
-    else {
-        str.overwrite(withTrailingPropertyAccess(str.original, renderTag.expression.end), renderTag.end, ');');
-    }
+    str.overwrite(withTrailingPropertyAccess(str.original, renderTag.expression.end), renderTag.end, ');');
 }
 
 function stripDoctype(str) {
@@ -3311,7 +3293,7 @@ function convertHtmlxToJsx(str, ast, onWalk = null, onLeave = null, options = {
                         handleComment(str, node);
                         break;
                     case 'Binding':
-                        handleBinding(str, node, parent, element, options.typingsNamespace === 'svelteHTML');
+                        handleBinding(str, node, parent, element, options.typingsNamespace === 'svelteHTML', options.svelte5Plus);
                         break;
                     case 'Class':
                         handleClassDirective(str, node, element);
@@ -3329,7 +3311,7 @@ function convertHtmlxToJsx(str, ast, onWalk = null, onLeave = null, options = {
                         handleAnimateDirective(str, node, element);
                         break;
                     case 'Attribute':
-                        handleAttribute(str, node, parent, options.preserveAttributeCase, element);
+                        handleAttribute(str, node, parent, options.preserveAttributeCase, options.svelte5Plus, element);
                         break;
                     case 'Spread':
                         handleSpread(node, element);
@@ -3338,7 +3320,7 @@ function convertHtmlxToJsx(str, ast, onWalk = null, onLeave = null, options = {
                         handleEventHandler(str, node, element);
                         break;
                     case 'Let':
-                        handleLet(str, node, parent, options.preserveAttributeCase, element);
+                        handleLet(str, node, parent, options.preserveAttributeCase, options.svelte5Plus, element);
                         break;
                     case 'Text':
                         handleText(str, node, parent);
@@ -4411,15 +4393,20 @@ class ExportedNames {
          * Uses the `$$Props` type
          */
         this.uses$$Props = false;
+        /**
+         * Component contains globals that have a rune name
+         */
+        this.hasRunesGlobals = false;
         /**
          * The `$props()` rune's type info as a string, if it exists.
          * If using TS, this returns the generic string, if using JS, returns the `@type {..}` string.
          */
         this.$props = {
             comment: '',
-            generic: '',
-            mayHaveChildrenProp: false
+            type: '',
+            bindings: []
         };
+        /** Map of all props and exports. Exposing it publicly is no longer necessary for runes mode */
         this.exports = new Map();
         this.possibleExports = new Map();
         this.doneDeclarationTransformation = new Set();
@@ -4494,42 +4481,40 @@ class ExportedNames {
     }
     handle$propsRune(node) {
         var _a, _b;
-        // Check if the $props() rune has a children prop
+        // Check if the $props() rune uses $bindable()
         if (ts.isObjectBindingPattern(node.name)) {
             for (const element of node.name.elements) {
-                if (!ts.isIdentifier(element.name) ||
-                    (element.propertyName && !ts.isIdentifier(element.propertyName)) ||
-                    !!element.dotDotDotToken) {
-                    // not statically analyzable, so we assume it may have children
-                    this.$props.mayHaveChildrenProp = true;
-                }
-                else {
+                if (ts.isIdentifier(element.name) &&
+                    (!element.propertyName || ts.isIdentifier(element.propertyName)) &&
+                    !element.dotDotDotToken) {
                     const name = element.propertyName
                         ? element.propertyName.text
                         : element.name.text;
-                    if (name === 'children') {
-                        this.$props.mayHaveChildrenProp = true;
+                    if (element.initializer) {
+                        const call = element.initializer;
+                        if (ts.isCallExpression(call) && ts.isIdentifier(call.expression)) {
+                            if (call.expression.text === '$bindable') {
+                                this.$props.bindings.push(name);
+                            }
+                        }
                     }
                 }
             }
         }
-        else {
-            this.$props.mayHaveChildrenProp = true;
-        }
         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;
             const generic = generic_arg.getText();
             if (!generic.includes('{')) {
-                this.$props.generic = generic;
+                this.$props.type = generic;
             }
             else {
                 // Create a virtual type alias for the unnamed generic and reuse it for the props return type
                 // so that rename, find references etc works seamlessly across components
-                this.$props.generic = '$$ComponentProps';
-                preprendStr(this.str, generic_arg.pos + this.astOffset, `;type ${this.$props.generic} = `);
+                this.$props.type = '$$ComponentProps';
+                preprendStr(this.str, generic_arg.pos + this.astOffset, `;type ${this.$props.type} = `);
                 this.str.appendLeft(generic_arg.end + this.astOffset, ';');
                 this.str.move(generic_arg.pos + this.astOffset, generic_arg.end + this.astOffset, node.parent.pos + this.astOffset);
-                this.str.appendRight(generic_arg.end + this.astOffset, this.$props.generic);
+                this.str.appendRight(generic_arg.end + this.astOffset, this.$props.type);
             }
         }
         else {
@@ -4582,9 +4567,6 @@ class ExportedNames {
             let props = [];
             const isKitRouteFile = internalHelpers.isKitRouteFile(this.basename);
             const isKitLayoutFile = isKitRouteFile && this.basename.includes('layout');
-            if (isKitRouteFile) {
-                this.$props.mayHaveChildrenProp = isKitLayoutFile;
-            }
             if (ts.isObjectBindingPattern(node.name)) {
                 for (const element of node.name.elements) {
                     if (!ts.isIdentifier(element.name) ||
@@ -4645,10 +4627,10 @@ class ExportedNames {
             // Create a virtual type alias for the unnamed generic and reuse it for the props return type
             // so that rename, find references etc works seamlessly across components
             if (this.isTsFile) {
-                this.$props.generic = '$$ComponentProps';
+                this.$props.type = '$$ComponentProps';
                 if (props.length > 0 || withUnknown) {
                     preprendStr(this.str, node.parent.pos + this.astOffset, surroundWithIgnoreComments(`;type $$ComponentProps = ${propsStr};`));
-                    preprendStr(this.str, node.name.end + this.astOffset, `: ${this.$props.generic}`);
+                    preprendStr(this.str, node.name.end + this.astOffset, `: ${this.$props.type}`);
                 }
             }
             else {
@@ -4762,14 +4744,22 @@ class ExportedNames {
         }
         this.getters.add(node.text);
     }
-    createClassGetters() {
-        return Array.from(this.getters)
-            .map((name) => 
-        // getters are const/classes/functions, which are always defined.
-        // We have to remove the `| undefined` from the type here because it was necessary to
-        // be added in a previous step so people are not expected to provide these as props.
-        `\n    get ${name}() { return __sveltets_2_nonNullable(this.$$prop_def.${name}) }`)
-            .join('');
+    createClassGetters(generics = '') {
+        if (this.usesRunes()) {
+            // In runes mode, exports are no longer part of props
+            return Array.from(this.getters)
+                .map((name) => `\n    get ${name}() { return render${generics}().exports.${name} }`)
+                .join('');
+        }
+        else {
+            return Array.from(this.getters)
+                .map((name) => 
+            // getters are const/classes/functions, which are always defined.
+            // We have to remove the `| undefined` from the type here because it was necessary to
+            // be added in a previous step so people are not expected to provide these as props.
+            `\n    get ${name}() { return __sveltets_2_nonNullable(this.$$prop_def.${name}) }`)
+                .join('');
+        }
     }
     createClassAccessors() {
         const accessors = [];
@@ -4809,14 +4799,6 @@ class ExportedNames {
             });
         }
     }
-    addImplicitChildrenExport(hasParams) {
-        if (this.exports.has('children'))
-            return;
-        this.exports.set('children', {
-            isLet: true,
-            implicitChildren: hasParams ? 'has_params' : 'empty'
-        });
-    }
     /**
      * Adds export to map
      */
@@ -4873,34 +4855,46 @@ class ExportedNames {
     /**
      * Creates a string from the collected props
      *
-     * @param isTsFile Whether this is a TypeScript file or not.
      * @param uses$$propsOr$$restProps whether the file references the $$props or $$restProps variable
      */
     createPropsStr(uses$$propsOr$$restProps) {
         const names = Array.from(this.exports.entries());
-        if (this.$props.generic) {
-            const others = names.filter(([, { isLet, implicitChildren }]) => !isLet || !!implicitChildren);
+        if (this.$props.type) {
             return ('{} as any as ' +
-                this.$props.generic +
-                (others.length
-                    ? ' & { ' + this.createReturnElementsType(others).join(',') + ' }'
-                    : ''));
+                (this.$props.bindings.length
+                    ? `__sveltets_2_Bindings<${this.$props.type}, ${this.$props.bindings.map((b) => `"${b}"`).join('|')}>`
+                    : this.$props.type));
         }
         if (this.$props.comment) {
-            // Try our best to incorporate createReturnElementsType here
-            const others = names.filter(([, { isLet, implicitChildren }]) => !isLet || !!implicitChildren);
+            let result = this.$props.comment + '({})';
+            // Try our best to incorporate __sveltets_2_Bindings here
             let idx = this.$props.comment.indexOf('@type');
-            if (idx !== -1 && /[\s{]/.test(this.$props.comment[idx + 5]) && others.length > 0) {
+            if (idx !== -1 && /[\s{]/.test(this.$props.comment[idx + 5])) {
                 idx = this.$props.comment.indexOf('{', idx);
-                if (idx !== -1) {
-                    idx++;
-                    return (this.$props.comment.slice(0, idx) +
-                        `{${this.createReturnElementsType(others, false)}} & ` +
-                        this.$props.comment.slice(idx) +
-                        '({})');
+                const end = this.$props.comment.lastIndexOf('}');
+                if (idx !== -1 && end !== -1 && idx < end) {
+                    const has_bindings = this.$props.bindings.length;
+                    if (has_bindings) {
+                        idx++;
+                        result =
+                            this.$props.comment.slice(0, idx) +
+                                (has_bindings ? '__sveltets_2_Bindings<' : '') +
+                                this.$props.comment.slice(idx, end) +
+                                (has_bindings
+                                    ? `, ${this.$props.bindings.map((b) => `"${b}"`).join('|')}>`
+                                    : '') +
+                                this.$props.comment.slice(end) +
+                                '({})';
+                    }
                 }
             }
-            return this.$props.comment + '({})';
+            return result;
+        }
+        if (this.usesRunes()) {
+            // Necessary, because {} roughly equals to any
+            return this.isTsFile
+                ? '{} as Record<string, never>'
+                : '/** @type {Record<string, never>} */ ({})';
         }
         if (this.uses$$Props) {
             const lets = names.filter(([, { isLet }]) => isLet);
@@ -4937,25 +4931,34 @@ class ExportedNames {
         const returnElementsType = this.createReturnElementsType(names);
         return `{${returnElements.join(' , ')}} as {${returnElementsType.join(', ')}}`;
     }
+    /**
+     * In runes mode, exports are no longer part of props because you cannot `bind:` to them,
+     * which is why we need a separate return type for them.
+     */
+    createExportsStr() {
+        const names = Array.from(this.exports.entries());
+        const others = names.filter(([, { isLet }]) => !isLet);
+        if (this.usesRunes() && others.length > 0) {
+            if (this.isTsFile) {
+                return (', exports: {} as any as { ' +
+                    this.createReturnElementsType(others, undefined, true).join(',') +
+                    ' }');
+            }
+            else {
+                return `, exports: /** @type {${this.createReturnElementsType(others, false, true)}} */ ({})`;
+            }
+        }
+        return '';
+    }
     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, addDoc = true) {
+    createReturnElementsType(names, addDoc = true, forceRequired = false) {
         return names.map(([key, value]) => {
-            if (value.implicitChildren) {
-                return `children?: ${value.implicitChildren === 'empty'
-                    ? `import('svelte').Snippet`
-                    : 'typeof $$implicit_children'}`;
-            }
-            const identifier = `${value.doc && addDoc ? `\n${value.doc}` : ''}${value.identifierText || key}${value.required ? '' : '?'}`;
+            const identifier = `${value.doc && addDoc ? `\n${value.doc}` : ''}${value.identifierText || key}${value.required || forceRequired ? '' : '?'}`;
             if (!value.type) {
                 return `${identifier}: typeof ${key}`;
             }
@@ -4963,15 +4966,27 @@ class ExportedNames {
         });
     }
     createOptionalPropsArray() {
-        return Array.from(this.exports.entries())
-            .filter(([_, entry]) => !entry.required)
-            .map(([name, entry]) => `'${entry.identifierText || name}'`);
+        if (this.usesRunes()) {
+            return [];
+        }
+        else {
+            return Array.from(this.exports.entries())
+                .filter(([_, entry]) => !entry.required)
+                .map(([name, entry]) => `'${entry.identifierText || name}'`);
+        }
     }
     getExportsMap() {
         return this.exports;
     }
-    usesChildrenIn$propsRune() {
-        return this.$props.mayHaveChildrenProp;
+    hasPropsRune() {
+        return this.$props.type || this.$props.comment;
+    }
+    checkGlobalsForRunes(globals) {
+        const runes = ['$state', '$derived', '$effect']; // no need to check for props, already handled through other means in here
+        this.hasRunesGlobals = globals.some((global) => runes.includes(global));
+    }
+    usesRunes() {
+        return this.hasRunesGlobals || this.hasPropsRune();
     }
 }
 
@@ -5107,7 +5122,7 @@ function handleScopeAndResolveLetVarForSlot({ letNode, component, slotName, temp
 /**
  * Tracks all store-usages as well as all variable declarations and imports in the component.
  *
- * In the modification-step at the end, all variable declartaions and imports which
+ * In the modification-step at the end, all variable declarations and imports which
  * were used as stores are appended with `let $xx = __sveltets_2_store_get(xx)` to create the store variables.
  */
 class ImplicitStoreValues {
@@ -5136,6 +5151,13 @@ class ImplicitStoreValues {
     getAccessedStores() {
         return [...this.accessedStores.keys()];
     }
+    getGlobals() {
+        const globals = new Set(this.accessedStores);
+        this.variableDeclarations.forEach((node) => extractIdentifiers(node.name).forEach((id) => globals.delete(id.text)));
+        this.reactiveDeclarations.forEach((node) => getNamesFromLabeledStatement(node).forEach((name) => globals.delete(name)));
+        this.importStatements.forEach(({ name }) => name && globals.delete(name.getText()));
+        return [...globals].map((name) => `$${name}`);
+    }
     attachStoreValueDeclarationToDecl(node, astOffset, str) {
         const storeNames = extractIdentifiers(node.name)
             .map((id) => id.text)
@@ -6259,13 +6281,22 @@ class __sveltets_Render${genericsDef} {
     const [PropsName] = addTypeExport(str, className, 'Props');
     const [EventsName] = addTypeExport(str, className, 'Events');
     const [SlotsName] = addTypeExport(str, className, 'Slots');
+    /**
+     * In Svelte 5 runes mode we add a custom constructor to override the default one which implicitly makes all properties bindable.
+     * Remove this once Svelte typings no longer do that (Svelte 6 or 7)
+     */
+    let customConstructor = '';
+    if (exportedNames.hasPropsRune()) {
+        customConstructor = `\n    constructor(options: import('svelte').ComponentConstructorOptions<__sveltets_2_PropsWithChildren<${returnType('props')}, ${returnType('slots')}>>) { super(options); }`;
+    }
     if (mode === 'dts') {
         statement +=
             `export type ${PropsName}${genericsDef} = ${returnType('props')};\n` +
                 `export type ${EventsName}${genericsDef} = ${returnType('events')};\n` +
                 `export type ${SlotsName}${genericsDef} = ${returnType('slots')};\n` +
                 `\n${doc}export default class${className ? ` ${className}` : ''}${genericsDef} extends ${svelteComponentClass}<${PropsName}${genericsRef}, ${EventsName}${genericsRef}, ${SlotsName}${genericsRef}> {` +
-                exportedNames.createClassGetters() +
+                customConstructor +
+                exportedNames.createClassGetters(genericsRef) +
                 (usesAccessors ? exportedNames.createClassAccessors() : '') +
                 '\n}';
     }
@@ -6273,7 +6304,8 @@ class __sveltets_Render${genericsDef} {
         statement +=
             `\n\nimport { ${svelteComponentClass} as __SvelteComponentTyped__ } from "svelte" \n` +
                 `${doc}export default class${className ? ` ${className}` : ''}${genericsDef} extends __SvelteComponentTyped__<${returnType('props')}, ${returnType('events')}, ${returnType('slots')}> {` +
-                exportedNames.createClassGetters() +
+                customConstructor +
+                exportedNames.createClassGetters(genericsRef) +
                 (usesAccessors ? exportedNames.createClassAccessors() : '') +
                 '\n}';
     }
@@ -6283,6 +6315,14 @@ function addSimpleComponentExport({ strictEvents, isTsFile, canHaveAnyProp, expo
     const propDef = props(isTsFile, canHaveAnyProp, exportedNames, events(strictEvents, 'render()'));
     const doc = componentDocumentation.getFormatted();
     const className = fileName && classNameFromFilename(fileName, mode !== 'dts');
+    /**
+     * In Svelte 5 runes mode we add a custom constructor to override the default one which implicitly makes all properties bindable.
+     * Remove this once Svelte typings no longer do that (Svelte 6 or 7)
+     */
+    let customConstructor = '';
+    if (exportedNames.hasPropsRune()) {
+        customConstructor = `\n    constructor(options = __sveltets_2_runes_constructor(${propDef})) { super(options); }`;
+    }
     let statement;
     if (mode === 'dts' && isTsFile) {
         const svelteComponentClass = noSvelteComponentTyped
@@ -6297,6 +6337,7 @@ function addSimpleComponentExport({ strictEvents, isTsFile, canHaveAnyProp, expo
                 EventsExport +
                 SlotsExport +
                 `\n${doc}export default class${className ? ` ${className}` : ''} extends ${svelteComponentClass}<${PropsName}, ${EventsName}, ${SlotsName}> {` +
+                customConstructor +
                 exportedNames.createClassGetters() +
                 (usesAccessors ? exportedNames.createClassAccessors() : '') +
                 '\n}';
@@ -6308,6 +6349,7 @@ function addSimpleComponentExport({ strictEvents, isTsFile, canHaveAnyProp, expo
                 `/** @typedef {typeof __propDef.events}  ${className}Events */\n` +
                 `/** @typedef {typeof __propDef.slots}  ${className}Slots */\n` +
                 `\n${doc}export default class${className ? ` ${className}` : ''} extends __sveltets_2_createSvelte2TsxComponent(${propDef}) {` +
+                customConstructor +
                 exportedNames.createClassGetters() +
                 (usesAccessors ? exportedNames.createClassAccessors() : '') +
                 '\n}';
@@ -6315,6 +6357,7 @@ function addSimpleComponentExport({ strictEvents, isTsFile, canHaveAnyProp, expo
     else {
         statement =
             `\n\n${doc}export default class${className ? ` ${className}` : ''} extends __sveltets_2_createSvelte2TsxComponent(${propDef}) {` +
+                customConstructor +
                 exportedNames.createClassGetters() +
                 (usesAccessors ? exportedNames.createClassAccessors() : '') +
                 '\n}';
@@ -6395,7 +6438,7 @@ function classNameFromFilename(filename, appendSuffix) {
     }
 }
 
-function createRenderFunction({ str, scriptTag, scriptDestination, rootSnippets, slots, events, exportedNames, uses$$props, uses$$restProps, uses$$slots, uses$$SlotsInterface, generics, svelte5Plus, mode }) {
+function createRenderFunction({ str, scriptTag, scriptDestination, rootSnippets, slots, events, exportedNames, uses$$props, uses$$restProps, uses$$slots, uses$$SlotsInterface, generics, mode }) {
     const htmlx = str.original;
     let propsDecl = '';
     if (uses$$props) {
@@ -6457,17 +6500,8 @@ function createRenderFunction({ str, scriptTag, scriptDestination, rootSnippets,
             })
                 .join(', ') +
             '}';
-    const needsImplicitChildrenProp = svelte5Plus &&
-        !exportedNames.usesChildrenIn$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)}` +
+    const returnString = `\nreturn { props: ${exportedNames.createPropsStr(uses$$props || uses$$restProps)}` +
+        exportedNames.createExportsStr() +
         `, slots: ${slotsAsDef}` +
         `, events: ${events.toDefString()} }}`;
     // wrap template with callback
@@ -6738,6 +6772,9 @@ function svelte2tsx(svelte, options = { parse: compiler.parse }) {
         uses$$slots = uses$$slots || res.uses$$slots;
         ({ exportedNames, events, generics, uses$$SlotsInterface } = res);
     }
+    if (svelte5Plus) {
+        exportedNames.checkGlobalsForRunes(implicitStoreValues.getGlobals());
+    }
     //wrap the script tag and template content in a function returning the slot and exports
     createRenderFunction({
         str,