Skip to content

Commit

Permalink
Update case-police, fix case of webpack + CocoaPods (#3827)
Browse files Browse the repository at this point in the history
  • Loading branch information
slorber committed Aug 24, 2023
1 parent 991ef82 commit bfcc722
Show file tree
Hide file tree
Showing 23 changed files with 30 additions and 30 deletions.
2 changes: 1 addition & 1 deletion docs/_getting-started-linux-android.md
Original file line number Diff line number Diff line change
Expand Up @@ -146,7 +146,7 @@ yarn start
</Tabs>

:::note
If you're familiar with web development, Metro is similar to bundlers such as Vite and Webpack, but is designed end-to-end for React Native. For instance, Metro uses [Babel](https://babel.dev/) to transform syntax such as JSX into executable JavaScript.
If you're familiar with web development, Metro is similar to bundlers such as Vite and webpack, but is designed end-to-end for React Native. For instance, Metro uses [Babel](https://babel.dev/) to transform syntax such as JSX into executable JavaScript.
:::

<h3>Step 2: Start your application</h3>
Expand Down
2 changes: 1 addition & 1 deletion docs/_getting-started-macos-android.md
Original file line number Diff line number Diff line change
Expand Up @@ -161,7 +161,7 @@ yarn start
</Tabs>

:::note
If you're familiar with web development, Metro is similar to bundlers such as Vite and Webpack, but is designed end-to-end for React Native. For instance, Metro uses [Babel](https://babel.dev/) to transform syntax such as JSX into executable JavaScript.
If you're familiar with web development, Metro is similar to bundlers such as Vite and webpack, but is designed end-to-end for React Native. For instance, Metro uses [Babel](https://babel.dev/) to transform syntax such as JSX into executable JavaScript.
:::

<h3>Step 2: Start your application</h3>
Expand Down
2 changes: 1 addition & 1 deletion docs/_getting-started-macos-ios.md
Original file line number Diff line number Diff line change
Expand Up @@ -124,7 +124,7 @@ yarn start
</Tabs>

:::note
If you're familiar with web development, Metro is similar to bundlers such as Vite and Webpack, but is designed end-to-end for React Native. For instance, Metro uses [Babel](https://babel.dev/) to transform syntax such as JSX into executable JavaScript.
If you're familiar with web development, Metro is similar to bundlers such as Vite and webpack, but is designed end-to-end for React Native. For instance, Metro uses [Babel](https://babel.dev/) to transform syntax such as JSX into executable JavaScript.
:::

### Step 2: Start your application
Expand Down
2 changes: 1 addition & 1 deletion docs/_getting-started-windows-android.md
Original file line number Diff line number Diff line change
Expand Up @@ -177,7 +177,7 @@ yarn start
</Tabs>

:::note
If you're familiar with web development, Metro is similar to bundlers such as Vite and Webpack, but is designed end-to-end for React Native. For instance, Metro uses [Babel](https://babel.dev/) to transform syntax such as JSX into executable JavaScript.
If you're familiar with web development, Metro is similar to bundlers such as Vite and webpack, but is designed end-to-end for React Native. For instance, Metro uses [Babel](https://babel.dev/) to transform syntax such as JSX into executable JavaScript.
:::

<h3>Step 2: Start your application</h3>
Expand Down
2 changes: 1 addition & 1 deletion docs/navigation.md
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ Next, install the required peer dependencies. You need to run different commands
npm install react-native-screens react-native-safe-area-context
```

For iOS with bare React Native project, make sure you have [Cocoapods](https://cocoapods.org/) installed. Then install the pods to complete the installation:
For iOS with bare React Native project, make sure you have [CocoaPods](https://cocoapods.org/) installed. Then install the pods to complete the installation:

```shell
cd ios
Expand Down
2 changes: 1 addition & 1 deletion docs/platform-specific-code.md
Original file line number Diff line number Diff line change
Expand Up @@ -125,7 +125,7 @@ You can also use the `.native.js` extension when a module needs to be shared bet
For example, say you have the following files in your project:

```shell
Container.js # picked up by Webpack, Rollup or any other Web bundler
Container.js # picked up by webpack, Rollup or any other Web bundler
Container.native.js # picked up by the React Native bundler for both Android and iOS (Metro)
```

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ While the last step is the same for all the platforms, the first two steps are d

### <a name="dependencies-ios" />iOS

The Apple platform installs Fabric Native Components using [Cocoapods](https://cocoapods.org) as a dependency manager.
The Apple platform installs Fabric Native Components using [CocoaPods](https://cocoapods.org) as a dependency manager.

If you are already using the [`install_module_dependencies`](https://github.com/facebook/react-native/blob/main/packages/react-native/scripts/react_native_pods.rb#L198) function, then **there is nothing to do**. The function already takes care of installing the proper dependencies when the New Architecture is enabled and avoiding them when it is not enabled.

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ While the last step is the same for all the platforms, the first two steps are d

### <a name="dependencies-ios" />iOS

The Apple platform installs Turbo Native Modules using [Cocoapods](https://cocoapods.org) as a dependency manager.
The Apple platform installs Turbo Native Modules using [CocoaPods](https://cocoapods.org) as a dependency manager.

If you are already using the [`install_module_dependencies`](https://github.com/facebook/react-native/blob/main/packages/react-native/scripts/react_native_pods.rb#L198) function, then **there is nothing to do**. The function already takes care of installing the proper dependencies when the New Architecture is enabled and avoids them when it is not enabled.

Expand Down
2 changes: 1 addition & 1 deletion docs/the-new-architecture/pillars-fabric-components.md
Original file line number Diff line number Diff line change
Expand Up @@ -969,7 +969,7 @@ cd ios
RCT_NEW_ARCH_ENABLED=1 bundle exec pod install
```

This command installs the iOS dependencies for the project. The `RCT_NEW_ARCH_ENABLED=1` flag instructs **Cocoapods** that it has to execute some additional operations to run **Codegen**.
This command installs the iOS dependencies for the project. The `RCT_NEW_ARCH_ENABLED=1` flag instructs **CocoaPods** that it has to execute some additional operations to run **Codegen**.

:::note
You may have to run `bundle install` once before you can use `RCT_NEW_ARCH_ENABLED=1 bundle exec pod install`. You won't need to run `bundle install` anymore, unless you need to change the ruby dependencies.
Expand Down
2 changes: 1 addition & 1 deletion docs/the-new-architecture/pillars-turbomodule.md
Original file line number Diff line number Diff line change
Expand Up @@ -788,7 +788,7 @@ cd ios
RCT_NEW_ARCH_ENABLED=1 bundle exec pod install
```
This command will look for all the dependencies of the project and it will install the iOS ones. The `RCT_NEW_ARCH_ENABLED=1` instruct **Cocoapods** that it has to run some additional operations to run **Codegen**.
This command will look for all the dependencies of the project and it will install the iOS ones. The `RCT_NEW_ARCH_ENABLED=1` instruct **CocoaPods** that it has to run some additional operations to run **Codegen**.
:::note
You may have to run `bundle install` once before you can use `RCT_NEW_ARCH_ENABLED=1 bundle exec pod install`. You won't need to run `bundle install` anymore, unless you need to change the Ruby dependencies.
Expand Down
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@
},
"dependencies": {
"babel-eslint": "^10.1.0",
"case-police": "^0.5.6",
"case-police": "^0.5.14",
"eslint": "^8.20.0",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-mdx": "^1.16.0",
Expand Down
10 changes: 5 additions & 5 deletions website/blog/2016-03-24-introducing-hot-reloading.md
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ Hot reloading is available as of 0.22, you can enable it:

Now that we've seen why we want it and how to use it, the fun part begins: how it actually works.

Hot Reloading is built on top of a feature [Hot Module Replacement](https://webpack.js.org/guides/hot-module-replacement/), or HMR. It was first introduced by Webpack and we implemented it inside of React Native Packager. HMR makes the Packager watch for file changes and send HMR updates to a thin HMR runtime included on the app.
Hot Reloading is built on top of a feature [Hot Module Replacement](https://webpack.js.org/guides/hot-module-replacement/), or HMR. It was first introduced by webpack and we implemented it inside of React Native Packager. HMR makes the Packager watch for file changes and send HMR updates to a thin HMR runtime included on the app.

In a nutshell, the HMR update contains the new code of the JS modules that changed. When the runtime receives them, it replaces the old modules' code with the new one:

Expand Down Expand Up @@ -120,7 +120,7 @@ For `log` to pick up `time` changes, we'll need to clear its cached exports beca

## HMR API

HMR in React Native extends the module system by introducing the `hot` object. This API is based on [Webpack](https://webpack.github.io/hot-module-replacement.md)'s one. The `hot` object exposes a function called `accept` which allows you to define a callback that will be executed when the module needs to be hot swapped. For instance, if we would change `time`'s code as follows, every time we save time, we'll see “time changed” in the console:
HMR in React Native extends the module system by introducing the `hot` object. This API is based on [webpack](https://webpack.github.io/hot-module-replacement.md)'s one. The `hot` object exposes a function called `accept` which allows you to define a callback that will be executed when the module needs to be hot swapped. For instance, if we would change `time`'s code as follows, every time we save time, we'll see “time changed” in the console:

```
// time.js
Expand Down Expand Up @@ -167,17 +167,17 @@ In order to walk the dependency tree, the runtime receives the inverse dependenc

## React Components

React components are a bit harder to get to work with Hot Reloading. The problem is that we can't simply replace the old code with the new one as we'd loose the component's state. For React web applications, [Dan Abramov](https://twitter.com/dan_abramov) implemented a babel [transform](https://gaearon.github.io/react-hot-loader/) that uses Webpack's HMR API to solve this issue. In a nutshell, his solution works by creating a proxy for every single React component on _transform time_. The proxies hold the component's state and delegate the lifecycle methods to the actual components, which are the ones we hot reload:
React components are a bit harder to get to work with Hot Reloading. The problem is that we can't simply replace the old code with the new one as we'd loose the component's state. For React web applications, [Dan Abramov](https://twitter.com/dan_abramov) implemented a babel [transform](https://gaearon.github.io/react-hot-loader/) that uses webpack's HMR API to solve this issue. In a nutshell, his solution works by creating a proxy for every single React component on _transform time_. The proxies hold the component's state and delegate the lifecycle methods to the actual components, which are the ones we hot reload:

![](/blog/assets/hmr-proxy.png)

Besides creating the proxy component, the transform also defines the `accept` function with a piece of code to force React to re-render the component. This way, we can hot reload rendering code without losing any of the app's state.

The default [transformer](https://github.com/facebook/react-native/blob/master/packager/transformer.js#L92-L95) that comes with React Native uses the `babel-preset-react-native`, which is [configured](https://github.com/facebook/react-native/blob/master/babel-preset/configs/hmr.js#L24-L31) to use `react-transform` the same way you'd use it on a React web project that uses Webpack.
The default [transformer](https://github.com/facebook/react-native/blob/master/packager/transformer.js#L92-L95) that comes with React Native uses the `babel-preset-react-native`, which is [configured](https://github.com/facebook/react-native/blob/master/babel-preset/configs/hmr.js#L24-L31) to use `react-transform` the same way you'd use it on a React web project that uses webpack.

## Redux Stores

To enable Hot Reloading on [Redux](https://redux.js.org/) stores you will just need to use the HMR API similarly to what you'd do on a web project that uses Webpack:
To enable Hot Reloading on [Redux](https://redux.js.org/) stores you will just need to use the HMR API similarly to what you'd do on a web project that uses webpack:

```
// configureStore.js
Expand Down
2 changes: 1 addition & 1 deletion website/blog/2017-06-21-react-native-monthly-1.md
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ As teams' plans might be of interest to a broader audience, we'll be sharing the

- Looking into improving the release process by using [Detox](https://github.com/wix/detox) for E2E testing. Pull request should land soon.
- Blob pull request they have been working on has been merged, subsequent pull requests coming up.
- Increasing [Haul](https://github.com/callstack-io/haul) adoption across internal projects to see how it performs compared to [Metro Bundler](https://github.com/facebook/metro-bundler). Working on better multi-threaded performance with the Webpack team.
- Increasing [Haul](https://github.com/callstack-io/haul) adoption across internal projects to see how it performs compared to [Metro Bundler](https://github.com/facebook/metro-bundler). Working on better multi-threaded performance with the webpack team.
- Internally, they have implemented a better infrastructure to manage open source projects. Plans to be getting more stuff out in upcoming weeks.
- The React Native Europe conference is coming along, nothing interesting yet, but y'all invited!
- Stepped back from [react-navigation](https://github.com/react-community/react-navigation) for a while to investigate alternatives (especially native navigations).
Expand Down
2 changes: 1 addition & 1 deletion website/blog/2017-11-06-react-native-monthly-5.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ The React Native monthly meeting continues! Let's see what our teams are up to.

- We’ve been working on React Native CI. Most importantly, we have migrated from Travis to Circle, leaving React Native with a single, unified CI pipeline.
- We’ve organised [Hacktoberfest - React Native edition](https://blog.callstack.io/announcing-hacktoberfest-7313ea5ccf4f) where, together with attendees, we tried to submit many pull requests to open source projects.
- We keep working on [Haul](https://github.com/callstack/haul). Last month, we have submitted two new releases, including Webpack 3 support. We plan to add [CRNA](https://github.com/react-community/create-react-native-app) and [Expo](https://github.com/expo/expo) support as well as work on better HMR. Our roadmap is public on the issue tracker. If you would like to suggest improvements or give feedback, let us know!
- We keep working on [Haul](https://github.com/callstack/haul). Last month, we have submitted two new releases, including webpack 3 support. We plan to add [CRNA](https://github.com/react-community/create-react-native-app) and [Expo](https://github.com/expo/expo) support as well as work on better HMR. Our roadmap is public on the issue tracker. If you would like to suggest improvements or give feedback, let us know!

### Expo

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -125,7 +125,7 @@ You can also use the `.native.js` extension when a module needs to be shared bet
For example, say you have the following files in your project:

```shell
Container.js # picked up by Webpack, Rollup or any other Web bundler
Container.js # picked up by webpack, Rollup or any other Web bundler
Container.native.js # picked up by the React Native bundler for both Android and iOS (Metro)
```

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -125,7 +125,7 @@ You can also use the `.native.js` extension when a module needs to be shared bet
For example, say you have the following files in your project:

```shell
Container.js # picked up by Webpack, Rollup or any other Web bundler
Container.js # picked up by webpack, Rollup or any other Web bundler
Container.native.js # picked up by the React Native bundler for both Android and iOS (Metro)
```

Expand Down
2 changes: 1 addition & 1 deletion website/versioned_docs/version-0.72/navigation.md
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ Next, install the required peer dependencies. You need to run different commands
npm install react-native-screens react-native-safe-area-context
```

For iOS with bare React Native project, make sure you have [Cocoapods](https://cocoapods.org/) installed. Then install the pods to complete the installation:
For iOS with bare React Native project, make sure you have [CocoaPods](https://cocoapods.org/) installed. Then install the pods to complete the installation:

```shell
cd ios
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -125,7 +125,7 @@ You can also use the `.native.js` extension when a module needs to be shared bet
For example, say you have the following files in your project:

```shell
Container.js # picked up by Webpack, Rollup or any other Web bundler
Container.js # picked up by webpack, Rollup or any other Web bundler
Container.native.js # picked up by the React Native bundler for both Android and iOS (Metro)
```

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ While the last step is the same for all the platforms, the first two steps are d

### <a name="dependencies-ios" />iOS

The Apple platform installs Fabric Native Components using [Cocoapods](https://cocoapods.org) as a dependency manager.
The Apple platform installs Fabric Native Components using [CocoaPods](https://cocoapods.org) as a dependency manager.

If you are already using the [`install_module_dependencies`](https://github.com/facebook/react-native/blob/main/packages/react-native/scripts/react_native_pods.rb#L198) function, then **there is nothing to do**. The function already takes care of installing the proper dependencies when the New Architecture is enabled and avoiding them when it is not enabled.

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ While the last step is the same for all the platforms, the first two steps are d

### <a name="dependencies-ios" />iOS

The Apple platform installs Turbo Native Modules using [Cocoapods](https://cocoapods.org) as a dependency manager.
The Apple platform installs Turbo Native Modules using [CocoaPods](https://cocoapods.org) as a dependency manager.

If you are already using the [`install_module_dependencies`](https://github.com/facebook/react-native/blob/main/packages/react-native/scripts/react_native_pods.rb#L198) function, then **there is nothing to do**. The function already takes care of installing the proper dependencies when the New Architecture is enabled and avoids them when it is not enabled.

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -969,7 +969,7 @@ cd ios
RCT_NEW_ARCH_ENABLED=1 bundle exec pod install
```

This command installs the iOS dependencies for the project. The `RCT_NEW_ARCH_ENABLED=1` flag instructs **Cocoapods** that it has to execute some additional operations to run **Codegen**.
This command installs the iOS dependencies for the project. The `RCT_NEW_ARCH_ENABLED=1` flag instructs **CocoaPods** that it has to execute some additional operations to run **Codegen**.

:::note
You may have to run `bundle install` once before you can use `RCT_NEW_ARCH_ENABLED=1 bundle exec pod install`. You won't need to run `bundle install` anymore, unless you need to change the ruby dependencies.
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -788,7 +788,7 @@ cd ios
RCT_NEW_ARCH_ENABLED=1 bundle exec pod install
```
This command will look for all the dependencies of the project and it will install the iOS ones. The `RCT_NEW_ARCH_ENABLED=1` instruct **Cocoapods** that it has to run some additional operations to run **Codegen**.
This command will look for all the dependencies of the project and it will install the iOS ones. The `RCT_NEW_ARCH_ENABLED=1` instruct **CocoaPods** that it has to run some additional operations to run **Codegen**.
:::note
You may have to run `bundle install` once before you can use `RCT_NEW_ARCH_ENABLED=1 bundle exec pod install`. You won't need to run `bundle install` anymore, unless you need to change the Ruby dependencies.
Expand Down
8 changes: 4 additions & 4 deletions yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -4206,10 +4206,10 @@ caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001335, caniuse-lite@^1.0.30001400:
resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001431.tgz#e7c59bd1bc518fae03a4656be442ce6c4887a795"
integrity sha512-zBUoFU0ZcxpvSt9IU66dXVT/3ctO1cy4y9cscs1szkPlcWb6pasYM144GqrUygUbT+k7cmUCW61cvskjcv0enQ==

case-police@^0.5.6:
version "0.5.6"
resolved "https://registry.yarnpkg.com/case-police/-/case-police-0.5.6.tgz#17f6020222347864d3eae3d5c365c21c3de7191e"
integrity sha512-v86wtpyGSi75rsOiyJ+WFLksc/yN4c1uKvJKmkqlE+nKl7lIeaiCi1Z1RAR9PCjqbIq287tXlIDIiiTiJGvBlQ==
case-police@^0.5.14:
version "0.5.14"
resolved "https://registry.yarnpkg.com/case-police/-/case-police-0.5.14.tgz#ad741e41e74b99edbb768da346568a95ad1782fd"
integrity sha512-+m4+xJJlqkA6nVYATw+Y2/STB58H5EI9eTUYdMB+okP34wuHe6xrZYVosiZanS5qrYQwVW2/9znT5VRFis5D8w==

ccount@^1.0.0:
version "1.1.0"
Expand Down

0 comments on commit bfcc722

Please sign in to comment.