Merge branch 'master' into sites

Author: Rich Harris

CHANGELOG.md

@@ -1,11 +1,17 @@
 # Svelte changelog
 
-## Unreleased
+## 3.58.0
 
 * Add `bind:innerText` for `contenteditable` elements ([#3311](https://github.com/sveltejs/svelte/issues/3311))
-* Relax `a11y-no-noninteractive-element-to-interactive-role` warning ([#8402](https://github.com/sveltejs/svelte/pull/8402))
+* Add support for CSS `@container` queries ([#6969](https://github.com/sveltejs/svelte/issues/6969))
+* Respect `preserveComments` in DOM output ([#7182](https://github.com/sveltejs/svelte/pull/7182))
+* Allow use of `document` for `target` in typings ([#7554](https://github.com/sveltejs/svelte/pull/7554))
 * Add `a11y-interactive-supports-focus` warning ([#8392](https://github.com/sveltejs/svelte/pull/8392))
 * Fix equality check when updating dynamic text ([#5931](https://github.com/sveltejs/svelte/issues/5931))
+* Relax `a11y-no-noninteractive-element-to-interactive-role` warning ([#8402](https://github.com/sveltejs/svelte/pull/8402))
+* Properly handle microdata attributes ([#8413](https://github.com/sveltejs/svelte/issues/8413))
+* Prevent name collision when using computed destructuring variables ([#8417](https://github.com/sveltejs/svelte/issues/8417))
+* Fix escaping `<textarea value={...}>` values in SSR ([#8429](https://github.com/sveltejs/svelte/issues/8429))
 
 ## 3.57.0
 

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "svelte",
-  "version": "3.57.0",
+  "version": "3.58.0",
   "description": "Cybernetically enhanced web apps",
   "module": "index.mjs",
   "main": "index",

package.json

@@ -173,7 +173,7 @@ class Atrule {
 	}
 
 	apply(node: Element) {
-		if (this.node.name === 'media' || this.node.name === 'supports' || this.node.name === 'layer') {
+		if (this.node.name === 'container' || this.node.name === 'media' || this.node.name === 'supports' || this.node.name === 'layer') {
 			this.children.forEach(child => {
 				child.apply(node);
 			});

src/compiler/compile/css/Stylesheet.ts

@@ -11,7 +11,7 @@ export type Context = DestructuredVariable | ComputedProperty;
 
 interface ComputedProperty {
 	type: 'ComputedProperty';
-  property_name: string;
+  property_name: Identifier;
   key: Expression | PrivateIdentifier;
 }
 
@@ -30,8 +30,7 @@ export function unpack_destructuring({
 	default_modifier = (node) => node,
 	scope,
 	component,
-	context_rest_properties,
-	number_of_computed_props = { n: 0 }
+	context_rest_properties
 }: {
 	contexts: Context[];
 	node: Node;
@@ -40,10 +39,6 @@ export function unpack_destructuring({
 	scope: TemplateScope;
 	component: Component;
 	context_rest_properties: Map<string, Node>;
-	// we want to pass this by reference, as a sort of global variable, because 
-	// if we pass this by value, we could get computed_property_# variable collisions
-	// when we deal with nested object destructuring
-	number_of_computed_props?: { n: number }; 
 }) {
 	if (!node) return;
 
@@ -72,8 +67,7 @@ export function unpack_destructuring({
 					default_modifier,
 					scope,
 					component,
-					context_rest_properties,
-					number_of_computed_props
+					context_rest_properties
 				});
 				context_rest_properties.set((element.argument as Identifier).name, element);
 			} else if (element && element.type === 'AssignmentPattern') {
@@ -93,8 +87,7 @@ export function unpack_destructuring({
 						)}` as Node,
 					scope,
 					component,
-					context_rest_properties,
-					number_of_computed_props
+					context_rest_properties
 				});
 			} else {
 				unpack_destructuring({
@@ -104,8 +97,7 @@ export function unpack_destructuring({
 					default_modifier,
 					scope,
 					component,
-					context_rest_properties,
-					number_of_computed_props
+					context_rest_properties
 				});
 			}
 		});
@@ -124,8 +116,7 @@ export function unpack_destructuring({
 					default_modifier,
 					scope,
 					component,
-					context_rest_properties,
-					number_of_computed_props
+					context_rest_properties
 				});
 				context_rest_properties.set((property.argument as Identifier).name, property);
 			} else if (property.type === 'Property') {
@@ -136,8 +127,7 @@ export function unpack_destructuring({
 
 				if (property.computed) {
 					// e.g { [computedProperty]: ... }
-					const property_name = `computed_property_${number_of_computed_props.n}`;
-					number_of_computed_props.n += 1;
+					const property_name = component.get_unique_name('computed_property');
 
 					contexts.push({
 						type: 'ComputedProperty',
@@ -178,8 +168,7 @@ export function unpack_destructuring({
 							)}` as Node,
 						scope,
 						component,
-						context_rest_properties,
-						number_of_computed_props
+						context_rest_properties
 					});
 				} else {
 					// e.g. { property } or { property: newName }
@@ -190,8 +179,7 @@ export function unpack_destructuring({
 						default_modifier,
 						scope,
 						component,
-						context_rest_properties,
-						number_of_computed_props
+						context_rest_properties
 					});
 				}
 			}

src/compiler/compile/nodes/shared/Context.ts

@@ -0,0 +1,41 @@
+import Renderer from '../Renderer';
+import Block from '../Block';
+import Comment from '../../nodes/Comment';
+import Wrapper from './shared/Wrapper';
+import { x } from 'code-red';
+import { Identifier } from 'estree';
+
+export default class CommentWrapper extends Wrapper {
+	node: Comment;
+	var: Identifier;
+
+	constructor(
+		renderer: Renderer,
+		block: Block,
+		parent: Wrapper,
+		node: Comment
+	) {
+		super(renderer, block, parent, node);
+		this.var = x`c` as Identifier;
+	}
+
+	render(block: Block, parent_node: Identifier, parent_nodes: Identifier) {
+	    if (!this.renderer.options.preserveComments) return;
+
+		const string_literal = {
+			type: 'Literal',
+			value: this.node.data,
+			loc: {
+				start: this.renderer.locate(this.node.start),
+				end: this.renderer.locate(this.node.end)
+			}
+		};
+
+		block.add_element(
+			this.var,
+			x`@comment(${string_literal})`,
+			parent_nodes && x`@claim_comment(${parent_nodes}, ${string_literal})`,
+			parent_node
+		);
+	}
+}

src/compiler/compile/render_dom/wrappers/Comment.ts

@@ -364,7 +364,6 @@ const attribute_lookup: { [key in BooleanAttributes]: AttributeMetadata } & { [k
 	indeterminate: { applies_to: ['input'] },
 	inert: {},
 	ismap: { property_name: 'isMap', applies_to: ['img'] },
-	itemscope: {},
 	loop: { applies_to: ['audio', 'bgsound', 'video'] },
 	multiple: { applies_to: ['input', 'select'] },
 	muted: { applies_to: ['audio', 'video'] },

src/compiler/compile/render_dom/wrappers/Element/Attribute.ts

@@ -14,6 +14,7 @@ import RawMustacheTag from './RawMustacheTag';
 import Slot from './Slot';
 import SlotTemplate from './SlotTemplate';
 import Text from './Text';
+import Comment from './Comment';
 import Title from './Title';
 import Window from './Window';
 import { INode } from '../../nodes/interfaces';
@@ -27,7 +28,7 @@ import { regex_starts_with_whitespace } from '../../../utils/patterns';
 const wrappers = {
 	AwaitBlock,
 	Body,
-	Comment: null,
+	Comment,
 	DebugTag,
 	Document,
 	EachBlock,
@@ -118,7 +119,7 @@ export default class FragmentWrapper {
 				link(last_child, last_child = wrapper);
 			} else {
 				const Wrapper = wrappers[child.type];
-				if (!Wrapper) continue;
+				if (!Wrapper || (child.type === 'Comment' && !renderer.options.preserveComments)) continue;
 
 				const wrapper = new Wrapper(renderer, block, parent, child, strip_whitespace, last_child || next_sibling);
 				this.nodes.unshift(wrapper);

src/compiler/compile/render_dom/wrappers/Fragment.ts

@@ -19,11 +19,17 @@ export function get_class_attribute_value(attribute: Attribute): ESTreeExpressio
 export function get_attribute_value(attribute: Attribute): ESTreeExpression {
 	if (attribute.chunks.length === 0) return x`""`;
 
+	/**
+	 * For value attribute of textarea, it will render as child node of `<textarea>` element.
+	 * Therefore, we need to escape as content (not attribute).
+	 */
+	const is_textarea_value = attribute.parent.name.toLowerCase() === 'textarea' && attribute.name.toLowerCase() === 'value';
+
 	return attribute.chunks
 		.map((chunk) => {
 			return chunk.type === 'Text'
 				? string_literal(chunk.data.replace(regex_double_quotes, '&quot;')) as ESTreeExpression
-				: x`@escape(${chunk.node}, true)`;
+				: x`@escape(${chunk.node}, ${is_textarea_value ? 'false' : 'true'})`;
 		})
 		.reduce((lhs, rhs) => x`${lhs} + ${rhs}`);
 }

src/compiler/compile/render_ssr/handlers/shared/get_attribute_value.ts

@@ -0,0 +1,31 @@
+// @ts-nocheck
+// Note: Must import from the `css-tree` browser bundled distribution due to `createRequire` usage if importing from
+// `css-tree` Node module directly. This allows the production build of Svelte to work correctly.
+import { fork } from '../../../../../node_modules/css-tree/dist/csstree.esm.js';
+
+import * as node from './node';
+
+/**
+ * Extends `css-tree` for container query support by forking and adding new nodes and at-rule support for `@container`.
+ *
+ * The new nodes are located in `./node`.
+ */
+const cqSyntax = fork({
+	atrule: { // extend or override at-rule dictionary
+		container: {
+			parse: {
+				prelude() {
+					return this.createSingleNodeList(
+						this.ContainerQuery()
+					);
+				},
+				block(isStyleBlock = false) {
+					return this.Block(isStyleBlock);
+				}
+			}
+		}
+	},
+	node
+});
+
+export const parse = cqSyntax.parse;

src/compiler/parse/read/css-tree-cq/css_tree_parse.ts

@@ -0,0 +1,48 @@
+// @ts-nocheck
+import { Delim } from 'css-tree/tokenizer';
+
+export const name = 'Comparison';
+export const structure = {
+	value: String
+};
+
+export function parse() {
+	const start = this.tokenStart;
+
+	const char1 = this.consume(Delim);
+
+	// The first character in the comparison operator must match '<', '=', or '>'.
+	if (char1 !== '<' && char1 !== '>' && char1 !== '=') {
+		this.error('Malformed comparison operator');
+	}
+
+	let char2;
+
+	if (this.tokenType === Delim) {
+		char2 = this.consume(Delim);
+
+		// The second character in the comparison operator must match '='.
+		if (char2 !== '=') {
+			this.error('Malformed comparison operator');
+		}
+	}
+
+	// If the next token is also 'Delim' then it is malformed.
+	if (this.tokenType === Delim) {
+		this.error('Malformed comparison operator');
+	}
+
+	const value = char2 ? `${char1}${char2}` : char1;
+
+	return {
+		type: 'Comparison',
+		loc: this.getLocation(start, this.tokenStart),
+		value
+	};
+}
+
+export function generate(node) {
+	for (let index = 0; index < node.value.length; index++) {
+		this.token(Delim, node.value.charAt(index));
+	}
+}