Exploring JSX with Effect and Custom Parsers

const Foo = () => Effect.gen(function*(){
  const service = yield* FooService(); // Dependency injection
  const whatever = yield* service.whatever;
  const something = yield* service.something;

  if(!whatever){
    return yield* new SomeError();
  }

  if(!something){
    return yield* new SomeCriticalError();
  }
  
  return <Bar onClick={service.foo} />
});

const Foo = () => Effect.gen(function*(){
  const service = yield* FooService(); // Dependency injection
  const whatever = yield* service.whatever;
  const something = yield* service.something;

  if(!whatever){
    return yield* new SomeError();
  }

  if(!something){
    return yield* new SomeCriticalError();
  }
  
  return <Bar onClick={service.foo} />
});

const Bar = () => Effect.gen(function*(){
  return(
    <Foo
      pipe={Effect.catchErrorTag('SomeError', () => <SomeFallback />)}
    />
});

const Bar = () => Effect.gen(function*(){
  return(
    <Foo
      pipe={Effect.catchErrorTag('SomeError', () => <SomeFallback />)}
    />
});

renderEffect(
  <Bar
    pipe={
      Effect.catchAll(() => <UnexpectedError />),
      Effect.provideService(FooService, FooService.Live)
    }
  />
);

renderEffect(
  <Bar
    pipe={
      Effect.catchAll(() => <UnexpectedError />),
      Effect.provideService(FooService, FooService.Live)
    }
  />
);