SolidJS•11mo ago

Solid-Router: "named views" equivalent?

What would be the solid-router equivalent of vue-routers "named views"? https://router.vuejs.org/guide/essentials/named-views

{
  path: '/',
  component: MainLayout,
  children: [
    {
      path: 'home',
      components: {
        default: Home,
        sideBar: DefaultSideBar
     ,
    {
      path: 'store',
      components: {
        default: Store,
        sideBar: StoreSideBar
      }
    }
  ]
}

{
  path: '/',
  component: MainLayout,
  children: [
    {
      path: 'home',
      components: {
        default: Home,
        sideBar: DefaultSideBar
     ,
    {
      path: 'store',
      components: {
        default: Store,
        sideBar: StoreSideBar
      }
    }
  ]
}

Found this, but idk that i want to use a 2 year abandoned repo https://github.com/SupertigerDev/solid-named-router

14 Replies

haluOP•11mo ago

Component Router: https://playground.solidjs.com/anonymous/43e248e2-bb85-4639-aa99-57ac462f0335

Solid Playground

Quickly discover what the solid compiler will generate from your JSX template

haluOP•11mo ago

Config Router: https://playground.solidjs.com/anonymous/6d96feac-4a0b-4e64-803a-41e3ecbe8344

Solid Playground

Quickly discover what the solid compiler will generate from your JSX template

haluOP•11mo ago

I just dont know how well things like this would work with lazy()

haluOP•11mo ago

These ones are just kind of funny: ignore: https://playground.solidjs.com/anonymous/68e94d2b-ad29-4c8c-b2da-902253ce9a4b

Solid Playground

Quickly discover what the solid compiler will generate from your JSX template

haluOP•11mo ago

Pass obj through children: https://playground.solidjs.com/anonymous/5f0a86fd-6cd1-45f1-923b-7886355d9fbb Memo'd: https://playground.solidjs.com/anonymous/62811b2e-e96e-4cf1-a201-b5268fb59e24

Solid Playground

Quickly discover what the solid compiler will generate from your JSX template

Solid Playground

Quickly discover what the solid compiler will generate from your JSX template

haluOP•11mo ago

they do work tho idk, I'm open to suggestions

mdynnl•11mo ago

the first two is really close, you want to render the component instead <views.sideBar {...props} /> ~~but this will rerender all views, you need to store views state and render them instead~~

haluOP•11mo ago

wait, I was under the assumption it would fully re-render as well, does it not? i went for the last option cuz I thought that way would persist the layout between routes, while the first two would not. Then I was thinking I might memoize the sub-views to only update unique view changes.

mdynnl•11mo ago

yes, it does. i wasn't sure about the latter i did manage to do it but not really confident about the context/owner tree

haluOP•11mo ago

Load Signal: https://playground.solidjs.com/anonymous/c35221c4-c573-477d-8c1a-0c92a51970ed

Solid Playground

Quickly discover what the solid compiler will generate from your JSX template

haluOP•11mo ago

@Osman, sounds like we're doing something similar based on ur message here: https://discord.com/channels/722131463138705510/910635844119982080/1210898266758320148 have you found any pattern you like?

haluOP•11mo ago

Memo'd ? https://playground.solidjs.com/anonymous/995c2477-c380-400b-80e8-77ab34406ed3

Solid Playground

Quickly discover what the solid compiler will generate from your JSX template