Update from upstream repo facebookincubator/create-react-app@master #3
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Timer
force-pushed
the
master
branch
2 times, most recently
from
8af019b
to
dc74990
Compare
amyrlam
force-pushed
the
master
branch
2 times, most recently
from
cecd762
to
d3b19f9
Compare
The old favicon was the same as the official react documentation, which is a minor annoyance during development when trying to find the tab you want. The new favicon is just the old with inverted colors. Closes #7957
This removes `React.FC` from the base template for a Typescript project.
Long explanation for a small change:
`React.FC` is unnecessary: it provides next to no benefits and has a few downsides. (See below.) I see a lot of beginners to TS+React using it, however, and I think that it's usage in this template is a contributing factor to that, as the prominence of this template makes it a de facto source of "best practice".
### Downsides to React.FC/React.FunctionComponent
##### Provides an implicit definition of `children`
Defining a component with `React.FC` causes it to implicitly take `children` (of type `ReactNode`). It means that all components accept children, even if they're not supposed to, allowing code like:
```ts
const App: React.FC = () => { /*... */ };
const Example = () => {
<App><div>Unwanted children</div></App>
}
```
This isn't a run-time error, but it is a mistake and one that would be caught by Typescript if not for `React.FC`.
##### Doesn't support generics.
I can define a generic component like:
```ts
type GenericComponentProps<T> = {
prop: T
callback: (t: T) => void
}
const GenericComponent = <T>(props: GenericComponentProps<T>) => {/*...*/}
```
But it's not possible when using `React.FC` - there's no way to preserve the unresolved generic `T` in the type returned by `React.FC`.
```ts
const GenericComponent: React.FC</* ??? */> = <T>(props: GenericComponentProps<T>) => {/*...*/}
```
##### Makes "component as namespace pattern" more awkward.
It's a somewhat popular pattern to use a component as a namespace for related components (usually children):
```jsx
<Select>
<Select.Item />
</Select>
```
This is possible, but awkward, with `React.FC`:
```tsx
const Select: React.FC<SelectProps> & { Item: React.FC<ItemProps> } = (props) => {/* ... */ }
Select.Item = (props) => { /*...*/ }
```
but "just works" without `React.FC`:
```tsx
const Select = (props: SelectProps) => {/* ... */}
Select.Item = (props) => { /*...*/ }
```
##### Doesn't work correctly with defaultProps
This is a fairly moot point as in both cases it's probably better to use ES6 default arguments, but...
```tsx
type ComponentProps = { name: string; }
const Component = ({ name }: ComponentProps) => (<div>
{name.toUpperCase()} /* Safe since name is required */
</div>);
Component.defaultProps = { name: "John" };
const Example = () => (<Component />) /* Safe to omit since name has a default value */
```
This compiles correctly. Any approach with `React.FC` will be slightly wrong: either `React.FC<{name: string}>` will make the prop required by consumers, when it should be optional, or `React.FC<{name?: string}>` will cause `name.toUpperCase()` to be a type error. There's no way to replicate the "internally required, externally optional" behavior which is desired.
##### It's as long, or longer than the alternative: (especially longer if you use `FunctionalComponent`):
Not a huge point, but it isn't even shorter to use `React.FC`
```ts
const C1: React.FC<CProps> = (props) => { }
const C2 = (props: CProps) => {};
```
### Benefits of React.FC
##### Provides an explicit return type
The only benefit I really see to `React.FC` (unless you think that implicit `children` is a good thing) is that it specifies the return type, which catches mistakes like:
```ts
const Component = () => {
return undefined; // components aren't allowed to return undefined, just `null`
}
```
In practice, I think this is fine, as it'll be caught as soon as you try to use it:
```ts
const Example = () => <Component />; // Error here, due to Component returning the wrong thing
```
But even with explicit type annotations, `React.FC` still isn't saving very much boilerplate:
```ts
const Component1 = (props: ComponentProps): ReactNode => { /*...*/ }
const Component2: FC<ComponentProps> = (props) => { /*...*/ }
```
Updates dependencies and removes babel plugins that are now covered by `@babel/preset-env`. Co-authored-by: hdineen <hdineen@hubspot.com>
…late locally (#8092) Co-authored-by: Ian Schmitz <ianschmitz@gmail.com>
`Auto Fix is enabled by default. Use the single string form.` warning is shown in `.vscode/settings.json` due to changes in vscode-eslint. As autoFix is set to default, object format in `eslint.validate` is deprecated.
Co-authored-by: Ian Schmitz <ianschmitz@gmail.com>
Co-authored-by: Ian Schmitz <ianschmitz@gmail.com>
* Expands scope of openBrowser tab control Adjust openChrome.applescript to allow manipulation of other Chromium-based browsers (defaulting to Chrome). Requires list of compatible browsers to try in openBrowser.js * Fix typo * Remove Safari
Resolves #10411 Bumps immer version to 8.0.1 to address the prototype pollution vulnerability with the current 7.0.9 version.
The variable is also used in dev.
* Update getProcessForPort.js * Update getProcessForPort.js Co-authored-by: Zhou Peng <zpbrent@gmail.com> Co-authored-by: Dan Abramov <dan.abramov@gmail.com>
Co-authored-by: Ian Schmitz <ianschmitz@gmail.com>
Bumps [y18n](https://github.com/yargs/y18n) from 4.0.0 to 4.0.1. - [Release notes](https://github.com/yargs/y18n/releases) - [Changelog](https://github.com/yargs/y18n/blob/master/CHANGELOG.md) - [Commits](https://github.com/yargs/y18n/commits) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Including `%s/’/'/g` to avoid https://www.fileformat.info/info/unicode/char/2019/index.htm
This just fixes a shell snippet in the readme file for this plugin
Replace the Github home link with a link to the repo's main page or a link to the source (https://github.com/CodeByZach/pace/blob/master/pace.js)
Bump immer minor version to fix `Prototype Pollution` Security issue.
Co-authored-by: Brody McKee <mrmckeb@gmail.com>
…les libraries that contain sourcemaps (#8227)
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Hello!
The remote
facebookincubator/create-react-app@masterhas some new changes that aren't in this fork.So, here they are, ready to be merged! 🎉
If this pull request can be merged without conflict, you can publish your software
with these new changes. Otherwise, fix any merge conflicts by clicking the
Resolve Conflictsbutton.
Have fun!
Created by Backstroke (I'm a bot!)