[context] Broaden the host type of context controllers to be compatible with Lit 2 #4287

justinfagnani · 2023-10-12T18:47:52Z

This adds lit@^2.7.5 and @lit/reactive-element@^1.6.2 as dependencies of context, and builds the tests with those packages mapped in in a separate tsconfig.

That highlighted the type error in the controllers, which I fixed by changing the host type to ReactiveControllerHost & HTMLElement.

changeset-bot · 2023-10-12T18:47:56Z

🦋 Changeset detected

Latest commit: 6bb47e2

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

This PR includes changesets to release 2 packages

Name	Type
@lit/context	Patch
@lit-labs/context	Patch

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-10-12T18:48:10Z

📊 Tachometer Benchmark Results

Summary

nop-update

this-change, tip-of-tree, previous-release: unsure 🔍 -5% - +6% (-0.99ms - +1.25ms)
^{this-change vs tip-of-tree}

render

this-change: 91.88ms - 96.86ms
this-change, tip-of-tree, previous-release: unsure 🔍 -5% - +8% (-1.84ms - +3.26ms)
^{this-change vs tip-of-tree}
this-change, tip-of-tree, previous-release: unsure 🔍 -6% - +2% (-4.00ms - +1.65ms)
^{this-change vs tip-of-tree}
this-change, tip-of-tree, previous-release: unsure 🔍 -4% - +1% (-2.54ms - +0.49ms)
^{this-change vs tip-of-tree}

update

this-change: 1077.99ms - 1109.24ms
this-change, tip-of-tree, previous-release: unsure 🔍 -4% - +5% (-3.44ms - +4.31ms)
^{this-change vs tip-of-tree}
this-change, tip-of-tree, previous-release: unsure 🔍 -3% - +5% (-5.26ms - +7.12ms)
^{this-change vs tip-of-tree}
this-change, tip-of-tree, previous-release: unsure 🔍 -2% - +3% (-17.96ms - +29.18ms)
^{this-change vs tip-of-tree}

update-reflect

this-change: 1064.81ms - 1090.74ms
this-change, tip-of-tree, previous-release: unsure 🔍 -2% - +2% (-19.78ms - +20.58ms)
^{this-change vs tip-of-tree}

Results

this-change

Browser: chrome-headless 118.0.5993.117
Sample size: 50
Built by: Benchmarks #5732
Commit: 6bb47e2

render

Version	Avg time	vs
	91.88ms - 96.86ms	-

update

Version	Avg time	vs
	1077.99ms - 1109.24ms	-

update-reflect

Version	Avg time	vs
	1064.81ms - 1090.74ms	-

this-change, tip-of-tree, previous-release

Browser: chrome-headless 118.0.5993.117
Sample size: 30
Built by: Benchmarks #5732
Commit: 6bb47e2

render

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	37.79ms - 41.15ms	-	unsure 🔍 -5% - +8% -1.84ms - +3.26ms	unsure 🔍 -10% - +1% -4.21ms - +0.64ms
tip-of-tree tip-of-tree	36.84ms - 40.69ms	unsure 🔍 -8% - +5% -3.26ms - +1.84ms	-	unsure 🔍 -12% - +0% -5.10ms - +0.10ms
previous-release previous-release	39.51ms - 43.01ms	unsure 🔍 -2% - +11% -0.64ms - +4.21ms	unsure 🔍 -1% - +13% -0.10ms - +5.10ms	-

update

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	78.44ms - 83.95ms	-	unsure 🔍 -4% - +5% -3.44ms - +4.31ms	unsure 🔍 -5% - +6% -3.82ms - +4.57ms
tip-of-tree tip-of-tree	78.04ms - 83.48ms	unsure 🔍 -5% - +4% -4.31ms - +3.44ms	-	unsure 🔍 -5% - +5% -4.23ms - +4.11ms
previous-release previous-release	77.66ms - 83.98ms	unsure 🔍 -6% - +5% -4.57ms - +3.82ms	unsure 🔍 -5% - +5% -4.11ms - +4.23ms	-

nop-update

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	19.49ms - 21.15ms	-	unsure 🔍 -5% - +6% -0.99ms - +1.25ms	unsure 🔍 -18% - +1% -4.09ms - +0.35ms
tip-of-tree tip-of-tree	19.43ms - 20.94ms	unsure 🔍 -6% - +5% -1.25ms - +0.99ms	-	unsure 🔍 -18% - +0% -4.20ms - +0.19ms
previous-release previous-release	20.13ms - 24.25ms	unsure 🔍 -2% - +20% -0.35ms - +4.09ms	unsure 🔍 -1% - +21% -0.19ms - +4.20ms	-

this-change, tip-of-tree, previous-release

Browser: chrome-headless 118.0.5993.117
Sample size: 50
Built by: Benchmarks #5732
Commit: 6bb47e2

render

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	65.38ms - 69.16ms	-	unsure 🔍 -6% - +2% -4.00ms - +1.65ms	unsure 🔍 -4% - +4% -2.53ms - +2.53ms
tip-of-tree tip-of-tree	66.35ms - 70.54ms	unsure 🔍 -2% - +6% -1.65ms - +4.00ms	-	unsure 🔍 -2% - +6% -1.51ms - +3.87ms
previous-release previous-release	65.58ms - 68.95ms	unsure 🔍 -4% - +4% -2.53ms - +2.53ms	unsure 🔍 -6% - +2% -3.87ms - +1.51ms	-

update

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	148.08ms - 156.98ms	-	unsure 🔍 -3% - +5% -5.26ms - +7.12ms	unsure 🔍 -3% - +5% -5.09ms - +7.31ms
tip-of-tree tip-of-tree	147.29ms - 155.90ms	unsure 🔍 -5% - +3% -7.12ms - +5.26ms	-	unsure 🔍 -4% - +4% -5.91ms - +6.28ms
previous-release previous-release	147.10ms - 155.73ms	unsure 🔍 -5% - +3% -7.31ms - +5.09ms	unsure 🔍 -4% - +4% -6.28ms - +5.91ms	-

this-change, tip-of-tree, previous-release

Browser: chrome-headless 118.0.5993.117
Sample size: 50
Built by: Benchmarks #5732
Commit: 6bb47e2

render

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	65.94ms - 68.29ms	-	unsure 🔍 -4% - +1% -2.54ms - +0.49ms	unsure 🔍 -3% - +2% -1.77ms - +1.67ms
tip-of-tree tip-of-tree	67.19ms - 69.10ms	unsure 🔍 -1% - +4% -0.49ms - +2.54ms	-	unsure 🔍 -1% - +4% -0.60ms - +2.55ms
previous-release previous-release	65.92ms - 68.42ms	unsure 🔍 -2% - +3% -1.67ms - +1.77ms	unsure 🔍 -4% - +1% -2.55ms - +0.60ms	-

update

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	1135.94ms - 1170.14ms	-	unsure 🔍 -2% - +3% -17.96ms - +29.18ms	unsure 🔍 -1% - +2% -15.79ms - +27.30ms
tip-of-tree tip-of-tree	1131.21ms - 1163.65ms	unsure 🔍 -3% - +2% -29.18ms - +17.96ms	-	unsure 🔍 -2% - +2% -20.71ms - +21.00ms
previous-release previous-release	1134.18ms - 1160.39ms	unsure 🔍 -2% - +1% -27.30ms - +15.79ms	unsure 🔍 -2% - +2% -21.00ms - +20.71ms	-

update-reflect

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	1132.35ms - 1161.66ms	-	unsure 🔍 -2% - +2% -19.78ms - +20.58ms	unsure 🔍 -3% - +1% -30.63ms - +11.37ms
tip-of-tree tip-of-tree	1132.73ms - 1160.48ms	unsure 🔍 -2% - +2% -20.58ms - +19.78ms	-	unsure 🔍 -3% - +1% -30.49ms - +10.43ms
previous-release previous-release	1141.59ms - 1171.68ms	unsure 🔍 -1% - +3% -11.37ms - +30.63ms	unsure 🔍 -1% - +3% -10.43ms - +30.49ms	-

_{tachometer-reporter-action v2 for Benchmarks}

github-actions · 2023-10-12T18:50:16Z

The size of lit-html.js and lit-core.min.js are as expected.

justinfagnani · 2023-10-12T19:17:52Z

So the type errors the first commit creates look like this:

Click to see the build output

> @lit/context@1.0.0 build:ts:lit2-tests
> wireit

src/lib/decorators/consume.ts:57:29 - error TS2769: No overload matches this call.
  Overload 1 of 2, '(host: ReactiveElement, options: Options<{ __context__: ValueType; }>): ContextConsumer<{ __context__: ValueType; }, ReactiveElement>', gave the following error.
    Argument of type 'import("/Users/justinfagnani/Projects/Lit/lit-monorepo/packages/reactive-element/development/reactive-element", { assert: { "resolution-mode": "import" } }).ReactiveElement' is not assignable to parameter of type 'import("/Users/justinfagnani/Projects/Lit/lit-monorepo/node_modules/lit2/node_modules/@lit/reactive-element/development/reactive-element", { assert: { "resolution-mode": "import" } }).ReactiveElement'.
  Overload 2 of 2, '(host: ReactiveElement, context: { __context__: unknown; }, callback?: ((value: unknown, dispose?: (() => void) | undefined) => void) | undefined, subscribe?: boolean | undefined): ContextConsumer<...>', gave the following error.
    Argument of type 'import("/Users/justinfagnani/Projects/Lit/lit-monorepo/packages/reactive-element/development/reactive-element", { assert: { "resolution-mode": "import" } }).ReactiveElement' is not assignable to parameter of type 'import("/Users/justinfagnani/Projects/Lit/lit-monorepo/node_modules/lit2/node_modules/@lit/reactive-element/development/reactive-element", { assert: { "resolution-mode": "import" } }).ReactiveElement'.

57         new ContextConsumer(this, {
                               ~~~~


src/lib/decorators/consume.ts:70:31 - error TS2769: No overload matches this call.
  Overload 1 of 2, '(host: ReactiveElement, options: Options<{ __context__: ValueType; }>): ContextConsumer<{ __context__: ValueType; }, ReactiveElement>', gave the following error.
    Argument of type 'import("/Users/justinfagnani/Projects/Lit/lit-monorepo/packages/reactive-element/development/reactive-element", { assert: { "resolution-mode": "import" } }).ReactiveElement' is not assignable to parameter of type 'import("/Users/justinfagnani/Projects/Lit/lit-monorepo/node_modules/lit2/node_modules/@lit/reactive-element/development/reactive-element", { assert: { "resolution-mode": "import" } }).ReactiveElement'.
  Overload 2 of 2, '(host: ReactiveElement, context: { __context__: unknown; }, callback?: ((value: unknown, dispose?: (() => void) | undefined) => void) | undefined, subscribe?: boolean | undefined): ContextConsumer<...>', gave the following error.
    Argument of type 'import("/Users/justinfagnani/Projects/Lit/lit-monorepo/packages/reactive-element/development/reactive-element", { assert: { "resolution-mode": "import" } }).ReactiveElement' is not assignable to parameter of type 'import("/Users/justinfagnani/Projects/Lit/lit-monorepo/node_modules/lit2/node_modules/@lit/reactive-element/development/reactive-element", { assert: { "resolution-mode": "import" } }).ReactiveElement'.

70           new ContextConsumer(element, {
                                 ~~~~~~~


src/lib/decorators/provide.ts:62:53 - error TS2769: No overload matches this call.
  Overload 1 of 2, '(host: ReactiveElement, options: Options<{ __context__: ValueType; }>): ContextProvider<{ __context__: ValueType; }>', gave the following error.
    Argument of type 'import("/Users/justinfagnani/Projects/Lit/lit-monorepo/packages/reactive-element/development/reactive-element", { assert: { "resolution-mode": "import" } }).ReactiveElement' is not assignable to parameter of type 'import("/Users/justinfagnani/Projects/Lit/lit-monorepo/node_modules/lit2/node_modules/@lit/reactive-element/development/reactive-element", { assert: { "resolution-mode": "import" } }).ReactiveElement'.
      Types of property 'renderRoot' are incompatible.
        Type 'DocumentFragment | HTMLElement' is not assignable to type 'ShadowRoot | HTMLElement'.
          Type 'DocumentFragment' is not assignable to type 'ShadowRoot | HTMLElement'.
            Type 'DocumentFragment' is missing the following properties from type 'ShadowRoot': delegatesFocus, host, mode, onslotchange, and 11 more.
  Overload 2 of 2, '(host: ReactiveElement, context: { __context__: unknown; }, initialValue?: unknown): ContextProvider<{ __context__: unknown; }>', gave the following error.
    Argument of type 'import("/Users/justinfagnani/Projects/Lit/lit-monorepo/packages/reactive-element/development/reactive-element", { assert: { "resolution-mode": "import" } }).ReactiveElement' is not assignable to parameter of type 'import("/Users/justinfagnani/Projects/Lit/lit-monorepo/node_modules/lit2/node_modules/@lit/reactive-element/development/reactive-element", { assert: { "resolution-mode": "import" } }).ReactiveElement'.

62         controllerMap.set(this, new ContextProvider(this, {context}));
                                                       ~~~~


src/lib/decorators/provide.ts:81:58 - error TS2769: No overload matches this call.
  Overload 1 of 2, '(host: ReactiveElement, options: Options<{ __context__: ValueType; }>): ContextProvider<{ __context__: ValueType; }>', gave the following error.
    Argument of type 'import("/Users/justinfagnani/Projects/Lit/lit-monorepo/packages/reactive-element/development/reactive-element", { assert: { "resolution-mode": "import" } }).ReactiveElement' is not assignable to parameter of type 'import("/Users/justinfagnani/Projects/Lit/lit-monorepo/node_modules/lit2/node_modules/@lit/reactive-element/development/reactive-element", { assert: { "resolution-mode": "import" } }).ReactiveElement'.
  Overload 2 of 2, '(host: ReactiveElement, context: { __context__: unknown; }, initialValue?: unknown): ContextProvider<{ __context__: unknown; }>', gave the following error.
    Argument of type 'import("/Users/justinfagnani/Projects/Lit/lit-monorepo/packages/reactive-element/development/reactive-element", { assert: { "resolution-mode": "import" } }).ReactiveElement' is not assignable to parameter of type 'import("/Users/justinfagnani/Projects/Lit/lit-monorepo/node_modules/lit2/node_modules/@lit/reactive-element/development/reactive-element", { assert: { "resolution-mode": "import" } }).ReactiveElement'.

81           controllerMap.set(element, new ContextProvider(element, {context}));
                                                            ~~~~~~~



Found 4 errors in 2 files.

Errors  Files
     2  src/lib/decorators/consume.ts:57
     2  src/lib/decorators/provide.ts:62

Notice that the errors are in the definitions of the decorators, not at the use site of the decorators. This is a bit unexpected to me, since the decorators accept a ReactiveElement interface that should have incompatible renderRoot declarations between Lit 2 and Lit 3.

justinfagnani · 2023-10-13T16:57:05Z

With the help of @rictic yesterday we figure out the the error I hit on lit.dev only occurs when you have an installation like:

[email protected] /Users/justinfagnani/Projects/Lit/2.0/lit.dev
├─┬ [email protected] -> ./packages/lit-dev-content
│ ├─┬ @lit/[email protected]
│ │ └── @lit/[email protected]
│ └─┬ [email protected]
│   ├── @lit/[email protected]
│   └─┬ [email protected]
│     └── @lit/[email protected] deduped

So the use site (top-level) is using @lit/[email protected] and context is using @lit/[email protected]. In this case renderRoot including DocumentFragment (in 2.0) is not assignable to renderRoot including ShadowRoot (in 1.6).

If you swap the versions so that context is using 2.0 and the use site is using 1.6, then it type-checks fine because ShadowRoot is assignable to DocumentFragment.

Testing context with a different version for the test code is relatively easy - it's just a new tsconfig for tests - testing with a different version for context itself is hard because you need to get the build of the tests to resolve @lit/reactive-element in context to a different location, and I didn't figure out how to do that yet without a real node_modules install. Any remapping of paths in the tsconfigs for the tests applies to the tests, and we need a remapping that applies only to the library files, not tests.

I don't know how worth it it is to include a test like this. This is probably a corner case on installation, and there's an available if sometimes cumbersome fix of deduping npm installations. We could apply the fix and just not include these tests, and repeat if we get reports of similar errors externally.

packages/context/lit2/lit2-scope/package.json

augustjk · 2023-10-13T18:12:51Z

I don't know how worth it it is to include a test like this. This is probably a corner case on installation, and there's an available if sometimes cumbersome fix of deduping npm installations. We could apply the fix and just not include these tests, and repeat if we get reports of similar errors externally.

I agree with this sentiment.

rictic

Given that the tests are written, I think we should keep them.

I get the argument for not going to the bother to write them for some other less used packages though

augustjk · 2023-10-25T18:37:38Z

packages/context/src/lib/controllers/context-provider.ts

+  [K in keyof T]: T[K];
+};
+
+type ReactiveElementHost = Interface<Omit<ReactiveElement, 'renderRoot'>>;


Any reason why this can't also just be ReactiveContorllerHost & HTMLElement like for the ContextConsumer? Or maybe the other way around to use this for ContextConsumer?

Also wdyt about upstreaming this type into reactive-element so other decorators can use it too?

ReactiveContorllerHost & HTMLElement works

.changeset/two-spiders-walk.md

Co-authored-by: Augustine Kim <[email protected]>

Build context tests against Lit 2

421e78a

justinfagnani requested review from AndrewJakubowicz, augustjk and rictic October 12, 2023 18:47

Broaden the host type of context controllers

afc5835

justinfagnani changed the title ~~[context] Build context tests against Lit 2~~ [context] Broaden the host type of context controllers to be compatible with Lit 2 Oct 12, 2023

oops

cbfa632

justinfagnani marked this pull request as ready for review October 12, 2023 19:00

justinfagnani requested a review from kevinpschaaf as a code owner October 12, 2023 19:00

Repro the real error

55ae644

type: module

70fd7d5

augustjk reviewed Oct 13, 2023

View reviewed changes

packages/context/lit2/lit2-scope/package.json Show resolved Hide resolved

rictic approved these changes Oct 18, 2023

View reviewed changes

justinfagnani added 3 commits October 25, 2023 11:19

Fix the types

a3a3fc1

Don't install and build Lit 2 by default.

366e6b8

Merge branch 'main' into context-types

9fc6324

augustjk reviewed Oct 25, 2023

View reviewed changes

address comments

7fe867a

augustjk approved these changes Oct 26, 2023

View reviewed changes

augustjk reviewed Oct 26, 2023

View reviewed changes

.changeset/two-spiders-walk.md Outdated Show resolved Hide resolved

Update .changeset/two-spiders-walk.md

6bb47e2

Co-authored-by: Augustine Kim <[email protected]>

justinfagnani merged commit 4edf9bc into main Oct 26, 2023

justinfagnani deleted the context-types branch October 26, 2023 22:37

lit-robot mentioned this pull request Oct 27, 2023

Version Packages #4338

Closed

lit-robot mentioned this pull request Oct 27, 2023

Version Packages #4341

Merged

steverep mentioned this pull request Nov 1, 2023

Revert bump to @lit/[email protected] home-assistant/frontend#18496

Merged

9 tasks

CxsLucyfer mentioned this pull request Jan 29, 2024

[Snyk] Upgrade @lit/localize-tools from 0.6.3 to 0.7.1 CxsLucyfer/lit#3

Open

[context] Broaden the host type of context controllers to be compatible with Lit 2 #4287

[context] Broaden the host type of context controllers to be compatible with Lit 2 #4287

Uh oh!

Conversation

justinfagnani commented Oct 12, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

changeset-bot bot commented Oct 12, 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 Oct 12, 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

update-reflect

Uh oh!

github-actions bot commented Oct 12, 2023

Uh oh!

justinfagnani commented Oct 12, 2023

Uh oh!

justinfagnani commented Oct 13, 2023

Uh oh!

Uh oh!

augustjk commented Oct 13, 2023

Uh oh!

rictic left a comment

Choose a reason for hiding this comment

Uh oh!

augustjk Oct 25, 2023

Choose a reason for hiding this comment

Uh oh!

justinfagnani Oct 26, 2023

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

justinfagnani commented Oct 12, 2023 •

edited

Loading

changeset-bot bot commented Oct 12, 2023 •

edited

Loading

github-actions bot commented Oct 12, 2023 •

edited

Loading