@lit/context's types conflict with those documented on the context protocol #4609
Description
Which package(s) are affected?
Context (@lit/context)
Description
The context protocol offers some types for context events https://github.com/webcomponents-cg/community-protocols/blob/main/proposals/context.md#definitions
In a typescript project where these types are present, installing and importing @lit/context will break with this error:
node_modules/@lit/context/lib/context-request-event.d.ts:13:9 - error TS2717: Subsequent property declarations must have the same type. Property ''context-request'' must be of type 'ContextEvent<UnknownContext>', but here has type 'ContextRequestEvent<{ __context__: unknown; }>'.
13 'context-request': ContextRequestEvent<Context<unknown, unknown>>;
~~~~~~~~~~~~~~~~~
lib/context/event.ts:74:5
74 'context-request': ContextEvent<UnknownContext>;
~~~~~~~~~~~~~~~~~
''context-request'' was also declared here.
Found 1 error in node_modules/@lit/context/lib/context-request-event.d.ts:13
Reproduction
- start a new typescript project, with this tsconfig:
{ "compilerOptions": { "experimentalDecorators": true, "moduleResolution": "NodeNext", "module": "NodeNext", "target": "ES2022" }, } - copy the type definitions in from the context protocol proposal into
ctx.js - install typescript, lit, and lit/context
{ "name": "eg", "version": "1.0.0", "description": "", "main": "index.js", "type": "module", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license": "ISC", "dependencies": { "@lit/context": "^1.1.0", "lit": "^3.1.2", "typescript": "^5.4.3" } } - copy this into
element.jsimport { createContext, provide, consume } from '@lit/context'; import { LitElement } from 'lit'; import { createContext as createProtocolContext } from './ctx.js' const context = createContext<number>('number'); const protocolContext = createProtocolContext<number>('protocol-number', 0); class MyElement extends LitElement { @provide({ context }) provided = 0; @consume({ context: protocolContext }) consumed = 0; }
npx tsc
Observe:
element.ts:12:4 - error TS1271: Decorator function return type is '{ message: "provided type not assignable to consuming field"; provided: unknown; consuming: number; }' but is expected to be 'void' or 'any'.
12 @consume({ context: protocolContext }) consumed = 0;
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
element.ts:12:14 - error TS2741: Property '__context__' is missing in type 'Readonly<Context<number>>' but required in type '{ __context__: unknown; }'.
12 @consume({ context: protocolContext }) consumed = 0;
~~~~~~~
node_modules/@lit/context/development/lib/create-context.d.ts:10:5
10 __context__: ValueType;
~~~~~~~~~~~
'__context__' is declared here.
node_modules/@lit/context/development/lib/decorators/consume.d.ts:34:5
34 context: Context<unknown, ValueType>;
~~~~~~~
The expected type comes from property 'context' which is declared here on type '{ context: { __context__: unknown; }; subscribe?: boolean; }'
node_modules/@lit/context/development/lib/context-request-event.d.ts:13:9 - error TS2717: Subsequent property declarations must have the same type. Property ''context-request'' must be of type 'ContextEvent<UnknownContext>', but here has type 'ContextRequestEvent<{ __context__: unknown; }>'.
13 'context-request': ContextRequestEvent<Context<unknown, unknown>>;
~~~~~~~~~~~~~~~~~
ctx.ts:69:5
69 "context-request": ContextEvent<UnknownContext>;
~~~~~~~~~~~~~~~~~
''context-request'' was also declared here.
Found 3 errors in 2 files.
Errors Files
2 element.ts:12
1 node_modules/@lit/context/development/lib/context-request-event.d.ts:13
Workaround
only use lit's interpretation of context, give up on interop
Is this a regression?
No or unsure. This never worked, or I haven't tried before.
Affected versions
see package.json above
Browser/OS/Node environment
Node: v20.10.0
Typescript and lit: see above package.json