Skip to content
This repository has been archived by the owner on Dec 13, 2018. It is now read-only.

feat(typescript): Improved theme typing and tests #160

Merged
merged 3 commits into from
Jun 2, 2017

Conversation

luke-john
Copy link
Collaborator

BREAKING CHANGE: The updated theme typing will complain if existing usage of theme is unsafe

What:
Updated the typings around themes to get better safety around usage

Why:
We're implementing theming in a component library and wanted safety.

How:
Updated the typescript definition files and tests.

Checklist:

  • Documentation
  • Tests
  • Code complete
  • Added myself to contributors table N/A
  • Followed the commit message format

BREAKING CHANGE: The updated theme typing will complain if existing usage of theme is unsafe
@luke-john luke-john requested review from ErikCupal and kokjinsam June 2, 2017 08:58
@codecov-io
Copy link

codecov-io commented Jun 2, 2017

Codecov Report

Merging #160 into master will not change coverage.
The diff coverage is n/a.

Impacted file tree graph

@@          Coverage Diff          @@
##           master   #160   +/-   ##
=====================================
  Coverage     100%   100%           
=====================================
  Files          10     10           
  Lines         138    138           
  Branches       35     35           
=====================================
  Hits          138    138

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update d32bd24...45d7bdc. Read the comment docs.

@ErikCupal
Copy link
Collaborator

Great! 😃

Since Typescript 2.3 it's possible to set default generics type microsoft/TypeScript#13487. It's useful here as it cuts off a little boilerplate. See:

// Without the default generics

export interface StyledFunction<Props, Properties> {
  <CustomProps, ThemeProps>(
    // ...
  ): GlamorousComponent<Props & CustomProps>
}

...

const Title = glamorous.h1<{ color: string }, {}>(
  {
    "fontSize": "10px",
    "zIndex": "auto",
  },
  (props) => ({
    "color": props.color,
  }),
);

// With the default generic

export interface StyledFunction<Props, Properties> {
  <CustomProps, ThemeProps = {}>(
    // ...
  ): GlamorousComponent<Props & CustomProps>
}

...

const Title = glamorous.h1<{ color: string }>(
  {
    "fontSize": "10px",
    "zIndex": "auto",
  },
  (props) => ({
    "color": props.color,
  }),
);

I'll commit the changes for this improvement

ErikCupal added 2 commits June 2, 2017 11:46
added default type (empty object literal) for ThemeProps generic in StyledFunction
@kentcdodds
Copy link
Contributor

Thanks friends! So I'd like to avoid a major version bump if I can. At least, if we're doing that we should probably do other breaking changes while we're at it. So I'm going to merge this into next and we can talk about other things we can do.

@kentcdodds kentcdodds changed the base branch from master to next June 2, 2017 18:08
@kentcdodds kentcdodds merged commit f25cd65 into paypal:next Jun 2, 2017
kentcdodds pushed a commit that referenced this pull request Jun 4, 2017
* feat(typescript): Improved theme typing and tests

* fix(typescript): tweaked StyledFunction

added default type (empty object literal) for ThemeProps generic in StyledFunction

* fix(typescript): removed boilerplate from tests

removed redundant generic
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants