spectrum-web-components
spectrum-web-components copied to clipboard
fix: convert the langage resolution workflow to a Reactive Controller
Description
- centralize language resolution tooling for reuse
- ensure the use of
unsubscriberather than event based contract nullification so that memory can be correctly released
How has this been tested?
- [ ] Test case 1
- The tests pass
- [ ] Test case 2
- Go here
- Duplicate the Slider in the story a bunch of times within the
<sp-story-decorator>element - Find the
<sp-theme>element within the Decorator - Check the value of
_contextConsumers.sizeon the Theme element - Delete some of the
<sp-slider>elements. - See that
_contextConsumers.sizehas decreased by the number of Slider you have deleted
Types of changes
- [x] Bug fix (non-breaking change which fixes an issue)
Checklist
- [x] I have signed the Adobe Open Source CLA.
- [x] My code follows the code style of this project.
- [ ] If my change required a change to the documentation, I have updated the documentation in this pull request.
- [x] I have read the CONTRIBUTING document.
- [ ] I have added tests to cover my changes.
- [x] All new and existing tests passed.
Branch Preview
Visual regression test results
When a visual regression test fails (or has previously failed while working on this branch), its results can be found in the following URLs:
- High Contrast Mode | Medium | LTR
- Classic | Lightest | Medium | LTR
- Classic | Lightest | Medium | RTL
- Classic | Lightest | Large | LTR
- Classic | Lightest | Large | RTL
- Classic | Light | Medium | LTR
- Classic | Light | Medium | RTL
- Classic | Light | Large | LTR
- Classic | Light | Large | RTL
- Classic | Dark | Medium | LTR
- Classic | Dark | Medium | RTL
- Classic | Dark | Large | LTR
- Classic | Dark | Large | RTL
- Classic | Darkest | Medium | LTR
- Classic | Darkest | Medium | RTL
- Classic | Darkest | Large | LTR
- Classic | Darkest | Large | RTL
- Express | Lightest | Medium | LTR
- Express | Lightest | Medium | RTL
- Express | Lightest | Large | LTR
- Express | Lightest | Large | RTL
- Express | Light | Medium | LTR
- Express | Light | Medium | RTL
- Express | Light | Large | LTR
- Express | Light | Large | RTL
- Express | Dark | Medium | LTR
- Express | Dark | Medium | RTL
- Express | Dark | Large | LTR
- Express | Dark | Large | RTL
- Express | Darkest | Medium | LTR
- Express | Darkest | Medium | RTL
- Express | Darkest | Large | LTR
- Express | Darkest | Large | RTL
Tachometer results
Chrome
accordion permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 266 kB | 203.79ms - 206.77ms | - | unsure 🔍 -1% - +1% -2.75ms - +1.65ms |
| branch | 277 kB | 204.20ms - 207.45ms | unsure 🔍 -1% - +1% -1.65ms - +2.75ms |
- |
action-bar permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 233 kB | 31.98ms - 32.17ms | - | faster ✔ 1% - 2% 0.24ms - 0.50ms |
| branch | 244 kB | 32.36ms - 32.54ms | slower ❌ 1% - 2% 0.24ms - 0.50ms |
- |
action-group permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 426 kB | 104.95ms - 106.09ms | - | faster ✔ 0% - 2% 0.11ms - 1.79ms |
| branch | 438 kB | 105.85ms - 107.09ms | slower ❌ 0% - 2% 0.11ms - 1.79ms |
- |
action-menu permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 595 kB | 203.22ms - 208.45ms | - | unsure 🔍 -1% - +2% -1.63ms - +4.69ms |
| branch | 608 kB | 202.53ms - 206.07ms | unsure 🔍 -2% - +1% -4.69ms - +1.63ms |
- |
color-area permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 342 kB | 497.07ms - 500.70ms | - | unsure 🔍 -1% - +0% -2.63ms - +2.15ms |
| branch | 355 kB | 497.57ms - 500.68ms | unsure 🔍 -0% - +1% -2.15ms - +2.63ms |
- |
color-slider permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 347 kB | 472.94ms - 475.83ms | - | unsure 🔍 -1% - +0% -3.29ms - +0.55ms |
| branch | 360 kB | 474.50ms - 477.01ms | unsure 🔍 -0% - +1% -0.55ms - +3.29ms |
- |
color-wheel permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 346 kB | 472.91ms - 475.30ms | - | unsure 🔍 -1% - +0% -2.90ms - +0.70ms |
| branch | 359 kB | 473.85ms - 476.55ms | unsure 🔍 -0% - +1% -0.70ms - +2.90ms |
- |
grid permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 291 kB | 34.70ms - 34.98ms | - | faster ✔ 0% - 1% 0.08ms - 0.44ms |
| branch | 302 kB | 34.98ms - 35.22ms | slower ❌ 0% - 1% 0.08ms - 0.44ms |
- |
menu permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 298 kB | 232.77ms - 235.73ms | - | unsure 🔍 -0% - +1% -0.77ms - +2.93ms |
| branch | 309 kB | 232.05ms - 234.28ms | unsure 🔍 -1% - +0% -2.93ms - +0.77ms |
- |
number-field permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 493 kB | 174.02ms - 175.30ms | - | unsure 🔍 -1% - +0% -1.83ms - +0.20ms |
| branch | 505 kB | 174.69ms - 176.26ms | unsure 🔍 -0% - +1% -0.20ms - +1.83ms |
- |
overlay permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 336 kB | 71.21ms - 71.66ms | - | faster ✔ 0% - 1% 0.23ms - 0.90ms |
| branch | 347 kB | 71.75ms - 72.24ms | slower ❌ 0% - 1% 0.23ms - 0.90ms |
- |
picker permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 442 kB | 628.39ms - 634.59ms | - | unsure 🔍 -0% - +1% -0.89ms - +7.14ms |
| branch | 453 kB | 625.82ms - 630.91ms | unsure 🔍 -1% - +0% -7.14ms - +0.89ms |
- |
popover permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 230 kB | 29.38ms - 29.57ms | - | faster ✔ 1% - 2% 0.31ms - 0.59ms |
| branch | 241 kB | 29.82ms - 30.03ms | slower ❌ 1% - 2% 0.31ms - 0.59ms |
- |
radio permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 270 kB | 87.13ms - 88.18ms | - | unsure 🔍 -1% - +0% -0.84ms - +0.42ms |
| branch | 280 kB | 87.51ms - 88.22ms | unsure 🔍 -0% - +1% -0.42ms - +0.84ms |
- |
sidenav permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 275 kB | 393.92ms - 398.49ms | - | faster ✔ 0% - 2% 0.77ms - 7.69ms |
| branch | 286 kB | 397.83ms - 403.04ms | slower ❌ 0% - 2% 0.77ms - 7.69ms |
- |
slider permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 330 kB | 140.37ms - 142.05ms | - | unsure 🔍 -1% - +1% -0.78ms - +1.37ms |
| branch | 341 kB | 140.24ms - 141.58ms | unsure 🔍 -1% - +1% -1.37ms - +0.78ms |
- |
split-button permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 534 kB | 1944.07ms - 1946.98ms | - | unsure 🔍 -0% - +0% -1.99ms - +2.25ms |
| branch | 546 kB | 1943.86ms - 1946.94ms | unsure 🔍 -0% - +0% -2.25ms - +1.99ms |
- |
swatch permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 269 kB | 31.08ms - 31.29ms | - | faster ✔ 1% - 2% 0.36ms - 0.65ms |
| branch | 280 kB | 31.59ms - 31.78ms | slower ❌ 1% - 2% 0.36ms - 0.65ms |
- |
tabs permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 313 kB | 147.56ms - 149.58ms | - | unsure 🔍 -1% - +1% -1.25ms - +1.43ms |
| branch | 324 kB | 147.61ms - 149.35ms | unsure 🔍 -1% - +1% -1.43ms - +1.25ms |
- |
tags permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 324 kB | 28.02ms - 28.19ms | - | faster ✔ 1% - 2% 0.34ms - 0.56ms |
| branch | 335 kB | 28.48ms - 28.63ms | slower ❌ 1% - 2% 0.34ms - 0.56ms |
- |
tooltip permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 236 kB | 29.40ms - 29.73ms | - | faster ✔ 0% - 1% 0.01ms - 0.40ms |
| branch | 247 kB | 29.67ms - 29.88ms | slower ❌ 0% - 1% 0.01ms - 0.40ms |
- |
top-nav permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 303 kB | 105.29ms - 106.47ms | - | unsure 🔍 -1% - +1% -0.82ms - +0.60ms |
| branch | 313 kB | 105.59ms - 106.39ms | unsure 🔍 -1% - +1% -0.60ms - +0.82ms |
- |
tray permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 317 kB | 85.02ms - 85.62ms | - | faster ✔ 0% - 2% 0.24ms - 1.49ms |
| branch | 329 kB | 85.64ms - 86.74ms | slower ❌ 0% - 2% 0.24ms - 1.49ms |
- |
Firefox
accordion permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 266 kB | 622.12ms - 634.76ms | - | unsure 🔍 -2% - +1% -10.45ms - +5.17ms |
| branch | 277 kB | 626.49ms - 635.67ms | unsure 🔍 -1% - +2% -5.17ms - +10.45ms |
- |
action-bar permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 233 kB | 127.03ms - 139.33ms | - | unsure 🔍 -9% - +4% -12.66ms - +5.90ms |
| branch | 244 kB | 129.60ms - 143.52ms | unsure 🔍 -5% - +10% -5.90ms - +12.66ms |
- |
action-group permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 426 kB | 363.82ms - 376.90ms | - | faster ✔ 0% - 5% 1.18ms - 19.42ms |
| branch | 438 kB | 374.30ms - 387.02ms | slower ❌ 0% - 5% 1.18ms - 19.42ms |
- |
action-menu permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 595 kB | 484.51ms - 499.97ms | - | unsure 🔍 -2% - +2% -8.94ms - +11.86ms |
| branch | 608 kB | 483.82ms - 497.74ms | unsure 🔍 -2% - +2% -11.86ms - +8.94ms |
- |
color-area permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 342 kB | 801.22ms - 830.02ms | - | unsure 🔍 -2% - +3% -13.44ms - +22.32ms |
| branch | 355 kB | 800.58ms - 821.78ms | unsure 🔍 -3% - +2% -22.32ms - +13.44ms |
- |
color-slider permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 347 kB | 803.07ms - 823.93ms | - | unsure 🔍 -2% - +2% -13.42ms - +15.62ms |
| branch | 360 kB | 802.29ms - 822.51ms | unsure 🔍 -2% - +2% -15.62ms - +13.42ms |
- |
color-wheel permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 346 kB | 770.16ms - 788.52ms | - | unsure 🔍 -2% - +1% -12.99ms - +11.31ms |
| branch | 359 kB | 772.22ms - 788.14ms | unsure 🔍 -1% - +2% -11.31ms - +12.99ms |
- |
grid permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 291 kB | 107.50ms - 117.58ms | - | unsure 🔍 -6% - +7% -6.26ms - +7.70ms |
| branch | 302 kB | 107.00ms - 116.64ms | unsure 🔍 -7% - +6% -7.70ms - +6.26ms |
- |
menu permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 298 kB | 643.15ms - 665.93ms | - | unsure 🔍 -2% - +3% -10.79ms - +17.67ms |
| branch | 309 kB | 642.58ms - 659.62ms | unsure 🔍 -3% - +2% -17.67ms - +10.79ms |
- |
number-field permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 493 kB | 496.61ms - 513.39ms | - | unsure 🔍 -5% - +0% -24.05ms - +2.01ms |
| branch | 505 kB | 506.05ms - 525.99ms | unsure 🔍 -0% - +5% -2.01ms - +24.05ms |
- |
overlay permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 336 kB | 230.76ms - 242.44ms | - | unsure 🔍 -7% - +0% -18.31ms - +0.27ms |
| branch | 347 kB | 238.40ms - 252.84ms | unsure 🔍 -0% - +8% -0.27ms - +18.31ms |
- |
picker permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 442 kB | 1350.38ms - 1387.98ms | - | unsure 🔍 -3% - +1% -39.16ms - +10.28ms |
| branch | 453 kB | 1367.56ms - 1399.68ms | unsure 🔍 -1% - +3% -10.28ms - +39.16ms |
- |
popover permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 230 kB | 104.48ms - 123.28ms | - | unsure 🔍 -22% - +1% -29.73ms - +2.53ms |
| branch | 241 kB | 114.37ms - 140.59ms | unsure 🔍 -3% - +27% -2.53ms - +29.73ms |
- |
radio permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 270 kB | 332.36ms - 345.24ms | - | unsure 🔍 -5% - +1% -18.69ms - +3.25ms |
| branch | 280 kB | 337.64ms - 355.40ms | unsure 🔍 -1% - +6% -3.25ms - +18.69ms |
- |
sidenav permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 275 kB | 1097.60ms - 1125.08ms | - | unsure 🔍 -2% - +1% -28.03ms - +12.59ms |
| branch | 286 kB | 1104.10ms - 1134.02ms | unsure 🔍 -1% - +3% -12.59ms - +28.03ms |
- |
slider permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 330 kB | 418.92ms - 431.24ms | - | unsure 🔍 -5% - +0% -22.18ms - +1.06ms |
| branch | 341 kB | 425.79ms - 445.49ms | unsure 🔍 -0% - +5% -1.06ms - +22.18ms |
- |
split-button permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 534 kB | 2132.93ms - 2157.55ms | - | unsure 🔍 -1% - +0% -24.46ms - +6.62ms |
| branch | 546 kB | 2144.68ms - 2163.64ms | unsure 🔍 -0% - +1% -6.62ms - +24.46ms |
- |
swatch permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 269 kB | 130.68ms - 145.88ms | - | unsure 🔍 -9% - +4% -13.10ms - +6.42ms |
| branch | 280 kB | 135.50ms - 147.74ms | unsure 🔍 -5% - +10% -6.42ms - +13.10ms |
- |
tabs permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 313 kB | 406.53ms - 423.59ms | - | unsure 🔍 -4% - +2% -15.90ms - +9.10ms |
| branch | 324 kB | 409.32ms - 427.60ms | unsure 🔍 -2% - +4% -9.10ms - +15.90ms |
- |
tags permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 324 kB | 90.55ms - 102.01ms | - | unsure 🔍 -12% - +5% -12.02ms - +5.02ms |
| branch | 335 kB | 93.48ms - 106.08ms | unsure 🔍 -5% - +13% -5.02ms - +12.02ms |
- |
tooltip permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 236 kB | 106.45ms - 118.71ms | - | unsure 🔍 -13% - +5% -15.00ms - +5.68ms |
| branch | 247 kB | 108.92ms - 125.56ms | unsure 🔍 -5% - +13% -5.68ms - +15.00ms |
- |
top-nav permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 303 kB | 328.13ms - 340.75ms | - | unsure 🔍 -3% - +3% -10.50ms - +8.50ms |
| branch | 313 kB | 328.34ms - 342.54ms | unsure 🔍 -3% - +3% -8.50ms - +10.50ms |
- |
tray permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 317 kB | 272.87ms - 287.13ms | - | unsure 🔍 -5% - +2% -14.98ms - +4.86ms |
| branch | 329 kB | 278.16ms - 291.96ms | unsure 🔍 -2% - +5% -4.86ms - +14.98ms |
- |
Is it expected that .size is 0 before duplicating the slider? (I would have expected 1)
This is a timing situation related to Storybook, which is not new in the context of this issue. There might be benefit to looking deeper into it, e.g. https://github.com/lit/lit/tree/main/packages/labs/context#late-upgraded-context-providers but I am not surprised by it today.