JS example on the first page more verbose than TS version

[LAC-Tech]

Javascript version could just be:

import {html, css, LitElement} from 'lit';

export class SimpleGreeting extends LitElement {
  static styles = css`p { color: blue }`;

  static properties = {
    name: {type: String}
  }

  constructor() {
    super();
    this.name = 'Somebody';
  }

  render() {
    return html`<p>Hello, ${this.name}!</p>`;
  }
}

customElements.define('simple-greeting', SimpleGreeting);

Styles and properties don't need to be getter functions, do they? This saves 4 lines and looks a bit nicer.

I get that it's still not as nice as the TS version without decorators, but no need to make it more long-winded than it needs to be.

[arthurevans]

Thanks for opening the issue. Yeah, this is unfortunate. If I understand correctly, the issue is that Safari didn't support static class fields until very recently (a couple of months ago, according to caniuse.com). Our current docs say that you shouldn't need to compile stuff for Safari 12+, but if you use static class fields, you will need to compile.

This seems like something we may want to update in the near future as the usage share for Safari 12 goes down. Because the static class fields do look nicer and they work fine with this one annoying caveat--that you'll need to compile them out for some fairly new browsers.

[AndrewJakubowicz]

Thank you! This has now been addressed by #495.

Homepage JS example is now shorter.