feat: added usePropChanged hook

Author: icsaba

src/utils/base-element.ts

@@ -1,7 +1,11 @@
-import { LitElement } from "lit";
+import { LitElement, PropertyValues } from "lit";
+
+export type ObservedAttribute = { dependencies: string[], callback: Function };
 
 export default abstract class BaseElement extends LitElement {
   mounted: boolean = false;
+  observedProperties: Map<string, ObservedAttribute> = new Map();
+  updatedCallback: LitElement['updated'] | null = null;
 
   onUnMount() {}
 
@@ -11,8 +15,32 @@ export default abstract class BaseElement extends LitElement {
     this.onUnMount();
   }
 
+  updated(changedProperties: PropertyValues) {
+    super.updated(changedProperties);
+    
+    this.observedProperties.forEach(
+      ({dependencies, callback}) => {
+        if (dependencies.every( dep => changedProperties.has(dep) && changedProperties.get(dep) !== undefined )) {
+          callback();
+        }
+      }
+    )
+
+    if (this.updatedCallback) {
+      this.updatedCallback(changedProperties);
+    }
+  }
+
+  usePropChanged(callback: Function, dependencies: string[]) {
+    const cacheKey = dependencies.join('-');
+    
+    // we should set it every time
+    // otherwise the callback's closure is gonna be a snapshot
+    this.observedProperties.set(cacheKey, {dependencies, callback});
+  }
+
   setUpdatedHook(fn: LitElement['updated']) {
-    this.updated = fn.bind(this);
+    this.updatedCallback = fn.bind(this);
   }
 
   setAttrChangedHook(fn: LitElement['attributeChangedCallback']) {

src/utils/component.spec.ts

@@ -1,4 +1,4 @@
-import { expect, describe, it, vi } from 'vitest';
+import { expect, describe, it, vi, afterEach } from 'vitest';
 import { elementUpdated, fixture, html, oneEvent, waitUntil } from '@open-wc/testing';
 import component, { Props } from '../';
 import { PropertyValues } from 'lit';
@@ -23,34 +23,56 @@ describe('component', () => {
   });
 
   describe('properties', () => {
-    function MyTestComponent2({useProp}: Props) {
+    const usePropChangedCallback = vi.fn();
+
+    function MyTestComponent2({useProp, usePropChanged}: Props) {
       const [counter, setCounter] = useProp('counter', {type: Number}, 12);
 
+      usePropChanged(usePropChangedCallback, ['counter']);
+
       return html`<div>
         <span class="counter">${counter}</span>
         <button @click=${() => setCounter(counter + 1)}>increase</button>
       </div>
       `;
     }
 
-    component(MyTestComponent2);
+    afterEach(() => {
+      usePropChangedCallback.mockReset();
+    });
 
-    it('should define counter property with a default value', async () => {
-      const element = await fixture(html`<my-test-component2></my-test-component2>`);
+    component(MyTestComponent2);
 
-      const counter = element.shadowRoot?.querySelector('.counter');
-      expect(counter?.textContent).toBe('12');
+    describe('useProp', () => {
+      it('should define counter property with a default value', async () => {
+        const element = await fixture(html`<my-test-component2></my-test-component2>`);
+  
+        const counter = element.shadowRoot?.querySelector('.counter');
+        expect(counter?.textContent).toBe('12');
+      });
+  
+      it('should increase the value of the counter property using the setter', async () => {
+        const element = await fixture(html`<my-test-component2></my-test-component2>`);
+        const btn = element.shadowRoot?.querySelector('button');
+  
+        btn?.click();
+        await elementUpdated(element);
+  
+        const counter = element.shadowRoot?.querySelector('.counter');
+        expect(counter?.textContent).toBe('13');
+      });
     });
 
-    it('should increase the value of the counter property using the setter', async () => {
-      const element = await fixture(html`<my-test-component2></my-test-component2>`);
-      const btn = element.shadowRoot?.querySelector('button');
-
-      btn?.click();
-      await elementUpdated(element);
+    describe('usePropChanged', () => {
+      it('should trigger a callback on "counter" change', async () => {
+        const element = await fixture(html`<my-test-component2></my-test-component2>`);
+        const btn = element.shadowRoot?.querySelector('button');
+  
+        btn?.click();
+        await elementUpdated(element);
 
-      const counter = element.shadowRoot?.querySelector('.counter');
-      expect(counter?.textContent).toBe('13');
+        expect(usePropChangedCallback).toHaveBeenCalledOnce();
+      });
     });
   });
 

src/utils/hooks.ts

@@ -71,4 +71,8 @@ export class Hooks {
   dispatchEvent<T>(event: CustomEvent<T>) {
     this.litElement?.dispatchEvent(event);
   }
+
+  usePropChanged(callback: Function, dependencies: string[]) {
+    this.litElement?.usePropChanged(callback, dependencies);
+  }
 }

src/utils/props.ts

@@ -8,6 +8,7 @@ export type Props = {
   updated: Hooks['updated'];
   attributeChangedCallback: Hooks['attributeChangedCallback'];
   dispatchEvent: Hooks['dispatchEvent'],
+  usePropChanged: Hooks['usePropChanged'],
   meta: LitElement,
 }
 
@@ -19,6 +20,7 @@ export function generateProps(hooks: Hooks) {
     updated: hooks.updated.bind(hooks),
     attributeChangedCallback: hooks.attributeChangedCallback.bind(hooks),
     dispatchEvent: hooks.dispatchEvent.bind(hooks),
+    usePropChanged: hooks.usePropChanged.bind(hooks),
     meta: hooks.litElement as LitElement
   }
 }

ts-component-tests/src/my-element.ts

@@ -1,7 +1,7 @@
 import { html, css, PropertyValues } from "lit";
 import litLogo from './assets/lit.svg'
 import viteLogo from '/vite.svg'
-import component, { Props } from "lit-functions";
+import component, { Props } from "../../src";
 
 const style = css`
 :host {
@@ -75,7 +75,7 @@ button:focus-visible {
 }
 `
 
-function myElement({useProp, onMount, updated}: Props) {
+function myElement({useProp, onMount, updated, usePropChanged}: Props) {
   const [count, setCount] = useProp('count', {type: Number}, 0);
   const [refreshCounter, refresh] = useProp('refreshCounter', {type: Number}, 2);
   const [docs, _] = useProp('docs', {type: String}, 'This is some test docs');
@@ -88,6 +88,10 @@ function myElement({useProp, onMount, updated}: Props) {
   updated((changedProperties: PropertyValues) => {
     console.log('changed', changedProperties);
   });
+
+  usePropChanged(() => {
+    console.log('counter changed', count)
+  }, ['count']);
 
   return html`
     <div>