Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

One App-Wide Layout and Load Function #2436

Closed
lemmon opened this issue Sep 16, 2021 · 2 comments
Closed

One App-Wide Layout and Load Function #2436

lemmon opened this issue Sep 16, 2021 · 2 comments

Comments

@lemmon
Copy link

lemmon commented Sep 16, 2021

Describe the problem

I am trying to load data only once per application instance. Just before the app is initialized. Current infrastructure suggests that I put this logic in the load funciton in the main __layout.svelte. However, it's not ideal when I mix per-layout data and per-app data within one load function. Another issue occures when I am going back and forth beween some __layout and __layout.reset. Those per-app data get loaded again.

Another problem is when I want to keep some components even when I use layout.reset. Notifications component, for example, which stays mounted even when I reset the parent layout.

Describe the proposed solution

I suggest creating one more file [maybe] called __app.svelte which will follow the same logic as __layout.svelte but it will be available only once per app. Either src/app.svelte or src/routes/__app.svelte.

It will sit above all the layouts. Example:

<script context="module">
export async function load() {
  // load per-application data
}
</script>

<script>
import '../css/index.css' // import global css stylesheet
import { navigating } from '$app/stores' // create app-wide preloader
import Toaster from '$lib/Toaster.svelte' // app-wide toaster component
import Modal from '$lib/Modal.svelte' // modal component

function width() {
  return {
    duration: 400,
    css: (t) => {
      return `width: ${t * 100}%;`
    },
  }
}
</script>

{#if $navigating}
  <div class="n" in:width />
{/if}
<Toaster />
<slot />
<Modal />

<style>
.n {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 2px;
  background-color: var(--blue);
}
</style>

Alternatives considered

Using root-level __layout, however breakes when some __layout.reset is accessed.

Importance

would make my life easier

Additional Information

No response

@rmunn
Copy link
Contributor

rmunn commented Sep 17, 2021

This seems like it's mostly a duplicate of #1165 and #2169, though one part of this request isn't a duplicate:

Another problem is when I want to keep some components even when I use layout.reset. Notifications component, for example, which stays mounted even when I reset the parent layout.

This part of the request is something I haven't seen in any other feature request, to the best of my knowledge.

@mrkishi
Copy link
Member

mrkishi commented Apr 4, 2022

This is now possible with (rather advanced, don't freak out) usage of named layouts:

/src/routes/
  /__layout-app.svelte             # your app-wide layout, holds components and `load()`ed data
  /__layout@app.svelte             # your default layout, goes inside app-wide layout `/__layout-app.svelte`
  /__layout-reset@app.svelte       # an empty <slot/> layout, goes inside app-wide layout `/__layout-app.svelte`
  /some/regular/page.svelte        # goes inside layout `/__layout@app.svelte`
  /some/random/page@reset.svelte   # goes inside reset layout `/__layout-reset@app.svelte`

@mrkishi mrkishi closed this as completed Apr 4, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants