Merge branch 'master' into pr/3822

CHANGELOG.md

@@ -1,5 +1,14 @@
 # Svelte changelog
 
+## Unreleased
+
+* Fix unused export warning for props used as stores ([#4021](https://github.com/sveltejs/svelte/issues/4021))
+* Fix `{:then}` without resolved value containing `{#each}` ([#4022](https://github.com/sveltejs/svelte/issues/4022))
+* Fix incorrect code generated with `loopGuardTimeout` ([#4034](https://github.com/sveltejs/svelte/issues/4034))
+* Fix `{:then}` containing `{#if}` ([#4044](https://github.com/sveltejs/svelte/issues/4044))
+* Fix bare `import`s in `format: 'cjs'` output mode ([#4055](https://github.com/sveltejs/svelte/issues/4050))
+* Warn when using a known global as a component name ([#4070](https://github.com/sveltejs/svelte/issues/4070))
+
 ## 3.16.0
 
 * Use bitmasks to track changes ([#3945](https://github.com/sveltejs/svelte/pull/3945))

site/content/blog/2017-12-31-sapper-towards-the-ideal-web-app-framework.md

@@ -53,7 +53,7 @@ What happens if we use the new model as a starting point?
 
 The same 'hello world' app that took 204kb with React and Next weighs just 7kb with Sapper. That number is likely to fall further in the future as we explore the space of optimisation possibilities, such as not shipping any JavaScript *at all* for pages that aren't interactive, beyond the tiny Sapper runtime that handles client-side routing.
 
-What about a more 'real world' example? Conveniently, the [RealWorld](https://github.com/gothinkster/realworld) project, which challenges frameworks to develop an implementation of a Medium clone, gives us a way to find out. The [Sapper implementation](http://svelte-realworld.now.sh/) takes 39.6kb (11.8kb zipped) to render an interactive homepage.
+What about a more 'real world' example? Conveniently, the [RealWorld](https://github.com/gothinkster/realworld) project, which challenges frameworks to develop an implementation of a Medium clone, gives us a way to find out. The [Sapper implementation](https://github.com/sveltejs/realworld) takes 39.6kb (11.8kb zipped) to render an interactive homepage.
 
 <aside><p>Code-splitting isn't free — if the reference implementation used code-splitting, it would be larger still</p></aside>
 

site/src/routes/_components/WhosUsingSvelte.svelte

@@ -45,9 +45,11 @@
 </style>
 
 <div class="logos">
+	<a target="_blank" rel="noopener" href="https://absoluteweb.com"><img src="organisations/absoluteweb.svg" alt="Absolute Web logo" loading="lazy"></a>
 	<a target="_blank" rel="noopener" href="https://bekchy.com"><img src="organisations/bekchy.png" alt="Bekchy logo" loading="lazy"></a>
 	<a target="_blank" rel="noopener" href="https://beyonk.com"><img src="organisations/beyonk.svg" alt="Beyonk logo" loading="lazy"></a>
 	<a target="_blank" rel="noopener" href="https://buydotstar.com"><img src="organisations/buydotstar.svg" alt="buy.* logo" loading="lazy"></a>
+	<a target="_blank" rel="noopener" href="https://cashfree.com/"><img src="organisations/cashfree.svg" alt="Cashfree logo" loading="lazy"></a>
 	<a target="_blank" rel="noopener" href="https://chess.com" style="background-color: rgb(49,46,43);"><img src="organisations/chess.svg" alt="Chess.com logo" loading="lazy"></a>
 	<a target="_blank" rel="noopener" href="https://comigosaude.com.br"><img src="organisations/comigo.svg" alt="Comigo logo" loading="lazy"></a>
 	<a target="_blank" rel="noopener" href="https://datawrapper.de"><img src="organisations/datawrapper.svg" alt="Datawrapper logo" loading="lazy"></a>

site/src/routes/repl/[id]/index.svelte

@@ -187,7 +187,7 @@
 <svelte:head>
 	<title>{name} • REPL • Svelte</title>
 
-	<meta name="twitter:title" content="Svelte REPL">
+	<meta name="twitter:title" content="{name} | Svelte REPL">
 	<meta name="twitter:description" content="Cybernetically enhanced web apps">
 	<meta name="Description" content="Interactive Svelte playground">
 </svelte:head>

src/compiler/compile/Component.ts

@@ -344,15 +344,16 @@ export default class Component {
 		};
 	}
 
-	get_unique_name(name: string): Identifier {
+	get_unique_name(name: string, scope?: Scope): Identifier {
 		if (test) name = `${name}$`;
 		let alias = name;
 		for (
 			let i = 1;
 			reserved.has(alias) ||
 			this.var_lookup.has(alias) ||
 			this.used_names.has(alias) ||
-			this.globally_used_names.has(alias);
+			this.globally_used_names.has(alias) ||
+			(scope && scope.has(alias));
 			alias = `${name}_${i++}`
 		);
 		this.used_names.add(alias);
@@ -465,7 +466,7 @@ export default class Component {
 						extract_names(declarator.id).forEach(name => {
 							const variable = this.var_lookup.get(name);
 							variable.export_name = name;
-							if (variable.writable && !(variable.referenced || variable.referenced_from_script)) {
+							if (variable.writable && !(variable.referenced || variable.referenced_from_script || variable.subscribable)) {
 								this.warn(declarator, {
 									code: `unused-export-let`,
 									message: `${this.name.name} has unused export property '${name}'. If it is for external reference only, please consider using \`export const '${name}'\``
@@ -488,7 +489,7 @@ export default class Component {
 					if (variable) {
 						variable.export_name = specifier.exported.name;
 
-						if (variable.writable && !(variable.referenced || variable.referenced_from_script)) {
+						if (variable.writable && !(variable.referenced || variable.referenced_from_script || variable.subscribable)) {
 							this.warn(specifier, {
 								code: `unused-export-let`,
 								message: `${this.name.name} has unused export property '${specifier.exported.name}'. If it is for external reference only, please consider using \`export const '${specifier.exported.name}'\``
@@ -707,8 +708,7 @@ export default class Component {
 		const remove = (parent, prop, index) => {
 			to_remove.unshift([parent, prop, index]);
 		};
-
-		const to_insert = new Map();
+		let scope_updated = false;
 
 		walk(content, {
 			enter(node, parent, prop, index) {
@@ -735,37 +735,21 @@ export default class Component {
 				}
 
 				component.warn_on_undefined_store_value_references(node, parent, scope);
+			},
 
+			leave(node) {
+				// do it on leave, to prevent infinite loop
 				if (component.compile_options.dev && component.compile_options.loopGuardTimeout > 0) {
-					const to_insert_for_loop_protect = component.loop_protect(node, prop, index, component.compile_options.loopGuardTimeout);
-					if (to_insert_for_loop_protect) {
-						if (!Array.isArray(parent[prop])) {
-							parent[prop] = {
-								type: 'BlockStatement',
-								body: [to_insert_for_loop_protect.node, node],
-							};
-						} else {
-							// can't insert directly, will screw up the index in the for-loop of estree-walker
-							if (!to_insert.has(parent)) {
-								to_insert.set(parent, []);
-							}
-							to_insert.get(parent).push(to_insert_for_loop_protect);
-						}
+					const to_replace_for_loop_protect = component.loop_protect(node, scope, component.compile_options.loopGuardTimeout);
+					if (to_replace_for_loop_protect) {
+						this.replace(to_replace_for_loop_protect);
+						scope_updated = true;
 					}
 				}
-			},
 
-			leave(node) {
 				if (map.has(node)) {
 					scope = scope.parent;
-				}
-				if (to_insert.has(node)) {
-					const nodes_to_insert = to_insert.get(node);
-					for (const { index, prop, node: node_to_insert } of nodes_to_insert.reverse()) {
-						node[prop].splice(index, 0, node_to_insert);
-					}
-					to_insert.delete(node);
-				}
+				}				
 			},
 		});
 
@@ -778,6 +762,12 @@ export default class Component {
 				}
 			}
 		}
+
+		if (scope_updated) {
+			const { scope, map } = create_scopes(script.content);
+			this.instance_scope = scope;
+			this.instance_scope_map = map;
+		}
 	}
 
 	track_references_and_mutations() {
@@ -849,15 +839,12 @@ export default class Component {
 		}
 	}
 
-	loop_protect(node, prop, index, timeout) {
+	loop_protect(node, scope: Scope, timeout: number): Node | null {
 		if (node.type === 'WhileStatement' ||
 			node.type === 'ForStatement' ||
 			node.type === 'DoWhileStatement') {
-			const guard = this.get_unique_name('guard');
-			this.add_var({
-				name: guard.name,
-				internal: true,
-			});
+			const guard = this.get_unique_name('guard', scope);
+			this.used_names.add(guard.name);
 
 			const before = b`const ${guard} = @loop_guard(${timeout})`;
 			const inside = b`${guard}();`;
@@ -870,7 +857,14 @@ export default class Component {
 				};
 			}
 			node.body.body.push(inside[0]);
-			return { index, prop, node: before[0] };
+
+			return {
+				type: 'BlockStatement',
+				body: [
+					before[0],
+					node,
+				],
+			};
 		}
 		return null;
 	}
@@ -1289,7 +1283,7 @@ export default class Component {
 
 		if (this.var_lookup.has(name) && !this.var_lookup.get(name).global) return;
 		if (template_scope && template_scope.names.has(name)) return;
-		if (globals.has(name)) return;
+		if (globals.has(name) && node.type !== 'InlineComponent') return;
 
 		let message = `'${name}' is not defined`;
 		if (!this.ast.instance)