Make our directives generic, for better type checking of lit templates #5035
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
🦋 Changeset detectedLatest commit: 3af7b31 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
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 |
Contributor
📊 Tachometer Benchmark ResultsSummarynop-update
render
update
update-reflect
Resultsthis-change
render
update
update-reflect
this-change, tip-of-tree, previous-release
render
update
nop-update
this-change, tip-of-tree, previous-release
render
update
this-change, tip-of-tree, previous-release
render
update
update-reflect
|
4f09a67 to
e01f2d3
Compare
Contributor
|
The size of lit-html.js and lit-core.min.js are as expected. |
Collaborator
justinfagnani
left a comment
There was a problem hiding this comment.
LGTM with one question.
I think you need to run format too.
packages/lit-html/src/directive.ts
Outdated
|
|
||
| export interface DirectiveClass { | ||
| new (part: PartInfo): Directive; | ||
| export interface DirectiveClass<RenderAs = unknown> { |
Collaborator
There was a problem hiding this comment.
Why do you need this type parameter? You'd normally get the return type with ReturnType<C['render']>.
Is it so that you can feed in a type variable from an override type for directive(), like in Guard? If so, can you leave a comment?
Collaborator
Author
There was a problem hiding this comment.
We can actually use infer (and similar tricks in the TypeScript type system) to get around needing this at all. I've updated the PR to not need any changes to the common directive types, with a little care, a directive can just be written to put enough information on the DirectiveResults it makes.
| } | ||
|
|
||
| interface Until { | ||
| <T>(val: T): DirectiveResult<typeof UntilDirective<T>>; |
Collaborator
There was a problem hiding this comment.
Why can't this be:
Suggested change
| <T>(val: T): DirectiveResult<typeof UntilDirective<T>>; | |
| <T>(...args: Array<T>): DirectiveResult<typeof UntilDirective<T>>; |
Won't TS infer T as a union of the arg types, just like you're doing manually?
…plates. This allows a custom directive to carry enough information that the TypeScript type system can tell the type that a DirectiveResult will render. This is backwards compatible, existing directives will generally be inferred to render the type of their `render` functions. Many directives can be updated to themselves be generic, to better express their types, and I've done this for our built in directives. By itself, this doesn't do much, but I've also got a patch to rune's lit analyzer to better type check directives there.
Turns out, all we need is to make our own generic directives generic enough so that we can infer the return type of their render functions from their DirectiveResult. No need to change directive.ts or async-directive.ts at all.
2180310 to
8cee2db
Compare
justinfagnani
approved these changes
Aug 21, 2025
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
If a directive's type is written such that it returns sufficiently specific DirectiveResults, the TypeScript type system can tell the effective type that a DirectiveResult will render to its part.
By itself, this doesn't do much, but I've also got a patch to rune's lit analyzer to better type check directives there.