Add Rapid prototyping example to Getting Started documentation

[AndrewJakubowicz]

From Discord: https://discord.com/channels/1012791295170859069/1164952205351194726/1164952205351194726

Task is complete when:

• Section is added specifically for rapid non-production prototyping in JavaScript non-build environments.

Maybe recommend something like:

import { LitElement, html, css } from "https://esm.sh/lit";
import { property, state, customElement } from "https://esm.sh/lit/decorators.js";

Note: Do the decorators work in the example above?

[quincarter]

Yes, Decorators work
https://codepen.io/quincarter/pen/poGoLVd

Just note that I've set my codepen preprocessor for JS to be TypeScript

[AndrewJakubowicz]

I started down this road, but something a bit challenging with CodePen (and JSFiddle), is that you can't seem to set the TypeScript/Babel configuration. This doesn't make it a pure HTML setup.

Currently any codepen starter must implicitly use experimentalDecorators: true. It would be ideal if we could explicitly set that assumption so in the future pens do not break if CodePen flips the config.

It may be preferable to wait until CodePen updates to Babel 7.23.0, which includes Decorator Metadata. Then we could create a small template that uses standard decorators which be forward compatible.

[quincarter]

I started down this road, but something a bit challenging with CodePen (and JSFiddle), is that you can't seem to set the TypeScript/Babel configuration. This doesn't make it a pure HTML setup.

Currently any codepen starter must implicitly use experimentalDecorators: true. It would be ideal if we could explicitly set that assumption so in the future pens do not break if CodePen flips the config.

It may be preferable to wait until CodePen updates to Babel 7.23.0, which includes Decorator Metadata. Then we could create a small template that uses standard decorators which be forward compatible.

I am okay with this approach. Instead of using codepen, could we at least have this setup in the lit playground somehow? Or even just a text snippet would probably suffice. However, I know esm.sh and esm.run aren't affiliated with you guys so I am 100% fine with whatever the decision is as long as there is something in the docs for future guidance for folks trying to use Lit outside of a local dev environment.

[justinfagnani]

I think we should just use plain JS with the bins like jsbin and CodePen. Stackblitz and CodeSandbox let you fully control your setup, including a tsconfig.

We don't need an example for every bin-alike though.

[quincarter]

I think the bins have a purpose. 💯

With Decorators still not 100% stable yet in all browsers with vanilla JS, should it just be a note or something to use TS?

Feel free to use this template if you want. It's got TS so feel free to modify to use just JS.

[augustjk]

Instead of using codepen, could we at least have this setup in the lit playground somehow?

lit playground already loads all bare specifiers from unpkg with the playground worker handling bare module resolution, and it can also load from other CDNs via imports too like we do for the React example https://lit.dev/playground/#sample=examples/react-basics
(though we do a bit of hidden magic to make typescript not complain about the the url import)

though i recently found that esm.sh has a playground very similar to playground-elements that uses monaco and their own cdn, which also gets types from @types packages too! 🤯 https://code.esm.sh/ it just doesn't have a share feature so it's really just a transient playground.

[quincarter]

I think codepen and jsfiddle is widely used enough that it will suffice for a use case example; and you could share a template from lit as a starter for people.

That esm playground is pretty cool to see with a base react project spun up.

The vite examples on their getting started page should probably be worth noting too. They use stackblitz so that wouldn't use the esm.sh stuff, but worth noting as a starting point (#1236). As well as the open-wc starter (however it's pretty outdated IIRC).

[augustjk]

Yup definitely agree that we should highlight easy options like that on getting started. The different ways to try things out are so numerous these days! Adding vite is on our radar too! #1236

[quincarter]

I've personally used the lit-ts starter and it was pretty bare bones but got me started using vite. Very easy to work with and built on top of rollup so it's easy to implement in existing rollup projects.