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: add load function to handle hook to control css loading #12677

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open
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
13 changes: 11 additions & 2 deletions packages/kit/src/exports/hooks/sequence.js
Original file line number Diff line number Diff line change
Expand Up @@ -106,13 +106,22 @@ export function sequence(...handlers) {
/** @type {import('@sveltejs/kit').ResolveOptions['preload']} */
const preload = parent_options?.preload ?? options?.preload;

/** @type {import('@sveltejs/kit').ResolveOptions['load']} */
const load = parent_options?.load ?? options?.load;

return i < length - 1
? apply_handle(i + 1, event, {
transformPageChunk,
filterSerializedResponseHeaders,
preload
preload,
load
})
: resolve(event, { transformPageChunk, filterSerializedResponseHeaders, preload });
: resolve(event, {
transformPageChunk,
filterSerializedResponseHeaders,
preload,
load
});
}
});
}
Expand Down
7 changes: 7 additions & 0 deletions packages/kit/src/exports/public.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -1153,6 +1153,13 @@ export interface ResolveOptions {
* @param input the type of the file and its path
*/
preload?(input: { type: 'font' | 'css' | 'js' | 'asset'; path: string }): boolean;

/**
* Determines what should be added to the `<head>` tag to load it.
* By default, `js` and `css` files will be preloaded.
* @param input the type of the file and its path
*/
load?(input: { type: 'font' | 'css' | 'js' | 'asset'; path: string }): boolean;
}

export interface RouteDefinition<Config = any> {
Expand Down
14 changes: 14 additions & 0 deletions packages/kit/src/runtime/server/page/render.js
Original file line number Diff line number Diff line change
Expand Up @@ -212,6 +212,16 @@ export async function render_response({
return `${assets}/${path}`;
};

if (inline_styles.size > 0) {
for (const dep of inline_styles.keys()) {
const path = prefixed(dep);

if (!resolve_opts.load({ type: 'css', path })) {
inline_styles.delete(dep);
}
}
}

if (inline_styles.size > 0) {
const content = Array.from(inline_styles.values()).join('\n');

Expand All @@ -226,6 +236,10 @@ export async function render_response({
for (const dep of stylesheets) {
const path = prefixed(dep);

if (!resolve_opts.load({ type: 'css', path })) {
continue;
}

const attributes = ['rel="stylesheet"'];

if (inline_styles.has(dep)) {
Expand Down
9 changes: 7 additions & 2 deletions packages/kit/src/runtime/server/respond.js
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,9 @@ const default_filter = () => false;
/** @type {import('types').RequiredResolveOptions['preload']} */
const default_preload = ({ type }) => type === 'js' || type === 'css';

/** @type {import('types').RequiredResolveOptions['load']} */
const default_load = ({ type }) => type === 'js' || type === 'css';

const page_methods = new Set(['GET', 'HEAD', 'POST']);

const allowed_page_methods = new Set(['GET', 'HEAD', 'OPTIONS']);
Expand Down Expand Up @@ -211,7 +214,8 @@ export async function respond(request, options, manifest, state) {
let resolve_opts = {
transformPageChunk: default_transform,
filterSerializedResponseHeaders: default_filter,
preload: default_preload
preload: default_preload,
load: default_load
};

try {
Expand Down Expand Up @@ -412,7 +416,8 @@ export async function respond(request, options, manifest, state) {
resolve_opts = {
transformPageChunk: opts.transformPageChunk || default_transform,
filterSerializedResponseHeaders: opts.filterSerializedResponseHeaders || default_filter,
preload: opts.preload || default_preload
preload: opts.preload || default_preload,
load: opts.load || default_load
};
}

Expand Down
7 changes: 7 additions & 0 deletions packages/kit/types/index.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -1135,6 +1135,13 @@ declare module '@sveltejs/kit' {
* @param input the type of the file and its path
*/
preload?(input: { type: 'font' | 'css' | 'js' | 'asset'; path: string }): boolean;

/**
* Determines what should be added to the `<head>` tag to load it.
* By default, `js` and `css` files will be preloaded.
* @param input the type of the file and its path
*/
load?(input: { type: 'font' | 'css' | 'js' | 'asset'; path: string }): boolean;
}

export interface RouteDefinition<Config = any> {
Expand Down