SolidJS•2y ago

How to keep/reuse DOM elements across routes?

So, when using solid-start with routes, what is the most idiosyncratic way of keeping one element of the DOM the same, while the user changes pages? I.e. like youtube or spotify, where one element in the DOM is the <audio>/<video> that stays on screen no matter which page I load

9 Replies

Unknown User•2y ago

Message Not Public

BersaelorOP•2y ago

thank you, I will look into that. I hadn't seen it yet / read over it since it looked more like an internal feature

Unknown User•2y ago

Message Not Public

Tommypop•2y ago

Hi, if you want the element to retain state and stay in mostly the same place, you can use the <Outlet /> component in solid start, where you make a file shadowing a directory containing the component that you want to share, and the Outlet component, which is where all child routes will be rendered: https://start.solidjs.com/api/Outlet

SolidStart Beta Docuentation

SolidStart Beta Documentation

Early release documentation and resources for SolidStart Beta

BersaelorOP•2y ago

Mhmm, so the outlet is a placeholder where all the children in a directory sit, like they say for path site.com/users you would have routes/users.tsx:

    <div>
      <h1> We love our users! </h1>
      <Outlet/>. // <- here is where the child page is rendered
      <A href="/">Back Home</A>
    </div>z

    <div>
      <h1> We love our users! </h1>
      <Outlet/>. // <- here is where the child page is rendered
      <A href="/">Back Home</A>
    </div>z

In my case it seems like my player-component will be rendered across all paths, so I'm doing: [root.tsx]

        <Grid container spacing={2}>
          <Grid item xs={12} md={4}>
            <MainPlayer />
          </Grid>
          <Grid item xs={12} md={8}>
            <Routes>
              <FileRoutes />
            </Routes>
          </Grid>
        </Grid>

        <Grid container spacing={2}>
          <Grid item xs={12} md={4}>
            <MainPlayer />
          </Grid>
          <Grid item xs={12} md={8}>
            <Routes>
              <FileRoutes />
            </Routes>
          </Grid>
        </Grid>

It feels a little like I'm abusing root.tsx ? But maybe I don't need Outlet at all? Mhmm, After working on it for a while, I don't think Outlet fits the bill, since it renders the whole path under the element. In my case the element is a small widget like player, that is presented in different spots of the larger UI depending on the route.

Tommypop•2y ago

Huh, and you want to use the exact same DOM nodes even when the route changes?

BersaelorOP•2y ago

well, the player may be playing an audio file, so it should continue doing that while the user browses the site like spotify or music.youtube.com where the playe rwidget is always somehwere

Tommypop•2y ago

Maybe you could have it "floating", where only the css changes between routes, but that's probably not ideal the createRoot solution looks like the best bet

BersaelorOP•2y ago

mhmm yeah, I do change the css for responsive mode, i.e. when the screen gets small it floats above content on the bottom. When screen is big it's included in the normal UI So in #general @fabiospampinato pointed out I could do

const Player = createRoot ( dispose => {
  return <WidgetPlayer />;
});

const Player = createRoot ( dispose => {
  return <WidgetPlayer />;
});

And then export that player and import it everywhere where it's needed like so

const MyComponent = () => (
  <div>
    {Player}
  </div>
);

const MyComponent = () => (
  <div>
    {Player}
  </div>
);

Gaming

Programming

How to keep/reuse DOM elements across routes?