From ce9a61e9fc6fdbf9b8469197df6d728f395656ec Mon Sep 17 00:00:00 2001 From: Tony Sullivan Date: Fri, 22 Apr 2022 17:59:20 +0000 Subject: [PATCH 1/6] Support custom svelte compiler options in @astrojs/svelte (#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 --- .changeset/strong-dogs-boil.md | 5 ++ .../svelte-component/astro.config.mjs | 4 +- .../src/components/Custom.sve | 5 ++ .../src/pages/typescript.astro | 5 ++ packages/astro/test/svelte-component.test.js | 7 +++ packages/integrations/svelte/README.md | 28 ++++++++++ packages/integrations/svelte/src/index.ts | 56 +++++++++++++------ 7 files changed, 93 insertions(+), 17 deletions(-) create mode 100644 .changeset/strong-dogs-boil.md create mode 100644 packages/astro/test/fixtures/svelte-component/src/components/Custom.sve diff --git a/.changeset/strong-dogs-boil.md b/.changeset/strong-dogs-boil.md new file mode 100644 index 000000000000..1b9abd69fcf4 --- /dev/null +++ b/.changeset/strong-dogs-boil.md @@ -0,0 +1,5 @@ +--- +'@astrojs/svelte': patch +--- + +`@astrojs/svelte` integration supports custom svelte compiler options diff --git a/packages/astro/test/fixtures/svelte-component/astro.config.mjs b/packages/astro/test/fixtures/svelte-component/astro.config.mjs index dbf6d6b8fa46..b1aeede15aac 100644 --- a/packages/astro/test/fixtures/svelte-component/astro.config.mjs +++ b/packages/astro/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'] + })], }); \ No newline at end of file diff --git a/packages/astro/test/fixtures/svelte-component/src/components/Custom.sve b/packages/astro/test/fixtures/svelte-component/src/components/Custom.sve new file mode 100644 index 000000000000..f61026424e88 --- /dev/null +++ b/packages/astro/test/fixtures/svelte-component/src/components/Custom.sve @@ -0,0 +1,5 @@ + + +
{ message }
diff --git a/packages/astro/test/fixtures/svelte-component/src/pages/typescript.astro b/packages/astro/test/fixtures/svelte-component/src/pages/typescript.astro index d6b4167564d4..2de86df16cf1 100644 --- a/packages/astro/test/fixtures/svelte-component/src/pages/typescript.astro +++ b/packages/astro/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' --- @@ -20,6 +24,7 @@ import TypeScript from '../components/TypeScript.svelte'
+
diff --git a/packages/astro/test/svelte-component.test.js b/packages/astro/test/svelte-component.test.js index 36ba35b51beb..a68acd92432e 100644 --- a/packages/astro/test/svelte-component.test.js +++ b/packages/astro/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; diff --git a/packages/integrations/svelte/README.md b/packages/integrations/svelte/README.md index e5bce561a5d7..b0cddafe2297 100644 --- a/packages/integrations/svelte/README.md +++ b/packages/integrations/svelte/README.md @@ -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. \ No newline at end of file diff --git a/packages/integrations/svelte/src/index.ts b/packages/integrations/svelte/src/index.ts index f5a3dd945c3d..d12b6d533fa2 100644 --- a/packages/integrations/svelte/src/index.ts +++ b/packages/integrations/svelte/src/index.ts @@ -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; + + 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) }); }, }, }; From 7ccda57c1d34529446bff99131ded899f1b678ab Mon Sep 17 00:00:00 2001 From: tony-sull Date: Fri, 22 Apr 2022 18:00:08 +0000 Subject: [PATCH 2/6] [ci] format --- packages/integrations/svelte/src/index.ts | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/integrations/svelte/src/index.ts b/packages/integrations/svelte/src/index.ts index d12b6d533fa2..4d9fddf70bdb 100644 --- a/packages/integrations/svelte/src/index.ts +++ b/packages/integrations/svelte/src/index.ts @@ -51,9 +51,7 @@ function getViteConfiguration(isDev: boolean, options?: Options | OptionsCallbac include: ['@astrojs/svelte/client.js', 'svelte', 'svelte/internal'], exclude: ['@astrojs/svelte/server.js'], }, - plugins: [ - svelte(resolvedOptions), - ], + plugins: [svelte(resolvedOptions)], }; } From eda4979997aa01aaee4dd9f57b0dac24183209d9 Mon Sep 17 00:00:00 2001 From: Ben Holmes Date: Fri, 22 Apr 2022 15:01:16 -0400 Subject: [PATCH 3/6] feat: remove online editor configs (#3175) --- packages/create-astro/src/index.ts | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/packages/create-astro/src/index.ts b/packages/create-astro/src/index.ts index 2286c13f526e..9c102c37ebf8 100644 --- a/packages/create-astro/src/index.ts +++ b/packages/create-astro/src/index.ts @@ -36,6 +36,7 @@ const { version } = JSON.parse( fs.readFileSync(new URL('../package.json', import.meta.url), 'utf-8') ); +const FILES_TO_REMOVE = ['.stackblitzrc', 'sandbox.config.json']; // some files are only needed for online editors when using astro.new. Remove for create-astro installs. const POSTPROCESS_FILES = ['package.json', 'astro.config.mjs', 'CHANGELOG.md']; // some files need processing after copying. export async function main() { @@ -179,8 +180,12 @@ export async function main() { } // Post-process in parallel - await Promise.all( - POSTPROCESS_FILES.map(async (file) => { + await Promise.all([ + ...FILES_TO_REMOVE.map(async (file) => { + const fileLoc = path.resolve(path.join(cwd, file)); + return fs.promises.rm(fileLoc); + }), + ...POSTPROCESS_FILES.map(async (file) => { const fileLoc = path.resolve(path.join(cwd, file)); switch (file) { @@ -232,8 +237,8 @@ export async function main() { break; } } - }) - ); + }), + ]); // Inject framework components into starter template if (selectedTemplate?.value === 'starter') { From 75dab3ca3de33da825c2a9695c2ad46cc104b7b1 Mon Sep 17 00:00:00 2001 From: Ben Holmes Date: Fri, 22 Apr 2022 15:10:15 -0400 Subject: [PATCH 4/6] chore: changeset (#3187) --- .changeset/lemon-humans-deliver.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/lemon-humans-deliver.md diff --git a/.changeset/lemon-humans-deliver.md b/.changeset/lemon-humans-deliver.md new file mode 100644 index 000000000000..8244d95f76b4 --- /dev/null +++ b/.changeset/lemon-humans-deliver.md @@ -0,0 +1,5 @@ +--- +'astro': patch +--- + +Fix: remove online editor configs (stackblitz and code sandbox) from create-astro output From 2b702d6abaa296c0eb77d3fd1a8231a186341b1f Mon Sep 17 00:00:00 2001 From: Ben Holmes Date: Fri, 22 Apr 2022 15:17:16 -0400 Subject: [PATCH 5/6] Fix: `astro add` generating config outside project root (#3186) * fix: astro.config generated outside project dir * chore: changeset --- .changeset/warm-days-wash.md | 5 +++++ packages/astro/src/core/add/index.ts | 3 ++- 2 files changed, 7 insertions(+), 1 deletion(-) create mode 100644 .changeset/warm-days-wash.md diff --git a/.changeset/warm-days-wash.md b/.changeset/warm-days-wash.md new file mode 100644 index 000000000000..1786fa814a0f --- /dev/null +++ b/.changeset/warm-days-wash.md @@ -0,0 +1,5 @@ +--- +'astro': patch +--- + +Fix: astro add generating "astro.config.mjs" outside project root diff --git a/packages/astro/src/core/add/index.ts b/packages/astro/src/core/add/index.ts index 5de4cf2c26c3..5dd6b5caaa27 100644 --- a/packages/astro/src/core/add/index.ts +++ b/packages/astro/src/core/add/index.ts @@ -19,6 +19,7 @@ import { parseNpmName } from '../util.js'; import { wrapDefaultExport } from './wrapper.js'; import { ensureImport } from './imports.js'; import { t, parse, visit, generate } from './babel.js'; +import { appendForwardSlash } from '../path.js'; export interface AddOptions { logging: LogOptions; @@ -91,7 +92,7 @@ export default async function add(names: string[], { cwd, flags, logging }: AddO debug('add', `Found config at ${configURL}`); } else { info(logging, 'add', `Unable to locate a config file, generating one for you.`); - configURL = new URL('./astro.config.mjs', root); + configURL = new URL('./astro.config.mjs', appendForwardSlash(root.href)); await fs.writeFile(fileURLToPath(configURL), CONSTS.CONFIG_STUB, { encoding: 'utf-8' }); } From cafd36ef774755b8efbe9e526a0b5ce7a47095f2 Mon Sep 17 00:00:00 2001 From: "Fred K. Schott" Date: Fri, 22 Apr 2022 14:26:04 -0700 Subject: [PATCH 6/6] Create angry-cheetahs-walk.md --- .changeset/angry-cheetahs-walk.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/angry-cheetahs-walk.md diff --git a/.changeset/angry-cheetahs-walk.md b/.changeset/angry-cheetahs-walk.md new file mode 100644 index 000000000000..fea6001a3ed5 --- /dev/null +++ b/.changeset/angry-cheetahs-walk.md @@ -0,0 +1,5 @@ +--- +"@astrojs/vercel": patch +--- + +Update README