gitaarik / lit-state

Simple shared component state management for LitElement.
https://gitaarik.github.io/lit-state/build/
GNU Lesser General Public License v3.0
139 stars 11 forks source link

Any plan to use lit 2.0 controllers ? #7

Open christophe-g opened 3 years ago

christophe-g commented 3 years ago

Hey @gitaarik

Just curious to know if there are plans to upgrade to lit 2.0 now that it is on release candidate stage?

Apparently controllers would be perfectly fitted to lit-state : https://lit.dev/docs/composition/controllers/

gitaarik commented 3 years ago

Hi @christophe-g, sorry I haven't replied to this yet. I haven't looked into this new technology of Lit, and currently don't have much time for it either. I would like to look into it when I have more time, so I'll keep you updated about it. Thanks for the suggestion anyway :).

christophe-g commented 3 years ago

No problem,

currently don't have much time for it either

I so understand that!

I haven't played with controllers yet, but from what I got, they could (possibly greatly) simplify how lit-state checks state changes and re-trigger a requestUpdate.

tommillard commented 3 years ago

I agree with the above, but having played with controllers I’m still using lit-state.

The biggest difference I see between them is that it seems like a controller is almost just an extension of the lit element. Or to put it another way, you have 1 controller for 1 element.

The great advantage of lit-state is that multiple elements can hook into a single state object.

christophe-g commented 3 years ago

The great advantage of lit-state is that multiple elements can hook into a single state object.

Hmm, I think the idea would be to use the controller(s) as an interface between ONE state object and multiple elements. If that is not possible, forget about my suggestion ; )

gitaarik commented 3 years ago

Yes, I guess your suggestion would be to use Lit controllers inside LitState?

justinfagnani commented 2 years ago

The idea would be to use a controller instead of a mixin to connect a component to a store:

Translating from the readme example, you could do this:

import {LitElement, html} from 'lit-element';
import {StateController} from 'lit-element-state';
import {myState} from './my-state.js';

class MyComponent extends LitElement {
  private _state = new StateController(this);

  render() {
    return html`
      <h1>Counter: ${myState.counter}</h1>
      <button @click=${() => myState.counter++}></button>
    `;
  }

}

but perhaps it would be nice to have a direct connection between a component and the state it uses so you could also pass the state to the controller:

class MyComponent extends LitElement {
  private _state = new StateController(this, [myState]);
}
madeInLagny commented 1 year ago

@justinfagnani Hey Justin. I am struggling to develop state management with Lit reactive controller. Is there some (non TS) template that I can use to get started ?

christophe-g commented 1 year ago

Hey @madeInLagny

Tu peux jeter un coup d'oeil at https://github.com/lit-apps/lit-app/tree/main/packages/state

Source is TS though.

madeInLagny commented 1 year ago

This is great and really what I am looking for. But I'd like to use a non TS version. Is anyone aware of an existing repo?

christophe-g commented 1 year ago

I am sure you know this, but you can consume this in a js project. The only thing that might be offsetting is the use of decorators. You can still declare state properties as static properties of the State (exactly as you would do for a Lit-Element) - without decorators.

On Wed, May 3, 2023 at 3:10 PM madeInLagny @.***> wrote:

This is great and really what I am looking for. But I'd like to use a non TS version. Is anyone aware of an existing repo?

— Reply to this email directly, view it on GitHub https://github.com/gitaarik/lit-state/issues/7#issuecomment-1533006110, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAI5FNLZLO33ARRBUZGCAWDXEJKMJANCNFSM43S36TGQ . You are receiving this because you were mentioned.Message ID: @.***>

--

https://preignition.org/

Christophe Geiser / CTO

We are defined by the lines we choose to cross or to be confined by

Co-Founder of preignition.org / accessiblesurveys.com

justinfagnani commented 1 year ago

Controllers don't have anything to do with TypeScript. They're just objects that call .addController() on the host element, like the example I showed above, or the example here: https://lit.dev/docs/composition/controllers/ (just flip the JS/TS switch to JS).

Then you implement controller callbacks like hostUpdate().

Is there anything specific you're having problems with?

This discussion might be off-topic for this repo/thread though. Feel free to open something in https://github.com/lit/lit/discussions