Proposal: Avoid Logic in template

[GregOnNet]

Motivation

JSX templates can be hard to read easily, when logic is added.

<button                                          
   onClick$={() => {                              
     const nextVideoIndex =                       
       state.index + 1 >= props.videos.length     
         ? props.videos.length - 1                
         : state.index + 1;                       
                                                  
     state.video = props.videos[nextVideoIndex];  
     state.index = nextVideoIndex;                
   }}>
  Next Video
</button>                                           

Proposal

We can encourage developers to extract logic into self-descriptive functions.
This implicitly adds documentation due to function-naming + the template's complexity decreases.

<button onClick$={() => showNextVideo$()}>Next Video</button>