Make attachEffect a class method

[ayoayco]

Currently, attachEffect is a separate function we have to import and call with a reference to the prop of a component class. Demo on CodePen

Current usage:

// somewhere else, attach effect from outside component
const counterEl = document.querySelector("my-counter");
attachEffect(counterEl.props.sum, (sum) => doSomething());

This made it difficult to get a reference to the proxy object it needs, and I'm not confident with the current implementation to get around the challenge.

Having it as a method of the class means:

• we don't need to import if we already have the component instance
• it has direct access to the internal #effectsMap we use to track callbacks per prop

A minor downside would be, we will need to pass a string property name

// somewhere outside the component
const counterEl = document.querySelector('my-counter');
counterEl?.attachEffect('count', (count) => doSomething())

Having it as a separate function was good to save some bytes in the base class size, but there are other opportunities to make the base class smaller.

[ayoayco]

Actually this might also reduce the size of the base class as we will be removing logic in the Proxy #handler too :)