svelte - npm Package Compare versions

Comparing version 5.0.0-next.179 to 5.0.0-next.180

package.json

@@ -5,3 +5,3 @@ {
   "license": "MIT",
-  "version": "5.0.0-next.179",
+  "version": "5.0.0-next.180",
   "type": "module",
@@ -8,0 +8,0 @@ "types": "./types/index.d.ts",

src/compiler/phases/2-analyze/css/css-prune.js

@@ -74,3 +74,3 @@ /** @import { Visitors } from 'zimmerframe' */
 
-		if (node.metadata.rule?.metadata.parent_rule) {
+		if (node.metadata.rule?.metadata.parent_rule && selectors.length > 0) {
 			const has_explicit_nesting_selector = selectors.some((selector) =>
@@ -77,0 +77,0 @@ selector.selectors.some((s) => s.type === 'NestingSelector')

src/compiler/phases/2-analyze/index.js

@@ -386,3 +386,3 @@ import is_reference from 'is-reference';
 				// because $set method needs accessors
-				!!options.legacy?.componentApi,
+				options.compatibility?.componentApi === 4,
 		reactive_statements: new Map(),
@@ -389,0 +389,0 @@ binding_groups: new Map(),

src/compiler/phases/3-transform/client/transform-client.js

@@ -286,3 +286,3 @@ /** @import * as ESTree from 'estree' */
 
-	if (options.legacy.componentApi) {
+	if (options.compatibility.componentApi === 4) {
 		component_returned_object.push(
@@ -336,19 +336,13 @@ b.init('$set', b.id('$.update_legacy_props')),
 
-	const append_styles =
-		analysis.inject_styles && analysis.css.ast
-			? () =>
-					component_block.body.push(
-						b.stmt(
-							b.call(
-								'$.append_styles',
-								b.id('$$anchor'),
-								b.literal(analysis.css.hash),
-								b.literal(render_stylesheet(source, analysis, options).code)
-							)
-						)
-					)
-			: () => {};
+	if (analysis.css.ast !== null && analysis.inject_styles) {
+		const hash = b.literal(analysis.css.hash);
+		const code = b.literal(render_stylesheet(analysis.source, analysis, options).code);
 
-	append_styles();
+		state.hoisted.push(b.const('$$css', b.object([b.init('hash', hash), b.init('code', code)])));
 
+		component_block.body.unshift(
+			b.stmt(b.call('$.append_styles', b.id('$$anchor'), b.id('$$css')))
+		);
+	}
+
 	const should_inject_context =
@@ -428,6 +422,22 @@ analysis.needs_context ||
 	if (options.hmr) {
-		const accept_fn = b.arrow(
-			[b.id('module')],
-			b.block([b.stmt(b.call('$.set', b.id('s'), b.member(b.id('module'), b.id('default'))))])
-		);
+		const accept_fn_body = [
+			b.stmt(b.call('$.set', b.id('s'), b.member(b.id('module'), b.id('default'))))
+		];
+
+		if (analysis.css.hash) {
+			// remove existing `<style>` element, in case CSS changed
+			accept_fn_body.unshift(
+				b.stmt(
+					b.call(
+						b.member(
+							b.call('document.querySelector', b.literal('#' + analysis.css.hash)),
+							b.id('remove'),
+							false,
+							true
+						)
+					)
+				)
+			);
+		}
+
 		body.push(
@@ -440,2 +450,3 @@ component,
 					b.const(b.id('filename'), b.member(b.id(analysis.name), b.id('filename'))),
+					b.const(b.id('accept'), b.arrow([b.id('module')], b.block(accept_fn_body))),
 					b.stmt(b.assignment('=', b.id(analysis.name), b.call('$.hmr', b.id('s')))),
@@ -449,6 +460,10 @@ b.stmt(
 							b.stmt(
-								b.call('import.meta.hot.acceptExports', b.array([b.literal('default')]), accept_fn)
+								b.call(
+									'import.meta.hot.acceptExports',
+									b.array([b.literal('default')]),
+									b.id('accept')
+								)
 							)
 						]),
-						b.block([b.stmt(b.call('import.meta.hot.accept', accept_fn))])
+						b.block([b.stmt(b.call('import.meta.hot.accept', b.id('accept')))])
 					)
@@ -482,3 +497,3 @@ ])
 
-	if (options.legacy.componentApi) {
+	if (options.compatibility.componentApi === 4) {
 		body.unshift(b.imports([['createClassComponent', '$$_createClassComponent']], 'svelte/legacy'));
@@ -485,0 +500,0 @@ component_block.body.unshift(

src/compiler/types/index.d.ts

@@ -102,4 +102,4 @@ import type {
 	/**
-	 * - `'injected'`: styles will be included in the JavaScript class and injected at runtime for the components actually rendered.
-	 * - `'external'`: the CSS will be returned in the `css` field of the compilation result. Most Svelte bundler plugins will set this to `'external'` and use the CSS that is statically generated for better performance, as it will result in smaller JavaScript bundles and the output can be served as cacheable `.css` files.
+	 * - `'injected'`: styles will be included in the `head` when using `render(...)`, and injected into the document (if not already present) when the component mounts. For components compiled as custom elements, styles are injected to the shadow root.
+	 * - `'external'`: the CSS will only be returned in the `css` field of the compilation result. Most Svelte bundler plugins will set this to `'external'` and use the CSS that is statically generated for better performance, as it will result in smaller JavaScript bundles and the output can be served as cacheable `.css` files.
 	 * This is always `'injected'` when compiling with `customElement` mode.
@@ -145,3 +145,3 @@ */
 	 */
-	legacy?: {
+	compatibility?: {
 		/**
@@ -151,5 +151,5 @@ * Applies a transformation so that the default export of Svelte files can still be instantiated the same way as in Svelte 4 —
 		 * or as an object with a `.render(...)` method when compiling for the server
-		 * @default false
+		 * @default 5
 		 */
-		componentApi?: boolean;
+		componentApi?: 4 | 5;
 	};
@@ -232,3 +232,3 @@ /**
 		| 'name'
-		| 'legacy'
+		| 'compatibility'
 		| 'outputFilename'
@@ -243,3 +243,3 @@ | 'cssOutputFilename'
 		sourcemap: CompileOptions['sourcemap'];
-		legacy: Required<Required<CompileOptions>['legacy']>;
+		compatibility: Required<Required<CompileOptions>['compatibility']>;
 		runes: CompileOptions['runes'];
@@ -246,0 +246,0 @@ customElementOptions: SvelteOptions['customElement'];

src/compiler/validate-options.js

@@ -81,4 +81,8 @@ /** @import { ModuleCompileOptions, ValidatedModuleCompileOptions, CompileOptions, ValidatedCompileOptions } from '#compiler' */
 
-			legacy: object({
-				componentApi: boolean(false)
+			legacy: removed(
+				'The legacy option has been removed. If you are using this because of legacy.componentApi, use compatibility.componentApi instead'
+			),
+
+			compatibility: object({
+				componentApi: list([4, 5], 5)
 			}),
@@ -85,0 +89,0 @@

src/internal/client/dom/elements/bindings/this.js

@@ -59,2 +59,4 @@ import { STATE_SYMBOL } from '../../../constants.js';
 	});
+
+	return element_or_component;
 }

src/internal/client/dom/legacy/misc.js

@@ -44,3 +44,3 @@ import { set, source } from '../../reactivity/sources.js';
 /**
- * Used to simulate `$on` on a component instance when `legacy.componentApi` is `true`
+ * Used to simulate `$on` on a component instance when `compatibility.componentApi === 4`
  * @param {Record<string, any>} $$props
@@ -57,3 +57,3 @@ * @param {string} event_name
 /**
- * Used to simulate `$set` on a component instance when `legacy.componentApi` is `true`.
+ * Used to simulate `$set` on a component instance when `compatibility.componentApi === 4`.
  * Needs component accessors so that it can call the setter of the prop. Therefore doesn't
@@ -60,0 +60,0 @@ * work for updating props in `$$props` or `$$restProps`.

src/internal/client/errors.js

@@ -79,3 +79,3 @@ /* This file is generated by scripts/process-messages/index.js. Do not edit! */
 /**
- * Attempted to instantiate %component% with `new %name%`, which is no longer valid in Svelte 5. If this component is not under your control, set the `legacy.componentApi` compiler option to keep it working. See https://svelte-5-preview.vercel.app/docs/breaking-changes#components-are-no-longer-classes for more information
+ * Attempted to instantiate %component% with `new %name%`, which is no longer valid in Svelte 5. If this component is not under your control, set the `compatibility.componentApi` compiler option to `4` to keep it working. See https://svelte-5-preview.vercel.app/docs/breaking-changes#components-are-no-longer-classes for more information
  * @param {string} component
@@ -87,3 +87,3 @@ * @param {string} name
 	if (DEV) {
-		const error = new Error(`component_api_invalid_new\nAttempted to instantiate ${component} with \`new ${name}\`, which is no longer valid in Svelte 5. If this component is not under your control, set the \`legacy.componentApi\` compiler option to keep it working. See https://svelte-5-preview.vercel.app/docs/breaking-changes#components-are-no-longer-classes for more information`);
+		const error = new Error(`component_api_invalid_new\nAttempted to instantiate ${component} with \`new ${name}\`, which is no longer valid in Svelte 5. If this component is not under your control, set the \`compatibility.componentApi\` compiler option to \`4\` to keep it working. See https://svelte-5-preview.vercel.app/docs/breaking-changes#components-are-no-longer-classes for more information`);
 
@@ -90,0 +90,0 @@ error.name = 'Svelte error';

src/internal/client/index.js

@@ -23,2 +23,3 @@ export { add_locations } from './dev/elements.js';
 export { head } from './dom/blocks/svelte-head.js';
+export { append_styles } from './dom/css.js';
 export { action } from './dom/elements/actions.js';
@@ -124,3 +125,3 @@ export {
 } from './reactivity/store.js';
-export { append_styles, set_text } from './render.js';
+export { set_text } from './render.js';
 export {
@@ -127,0 +128,0 @@ get,

src/internal/client/reactivity/effects.js

@@ -112,2 +112,5 @@ import {
 			effect.f |= EFFECT_RAN;
+		} catch (e) {
+			destroy_effect(effect);
+			throw e;
 		} finally {
@@ -114,0 +117,0 @@ set_is_flushing_effect(previously_flushing_effect);

src/internal/client/render.js

@@ -25,2 +25,3 @@ import { DEV } from 'esm-env';
 import { assign_nodes } from './dom/template.js';
+import { queue_micro_task } from './dom/task.js';
 
@@ -298,33 +299,1 @@ /** @type {Set<string>} */
 }
-
-/**
- * @param {Node} target
- * @param {string} style_sheet_id
- * @param {string} styles
- */
-export async function append_styles(target, style_sheet_id, styles) {
-	// Wait a tick so that the template is added to the dom, else getRootNode() will yield wrong results
-	// If it turns out that this results in noticeable flickering, we need to do something like doing the
-	// append outside and adding code in mount that appends all stylesheets (similar to how we do it with event delegation)
-	await Promise.resolve();
-	const append_styles_to = get_root_for_style(target);
-	if (!append_styles_to.getElementById(style_sheet_id)) {
-		const style = document.createElement('style');
-		style.id = style_sheet_id;
-		style.textContent = styles;
-		const target = /** @type {Document} */ (append_styles_to).head || append_styles_to;
-		target.appendChild(style);
-	}
-}
-
-/**
- * @param {Node} node
- */
-function get_root_for_style(node) {
-	if (!node) return document;
-	const root = node.getRootNode ? node.getRootNode() : node.ownerDocument;
-	if (root && /** @type {ShadowRoot} */ (root).host) {
-		return /** @type {ShadowRoot} */ (root);
-	}
-	return /** @type {Document} */ (node.ownerDocument);
-}

src/internal/client/validate.js

@@ -15,4 +15,5 @@ import { untrack } from './runtime.js';
 /**
- * @param {() => any} component_fn
- * @returns {any}
+ * @template Component
+ * @param {() => Component} component_fn
+ * @returns {Component}
  */
@@ -19,0 +20,0 @@ export function validate_dynamic_component(component_fn) {

src/internal/server/index.js

@@ -0,1 +1,3 @@
+/** @import { Component, Payload, RenderOutput } from '#server' */
+/** @import { Store } from '#shared' */
 import { is_promise, noop } from '../shared/utils.js';
@@ -40,15 +42,14 @@ import { subscribe_to_store } from '../../store/utils.js';
 
-/** @returns {import('#server').Payload} */
-function create_payload() {
-	return { out: '', head: { title: '', out: '', anchor: 0 }, anchor: 0 };
-}
-
 /**
- * @param {import('#server').Payload} to_copy
- * @returns {import('#server').Payload}
+ * @param {Payload} to_copy
+ * @returns {Payload}
  */
-export function copy_payload(to_copy) {
+export function copy_payload({ out, css, head }) {
 	return {
-		...to_copy,
-		head: { ...to_copy.head }
+		out,
+		css: new Set(css),
+		head: {
+			title: head.title,
+			out: head.out
+		}
 	};
@@ -59,4 +60,4 @@ }
  * Assigns second payload to first
- * @param {import('#server').Payload} p1
- * @param {import('#server').Payload} p2
+ * @param {Payload} p1
+ * @param {Payload} p2
  * @returns {void}
@@ -67,7 +68,6 @@ */
 	p1.head = p2.head;
-	p1.anchor = p2.anchor;
 }
 
 /**
- * @param {import('#server').Payload} payload
+ * @param {Payload} payload
  * @param {string} tag
@@ -110,6 +110,7 @@ * @param {() => void} attributes_fn
  * @param {{ props?: Omit<Props, '$$slots' | '$$events'>; context?: Map<any, any> }} [options]
- * @returns {import('#server').RenderOutput}
+ * @returns {RenderOutput}
  */
 export function render(component, options = {}) {
-	const payload = create_payload();
+	/** @type {Payload} */
+	const payload = { out: '', css: new Set(), head: { title: '', out: '' } };
 
@@ -122,3 +123,3 @@ const prev_on_destroy = on_destroy;
 		push();
-		/** @type {import('#server').Component} */ (current_component).c = options.context;
+		/** @type {Component} */ (current_component).c = options.context;
 	}
@@ -137,4 +138,10 @@
 
+	let head = payload.head.out + payload.head.title;
+
+	for (const { hash, code } of payload.css) {
+		head += `<style id="${hash}">${code}</style>`;
+	}
+
 	return {
-		head: payload.head.out || payload.head.title ? payload.head.out + payload.head.title : '',
+		head,
 		html: payload.out,
@@ -146,4 +153,4 @@ body: payload.out
 /**
- * @param {import('#server').Payload} payload
- * @param {(head_payload: import('#server').Payload['head']) => void} fn
+ * @param {Payload} payload
+ * @param {(head_payload: Payload['head']) => void} fn
  * @returns {void}
@@ -172,3 +179,3 @@ */
 /**
- * @param {import('#server').Payload} payload
+ * @param {Payload} payload
  * @param {boolean} is_html
@@ -320,3 +327,3 @@ * @param {Record<string, string>} props
  * @param {string} store_name
- * @param {import('#shared').Store<V> | null | undefined} store
+ * @param {Store<V> | null | undefined} store
  * @returns {V}
@@ -348,3 +355,3 @@ */
  * @template V
- * @param {import('#shared').Store<V>} store
+ * @param {Store<V>} store
  * @param {V} value
@@ -363,3 +370,3 @@ * @returns {V}
  * @param {string} store_name
- * @param {import('#shared').Store<V>} store
+ * @param {Store<V>} store
  * @param {any} expression
@@ -375,3 +382,3 @@ */
  * @param {string} store_name
- * @param {import('#shared').Store<number>} store
+ * @param {Store<number>} store
  * @param {1 | -1} [d]
@@ -389,3 +396,3 @@ * @returns {number}
  * @param {string} store_name
- * @param {import('#shared').Store<number>} store
+ * @param {Store<number>} store
  * @param {1 | -1} [d]
@@ -428,4 +435,4 @@ * @returns {number}
 /**
- * @param {import('#server').Payload} payload
- * @param {void | ((payload: import('#server').Payload, props: Record<string, unknown>) => void)} slot_fn
+ * @param {Payload} payload
+ * @param {void | ((payload: Payload, props: Record<string, unknown>) => void)} slot_fn
  * @param {Record<string, unknown>} slot_props
@@ -432,0 +439,0 @@ * @param {null | (() => void)} fallback_fn

src/internal/server/types.d.ts

@@ -16,7 +16,6 @@ export interface Component {
 	out: string;
-	anchor: number;
+	css: Set<{ hash: string; code: string }>;
 	head: {
 		title: string;
 		out: string;
-		anchor: number;
 	};
@@ -23,0 +22,0 @@ }

src/version.js

@@ -9,3 +9,3 @@ // generated during release, do not modify
  */
-export const VERSION = '5.0.0-next.179';
+export const VERSION = '5.0.0-next.180';
 export const PUBLIC_VERSION = '5';

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

2128366

increased by0.09%

Number of package files

212

increased by0.47%

Lines of code

46715

increased by0.07%

No dependency changes