stateVar decorator is readonly

[rubenpoppe]

When using the stateVar decorator I get the error that I can't assign to a read only property. (I am using typescript if that could be the problem.)

import { LitState, stateVar } from 'lit-element-state';

class State extends LitState {
    @stateVar()
    counter = 0
}

export const state = new State();

[gitaarik]

Hey Ruben, it could be because of TypeScript, did you try it without?

On 10/26/21 10:55, Ruben Poppe wrote:

When using the stateVar decorator I get the error that I can't assign to a read only property. (I am using typescript if that could be the problem.)

import { LitState, stateVar } from 'lit-element-state';

class State extends LitState { @stateVar() counter = 0 }

export const state = new State();

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/gitaarik/lit-state/issues/9, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAS3DHWM6UINXSPNF66ZUHDUIZ3IPANCNFSM5GXHPVGQ. Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

[rubenpoppe]

I'll rig up an all javascript project and let you know

[rubenpoppe]

That works with babel, like the demo in the docs. There must go something wrong when typescript compiles the decorator to javascript.

[gitaarik]

Interesting. Do decorators normally work in TypeScript? If so, maybe there is something different from the way LitState implements decorators?

On 10/27/21 16:35, Ruben Poppe wrote:

That works with babel, like the demo in the docs. There must go something wrong when typescript compiles the decorator to javascript.

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/gitaarik/lit-state/issues/9#issuecomment-952993369, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAS3DHRZD47AELA5SHQTGCLUJAL2ZANCNFSM5GXHPVGQ. Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

[rubenpoppe]

With experimentalDecorators in tsconfig it does. I don't really know much about lit and decorators, but when I have more time I'll maybe look into it some more.

[gitaarik]

Ok. At the moment I'm too busy to look into this issue.

[arulselvan]

+1

Tried this lib today with my Vite + Lit 2.0 + Typescript project setup, but overall this lib is very promising for Lit state management, thanks!

[arulselvan]

using without Decorator https://gitaarik.github.io/lit-state/build/#basic-usage/no-decorator-usage/ working fine. will try later to play around more, again thanks for the awesome lib!

[gitaarik]

Hi @arulselvan, nice that it's working without decorators :). I guess decorator support works a bit different in TypeScript. Maybe one of us will find a way to make it work in TypeScript at some point.

[nesl247]

I just found this library and issue and was curious about it. I see typescript 5.0 added support for this. https://devblogs.microsoft.com/typescript/announcing-typescript-5-0/. I just wanted to update this issue in case anyone was interested. I haven’t tested it out yet but it should work I imagine.