Skip to content

[lit-html] Provide write-able version of ClassInfo #5024

@ava-cassiopeia

Description

@ava-cassiopeia

Should this be an RFC?

  • This is not a substantial change

Which package is this a feature request for?

Lit Core (lit / lit-html / lit-element / reactive-element)

Description

It would be useful to have a write-able version of ClassInfo—something like ClassInfoBuilder or similar—for constructing a ClassInfo object dynamically.

This would look like:

export interface ClassInfoBuilder {
  [name: string]: string | boolean | number;
}

export type ClassInfo = Readonly<ClassInfoBuilder>;

And would help support patterns like:

override render() {
  const classes: ClassInfoBuilder = {
    'class1': true,
    'class2': true,
  };
  // Conditionally add another class
  if (condition) classes['class3'] = true;

  // use it
  const containerClasses = classMap(classes);
  
  // etc.
}

Without a non-readonly version of ClassInfo, this would produce type errors like:

Index signature in type 'ClassInfo' only permits reading.

Alternatives and Workarounds

It's possible to use any for this, but that loses some type safety and clarity. Similarly, it's possible to define the -Builder version of ClassInfo, but it seems a little silly to define that interface per lit application.

Metadata

Metadata

Projects

Status

✅ Done

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions