Merge branch 'master' into pr/4469

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Svelte changelog
 
+## Unreleased
+
+* Exclude global variables from `$capture_state` ([#4463](https://github.com/sveltejs/svelte/issues/4463))
+
 ## 3.19.1
 
 * Do not treat modifications to `$$props` as updates to a store called `$props` ([#4368](https://github.com/sveltejs/svelte/issues/4368))

site/content/docs/01-component-format.md

@@ -42,13 +42,13 @@ Svelte uses the `export` keyword to mark a variable declaration as a *property*
 
 ---
 
-You can specify a default value, which will be used if the component's consumer doesn't specify a prop.
+You can specify a default initial value for a prop. It will be used if the component's consumer doesn't specify the prop on the component (or if its initial value is `undefined`) when instantiating the component. Note that whenever a prop is removed by the consumer, its value is set to `undefined` rather than the initial value.
 
-In development mode (see the [compiler options](docs#svelte_compile)), a warning will be printed if no default is provided and the consumer does not specify a value. To squelch this warning, ensure that a default is specified, even if it is `undefined`.
+In development mode (see the [compiler options](docs#svelte_compile)), a warning will be printed if no default initial value is provided and the consumer does not specify a value. To squelch this warning, ensure that a default initial value is specified, even if it is `undefined`.
 
 ```html
 <script>
-	export let bar = 'optional default value';
+	export let bar = 'optional default initial value';
 	export let baz = undefined;
 </script>
 ```

site/content/docs/04-compile-time.md

@@ -113,7 +113,8 @@ const {
 	* `module` is `true` if the value is declared in a `context="module"` script
 	* `mutated` is `true` if the value's properties are assigned to inside the component
 	* `reassigned` is `true` if the value is reassigned inside the component
-	* `referenced` is `true` if the value is used outside the declaration
+	* `referenced` is `true` if the value is used in the template
+	* `referenced_from_script` is `true` if the value is used in the `<script>` outside the declaration
 	* `writable` is `true` if the value was declared with `let` or `var` (but not `const`, `class` or `function`)
 * `stats` is an object used by the Svelte developer team for diagnosing the compiler. Avoid relying on it to stay the same!
 
@@ -144,6 +145,7 @@ compiled: {
 		mutated: boolean,
 		reassigned: boolean,
 		referenced: boolean,
+		referenced_from_script: boolean,
 		writable: boolean
 	}>,
 	stats: {

site/content/examples/04-events/05-dom-event-forwarding/App.svelte

@@ -1,9 +1,9 @@
 <script>
-	import FancyButton from './FancyButton.svelte';
+	import CustomButton from './CustomButton.svelte';
 
 	function handleClick() {
 		alert('clicked');
 	}
 </script>
 
-<FancyButton on:click={handleClick}/>
+<CustomButton on:click={handleClick}/>

site/content/examples/04-events/05-dom-event-forwarding/CustomButton.svelte

@@ -0,0 +1,22 @@
+<style>
+	button {
+		height: 4rem;
+		width: 8rem;
+		background-color: #aaa;
+		border-color: #f1c40f;
+		color: #f1c40f;
+		font-size: 1.25rem;
+		background-image: linear-gradient(45deg, #f1c40f 50%, transparent 50%);
+		background-position: 100%;
+		background-size: 400%;
+		transition: background 300ms ease-in-out;
+	}
+	button:hover {
+		background-position: 0;
+		color: #aaa;
+	}
+</style>
+
+<button on:click>
+	Click me
+</button>

site/content/examples/04-events/05-dom-event-forwarding/FancyButton.svelte

@@ -1,15 +0,0 @@
-<style>
-	button {
-		font-family: 'Comic Sans MS', cursive;
-		font-size: 2em;
-		padding: 0.5em 1em;
-		color: royalblue;
-		background: gold;
-		border-radius: 1em;
-		box-shadow: 2px 2px 4px rgba(0,0,0,0.5);
-	}
-</style>
-
-<button on:click>
-	Click me
-</button>

site/content/tutorial/05-events/06-dom-event-forwarding/app-a/App.svelte

@@ -1,9 +1,9 @@
 <script>
-	import FancyButton from './FancyButton.svelte';
+	import CustomButton from './CustomButton.svelte';
 
 	function handleClick() {
 		alert('clicked');
 	}
 </script>
 
-<FancyButton on:click={handleClick}/>
+<CustomButton on:click={handleClick}/>

site/content/tutorial/05-events/06-dom-event-forwarding/app-a/CustomButton.svelte

@@ -0,0 +1,22 @@
+<style>
+	button {
+		height: 4rem;
+		width: 8rem;
+		background-color: #aaa;
+		border-color: #f1c40f;
+		color: #f1c40f;
+		font-size: 1.25rem;
+		background-image: linear-gradient(45deg, #f1c40f 50%, transparent 50%);
+		background-position: 100%;
+		background-size: 400%;
+		transition: background 300ms ease-in-out;
+	}
+	button:hover {
+		background-position: 0;
+		color: #aaa;
+	}
+</style>
+
+<button>
+	Click me
+</button>

site/content/tutorial/05-events/06-dom-event-forwarding/app-a/FancyButton.svelte

@@ -1,15 +0,0 @@
-<style>
-	button {
-		font-family: 'Comic Sans MS', cursive;
-		font-size: 2em;
-		padding: 0.5em 1em;
-		color: royalblue;
-		background: gold;
-		border-radius: 1em;
-		box-shadow: 2px 2px 4px rgba(0,0,0,0.5);
-	}
-</style>
-
-<button>
-	Click me
-</button>

site/content/tutorial/05-events/06-dom-event-forwarding/app-b/App.svelte

@@ -1,9 +1,9 @@
 <script>
-	import FancyButton from './FancyButton.svelte';
+	import CustomButton from './CustomButton.svelte';
 
 	function handleClick() {
 		alert('clicked');
 	}
 </script>
 
-<FancyButton on:click={handleClick}/>
+<CustomButton on:click={handleClick}/>

site/content/tutorial/05-events/06-dom-event-forwarding/app-b/CustomButton.svelte

@@ -0,0 +1,22 @@
+<style>
+	button {
+		height: 4rem;
+		width: 8rem;
+		background-color: #aaa;
+		border-color: #f1c40f;
+		color: #f1c40f;
+		font-size: 1.25rem;
+		background-image: linear-gradient(45deg, #f1c40f 50%, transparent 50%);
+		background-position: 100%;
+		background-size: 400%;
+		transition: background 300ms ease-in-out;
+	}
+	button:hover {
+		background-position: 0;
+		color: #aaa;
+	}
+</style>
+
+<button on:click>
+	Click me
+</button>

site/content/tutorial/05-events/06-dom-event-forwarding/app-b/FancyButton.svelte

@@ -1,15 +0,0 @@
-<style>
-	button {
-		font-family: 'Comic Sans MS', cursive;
-		font-size: 2em;
-		padding: 0.5em 1em;
-		color: royalblue;
-		background: gold;
-		border-radius: 1em;
-		box-shadow: 2px 2px 4px rgba(0,0,0,0.5);
-	}
-</style>
-
-<button on:click>
-	Click me
-</button>

site/content/tutorial/05-events/06-dom-event-forwarding/text.md

@@ -4,7 +4,7 @@ title: DOM event forwarding
 
 Event forwarding works for DOM events too.
 
-We want to get notified of clicks on our `<FancyButton>` — to do that, we just need to forward `click` events on the `<button>` element in `FancyButton.svelte`:
+We want to get notified of clicks on our `<CustomButton>` — to do that, we just need to forward `click` events on the `<button>` element in `CustomButton.svelte`:
 
 ```html
 <button on:click>

src/compiler/compile/render_dom/index.ts

@@ -167,7 +167,7 @@ export default function dom(
 			`;
 		}
 
-		const capturable_vars = component.vars.filter(v => !v.internal && !v.name.startsWith('$$'));
+		const capturable_vars = component.vars.filter(v => !v.internal && !v.global && !v.name.startsWith('$$'));
 
 		if (capturable_vars.length > 0) {
 			capture_state = x`() => ({ ${capturable_vars.map(prop => p`${prop.name}`)} })`;

test/custom-elements/samples/extended-builtin/_config.js

@@ -2,15 +2,15 @@ export default {
 	warnings: [{
 		code: "avoid-is",
 		message: "The 'is' attribute is not supported cross-browser and should be avoided",
-		pos: 97,
+		pos: 98,
 		start: {
-			character: 97,
+			character: 98,
 			column: 8,
 			line: 7
 		},
 		end: {
-			character: 114,
-			column: 25,
+			character: 116,
+			column: 26,
 			line: 7
 		}
 	}]

test/custom-elements/samples/extended-builtin/custom-button.js

@@ -0,0 +1,2 @@
+class CustomButton extends HTMLButtonElement {}
+customElements.define('custom-button', CustomButton, { extends: 'button' });

test/custom-elements/samples/extended-builtin/fancy-button.js

@@ -1,2 +0,0 @@
-class FancyButton extends HTMLButtonElement {}
-customElements.define('fancy-button', FancyButton, { extends: 'button' });

test/custom-elements/samples/extended-builtin/main.svelte

@@ -1,7 +1,7 @@
 <svelte:options tag="custom-element"/>
 
 <script>
-	import './fancy-button.js';
+	import './custom-button.js';
 </script>
 
-<button is="fancy-button">click me</button>
+<button is="custom-button">click me</button>

test/custom-elements/samples/extended-builtin/test.js

@@ -11,5 +11,5 @@ export default function (target) {
 	const el = target.querySelector('custom-element');
 	const button = el.shadowRoot.querySelector('button');
 
-	assert.ok(button instanceof customElements.get('fancy-button'));
+	assert.ok(button instanceof customElements.get('custom-button'));
 }

test/js/samples/loop-protect/expected.js

@@ -108,7 +108,7 @@ function instance($$self, $$props, $$invalidate) {
 		});
 	}
 
-	$$self.$capture_state = () => ({ node, foo, console });
+	$$self.$capture_state = () => ({ node, foo });
 
 	$$self.$inject_state = $$props => {
 		if ("node" in $$props) $$invalidate(0, node = $$props.node);
@@ -153,4 +153,4 @@ class Component extends SvelteComponentDev {
 	}
 }
 
-export default Component;
+export default Component;