Skip to content

Commit

Permalink
feat(adapters): expose esbuild configuration
Browse files Browse the repository at this point in the history
  • Loading branch information
GrygrFlzr committed Jul 15, 2021
1 parent 53e9285 commit 1eac54c
Show file tree
Hide file tree
Showing 9 changed files with 194 additions and 14 deletions.
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

0 comments on commit 1eac54c

Please sign in to comment.