Merge remote-tracking branch 'origin/master' into feat/copy-code-button

Author: PuruVJ

documentation/docs/02-template-syntax/02-basic-markup.md

@@ -106,11 +106,13 @@ An element or component can have multiple spread attributes, interspersed with r
 
 ## Text expressions
 
+A JavaScript expression can be included as text by surrounding it with curly braces.
+
 ```svelte
 {expression}
 ```
 
-Text can also contain JavaScript expressions:
+Curly braces can be included in a Svelte template by using their [HTML entity](https://developer.mozilla.org/docs/Glossary/Entity) strings: `{`, `{`, or `{` for `{` and `}`, `}`, or `}` for `}`.
 
 > If you're using a regular expression (`RegExp`) [literal notation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp#literal_notation_and_constructor), you'll need to wrap it in parentheses.
 

documentation/docs/05-misc/01-faq.md

@@ -131,6 +131,17 @@ If you need hash-based routing on the client side, check out [svelte-spa-router]
 
 You can see a [community-maintained list of routers on sveltesociety.dev](https://sveltesociety.dev/components#routers).
 
+## Can I tell Svelte not to remove my unused styles?
+
+No. Svelte removes the styles from the component and warns you about them in order to prevent issues that would otherwise arise.
+
+Svelte's component style scoping works by generating a class unique to the given component, adding it to the relevant elements in the component that are under Svelte's control, and then adding it to each of the selectors in that component's styles. When the compiler can't see what elements a style selector applies to, there would be two bad options for keeping it:
+
+- If it keeps the selector and adds the scoping class to it, the selector will likely not match the expected elements in the component, and they definitely won't if they were created by a child component or `{@html ...}`.
+- If it keeps the selector without adding the scoping class to it, the given style will become a global style, affecting your entire page.
+
+If you need to style something that Svelte can't identify at compile time, you will need to explicitly opt into global styles by using `:global(...)`. But also keep in mind that you can wrap `:global(...)` around only part of a selector. `.foo :global(.bar) { ... }` will style any `.bar` elements that appear within the component's `.foo` elements. As long as there's some parent element in the current component to start from, partially global selectors like this will almost always be able to get you what you want.
+
 ## Is Svelte v2 still available?
 
 New features aren't being added to it, and bugs will probably only be fixed if they are extremely nasty or present some sort of security vulnerability.

packages/svelte/package.json

@@ -83,7 +83,7 @@
     "posttest": "agadoo src/internal/index.js",
     "prepublishOnly": "pnpm build",
     "types": "node ./scripts/generate-dts.js",
-    "lint": "prettier . --cache --plugin-search-dir=. --check && eslint \"{src,test}/**/*.{ts,js}\" --cache"
+    "lint": "prettier . --cache --plugin-search-dir=. --check && eslint \"{scripts,src,test}/**/*.js\" --cache --fix"
   },
   "repository": {
     "type": "git",
@@ -129,6 +129,7 @@
     "agadoo": "^3.0.0",
     "dts-buddy": "^0.1.7",
     "esbuild": "^0.18.11",
+    "eslint-plugin-lube": "^0.1.7",
     "happy-dom": "^9.20.3",
     "jsdom": "^21.1.2",
     "kleur": "^4.1.5",

packages/svelte/scripts/.eslintrc.json

@@ -0,0 +1,6 @@
+{
+	"plugins": ["lube"],
+	"rules": {
+		"lube/svelte-naming-convention": ["error", { "fixSameNames": true }]
+	}
+}

packages/svelte/scripts/compile-test.js

@@ -1,8 +1,8 @@
 // Compile all Svelte files in a directory to JS and CSS files
 // Usage: node scripts/compile-test.js <directory>
 
-import { mkdirSync, readFileSync, writeFileSync } from 'fs';
-import path from 'path';
+import { mkdirSync, readFileSync, writeFileSync } from 'node:fs';
+import path from 'node:path';
 import glob from 'tiny-glob/sync.js';
 import { compile } from '../src/compiler/index.js';
 

packages/svelte/scripts/generate-dts.js

@@ -1,18 +1,18 @@
-import * as fs from 'fs';
+import * as fs from 'node:fs';
 import { createBundle } from 'dts-buddy';
 
 // It may look weird, but the imports MUST be ending with index.js to be properly resolved in all TS modes
 for (const name of ['action', 'animate', 'easing', 'motion', 'store', 'transition']) {
-	fs.writeFileSync(`${name}.d.ts`, `import './types/index.js';`);
+	fs.writeFileSync(`${name}.d.ts`, "import './types/index.js';");
 }
 
-fs.writeFileSync('index.d.ts', `import './types/index.js';`);
-fs.writeFileSync('compiler.d.ts', `import './types/index.js';`);
+fs.writeFileSync('index.d.ts', "import './types/index.js';");
+fs.writeFileSync('compiler.d.ts', "import './types/index.js';");
 
 // TODO: some way to mark these as deprecated
 fs.mkdirSync('./types/compiler', { recursive: true });
-fs.writeFileSync('./types/compiler/preprocess.d.ts', `import '../index.js';`);
-fs.writeFileSync('./types/compiler/interfaces.d.ts', `import '../index.js';`);
+fs.writeFileSync('./types/compiler/preprocess.d.ts', "import '../index.js';");
+fs.writeFileSync('./types/compiler/interfaces.d.ts', "import '../index.js';");
 
 await createBundle({
 	output: 'types/index.d.ts',

packages/svelte/scripts/globals-extractor.js

@@ -6,8 +6,8 @@ Please run `node scripts/globals-extractor.js` at the project root.
 see: https://github.com/microsoft/TypeScript/tree/main/lib
  ---------------------------------------------------------------------- */
 
-import http from 'https';
-import fs from 'fs';
+import http from 'node:https';
+import fs from 'node:fs';
 
 const GLOBAL_TS_PATH = './src/compiler/utils/globals.js';
 

packages/svelte/src/.eslintrc.json

@@ -0,0 +1,6 @@
+{
+	"plugins": ["lube"],
+	"rules": {
+		"lube/svelte-naming-convention": ["error", { "fixSameNames": true }]
+	}
+}

packages/svelte/src/compiler/compile/Component.js

@@ -1555,8 +1555,8 @@ export default class Component {
 			}, [])
 		);
 		if (cycle && cycle.length) {
-			const declarationList = lookup.get(cycle[0]);
-			const declaration = declarationList[0];
+			const declaration_list = lookup.get(cycle[0]);
+			const declaration = declaration_list[0];
 			return this.error(declaration.node, compiler_errors.cyclical_reactive_declaration(cycle));
 		}
 

packages/svelte/src/compiler/compile/create_module.js

@@ -4,7 +4,7 @@ import { b } from 'code-red';
  * @param {any} program
  * @param {import('estree').Identifier} name
  * @param {string} banner
- * @param {any} sveltePath
+ * @param {any} svelte_path
  * @param {Array<{ name: string; alias: import('estree').Identifier }>} helpers
  * @param {Array<{ name: string; alias: import('estree').Identifier }>} globals
  * @param {import('estree').ImportDeclaration[]} imports
@@ -15,21 +15,21 @@ export default function create_module(
 	program,
 	name,
 	banner,
-	sveltePath = 'svelte',
+	svelte_path = 'svelte',
 	helpers,
 	globals,
 	imports,
 	module_exports,
 	exports_from
 ) {
-	const internal_path = `${sveltePath}/internal`;
+	const internal_path = `${svelte_path}/internal`;
 	helpers.sort((a, b) => (a.name < b.name ? -1 : 1));
 	globals.sort((a, b) => (a.name < b.name ? -1 : 1));
 	return esm(
 		program,
 		name,
 		banner,
-		sveltePath,
+		svelte_path,
 		internal_path,
 		helpers,
 		globals,
@@ -41,11 +41,11 @@ export default function create_module(
 
 /**
  * @param {any} source
- * @param {any} sveltePath
+ * @param {any} svelte_path
  */
-function edit_source(source, sveltePath) {
+function edit_source(source, svelte_path) {
 	return source === 'svelte' || source.startsWith('svelte/')
-		? source.replace('svelte', sveltePath)
+		? source.replace('svelte', svelte_path)
 		: source;
 }
 
@@ -84,7 +84,7 @@ function get_internal_globals(globals, helpers) {
  * @param {any} program
  * @param {import('estree').Identifier} name
  * @param {string} banner
- * @param {string} sveltePath
+ * @param {string} svelte_path
  * @param {string} internal_path
  * @param {Array<{ name: string; alias: import('estree').Identifier }>} helpers
  * @param {Array<{ name: string; alias: import('estree').Identifier }>} globals
@@ -96,7 +96,7 @@ function esm(
 	program,
 	name,
 	banner,
-	sveltePath,
+	svelte_path,
 	internal_path,
 	helpers,
 	globals,
@@ -118,7 +118,7 @@ function esm(
 
 	/** @param {any} node */
 	function rewrite_import(node) {
-		const value = edit_source(node.source.value, sveltePath);
+		const value = edit_source(node.source.value, svelte_path);
 		if (node.source.value !== value) {
 			node.source.value = value;
 			node.source.raw = null;

packages/svelte/src/compiler/compile/nodes/Binding.js

@@ -98,7 +98,7 @@ export default class Binding extends Node {
 		this.is_readonly =
 			regex_dimensions.test(this.name) ||
 			regex_box_size.test(this.name) ||
-			(isElement(parent) &&
+			(is_element(parent) &&
 				((parent.is_media_node() && read_only_media_attributes.has(this.name)) ||
 					(parent.name === 'input' && type === 'file'))) /* TODO others? */;
 	}
@@ -127,6 +127,6 @@ export default class Binding extends Node {
  * @param {import('./shared/Node.js').default} node
  * @returns {node is import('./Element.js').default}
  */
-function isElement(node) {
+function is_element(node) {
 	return !!(/** @type {any} */ (node).is_media_node);
 }

packages/svelte/src/compiler/compile/nodes/EachBlock.js

@@ -84,7 +84,9 @@ export default class EachBlock extends AbstractBlock {
 		this.has_animation = false;
 		[this.const_tags, this.children] = get_const_tags(info.children, component, this, this);
 		if (this.has_animation) {
-			this.children = this.children.filter((child) => !isEmptyNode(child) && !isCommentNode(child));
+			this.children = this.children.filter(
+				(child) => !is_empty_node(child) && !is_comment_node(child)
+			);
 			if (this.children.length !== 1) {
 				const child = this.children.find(
 					(child) => !!(/** @type {import('./Element.js').default} */ (child).animation)
@@ -102,11 +104,11 @@ export default class EachBlock extends AbstractBlock {
 }
 
 /** @param {import('./interfaces.js').INode} node */
-function isEmptyNode(node) {
+function is_empty_node(node) {
 	return node.type === 'Text' && node.data.trim() === '';
 }
 
 /** @param {import('./interfaces.js').INode} node */
-function isCommentNode(node) {
+function is_comment_node(node) {
 	return node.type === 'Comment';
 }

packages/svelte/src/compiler/compile/nodes/Element.js

@@ -875,7 +875,7 @@ export default class Element extends Node {
 		) {
 			const interactive_handlers = handlers
 				.map((handler) => handler.name)
-				.filter((handlerName) => a11y_interactive_handlers.has(handlerName));
+				.filter((handler_name) => a11y_interactive_handlers.has(handler_name));
 			if (interactive_handlers.length > 0) {
 				component.warn(
 					this,

packages/svelte/src/compiler/compile/nodes/shared/get_const_tags.js

@@ -73,8 +73,8 @@ function sort_consts_nodes(consts_nodes, component) {
 		}, [])
 	);
 	if (cycle && cycle.length) {
-		const nodeList = lookup.get(cycle[0]);
-		const node = nodeList[0];
+		const node_list = lookup.get(cycle[0]);
+		const node = node_list[0];
 		component.error(node.node, compiler_errors.cyclical_const_tags(cycle));
 	}
 

packages/svelte/src/compiler/compile/render_dom/wrappers/Window.js

@@ -94,14 +94,14 @@ export default class WindowWrapper extends Wrapper {
 					bindings.scrollX && bindings.scrollY
 						? x`"${bindings.scrollX}" in this._state || "${bindings.scrollY}" in this._state`
 						: x`"${bindings.scrollX || bindings.scrollY}" in this._state`;
-				const scrollX = bindings.scrollX && x`this._state.${bindings.scrollX}`;
-				const scrollY = bindings.scrollY && x`this._state.${bindings.scrollY}`;
+				const scroll_x = bindings.scrollX && x`this._state.${bindings.scrollX}`;
+				const scroll_y = bindings.scrollY && x`this._state.${bindings.scrollY}`;
 				renderer.meta_bindings.push(b`
 					if (${condition}) {
-						@_scrollTo(${scrollX || '@_window.pageXOffset'}, ${scrollY || '@_window.pageYOffset'});
+						@_scrollTo(${scroll_x || '@_window.pageXOffset'}, ${scroll_y || '@_window.pageYOffset'});
 					}
-					${scrollX && `${scrollX} = @_window.pageXOffset;`}
-					${scrollY && `${scrollY} = @_window.pageYOffset;`}
+					${scroll_x && `${scroll_x} = @_window.pageXOffset;`}
+					${scroll_y && `${scroll_y} = @_window.pageYOffset;`}
 				`);
 				block.event_listeners.push(x`
 					@listen(@_window, "${event}", () => {
@@ -132,17 +132,17 @@ export default class WindowWrapper extends Wrapper {
 		// special case... might need to abstract this out if we add more special cases
 		if (bindings.scrollX || bindings.scrollY) {
 			const condition = renderer.dirty([bindings.scrollX, bindings.scrollY].filter(Boolean));
-			const scrollX = bindings.scrollX
+			const scroll_x = bindings.scrollX
 				? renderer.reference(bindings.scrollX)
 				: x`@_window.pageXOffset`;
-			const scrollY = bindings.scrollY
+			const scroll_y = bindings.scrollY
 				? renderer.reference(bindings.scrollY)
 				: x`@_window.pageYOffset`;
 			block.chunks.update.push(b`
 				if (${condition} && !${scrolling}) {
 					${scrolling} = true;
 					@_clearTimeout(${scrolling_timeout});
-					@_scrollTo(${scrollX}, ${scrollY});
+					@_scrollTo(${scroll_x}, ${scroll_y});
 					${scrolling_timeout} = @_setTimeout(${clear_scrolling}, 100);
 				}
 			`);

packages/svelte/src/compiler/parse/read/css-tree-cq/css_tree_parse.js

@@ -8,21 +8,21 @@ import * as node from './node/index.js';
  *
  * The new nodes are located in `./node`.
  */
-const cqSyntax = fork({
+const cq_syntax = fork({
 	atrule: {
 		// extend or override at-rule dictionary
 		container: {
 			parse: {
 				prelude() {
 					return this.createSingleNodeList(this.ContainerQuery());
 				},
-				block(isStyleBlock = false) {
-					return this.Block(isStyleBlock);
+				block(is_style_block = false) {
+					return this.Block(is_style_block);
 				}
 			}
 		}
 	},
 	node
 });
 
-export const parse = cqSyntax.parse;
+export const parse = cq_syntax.parse;

packages/svelte/src/compiler/parse/read/css-tree-cq/node/query_feature_range.js

@@ -16,7 +16,7 @@ export const structure = {
 	value: ['Identifier', 'Number', 'Comparison', 'Dimension', 'QueryCSSFunction', 'Ratio', null]
 };
 
-function lookup_non_WS_type_and_value(offset, type, referenceStr) {
+function lookup_non_ws_type_and_value(offset, type, reference_str) {
 	let current_type;
 
 	do {
@@ -26,7 +26,7 @@ function lookup_non_WS_type_and_value(offset, type, referenceStr) {
 		}
 	} while (current_type !== 0); // NULL -> 0
 
-	return current_type === type ? this.lookupValue(offset - 1, referenceStr) : false;
+	return current_type === type ? this.lookupValue(offset - 1, reference_str) : false;
 }
 
 export function parse() {
@@ -40,7 +40,7 @@ export function parse() {
 	while (!this.eof && this.tokenType !== RightParenthesis) {
 		switch (this.tokenType) {
 			case Number:
-				if (lookup_non_WS_type_and_value.call(this, 1, Delim, '/')) {
+				if (lookup_non_ws_type_and_value.call(this, 1, Delim, '/')) {
 					child = this.Ratio();
 				} else {
 					child = this.Number();