[lit-labs/compiler] only compile the valid html tag function imported from lit #4055

AndrewJakubowicz · 2023-07-28T06:26:31Z

Issue: #189
RFC: lit/rfcs#21
Full prototype PR: #3984

PR made to replace #4050 (which was not granular or specific enough).

Why

This change exists to restrict compilation down to our (lit or lit-html) html tag function. This prevents miscompilation by ignoring the static.js html tag function (and others).

Note this change doesn't cover all cases, e.g. reassignment is not covered because it became far too complex to include. A test was checked in with TODO.

How

Add a single file simple TypeScript TypeChecker that provides a much more robust isLitTemplate method.

Cases handled in this change:

import {html} from 'lit';                     // Detects: html``
import {html as h} from 'lit';                // Detects: h``
import {html as svg, svg as html} from 'lit'; // Detects svg``
import * as lit from 'lit';                   // Detects lit.html``

Anything else does not get compiled. E.g.:

import {html} from 'lit-html/static.js"; // html`` will not be detected as a compilable template.

Test plan

Added goldens.

changeset-bot · 2023-07-28T06:26:34Z

🦋 Changeset detected

Latest commit: d0a371d

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 0 packages

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

Not sure what this means? Click here to learn what changesets are.

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

github-actions · 2023-07-28T06:26:46Z

📊 Tachometer Benchmark Results

Summary

nop-update

this-change, tip-of-tree, previous-release: unsure 🔍 -7% - +6% (-1.43ms - +1.24ms)
^{this-change vs tip-of-tree}

render

this-change: 68.36ms - 71.14ms
this-change, tip-of-tree, previous-release: unsure 🔍 -6% - +2% (-1.69ms - +0.63ms)
^{this-change vs tip-of-tree}
this-change, tip-of-tree, previous-release: unsure 🔍 -2% - +1% (-1.12ms - +0.36ms)
^{this-change vs tip-of-tree}
this-change, tip-of-tree, previous-release: unsure 🔍 -3% - +2% (-1.57ms - +0.71ms)
^{this-change vs tip-of-tree}

update

this-change: 725.17ms - 734.38ms
this-change, tip-of-tree, previous-release: unsure 🔍 -1% - +8% (-1.01ms - +5.53ms)
^{this-change vs tip-of-tree}
this-change, tip-of-tree, previous-release: unsure 🔍 -1% - +1% (-1.25ms - +1.39ms)
^{this-change vs tip-of-tree}
this-change, tip-of-tree, previous-release: unsure 🔍 -1% - +1% (-3.97ms - +7.45ms)
^{this-change vs tip-of-tree}

update-reflect

this-change: 699.68ms - 705.76ms
this-change, tip-of-tree, previous-release: faster ✔ 0% - 2% (2.10ms - 11.63ms)
^{this-change vs tip-of-tree}

Results

this-change

Browser: chrome-headless 115.0.5790.102
Sample size: 50
Built by: Benchmarks #5113
Commit: d0a371d

render

Version	Avg time	vs
	68.36ms - 71.14ms	-

update

Version	Avg time	vs
	725.17ms - 734.38ms	-

update-reflect

Version	Avg time	vs
	699.68ms - 705.76ms	-

this-change, tip-of-tree, previous-release

Browser: chrome-headless 115.0.5790.102
Sample size: 30
Built by: Benchmarks #5113
Commit: d0a371d

render

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	27.30ms - 28.91ms	-	unsure 🔍 -6% - +2% -1.69ms - +0.63ms	unsure 🔍 -6% - +3% -1.82ms - +0.83ms
tip-of-tree tip-of-tree	27.80ms - 29.47ms	unsure 🔍 -2% - +6% -0.63ms - +1.69ms	-	unsure 🔍 -5% - +5% -1.31ms - +1.38ms
previous-release previous-release	27.54ms - 29.66ms	unsure 🔍 -3% - +7% -0.83ms - +1.82ms	unsure 🔍 -5% - +5% -1.38ms - +1.31ms	-

update

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	70.23ms - 75.15ms	-	unsure 🔍 -1% - +8% -1.01ms - +5.53ms	unsure 🔍 -0% - +9% -0.13ms - +6.28ms
tip-of-tree tip-of-tree	68.29ms - 72.58ms	unsure 🔍 -8% - +1% -5.53ms - +1.01ms	-	unsure 🔍 -3% - +5% -2.16ms - +3.79ms
previous-release previous-release	67.57ms - 71.67ms	unsure 🔍 -9% - +0% -6.28ms - +0.13ms	unsure 🔍 -5% - +3% -3.79ms - +2.16ms	-

nop-update

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	19.46ms - 21.11ms	-	unsure 🔍 -7% - +6% -1.43ms - +1.24ms	unsure 🔍 -4% - +9% -0.78ms - +1.70ms
tip-of-tree tip-of-tree	19.33ms - 21.43ms	unsure 🔍 -6% - +7% -1.24ms - +1.43ms	-	unsure 🔍 -4% - +10% -0.84ms - +1.96ms
previous-release previous-release	18.90ms - 20.75ms	unsure 🔍 -8% - +4% -1.70ms - +0.78ms	unsure 🔍 -10% - +4% -1.96ms - +0.84ms	-

this-change, tip-of-tree, previous-release

Browser: chrome-headless 115.0.5790.102
Sample size: 50
Built by: Benchmarks #5113
Commit: d0a371d

render

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	49.08ms - 50.20ms	-	unsure 🔍 -2% - +1% -1.12ms - +0.36ms	unsure 🔍 -3% - +1% -1.47ms - +0.29ms
tip-of-tree tip-of-tree	49.54ms - 50.51ms	unsure 🔍 -1% - +2% -0.36ms - +1.12ms	-	unsure 🔍 -2% - +1% -1.04ms - +0.63ms
previous-release previous-release	49.55ms - 50.91ms	unsure 🔍 -1% - +3% -0.29ms - +1.47ms	unsure 🔍 -1% - +2% -0.63ms - +1.04ms	-

update

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	101.87ms - 103.87ms	-	unsure 🔍 -1% - +1% -1.25ms - +1.39ms	unsure 🔍 -2% - +1% -1.78ms - +1.36ms
tip-of-tree tip-of-tree	101.94ms - 103.65ms	unsure 🔍 -1% - +1% -1.39ms - +1.25ms	-	unsure 🔍 -2% - +1% -1.76ms - +1.20ms
previous-release previous-release	101.87ms - 104.29ms	unsure 🔍 -1% - +2% -1.36ms - +1.78ms	unsure 🔍 -1% - +2% -1.20ms - +1.76ms	-

this-change, tip-of-tree, previous-release

Browser: chrome-headless 115.0.5790.102
Sample size: 50
Built by: Benchmarks #5113
Commit: d0a371d

render

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	44.19ms - 45.31ms	-	unsure 🔍 -3% - +2% -1.57ms - +0.71ms	unsure 🔍 -3% - +0% -1.52ms - +0.21ms
tip-of-tree tip-of-tree	44.18ms - 46.17ms	unsure 🔍 -2% - +4% -0.71ms - +1.57ms	-	unsure 🔍 -3% - +2% -1.42ms - +0.97ms
previous-release previous-release	44.74ms - 46.06ms	unsure 🔍 -0% - +3% -0.21ms - +1.52ms	unsure 🔍 -2% - +3% -0.97ms - +1.42ms	-

update

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	731.27ms - 739.33ms	-	unsure 🔍 -1% - +1% -3.97ms - +7.45ms	unsure 🔍 -1% - +1% -5.19ms - +6.19ms
tip-of-tree tip-of-tree	729.52ms - 737.61ms	unsure 🔍 -1% - +1% -7.45ms - +3.97ms	-	unsure 🔍 -1% - +1% -6.94ms - +4.47ms
previous-release previous-release	730.78ms - 738.82ms	unsure 🔍 -1% - +1% -6.19ms - +5.19ms	unsure 🔍 -1% - +1% -4.47ms - +6.94ms	-

update-reflect

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	726.74ms - 733.14ms	-	faster ✔ 0% - 2% 2.10ms - 11.63ms	faster ✔ 0% - 1% 1.16ms - 10.74ms
tip-of-tree tip-of-tree	733.27ms - 740.34ms	slower ❌ 0% - 2% 2.10ms - 11.63ms	-	unsure 🔍 -1% - +1% -4.11ms - +5.94ms
previous-release previous-release	732.32ms - 739.46ms	slower ❌ 0% - 1% 1.16ms - 10.74ms	unsure 🔍 -1% - +1% -5.94ms - +4.11ms	-

_{tachometer-reporter-action v2 for Benchmarks}

augustjk

LGTM. I imagine this also won't work for re-exports of html from packages not named lit or lit-html. Unsure if that's a use case we need to support at the moment.

packages/labs/compiler/src/lib/type-checker.ts

AndrewJakubowicz · 2023-07-28T19:31:11Z

I imagine this also won't work for re-exports of html from packages not named lit or lit-html. Unsure if that's a use case we need to support at the moment.

This is accurate. It's something to consider as a feature in the future.

packages/labs/compiler/src/lib/template-transform.ts

packages/labs/compiler/src/lib/type-checker.ts

rictic · 2023-07-28T20:48:44Z

packages/labs/compiler/test_files/handle_aliased_imports.js

@@ -0,0 +1,4 @@
+import {svg as html, html as svg} from 'lit';
+
+html`<text>Do not compile me, I am an svg</text>`;


ha ha, great test!

packages/labs/compiler/test_files/handle_html_identifier_reassignment.js

AndrewJakubowicz requested a review from kevinpschaaf as a code owner July 28, 2023 06:26

AndrewJakubowicz mentioned this pull request Jul 28, 2023

[lit-labs/compiler] only compile the valid html tag function imported from lit #4050

Closed

AndrewJakubowicz requested review from augustjk and rictic July 28, 2023 06:29

AndrewJakubowicz mentioned this pull request Jul 28, 2023

[lit-labs/compiler] Logic for compiling templates containing ChildParts #4047

Merged

augustjk approved these changes Jul 28, 2023

View reviewed changes

packages/labs/compiler/src/lib/type-checker.ts Outdated Show resolved Hide resolved

rictic approved these changes Jul 28, 2023

View reviewed changes

AndrewJakubowicz added 4 commits July 28, 2023 14:04

only compile the valid html tag function imported from lit

2698f47

add empty changeset

8969c01

code review feedback

f6d419d

fix comment in test

d0a371d

AndrewJakubowicz force-pushed the detect-lit-template-correctly branch from 459d3ae to d0a371d Compare July 28, 2023 21:04

AndrewJakubowicz merged commit 8524213 into main Jul 28, 2023

AndrewJakubowicz deleted the detect-lit-template-correctly branch July 28, 2023 21:23

		@@ -0,0 +1,4 @@
		import {svg as html, html as svg} from 'lit';

		html`<text>Do not compile me, I am an svg</text>`;

[lit-labs/compiler] only compile the valid html tag function imported from lit #4055

[lit-labs/compiler] only compile the valid html tag function imported from lit #4055

Uh oh!

Conversation

AndrewJakubowicz commented Jul 28, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Why

How

Test plan

Uh oh!

changeset-bot bot commented Jul 28, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

github-actions bot commented Jul 28, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📊 Tachometer Benchmark Results

Summary

nop-update

render

update

update-reflect

Results

render

update

update-reflect

render

update

nop-update

render

update

render

update

update-reflect

Uh oh!

augustjk left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

AndrewJakubowicz commented Jul 28, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

rictic Jul 28, 2023

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

AndrewJakubowicz commented Jul 28, 2023 •

edited

Loading

changeset-bot bot commented Jul 28, 2023 •

edited

Loading

github-actions bot commented Jul 28, 2023 •

edited

Loading

AndrewJakubowicz commented Jul 28, 2023 •

edited

Loading