Skip to content

Commit c50c8bd

Browse files
panManfredinipanManfredini
committed
implemented and tested litStateMixin
1 parent f42bc0d commit c50c8bd

File tree

3 files changed

+104
-19
lines changed

3 files changed

+104
-19
lines changed

‎build/stateElement.js‎

Lines changed: 29 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -177,7 +177,7 @@ export class Message extends BaseState {
177177
this._call_watchers(input);
178178
}
179179
}
180-
export let statesMixin = (listOfComponents, baseClass) => class extends baseClass {
180+
let baseMixin = (listOfComponents, baseClass) => class extends baseClass {
181181
constructor() {
182182
super();
183183
this._transitionMap = new Map();
@@ -231,8 +231,18 @@ export let statesMixin = (listOfComponents, baseClass) => class extends baseClas
231231
}
232232
}
233233
}
234+
disconnectedCallback() {
235+
if (super['disconnectedCallback'] !== undefined) {
236+
super.disconnectedCallback();
237+
}
238+
for (let state_comp of listOfComponents) {
239+
//@ts-ignore
240+
state_comp.detachWatcher(this);
241+
}
242+
}
243+
};
244+
export let statesMixin = (listOfComponents, baseClass) => class extends baseMixin(listOfComponents, baseClass) {
234245
connectedCallback() {
235-
//console.log('Im connected, running connected callback');
236246
if (super['connectedCallback'] !== undefined) {
237247
super.connectedCallback();
238248
}
@@ -255,13 +265,25 @@ export let statesMixin = (listOfComponents, baseClass) => class extends baseClas
255265
}
256266
}
257267
}
258-
disconnectedCallback() {
259-
if (super['disconnectedCallback'] !== undefined) {
260-
super.disconnectedCallback();
268+
};
269+
export let litStatesMixin = (listOfComponents, baseClass) => class extends baseMixin(listOfComponents, baseClass) {
270+
connectedCallback() {
271+
if (super['connectedCallback'] !== undefined) {
272+
super.connectedCallback();
261273
}
274+
//let run_render_on_connect = false;
275+
// watch default state variables
262276
for (let state_comp of listOfComponents) {
263-
//@ts-ignore
264-
state_comp.detachWatcher(this);
277+
if (state_comp instanceof Message) {
278+
if (this[`gotMessage_${state_comp.name}`])
279+
//@ts-ignore
280+
state_comp.attachWatcher(this, this[`gotMessage_${state_comp.name}`].bind(this));
281+
}
282+
else {
283+
//@ts-ignore
284+
state_comp.attachWatcher(this, this.requestUpdate.bind(this));
285+
}
265286
}
287+
//if(run_render_on_connect) this.render();
266288
}
267289
};

‎src/stateElement.ts‎

Lines changed: 39 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -219,7 +219,7 @@ export class Message extends BaseState{
219219
}
220220

221221

222-
export let statesMixin = (listOfComponents:Array<StateVariable|StateTransition|Message>, baseClass:any) => class extends baseClass {
222+
let baseMixin = (listOfComponents:Array<StateVariable|StateTransition|Message>, baseClass:any) => class extends baseClass {
223223
_transitionMap : Map<String,any>
224224
_messageMap :Map<String,any>
225225

@@ -282,8 +282,26 @@ export let statesMixin = (listOfComponents:Array<StateVariable|StateTransition|M
282282
}
283283
}
284284

285+
286+
disconnectedCallback(){
287+
if(super['disconnectedCallback'] !== undefined) {
288+
super.disconnectedCallback();
289+
}
290+
291+
for (let state_comp of listOfComponents) {
292+
//@ts-ignore
293+
state_comp.detachWatcher(this);
294+
}
295+
296+
}
297+
298+
}
299+
300+
301+
302+
export let statesMixin = (listOfComponents:Array<StateVariable|StateTransition|Message>, baseClass:any) => class extends baseMixin(listOfComponents, baseClass) {
303+
285304
connectedCallback(){
286-
//console.log('Im connected, running connected callback');
287305
if(super['connectedCallback'] !== undefined) {
288306
super.connectedCallback();
289307
}
@@ -307,18 +325,28 @@ export let statesMixin = (listOfComponents:Array<StateVariable|StateTransition|M
307325
}
308326
}
309327
}
328+
}
310329

311-
disconnectedCallback(){
312-
if(super['disconnectedCallback'] !== undefined) {
313-
super.disconnectedCallback();
330+
export let litStatesMixin = (listOfComponents:Array<StateVariable|StateTransition|Message>, baseClass:any) => class extends baseMixin(listOfComponents, baseClass) {
331+
connectedCallback(){
332+
if(super['connectedCallback'] !== undefined) {
333+
super.connectedCallback();
314334
}
335+
//let run_render_on_connect = false;
315336

337+
// watch default state variables
316338
for (let state_comp of listOfComponents) {
317-
//@ts-ignore
318-
state_comp.detachWatcher(this);
339+
340+
if(state_comp instanceof Message){
341+
if(this[`gotMessage_${state_comp.name}`])
342+
//@ts-ignore
343+
state_comp.attachWatcher(this, this[`gotMessage_${state_comp.name}`].bind(this));
344+
}
345+
else {
346+
//@ts-ignore
347+
state_comp.attachWatcher(this, this.requestUpdate.bind(this));
348+
}
319349
}
320-
350+
//if(run_render_on_connect) this.render();
321351
}
322-
323-
}
324-
352+
}

‎test/stateMixin.test.js‎

Lines changed: 36 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
import {statesMixin, StateVariable, StateTransition, Message} from "../build/stateElement.js"
1+
import {statesMixin, StateVariable, StateTransition, Message, litStatesMixin} from "../build/stateElement.js"
2+
import {LitElement, html} from 'https://unpkg.com/lit-element?module';
23

34
export default function(){
45
localStorage.clear();
@@ -181,6 +182,40 @@ export default function(){
181182
chai.assert.equal(message2,"", "message");
182183

183184
});
185+
describe('LitElement Mixin',()=>{
186+
var lista = [sv_n];
187+
it('Does a render update',async function(){
188+
189+
sv_n.value = 1
190+
191+
class MyFoo extends litStatesMixin(lista,LitElement) {
192+
render() {
193+
return html`
194+
<div id="num"> This is Lit element ${this.num}</div>
195+
`;
196+
}
197+
}
198+
customElements.define('my-foo', MyFoo);
199+
let lit = document.createElement('my-foo');
200+
document.body.appendChild(lit);
201+
202+
let update = await lit.updateComplete
203+
let div0 = lit.shadowRoot.querySelector("#num")
204+
chai.assert.equal(div0.innerText, "This is Lit element 1","lit element gets initialized correctly")
205+
sv_n.value = 6
206+
update = await lit.updateComplete
207+
div0 = lit.shadowRoot.querySelector("#num")
208+
chai.assert.equal(div0.innerText, "This is Lit element 6","lit element gets modified correctly")
209+
sv_n.applyTransition("SubTransition")
210+
update = await lit.updateComplete
211+
div0 = lit.shadowRoot.querySelector("#num")
212+
chai.assert.equal(div0.innerText, "This is Lit element 78","lit element respond to transitions")
213+
214+
document.body.removeChild(lit);
215+
});
216+
217+
});
218+
184219
describe('Performance',()=>{
185220
it('Update of a 1000 element takes < 200mus',()=>{
186221
let n_cycles = 1000;

0 commit comments

Comments
 (0)