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.

Sign up for GitHub

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

Jump to bottom

[fix] enable Vite pre-bundling except for Svelte packages #2137

Merged
merged 2 commits into from
Aug 9, 2021
Merged

[fix] enable Vite pre-bundling except for Svelte packages #2137

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
504f8e9
[fix] enable Vite pre-bundling except for Svelte packages
benmccann Aug 9, 2021
2fc2654
fix tests
benmccann Aug 9, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/cuddly-files-decide.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@sveltejs/kit': patch
---

[fix] enable Vite pre-bundling except for Svelte packages
80 changes: 51 additions & 29 deletions packages/kit/src/core/build/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import fs from 'fs';
import path from 'path';
import { rimraf } from '../filesystem/index.js';
import create_manifest_data from '../../core/create_manifest_data/index.js';
import { copy_assets, get_no_external, posixify, resolve_entry } from '../utils.js';
import { copy_assets, get_svelte_packages, posixify, resolve_entry } from '../utils.js';
import { deep_merge, print_config_conflicts } from '../config/index.js';
import { create_app } from '../../core/create_app/index.js';
import vite from 'vite';
Expand Down Expand Up @@ -33,6 +33,7 @@ export async function build(config, { cwd = process.cwd(), runtime = '@sveltejs/
rimraf(build_dir);

const output_dir = path.resolve(cwd, `${SVELTE_KIT}/output`);
const svelte_packages = get_svelte_packages(cwd);

const options = {
cwd,
Expand All @@ -49,7 +50,8 @@ export async function build(config, { cwd = process.cwd(), runtime = '@sveltejs/
}),
output_dir,
client_entry_file: `${SVELTE_KIT}/build/runtime/internal/start.js`,
service_worker_entry_file: resolve_entry(config.kit.files.serviceWorker)
service_worker_entry_file: resolve_entry(config.kit.files.serviceWorker),
svelte_packages
};

const client_manifest = await build_client(options);
Expand Down Expand Up @@ -132,7 +134,7 @@ async function build_client({
});

/** @type {any} */
const user_config = config.kit.vite();
const vite_config = config.kit.vite();

const default_config = {
server: {
Expand All @@ -143,10 +145,10 @@ async function build_client({
};

// don't warn on overriding defaults
const [modified_user_config] = deep_merge(default_config, user_config);
const [modified_vite_config] = deep_merge(default_config, vite_config);

/** @type {[any, string[]]} */
const [merged_config, conflicts] = deep_merge(modified_user_config, {
const [merged_config, conflicts] = deep_merge(modified_vite_config, {
configFile: false,
root: cwd,
base,
Expand Down Expand Up @@ -203,6 +205,7 @@ async function build_client({
* output_dir: string;
* client_entry_file: string;
* service_worker_entry_file: string | null;
* svelte_packages: string[];
* }} options
* @param {ClientManifest} client_manifest
* @param {string} runtime
Expand All @@ -216,7 +219,8 @@ async function build_server(
build_dir,
output_dir,
client_entry_file,
service_worker_entry_file
service_worker_entry_file,
svelte_packages
},
client_manifest,
runtime
Expand Down Expand Up @@ -419,8 +423,8 @@ async function build_server(
.trim()
);

/** @type {any} */
const user_config = config.kit.vite();
/** @type {import('vite').UserConfig} */
const vite_config = config.kit.vite();

const default_config = {
server: {
Expand All @@ -431,10 +435,10 @@ async function build_server(
};

// don't warn on overriding defaults
const [modified_user_config] = deep_merge(default_config, user_config);
const [modified_vite_config] = deep_merge(default_config, vite_config);

/** @type {[any, string[]]} */
const [merged_config, conflicts] = deep_merge(modified_user_config, {
const [merged_config, conflicts] = deep_merge(modified_vite_config, {
configFile: false,
root: cwd,
base,
Expand All @@ -457,11 +461,13 @@ async function build_server(
preserveEntrySignatures: 'strict'
}
},
resolve: {
alias: {
$app: path.resolve(`${build_dir}/runtime/app`),
$lib: config.kit.files.lib
}
optimizeDeps: {
// exclude Svelte packages because optimizer skips .svelte files leading to half-bundled
// broken packages https://github.com/vitejs/vite/issues/3910
exclude: [
...((vite_config.optimizeDeps && vite_config.optimizeDeps.exclude) || []),
...svelte_packages
]
},
plugins: [
svelte({
Expand All @@ -471,16 +477,17 @@ async function build_server(
}
})
],
// this API is marked as @alpha https://github.com/vitejs/vite/blob/27785f7fcc5b45987b5f0bf308137ddbdd9f79ea/packages/vite/src/node/config.ts#L129
// it's not exposed in the typescript definitions as a result
// so we need to ignore the fact that it's missing
resolve: {
alias: {
$app: path.resolve(`${build_dir}/runtime/app`),
$lib: config.kit.files.lib
}
},
ssr: {
// note to self: this _might_ need to be ['svelte', '@sveltejs/kit', ...get_no_external()]
// but I'm honestly not sure. roll with this for now and see if it's ok
noExternal: get_no_external(cwd, user_config.ssr && user_config.ssr.noExternal)
},
optimizeDeps: {
entries: []
// @ts-expect-error ssr is considered in alpha, so not yet exposed by Vite
noExternal: [...((vite_config.ssr && vite_config.ssr.noExternal) || []), ...svelte_packages]
}
});

Expand All @@ -499,11 +506,21 @@ async function build_server(
* output_dir: string;
* client_entry_file: string;
* service_worker_entry_file: string | null;
* svelte_packages: string[];
* }} options
* @param {ClientManifest} client_manifest
*/
async function build_service_worker(
{ cwd, base, config, manifest, build_dir, output_dir, service_worker_entry_file },
{
cwd,
base,
config,
manifest,
build_dir,
output_dir,
service_worker_entry_file,
svelte_packages
},
client_manifest
) {
// TODO add any assets referenced in template .html file, e.g. favicon?
Expand Down Expand Up @@ -540,7 +557,7 @@ async function build_service_worker(
);

/** @type {any} */
const user_config = config.kit.vite();
const vite_config = config.kit.vite();

const default_config = {
server: {
Expand All @@ -551,10 +568,10 @@ async function build_service_worker(
};

// don't warn on overriding defaults
const [modified_user_config] = deep_merge(default_config, user_config);
const [modified_vite_config] = deep_merge(default_config, vite_config);

/** @type {[any, string[]]} */
const [merged_config, conflicts] = deep_merge(modified_user_config, {
const [merged_config, conflicts] = deep_merge(modified_vite_config, {
configFile: false,
root: cwd,
base,
Expand All @@ -572,13 +589,18 @@ async function build_service_worker(
outDir: `${output_dir}/client`,
emptyOutDir: false
},
optimizeDeps: {
// exclude Svelte packages because optimizer skips .svelte files leading to half-bundled
// broken packages https://github.com/vitejs/vite/issues/3910
exclude: [
...((vite_config.optimizeDeps && vite_config.optimizeDeps.exclude) || []),
...svelte_packages
]
},
resolve: {
alias: {
'$service-worker': path.resolve(`${build_dir}/runtime/service-worker`)
}
},
optimizeDeps: {
entries: []
}
});

Expand Down
19 changes: 13 additions & 6 deletions packages/kit/src/core/dev/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import { create_app } from '../../core/create_app/index.js';
import { rimraf } from '../filesystem/index.js';
import { respond } from '../../runtime/server/index.js';
import { getRawBody } from '../node/index.js';
import { copy_assets, get_no_external, resolve_entry } from '../utils.js';
import { copy_assets, get_svelte_packages, resolve_entry } from '../utils.js';
import { deep_merge, print_config_conflicts } from '../config/index.js';
import { svelte } from '@sveltejs/vite-plugin-svelte';
import { get_server } from '../server/index.js';
Expand Down Expand Up @@ -112,6 +112,8 @@ class Watcher extends EventEmitter {
// don't warn on overriding defaults
const [modified_vite_config] = deep_merge(default_config, vite_config);

const svelte_packages = get_svelte_packages(this.cwd);

/** @type {[any, string[]]} */
const [merged_config, conflicts] = deep_merge(modified_vite_config, {
configFile: false,
Expand Down Expand Up @@ -140,6 +142,14 @@ class Watcher extends EventEmitter {
input: path.resolve(`${this.dir}/runtime/internal/start.js`)
}
},
optimizeDeps: {
// exclude Svelte packages because optimizer skips .svelte files leading to half-bundled
// broken packages https://github.com/vitejs/vite/issues/3910
exclude: [
...((vite_config.optimizeDeps && vite_config.optimizeDeps.exclude) || []),
...svelte_packages
]
},
plugins: [
svelte({
extensions: this.config.extensions,
Expand All @@ -156,12 +166,9 @@ class Watcher extends EventEmitter {
...(this.https ? { server: this.server, port: this.port } : {})
}
},
optimizeDeps: {
entries: []
},
ssr: {
// @ts-expect-error ssr is considered in beta, so not exposed by Vite
noExternal: get_no_external(this.cwd, vite_config.ssr && vite_config.ssr.noExternal)
// @ts-expect-error ssr is considered in alpha, so not yet exposed by Vite
noExternal: [...((vite_config.ssr && vite_config.ssr.noExternal) || []), ...svelte_packages]
}
});

Expand Down
10 changes: 1 addition & 9 deletions packages/kit/src/core/utils.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,7 +82,7 @@ export function posixify(str) {
* @param {string} cwd
* @returns {string[]}
*/
function find_svelte_packages(cwd) {
export function get_svelte_packages(cwd) {
const pkg_file = path.join(cwd, 'package.json');
if (!fs.existsSync(pkg_file)) return [];

Expand All @@ -98,11 +98,3 @@ function find_svelte_packages(cwd) {
return !!dep_pkg.svelte;
});
}

/**
* @param {string} cwd
* @param {string[]} [user_specified_deps]
*/
export function get_no_external(cwd, user_specified_deps = []) {
return [...user_specified_deps, ...find_svelte_packages(cwd)];
}
6 changes: 3 additions & 3 deletions packages/kit/test/apps/basics/src/routes/load/change-detection/__layout.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,18 @@
<script context="module">
let loads = 0;
let count = 0;

/** @type {import('@sveltejs/kit').Load} */
export async function load({ fetch }) {
const res = await fetch('/load/change-detection/data.json');
const { type } = await res.json();

loads += 1;
count += 1;

return {
maxage: 5,
props: {
type,
loads
loads: count
}
};
}
Expand Down
6 changes: 3 additions & 3 deletions packages/kit/test/apps/basics/src/routes/load/change-detection/one/[x].svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
<script context="module">
let loads = 0;
let count = 0;

/** @type {import('@sveltejs/kit').Load} */
export async function load({ page }) {
loads += 1;
count += 1;

return {
maxage: 5,
props: {
x: page.params.x,
loads
loads: count
}
};
}
Expand Down
6 changes: 3 additions & 3 deletions packages/kit/test/apps/basics/src/routes/load/change-detection/two/[y].svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
<script context="module">
let loads = 0;
let count = 0;

/** @type {import('@sveltejs/kit').Load} */
export async function load({ page }) {
loads += 1;
count += 1;

return {
maxage: 5,
props: {
y: page.params.y,
loads
loads: count
}
};
}
Expand Down