Layouts not exists for svelte-spa-router? about svelte-spa-router HOT 6 OPEN

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 ```svelte <script> import Router from 'svelte-spa-router' import routes from './masterRoutes' </script> <Router {routes} /> <main> <h1>Main</h1> <slot /> </main> ``` ### masterRoutes.js ```js import publicRoutes from './publicRoutes.js'; //import adminRoutes from './adminRoutes.js'; console.log("Public Routes :", publicRoutes) export default [ ...publicRoutes, // ...adminRoutes, ]; ``` ### publicRoutes.js ```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

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: