Proper way to change a flag in a parent layout from a child page

[pasqui23]

I have the following files:

// src/routes/+layout.ts
const load :LayoutLoad = async({depend})=>{
  depend("n")
  return {n:true}
}
// src/routes/ex/+page.ts
const load :LayoutLoad = async()=>({n:false})

<!-- src/routes/+layout.svelte -->
<script lang=ts>
export let data: LayoutData
</script>
{JSON.stringify(data)}
<a href=/>root</a>
<a href=/ex>ex</a>
<slot/>
<!-- src/routes/+page.svelte -->
Something
<!-- src/routes/ex/+page.svelte -->
Something else
<script>
if(browser)onDestroy(()=>invalidate("n"))
</script>

The weird thing is that if I go to / n starts true, but if I navigate to /ex n becomes false and stays false even if I return to / until I do a page reload.

I want n to become true when returning to /. I have a workaround using writable, but it does not work without js.

[eltigerchino]

You could add another page load function for / to change n to false.

Conversely, your solution that only works with JS shouldn't be an issue. If the user has no JS, they will have a full page reload when navigating and will receive the correct value anyway

[pasqui23]

You could add another page load function for / to change n to false.

Can I have an example? How would the src/routes/+layout.ts look like?

[eltigerchino]

Perhaps something such as:

// routes/+layout.js
export const load = () => {
  return { n: true }
}

// routes/+page.js
export const load = () => {
  return { n: true }
}

// routes/ex/+page.js
export const load = () => {
  return { n: false }
}

This should ensure that

• /ex always returns n: false
• / always returns n: true
• all other pages return n: true and the layout load function does not need to re-run.

EDIT: See #8603 (reply in thread)

[pasqui23]

On 20/01/23 07:17, Tee Ming ***@***.***> wrote: Perhaps something such as: |// routes/+layout.js export const load = () => { return { n: true } } | |// routes/+page.js export const load = () => { return { n: true } } | |// routes/ex/+page.js export const load = () => { return { n: false } } | This should ensure that * |/ex| always returns |n: false| * |/| always returns |n: true| * all other pages return |n: true| and the layout load function does not need to re-run. — Reply to this email directly, view it on GitHub <#8603 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABU4KH2UBHJKNFMP2DCZRA3WTIUXDANCNFSM6AAAAAAUAOXM4M>. You are receiving this because you authored the thread.Message ID: ***@***.***>

The problem is that I have several pages and only /ex should have n=false

[eltigerchino]

Sorry about that. After thinking about your problem more, I figured there shouldn't be an issue with the way you have implemented it. There must be some other issue causing n not to return true.

Here's an example of how I got it working:
https://stackblitz.com/edit/sveltejs-kit-template-default-3uaj2o?terminal=dev

// routes/+layout.js
export const load = () => {
	return { n: true };
};

// routes/ex/+page.js
export const load = () => {
	return { n: false };
};

n: false should only apply to the /ex route since its load data should not be overwriting other pages

[pasqui23]

Weirdly in that stackbłits if I do export let data in +layout.svelte it gives me the erroneous behavoir but if I use $page.data it is correct?

[eltigerchino]

The +layout.svelte data only uses what is returned from the +layout.js load function (and not the data from the +page.js load function). While the pages themselves and page store use the combined output of the layout and page load functions.

Does this help with what you're trying to achieve?

This updated example compares the data values of +layout.svelte, +page.svelte, and the $page store.
https://stackblitz.com/edit/sveltejs-kit-template-default-uwyao7?file=src%2Froutes%2F%2Blayout.svelte&terminal=dev