Lit playground downloaded code don't run locally.

[abhijeet-shelhalkar]

I downloaded my-timer files from Lit playground (https://lit.dev/playground/#sample=docs/what-is-lit)
what I found when I unzip the folder:

1. my-timer.ts
2. icons.ts
3. index.html
4. package.json

download package.json contains below dependencies:

{ "dependencies": { "lit": "^2.0.0", "@lit/reactive-element": "^1.0.0", "lit-element": "^3.0.0", "lit-html": "^2.0.0" } }

I removed the above package.json and added another package.json file suggested by (https://codelabs.developers.google.com/codelabs/the-lit-path#1) VS Code setup section.

here is my new package.json file (https://gist.github.com/e111077/c9d4512dcc35f483abbebf95da24609b)

also added tsconfig.json file as I am getting errors for typescript. also added web-dev-server as suggested
after doing all the above step I run the below command npm run serve, but nothing is on http://localhost:8000/
I don't know what am I missing?

my latest code is here (https://github.com/abhijeet-shelhalkar/my-timer-lit).
please guide me through the right steps.

[augustjk]

This is something we do want to make more seamless down the line. lit/lit.dev#690

You've got most of the needed pieces there but I don't see typescript as a dev dependency in your package.json. You could have it installed globally but I'd recommend installing it for the project.

npm i -D typescript

You'd then want to run npx tsc to compile the .ts files to .js so the browser can pick it up. You can also do npx tsc --watch to keep it running in watch mode so any changes you make to the .ts files will automatically be compiled.

Your tsconfig file should also include "useDefineForClassFields": false for the @property decorator to work. https://lit.dev/docs/components/decorators/#decorators-typescript

[e111077]

We should work on making this work right out of the box

[abhijeet-shelhalkar]

Yes I have Installed typescript globally, and using tsc --watch command timers were coming on the screen but they were not working i.e.(play/pause & reset buttons not working) but after adding "useDefineForClassFields": false in tsconfig.json file it's working perfectly now.

Thanks

[ynxtynxt]

Can the playground have support for decorators in JS?

[e111077]

decorators are still not in native quite yet. The proposal is in stage 3, and we want to make sure that the playground does no special transformations in JS except for bare module specifiers conversions.