Merge remote-tracking branch 'origin/version-4' into sites

Author: PuruVJ

.changeset/stale-cougars-wink.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+warn on boolean compilerOptions.css

documentation/docs/04-compiler-and-api/04-custom-elements-api.md

@@ -49,7 +49,7 @@ console.log(el.name);
 el.name = 'everybody';
 ```
 
-When constructing a custom element, you can tailor several aspects by defining `customElement` as an object within `<svelte:options>`. This object comprises a mandatory `tag` property for the custom element's name, an optional `shadow` property that can be set to `"none"` to forgo shadow root creation, and a `props` option, which offers the following settings:
+When constructing a custom element, you can tailor several aspects by defining `customElement` as an object within `<svelte:options>`. This object comprises a mandatory `tag` property for the custom element's name, an optional `shadow` property that can be set to `"none"` to forgo shadow root creation (note that styles are then no longer encapsulated, and you can't use slots), and a `props` option, which offers the following settings:
 
 - `attribute: string`: To update a custom element's prop, you have two alternatives: either set the property on the custom element's reference as illustrated above or use an HTML attribute. For the latter, the default attribute name is the lowercase property name. Modify this by assigning `attribute: "<desired name>"`.
 - `reflect: boolean`: By default, updated prop values do not reflect back to the DOM. To enable this behavior, set `reflect: true`.

packages/playground/start.js

@@ -4,7 +4,10 @@ import { watch } from 'rollup';
 import serve from 'rollup-plugin-serve';
 import * as svelte from '../svelte/src/compiler/index.js';
 
-const __dirname = new URL('.', import.meta.url).pathname;
+let __dirname = new URL('.', import.meta.url).pathname;
+if (process.platform === 'win32') {
+	__dirname = __dirname.slice(1); // else path.resolve fucks up
+}
 
 /** @returns {import('rollup').Plugin}*/
 function create_plugin(ssr = false) {

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

@@ -37,6 +37,7 @@ const regex_valid_identifier = /^[a-zA-Z_$][a-zA-Z_$0-9]*$/;
 const regex_starts_with_lowercase_character = /^[a-z]/;
 
 let warned_of_format = false;
+let warned_boolean_css = false;
 
 /**
  * @param {import('../interfaces.js').CompileOptions} options
@@ -86,23 +87,23 @@ function validate_options(options, warnings) {
 			toString: () => message
 		});
 	}
-	if (valid_css_values.indexOf(css) === -1) {
-		throw new Error(
-			`options.css must be true, false, 'injected', 'external', or 'none' (got '${css}')`
-		);
-	}
+
 	if (css === true || css === false) {
 		options.css = css === true ? 'injected' : 'external';
-		// possibly show this warning once we decided how Svelte 4 looks like
-		// const message = `options.css as a boolean is deprecated. Use '${options.css}' instead of ${css}.`;
-		// warnings.push({
-		// 	code: 'options-css-boolean-deprecated',
-		// 	message,
-		// 	filename,
-		// 	toString: () => message
-		// });
-		// }
+		if (!warned_boolean_css) {
+			console.warn(
+				`compilerOptions.css as a boolean is deprecated. Use '${options.css}' instead of ${css}.`
+			);
+			warned_boolean_css = true;
+		}
+	}
+
+	if (!valid_css_values.includes(options.css)) {
+		throw new Error(
+			`compilerOptions.css must be 'injected', 'external' or 'none' (got '${options.css}').`
+		);
 	}
+
 	if (namespace && valid_namespaces.indexOf(namespace) === -1) {
 		const match = fuzzymatch(namespace, valid_namespaces);
 		if (match) {

packages/svelte/src/runtime/internal/Component.js

@@ -287,7 +287,7 @@ if (typeof HTMLElement === 'function') {
 				this.$$props_definition,
 				'toProp'
 			);
-			this.$$component.$set({ [attr]: this.$$data[attr] });
+			this.$$component?.$set({ [attr]: this.$$data[attr] });
 		}
 
 		disconnectedCallback() {