[labs/nextjs] Add Next.js plugin for Lit SSR by augustjk · Pull Request #3613 · lit/lit

augustjk · 2023-01-27T01:51:11Z

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 · 2023-01-27T01:51:14Z

🦋 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 · 2023-01-27T01:51:31Z

📊 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.

packages/labs/nextjs/README.md

packages/labs/nextjs/src/index.ts

aomarks

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

khanh-le-otsv · 2023-02-16T06:03:53Z

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!

packages/labs/nextjs/src/index.ts

kevinpschaaf

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

packages/labs/nextjs/src/index.ts

packages/labs/nextjs/README.md

Co-authored-by: Justin Fagnani <justinfagnani@google.com>

augustjk requested review from aomarks, justinfagnani and kevinpschaaf January 27, 2023 01:51

augustjk mentioned this pull request Jan 27, 2023

[examples/nextjs] Show usage of @lit-labs/nextjs #3614

Closed

augustjk marked this pull request as draft January 27, 2023 22:52

augustjk force-pushed the ssr-react branch 3 times, most recently from aab935d to 41be4c1 Compare February 1, 2023 00:53

augustjk force-pushed the labs-nextjs branch 2 times, most recently from 9a4d490 to c42d491 Compare February 3, 2023 01:08

augustjk marked this pull request as ready for review February 6, 2023 22:51

aomarks requested changes Feb 6, 2023

View reviewed changes

aomarks approved these changes Feb 7, 2023

View reviewed changes

Base automatically changed from ssr-react to main February 8, 2023 00:39

augustjk force-pushed the labs-nextjs branch from c42d491 to c42e73d Compare February 8, 2023 02:09

augustjk added 4 commits February 15, 2023 17:51

Add nextjs plugin package

36518f3

Update readme and comments based on code review

71944af

Update example to use the Lit SSR nextjs plugin

8a30f34

Add note about custom element registration error in dev mode

bd85206

augustjk force-pushed the labs-nextjs branch from 7244d4a to bd85206 Compare February 16, 2023 01:51

salman-mazhar reviewed Feb 22, 2023

View reviewed changes

packages/labs/nextjs/src/index.ts Outdated Show resolved Hide resolved

Specify file extensions for imports-loader

3518496

kevinpschaaf approved these changes Feb 23, 2023

View reviewed changes

packages/labs/nextjs/src/index.ts Show resolved Hide resolved

justinfagnani approved these changes Feb 24, 2023

View reviewed changes

packages/labs/nextjs/src/index.ts Show resolved Hide resolved

packages/labs/nextjs/README.md Outdated Show resolved Hide resolved

packages/labs/nextjs/README.md Outdated Show resolved Hide resolved

augustjk and others added 2 commits February 25, 2023 11:04

Apply suggestions from code review

8e78bb1

Co-authored-by: Justin Fagnani <justinfagnani@google.com>

Add issue link for feature request to enhance webpack externals

d79abf2

augustjk merged commit be18292 into main Feb 28, 2023

augustjk deleted the labs-nextjs branch February 28, 2023 01:02

lit-robot mentioned this pull request Mar 10, 2023

Version Packages #3717

Merged

Conversation

augustjk commented Jan 27, 2023

Uh oh!

changeset-bot bot commented Jan 27, 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 Jan 27, 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!

aomarks left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

aomarks left a comment

Choose a reason for hiding this comment

Uh oh!

khanh-le-otsv commented Feb 16, 2023

Uh oh!

Uh oh!

kevinpschaaf left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

changeset-bot bot commented Jan 27, 2023 •

edited

Loading

github-actions bot commented Jan 27, 2023 •

edited

Loading