Main.js

[24jr]

Describe the problem

Other things like vue.js have a main.js where you put overarching single time imports for app. I can't for the life of me figure out the recommended equivalent. I tried asking in discord and get ignored. I try using __layout script because in all elements but i notice it remounts on new route views

Describe the proposed solution

Only run __layout once and on route views only run the rest of stuff but only have one initial load of __layout

Alternatives considered

Trying some kind of let hasMounted = false in store or something and on mount of layout check if hasMounted already before doing something

Importance

would make my life easier

Additional Information

No response

[Mlocik97]

You can simply import libraries anywhere You need, and if they are already imported, then it will not be downloaded again to client-side (onMount will be triggered, but import will be done from cache instead of Internet),... There is issue about how load and onMount runs in __layout, but I think, Your proposed solutions are not good, and alternative would be too confusing and unnecesary complicated. About import, it's easy to solve, just put Your imports in if (browser) or use load functions and pass them as props (load function can be run just once already), this will work in nearly every case, ofc, there are problems with libs that self execute and use window or document objects, but those can be solved too, Vite for example let You use ?client query for static import. As kit use hydratation and ssr, I don't see reason why it would redownload lib at every route change. Also downloading libraries in main.js this way would mean it would need to be put to globals, and we don't want that, as it can create more problems than it solve.

You can write me about Your problem on discord.

[Conduitry]

#1530 and #2169 already exist for trying to solve this problem in a different way. Closing this one.

[24jr]

@Mlocik97 ok thank you I will experiment with the if(browser) and onload functions. I suppose I'll just give my full confusions at moment even if multiple questions put together.

First kept having issues trying to use aws amplify in svelte and thought was aws amplify issue but anyway ended up adding a script to index.html that worked aws-amplify/amplify-cli#8050

So I import that in __layout.svelte as such. I just added context="module" because I think that makes sense for layout anyway cause only is one layout but let me know if should remove. Also maybe this is where i should use onload and put Amplify.configure(awsconfig); in it

<script context="module">
  import "../app.css";
  import Layout from "$lib/Layout/index.svelte";
  import Amplify from "aws-amplify";
  import awsconfig from "$lib/aws-exports";
  Amplify.configure(awsconfig);
  console.log("111");
</script>

<Layout>
  <slot />
</Layout>

Side note (can you not make a route like index / index.svelte with folder like other routes? Was doing Layout component to put all Layout files in a place. Anyway then have Layout folder like this

<script>
  import NavBar from "./NavBar/index.svelte";
  import AppNavBar from "./AppNavBar/index.svelte";
  import AuthModal from "./AuthModal/index.svelte";
  import { screenWidth, screenHeight, isApp, isAllNavBarHidden } from "./store";
  import { initAuth } from "$lib/components/AuthFlow/store";
  initAuth();

  import { onMount } from "svelte";
  onMount(() => {
    console.log("Layout Mounted");
  });
</script>

<svelte:window
  bind:innerWidth={$screenWidth}
  bind:innerHeight={$screenHeight}
/>

<div class="container">
  {#if $isApp}
    <div class="fillScreen">
      <slot />
    </div>
    <AppNavBar />
  {:else}
    <NavBar />
    <div class="fillScreen"><slot /></div>
  {/if}
  <AuthModal />
</div>

<style>
  .container {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
  }
  .fillScreen {
    display: flex;
    flex-direction: column;
    flex: 1;
  }
</style>

So key visible issue I'm having with this is the because I have code to trigger modal from anywhere by just adding number to a store value and as long as value is over initial value it opens the modal. So when I start the first load its fine and say I'm on settings page and hit sign in on navbar it increments openModalWatch and triggers the open. Then if I clicked a new route because it was remounting or instantiating whatever word is the layout again it would rerun $: if (openModalWatch > 1) and open the auth modal again and also sometimes give error like "could not destroy element" or something I forget exact words.

Actually I think it works fine when I run fresh npm run dev. but. after some saves of stuff it doesnt work correctly as described above. Maybe I do have my setup good and in prod will be fine. Idk let me know if this setup seems good or if you have any pointers. Thanks!

  export let closeModalWatch = 1;
  export let openModalWatch = 1;

  $: if (closeModalWatch > 1) {
    closeModal();
  }

  $: if (openModalWatch > 1) {
    console.log("open modal", openModalWatch);
    openModal();
  }