[labs/nextjs] Add Next.js plugin for Lit SSR

[augustjk]

To follow #3605

Resolves #3589

Lacking tests. It probably makes more sense to test this e2e with the example project. PR that updates/adds usage example will follow.

A known issue is that due to the shimmed custom elements registry throwing an error on repeat registrations, when running npm run dev, the re-run after modifying a file can cause errors that's only cleared by restarting the dev server.

[changeset-bot]

🦋 Changeset detected

Latest commit: d79abf2

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

This PR includes changesets to release 1 package

Name	Type
@lit-labs/nextjs	Minor

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]

📊 Tachometer Benchmark Results

Summary

nop-update

• lit-html-kitchen-sink: unsure 🔍 -4% - +2% (-0.66ms - +0.38ms)
  ^{this-change vs tip-of-tree}

render

• lit-element-list: 78.59ms - 81.22ms
• lit-html-kitchen-sink: unsure 🔍 -8% - +3% (-2.49ms - +1.13ms)
  ^{this-change vs tip-of-tree}
• lit-html-repeat: unsure 🔍 -2% - +7% (-0.28ms - +0.86ms)
  ^{this-change vs tip-of-tree}
• lit-html-template-heavy: unsure 🔍 -1% - +4% (-0.60ms - +2.28ms)
  ^{this-change vs tip-of-tree}
• reactive-element-list: unsure 🔍 -3% - +2% (-1.83ms - +1.15ms)
  ^{this-change vs tip-of-tree}

update

• lit-element-list: 654.21ms - 658.75ms
• lit-html-kitchen-sink: unsure 🔍 -3% - +4% (-2.32ms - +3.10ms)
  ^{this-change vs tip-of-tree}
• lit-html-repeat: unsure 🔍 -7% - +8% (-18.86ms - +20.53ms)
  ^{this-change vs tip-of-tree}
• lit-html-template-heavy: unsure 🔍 -1% - +1% (-1.09ms - +0.68ms)
  ^{this-change vs tip-of-tree}
• reactive-element-list: unsure 🔍 -1% - +0% (-4.48ms - +1.91ms)
  ^{this-change vs tip-of-tree}

update-reflect

• lit-element-list: 659.94ms - 662.95ms
• reactive-element-list: unsure 🔍 -0% - +0% (-2.33ms - +2.88ms)
  ^{this-change vs tip-of-tree}

Results

lit-element-list

• Browser: chrome-headless 110.0.5481.100
• Sample size: 50
• Built by: Benchmarks #4459

• Commit: a98b929

render

Version	Avg time	vs
	82.44ms - 87.13ms	-

update

Version	Avg time	vs
	796.67ms - 813.87ms	-

update-reflect

Version	Avg time	vs
	792.65ms - 807.00ms	-

lit-html-kitchen-sink

• Browser: chrome-headless 110.0.5481.100
• Sample size: 30
• Built by: Benchmarks #4459

• Commit: a98b929

render

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	32.19ms - 35.61ms	-	unsure 🔍 -7% - +6% -2.49ms - +2.08ms	unsure 🔍 -8% - +5% -2.87ms - +1.58ms
tip-of-tree tip-of-tree	32.58ms - 35.62ms	unsure 🔍 -6% - +7% -2.08ms - +2.49ms	-	unsure 🔍 -7% - +5% -2.52ms - +1.63ms
previous-release previous-release	33.13ms - 35.96ms	unsure 🔍 -5% - +9% -1.58ms - +2.87ms	unsure 🔍 -5% - +7% -1.63ms - +2.52ms	-

update

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	80.36ms - 84.45ms	-	unsure 🔍 -3% - +4% -2.43ms - +3.16ms	unsure 🔍 -4% - +4% -3.05ms - +3.65ms
tip-of-tree tip-of-tree	80.13ms - 83.95ms	unsure 🔍 -4% - +3% -3.16ms - +2.43ms	-	unsure 🔍 -4% - +4% -3.33ms - +3.21ms
previous-release previous-release	79.45ms - 84.76ms	unsure 🔍 -4% - +4% -3.65ms - +3.05ms	unsure 🔍 -4% - +4% -3.21ms - +3.33ms	-

nop-update

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	16.81ms - 18.05ms	-	unsure 🔍 -4% - +6% -0.75ms - +1.05ms	unsure 🔍 -3% - +6% -0.48ms - +1.06ms
tip-of-tree tip-of-tree	16.63ms - 17.93ms	unsure 🔍 -6% - +4% -1.05ms - +0.75ms	-	unsure 🔍 -4% - +6% -0.66ms - +0.94ms
previous-release previous-release	16.68ms - 17.60ms	unsure 🔍 -6% - +3% -1.06ms - +0.48ms	unsure 🔍 -5% - +4% -0.94ms - +0.66ms	-

lit-html-repeat

• Browser: chrome-headless 110.0.5481.100
• Sample size: 30
• Built by: Benchmarks #4459

• Commit: a98b929

render

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	11.49ms - 12.35ms	-	unsure 🔍 -4% - +6% -0.52ms - +0.69ms	unsure 🔍 -4% - +6% -0.52ms - +0.75ms
tip-of-tree tip-of-tree	11.41ms - 12.26ms	unsure 🔍 -6% - +4% -0.69ms - +0.52ms	-	unsure 🔍 -5% - +6% -0.61ms - +0.67ms
previous-release previous-release	11.33ms - 12.27ms	unsure 🔍 -6% - +4% -0.75ms - +0.52ms	unsure 🔍 -6% - +5% -0.67ms - +0.61ms	-

update

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	310.24ms - 317.47ms	-	unsure 🔍 -2% - +2% -6.36ms - +6.12ms	unsure 🔍 -1% - +3% -3.91ms - +8.49ms
tip-of-tree tip-of-tree	308.89ms - 319.06ms	unsure 🔍 -2% - +2% -6.12ms - +6.36ms	-	unsure 🔍 -2% - +3% -4.74ms - +9.57ms
previous-release previous-release	306.53ms - 316.60ms	unsure 🔍 -3% - +1% -8.49ms - +3.91ms	unsure 🔍 -3% - +2% -9.57ms - +4.74ms	-

lit-html-template-heavy

• Browser: chrome-headless 110.0.5481.100
• Sample size: 50
• Built by: Benchmarks #4459

• Commit: a98b929

render

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	54.35ms - 55.96ms	-	unsure 🔍 -5% - +0% -2.58ms - +0.25ms	faster ✔ 1% - 6% 0.57ms - 3.25ms
tip-of-tree tip-of-tree	55.15ms - 57.49ms	unsure 🔍 -0% - +5% -0.25ms - +2.58ms	-	unsure 🔍 -4% - +1% -2.33ms - +0.84ms
previous-release previous-release	55.99ms - 58.14ms	slower ❌ 1% - 6% 0.57ms - 3.25ms	unsure 🔍 -2% - +4% -0.84ms - +2.33ms	-

update

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	123.09ms - 126.34ms	-	unsure 🔍 -2% - +2% -2.09ms - +2.62ms	unsure 🔍 -2% - +2% -3.01ms - +1.94ms
tip-of-tree tip-of-tree	122.74ms - 126.16ms	unsure 🔍 -2% - +2% -2.62ms - +2.09ms	-	unsure 🔍 -3% - +1% -3.33ms - +1.73ms
previous-release previous-release	123.39ms - 127.12ms	unsure 🔍 -2% - +2% -1.94ms - +3.01ms	unsure 🔍 -1% - +3% -1.73ms - +3.33ms	-

reactive-element-list

• Browser: chrome-headless 110.0.5481.100
• Sample size: 50
• Built by: Benchmarks #4459

• Commit: a98b929

render

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	54.25ms - 56.92ms	-	unsure 🔍 -5% - +1% -3.10ms - +0.54ms	unsure 🔍 -4% - +3% -2.19ms - +1.41ms
tip-of-tree tip-of-tree	55.62ms - 58.11ms	unsure 🔍 -1% - +6% -0.54ms - +3.10ms	-	unsure 🔍 -2% - +5% -0.84ms - +2.62ms
previous-release previous-release	54.77ms - 57.19ms	unsure 🔍 -3% - +4% -1.41ms - +2.19ms	unsure 🔍 -5% - +1% -2.62ms - +0.84ms	-

update

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	842.52ms - 862.50ms	-	unsure 🔍 -2% - +2% -15.80ms - +13.97ms	unsure 🔍 -1% - +2% -9.92ms - +19.66ms
tip-of-tree tip-of-tree	842.40ms - 864.45ms	unsure 🔍 -2% - +2% -13.97ms - +15.80ms	-	unsure 🔍 -1% - +3% -9.72ms - +21.30ms
previous-release previous-release	836.73ms - 858.54ms	unsure 🔍 -2% - +1% -19.66ms - +9.92ms	unsure 🔍 -2% - +1% -21.30ms - +9.72ms	-

update-reflect

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	851.55ms - 867.79ms	-	unsure 🔍 -1% - +2% -10.06ms - +13.82ms	unsure 🔍 -1% - +2% -7.14ms - +17.98ms
tip-of-tree tip-of-tree	849.04ms - 866.54ms	unsure 🔍 -2% - +1% -13.82ms - +10.06ms	-	unsure 🔍 -1% - +2% -9.44ms - +16.52ms
previous-release previous-release	844.66ms - 863.84ms	unsure 🔍 -2% - +1% -17.98ms - +7.14ms	unsure 🔍 -2% - +1% -16.52ms - +9.44ms	-

_{tachometer-reporter-action v2 for Benchmarks}

[aomarks]

Looks good! Minor comments.

[aomarks]

Pre-emptive LGTM, assuming my minor comments will be addressed.

[khanh-le-otsv]

Really excited to see this coming! I'm building a lit design system for nextjs and this could be the solution that's I'm looking for!

[kevinpschaaf]

One minor question, otherwise LGTM (to the extend I grok it all).