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

    Fields

    No fields configured for issues without a type.

    Projects

    Status
    No status

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions