Great work! I was just going to start using Mobx eventually... but use lit-element extensively...

[cintaccs]

I am wondering whether your work could instead be created as mixins to LitElement?

[gitaarik]

Thanks for the feedback :).

A mixin should be possible. I haven't looked into it yet, but I think it is fairly easy.

[cintaccs]

my point being that a mixing looks a lot less intrusive and a "simple" addon to existing implementations. You might not even have to have a Lit-element dependency...

[gitaarik]

Well, it is made for LitElement, so it will not work for components that don't derive from LitElement.

However, I added the feature anyway, because it was very simple to do. And I can imagine that it can be useful in some use cases.

https://github.com/gitaarik/lit-state#mixin-class-litstateelementmixin

[cintaccs]

cool! Thanks a lot - and fast!! :-) I will try it!

[gitaarik]

Cool, let me know how it goes, I'm curious to see how other people use LitState. :)

[cintaccs]

Sure - currently it led me to a props cleanup ...instead ... not sure.

[gitaarik]

Haha ok. I hope it works out, if you have any questions, let me know.

[gitaarik]

@cintaccs I now actually made the mixin usage the primary way of using LitState. I see more the value of it, and I think it is indeed the easiest way for people to start using LitState. The mixin is also renamed to observeState(). So you would do:

import { LitElement } from 'lit-element';
import { observeState } from 'lit-element-state';

class MyComponent extends observeState(LitElement) {
    // ...
}

Thanks again for your feedback.

[cintaccs]

@gitaarik Sounds good! I am still deep in my props down events up clean up... I believe I do have use cases for state management but my project is rather big and I have to get rid of noise (I learned in the meantime) before changing the architecture ... at least for now. I benefit from e.g. Provider and Requester mixins in general I think the mixin approach was promoted by the Google Lit guys (justin a.o.) and it should be safe. I wonder whether it would be possible to create multiple sub stores also... as I understand it gets complex in Redux and Mobx ... and being able to manage sections of a general state could be useful I think.

[gitaarik]

Hey man. I would advice not to refactor your whole app at once. Try to introduce changes progressively. So if LitState is useful for a particular part of your app you're working on now, try it out for just that part.

I actually made LitState even smaller by moving the asyncStateVar to a separate repository, which makes LitState only 177 lines ATM, making the barrier very low to add it to a project, even if you only use it at some spots of the project.

Also I found your question about nesting states interesting, so I investigated and it looks like it just works. I added a demo page to demonstrate it, you can see it here.

Hope that helps! Happy coding :smiley:

[gitaarik]

Oh and in case you are interested, I also created another tiny helpful library for use with LitElement:

https://github.com/gitaarik/lit-style

Edit: Actually I have to thank you, because you made me look into mixins, ans after using it for LitState I came up with this idea to use a mixing to apply styles to a component!