Final JS docs fixes and launch #501
Conversation
aomarks
requested review from
justinfagnani,
arthurevans and
AndrewJakubowicz
|
A live preview of this PR will be available at the URL(s) below. https://pr501-755ed87---lit-dev-5ftespv5na-uc.a.run.app/ |
aomarks
force-pushed
the
final-js-stuff
branch
2 times, most recently
from
e07e535 to
3b738b6
Compare
Leaving the JS verison hand-rolled for now because of the imperfect position of the static styles vs static properties block. Will address in upcoming ts-decorators change.
This actually broke in #495 where I forgot to update these ranges.
…old/hide comments
…ew more switchable samples.
aomarks
force-pushed
the
final-js-stuff
branch
from
3b738b6 to
755ed87
Compare
| @@ -42,7 +42,7 @@ Some things to note: | |||
| * Lit’s [expressive, declarative templates](/docs/templates/overview/) (utilizing JavaScript tagged template literals) make it easy to describe how a component should be rendered. | |||
| * [Reactive properties](/docs/components/properties/) represent a component’s public API and/or internal state; your component automatically re-renders whenever a reactive property changes. | |||
| * [Styles](/docs/components/styles) are scoped by default, keeping your CSS selectors simple and ensuring that your component’s styling won’t pollute (or be polluted by) the surrounding context. | |||
| * This example is in TypeScript, but TypeScript is 100% optional–Lit works great in JavaScript, too. | |||
| * Lit works great in vanilla JavaScript, or you can use TypeScript for more even better ergonomics by using decorators and strong types. | |||
There was a problem hiding this comment.
maybe "strong types" -> "type declarations"?
|
Thanks for the easy-to-review commits! |
| @@ -42,7 +42,7 @@ Some things to note: | |||
| * Lit’s [expressive, declarative templates](/docs/templates/overview/) (utilizing JavaScript tagged template literals) make it easy to describe how a component should be rendered. | |||
| * [Reactive properties](/docs/components/properties/) represent a component’s public API and/or internal state; your component automatically re-renders whenever a reactive property changes. | |||
| * [Styles](/docs/components/styles) are scoped by default, keeping your CSS selectors simple and ensuring that your component’s styling won’t pollute (or be polluted by) the surrounding context. | |||
| * This example is in TypeScript, but TypeScript is 100% optional–Lit works great in JavaScript, too. | |||
| * Lit works great in vanilla JavaScript, or you can use TypeScript for more even better ergonomics by using decorators and strong types. | |||
There was a problem hiding this comment.
nit: "for more even better"
There was a problem hiding this comment.
But it is more even better!
(Fixed.)
Oh yeah, that's very related to a bug that I've been meaning to address for a long time! You can actually undo between files too, which is totally weird! It's because we use a single CodeMirror instance for each Playground, and just swap out the code + language highlight mode. We need to either manage undo history and swap those in and out too if possible, otherwise maintain a separate CodeMirror instance for each file: google/playground-elements#154 |
Replace the separate JavaScript vs TypeScript "Hello World" Playground examples with a unified one. I'm keeping the JS output hand-rolled for this example for now, because the
static propertiesblock isn't in the perfect position, and this is a very prominent example. Will fix in [ts-transformers] Improve position of static properties and add blank line lit#2159 as followup.Fix home page highlight positions when in JS mode. This actually broke in Convert static styles/properties getter to class fields #495 where I forgot to update the ranges for the yellow-highlight effect.
Added a check for generated samples that have lost or re-ordered playground fold/hide comments. This should help detect weird cases that might need hand-rolling going forward.
Hand-roll two examples that are losing fold comments, and move one comment to be trailing so that it's not lost, that I found via the above check. Filed [ts-transformers] Some comments are not preserved lit#2158 to hopefully address in the transformers in the future.
Remove some unnecessary TypeScript vs JavaScript language, and add a few more switchable samples.
Remove
jsSamplesmod feature flag to launch JS docs.Fixes #332
Fixes #490