elbywan/hyperactiv

Computed with React not working

Closed this issue · 3 comments

fabiofranzini commented

Hi, congratulations for the project, super compact and super powerful.
I tried the integration with React and it works very well apart from the "Computed" part. I tried to create a computed property but I can't get it to work. It is not updated when the properties of the Observable object are changed.

Do you have any examples of use with React?
Thanks and great work again.

elbywan commented

Hey @fabiofranzini,

Hi, congratulations for the project, super compact and super powerful.

Thanks! ❤️

I tried to create a computed property but I can't get it to work. It is not updated when the properties of the Observable object are changed.

Did you wrap your component with watch()? Without the wrapper hyperactiv won't be able to register the component as a dependency of the store and re-render it.

Do you have any examples of use with React?

I made a tiny fiddle and you could also check the more detailed example from the hyperactiv/react readme.

I hope this will help!

elbywan commented

Actually, I re-read the issue and realized that you were specifically asking about computed 🤦. So please ignore my post above.

I don't think that it is possible to use computed with hyperactiv/react since it does not export it. (but it should be trivial to add)

Could you please post some code sample of what you are trying to achieve so I could understand the use case a bit more?

Thanks!

elbywan commented

Do you have any examples of use with React?

Actually, you can disregard the earlier messages, you can use computed with react just fine!

I wrote a self-contained example below:

<!DOCTYPE html>
<html>
<head>
  <meta charset='utf-8'>
  <meta http-equiv='X-UA-Compatible' content='IE=edge'>
  <title>Test</title>
  <meta name='viewport' content='width=device-width, initial-scale=1'>
  <script src="https://unpkg.com/htm@3.1.0/dist/htm.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
  <script src="https://unpkg.com/hyperactiv"></script>
  <script src="https://unpkg.com/hyperactiv/react"></script>
  <script src="https://unpkg.com/hyperactiv/classes"></script>
</head>
<body>
  <div id="root"></div>
  <script>
    const { observe, computed } = window.hyperactiv
    const { watch } = window['react-hyperactiv']
    const { Observable } = window['hyperactiv-classes']
    const html = window['htm'].bind(React.createElement)

    const observable = new Observable({ counter: 0, counterTwice: 0 })
    observable.computed(function() {
      this.counterTwice = this.counter * 2;
    })

    const obj = observe({
        counterPlusOne: 0,
    })
    computed(function() {
      obj.counterPlusOne = observable.counter + 1
    });

    const Root = watch(() => html`
    <div>
        <h1>Counter: ${observable.counter}</h1>
        <h2>+ 1: ${obj.counterPlusOne}</h2>
        <h2>* 2: ${observable.counterTwice}</h2>
        <button onClick=${() => observable.counter += 1}>Click me</button>
    </div>
    `)

    ReactDOM.render(
      html`<${Root} />`,
      document.getElementById('root')
    );
  </script>
</body>
</html>