fix: handle $store imported in module script (#404)

* (fix) handle $store imported in module script

Fixes #401

* lint

Co-authored-by: Simon Holthausen <[email protected]>

Author: dummdidumm

Diff for: src/transformers/typescript.ts

@@ -135,15 +135,24 @@ function injectVarsToCode({
       : v.name,
   );
 
+  const contentForCodestores =
+    content +
+    // Append instance script content because it's valid
+    // to import a store in module script and autosubscribe to it in instance script
+    (attributes?.context === 'module' ? getScriptContent(markup, false) : '');
+
+  // This regex extracts all possible store variables
   // TODO investigate if it's possible to achieve this with a
   // TS transformer (previous attemps have failed)
   const codestores = Array.from(
-    content.match(/\$[^\s();:,[\]{}.?!+-=*/~|&%<>^`"']+/g) || [],
+    contentForCodestores.match(/\$[^\s();:,[\]{}.?!+-=*/~|&%<>^`"']+/g) || [],
     (name) => name.slice(1),
   ).filter((name) => !JAVASCRIPT_RESERVED_KEYWORD_SET.has(name));
 
   const varsString = [...codestores, ...varnames].join(',');
   const injectedVars = `const $$vars$$ = [${varsString}];`;
+  // Append instance/markup script content because it's valid
+  // to import things in one and reference it in the other.
   const injectedCode =
     attributes?.context === 'module'
       ? `${sep}${getScriptContent(markup, false)}\n${injectedVars}`

Diff for: test/fixtures/TypeScriptImports.svelte

@@ -1,4 +1,5 @@
 <script lang="ts" context="module">
+    import { storeModuleTemplateOnly, storeModuleScriptOnly } from "./store";
     onlyUsedInModuleScript;
 </script>
 
@@ -37,6 +38,7 @@
         e.preventDefault();
     }
     $storeScriptOnly;
+    $storeModuleScriptOnly;
 </script>
 
 <style>
@@ -51,6 +53,7 @@
 </svelte:head>
 
 {$storeTemplateOnly}
+{$storeModuleTemplateOnly}
 
 <div>
     <Nested let:var1 let:var2={var3}>

Diff for: test/transformers/typescript.test.ts

@@ -132,6 +132,9 @@ describe('transformer - typescript', () => {
       expect(code).toContain(
         `import { onlyUsedInModuleScript } from "./modulescript";`,
       );
+      expect(code).toContain(
+        `import { storeModuleTemplateOnly, storeModuleScriptOnly } from "./store";`,
+      );
       // Test that comments are properly preserved
       expect(code).toContain('<!-- Some comment -->');
     });