Layouts not exists for svelte-spa-router?

[VanRoberMore]

Can't you use layouts directly in routes? Components also have problems with wrap() routes. I couldn't find a single mention of layouts in the documentation.

[ItalyPaleAle]

Could you give an example of what you'd like to do?

[VanRoberMore]

Hello

My idea of routing is very much influenced by NodeJS Express and the possibility of stacking middlewares - using EJS. Apart from the fact that I'm not a very experienced developer, I've never worked with a SPA.

The application I'm working on will need to have a lot of layouts - because it serves several specialties, but maintains a set of common components and therefore needs to migrate from EJS to SPA.

The best solution I could think of was to have a "hub" of routes - masterRoutes.js (I could do it with nested routes ???) and import other sets of routes into this file according to the module and layout needed ( publicRoutes.js, accountsRoutes.js, etc) so that I can have a SPA, a PWA and an internal application using the same structure - the API already supports it. The closest I got to making it work was like this (it's just a code base for you to understand my problem)

App.svelte

<script>
    import Router from 'svelte-spa-router'
    import routes from './masterRoutes'

 </script>

<Router {routes} />

<main>
    <h1>Main</h1>
    <slot />
</main>

masterRoutes.js

import publicRoutes from './publicRoutes.js';
//import adminRoutes from './adminRoutes.js';

console.log("Public Routes :", publicRoutes)

export default [
  ...publicRoutes,
//  ...adminRoutes,

];

publicRoutes.js

import { wrap } from 'svelte-spa-router/wrap'

import MainLayout from './layouts/MainLayout.svelte';
//import Home from './pages/Home.svelte';
//import Login from '../auth/Login.svelte';
//import Register from '../auth/Register.svelte';
import NotFound from './pages/NotFound.svelte'

export default [
  {
    '/': wrap({
      asyncComponent: () => import('./pages/Home.svelte'),
      layout: MainLayout // ?????
    })
  },
  {
    '*': wrap({
      component: NotFound,
      layout: MainLayout, // ?????
    })
  }
]

console.log(routes):

   1. 0:
      1. /:
         1. component: () => Promise.resolve().then(function () { return
         Home$1; })
         2. conditions: undefined
         3. props: {}
         4. userData: undefined
         5. _sveltesparouter: true
         6. [[Prototype]]: Object
      2. [[Prototype]]: Object

errors:

browser:
Uncaught Error: Invalid component object
    at new RouteItem (Router.svelte:298:19)
    at Router.svelte:427:29
    at Array.forEach (<anonymous>)
    at instance$6 (Router.svelte:426:25)
    at init (index.mjs:2165:11)
    at new Router (Router.svelte:450:70)
    at create_fragment$1 (masterRoutes.js:10:2)
    at init (index.mjs:2180:37)
    at new App (App.svelte:7:36)
    at main.js:3:13

I've analyzed the RouteItem {} class and others, and I've tried various solutions, but I always come up against the question of how to manipulate and pass on the layouts to App.svelte (apart from the components, which, according to their structure, don't load either). In masterRoutes I've tried various solutions, but many come up against the fact that you have to use ESM. I tried something with function prototyping, it worked for layouts, but it was a strange solution with side effects

thks

[ItalyPaleAle]

I think what you may be looking for is nested routers. I wouldn't use slots here, just routers nested into each other!

https://github.com/ItalyPaleAle/svelte-spa-router/blob/main/Advanced%20Usage.md#nested-routers

[VanRoberMore]

Yes, I've studied the documentation a lot, among other things, and indeed nested routes solve most component problems, but there's still no possibility of using layouts, is there? If there is, and it's not an abuse on my part, could you give me a code example?

Thanks

Em sáb., 13 de abr. de 2024 21:18, Alessandro (Ale) Segala < @.***> escreveu:

I think what you may be looking for is nested routers. I wouldn't use slots here, just routers nested into each other!

https://github.com/ItalyPaleAle/svelte-spa-router/blob/main/Advanced%20Usage.md#nested-routers

— Reply to this email directly, view it on GitHub https://github.com/ItalyPaleAle/svelte-spa-router/issues/321#issuecomment-2053814415, or unsubscribe https://github.com/notifications/unsubscribe-auth/ALP2X2NB5CCLE6E6AHFJBH3Y5HDLVAVCNFSM6AAAAABGFDPCO6VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDANJTHAYTINBRGU . You are receiving this because you authored the thread.Message ID: @.***>

[ItalyPaleAle]

I am not familiar with the concept of layouts, sorry

[carbogninalberto]

@VanRoberMore something like this: https://svelte.dev/repl/521a64b02b0b4839bfcc79a4e641471d?version=4.2.14 ?