From 61f6bead32ba20a4cdef824a37e263588fcd673f Mon Sep 17 00:00:00 2001 From: gtmnayan Date: Wed, 2 Aug 2023 14:17:45 +0545 Subject: [PATCH] fix: stale ctx for await block in slot --- packages/playground/fetch-repl.js | 24 ++++++++++++++++++ packages/playground/src/entry-client.js | 2 +- packages/playground/src/template.html | 1 + packages/playground/start.js | 25 ++++++++++++++++--- .../compile/render_dom/wrappers/AwaitBlock.js | 8 +++--- 5 files changed, 50 insertions(+), 10 deletions(-) create mode 100644 packages/playground/fetch-repl.js diff --git a/packages/playground/fetch-repl.js b/packages/playground/fetch-repl.js new file mode 100644 index 000000000..37fbb3f4c --- /dev/null +++ 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 or node fetch-repl.js + +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); +} diff --git a/packages/playground/src/entry-client.js b/packages/playground/src/entry-client.js index e62bbf2eb..f7077531e 100644 --- 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() { diff --git a/packages/playground/src/template.html b/packages/playground/src/template.html index 2cc688066..124646d11 100644 --- a/packages/playground/src/template.html +++ b/packages/playground/src/template.html @@ -8,6 +8,7 @@
+ diff --git a/packages/playground/start.js b/packages/playground/start.js index af37a40e2..ff9bb7467 100644 --- 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('', svelte.VERSION) + .replace('', '') + ); + 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('', html) + .replace('__HYDRATE__', !no_ssr) .replace('', svelte.VERSION) + .replace('', html) ); writeFileSync('dist/version.json', Date.now().toString()); } diff --git a/packages/svelte/src/compiler/compile/render_dom/wrappers/AwaitBlock.js b/packages/svelte/src/compiler/compile/render_dom/wrappers/AwaitBlock.js index 318adeeaa..c093d539c 100644 --- 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) {