Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(adapters): expose esbuild configuration #1914

Merged
merged 1 commit into from
Jul 18, 2021
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 8 additions & 0 deletions .changeset/dull-numbers-hunt.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
---
'@sveltejs/adapter-cloudflare-workers': patch
'@sveltejs/adapter-netlify': patch
'@sveltejs/adapter-node': patch
'@sveltejs/adapter-vercel': patch
---

feat(adapters): expose esbuild configuration
33 changes: 32 additions & 1 deletion packages/adapter-cloudflare-workers/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ SvelteKit adapter that creates a Cloudflare Workers site using a function for dy

This is very experimental; the adapter API isn't at all fleshed out, and things will definitely change.

## Configuration
## Basic Configuration

This adapter expects to find a [wrangler.toml](https://developers.cloudflare.com/workers/platform/sites/configuration) file in the project root. It will determine where to write static assets and the worker based on the `site.bucket` and `site.entry-point` settings.

Expand All @@ -26,6 +26,37 @@ It's recommended that you add the `build` and `workers-site` folders (or whichev

More info on configuring a cloudflare worker site can be found [here](https://developers.cloudflare.com/workers/platform/sites/start-from-existing)

## Advanced Configuration

### esbuild

As an escape hatch, you may optionally specify a function which will receive the final esbuild options generated by this adapter and returns a modified esbuild configuration. The result of this function will be passed as-is to esbuild. The function can be async.

For example, you may wish to add a plugin:

```js
adapterCfw({
esbuild(defaultOptions) {
return {
...defaultOptions,
plugins: []
};
}
});
```

The default options for this version are as follows:

```js
{
entryPoints: ['.svelte-kit/cloudflare-workers/entry.js'],
outfile: `${entrypoint}/index.js`,
bundle: true,
target: 'es2020',
platform: 'browser'
}
```

## Changelog

[The Changelog for this package is available on GitHub](https://github.com/sveltejs/kit/blob/master/packages/adapter-cloudflare-workers/CHANGELOG.md).
17 changes: 14 additions & 3 deletions packages/adapter-cloudflare-workers/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,16 @@ import esbuild from 'esbuild';
import toml from '@iarna/toml';
import { fileURLToPath } from 'url';

export default function () {
/**
* @typedef {import('esbuild').BuildOptions} BuildOptions
*/

/**
* @param {{
* esbuild?: (defaultOptions: BuildOptions) => Promise<BuildOptions> | BuildOptions;
* }} options
**/
export default function (options = { esbuild: (opts) => opts }) {
/** @type {import('@sveltejs/kit').Adapter} */
const adapter = {
name: '@sveltejs/adapter-cloudflare-workers',
Expand All @@ -29,14 +38,16 @@ export default function () {
utils.log.minor('Generating worker...');
utils.copy(`${files}/entry.js`, '.svelte-kit/cloudflare-workers/entry.js');

await esbuild.build({
const buildOptions = await options.esbuild({
entryPoints: ['.svelte-kit/cloudflare-workers/entry.js'],
outfile: `${entrypoint}/index.js`,
bundle: true,
target: 'es2020',
platform: 'node' // TODO would be great if we could generate ESM and use type = "javascript"
platform: 'browser' // TODO would be great if we could generate ESM and use type = "javascript"
});

await esbuild.build(buildOptions);

fs.writeFileSync(`${entrypoint}/package.json`, JSON.stringify({ main: 'index.js' }));

utils.log.info('Prerendering static pages...');
Expand Down
31 changes: 31 additions & 0 deletions packages/adapter-netlify/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,37 @@ During compilation a required "catch all" redirect rule is automatically appende
2. Netlify's build bot parses your HTML files at deploy time, which means your form must be [prerendered](https://kit.svelte.dev/docs#ssr-and-javascript-prerender) as HTML. You can either add `export const prerender = true` to your `contact.svelte` to prerender just that page or set the `kit.prerender.force: true` option to prerender all pages.
3. If your Netlify form has a [custom success message](https://docs.netlify.com/forms/setup/#success-messages) like `<form netlify ... action="/success">` then ensure the corresponding `/routes/success.svelte` exists and is prerendered.

## Advanced Configuration

### esbuild

As an escape hatch, you may optionally specify a function which will receive the final esbuild options generated by this adapter and returns a modified esbuild configuration. The result of this function will be passed as-is to esbuild. The function can be async.

For example, you may wish to add a plugin:

```js
adapterNetlify({
esbuild(defaultOptions) {
return {
...defaultOptions,
plugins: []
};
}
});
```

The default options for this version are as follows:

```js
{
entryPoints: ['.svelte-kit/netlify/entry.js'],
outfile: `pathToFunctionsFolder/render/index.js`,
bundle: true,
inject: ['pathTo/shims.js'],
platform: 'node'
}
```

## Changelog

[The Changelog for this package is available on GitHub](https://github.com/sveltejs/kit/blob/master/packages/adapter-netlify/CHANGELOG.md).
15 changes: 13 additions & 2 deletions packages/adapter-netlify/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,16 @@ import { fileURLToPath } from 'url';
import esbuild from 'esbuild';
import toml from '@iarna/toml';

export default function () {
/**
* @typedef {import('esbuild').BuildOptions} BuildOptions
*/

/**
* @param {{
* esbuild?: (defaultOptions: BuildOptions) => Promise<BuildOptions> | BuildOptions;
* }} options
**/
export default function (options = { esbuild: (opts) => opts }) {
/** @type {import('@sveltejs/kit').Adapter} */
const adapter = {
name: '@sveltejs/adapter-netlify',
Expand All @@ -20,14 +29,16 @@ export default function () {
utils.log.minor('Generating serverless function...');
utils.copy(join(files, 'entry.js'), '.svelte-kit/netlify/entry.js');

await esbuild.build({
const buildOptions = await options.esbuild({
entryPoints: ['.svelte-kit/netlify/entry.js'],
outfile: join(functions, 'render/index.js'),
bundle: true,
inject: [join(files, 'shims.js')],
platform: 'node'
});

await esbuild.build(buildOptions);

writeFileSync(join(functions, 'package.json'), JSON.stringify({ type: 'commonjs' }));

utils.log.info('Prerendering static pages...');
Expand Down
37 changes: 37 additions & 0 deletions packages/adapter-node/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,43 @@ HOST=127.0.0.1 PORT=4000 node build

You can specify different environment variables if necessary using the `env` option.

## Advanced Configuration

### esbuild

As an escape hatch, you may optionally specify a function which will receive the final esbuild options generated by this adapter and returns a modified esbuild configuration. The result of this function will be passed as-is to esbuild. The function can be async.

For example, you may wish to add a plugin:

```js
adapterNode({
esbuild(defaultOptions) {
return {
...defaultOptions,
plugins: []
};
}
});
```

The default options for this version are as follows:

```js
{
entryPoints: ['.svelte-kit/node/index.js'],
outfile: 'pathTo/index.js',
bundle: true,
external: allProductionDependencies, // from package.json
format: 'esm',
platform: 'node',
target: 'node12',
inject: ['pathTo/shims.js'],
define: {
esbuild_app_dir: `"${config.kit.appDir}"`
}
}
```

## Changelog

[The Changelog for this package is available on GitHub](https://github.com/sveltejs/kit/blob/master/packages/adapter-node/CHANGELOG.md).
Expand Down
21 changes: 15 additions & 6 deletions packages/adapter-node/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,10 @@ import zlib from 'zlib';

const pipe = promisify(pipeline);

/**
* @typedef {import('esbuild').BuildOptions} BuildOptions
*/

/**
* @param {{
* out?: string;
Expand All @@ -24,13 +28,17 @@ const pipe = promisify(pipeline);
* host?: string;
* port?: string;
* };
* esbuild?: (defaultOptions: BuildOptions) => Promise<BuildOptions> | BuildOptions;
* }} options
*/
export default function ({
out = 'build',
precompress,
env: { host: host_env = 'HOST', port: port_env = 'PORT' } = {}
} = {}) {
export default function (
{
out = 'build',
precompress,
env: { host: host_env = 'HOST', port: port_env = 'PORT' } = {},
esbuild: esbuildConfig
} = { esbuild: (opts) => opts }
) {
/** @type {import('@sveltejs/kit').Adapter} */
const adapter = {
name: '@sveltejs/adapter-node',
Expand All @@ -55,7 +63,7 @@ export default function ({
host_env
)}] || '0.0.0.0';\nexport const port = process.env[${JSON.stringify(port_env)}] || 3000;`
);
await esbuild.build({
const buildOptions = await esbuildConfig({
entryPoints: ['.svelte-kit/node/index.js'],
outfile: join(out, 'index.js'),
bundle: true,
Expand All @@ -68,6 +76,7 @@ export default function ({
esbuild_app_dir: '"' + config.kit.appDir + '"'
}
});
await esbuild.build(buildOptions);

utils.log.minor('Prerendering static pages');
await utils.prerender({
Expand Down
31 changes: 31 additions & 0 deletions packages/adapter-vercel/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,37 @@ export default {
};
```

## Advanced Configuration

### esbuild

As an escape hatch, you may optionally specify a function which will receive the final esbuild options generated by this adapter and returns a modified esbuild configuration. The result of this function will be passed as-is to esbuild. The function can be async.

For example, you may wish to add a plugin:

```js
adapterVercel({
esbuild(defaultOptions) {
return {
...defaultOptions,
plugins: []
};
}
});
```

The default options for this version are as follows:

```js
{
entryPoints: ['.svelte-kit/vercel/entry.js'],
outfile: `pathToLambdaFolder/index.js`,
bundle: true,
inject: ['pathTo/shims.js'],
platform: 'node'
}
```

## Changelog

[The Changelog for this package is available on GitHub](https://github.com/sveltejs/kit/blob/master/packages/adapter-vercel/CHANGELOG.md).
15 changes: 13 additions & 2 deletions packages/adapter-vercel/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,16 @@ import { join } from 'path';
import { fileURLToPath } from 'url';
import esbuild from 'esbuild';

export default function () {
/**
* @typedef {import('esbuild').BuildOptions} BuildOptions
*/

/**
* @param {{
* esbuild?: (defaultOptions: BuildOptions) => Promise<BuildOptions> | BuildOptions;
* }} options
**/
export default function (options = { esbuild: (opts) => opts }) {
/** @type {import('@sveltejs/kit').Adapter} */
const adapter = {
name: '@sveltejs/adapter-vercel',
Expand All @@ -27,14 +36,16 @@ export default function () {
utils.log.minor('Generating serverless function...');
utils.copy(join(files, 'entry.js'), '.svelte-kit/vercel/entry.js');

await esbuild.build({
const buildOptions = await options.esbuild({
entryPoints: ['.svelte-kit/vercel/entry.js'],
outfile: join(dirs.lambda, 'index.js'),
bundle: true,
inject: [join(files, 'shims.js')],
platform: 'node'
});

await esbuild.build(buildOptions);

writeFileSync(join(dirs.lambda, 'package.json'), JSON.stringify({ type: 'commonjs' }));

utils.log.minor('Prerendering static pages...');
Expand Down