Support custom svelte compiler options in @astrojs/svelte (withastro#…

…3181) * updating svelte integration to allow custom user config * test: adding a test to verify that svelte options are piped through the integration * updating the README with docs on overridding svelte options * chore: adding changeset * fix: copy/paste bug in test validation * removing temporary debug scripts
SiriousHunter · Apr 22, 2022 · d789626 · d789626
1 parent 7729ff4
commit d789626
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 1 deletion.
diff --git a/test/fixtures/svelte-component/astro.config.mjs b/test/fixtures/svelte-component/astro.config.mjs
@@ -3,5 +3,7 @@ import svelte from '@astrojs/svelte';
 
 // https://astro.build/config
 export default defineConfig({
-	integrations: [svelte()],
+	integrations: [svelte({
+		extensions: ['.svelte', '.sve']
+	})],
 });
diff --git a/test/fixtures/svelte-component/src/components/Custom.sve b/test/fixtures/svelte-component/src/components/Custom.sve
@@ -0,0 +1,5 @@
+<script lang="ts">
+  export let message: string;
+</script>
+
+<div id="svelte-custom-ext">{ message }</div>
diff --git a/test/fixtures/svelte-component/src/pages/typescript.astro b/test/fixtures/svelte-component/src/pages/typescript.astro
@@ -1,5 +1,9 @@
 ---
 import TypeScript from '../components/TypeScript.svelte'
+
+// Using a custom extension to verify svelte options
+// in astro.config.mjs are passed properly to the svelte integration
+import Custom from '../components/Custom.sve'
 ---
 <html lang="en">
   <head>
@@ -20,6 +24,7 @@ import TypeScript from '../components/TypeScript.svelte'
   <body>
     <main>
       <TypeScript message="Hello, TypeScript" client:load />
+      <Custom message="Hello, Custom Extensions" client:idle />
     </main>
   </body>
 </html>
diff --git a/test/svelte-component.test.js b/test/svelte-component.test.js
@@ -22,6 +22,13 @@ describe('Svelte component', () => {
 
 			expect($('#svelte-ts').text()).to.equal('Hello, TypeScript');
 		});
+
+		it('Works with custom Svelte config', async () => {
+			const html = await fixture.readFile('/typescript/index.html');
+			const $ = cheerio.load(html);
+
+			expect($('#svelte-custom-ext').text()).to.equal('Hello, Custom Extensions');
+		});
 	});
 
 	if (isWindows) return;