diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/TitleElement.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/TitleElement.js index e6f4202a01..7751c810d5 100644 --- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/TitleElement.js +++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/TitleElement.js @@ -13,7 +13,7 @@ export function TitleElement(node, context) { context ); - const statement = b.stmt(b.assignment('=', b.id('$.document.title'), value)); + const statement = b.stmt(b.call('$.title', value)); if (has_state) { context.state.update.push(statement); diff --git a/packages/svelte/src/internal/client/dom/elements/misc.js b/packages/svelte/src/internal/client/dom/elements/misc.js index 61e513903f..b102168377 100644 --- a/packages/svelte/src/internal/client/dom/elements/misc.js +++ b/packages/svelte/src/internal/client/dom/elements/misc.js @@ -1,3 +1,4 @@ +import { render_effect } from '../../reactivity/effects.js'; import { hydrating } from '../hydration.js'; import { clear_text_content, get_first_child } from '../operations.js'; import { queue_micro_task } from '../task.js'; @@ -56,3 +57,17 @@ export function add_form_reset_listener() { ); } } + +/** + * @param {string} text + */ +export function title(text) { + render_effect(() => { + const previous = document.title; + document.title = text; + + return () => { + document.title = previous; + }; + }); +} diff --git a/packages/svelte/src/internal/client/index.js b/packages/svelte/src/internal/client/index.js index c5b7bb845c..d785a9899b 100644 --- a/packages/svelte/src/internal/client/index.js +++ b/packages/svelte/src/internal/client/index.js @@ -42,7 +42,7 @@ export { } from './dom/elements/attributes.js'; export { set_class } from './dom/elements/class.js'; export { apply, event, delegate, replay_events } from './dom/elements/events.js'; -export { autofocus, remove_textarea_child } from './dom/elements/misc.js'; +export { autofocus, remove_textarea_child, title } from './dom/elements/misc.js'; export { set_style } from './dom/elements/style.js'; export { animation, transition } from './dom/elements/transitions.js'; export { bind_active_element } from './dom/elements/bindings/document.js'; diff --git a/packages/svelte/tests/runtime-runes/samples/if-dependency-order-2/_config.js b/packages/svelte/tests/runtime-runes/samples/if-dependency-order-2/_config.js index 83b58d0f7b..08c54ee100 100644 --- a/packages/svelte/tests/runtime-runes/samples/if-dependency-order-2/_config.js +++ b/packages/svelte/tests/runtime-runes/samples/if-dependency-order-2/_config.js @@ -5,7 +5,7 @@ export default test({ async test({ assert, target, window }) { const [btn1] = target.querySelectorAll('button'); - assert.htmlEqual(window.document.head.innerHTML, ``); + assert.htmlEqual(window.document.head.innerHTML, `initial`); flushSync(() => { btn1.click(); @@ -17,6 +17,6 @@ export default test({ btn1.click(); }); - assert.htmlEqual(window.document.head.innerHTML, `hello world`); + assert.htmlEqual(window.document.head.innerHTML, `initial`); } }); diff --git a/packages/svelte/tests/runtime-runes/samples/if-dependency-order-2/main.svelte b/packages/svelte/tests/runtime-runes/samples/if-dependency-order-2/main.svelte index 188762cdd5..4227fc932d 100644 --- a/packages/svelte/tests/runtime-runes/samples/if-dependency-order-2/main.svelte +++ b/packages/svelte/tests/runtime-runes/samples/if-dependency-order-2/main.svelte @@ -8,6 +8,10 @@ } + + initial + +