fix: stale ctx for await block in slot

11 months ago · 61f6bead32
parent abf257306b
commit 61f6bead32
5 changed files with 50 additions and 10 deletions
--- a/packages/playground/fetch-repl.js
+++ b/packages/playground/fetch-repl.js
@ -0,0 +1,24 @@
+// Fetch a REPL from svelte.dev and write the files to the src/ directory
+// Usage: node fetch-repl.js <id> or node fetch-repl.js <url>
+
+import { writeFileSync } from 'fs';
+const id = process.argv[2];
+
+if (!id) {
+	throw new Error('Missing id');
+}
+
+let json_url = `https://svelte.dev/repl/api/${id}.json`;
+
+try {
+	const tmp = new URL(id);
+	tmp.pathname = tmp.pathname.replace(/\/repl/, '/repl/api');
+	tmp.pathname += '.json';
+	json_url = tmp.href;
+} catch {}
+
+const repl_data = await fetch(json_url).then((r) => r.json());
+
+for (const component of repl_data.components) {
+	writeFileSync(`src/${component.name}.${component.type}`, component.source);
+}
--- a/packages/playground/src/entry-client.js
+++ b/packages/playground/src/entry-client.js
@ -2,7 +2,7 @@ import App from './App.svelte';

 new App({
 	target: document.getElementById('app'),
-	hydrate: true
+	hydrate: globalThis.__playground_hydrate,
 });

 function get_version() {
--- a/packages/playground/src/template.html
+++ b/packages/playground/src/template.html
@ -8,6 +8,7 @@
 	</head>
 	<body>
 		<div id="app"><!--app-html--></div>
+		<script>globalThis.__playground_hydrate = __HYDRATE__</script>
 		<script type="module" src="/entry-client.js"></script>
 	</body>
 </html>
--- a/packages/playground/start.js
+++ b/packages/playground/start.js
@ -6,6 +6,7 @@ import serve from 'rollup-plugin-serve';
 import * as svelte from '../svelte/src/compiler/index.js';

 const __dirname = fileURLToPath(new URL('.', import.meta.url));
+const no_ssr = process.argv.includes('--no-ssr');

 /** @returns {import('rollup').Plugin}*/
 function create_plugin(ssr = false) {
@ -34,7 +35,7 @@ function create_plugin(ssr = false) {
 			const compiled = svelte.compile(code, {
 				filename: id,
 				generate: ssr ? 'ssr' : 'dom',
-				hydratable: true,
+				hydratable: !no_ssr,
 				css: 'injected'
 			});

@ -54,9 +55,24 @@ const watcher = watch([
 			format: 'esm',
 			sourcemap: true
 		},
-		plugins: [client_plugin, serve('dist')]
+		plugins: [
+			client_plugin,
+			{
+				async generateBundle(_, bundle) {
+					writeFileSync(
+						'dist/index.html',
+						readFileSync('src/template.html', 'utf-8')
+							.replace('__HYDRATE__', !no_ssr)
+							.replace('<!--app-title-->', svelte.VERSION)
+							.replace('<!--app-html-->', '')
+					);
+					writeFileSync('dist/version.json', Date.now().toString());
+				}
+			},
+			serve('dist')
+		]
 	},
-	{
+	!no_ssr && {
 		input: 'src/entry-server.js',
 		output: {
 			dir: 'dist-ssr',
@ -74,8 +90,9 @@ const watcher = watch([
 					writeFileSync(
 						'dist/index.html',
 						readFileSync('src/template.html', 'utf-8')
-							.replace('<!--app-html-->', html)
+							.replace('__HYDRATE__', !no_ssr)
 							.replace('<!--app-title-->', svelte.VERSION)
+							.replace('<!--app-html-->', html)
 					);
 					writeFileSync('dist/version.json', Date.now().toString());
 				}
--- a/packages/svelte/src/compiler/compile/render_dom/wrappers/AwaitBlock.js
+++ b/packages/svelte/src/compiler/compile/render_dom/wrappers/AwaitBlock.js
@ -260,13 +260,12 @@ export default class AwaitBlockWrapper extends Wrapper {
 			block.chunks.intro.push(b`@transition_in(${info}.block);`);
 		}
 		const dependencies = this.node.expression.dynamic_dependencies();
-		const update_await_block_branch = b`@update_await_block_branch(${info}, #ctx, #dirty)`;
+		const update_await_block_branch = b`@update_await_block_branch(${info}, ${info}.ctx = #ctx, #dirty)`;
 		if (dependencies.length > 0) {
 			const condition = x`
 				${block.renderer.dirty(dependencies)} &&
 				${promise} !== (${promise} = ${snippet}) &&
 				@handle_promise(${promise}, ${info})`;
-			block.chunks.update.push(b`${info}.ctx = #ctx;`);
 			if (this.pending.block.has_update_method) {
 				block.chunks.update.push(b`
 					if (${condition}) {
@ -281,10 +280,9 @@ export default class AwaitBlockWrapper extends Wrapper {
 				`);
 			}
 		} else {
+			// TODO: Why is this specific to pending?
 			if (this.pending.block.has_update_method) {
-				block.chunks.update.push(b`
-					${update_await_block_branch}
-				`);
+				block.chunks.update.push(update_await_block_branch);
 			}
 		}
 		if (this.pending.block.has_outro_method) {