svelte - npm Package Compare versions

Comparing version 5.0.0-next.263 to 5.0.0-next.264

package.json

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

src/compiler/phases/1-parse/state/element.js

@@ -154,3 +154,4 @@ /** @import { Expression } from 'estree' */
 						scoped: false,
-						has_spread: false
+						has_spread: false,
+						path: []
 					},
@@ -157,0 +158,0 @@ parent: null

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

@@ -12,3 +12,3 @@ /** @import { Expression, Node, Program } from 'estree' */
 import check_graph_for_cycles from './utils/check_graph_for_cycles.js';
-import { create_attribute } from '../nodes.js';
+import { create_attribute, is_custom_element_node } from '../nodes.js';
 import { analyze_css } from './css/css-analyze.js';
@@ -71,2 +71,3 @@ import { prune } from './css/css-prune.js';
 import is_reference from 'is-reference';
+import { mark_subtree_dynamic } from './visitors/shared/fragment.js';
 
@@ -526,3 +527,3 @@ /**
 		for (const attribute of root.options.attributes) {
-			if (attribute.name === 'accessors') {
+			if (attribute.name === 'accessors' && analysis.runes) {
 				w.options_deprecated_accessors(attribute);
@@ -535,3 +536,3 @@ }
 
-			if (attribute.name === 'immutable') {
+			if (attribute.name === 'immutable' && analysis.runes) {
 				w.options_deprecated_immutable(attribute);
@@ -750,2 +751,5 @@ }
 					);
+					if (is_custom_element_node(element) && element.attributes.length === 1) {
+						mark_subtree_dynamic(element.metadata.path);
+					}
 				}
@@ -752,0 +756,0 @@ }

src/compiler/phases/2-analyze/visitors/RegularElement.js

@@ -25,2 +25,4 @@ /** @import { AST } from '#compiler' */
 
+	node.metadata.path = [...context.path];
+
 	context.state.analysis.elements.push(node);
@@ -27,0 +29,0 @@

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

@@ -215,3 +215,5 @@ /** @import * as ESTree from 'estree' */
 		if (binding.kind === 'legacy_reactive') {
-			legacy_reactive_declarations.push(b.const(name, b.call('$.mutable_state')));
+			legacy_reactive_declarations.push(
+				b.const(name, b.call('$.mutable_state', undefined, analysis.immutable ? b.true : undefined))
+			);
 		}
@@ -372,3 +374,5 @@ if (binding.kind === 'store_sub') {
 		.../** @type {ESTree.Statement[]} */ (instance.body),
-		analysis.runes || !analysis.needs_context ? b.empty : b.stmt(b.call('$.init')),
+		analysis.runes || !analysis.needs_context
+			? b.empty
+			: b.stmt(b.call('$.init', analysis.immutable ? b.true : undefined)),
 		.../** @type {ESTree.Statement[]} */ (template.body)
@@ -375,0 +379,0 @@ ]);

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

@@ -22,3 +22,3 @@ /** @import { Expression, ExpressionStatement, Identifier, MemberExpression, ObjectExpression, Statement } from 'estree' */
 import { clean_nodes, determine_namespace_for_children } from '../../utils.js';
-import { build_getter, can_inline_variable } from '../utils.js';
+import { build_getter, can_inline_variable, create_derived } from '../utils.js';
 import {
@@ -538,2 +538,10 @@ get_attribute_name,
 	if (name === 'class') {
+		if (attribute.metadata.expression.has_state && has_call) {
+			// ensure we're not creating a separate template effect for this so that
+			// potential class directives are added to the same effect and therefore always apply
+			const id = b.id(state.scope.generate('class_derived'));
+			state.init.push(b.const(id, create_derived(state, b.thunk(value))));
+			value = b.call('$.get', id);
+			has_call = false;
+		}
 		update = b.stmt(
@@ -553,2 +561,10 @@ b.call(
 	} else {
+		if (name === 'style' && attribute.metadata.expression.has_state && has_call) {
+			// ensure we're not creating a separate template effect for this so that
+			// potential style directives are added to the same effect and therefore always apply
+			const id = b.id(state.scope.generate('style_derived'));
+			state.init.push(b.const(id, create_derived(state, b.thunk(value))));
+			value = b.call('$.get', id);
+			has_call = false;
+		}
 		const callee = name.startsWith('xlink') ? '$.set_xlink_attribute' : '$.set_attribute';
@@ -555,0 +571,0 @@ update = b.stmt(

src/compiler/phases/3-transform/client/visitors/shared/component.js

@@ -365,3 +365,3 @@ /** @import { BlockStatement, Expression, ExpressionStatement, Identifier, MemberExpression, Property, Statement } from 'estree' */
 				? '<g><!></g>'
-				: '<div style="display: contents"><!></div>'
+				: '<svelte-css-wrapper style="display: contents"><!></svelte-css-wrapper>'
 		);
@@ -368,0 +368,0 @@

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

 /** @import { CallExpression, Expression, Identifier, Literal, VariableDeclaration, VariableDeclarator } from 'estree' */
 /** @import { Binding } from '#compiler' */
-/** @import { ComponentContext } from '../types' */
-/** @import { Scope } from '../../../scope' */
+/** @import { ComponentClientTransformState, ComponentContext } from '../types' */
 import { dev } from '../../../../state.js';
@@ -270,3 +269,3 @@ import { extract_paths } from '../../../../utils/ast.js';
 					declarator,
-					context.state.scope,
+					context.state,
 					/** @type {Expression} */ (declarator.init && context.visit(declarator.init))
@@ -291,8 +290,13 @@ )
  * @param {VariableDeclarator} declarator
- * @param {Scope} scope
+ * @param {ComponentClientTransformState} scope
  * @param {Expression} value
  */
-function create_state_declarators(declarator, scope, value) {
+function create_state_declarators(declarator, { scope, analysis }, value) {
 	if (declarator.id.type === 'Identifier') {
-		return [b.declarator(declarator.id, b.call('$.mutable_state', value))];
+		return [
+			b.declarator(
+				declarator.id,
+				b.call('$.mutable_state', value, analysis.immutable ? b.true : undefined)
+			)
+		];
 	}
@@ -309,3 +313,5 @@
 				path.node,
-				binding?.kind === 'state' ? b.call('$.mutable_state', value) : value
+				binding?.kind === 'state'
+					? b.call('$.mutable_state', value, analysis.immutable ? b.true : undefined)
+					: value
 			);
@@ -312,0 +318,0 @@ })

src/compiler/phases/nodes.js

@@ -26,3 +26,3 @@ /** @import { AST, ExpressionMetadata, SvelteNode } from '#compiler' */
  * @param {AST.RegularElement | AST.SvelteElement} node
- * @returns {boolean}
+ * @returns {node is AST.RegularElement}
  */
@@ -29,0 +29,0 @@ export function is_custom_element_node(node) {

src/compiler/types/template.d.ts

@@ -306,2 +306,3 @@ import type { Binding, Css, ExpressionMetadata } from '#compiler';
 			scoped: boolean;
+			path: SvelteNode[];
 		};
@@ -308,0 +309,0 @@ }

src/html-tree-validation.js

@@ -145,2 +145,4 @@ /**
 export function is_tag_valid_with_ancestor(tag, ancestors) {
+	if (tag.includes('-')) return true; // custom elements can be anything
+
 	const target = ancestors[ancestors.length - 1];
@@ -152,2 +154,5 @@ const disallowed = disallowed_children[target];
 		for (let i = ancestors.length - 2; i >= 0; i--) {
+			const ancestor = ancestors[i];
+			if (ancestor.includes('-')) return true; // custom elements can be anything
+
 			// A reset means that forbidden descendants are allowed again
@@ -171,2 +176,4 @@ if (disallowed.reset_by.includes(ancestors[i])) {
 export function is_tag_valid_with_parent(tag, parent_tag) {
+	if (tag.includes('-') || parent_tag?.includes('-')) return true; // custom elements can be anything
+
 	if (parent_tag !== null) {
@@ -173,0 +180,0 @@ const disallowed = disallowed_children[parent_tag];

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

 /** @import { ComponentContextLegacy } from '#client' */
 import { run, run_all } from '../../../shared/utils.js';
+import { derived } from '../../reactivity/deriveds.js';
 import { user_pre_effect, user_effect } from '../../reactivity/effects.js';
@@ -8,4 +9,5 @@ import { component_context, deep_read_state, get, untrack } from '../../runtime.js';
  * Legacy-mode only: Call `onMount` callbacks and set up `beforeUpdate`/`afterUpdate` effects
+ * @param {boolean} [immutable]
  */
-export function init() {
+export function init(immutable = false) {
 	const context = /** @type {ComponentContextLegacy} */ (component_context);
@@ -16,6 +18,29 @@
 
+	let props = () => deep_read_state(context.s);
+
+	if (immutable) {
+		let version = 0;
+		let prev = /** @type {Record<string, any>} */ ({});
+
+		// In legacy immutable mode, before/afterUpdate only fire if the object identity of a prop changes
+		const d = derived(() => {
+			let changed = false;
+			const props = context.s;
+			for (const key in props) {
+				if (props[key] !== prev[key]) {
+					prev[key] = props[key];
+					changed = true;
+				}
+			}
+			if (changed) version++;
+			return version;
+		});
+
+		props = () => get(d);
+	}
+
 	// beforeUpdate
 	if (callbacks.b.length) {
 		user_pre_effect(() => {
-			observe_all(context);
+			observe_all(context, props);
 			run_all(callbacks.b);
@@ -40,3 +65,3 @@ });
 		user_effect(() => {
-			observe_all(context);
+			observe_all(context, props);
 			run_all(callbacks.a);
@@ -51,4 +76,5 @@ });
  * @param {ComponentContextLegacy} context
+ * @param {(() => void)} props
  */
-function observe_all(context) {
+function observe_all(context, props) {
 	if (context.l.s) {
@@ -58,3 +84,3 @@ for (const signal of context.l.s) get(signal);
 
-	deep_read_state(context.s);
+	props();
 }

src/internal/client/reactivity/sources.js

@@ -70,8 +70,11 @@ /** @import { Derived, Effect, Reaction, Source, Value } from '#client' */
  * @param {V} initial_value
+ * @param {boolean} [immutable]
  * @returns {Source<V>}
  */
 /*#__NO_SIDE_EFFECTS__*/
-export function mutable_source(initial_value) {
+export function mutable_source(initial_value, immutable = false) {
 	const s = source(initial_value);
-	s.equals = safe_equals;
+	if (!immutable) {
+		s.equals = safe_equals;
+	}
 
@@ -90,6 +93,7 @@ // bind the signal to the component context, in case we need to
  * @param {V} v
+ * @param {boolean} [immutable]
  * @returns {Source<V>}
  */
-export function mutable_state(v) {
-	return push_derived_source(mutable_source(v));
+export function mutable_state(v, immutable = false) {
+	return push_derived_source(mutable_source(v, immutable));
 }
@@ -96,0 +100,0 @@

src/internal/client/render.js

@@ -51,7 +51,9 @@ /** @import { ComponentContext, Effect, TemplateNode } from '#client' */
 export function set_text(text, value) {
+	// For objects, we apply string coercion (which might make things like $state array references in the template reactive) before diffing
+	var str = value == null ? '' : typeof value === 'object' ? value + '' : value;
 	// @ts-expect-error
-	if (value !== (text.__t ??= text.nodeValue)) {
+	if (str !== (text.__t ??= text.nodeValue)) {
 		// @ts-expect-error
-		text.__t = value;
-		text.nodeValue = value == null ? '' : value + '';
+		text.__t = str;
+		text.nodeValue = str == null ? '' : str + '';
 	}
@@ -58,0 +60,0 @@ }

src/internal/server/index.js

@@ -189,3 +189,3 @@ /** @import { ComponentType, SvelteComponent } from 'svelte' */
 	if (is_html) {
-		payload.out += `<div style="display: contents; ${styles}">`;
+		payload.out += `<svelte-css-wrapper style="display: contents; ${styles}">`;
 	} else {
@@ -202,3 +202,3 @@ payload.out += `<g style="${styles}">`;
 	if (is_html) {
-		payload.out += `<!----></div>`;
+		payload.out += `<!----></svelte-css-wrapper>`;
 	} else {
@@ -205,0 +205,0 @@ payload.out += `<!----></g>`;

src/version.js

@@ -9,3 +9,3 @@ // generated during release, do not modify
  */
-export const VERSION = '5.0.0-next.263';
+export const VERSION = '5.0.0-next.264';
 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

2255299

increased by0.15%

Lines of code

49634

increased by0.14%

No dependency changes