hyperHTML: subscription not working

[Ivan]

Using proppy directly, when i subscribe in my instance when the elements are updating the state the subscription its not called
https://stackblitz.com/edit/basics-table-6-p-one?file=Table.js
If i return the instance in the module (bad practice), it works
https://stackblitz.com/edit/basics-table-6-p?file=Table.js

[Fahad Heylaal]

Hi @pinguxx! Thanks for the detailed issue with examples.

Proppy instances are meant to live and die with the Component's own lifecycle.

For example, in React:

• Proppy factory (not instance) is attached to Component
• Component is mounted, and its own lifecycle creates an instance of Proppy out of the factory (P)
• When component is unmounted, the Proppy instance is also destroyed

What I see in your example, the Proppy instance is created outside of the component. That will lead to unexpected behaviour.

[Ivan]

On the second like i was creating the instance outside the component but that sounded like its a bad practice... not sure how i should handle this case then, any ideas?

[Fahad Heylaal]

I have never used hyperhtml before, but I would like to know what are its lifecycle hooks?

Like React has componentDidMount and componentWillUnmount, what are the equivalent of them in hyperhtml?

Knowing about it will allow me to help you better.

[Ivan]

onconnected and ondisconnected

<element onconnected=${obj} >

[Fahad Heylaal]

may be something like this:

import { P } from './somewhere';

class MyComponent extends hyper.Component {
  get defaultState() {
    return {
      proppyProps: {},
    };
  }

  onconnected() {
    this.p = P();
    this._unsubscribe = this.p.subscribe(props => {
      this.state.proppyProps = props;
    });
  }

  ondisconnected() {
    this._unsubscribe();
  }

  render() {
    return this.html`
      <div onconnected=${this}>
        <p>Counter: ${this.state.proppyProps.counter}</p>
      </div>
    `;
  }
}

[Fahad Heylaal]

now imagine making a higher-order component, to make things easier even further:

function attach(ProppyFactory) {
  return function (Component) {
    // create and return a new Component with the logic
    // as explained in previous comment
  }
}

class MyPlainComponent extends hyper.Component {
  // ...
}

const MyAttachedComponent = attach(P)(MyPlainComponent);

[Ivan]

subscribe still not working with my setup:
https://stackblitz.com/edit/basics-table-6-p-one?file=Table.js
I don't think this fixes the issue where the subscription stops working, unless you are saying a need a factory function and attach the same instance on every element....