Skip to content

Commit

Permalink
Merge branch 'main' into fix/vercel-trailing-non-html
Browse files Browse the repository at this point in the history
  • Loading branch information
JuanM04 committed Apr 22, 2022
2 parents ec420a7 + cafd36e commit 1494d38
Show file tree
Hide file tree
Showing 12 changed files with 119 additions and 24 deletions.
5 changes: 5 additions & 0 deletions .changeset/angry-cheetahs-walk.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@astrojs/vercel": patch
---

Update README
5 changes: 5 additions & 0 deletions .changeset/lemon-humans-deliver.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'astro': patch
---

Fix: remove online editor configs (stackblitz and code sandbox) from create-astro output
5 changes: 5 additions & 0 deletions .changeset/strong-dogs-boil.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@astrojs/svelte': patch
---

`@astrojs/svelte` integration supports custom svelte compiler options
5 changes: 5 additions & 0 deletions .changeset/warm-days-wash.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'astro': patch
---

Fix: astro add generating "astro.config.mjs" outside project root
3 changes: 2 additions & 1 deletion packages/astro/src/core/add/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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' });
}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,5 +3,7 @@ import svelte from '@astrojs/svelte';

// https://astro.build/config
export default defineConfig({
integrations: [svelte()],
integrations: [svelte({
extensions: ['.svelte', '.sve']
})],
});
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
<script lang="ts">
export let message: string;
</script>

<div id="svelte-custom-ext">{ message }</div>
Original file line number Diff line number Diff line change
@@ -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>
Expand All @@ -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 changes: 7 additions & 0 deletions packages/astro/test/svelte-component.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
13 changes: 9 additions & 4 deletions packages/create-astro/src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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() {
Expand Down Expand Up @@ -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) {
Expand Down Expand Up @@ -232,8 +237,8 @@ export async function main() {
break;
}
}
})
);
}),
]);

// Inject framework components into starter template
if (selectedTemplate?.value === 'starter') {
Expand Down
28 changes: 28 additions & 0 deletions packages/integrations/svelte/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.
58 changes: 40 additions & 18 deletions packages/integrations/svelte/src/index.ts
Original file line number Diff line number Diff line change
@@ -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 {
Expand All @@ -10,38 +11,59 @@ 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,
}),
],
}),
],
plugins: [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) });
},
},
};
Expand Down

0 comments on commit 1494d38

Please sign in to comment.