Merge pull request #34 from vicb/patch-2

fix lit integration (WithUsignal)

README.md

@@ -133,14 +133,15 @@ This file is not meant at all as meaningful benchmark against other libraries, i
 
 ## How to integrate with Lit
 
-You create a following [mixin](https://lit.dev/docs/composition/mixins/) function. Your class inherits from Mixin. Please see the [demo](https://lit.dev/playground/#project=W3sibmFtZSI6InNpZ25hbC1leGFtcGxlLmpzIiwiY29udGVudCI6ImltcG9ydCB7IGh0bWwsIGNzcywgTGl0RWxlbWVudCB9IGZyb20gJ2xpdCc7XG5pbXBvcnQgeyBXaXRoVXNpZ25hbCB9IGZyb20gJy4vd2l0aC11c2lnbmFsLmpzJztcbmltcG9ydCB7IHNpZ25hbCB9IGZyb20gJ3VzaWduYWwnO1xuXG5jb25zdCBjb3VudGVyID0gc2lnbmFsKDEpO1xuXG5jbGFzcyBTaWduYWxFeGFtcGxlIGV4dGVuZHMgV2l0aFVzaWduYWwoTGl0RWxlbWVudCkge1xuICBzdGF0aWMgc3R5bGVzID0gY3NzYFxuICAgIDpob3N0IHtcbiAgICAgIGRpc3BsYXk6IGJsb2NrO1xuICAgICAgYm9yZGVyOiBzb2xpZCAxcHggYmx1ZTtcbiAgICAgIHBhZGRpbmc6IDhweDtcbiAgICAgIG1hcmdpbjogNHB4O1xuICAgIH1cbiAgYDtcblxuICBzdGF0aWMgcHJvcGVydGllcyA9IHtcbiAgICBjb3VudDogeyBzdGF0ZTogdHJ1ZSB9LFxuICAgIG5hbWU6IHt9XG4gIH1cblxuICBjb25zdHJ1Y3RvcigpIHtcbiAgICBzdXBlcigpO1xuICAgIHRoaXMuY291bnQgPSAxO1xuICB9XG5cbiAgcmVuZGVyKCkge1xuICAgIHJldHVybiBodG1sYFxuICAgICAgPGg0PiR7dGhpcy5uYW1lfTwvaDQ-XG4gICAgICA8cD5cbiAgICAgICAgU2lnbmFsIGNvdW50ZXI6ICR7Y291bnRlcn1cbiAgICAgICAgPGJ1dHRvbiBAY2xpY2s9JHsoKSA9PiBjb3VudGVyLnZhbHVlKyt9PisrPC9idXR0b24-XG4gICAgICA8L3A-XG4gICAgICA8cD5cbiAgICAgICAgUmVhY3RpdmUgcHJvcGVydHkgY291bnRlcjogJHt0aGlzLmNvdW50fVxuICAgICAgICA8YnV0dG9uIEBjbGljaz0keygpID0-IHRoaXMuY291bnQrK30-Kys8L2J1dHRvbj5cbiAgICAgIDwvcD5cbiAgICBgO1xuICB9XG59XG5cbmN1c3RvbUVsZW1lbnRzLmRlZmluZSgnc2lnbmFsLWV4YW1wbGUnLCBTaWduYWxFeGFtcGxlKTsifSx7Im5hbWUiOiJpbmRleC5odG1sIiwiY29udGVudCI6IjwhRE9DVFlQRSBodG1sPlxuPGh0bWw-XG4gIDxoZWFkPlxuICAgIDxzY3JpcHQgdHlwZT1cIm1vZHVsZVwiIHNyYz1cIi4vc2lnbmFsLWV4YW1wbGUuanNcIj48L3NjcmlwdD5cbiAgICA8c3R5bGU-XG4gICAgICBib2R5IHtcbiAgICAgICAgZm9udC1zaXplOiAxLjI1cmVtO1xuICAgICAgICBmb250LWZhbWlseTogc2Fucy1zZXJpZjtcbiAgICAgIH1cbiAgICA8L3N0eWxlPlxuICA8L2hlYWQ-XG4gIDxib2R5PlxuICAgIDxzaWduYWwtZXhhbXBsZSBuYW1lPVwiSW5zdGFuY2UgMVwiPjwvc2lnbmFsLWV4YW1wbGU-XG4gICAgPHNpZ25hbC1leGFtcGxlIG5hbWU9XCJJbnN0YW5jZSAyXCI-PC9zaWduYWwtZXhhbXBsZT5cbiAgPC9ib2R5PlxuPC9odG1sPiJ9LHsibmFtZSI6InBhY2thZ2UuanNvbiIsImNvbnRlbnQiOiJ7XG4gIFwiZGVwZW5kZW5jaWVzXCI6IHtcbiAgICBcImxpdFwiOiBcIl4yLjAuMFwiLFxuICAgIFwiQGxpdC9yZWFjdGl2ZS1lbGVtZW50XCI6IFwiXjEuMC4wXCIsXG4gICAgXCJsaXQtZWxlbWVudFwiOiBcIl4zLjAuMFwiLFxuICAgIFwibGl0LWh0bWxcIjogXCJeMi4wLjBcIlxuICB9XG59IiwiaGlkZGVuIjp0cnVlfSx7Im5hbWUiOiJ3aXRoLXVzaWduYWwuanMiLCJjb250ZW50IjoiaW1wb3J0IHsgZWZmZWN0IH0gZnJvbSAndXNpZ25hbCc7XG5cbmV4cG9ydCBmdW5jdGlvbiBXaXRoVXNpZ25hbChCYXNlKXtcbiAgcmV0dXJuIGNsYXNzIFdpdGhVc2lnbmFsIGV4dGVuZHMgQmFzZSB7XG4gICAgI2Rpc3Bvc2VFZmZlY3RcbiBcbiAgICBkaXNjb25uZWN0ZWRDYWxsYmFjaygpIHtcbiAgICAgIHRoaXMuI2Rpc3Bvc2VFZmZlY3Q_LigpO1xuICAgIH1cblxuICAgIHBlcmZvcm1VcGRhdGUoKSB7XG4gICAgICBpZiAoIXRoaXMuaXNVcGRhdGVQZW5kaW5nKSB7XG4gICAgICAgIHJldHVybjtcbiAgICAgIH1cblxuICAgICAgaWYgKHRoaXMuI2Rpc3Bvc2VFZmZlY3QpIHtcbiAgICAgICAgc3VwZXIucGVyZm9ybVVwZGF0ZSgpO1xuICAgICAgICByZXR1cm5cbiAgICAgIH1cblxuICAgICAgdGhpcy4jZGlzcG9zZUVmZmVjdCA9IGVmZmVjdCgoKSA9PiB7XG4gICAgICAgIHRoaXMuaXNVcGRhdGVQZW5kaW5nID0gdHJ1ZTtcbiAgICAgICAgc3VwZXIucGVyZm9ybVVwZGF0ZSgpO1xuICAgICAgfSk7XG4gICAgfVxuICB9O1xufSJ9XQ) for details.
+You create a following [mixin](https://lit.dev/docs/composition/mixins/) function. Your class inherits from Mixin. Please see the [demo](https://lit.dev/playground/#project=W3sibmFtZSI6InNpZ25hbC1leGFtcGxlLmpzIiwiY29udGVudCI6ImltcG9ydCB7IGh0bWwsIGNzcywgTGl0RWxlbWVudCB9IGZyb20gJ2xpdCc7XG5pbXBvcnQgeyBXaXRoVXNpZ25hbCB9IGZyb20gJy4vd2l0aC11c2lnbmFsLmpzJztcbmltcG9ydCB7IHNpZ25hbCB9IGZyb20gJ3VzaWduYWwnO1xuXG5jb25zdCBjb3VudGVyID0gc2lnbmFsKDEpO1xuY29uc3QgY291bnRlcjIgPSBzaWduYWwoMSk7XG5cbmNsYXNzIFNpZ25hbEV4YW1wbGUgZXh0ZW5kcyBXaXRoVXNpZ25hbChMaXRFbGVtZW50KSB7XG4gIHN0YXRpYyBzdHlsZXMgPSBjc3NgXG4gICAgOmhvc3Qge1xuICAgICAgZGlzcGxheTogYmxvY2s7XG4gICAgICBib3JkZXI6IHNvbGlkIDFweCBibHVlO1xuICAgICAgcGFkZGluZzogOHB4O1xuICAgICAgbWFyZ2luOiA0cHg7XG4gICAgfVxuICBgO1xuXG4gIHN0YXRpYyBwcm9wZXJ0aWVzID0ge1xuICAgIGNvdW50OiB7IHN0YXRlOiB0cnVlIH0sXG4gICAgbmFtZToge31cbiAgfVxuXG4gIGNvbnN0cnVjdG9yKCkge1xuICAgIHN1cGVyKCk7XG4gICAgdGhpcy5jb3VudCA9IDE7XG4gIH1cblxuICByZW5kZXIoKSB7XG4gICAgcmV0dXJuIGh0bWxgXG4gICAgICA8aDQ-JHt0aGlzLm5hbWV9PC9oND5cbiAgICAgIDxwPlxuICAgICAgICBTaWduYWwgY291bnRlcjogJHtjb3VudGVyfVxuICAgICAgICA8YnV0dG9uIEBjbGljaz0keygpID0-IGNvdW50ZXIudmFsdWUrK30-Kys8L2J1dHRvbj5cbiAgICAgIDwvcD5cbiAgICAgIDxwPlxuICAgICAgICBSZWFjdGl2ZSBwcm9wZXJ0eSBjb3VudGVyOiAke3RoaXMuY291bnR9XG4gICAgICAgIDxidXR0b24gQGNsaWNrPSR7KCkgPT4gdGhpcy5jb3VudCsrfT4rKzwvYnV0dG9uPlxuICAgICAgPC9wPlxuICAgICAgJHsgdGhpcy5jb3VudCA-IDIgPyBodG1sYFxuICAgICAgIDxwPlxuICAgICAgICBTaWduYWwgY291bnRlcjogJHtjb3VudGVyMn1cbiAgICAgICAgPGJ1dHRvbiBAY2xpY2s9JHsoKSA9PiBjb3VudGVyMi52YWx1ZSsrfT4rKzwvYnV0dG9uPlxuICAgICAgIDwvcD5gIDogbnVsbH0gICAgICAgIFxuICAgIGA7XG4gIH1cbn1cblxuY3VzdG9tRWxlbWVudHMuZGVmaW5lKCdzaWduYWwtZXhhbXBsZScsIFNpZ25hbEV4YW1wbGUpOyJ9LHsibmFtZSI6ImluZGV4Lmh0bWwiLCJjb250ZW50IjoiPCFET0NUWVBFIGh0bWw-XG48aHRtbD5cbiAgPGhlYWQ-XG4gICAgPHNjcmlwdCB0eXBlPVwibW9kdWxlXCIgc3JjPVwiLi9zaWduYWwtZXhhbXBsZS5qc1wiPjwvc2NyaXB0PlxuICAgIDxzdHlsZT5cbiAgICAgIGJvZHkge1xuICAgICAgICBmb250LXNpemU6IDEuMjVyZW07XG4gICAgICAgIGZvbnQtZmFtaWx5OiBzYW5zLXNlcmlmO1xuICAgICAgfVxuICAgIDwvc3R5bGU-XG4gIDwvaGVhZD5cbiAgPGJvZHk-XG4gICAgPHNpZ25hbC1leGFtcGxlIG5hbWU9XCJJbnN0YW5jZSAxXCI-PC9zaWduYWwtZXhhbXBsZT5cbiAgICA8c2lnbmFsLWV4YW1wbGUgbmFtZT1cIkluc3RhbmNlIDJcIj48L3NpZ25hbC1leGFtcGxlPlxuICA8L2JvZHk-XG48L2h0bWw-In0seyJuYW1lIjoicGFja2FnZS5qc29uIiwiY29udGVudCI6IntcbiAgXCJkZXBlbmRlbmNpZXNcIjoge1xuICAgIFwibGl0XCI6IFwiXjIuMC4wXCIsXG4gICAgXCJAbGl0L3JlYWN0aXZlLWVsZW1lbnRcIjogXCJeMS4wLjBcIixcbiAgICBcImxpdC1lbGVtZW50XCI6IFwiXjMuMC4wXCIsXG4gICAgXCJsaXQtaHRtbFwiOiBcIl4yLjAuMFwiXG4gIH1cbn0iLCJoaWRkZW4iOnRydWV9LHsibmFtZSI6IndpdGgtdXNpZ25hbC5qcyIsImNvbnRlbnQiOiJpbXBvcnQgeyBlZmZlY3QsIHNpZ25hbCB9IGZyb20gJ3VzaWduYWwnO1xuXG5leHBvcnQgZnVuY3Rpb24gV2l0aFVzaWduYWwoQmFzZSl7XG4gIHJldHVybiBjbGFzcyBXaXRoVXNpZ25hbCBleHRlbmRzIEJhc2Uge1xuICAgICNkaXNwb3NlRWZmZWN0XG4gICAgI3JlYWN0aXZlUHJvcFVwZGF0ZSA9IHNpZ25hbCgwKTtcblxuICAgIGRpc2Nvbm5lY3RlZENhbGxiYWNrKCkge1xuICAgICAgdGhpcy4jZGlzcG9zZUVmZmVjdD8uKCk7XG4gICAgfVxuXG4gICAgcGVyZm9ybVVwZGF0ZSgpIHtcbiAgICAgIGlmICghdGhpcy5pc1VwZGF0ZVBlbmRpbmcpIHtcbiAgICAgICAgcmV0dXJuO1xuICAgICAgfVxuXG4gICAgICBpZiAodGhpcy4jZGlzcG9zZUVmZmVjdCkge1xuICAgICAgICB0aGlzLiNyZWFjdGl2ZVByb3BVcGRhdGUudmFsdWUrKztcbiAgICAgIH1cblxuICAgICAgdGhpcy4jZGlzcG9zZUVmZmVjdCA9IGVmZmVjdCgoKSA9PiB7ICAgICAgXG4gICAgICAgIHRoaXMuaXNVcGRhdGVQZW5kaW5nID0gdHJ1ZTtcbiAgICAgICAgdGhpcy4jcmVhY3RpdmVQcm9wVXBkYXRlLnZhbHVlO1xuICAgICAgICBzdXBlci5wZXJmb3JtVXBkYXRlKCk7XG4gICAgICB9KTtcbiAgICB9XG4gIH07XG59In1d) for details.
 
 ```js
-import { effect } from 'usignal';
+import { effect, signal } from 'usignal';
 
 export function WithUsignal(Base){
   return class WithUsignal extends Base {
     #disposeEffect
+    #reactivePropUpdate = signal(0);
 
     disconnectedCallback() {
       this.#disposeEffect?.();
@@ -152,12 +153,13 @@ export function WithUsignal(Base){
       }
 
       if (this.#disposeEffect) {
-        super.performUpdate();
-        return
+        this.#reactivePropUpdate.value++;
+        return;
       }
 
-      this.#disposeEffect = effect(() => {
+      this.#disposeEffect = effect(() => {      
         this.isUpdatePending = true;
+        this.#reactivePropUpdate.value;
         super.performUpdate();
       });
     }