lit / lit/lit.dev

Document static interface on mixin

Open
#393 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
142
Forks
230
PR merge metrics
No merged PRs in 30d

Description

In [Typing the Subclass Documentation](https://lit.dev/docs/composition/mixins/#typing-the-subclass) we include how to declare the type of a subclass, but don't include handling a static interface.

It may be helpful to document handling of static properties.

Example case where a mixin adds a static property with correct typing, i.e:

```ts
// Define the interface for the mixin
export declare class MyMixinInterface {
highlight: boolean;
}

// Define static interface for mixin
interface MyMixinStaticInterface {
mixinStyles: CSSResultGroup;
}

export const MyMixin = >(superClass: T) => {
class MyMixinClass extends superClass {
@property() highlight = false;
static readonly mixinStyles = css`...`
};
// Cast return type to your mixin's interface intersected with the superClass type
return MyMixinClass as Constructor & MyMixinStaticInterface & T;
}
```

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the “Typing the Subclass Documentation” section linked in the issue, especially the “typing the subclass” subsection. Document how a mixin can expose and type static properties using the provided TypeScript example; done means the documentation explains the static interface alongside the existing subclass typing guidance.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
documentation
Issue type
Documentation
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
55/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.