Extension for chain tag

[alwerr]

I'm trying to add extension to van so I can override and add new attributes:

  Object.prototype.abc= function (ab) {
      for (const key in ab) {
        if (key == 'abc') continue
        this.setAttribute(key, ab[key]);
      };
      return this
    };

While Its working(the attributed added to the element html), the value not updates when state changed :

    const Counter = () => {
      const counter = van.state(0)
      return span(
        "❤️ ", counter, " ",
        button({ onclick: () => ++counter.val,  c: counter }, "👍").abc({text:counter}),//text attribute wont update, while the c attribute will 
        button({ onclick: () => --counter.val }, "👎"),
      )
    }

What am I missing here?

[sirenkovladd]

const protoState = van.state(0).__proto__

Object.prototype.abc = function (ab) {
  for (const key in ab) {
    if (key == 'abc') continue
    console.log(Object.getPrototypeOf(ab[key]), protoState, Object.getPrototypeOf(ab[key])===protoState)
    if (Object.getPrototypeOf(ab[key])===protoState) {
      van.derive(() => this.setAttribute(key, ab[key].val));
    } else {
      this.setAttribute(key, ab[key]);
    }
  };
  return this
};

I do not recommend you to do this, the best option is to initialize immediately as shown below

button({ onclick: () => ++counter.val,  c: counter, text:counter }, "👍")

[alwerr]

Thanks, its working now.
Why you do not recommend to do this?
I'm doing this from the reason that if I'm making new component, the attributes must be set even if its empty object
Doing this for example:
const elm= (...attributes) => div({ attribute: 'abc',...attributes}, ...attributes) elm({id:'aaa'},div('lol'))// return [object Object]
So doing this will help:
const elm= (attributes, ...elements) => div({ cls: 'abc', ...attributes}, ...elements)
And now I must set empty object even if its not needed
elm({},'van is cool')

[Tao-VanJS]

Hi @alwerr,

See the code here https://github.com/vanjs-org/vanjs-org.github.io/blob/7938a927d7d4cb18d5f9bae72b245163fd736d6c/sitegen/common.ts#L120 as an example of how to make the first props parameter optional in custom components.

[alwerr]

Great, thanks