Add <Offscreen>

[lxsmnsyc]

<Offscreen> is a component that allows switching between two branched UIs. <Show> allows switching between two UI states however both possible states aren't branched/concurrently-rendered nor do they have concurrent lifecycles. <Suspense> allows branched rendering but the lifecycle is only retained for the main UI and not the fallback UI.

<Offscreen> is the cross between <Show> and <Suspense> such that a condition can control with UI can be shown, while also rendering both UIs concurrently. Unlike <Suspense>, <Offscreen> can retain the lifecycle of the hidden UI, making the two possible UI states "equal".

Ideal use case for <Offscreen> includes Disclosure, Modal, Dropdown and Tab components where the hidden UI can retain their lifecycles while being hidden.

Issues:

• Better alternative names?
• Should the hidden UI opt-out of reactive re-evaluation? or give the option to be able to opt-in/out of the behavior?
• Should <Offscreen> support more than two UI slots?

Theoretical examples:

<Offscreen when={cond()} other={<SomeOtherUI />}>
  <SomeUI />
</Offscreen>

Possible better name?

<Concurrent>
  <Branch when={cond()}>
    <SomeUI />
  </Branch>
  <Branch when={!cond()}>
    <SomeOtherUI />
  </Branch>
</Concurrent>

[fabiospampinato]

Maybe there should just be some kind of Offscreen component and then components that have branches could expose an additional prop for turning on concurrency, like <Show concurrent />, and <Switch concurrent />.

Edit: I guess making Show in particular concurrent doesn't make too much sense.

[ryansolid]

What is the difference between this and just having detached nodes still live? I understood Transitions because well we need to stop from apply certain changes until we reach async consistency. This feels a bit like just keeping stuff around.. is it inert? Because we could just maintain 2 roots and only attach one and call it a day in the simple case.

[lxsmnsyc]

What is the difference between this and just having detached nodes still live?

This keeps the concept declarative, easier to compose and write

I understood Transitions because well we need to stop from apply certain changes until we reach async consistency.

I genuinely think that this doesn't have to be affected by Transitions as much as Suspense

is it inert? Because we could just maintain 2 roots and only attach one and call it a day in the simple case.

Can be? Arguably it depends on the scenario, but it would be helpful to have that kind of option.

[fabiospampinato]

From my point of view Offscreen would largely be a way to expose an API for pausing effects, if effects are not paused in Offscreen I don't really see a point in it.

[timothyallan]

re: naming. I immediately thought this was going to be some sort of interface for using an offscreen canvas: https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas

Do I have a better naming suggestion however? Nope.

[atk]

What's the main improvement over hidden={!condition()}? Keeping the nodes in the DOM might even be beneficial, e.g. for WebRTC streams connected to video tags, which otherwise may stall, which can lead to frame drops.

[fabiospampinato]

Depending on how it's implemented Offscreen could be able to pause effects inside it, which one can't do with CSS. If Offscreen doesn't have that capability indeed I don't really see the point of it.

[lxsmnsyc]

That assumes SolidJS only renders DOM nodes