Skip to content

The example for when doesn't show that it takes the condition value as a parameter #1480

Description

@julienw

The when directive docs are out of date with the actual v3 API. Since lit#4310, when() passes the (type-narrowed) condition value to both case functions, but the docs don't reflect this.

1. The Signature box is wrong

It currently shows:

when<T, F>(
  condition: boolean,
  trueCase: () => T,
  falseCase?: () => F
)

The actual v3 signature uses a generic condition and passes it to the callbacks:

when<C, T, F = undefined>(
  condition: C,
  trueCase: (c: Exclude<C, Falsy>) => T,
  falseCase?: (c: Extract<C, Falsy>) => F
): C extends Falsy ? F : T

(We may want to simplify it for the docs? I'm not so sure)

2. The example doesn't use the parameter

It currently is:

${when(this.user, () => html`User: ${this.user.username}`, () => html`Sign In...`)}

It should show the value being passed in (and narrowed), which is the whole point of the feature:

${when(this.user, (user) => html`User: ${user.username}`, () => html`Sign In...`)}

Additional note

The same incomplete example is also in the upstream JSDoc at lit/packages/lit-html/src/directives/when.ts, so that may be worth updating too for consistency.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    Status
    No status

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions