[starter-kits] Fix starter kits so `npm run serve` isn't `npm run docs:serve` #2300

AndrewJakubowicz · 2021-11-12T21:23:48Z

Context

Currently you cannot serve your component from the starter kit. You always get the generated docs.

This change makes it so when you run npm run serve, you get your component. Docs are still available via the nom run docs:serve command.

Currently: npm run serve and npm run docs:serve give you the same output.

Why

Because it's confusing and has resulted in the following efforts to fix:

https://github.com/lit/lit-element-starter-ts/issues/58
- In the linked video: https://www.youtube.com/watch?v=86tet76u0uk&ab_channel=MiklosNemeth , they are unable to figure out how to serve their component. This is fixed by this change.
This PR on the original repo: fix: adjust root dir of wds lit-element-starter-ts#57 fixes the serve command explicitly.

Repro bug

Make a new template based on the starter kit.
npm i
npm run build
npm run serve -> get docs page.
Follow instructions in readme and navigate to /dev/index.html and get a 404.

Impact

Fixes serve command so it matches what expectation is set in the readme. Following links in readme, i.e. /dev/index.html return your component instead of 200.

changeset-bot · 2021-11-12T21:23:51Z

🦋 Changeset detected

Latest commit: b4df07c

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

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 · 2021-11-12T21:24:19Z

📊 Tachometer Benchmark Results

Summary

nop-update

lit-html-kitchen-sink: unsure 🔍 -8% - +3% (-3.40ms - +1.38ms)
^{this-change vs tip-of-tree}

render

lit-element-list: unsure 🔍 -0% - +2% (-0.38ms - +2.24ms)
^{this-change vs tip-of-tree}
lit-html-kitchen-sink: unsure 🔍 -3% - +4% (-1.37ms - +1.75ms)
^{this-change vs tip-of-tree}
lit-html-repeat: unsure 🔍 -5% - +6% (-0.75ms - +0.87ms)
^{this-change vs tip-of-tree}
lit-html-template-heavy: unsure 🔍 -1% - +3% (-0.87ms - +2.45ms)
^{this-change vs tip-of-tree}
reactive-element-list: unsure 🔍 -0% - +3% (-0.03ms - +2.22ms)
^{this-change vs tip-of-tree}

update

lit-element-list: unsure 🔍 -2% - +1% (-15.68ms - +7.19ms)
^{this-change vs tip-of-tree}
lit-html-kitchen-sink: unsure 🔍 -4% - +7% (-5.66ms - +9.38ms)
^{this-change vs tip-of-tree}
lit-html-repeat: unsure 🔍 -3% - +1% (-12.40ms - +4.73ms)
^{this-change vs tip-of-tree}
lit-html-template-heavy: unsure 🔍 -4% - +3% (-6.31ms - +5.14ms)
^{this-change vs tip-of-tree}
reactive-element-list: unsure 🔍 -1% - +2% (-8.69ms - +22.13ms)
^{this-change vs tip-of-tree}

update-reflect

lit-element-list: unsure 🔍 -1% - +1% (-15.23ms - +10.05ms)
^{this-change vs tip-of-tree}
reactive-element-list: unsure 🔍 -1% - +1% (-10.05ms - +15.82ms)
^{this-change vs tip-of-tree}

Results

lit-element-list

Browser: chrome-headless 95.0.4638.69
Sample size: 50
Built by: Benchmarks #2033
Commit: c738f4c

render

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	118.60ms - 120.42ms	-	unsure 🔍 -0% - +2% -0.38ms - +2.24ms	faster ✔ 21% - 23% 32.04ms - 35.60ms
tip-of-tree tip-of-tree	117.63ms - 119.52ms	unsure 🔍 -2% - +0% -2.24ms - +0.38ms	-	faster ✔ 22% - 24% 32.96ms - 36.55ms
previous-release previous-release	151.80ms - 154.86ms	slower ❌ 27% - 30% 32.04ms - 35.60ms	slower ❌ 28% - 31% 32.96ms - 36.55ms	-

update

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	1018.91ms - 1034.30ms	-	unsure 🔍 -2% - +1% -15.68ms - +7.19ms	faster ✔ 7% - 9% 79.01ms - 102.65ms
tip-of-tree tip-of-tree	1022.39ms - 1039.31ms	unsure 🔍 -1% - +2% -7.19ms - +15.68ms	-	faster ✔ 7% - 9% 74.25ms - 98.92ms
previous-release previous-release	1108.46ms - 1126.41ms	slower ❌ 8% - 10% 79.01ms - 102.65ms	slower ❌ 7% - 10% 74.25ms - 98.92ms	-

update-reflect

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	1116.82ms - 1132.97ms	-	unsure 🔍 -1% - +1% -15.23ms - +10.05ms	faster ✔ 4% - 5% 43.00ms - 63.78ms
tip-of-tree tip-of-tree	1117.76ms - 1137.21ms	unsure 🔍 -1% - +1% -10.05ms - +15.23ms	-	faster ✔ 3% - 5% 39.08ms - 62.51ms
previous-release previous-release	1171.75ms - 1184.82ms	slower ❌ 4% - 6% 43.00ms - 63.78ms	slower ❌ 3% - 6% 39.08ms - 62.51ms	-

lit-html-kitchen-sink

Browser: chrome-headless 95.0.4638.69
Sample size: 30
Built by: Benchmarks #2033
Commit: c738f4c

render

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	47.65ms - 49.78ms	-	unsure 🔍 -3% - +4% -1.37ms - +1.75ms	faster ✔ 15% - 22% 8.66ms - 13.35ms
tip-of-tree tip-of-tree	47.38ms - 49.67ms	unsure 🔍 -4% - +3% -1.75ms - +1.37ms	-	faster ✔ 15% - 22% 8.82ms - 13.58ms
previous-release previous-release	57.63ms - 61.81ms	slower ❌ 18% - 28% 8.66ms - 13.35ms	slower ❌ 18% - 28% 8.82ms - 13.58ms	-

update

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	131.27ms - 143.16ms	-	unsure 🔍 -4% - +7% -5.66ms - +9.38ms	unsure 🔍 -5% - +8% -6.59ms - +10.53ms
tip-of-tree tip-of-tree	130.75ms - 139.97ms	unsure 🔍 -7% - +4% -9.38ms - +5.66ms	-	unsure 🔍 -6% - +6% -7.58ms - +7.81ms
previous-release previous-release	129.08ms - 141.40ms	unsure 🔍 -8% - +5% -10.53ms - +6.59ms	unsure 🔍 -6% - +6% -7.81ms - +7.58ms	-

nop-update

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	38.05ms - 40.73ms	-	unsure 🔍 -8% - +3% -3.40ms - +1.38ms	unsure 🔍 -6% - +4% -2.23ms - +1.44ms
tip-of-tree tip-of-tree	38.41ms - 42.38ms	unsure 🔍 -4% - +9% -1.38ms - +3.40ms	-	unsure 🔍 -4% - +7% -1.73ms - +2.97ms
previous-release previous-release	38.52ms - 41.04ms	unsure 🔍 -4% - +6% -1.44ms - +2.23ms	unsure 🔍 -7% - +4% -2.97ms - +1.73ms	-

lit-html-repeat

Browser: chrome-headless 95.0.4638.69
Sample size: 30
Built by: Benchmarks #2033
Commit: c738f4c

render

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	14.87ms - 16.07ms	-	unsure 🔍 -5% - +6% -0.75ms - +0.87ms	unsure 🔍 -7% - +1% -1.17ms - +0.15ms
tip-of-tree tip-of-tree	14.86ms - 15.96ms	unsure 🔍 -6% - +5% -0.87ms - +0.75ms	-	unsure 🔍 -7% - +0% -1.19ms - +0.05ms
previous-release previous-release	15.70ms - 16.26ms	unsure 🔍 -1% - +8% -0.15ms - +1.17ms	unsure 🔍 -0% - +8% -0.05ms - +1.19ms	-

update

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	410.02ms - 419.32ms	-	unsure 🔍 -3% - +1% -12.40ms - +4.73ms	faster ✔ 28% - 31% 165.57ms - 185.46ms
tip-of-tree tip-of-tree	411.31ms - 425.70ms	unsure 🔍 -1% - +3% -4.73ms - +12.40ms	-	faster ✔ 27% - 31% 160.33ms - 183.04ms
previous-release previous-release	581.40ms - 598.97ms	slower ❌ 40% - 45% 165.57ms - 185.46ms	slower ❌ 38% - 44% 160.33ms - 183.04ms	-

lit-html-template-heavy

Browser: chrome-headless 95.0.4638.69
Sample size: 50
Built by: Benchmarks #2033
Commit: c738f4c

render

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	78.18ms - 80.88ms	-	unsure 🔍 -1% - +3% -0.87ms - +2.45ms	faster ✔ 13% - 17% 12.43ms - 15.94ms
tip-of-tree tip-of-tree	77.76ms - 79.72ms	unsure 🔍 -3% - +1% -2.45ms - +0.87ms	-	faster ✔ 15% - 17% 13.48ms - 16.47ms
previous-release previous-release	92.59ms - 94.85ms	slower ❌ 15% - 20% 12.43ms - 15.94ms	slower ❌ 17% - 21% 13.48ms - 16.47ms	-

update

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	168.62ms - 175.07ms	-	unsure 🔍 -4% - +3% -6.31ms - +5.14ms	faster ✔ 11% - 15% 20.61ms - 29.67ms
tip-of-tree tip-of-tree	167.70ms - 177.15ms	unsure 🔍 -3% - +4% -5.14ms - +6.31ms	-	faster ✔ 10% - 15% 18.86ms - 30.25ms
previous-release previous-release	193.81ms - 200.16ms	slower ❌ 12% - 17% 20.61ms - 29.67ms	slower ❌ 11% - 18% 18.86ms - 30.25ms	-

reactive-element-list

Browser: chrome-headless 95.0.4638.69
Sample size: 50
Built by: Benchmarks #2033
Commit: c738f4c

render

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	79.94ms - 81.73ms	-	unsure 🔍 -0% - +3% -0.03ms - +2.22ms	unsure 🔍 -2% - +2% -1.31ms - +1.28ms
tip-of-tree tip-of-tree	79.06ms - 80.43ms	unsure 🔍 -3% - +0% -2.22ms - +0.03ms	-	unsure 🔍 -3% - +0% -2.26ms - +0.05ms
previous-release previous-release	79.92ms - 81.78ms	unsure 🔍 -2% - +2% -1.28ms - +1.31ms	unsure 🔍 -0% - +3% -0.05ms - +2.26ms	-

update

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	1038.33ms - 1061.15ms	-	unsure 🔍 -1% - +2% -8.69ms - +22.13ms	unsure 🔍 -1% - +2% -8.82ms - +20.16ms
tip-of-tree tip-of-tree	1032.66ms - 1053.38ms	unsure 🔍 -2% - +1% -22.13ms - +8.69ms	-	unsure 🔍 -1% - +1% -14.73ms - +12.63ms
previous-release previous-release	1035.13ms - 1053.00ms	unsure 🔍 -2% - +1% -20.16ms - +8.82ms	unsure 🔍 -1% - +1% -12.63ms - +14.73ms	-

update-reflect

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	1157.31ms - 1176.51ms	-	unsure 🔍 -1% - +1% -10.05ms - +15.82ms	unsure 🔍 -1% - +1% -12.48ms - +14.04ms
tip-of-tree tip-of-tree	1155.36ms - 1172.70ms	unsure 🔍 -1% - +1% -15.82ms - +10.05ms	-	unsure 🔍 -1% - +1% -14.70ms - +10.50ms
previous-release previous-release	1156.98ms - 1175.28ms	unsure 🔍 -1% - +1% -14.04ms - +12.48ms	unsure 🔍 -1% - +1% -10.50ms - +14.70ms	-

_{tachometer-reporter-action v2 for Benchmarks}

We want to specify no root directory, such that the README.md instructions make sense. Therefore, by navigating the localhost:8000/dev/index.html as written, you now get your element and a much better experience. Previously `npm run serve` was serving the docs directory preventing access to the component.

We recommend in the README.md that the user navigates to /dev/index.html. However you expect `npm run serve` to not fail. This adds a tiny stub document that can point users in the right direction.

AndrewJakubowicz · 2021-11-13T01:14:02Z

This required a little more work mostly to guide folks in the right direction.

Previous behavior. npm run serve served the docs directory. The result is that you can never get to your /dev/index.html demo. You are instead siloed to docs.

New behavior: npm run serve serves the root directory. This allows for the /dev/index.html route to be available and work (as per our README.md). It correctly shows an incrementor with the slotted content.

However the minor pitfall of the new behavior is that web/dev-server prompts you to navigate to localhost:8000/ which is a 404. As very light guidance, I've added an html file that links to the demo, rather than having a 404 experience.

@justinfagnani PTAL at new changes. I manually tested all the build rules. Thank you!

justinfagnani · 2021-11-13T01:17:59Z

Looks good. Still need a changeset though.

AndrewJakubowicz · 2021-11-13T01:30:26Z

Done. Thank you.

e111077 · 2021-11-13T04:50:07Z

Can you please also follow up on the TS and JS repo issues. There seem to be other issues that seem to be related.

AndrewJakubowicz · 2021-11-15T17:33:23Z

I followed up on all the issues that seem related and will follow up again once this is released into those repos. Great point!

Introduces fix: lit/lit#2300

AndrewJakubowicz requested a review from justinfagnani as a code owner November 12, 2021 21:23

google-cla bot added the cla: yes label Nov 12, 2021

e111077 approved these changes Nov 12, 2021

View reviewed changes

AndrewJakubowicz requested a review from arthurevans November 12, 2021 22:58

justinfagnani approved these changes Nov 12, 2021

View reviewed changes

AndrewJakubowicz force-pushed the fix-starter-kits branch from e2e39f5 to 6a084f5 Compare November 13, 2021 00:36

Add something on root url, so that folks dont get a 404.

569dbef

We recommend in the README.md that the user navigates to /dev/index.html. However you expect `npm run serve` to not fail. This adds a tiny stub document that can point users in the right direction.

AndrewJakubowicz force-pushed the fix-starter-kits branch from 46364e8 to 569dbef Compare November 13, 2021 01:10

AndrewJakubowicz requested review from e111077 and justinfagnani November 13, 2021 01:14

Add patch changeset

b4df07c

justinfagnani approved these changes Nov 13, 2021

View reviewed changes

AndrewJakubowicz merged commit 8b9dcb4 into main Nov 13, 2021

AndrewJakubowicz deleted the fix-starter-kits branch November 13, 2021 04:46

This was referenced Dec 8, 2021

Merge fixes from Lit monorepo lit/lit-element-starter-ts#66

Closed

Sync with Lit mono repo (manual) lit/lit-element-starter-js#24

Merged

Sync with Lit mono repo (manual) lit/lit-element-starter-ts#67

Merged

AndrewJakubowicz added a commit to lit/lit-element-starter-js that referenced this pull request Dec 8, 2021

Sync with Lit monorepo (manual)

af17a32

Introduces fix: lit/lit#2300

AndrewJakubowicz added a commit to lit/lit-element-starter-ts that referenced this pull request Dec 8, 2021

Sync with Lit monorepo (manual)

43c1dfb

Introduces fix: lit/lit#2300

This was referenced Jan 5, 2022

Version Packages #2375

Closed

Version Packages #2377

Merged

kevinpschaaf mentioned this pull request Jan 14, 2022

[Starter kits] Can't run demo #2213

Closed

CptToucan pushed a commit to CptToucan/waryes that referenced this pull request Sep 23, 2024

Sync with Lit monorepo (manual)

afbaf96

Introduces fix: lit/lit#2300

[starter-kits] Fix starter kits so npm run serve isn't npm run docs:serve #2300

[starter-kits] Fix starter kits so npm run serve isn't npm run docs:serve #2300

Uh oh!

Conversation

AndrewJakubowicz commented Nov 12, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Context

Why

Repro bug

Impact

Uh oh!

changeset-bot bot commented Nov 12, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

github-actions bot commented Nov 12, 2021 • 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 Nov 13, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

justinfagnani commented Nov 13, 2021

Uh oh!

AndrewJakubowicz commented Nov 13, 2021

Uh oh!

e111077 commented Nov 13, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

AndrewJakubowicz commented Nov 15, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

[starter-kits] Fix starter kits so `npm run serve` isn't `npm run docs:serve` #2300

[starter-kits] Fix starter kits so `npm run serve` isn't `npm run docs:serve` #2300

AndrewJakubowicz commented Nov 12, 2021 •

edited

Loading

changeset-bot bot commented Nov 12, 2021 •

edited

Loading

github-actions bot commented Nov 12, 2021 •

edited

Loading

AndrewJakubowicz commented Nov 13, 2021 •

edited

Loading

e111077 commented Nov 13, 2021 •

edited

Loading

AndrewJakubowicz commented Nov 15, 2021 •

edited

Loading