Discriminated unions in signals

[Isaac-Leonard]

Does anyone know how to successfully use signals with discriminated unions?
I can make it work fine if I just use the value but if I want to pass the signal after type narrowing I get an error.
I understand that in the following code trying to use the SuccessScreen component doesn't work as the signal is able to update, and change the inner value while SuccessScreen is still rendered.
I also can't use a useComputed hook in each case of the switch statement as that breaks the rules of not using hooks in conditionals so I'm not sure what the best practice is.

import { Signal, signal } from "@preact/signals";
import { render } from "preact";

type Success = { type: "success"; data: string };
type Failure = { type: "error"; message: string };

type Result = Success | Failure;

const res = signal<Result>({ type: "success", data: "Hello world" });

const SuccessScreen = ({ signal }: { signal: Signal<Success> }) => {
  return <div>{signal.value.data}</div>;
};

export function App() {
  switch (res.value.type) {
    case "success":
      return <SuccessScreen signal={res} />;
    case "error":
      return <div>{res.value.message}</div>;
  }
}

render(<App />, document.getElementById("app"));

This code will demonstrate the behaviour I'm talking about with a minimal preact app with vite and typescript.
My actual use case is trying to run a large app off of signals with each screens data being held in a top level signal and trying to use a discriminated union in that signal to determine which screen should render without rerendering the app when everything changes.
I know I could build out computed signals for each screen that just return null if the relavent screen doesn't match but then I lose the exhaustative checking for each branch in the switch statement.

[rschristian]

I think this an inherent issue in the TS type system that isn't likely to be resolved anytime soon; Solid has ran up against it quite a bit from what I've seen. Relevant thread here.

I think you're going to need to make do w/ guards and/or assertions.

[Isaac-Leonard]

Would it be possible to make some sort of conditional computed signal?

[rschristian]

Not in a component, but that's not really what you want to do anyhow. A computed signal needs to react to another signal -- conditionally declaring that would break the flow in most cases. I don't see how it would help you.

You can, however, wrap the switch in a useComputed -- it wouldn't fix your type issues, but avoids rerunning the entire component on change.