Skip to content

Commit

Permalink
feat: Switch to using proxies for store consumers
Browse files Browse the repository at this point in the history
  • Loading branch information
@jorge-ramirez-arredondo
jorge-ramirez-arredondo committed Feb 4, 2025
1 parent ba0d4c2 commit 8d67068
Show file tree
Hide file tree
Showing 11 changed files with 476 additions and 209 deletions.
20 changes: 12 additions & 8 deletions demo/utilities/reactive-store/basic-demo.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,19 +15,23 @@ class BasicDemo extends LitElement {

render() {
return html`
<div>Foo: ${this.consumer.foo}</div>
<div>Bar: ${this.consumer.bar}</div>
<button @click=${this._updateFoo}>Update foo</button>
<button @click=${this._updateBar}>Update bar</button>
<div>Count: ${this.consumer.count}</div>
<button @click=${this._increment}>Increment</button>
<button @click=${this._decrement}>Decrement</button>
<button @click=${this._reset}>Reset</button>
`;
}

_updateBar() {
this.consumer.bar += 1;
_decrement() {
this.consumer.decrement();
}

_updateFoo() {
this.consumer.foo += 1;
_increment() {
this.consumer.increment();
}

_reset() {
this.consumer.count = 0;
}
}

Expand Down
41 changes: 31 additions & 10 deletions demo/utilities/reactive-store/context-demo.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,19 +14,29 @@ class ContextDemo extends LitElement {

this.store = new MyStoreContextProvider(this);
}

render() {
return html`
<h2>Parent</h2>
<div>Foo: ${this.store.foo}</div>
<div>Bar: ${this.store.bar}</div>
<button @click=${this._click}>Update foo</button>
<div>Count: ${this.store.count}</div>
<button @click=${this._increment}>Increment</button>
<button @click=${this._decrement}>Decrement</button>
<button @click=${this._reset}>Reset</button>
<context-demo-child></context-demo-child>
`;
}

_click() {
this.store.foo += 1;
_decrement() {
this.store.decrement();
}

_increment() {
this.store.increment();
}

_reset() {
this.store.count = 0;
}
}

Expand All @@ -36,16 +46,27 @@ class ContextDemoChild extends LitElement {

this.consumer = new MyStoreContextConsumer(this);
}

render() {
return html`
<h2>Child</h2>
<div>Foo: ${this.consumer.foo}</div>
<div>Bar: ${this.consumer.bar}</div>
<button @click=${this._click}>Update bar</button>
<div>Count: ${this.consumer.count}</div>
<button @click=${this._increment}>Increment</button>
<button @click=${this._decrement}>Decrement</button>
<button @click=${this._reset}>Reset</button>
`;
}
_click() {
this.consumer.bar += 1;

_decrement() {
this.consumer.decrement();
}

_increment() {
this.consumer.increment();
}

_reset() {
this.consumer.count = 0;
}
}

Expand Down
115 changes: 83 additions & 32 deletions demo/utilities/reactive-store/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,16 +28,22 @@
export default class MyStore extends ReactiveStore {
static get properties() {
return {
foo: { type: Number },
bar: { type: Number },
count: { type: Number },
};
}

constructor() {
super();

this.foo = 0;
this.bar = 0;
this.count = 0;
}

decrement() {
this.count--;
}

increment() {
this.count++;
}
}</d2l-code-view>
</d2l-collapsible-panel>
Expand All @@ -62,19 +68,23 @@ <h2 class="d2l-heading-3">Basic Demo</h2>

render() {
return html`
&lt;div&gt;Foo: ${this.consumer.foo}&lt;/div&gt;
&lt;div&gt;Bar: ${this.consumer.bar}&lt;/div&gt;
&lt;button @click=${this._updateFoo}&gt;Update foo&lt;/button&gt;
&lt;button @click=${this._updateBar}&gt;Update bar&lt;/button&gt;
&lt;div&gt;Count: ${this.consumer.count}&lt;/div&gt;
&lt;button @click=${this._increment}&gt;Increment&lt;/button&gt;
&lt;button @click=${this._decrement}&gt;Decrement&lt;/button&gt;
&lt;button @click=${this._reset}&gt;Reset&lt;/button&gt;
`;
}

_updateBar() {
this.consumer.bar += 1;
_decrement() {
this.consumer.decrement();
}

_updateFoo() {
this.consumer.foo += 1;
_increment() {
this.consumer.increment();
}

_reset() {
this.consumer.count = 0;
}
}

Expand Down Expand Up @@ -105,16 +115,25 @@ <h2 class="d2l-heading-3">Multiple Consumers Demo</h2>
render() {
return html`
&lt;h2&gt;Parent&lt;/h2&gt;
&lt;div&gt;Foo: ${this.consumer.foo}&lt;/div&gt;
&lt;div&gt;Bar: ${this.consumer.bar}&lt;/div&gt;
&lt;button @click=${this._click}&gt;Update foo&lt;/button&gt;
&lt;div&gt;Count: ${this.consumer.count}&lt;/div&gt;
&lt;button @click=${this._increment}&gt;Increment&lt;/button&gt;
&lt;button @click=${this._decrement}&gt;Decrement&lt;/button&gt;
&lt;button @click=${this._reset}&gt;Reset&lt;/button&gt;

&lt;multiple-consumers-demo-child&gt;&lt;/multiple-consumers-demo-child&gt;
`;
}

_click() {
this.consumer.foo += 1;
_decrement() {
this.consumer.decrement();
}

_increment() {
this.consumer.increment();
}

_reset() {
this.consumer.count = 0;
}
}

Expand All @@ -124,16 +143,27 @@ <h2 class="d2l-heading-3">Multiple Consumers Demo</h2>

this.consumer = new MyStoreConsumer(this);
}

render() {
return html`
&lt;h2&gt;Child&lt;/h2&gt;
&lt;div&gt;Foo: ${this.consumer.foo}&lt;/div&gt;
&lt;div&gt;Bar: ${this.consumer.bar}&lt;/div&gt;
&lt;button @click=${this._click}&gt;Update bar&lt;/button&gt;
&lt;div&gt;Count: ${this.consumer.count}&lt;/div&gt;
&lt;button @click=${this._increment}&gt;Increment&lt;/button&gt;
&lt;button @click=${this._decrement}&gt;Decrement&lt;/button&gt;
&lt;button @click=${this._reset}&gt;Reset&lt;/button&gt;
`;
}
_click() {
this.consumer.bar += 1;

_decrement() {
this.consumer.decrement();
}

_increment() {
this.consumer.increment();
}

_reset() {
this.consumer.count = 0;
}
}

Expand Down Expand Up @@ -163,19 +193,29 @@ <h2 class="d2l-heading-3">Context Demo</h2>

this.store = new MyStoreContextProvider(this);
}

render() {
return html`
&lt;h2&gt;Parent&lt;/h2&gt;
&lt;div&gt;Foo: ${this.store.foo}&lt;/div&gt;
&lt;div&gt;Bar: ${this.store.bar}&lt;/div&gt;
&lt;button @click=${this._click}&gt;Update foo&lt;/button&gt;
&lt;div&gt;Count: ${this.store.count}&lt;/div&gt;
&lt;button @click=${this._increment}&gt;Increment&lt;/button&gt;
&lt;button @click=${this._decrement}&gt;Decrement&lt;/button&gt;
&lt;button @click=${this._reset}&gt;Reset&lt;/button&gt;

&lt;context-demo-child&gt;&lt;/context-demo-child&gt;
`;
}

_click() {
this.store.foo += 1;
_decrement() {
this.store.decrement();
}

_increment() {
this.store.increment();
}

_reset() {
this.store.count = 0;
}
}

Expand All @@ -185,16 +225,27 @@ <h2 class="d2l-heading-3">Context Demo</h2>

this.consumer = new MyStoreContextConsumer(this);
}

render() {
return html`
&lt;h2&gt;Child&lt;/h2&gt;
&lt;div&gt;Foo: ${this.consumer.foo}&lt;/div&gt;
&lt;div&gt;Bar: ${this.consumer.bar}&lt;/div&gt;
&lt;button @click=${this._click}&gt;Update bar&lt;/button&gt;
&lt;div&gt;Count: ${this.consumer.count}&lt;/div&gt;
&lt;button @click=${this._increment}&gt;Increment&lt;/button&gt;
&lt;button @click=${this._decrement}&gt;Decrement&lt;/button&gt;
&lt;button @click=${this._reset}&gt;Reset&lt;/button&gt;
`;
}
_click() {
this.consumer.bar += 1;

_decrement() {
this.consumer.decrement();
}

_increment() {
this.consumer.increment();
}

_reset() {
this.consumer.count = 0;
}
}

Expand Down
40 changes: 30 additions & 10 deletions demo/utilities/reactive-store/multiple-consumers-demo.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,16 +16,25 @@ class MultipleConsumersDemo extends LitElement {
render() {
return html`
<h2>Parent</h2>
<div>Foo: ${this.consumer.foo}</div>
<div>Bar: ${this.consumer.bar}</div>
<button @click=${this._click}>Update foo</button>
<div>Count: ${this.consumer.count}</div>
<button @click=${this._increment}>Increment</button>
<button @click=${this._decrement}>Decrement</button>
<button @click=${this._reset}>Reset</button>
<multiple-consumers-demo-child></multiple-consumers-demo-child>
`;
}

_click() {
this.consumer.foo += 1;
_decrement() {
this.consumer.decrement();
}

_increment() {
this.consumer.increment();
}

_reset() {
this.consumer.count = 0;
}
}

Expand All @@ -35,16 +44,27 @@ class MultipleConsumersDemoChild extends LitElement {

this.consumer = new MyStoreConsumer(this);
}

render() {
return html`
<h2>Child</h2>
<div>Foo: ${this.consumer.foo}</div>
<div>Bar: ${this.consumer.bar}</div>
<button @click=${this._click}>Update bar</button>
<div>Count: ${this.consumer.count}</div>
<button @click=${this._increment}>Increment</button>
<button @click=${this._decrement}>Decrement</button>
<button @click=${this._reset}>Reset</button>
`;
}
_click() {
this.consumer.bar += 1;

_decrement() {
this.consumer.decrement();
}

_increment() {
this.consumer.increment();
}

_reset() {
this.consumer.count = 0;
}
}

Expand Down
14 changes: 10 additions & 4 deletions demo/utilities/reactive-store/my-store.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,15 +3,21 @@ import ReactiveStore from '../../../src/utilities/reactive-store/reactive-store.
export default class MyStore extends ReactiveStore {
static get properties() {
return {
foo: { type: Number },
bar: { type: Number },
count: { type: Number },
};
}

constructor() {
super();

this.foo = 0;
this.bar = 0;
this.count = 0;
}

decrement() {
this.count--;
}

increment() {
this.count++;
}
}
Loading

0 comments on commit 8d67068

Please sign in to comment.