choojs / nanocomponent-adapters

🔌 - Convert a nanocomponent to a component for your favourite API or library (web components, (p)react, angular)
MIT License
96 stars 17 forks source link

Does the React adaptor work? #10

Closed joshgillies closed 6 years ago

joshgillies commented 7 years ago

Tried pairing the counter example from https://facebook.github.io/react/ with the react adaptor and am getting the following errors as a result:

Uncaught TypeError: element is not a function

Is there something I've missed?

Note: the following is the code I'm testing against.

var toReact = require('nanocomponent-adapters/react')
var component = require('nanocomponent')
var ReactDOM = require('react-dom')
var React = require('react')
var html = require('bel')

var Span = component({
  render: function (data) {
    return html`
      <span>${data.elapsed}</span>
    `
  }
})

Span = toReact(Span, React)

class Timer extends React.Component {
  constructor(props) {
    super(props);
    this.state = {secondsElapsed: 0};
  }

  tick() {
    this.setState((prevState) => ({
      secondsElapsed: prevState.secondsElapsed + 1
    }));
  }

  componentDidMount() {
    this.interval = setInterval(() => this.tick(), 1000);
  }

  componentWillUnmount() {
    clearInterval(this.interval);
  }

  render() {
    return (
      <div>Seconds Elapsed: <Span elapsed={this.state.secondsElapsed} /></div>
    );
  }
}

ReactDOM.render(<Timer />, document.body);

Ref: https://github.com/yoshuawuyts/nanocomponent/issues/15

goto-bus-stop commented 6 years ago

should work as of 3.0.0. thanks!