[transformers ] Add @lit/ts-transformers package with idiomatic decorator transform #1919

aomarks · 2021-05-21T00:07:07Z

Adds a @lit/ts-transformers package to contain TypeScript transforms.

This PR starts with the "idiomatic" decorator tansform, which transforms all Lit decorators into JavaScript idiomatic style.

The initial motivating use case for this transform is to automatically generate https://lit.dev examples in non-decorator JavaScript, controlled by a JS/TS switch (lit/lit.dev#332).

There may also be some size/performance improvements by using this transform, but we'll want to benchmark before saying that -- plus there's more we can do for this goal, such as defining getters/setters for reactive properties too.

Fixes #1886

Example

Before

import {LitElement, html} from 'lit';
import {
  customElement,
  property,
  state,
  query,
  eventOptions,
} from 'lit/decorators.js';

@customElement('simple-greeting')
class SimpleGreeting extends LitElement {
  @property()
  name = 'Somebody';

  @state()
  private counter = 0;

  @query('#myButton')
  button?: HTMLButtonElement;

  render() {
    return html`
      <button id="myButton" @click=${this._onClick}>
        Hello ${this.name} (${this.counter})
      </button>
    `;
  }

  @eventOptions({capture: true})
  _onClick(event: Event) {
    this.counter++;
    console.log('click', event.target);
  }
}

After

import {LitElement, html} from 'lit';

class MyElement extends LitElement {
  static get properties() {
    return {
      str: {},
      num: {state: true},
    };
  }

  get button() {
    return this.renderRoot?.querySelector('#myButton');
  }

  constructor() {
    super(...arguments);
    this.name = 'Somebody';
    this.counter = 0;
    this._onClick = {
      handleEvent: (event) => {
        console.log('click', event.target);
      },
      capture: true,
    };
  }

  render() {
    return html`
      <button id="myButton" @click=${this._onClick}>
        Hello ${this.name} (${this.counter})
      </button>
    `;
  }
}

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

github-actions · 2021-05-21T00:07:30Z

📊 Tachometer Benchmark Results

Summary

nop-update

lit-html-kitchen-sink: unsure 🔍 -5% - +4% (-2.12ms - +1.80ms)
^{this-change vs tip-of-tree}

render

lit-element-list: unsure 🔍 -5% - +1% (-6.43ms - +1.78ms)
^{this-change vs tip-of-tree}
lit-html-kitchen-sink: unsure 🔍 -3% - +5% (-1.66ms - +2.75ms)
^{this-change vs tip-of-tree}
lit-html-repeat: unsure 🔍 -4% - +6% (-0.66ms - +0.91ms)
^{this-change vs tip-of-tree}
lit-html-template-heavy: unsure 🔍 -1% - +4% (-1.03ms - +3.21ms)
^{this-change vs tip-of-tree}
reactive-element-list: unsure 🔍 -6% - +5% (-4.81ms - +3.83ms)
^{this-change vs tip-of-tree}

update

lit-element-list: unsure 🔍 -2% - +1% (-22.43ms - +11.64ms)
^{this-change vs tip-of-tree}
lit-html-kitchen-sink: unsure 🔍 -6% - +4% (-8.18ms - +6.01ms)
^{this-change vs tip-of-tree}
lit-html-repeat: unsure 🔍 -2% - +2% (-10.56ms - +9.21ms)
^{this-change vs tip-of-tree}
lit-html-template-heavy: unsure 🔍 -2% - +2% (-3.58ms - +4.29ms)
^{this-change vs tip-of-tree}
reactive-element-list: unsure 🔍 -2% - +1% (-21.95ms - +8.36ms)
^{this-change vs tip-of-tree}

update-reflect

lit-element-list: unsure 🔍 -1% - +3% (-10.56ms - +29.73ms)
^{this-change vs tip-of-tree}
reactive-element-list: unsure 🔍 -2% - +2% (-16.71ms - +23.37ms)
^{this-change vs tip-of-tree}

Results

lit-element-list

Browser: chrome-headless 92.0.4515.107
Sample size: 50
Built by: Benchmarks #1618
Commit: c154d34

render

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	117.43ms - 123.55ms	-	unsure 🔍 -5% - +1% -6.43ms - +1.78ms	faster ✔ 23% - 28% 37.51ms - 47.06ms
tip-of-tree tip-of-tree	120.07ms - 125.56ms	unsure 🔍 -2% - +5% -1.78ms - +6.43ms	-	faster ✔ 22% - 27% 35.38ms - 44.54ms
previous-release previous-release	159.10ms - 166.45ms	slower ❌ 31% - 40% 37.51ms - 47.06ms	slower ❌ 28% - 37% 35.38ms - 44.54ms	-

update

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	995.93ms - 1020.08ms	-	unsure 🔍 -2% - +1% -22.43ms - +11.64ms	faster ✔ 7% - 9% 70.64ms - 104.75ms
tip-of-tree tip-of-tree	1001.38ms - 1025.42ms	unsure 🔍 -1% - +2% -11.64ms - +22.43ms	-	faster ✔ 6% - 9% 65.28ms - 99.31ms
previous-release previous-release	1083.65ms - 1107.74ms	slower ❌ 7% - 10% 70.64ms - 104.75ms	slower ❌ 6% - 10% 65.28ms - 99.31ms	-

update-reflect

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	1040.38ms - 1069.46ms	-	unsure 🔍 -1% - +3% -10.56ms - +29.73ms	faster ✔ 2% - 5% 17.07ms - 54.80ms
tip-of-tree tip-of-tree	1031.39ms - 1059.27ms	unsure 🔍 -3% - +1% -29.73ms - +10.56ms	-	faster ✔ 3% - 6% 27.12ms - 63.92ms
previous-release previous-release	1078.84ms - 1102.87ms	slower ❌ 2% - 5% 17.07ms - 54.80ms	slower ❌ 3% - 6% 27.12ms - 63.92ms	-

lit-html-kitchen-sink

Browser: chrome-headless 92.0.4515.107
Sample size: 30
Built by: Benchmarks #1618
Commit: c154d34

render

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	49.76ms - 53.11ms	-	unsure 🔍 -3% - +5% -1.66ms - +2.75ms	faster ✔ 14% - 20% 8.46ms - 12.78ms
tip-of-tree tip-of-tree	49.46ms - 52.32ms	unsure 🔍 -5% - +3% -2.75ms - +1.66ms	-	faster ✔ 15% - 21% 9.19ms - 13.14ms
previous-release previous-release	60.69ms - 63.42ms	slower ❌ 16% - 25% 8.46ms - 12.78ms	slower ❌ 18% - 26% 9.19ms - 13.14ms	-

update

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	132.74ms - 141.40ms	-	unsure 🔍 -6% - +4% -8.18ms - +6.01ms	faster ✔ 0% - 9% 0.03ms - 13.73ms
tip-of-tree tip-of-tree	132.54ms - 143.77ms	unsure 🔍 -4% - +6% -6.01ms - +8.18ms	-	unsure 🔍 -9% - +1% -13.52ms - +1.94ms
previous-release previous-release	138.64ms - 149.26ms	unsure 🔍 -0% - +10% +0.03ms - +13.73ms	unsure 🔍 -2% - +10% -1.94ms - +13.52ms	-

nop-update

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	44.01ms - 46.62ms	-	unsure 🔍 -5% - +4% -2.12ms - +1.80ms	slower ❌ 1% - 10% 0.42ms - 4.29ms
tip-of-tree tip-of-tree	44.01ms - 46.94ms	unsure 🔍 -4% - +5% -1.80ms - +2.12ms	-	slower ❌ 1% - 11% 0.47ms - 4.56ms
previous-release previous-release	41.54ms - 44.38ms	faster ✔ 1% - 9% 0.42ms - 4.29ms	faster ✔ 1% - 10% 0.47ms - 4.56ms	-

lit-html-repeat

Browser: chrome-headless 92.0.4515.107
Sample size: 30
Built by: Benchmarks #1618
Commit: c154d34

render

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	14.51ms - 15.88ms	-	unsure 🔍 -4% - +6% -0.66ms - +0.91ms	faster ✔ 11% - 20% 1.89ms - 3.62ms
tip-of-tree tip-of-tree	14.69ms - 15.45ms	unsure 🔍 -6% - +4% -0.91ms - +0.66ms	-	faster ✔ 13% - 19% 2.23ms - 3.52ms
previous-release previous-release	17.43ms - 18.47ms	slower ❌ 12% - 24% 1.89ms - 3.62ms	slower ❌ 14% - 24% 2.23ms - 3.52ms	-

update

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	460.24ms - 473.82ms	-	unsure 🔍 -2% - +2% -10.56ms - +9.21ms	faster ✔ 28% - 32% 186.32ms - 216.13ms
tip-of-tree tip-of-tree	460.52ms - 474.89ms	unsure 🔍 -2% - +2% -9.21ms - +10.56ms	-	faster ✔ 28% - 32% 185.47ms - 215.64ms
previous-release previous-release	654.99ms - 681.52ms	slower ❌ 40% - 47% 186.32ms - 216.13ms	slower ❌ 39% - 46% 185.47ms - 215.64ms	-

lit-html-template-heavy

Browser: chrome-headless 92.0.4515.107
Sample size: 50
Built by: Benchmarks #1618
Commit: c154d34

render

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	81.09ms - 84.01ms	-	unsure 🔍 -1% - +4% -1.03ms - +3.21ms	faster ✔ 14% - 18% 13.79ms - 17.43ms
tip-of-tree tip-of-tree	79.92ms - 82.99ms	unsure 🔍 -4% - +1% -3.21ms - +1.03ms	-	faster ✔ 15% - 19% 14.82ms - 18.59ms
previous-release previous-release	97.07ms - 99.25ms	slower ❌ 16% - 21% 13.79ms - 17.43ms	slower ❌ 18% - 23% 14.82ms - 18.59ms	-

update

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	172.87ms - 178.14ms	-	unsure 🔍 -2% - +2% -3.58ms - +4.29ms	faster ✔ 9% - 12% 16.54ms - 24.14ms
tip-of-tree tip-of-tree	172.22ms - 178.07ms	unsure 🔍 -2% - +2% -4.29ms - +3.58ms	-	faster ✔ 9% - 13% 16.69ms - 24.71ms
previous-release previous-release	193.11ms - 198.58ms	slower ❌ 9% - 14% 16.54ms - 24.14ms	slower ❌ 9% - 14% 16.69ms - 24.71ms	-

reactive-element-list

Browser: chrome-headless 92.0.4515.107
Sample size: 50
Built by: Benchmarks #1617
Commit: 26ddb6f

render

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	83.92ms - 86.29ms	-	unsure 🔍 -2% - +4% -1.48ms - +3.23ms	unsure 🔍 -2% - +2% -2.09ms - +1.67ms
tip-of-tree tip-of-tree	82.19ms - 86.26ms	unsure 🔍 -4% - +2% -3.23ms - +1.48ms	-	unsure 🔍 -4% - +2% -3.59ms - +1.42ms
previous-release previous-release	83.86ms - 86.77ms	unsure 🔍 -2% - +2% -1.67ms - +2.09ms	unsure 🔍 -2% - +4% -1.42ms - +3.59ms	-

update

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	1051.77ms - 1077.95ms	-	unsure 🔍 -2% - +2% -17.11ms - +21.37ms	unsure 🔍 -2% - +2% -18.85ms - +17.45ms
tip-of-tree tip-of-tree	1048.63ms - 1076.83ms	unsure 🔍 -2% - +2% -21.37ms - +17.11ms	-	unsure 🔍 -2% - +2% -21.72ms - +16.06ms
previous-release previous-release	1052.99ms - 1078.13ms	unsure 🔍 -2% - +2% -17.45ms - +18.85ms	unsure 🔍 -2% - +2% -16.06ms - +21.72ms	-

update-reflect

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	1128.62ms - 1153.53ms	-	unsure 🔍 -2% - +1% -26.65ms - +11.49ms	unsure 🔍 -2% - +1% -24.95ms - +11.49ms
tip-of-tree tip-of-tree	1134.21ms - 1163.10ms	unsure 🔍 -1% - +2% -11.49ms - +26.65ms	-	unsure 🔍 -2% - +2% -18.78ms - +20.49ms
previous-release previous-release	1134.50ms - 1161.10ms	unsure 🔍 -1% - +2% -11.49ms - +24.95ms	unsure 🔍 -2% - +2% -20.49ms - +18.78ms	-

_{tachometer-reporter-action v2 for Benchmarks}

… package

packages/transformers/src/lit-transformer.ts

packages/transformers/src/tests/idiomatic-test.ts

packages/transformers/src/tests/compile-ts-fragment.ts

kevinpschaaf · 2021-05-25T18:03:02Z

Suggestion for more idiomatic TS -> JS without using decorators.

<div @click=${{passive: true, handleEvent: e => this.handleClick(e)}>

aomarks · 2021-06-15T22:39:37Z

Suggestion for more idiomatic TS -> JS without using decorators.
<div @click=${{passive: true, handleEvent: e => this.handleClick(e)}>

Done, as long as the method is private. Otherwise, we'll annotate the prototype method directly (in case it's e.g. used by a subclass).

aomarks · 2021-06-15T22:45:07Z

@rictic @justinfagnani @kevinpschaaf PTAL

I've addressed all comments, and made some additional improvements. Main items:

The @eventOptions decorator now transforms corresponding references inside Lit template event bindings to the idiomatic syntax we agreed on offline (@click=${{handleEvent: (e) => this._onClick(e), capture: true}}), as long as the method is private. If it's not private, we annotate the prototype method directly (in case e.g. it is used in an event binding by a subclass).

Note this required a little refactoring, since we now need to conditionally transform Lit templates anywhere in the class based on this decorator. The general pattern I came up with for this is to allow visitors to spawn new visitors that will also run while we're still scoped to the class.
We now actually track imports from Lit modules, and check for decorators/html function with a type checker symbol lookup, instead of making naming assumptions. Works if the import is aliased, too.
We now skip full traversal of files if we don't see any relevant Lit imports right away.
A bit of refactoring/reorganization: added LitFileContext and LitClassContext classes, which track state for files/classes respectively.

changeset-bot · 2021-07-15T17:45:10Z

⚠️ No Changeset found

Latest commit: 823e38a

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

package.json

packages/transformers/package.json

packages/transformers/src/lit-transformer.ts

packages/transformers/src/visitor.ts

packages/transformers/src/lit-transformer.ts

packages/transformers/src/tests/idiomatic-test.ts

aomarks

All comments addressed @justinfagnani PTAL

package.json

packages/transformers/src/lit-transformer.ts

packages/transformers/src/visitor.ts

packages/transformers/src/lit-transformer.ts

packages/transformers/package.json

aomarks requested a review from justinfagnani May 21, 2021 00:07

google-cla bot added the cla: yes label May 21, 2021

aomarks force-pushed the transformers branch 3 times, most recently from 35ac4ff to bf208d7 Compare May 21, 2021 00:56

aomarks added 3 commits May 20, 2021 18:21

Create new @lit/transformers package

fad9388

Add README

61fe0e3

Move compileTsFragment utility from localize-tools into /transformers…

653b914

… package

rictic reviewed May 21, 2021

View reviewed changes

@CustomElement decorator transformer

1095f34

aomarks force-pushed the transformers branch from baeb7a5 to d7f85cf Compare May 21, 2021 01:43

@Property decorator transformer

9d59665

aomarks force-pushed the transformers branch from 33c1e1d to 2b9c69c Compare May 21, 2021 02:02

aomarks added 7 commits May 20, 2021 19:03

@State decorator transformer

3ff6ae9

@query decorator transformer

c1511b2

@QueryAll decorator transformer

6133113

@queryAsync decorator transformer

6113887

@queryAssignedNodes decorator transformer

7e22e6d

@eventOptions decorator transformer

f14b6d2

Remove all uses of getText()

43e9661

aomarks force-pushed the transformers branch from 2b9c69c to 43e9661 Compare May 21, 2021 02:03

rictic reviewed May 21, 2021

View reviewed changes

packages/transformers/src/tests/compile-ts-fragment.ts Outdated Show resolved Hide resolved

aomarks added 2 commits May 20, 2021 19:20

Delete compile-ts-fragment.ts that should have moved in earlier commit

69235cc

Handle decorator imports more robustly

8f463da

aomarks force-pushed the transformers branch from 59d69a7 to 8f463da Compare May 21, 2021 06:43

justinfagnani changed the title ~~Add @lit/transformers package with idiomatic decorator transform~~ [transformers ] Add @lit/transformers package with idiomatic decorator transform May 25, 2021

aomarks added 2 commits June 15, 2021 11:37

Fix incorrect test import

fddb8fe

Clean up visitor interfaces and location, and use implements

f9c045e

aomarks added 3 commits June 15, 2021 11:38

Refactor into lit file and class contexts

fc5fce1

Add readonly modifiers

4ccf8dc

Misc cleanup

b1f856a

aomarks requested a review from rictic June 15, 2021 22:39

aomarks mentioned this pull request Jun 24, 2021

Add javascript examples to docs #1976

Closed

Merge branch 'main' into transformers

d7ecbbf

Add missing dependency

2f6ff72

justinfagnani reviewed Jul 15, 2021

View reviewed changes

aomarks added 7 commits July 15, 2021 15:33

Improve top-level test script

5b0518c

Use inline 'as void' pattern instead of unreachable

00df50d

Clean up and rename _analyzeImportDeclaration method

6320b0e

Clarify nodesToRemove check

fd51d5e

Add TODO about re-exports

ec25346

Expand LitTransformer class documentation

47adc41

Rename @lit/transformers to @lit/ts-transformers

f0d6edd

aomarks commented Jul 16, 2021

View reviewed changes

aomarks requested a review from justinfagnani July 16, 2021 00:19

Merge branch 'main' into transformers

6deb50a

aomarks changed the title ~~[transformers ] Add @lit/transformers package with idiomatic decorator transform~~ [transformers ] Add @lit/ts-transformers package with idiomatic decorator transform Jul 29, 2021

aomarks added 3 commits July 29, 2021 15:31

Error on invalid Lit module import style

7a2e93c

More concise output for caching @query decorator

4a1ad16

Remove unnecessary attribute:false from state decorator transform

32e7236

justinfagnani approved these changes Jul 30, 2021

View reviewed changes

Remove x typo

823e38a

aomarks force-pushed the transformers branch from 3e31b68 to 823e38a Compare July 30, 2021 00:49

aomarks merged commit 2f6dc41 into main Jul 30, 2021

aomarks deleted the transformers branch July 30, 2021 01:04

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[transformers ] Add @lit/ts-transformers package with idiomatic decorator transform #1919

[transformers ] Add @lit/ts-transformers package with idiomatic decorator transform #1919

aomarks commented May 21, 2021 •

edited

Loading

github-actions bot commented May 21, 2021 •

edited

Loading

📊 Tachometer Benchmark Results

Summary

nop-update

render

update

update-reflect

Results

render

update

update-reflect

render

update

nop-update

render

update

render

update

render

update

update-reflect

kevinpschaaf commented May 25, 2021 •

edited

Loading

aomarks commented Jun 15, 2021

aomarks commented Jun 15, 2021 •

edited

Loading

changeset-bot bot commented Jul 15, 2021 •

edited

Loading

aomarks left a comment

[transformers ] Add @lit/ts-transformers package with idiomatic decorator transform #1919

[transformers ] Add @lit/ts-transformers package with idiomatic decorator transform #1919

Conversation

aomarks commented May 21, 2021 • edited Loading

Example

Before

After

github-actions bot commented May 21, 2021 • edited Loading

📊 Tachometer Benchmark Results

Summary

nop-update

render

update

update-reflect

Results

render

update

update-reflect

render

update

nop-update

render

update

render

update

render

update

update-reflect

kevinpschaaf commented May 25, 2021 • edited Loading

aomarks commented Jun 15, 2021

aomarks commented Jun 15, 2021 • edited Loading

changeset-bot bot commented Jul 15, 2021 • edited Loading

⚠️ No Changeset found

aomarks left a comment

Choose a reason for hiding this comment

aomarks commented May 21, 2021 •

edited

Loading

github-actions bot commented May 21, 2021 •

edited

Loading

kevinpschaaf commented May 25, 2021 •

edited

Loading

aomarks commented Jun 15, 2021 •

edited

Loading

changeset-bot bot commented Jul 15, 2021 •

edited

Loading