Initial commit of lit-labs/compiler #3984

AndrewJakubowicz · 2023-06-28T21:19:17Z

lit-labs/compiler

This commit adds a first (and rough) iteration of the Lit compiler for pre-compiling html TTLs. This change passes almost all lit-html tests.

The skipped tests are:

Some dev mode warnings, which currently get compiled out. Should instead become diagnostics.
The cache directive depends on a template string array & needs handling added for compiled templates.

This initial change was used for benchmarking the possible benefits of the compiler.

No changeset is included because the package is marked private and will not be released.

Why

lit-html is very fast, but if you're already using a build step there are opportunities to squeeze more performance out. By pre-compiling templates, we can skip the prepare phase of lit-html rendering.

Benchmarks

The below benchmarks can be run by checking out this branch, building the monorepo and running individual benchmarks e.g., npm run benchmark:lit-html:template-heavy-compiled -w @lit-internal/benchmarks.

Kitchen sink average tachometer benchmark results:

[6.7% faster]: render-compiled: 7.93ms - 8.10ms, render-uncompiled: 8.50ms - 8.69ms
[roughly same]: update-compiled: 17.92ms - 18.56ms, update-uncompiled: 18.08ms - 19.00ms
[roughly same]: nop-update-compiled: 5.53ms - 5.66ms, nop-update-uncompiled: 5.64ms - 5.80ms

Template Heavy average tachometer benchmark results:

[46% faster]: render-compiled: 9.51ms - 9.67ms, render-uncompiled: 17.66ms - 18.03ms
[21% faster]: update-compiled: 26.40 - 26.91ms, update-uncompiled: 33.62 - 34.51ms

repeat average tachometer benchmark results:

[14% faster]: render-compiled: 7.40ms - 7.62ms, render-uncompiled: 8.56ms - 8.94ms
[8% faster]: update-compiled: 189.57ms - 197.54ms, update-uncompiled: 206.51ms - 218.68ms

TODO:

changeset-bot · 2023-06-28T21:19:20Z

🦋 Changeset detected

Latest commit: 84b68eb

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-06-28T21:19:41Z

📊 Tachometer Benchmark Results

Summary

nop-update

lit-html-kitchen-sink: unsure 🔍 -11% - +9% (-3.33ms - +2.72ms)
^{this-change vs tip-of-tree}

render

lit-element-list: 93.49ms - 98.56ms
lit-html-kitchen-sink: unsure 🔍 -8% - +6% (-3.29ms - +2.19ms)
^{this-change vs tip-of-tree}
lit-html-repeat: unsure 🔍 -10% - +4% (-1.27ms - +0.54ms)
^{this-change vs tip-of-tree}
lit-html-template-heavy: unsure 🔍 -3% - +4% (-1.76ms - +2.67ms)
^{this-change vs tip-of-tree}
reactive-element-list: unsure 🔍 -3% - +5% (-1.94ms - +2.88ms)
^{this-change vs tip-of-tree}

update

lit-element-list: 1081.65ms - 1124.23ms
lit-html-kitchen-sink: unsure 🔍 -5% - +4% (-5.86ms - +4.63ms)
^{this-change vs tip-of-tree}
lit-html-repeat: unsure 🔍 -10% - +11% (-42.45ms - +44.70ms)
^{this-change vs tip-of-tree}
lit-html-template-heavy: unsure 🔍 -2% - +3% (-2.52ms - +5.32ms)
^{this-change vs tip-of-tree}
reactive-element-list: unsure 🔍 -0% - +4% (-5.23ms - +44.19ms)
^{this-change vs tip-of-tree}

update-reflect

lit-element-list: 1005.94ms - 1042.04ms
reactive-element-list: unsure 🔍 -1% - +4% (-12.94ms - +39.70ms)
^{this-change vs tip-of-tree}

Results

lit-element-list

Browser: chrome-headless 114.0.5735.198
Sample size: 50
Built by: Benchmarks #5031
Commit: f84a336

render

Version	Avg time	vs
	93.49ms - 98.56ms	-

update

Version	Avg time	vs
	1081.65ms - 1124.23ms	-

update-reflect

Version	Avg time	vs
	1005.94ms - 1042.04ms	-

lit-html-kitchen-sink

Browser: chrome-headless 114.0.5735.198
Sample size: 30
Built by: Benchmarks #5031
Commit: f84a336

render

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	36.46ms - 40.39ms	-	unsure 🔍 -8% - +6% -3.29ms - +2.19ms	unsure 🔍 -11% - +3% -4.25ms - +1.09ms
tip-of-tree tip-of-tree	37.07ms - 40.88ms	unsure 🔍 -6% - +9% -2.19ms - +3.29ms	-	unsure 🔍 -9% - +4% -3.66ms - +1.60ms
previous-release previous-release	38.20ms - 41.82ms	unsure 🔍 -3% - +11% -1.09ms - +4.25ms	unsure 🔍 -4% - +9% -1.60ms - +3.66ms	-

update

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	105.52ms - 113.86ms	-	unsure 🔍 -5% - +4% -5.86ms - +4.63ms	unsure 🔍 -8% - +2% -8.62ms - +2.30ms
tip-of-tree tip-of-tree	107.13ms - 113.49ms	unsure 🔍 -4% - +5% -4.63ms - +5.86ms	-	unsure 🔍 -6% - +2% -7.29ms - +2.21ms
previous-release previous-release	109.32ms - 116.37ms	unsure 🔍 -2% - +8% -2.30ms - +8.62ms	unsure 🔍 -2% - +7% -2.21ms - +7.29ms	-

nop-update

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	27.06ms - 31.07ms	-	unsure 🔍 -11% - +9% -3.33ms - +2.72ms	unsure 🔍 -7% - +13% -2.03ms - +3.63ms
tip-of-tree tip-of-tree	27.10ms - 31.63ms	unsure 🔍 -9% - +12% -2.72ms - +3.33ms	-	unsure 🔍 -7% - +15% -1.91ms - +4.13ms
previous-release previous-release	26.26ms - 30.26ms	unsure 🔍 -12% - +7% -3.63ms - +2.03ms	unsure 🔍 -14% - +6% -4.13ms - +1.91ms	-

lit-html-repeat

Browser: chrome-headless 114.0.5735.198
Sample size: 30
Built by: Benchmarks #5031
Commit: f84a336

render

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	11.80ms - 13.09ms	-	unsure 🔍 -10% - +4% -1.27ms - +0.54ms	unsure 🔍 -9% - +4% -1.18ms - +0.56ms
tip-of-tree tip-of-tree	12.17ms - 13.45ms	unsure 🔍 -4% - +10% -0.54ms - +1.27ms	-	unsure 🔍 -6% - +7% -0.81ms - +0.92ms
previous-release previous-release	12.17ms - 13.34ms	unsure 🔍 -5% - +10% -0.56ms - +1.18ms	unsure 🔍 -7% - +6% -0.92ms - +0.81ms	-

update

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	378.94ms - 446.70ms	-	unsure 🔍 -10% - +11% -42.45ms - +44.70ms	unsure 🔍 -10% - +11% -42.85ms - +44.65ms
tip-of-tree tip-of-tree	384.29ms - 439.10ms	unsure 🔍 -11% - +10% -44.70ms - +42.45ms	-	unsure 🔍 -10% - +9% -39.18ms - +38.72ms
previous-release previous-release	384.25ms - 439.60ms	unsure 🔍 -11% - +10% -44.65ms - +42.85ms	unsure 🔍 -9% - +10% -38.72ms - +39.18ms	-

lit-html-template-heavy

Browser: chrome-headless 114.0.5735.198
Sample size: 50
Built by: Benchmarks #5031
Commit: f84a336

render

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	64.69ms - 68.03ms	-	unsure 🔍 -3% - +4% -1.76ms - +2.67ms	unsure 🔍 -4% - +2% -2.90ms - +1.52ms
tip-of-tree tip-of-tree	64.45ms - 67.36ms	unsure 🔍 -4% - +3% -2.67ms - +1.76ms	-	unsure 🔍 -5% - +1% -3.20ms - +0.90ms
previous-release previous-release	65.60ms - 68.50ms	unsure 🔍 -2% - +4% -1.52ms - +2.90ms	unsure 🔍 -1% - +5% -0.90ms - +3.20ms	-

update

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	151.45ms - 157.67ms	-	unsure 🔍 -2% - +3% -2.52ms - +5.32ms	unsure 🔍 -2% - +3% -2.97ms - +5.12ms
tip-of-tree tip-of-tree	150.78ms - 155.54ms	unsure 🔍 -3% - +2% -5.32ms - +2.52ms	-	unsure 🔍 -3% - +2% -3.84ms - +3.19ms
previous-release previous-release	150.90ms - 156.08ms	unsure 🔍 -3% - +2% -5.12ms - +2.97ms	unsure 🔍 -2% - +3% -3.19ms - +3.84ms	-

reactive-element-list

Browser: chrome-headless 114.0.5735.198
Sample size: 50
Built by: Benchmarks #5031
Commit: f84a336

render

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	57.54ms - 60.53ms	-	unsure 🔍 -3% - +5% -1.94ms - +2.88ms	unsure 🔍 -8% - +0% -5.27ms - +0.09ms
tip-of-tree tip-of-tree	56.67ms - 60.45ms	unsure 🔍 -5% - +3% -2.88ms - +1.94ms	-	faster ✔ 0% - 10% 0.15ms - 5.98ms
previous-release previous-release	59.40ms - 63.85ms	unsure 🔍 -0% - +9% -0.09ms - +5.27ms	slower ❌ 0% - 10% 0.15ms - 5.98ms	-

update

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	1101.65ms - 1138.45ms	-	unsure 🔍 -0% - +4% -5.23ms - +44.19ms	unsure 🔍 -2% - +3% -16.94ms - +31.70ms
tip-of-tree tip-of-tree	1084.07ms - 1117.07ms	unsure 🔍 -4% - +0% -44.19ms - +5.23ms	-	unsure 🔍 -3% - +1% -35.02ms - +10.82ms
previous-release previous-release	1096.77ms - 1128.57ms	unsure 🔍 -3% - +2% -31.70ms - +16.94ms	unsure 🔍 -1% - +3% -10.82ms - +35.02ms	-

update-reflect

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	1058.24ms - 1098.24ms	-	unsure 🔍 -1% - +4% -12.94ms - +39.70ms	unsure 🔍 -3% - +2% -28.06ms - +23.96ms
tip-of-tree tip-of-tree	1047.75ms - 1081.96ms	unsure 🔍 -4% - +1% -39.70ms - +12.94ms	-	unsure 🔍 -4% - +1% -39.28ms - +8.43ms
previous-release previous-release	1063.65ms - 1096.91ms	unsure 🔍 -2% - +3% -23.96ms - +28.06ms	unsure 🔍 -1% - +4% -8.43ms - +39.28ms	-

_{tachometer-reporter-action v2 for Benchmarks}

…late

Current method is just to import all the Part constructors if any of them are needed. But an identifier that already exists breaks tests. As a stopgap have named them with an unlikely prefix.

lit-html test suite now passes!

After building, run benchmark with: `npm run benchmark:lit-html:kitchen-sink-compiled -w @lit-internal/benchmarks`

Found one test where stripping the expression markers broke the test between compiled and uncompiled. If that's a problem we may need to emit a fake marker, e.g. lit$1$, to prevent test breakages.

Otherwise each compiler change requires a lot of string replacement in the expected result. Now it's quick to regenerate goldens and observe the output.

This is so that the code is not just 2 giant function closures.

AndrewJakubowicz · 2023-08-18T20:22:13Z

This prototype was incrementally improved and landed. See all the linked PRs.

AndrewJakubowicz force-pushed the initial-labs-compiler branch from feb15a9 to eb830d7 Compare July 6, 2023 01:13

AndrewJakubowicz mentioned this pull request Jul 6, 2023

[lit-html][labs/ssr-client] Fix compiled template support #3993

Merged

AndrewJakubowicz and others added 12 commits July 10, 2023 16:51

Initial commit for the lit-labs/compiler

7d079d9

Compile html templates that are in the value position of another temp…

05035b6

…late

Fix naming collisions that were silencing failing tests

f124273

Current method is just to import all the Part constructors if any of them are needed. But an identifier that already exists breaks tests. As a stopgap have named them with an unlikely prefix.

Fix raw text element handling & skip some debug test.

53fc515

lit-html test suite now passes!

Add empty changeset and make the compiler package private

65a6706

Add simple lit-element compiler test

e031554

Fix wireit for lit-labs/compiler

15d464a

Fix relative imports that break production tests

5c88221

Add kitchen sink compiled benchmark and fix comment node markers.

08d6a72

After building, run benchmark with: `npm run benchmark:lit-html:kitchen-sink-compiled -w @lit-internal/benchmarks`

Add template-heavy-compiled benchmark

169546b

Add repeat-compiled benchmark

8d6358b

brand the compiled result and now all tests pass.

c98cb43

Found one test where stripping the expression markers broke the test between compiled and uncompiled. If that's a problem we may need to emit a fake marker, e.g. lit$1$, to prevent test breakages.

AndrewJakubowicz force-pushed the initial-labs-compiler branch from eb830d7 to c98cb43 Compare July 11, 2023 05:28

AndrewJakubowicz mentioned this pull request Jul 13, 2023

[lit-labs/compiler] Add package.json and initialize package #4017

Merged

AndrewJakubowicz and others added 9 commits July 17, 2023 15:32

refactor out tests into golden files for easier iteration

68e142c

Otherwise each compiler change requires a lot of string replacement in the expected result. Now it's quick to regenerate goldens and observe the output.

refactor to use a class – break out functionality

e5ad18a

This is so that the code is not just 2 giant function closures.

add prettierignore

6c0ca2f

Fix the security brand so it is declared once

8894649

Refactor out the remaining ast fragments and document.

87ba389

Do not emit brand if unused & add kitchen sink parts test

e78e2a4

Add source-map test

5350a06

fix handling of license comments

220bfe5

add JS basic golden test

84b68eb

This was referenced Jul 26, 2023

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

Merged

[lit-labs/compiler] only compress marker comments #4048

Merged

[lit-labs/compiler] add wireit build script to monorepo #4049

Merged

This was referenced Aug 4, 2023

[lit-labs/compiler] gracefully handle bindings in tag name position #4071

Merged

[lit-labs/compiler] rollup example and source map tests #4077

Merged

[lit-labs/compiler] Fix svg tag being accidentally compiled #4086

Merged

AndrewJakubowicz closed this Aug 18, 2023

AndrewJakubowicz deleted the initial-labs-compiler branch August 18, 2023 20:22

Initial commit of lit-labs/compiler #3984

Initial commit of lit-labs/compiler #3984

Uh oh!

Conversation

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

Uh oh!

lit-labs/compiler

Why

Benchmarks

Uh oh!

changeset-bot bot commented Jun 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 Jun 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

render

update

update-reflect

Uh oh!

AndrewJakubowicz commented Aug 18, 2023

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

AndrewJakubowicz commented Jun 28, 2023 •

edited

Loading

changeset-bot bot commented Jun 28, 2023 •

edited

Loading

github-actions bot commented Jun 28, 2023 •

edited

Loading