Proposal for changes to API

This is a proposal for changes to the user facing API of Radi. It’s just a proposal, take it with a grain of salt.

• Add support for extending Radi’s Component class rather than only being able to use component, eg:

class Counter extends Radi.Component {
  view() {
    return <h1>Foo</h1>
  }
}

• Reuse the npm prop-types package to provide a type checking system for props.
• Add a map callback to Listener, which would be a shortcut for mapping arrays, but it would also enable for more efficient list rendering in the future.
• Separate actions, mixins, props and state. So not this.foo but this.state.foo.
• Provide shortcuts to the l function. Pass a state and props function to view so that you can do state('foo') rather than l(component, 'state', 'foo'). Only makes sense if the point above is applied.

Let me know what you think! 😄

[harry-sm]

My shallow proposal is purely syntactic sugar. Use decorators.

@Component()
class TestComponent {
  view() { return <h1>Foo Bar</h1>; }
}

The Action decorator is just for labeling.

@Component()
class TestComponent {
  view() { return <button onClick={this.someAction}>Click Me</button>; }

  @Action()
  someAction() { alert("I was clicked!"); }
}

[jpitchardu]

So as a Summary

Issue Summary

Component Declaration

Extending Radi.Component

class TestComponent extends Radi.Component {
  view() {
    //...
  }

  state() {
    //...
  }
}

Using @Component decorator

@Component
class TestComponent {
  view() {
    // ...
  }

  @State
  state() {
    return { foo: "Foo" };
  }
}

State in the view

Having this.state.prop be listeners

  view(){
      <div>{this.state.foo}</div>
  }

Injecting a state function to the view

  view(state){
      <div>{state('foo')}</div>
  }

Injecting a state function to the view and use selectors

  view(state){
      <div>{state(snapshot => snapshot.foo)}</div>
  }

Using a listen function withing the component

  view() {
      <div>{this.listenState('foo')}</div>
  }

Remaining concerns

• Typescript support
• Immutable state

Am I missing something?