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

Finish simplifying component definitions; component & screen generator tweaks #363

Merged
merged 8 commits into from
Aug 11, 2020

Conversation

bryanstearns
Copy link
Member

Standardized component definitions

After internal deliberation at IR, we've concluded that it's best to use function syntax when declaring functional components (including screens; gets us more-useful stacktraces), and not to use React.FunctionComponent as the parent type of component prop interfaces (see #358). So, plain components are simply:

export function Foo(props: FooProps) {
  // ...
}

Components wrapped with mobx-react-lite's observer HOC (including nearly all screens) use this slightly-more-verbose version (which, yes, has the function name twice, but we feel this is a small price to pay for nice stacktraces!):

export const Foo = observer(function Foo(props: FooProps) {
  // ...
})

So, then, this PR...

I started by cherry-picking the commits from #316 which generates screens in a subdirectory; they needed merge updates against current master (thanks to @lasharela for #316, and to @BrandonSM who contributed very similar work in #331). Then:

  • Fixed storybook's new warning about not configuring AsyncStorage, which we were already doing but not in a way that suppressd the warning.
  • Updated the remaining predefined components, screens, and the generators to use one of those two ways of defining components.
  • Modified the component generator to only generate two kinds of components, observer-wrapped and plain; the two former kinds (functionComponent and statelessFunction) didn't really make sense to me. You can avoid the question when generating by specifying --observer or --no-observer on the ignite generate component command line.
  • Modified the screen generator to allow users to name the screen in CamelCase or kebab-case on the command line, and ensured that it tolerated Screen or -screen equally; it now always uses kebab-case in the filenames.

Lasha Kava and others added 7 commits August 6, 2020 14:24
…-wrapped and plain components

Also, simplified the generated component content to require less initial work on new components,
and moved the style definitions into the component file (since our predefined components all have
integrated styles)
…omponents; tolerate either suffix

Consistenly use kebab-case for filenames
@bryanstearns
Copy link
Member Author

@jamonholmgren NB: This replaces the --functionComponent and --stateless-function command line options on ignite generate component (with --observer and --no-observer); not sure whether we count that as a breaking change for versioning...

@bryanstearns bryanstearns linked an issue Aug 6, 2020 that may be closed by this pull request
@bryanstearns bryanstearns self-assigned this Aug 6, 2020
Copy link
Member

@jamonholmgren jamonholmgren left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good! We should have a discussion about major version vs minor in this case. I'm leaning toward major.

@jamonholmgren
Copy link
Member

Waiting for #362 (cc @nirre7) and then we'll release as 6.0.0.

@nirre7
Copy link
Contributor

nirre7 commented Aug 11, 2020

@bryanstearns
The whole function thing is "my bad".
I though that to be able to use hooks one had to use the React.FunctionComponent .. Yepp, I was wrong.
Thank god there are people smarter than me 😌

@jamonholmgren I'll try to get the #362 tests sorted today.

@bryanstearns bryanstearns merged commit 86b3223 into master Aug 11, 2020
@bryanstearns bryanstearns deleted the component-and-generator-fixes branch August 11, 2020 20:25
infinitered-circleci pushed a commit that referenced this pull request Aug 11, 2020
# [5.3.0](v5.2.1...v5.3.0) (2020-08-11)

### Features

* **deps:** Bumps several dependencies ([#364](#364) by [@bryanstearns](https://github.com/bryanstearns)) ([4b1d8b5](4b1d8b5))
* **generators:** Finish simplifying component definitions; component & screen generator tweaks ([#363](#363)) [skip-ci] ([86b3223](86b3223))
* **react-native:** Bump React Native version to 0.63 ([#362](#362) by [@nirre7](https://github.com/nirre7)) ([4988e16](4988e16))
@infinitered-circleci
Copy link

🎉 This PR is included in version 5.3.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

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

Successfully merging this pull request may close these issues.

Remove React.FunctionComponent from codebase
4 participants