javivelasco / javivelasco/react-css-themr

Possible drop of support of using themr as decorator with TypeScript

Open
#71 3 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
JavaScript
Stars
589
Forks
65
PR merge metrics
No merged PRs in 30d

Description

Currently I'm trying to rewrite `themr` in TS to provide consistent up-to-date typings and I'm in the middle of the struggle started in #39
The problem is that switching from correct `React.ComponentClass

` to component constructor type (with `new()`) is completely broken with `strictNullChecks` on, [here's my comment](https://github.com/javivelasco/react-css-themr/pull/39#issuecomment-279666876)
```typescript
@themr('foo') //error - Type 'null' is not assignable to type 'Element'
class FooClass extends React.Component {
render()/*: JSX.Element | null //ok when uncommented*/ {
return

hi
;
}
}
```

Moreover, decorating a class with `@themr` complains on every lifecycle method (like `componentWillMount`) of decorated class as TS can't cast it to `ComponentClass`. On the other hand, calling `themr` as a function on existing class works fine - seems like decorators are broken in TS.
Well, at least they are still behind experimental flag.

@mpodlasin @odensc Could you please check if you do use decorators instead of composing HOCs separately from actual component class or sfc which is more natural for react ecosystem in general especially when using recompose?

If it's ok for you and if it's worth dropping experimental decorators, I would open a PR with a fresh new `themr` fully in typescript.

The good news are that now I'm finally able to overwrite props in decorated component with their non-necessary versions, thanks to [this comment](https://github.com/Microsoft/TypeScript/issues/12215#issuecomment-307614501)
So that themed component does not require theme object to be passed via props but still checks its type if it is present.

**UPDATE**: still it will be possible and absolutely transparent to use themr as decorator for current ES6 users.

Contributor guide

No contributing guide indexed for this repository

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 themr decorator entry point and review the TypeScript and React component-constructor discussion linked from issue #39. Reproduce the example with strictNullChecks enabled, then verify that decorator usage and calling themr as a function have consistent typings while retaining the stated ES6 decorator behavior.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react, typescript
Domain
frontend
Issue type
Refactor
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.