fix: don't treat derived imported from svelte/store as a potential store (#2780)

#2772

Author: jasonlyu123

packages/svelte2tsx/src/svelte2tsx/index.ts

@@ -95,7 +95,11 @@ export function svelte2tsx(
     const renderFunctionStart = scriptTag
         ? str.original.lastIndexOf('>', scriptTag.content.start) + 1
         : instanceScriptTarget;
-    const implicitStoreValues = new ImplicitStoreValues(resolvedStores, renderFunctionStart);
+    const implicitStoreValues = new ImplicitStoreValues(
+        resolvedStores,
+        renderFunctionStart,
+        svelte5Plus
+    );
     //move the instance script and process the content
     let exportedNames = new ExportedNames(str, 0, basename, isTsFile, svelte5Plus, isRunes);
     let generics = new Generics(str, 0, { attributes: [] } as any);
@@ -155,6 +159,7 @@ export function svelte2tsx(
             new ImplicitStoreValues(
                 implicitStoreValues.getAccessedStores(),
                 renderFunctionStart,
+                svelte5Plus,
                 scriptTag || options.mode === 'ts' ? undefined : (input) => `</>;${input}<>`
             ),
             moduleAst

packages/svelte2tsx/src/svelte2tsx/nodes/ImplicitStoreValues.ts

@@ -24,6 +24,7 @@ export class ImplicitStoreValues {
     constructor(
         storesResolvedInTemplate: string[] = [],
         private renderFunctionStart: number,
+        private isSvelte5Plus: boolean,
         private storeFromImportsWrapper = (input: string) => input
     ) {
         storesResolvedInTemplate.forEach(this.addStoreAcess);
@@ -122,7 +123,12 @@ export class ImplicitStoreValues {
 
     private attachStoreValueDeclarationOfImportsToRenderFn(str: MagicString) {
         const storeNames = this.importStatements
-            .filter(({ name }) => name && this.accessedStores.has(name.getText()))
+            .filter(
+                (declaration) =>
+                    declaration.name &&
+                    (!this.isSvelte5Plus || !this.isSvelteStoreDerivedImport(declaration)) &&
+                    this.accessedStores.has(declaration.name.getText())
+            )
             .map(({ name }) => name.getText());
         if (!storeNames.length) {
             return;
@@ -135,6 +141,20 @@ export class ImplicitStoreValues {
         str.appendRight(this.renderFunctionStart, storeDeclarations);
     }
 
+    private isSvelteStoreDerivedImport(declaration: ts.ImportClause | ts.ImportSpecifier): boolean {
+        // named import of 'derived' from 'svelte/store'
+        if (!ts.isImportSpecifier(declaration) || declaration.name.text !== 'derived') {
+            return false;
+        }
+        const importDeclaration = declaration.parent.parent.parent;
+        return (
+            ts.isImportDeclaration(importDeclaration) &&
+            importDeclaration.moduleSpecifier &&
+            ts.isStringLiteral(importDeclaration.moduleSpecifier) &&
+            importDeclaration.moduleSpecifier.text === 'svelte/store'
+        );
+    }
+
     private createStoreDeclarations(storeNames: string[]): string {
         let declarations = '';
         for (let i = 0; i < storeNames.length; i++) {

packages/svelte2tsx/test/svelte2tsx/samples/store-derived-import/expected-svelte5.ts

@@ -0,0 +1,14 @@
+///<reference types="svelte" />
+;
+import { derived } from 'svelte/store';
+function $$render() {
+
+    
+
+    let a = $derived(1);
+;
+async () => {};
+return { props: /** @type {Record<string, never>} */ ({}), exports: {}, bindings: "", slots: {}, events: {} }}
+const Input__SvelteComponent_ = __sveltets_2_isomorphic_component(__sveltets_2_partial(__sveltets_2_with_any_event($$render())));
+/*Ωignore_startΩ*/type Input__SvelteComponent_ = InstanceType<typeof Input__SvelteComponent_>;
+/*Ωignore_endΩ*/export default Input__SvelteComponent_;

packages/svelte2tsx/test/svelte2tsx/samples/store-derived-import/expectedv2.ts

@@ -0,0 +1,14 @@
+///<reference types="svelte" />
+;
+import { derived } from 'svelte/store';
+function $$render() {
+/*Ωignore_startΩ*/;let $derived = __sveltets_2_store_get(derived);/*Ωignore_endΩ*/
+    
+
+    let a = $derived(1);
+;
+async () => {};
+return { props: /** @type {Record<string, never>} */ ({}), slots: {}, events: {} }}
+
+export default class Input__SvelteComponent_ extends __sveltets_2_createSvelte2TsxComponent(__sveltets_2_partial(__sveltets_2_with_any_event($$render()))) {
+}

packages/svelte2tsx/test/svelte2tsx/samples/store-derived-import/input.svelte

@@ -0,0 +1,5 @@
+<script>
+    import { derived } from 'svelte/store';
+
+    let a = $derived(1);
+</script>