michael/astro
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Support custom svelte compiler options in @astrojs/svelte (#3181)

Browse source 
* 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
This commit is contained in:
Tony Sullivan 2022-04-22 17:59:20 +00:00 committed by GitHub
parent 738fb958c3
commit ce9a61e9fc
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 93 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/strong-dogs-boil.md Normal file
View file

@ -0,0 +1,5 @@
---
'@astrojs/svelte': patch
---
`@astrojs/svelte` integration supports custom svelte compiler options

4
packages/astro/test/fixtures/svelte-component/astro.config.mjs vendored
View file

@ -3,5 +3,7 @@ import svelte from '@astrojs/svelte';
// https://astro.build/config
export default defineConfig({
integrations: [svelte()],
integrations: [svelte({
extensions: ['.svelte', '.sve']
})],
});

5
packages/astro/test/fixtures/svelte-component/src/components/Custom.sve vendored Normal file
View file

@ -0,0 +1,5 @@
<script lang="ts">
export let message: string;
</script>
<div id="svelte-custom-ext">{ message }</div>

5
packages/astro/test/fixtures/svelte-component/src/pages/typescript.astro vendored
View file

@ -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>

7
packages/astro/test/svelte-component.test.js
View file

@ -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;

28
packages/integrations/svelte/README.md
View file

@ -63,3 +63,31 @@ Also check our [Astro Integration Documentation][astro-integration] for more on
[astro-integration]: https://docs.astro.build/en/guides/integrations-guide/
[astro-ui-frameworks]: https://docs.astro.build/en/core-concepts/framework-components/#using-framework-components
## Options
This integration is powered by `@sveltejs/vite-plugin-svelte`. To customize the Svelte compiler, options can be provided to the integration. See the `@sveltejs/vite-plugin-svelte` [docs](https://github.com/sveltejs/vite-plugin-svelte/blob/HEAD/docs/config.md) for more details.
### Default options
A few of the default options passed to the Svelte compiler are required to build properly for Astro and cannot be overridden.
```js
const defaultOptions = {
emitCss: true,
compilerOptions: { dev: isDev, hydratable: true },
preprocess: [
preprocess({
less: true,
sass: { renderSync: true },
scss: { renderSync: true },
stylus: true,
typescript: true,
}),
],
};
```
The `emitCss`, `compilerOptions.dev`, and `compilerOptions.hydratable` cannot be overridden.
Providing your own `preprocess` options **will** override the defaults - make sure to enable the preprocessor flags needed for your project.

56
packages/integrations/svelte/src/index.ts
View file

@ -1,6 +1,7 @@
import type { AstroIntegration, AstroRenderer } from 'astro';
import { svelte } from '@sveltejs/vite-plugin-svelte';
import preprocess from 'svelte-preprocess';
import type { Options } from '@sveltejs/vite-plugin-svelte';
function getRenderer(): AstroRenderer {
return {
@ -10,38 +11,61 @@ function getRenderer(): AstroRenderer {
};
}
function getViteConfiguration(isDev: boolean) {
function getViteConfiguration(isDev: boolean, options?: Options | OptionsCallback) {
const defaultOptions = {
emitCss: true,
compilerOptions: { dev: isDev, hydratable: true },
preprocess: [
preprocess({
less: true,
sass: { renderSync: true },
scss: { renderSync: true },
stylus: true,
typescript: true,
}),
],
};
let resolvedOptions: Partial<Options>;
if (!options) {
resolvedOptions = defaultOptions;
} else if (typeof options === 'function') {
resolvedOptions = options(defaultOptions);
} else {
resolvedOptions = {
...options,
...defaultOptions,
compilerOptions: {
...options.compilerOptions,
// Always use dev and hydratable from defaults
...defaultOptions.compilerOptions,
},
// Ignore default preprocessor if the user provided their own
preprocess: options.preprocess ?? defaultOptions.preprocess,
};
}
return {
optimizeDeps: {
include: ['@astrojs/svelte/client.js', 'svelte', 'svelte/internal'],
exclude: ['@astrojs/svelte/server.js'],
},
plugins: [
svelte({
emitCss: true,
compilerOptions: { dev: isDev, hydratable: true },
preprocess: [
preprocess({
less: true,
sass: { renderSync: true },
scss: { renderSync: true },
stylus: true,
typescript: true,
}),
],
}),
svelte(resolvedOptions),
],
};
}
export default function (): AstroIntegration {
type OptionsCallback = (defaultOptions: Options) => Options;
export default function (options?: Options | OptionsCallback): AstroIntegration {
return {
name: '@astrojs/svelte',
hooks: {
// Anything that gets returned here is merged into Astro Config
'astro:config:setup': ({ command, updateConfig, addRenderer }) => {
addRenderer(getRenderer());
updateConfig({ vite: getViteConfiguration(command === 'dev') });
updateConfig({ vite: getViteConfiguration(command === 'dev', options) });
},
},
};