Infer HoC props

[AndrewMusgrave]

WHY are these changes introduced?

Improved HoC usage

• withSticky
• withAppProvider
• withContext
• withRef

WHAT is this pull request doing?

Letting typescript infer props rather than passing them as generics

Old

export default withAppProvider<Props>()(Component)

New

export default withAppProvider()(Component)

When we compose HoC we'll still have to pass props but only to compose

Old

export default compose<Props>(
  withContext<Props, DropZoneContext>(Consumer),
  withAppProvider<Props>(),
  withRef<Props>(),
)(FileUpload);

New

export default compose<Props>(
  withContext<DropZoneContext>(Consumer),
  withAppProvider(),
  withRef(),
)(FileUpload);

How to 🎩

This is a pretty big change so we'll want to test the components making use of different HoC.
Here's small list of some components you'll want to test making use of some HoC's

withSticky

• Scrollable

withAppProvider

• Button
• DatePicker
• OptionList
• most components 😄

withContext

• DropZone.FileUpload
• ResourceList.FilterControl
• ResourceList.Item

withRef

• DropZone.FileUpload
• UnstyledLink

[BPScott]

I'm not going to pretend to understand the TS intricacies that let this work but I love the sight of all those

- export default withAppProvider<Props>()(Thing);
+ export default withAppProvider()(Thing);

changes!

[chloerice]

👀

[dleroux]

C is Context in this case correct?

[AndrewMusgrave]

I believe it's for inferring the typeof component. So for example

withSticky()(Scrollable);

will infer React.ComponentClass<Props, React.ComponentState> & typeof Scrollable. typeof Scrollable will be inferred from & C

[dleroux]

This is great. What version of Typescript made this possible?

I couldn't build-consumer because of icons to test on web. I can't see see the resulting build impacting web but going with lessons learned.

[AndrewMusgrave]

This is great. What version of Typescript made this possible?

Not sure

I couldn't build-consumer because of icons to test on web. I can't see see the resulting build impacting web but going with lessons learned.

I think it'll be best to wait as well, until we can 🎩 in web

[AndrewMusgrave]

Steps to 🎩 in web

You'll want to be on master in web and hoc-infer-types in polaris-react

# 1
dev cd web
# 2
dev down && dev up && yarn add -D @shopify/polaris-icons
# 3
dev cd polaris-react
# 4
dev up && yarn build-consumer web
# 5
dev cd web && dev server

[chloerice]

Tophatted in web and tested all components in the style guide as well. All are 💯