Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

update Docusaurus and other dependencies #3218

Merged
merged 6 commits into from
Aug 5, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions .alexrc.js
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,9 @@ exports.allow = [

// host refers to host objects in native code
'host-hostess',

// allowing this term to prevent reporting "primitive", which is a programming term
'savage',
];

// Use a "maybe" level of profanity instead of the default "unlikely".
Expand Down
2 changes: 0 additions & 2 deletions docs/debugging.md
Original file line number Diff line number Diff line change
Expand Up @@ -193,8 +193,6 @@ On Android 5.0+ devices connected via USB, you can use the [`adb` command line t

`adb reverse tcp:8081 tcp:8081`

<!-- alex ignore host-hostess -->

Alternatively, select "Dev Settings" from the Developer Menu, then update the "Debug server host for device" setting to match the IP address of your computer.

> If you run into any issues, it may be possible that one of your Chrome extensions is interacting in unexpected ways with the debugger. Try disabling all of your extensions and re-enabling them one-by-one until you find the problematic extension.
Expand Down
4 changes: 0 additions & 4 deletions docs/native-components-android.md
Original file line number Diff line number Diff line change
Expand Up @@ -99,14 +99,10 @@ Properties that are to be reflected in JavaScript needs to be exposed as setter

Annotation `@ReactProp` has one obligatory argument `name` of type `String`. Name assigned to the `@ReactProp` annotation linked to the setter method is used to reference the property on JS side.

<!-- alex disable primitive -->

Except from `name`, `@ReactProp` annotation may take following optional arguments: `defaultBoolean`, `defaultInt`, `defaultFloat`. Those arguments should be of the corresponding type (accordingly `boolean`, `int`, `float` in Java and `Boolean`, `Int`, `Float` in Kotlin) and the value provided will be passed to the setter method in case when the property that the setter is referencing has been removed from the component. Note that "default" values are only provided for primitive types, in case when setter is of some complex type, `null` will be provided as a default value in case when corresponding property gets removed.

Setter declaration requirements for methods annotated with `@ReactPropGroup` are different than for `@ReactProp`, please refer to the `@ReactPropGroup` annotation class docs for more information about it. **IMPORTANT!** in ReactJS updating the property value will result in setter method call. Note that one of the ways we can update component is by removing properties that have been set before. In that case setter method will be called as well to notify view manager that property has changed. In that case "default" value will be provided (for primitive types "default" value can be specified using `defaultBoolean`, `defaultFloat`, etc. arguments of `@ReactProp` annotation, for complex types setter will be called with value set to `null`).

<!-- alex enable primitive -->

<Tabs groupId="android-language" defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
<TabItem value="kotlin">

Expand Down
4 changes: 0 additions & 4 deletions docs/new-architecture-library-intro.md
Original file line number Diff line number Diff line change
Expand Up @@ -124,8 +124,6 @@ export default codegenNativeComponent<NativeProps>(

When using Flow or TypeScript, you will be using [type annotations](https://flow.org/en/docs/types/) to define your spec. Keeping in mind that the goal of defining a JavaScript spec is to ensure the generated native interface code is type safe, the set of supported types will be those that can be mapped one-to-one to a corresponding type on the native platform.

<!-- alex ignore savage -->

In general, this means you can use primitive types (strings, numbers, booleans), as well as function types, object types, and array types. Union types, on the other hand, are not supported. All types must be read-only. For Flow: either `+` or `$ReadOnly<>` or `{||}` objects. For TypeScript: `readonly` for properties, `Readonly<>` for objects, and `ReadonlyArray<>` for arrays.

> See Appendix [I. Flow Type to Native Type Mapping](./new-architecture-appendix#i-flow-type-to-native-type-mapping). (TypeScript to Native Type Mapping will be added soon.)
Expand Down Expand Up @@ -198,8 +196,6 @@ While we know that all deprecations are a hassle, this guide is intended to help

### Migrating `findNodeHandle` / getting a `HostComponent`

<!-- alex ignore host -->

Much of the migration work requires a HostComponent ref to access certain APIs that are only attached to host components (like View, Text, or ScrollView). HostComponents are the return value of calls to `requireNativeComponent`. `findNodeHandle` tunnels through multiple levels of component hierarchy to find the nearest native component.

As a concrete example, this code uses `findNodeHandle` to tunnel from `ParentComponent` through to the `View` rendered by `ChildComponent`.
Expand Down
6 changes: 0 additions & 6 deletions docs/running-on-device.md
Original file line number Diff line number Diff line change
Expand Up @@ -87,8 +87,6 @@ You can also connect to the development server over Wi-Fi. You'll first need to

You can find the IP address in **System Preferences** → **Network**.

<!-- alex ignore host -->

1. Make sure your laptop and your phone are on the **same** Wi-Fi network.
2. Open your React Native app on your device.
3. You'll see a [red screen with an error](debugging.md#in-app-errors-and-warnings). This is OK. The following steps will fix that.
Expand Down Expand Up @@ -167,8 +165,6 @@ You can also connect to the development server over Wi-Fi. You'll first need to

Open the command prompt and type `ipconfig` to find your machine's IP address ([more info](http://windows.microsoft.com/en-us/windows/using-command-line-tools-networking-information)).

<!-- alex ignore host -->

1. Make sure your laptop and your phone are on the **same** Wi-Fi network.
2. Open your React Native app on your device.
3. You'll see a [red screen with an error](debugging.md#in-app-errors-and-warnings). This is OK. The following steps will fix that.
Expand Down Expand Up @@ -294,8 +290,6 @@ You can also connect to the development server over Wi-Fi. You'll first need to

Open a terminal and type `/sbin/ifconfig` to find your machine's IP address.

<!-- alex ignore host -->

1. Make sure your laptop and your phone are on the **same** Wi-Fi network.
2. Open your React Native app on your device.
3. You'll see a [red screen with an error](debugging.md#in-app-errors-and-warnings). This is OK. The following steps will fix that.
Expand Down
4 changes: 0 additions & 4 deletions docs/textinput.md
Original file line number Diff line number Diff line change
Expand Up @@ -844,16 +844,12 @@ see [Issue#7070](/~https://github.com/facebook/react-native/issues/7070) for more

### `textBreakStrategy` <div class="label android">Android</div>

<!-- alex disable simple -->

Set text break strategy on Android API Level 23+, possible values are `simple`, `highQuality`, `balanced` The default value is `simple`.

| Type |
| ----------------------------------------- |
| enum('simple', 'highQuality', 'balanced') |

<!-- alex enable simple -->

---

### `underlineColorAndroid` <div class="label android">Android</div>
Expand Down
10 changes: 5 additions & 5 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -17,17 +17,17 @@
},
"dependencies": {
"babel-eslint": "^10.1.0",
"case-police": "^0.5.1",
"eslint": "^8.10.0",
"case-police": "^0.5.6",
"eslint": "^8.20.0",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-mdx": "^1.16.0",
"eslint-plugin-prettier": "^4.0.0",
"eslint-plugin-prettier": "^4.2.1",
"eslint-plugin-yaml": "^0.5.0",
"husky": "^4.3.8",
"netlify-plugin-cache": "^1.0.3",
"prettier": "^2.5.1",
"prettier": "^2.7.1",
"pretty-quick": "^3.1.3",
"yarn-deduplicate": "^3.1.0"
"yarn-deduplicate": "^5.0.0"
},
"resolutions": {
"trim": "^1.0.1",
Expand Down
2 changes: 1 addition & 1 deletion website/architecture/architecture-overview.md
Original file line number Diff line number Diff line change
Expand Up @@ -21,5 +21,5 @@ Architecture Overview is intended to share conceptual overview of how React Nati
- [View Flattening](view-flattening)
- [Threading Model](threading-model)
- Build Tools
- [Bundled Hermes](bundled-hermes)
- [Bundled Hermes](bundled-hermes)
- [Glossary](glossary)
2 changes: 1 addition & 1 deletion website/blog/2018-04-09-build-com-app.md
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ Our app is full featured and includes everything that you’d expect from an e-c
A few standout features you might not expect include:

1. 3D models available for around 40 products with 90 finishes
2. Augmented Reality (AR) to allow the user to see how lights and faucets will look in their home at 98% size accuracy. The Build.com React Native App is featured in the Apple App store for AR Shopping! AR is now available for Android and iOS!
2. Augmented Reality (AR) to allow the user to see how lights and faucets will look in their home at 98% size accuracy. The Build.com React Native App is featured in the Apple App Store for AR Shopping! AR is now available for Android and iOS!
3. Collaborative project management features that allow people to put together shopping lists for the different phases of their project and collaborate around selection

We’re working on many new and exciting features that will continue to improve our app experience including the next phase of Immersive Shopping with AR.
Expand Down
4 changes: 2 additions & 2 deletions website/blog/2021-08-26-many-platform-vision.md
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ We believe that React Native enables developers to meet users’ expectations wh

### Embracing Platform Constraints

<!-- alex ignore easily -->
<!-- alex ignore easy -->

Specific device hardware or user expectations impose unique constraints and requirements. As an example, memory is typically more constrained on Android and VR headsets than on iOS, macOS, and Windows. As another example, users expect mobile apps to start up almost instantaneously, but they are less frustrated when desktop apps take longer to start up. **We have found that by approaching these problems with React Native, we can more easily borrow lessons learned and code written for one platform, and apply them to other platforms.**

Expand All @@ -47,7 +47,7 @@ As another example, our research into user perception of speed on the web led to

In addition to domain-specific engineers and meetups and conferences, each platform also brings other unique players solving similar problems. On the web, React (which directly powers React Native) frequently draws inspiration from other open source web frameworks like [Vue](https://vuejs.org/), [Preact](https://preactjs.com/), and [Svelte](https://svelte.dev/). On mobile, React Native has been inspired by other open source mobile frameworks, and we have been learning from other mobile frameworks built inside Facebook.

<!-- alex ignore challenged -->
Copy link
Contributor

Choose a reason for hiding this comment

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

Where does alex define these mappings i.e (special -> "challenged")?

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

Not sure TBH 😅 I have used the error messages to correct that.

They include the correct keyword at the end of the error messages.

<!-- alex ignore special -->

**We believe that competition leads to better outcomes for everyone in the long run.** By studying what makes other players on each platform great, we can learn lessons that may apply to other platforms. For example, the race to simplify complex websites influenced the development of React and gave React Native a head start to offer a declarative framework for mobile apps. The demand for faster iteration cycles and build times for the web also led to the development of Fast Refresh which significantly benefited React Native. Similarly, performance optimizations in our internal mobile frameworks — especially around data fetching and parallelization — challenged us to improve React Native in a way that has also influenced React when we built the new [Facebook.com](http://facebook.com/) website.

Expand Down
7 changes: 2 additions & 5 deletions website/blog/2021-10-26-toward-hermes-being-the-default.md
Original file line number Diff line number Diff line change
Expand Up @@ -35,8 +35,6 @@ One of our key decisions with Hermes was to not implement a [just-in-time (JIT)

### Pioneering at Vertical Integrations

<!-- alex ignore host -->

At Facebook, we prefer to colocate projects within a large [monorepo](https://en.wikipedia.org/wiki/Monorepo). By having the engine (Hermes) and the host (React Native) closely iterating together, we opened a lot of room for vertical integrations. To name a few:

- Hermes supports [on-device JavaScript debugging with the Chrome debugger](https://reactnative.dev/docs/hermes#debugging-js-on-hermes-using-google-chromes-devtools) by speaking the [Chrome DevTools Protocol](https://chromedevtools.github.io/devtools-protocol/). It’s better than the legacy “[Remote JS Debugging](https://reactnative.dev/docs/debugging#chrome-developer-tools)” (which uses an in-app proxy to run JS in desktop Chrome) because it supports debugging synchronous native calls and guaranteed a consistent runtime environment. Together with React DevTools, Metro, Inspector, and so on, Hermes debugger is now part of [Flipper](https://reactnative.dev/blog/2020/03/26/version-0.62) to provide a one-stop developer experience.
Expand All @@ -62,8 +60,7 @@ Last but not least, Hermes has also been powering all virtual reality experience

We acknowledge there are still blockers that prevent parts of the community from adopting Hermes and we are committed to building support for these missing features. Our goal is to be fully featured so that Hermes is the right choice for most React Native apps. Here is how the community has already shaped the Hermes roadmap:

<!-- alex ignore just -->
<!-- alex ignore fellowship -->
<!-- alex ignore just fellowship -->

- [`Proxy` and `Reflect`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Meta_programming) were originally excluded from Hermes because Facebook does not use them. We were also concerned that adding Proxy would hurt property lookup performance even when Proxy is not used. But Proxy quickly become [the most requested feature](/~https://github.com/facebook/hermes/issues/33) of Hermes due to popular libraries such as [MobX](https://mobx.js.org/README.html) and [Immer](https://immerjs.github.io/immer/). We carefully evaluated and decided to build it just for the community, and we managed to implement it with very low cost. Since this is a feature we don’t use, we relied on our community to prove its stability. We started by testing Proxy behind a flag and created opt-in npm packages for [release v0.4](/~https://github.com/facebook/hermes/issues/33#issuecomment-668374607) and [v0.5](/~https://github.com/facebook/hermes/issues/33#issuecomment-668374607), and it’s [enabled by default starting from v0.7](/~https://github.com/facebook/hermes/releases/tag/v0.7.0).
- [ECMAScript Internationalization API Specification (ECMA-402, or `Intl`)](https://hermesengine.dev/docs/intl) was [the second most requested feature](/~https://github.com/facebook/hermes/issues/23). `Intl` is a huge set of APIs and often requires the implementation to include **6MB worth** of [Unicode CLDR](https://cldr.unicode.org/index) data. This is why polyfills like [FormatJS (a.k.a. `react-intl`)](/~https://github.com/formatjs/formatjs) and JS engines like the [international variant build of community JSC](/~https://github.com/react-native-community/jsc-android-buildscripts#international-variant) are so huge. To avoid substantially increasing the binary size of Hermes, we decided to implement it with another strategy by consuming and mapping the ICU facilities provided by the libraries included in the operating systems, at the cost of some (often minor) variance in behaviors across platforms.
Expand All @@ -84,6 +81,6 @@ It’s extremely important for us to prepare the ecosystem for a smooth adoption

We’d love to thank the Hermes team, the React Native team, and the many contributors from the React Native community for their work to improve Hermes.

<!-- alex ignore White -->
<!-- alex ignore white -->

I’d also love to personally thank (in alphabetic order) Eli White, Luna Wei, Neil Dhar, Tim Yung, Tzvetan Mikov, and many others for their help during the writing.
20 changes: 10 additions & 10 deletions website/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -42,21 +42,21 @@
]
},
"dependencies": {
"@docusaurus/core": "^2.0.0-beta.21",
"@docusaurus/plugin-pwa": "^2.0.0-beta.21",
"@docusaurus/preset-classic": "^2.0.0-beta.21",
"@docusaurus/core": "^2.0.0-rc.1",
"@docusaurus/plugin-pwa": "^2.0.0-rc.1",
"@docusaurus/preset-classic": "^2.0.0-rc.1",
"docusaurus-plugin-sass": "^0.2.2",
"esbuild-loader": "^2.18.0",
"esbuild-loader": "^2.19.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-github-btn": "^1.2.2",
"sass": "^1.49.11"
"react-github-btn": "^1.3.0",
"sass": "^1.53.0"
},
"devDependencies": {
"@docusaurus/types": "^2.0.0-beta.21",
"alex": "^9.1.1",
"fs-extra": "^10.0.1",
"glob": "^7.2.0",
"@docusaurus/types": "^2.0.0-rc.1",
"alex": "^10.0.0",
"fs-extra": "^10.1.0",
"glob": "^8.0.3",
"glob-promise": "^4.2.2",
"path": "^0.12.7"
}
Expand Down
2 changes: 1 addition & 1 deletion website/versioned_docs/version-0.60/colors.md
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ This is a shortcut for `rgba(0,0,0,0)`:

You can also use color names as values. React Native follows the [CSS3 specification](http://www.w3.org/TR/css3-color/#svg-color):

<!-- alex ignore white -->
<!-- alex ignore black white -->

- ![#f0f8ff](https://placehold.it/15/f0f8ff/000000?text=+) <color aliceblue /> aliceblue (#f0f8ff)
- ![#faebd7](https://placehold.it/15/faebd7/000000?text=+) <color antiquewhite /> antiquewhite (#faebd7)
Expand Down
2 changes: 0 additions & 2 deletions website/versioned_docs/version-0.60/debugging.md
Original file line number Diff line number Diff line change
Expand Up @@ -168,8 +168,6 @@ On Android 5.0+ devices connected via USB, you can use the [`adb` command line t

`adb reverse tcp:8081 tcp:8081`

<!-- alex ignore host -->

Alternatively, select "Dev Settings" from the Developer Menu, then update the "Debug server host for device" setting to match the IP address of your computer.

> If you run into any issues, it may be possible that one of your Chrome extensions is interacting in unexpected ways with the debugger. Try disabling all of your extensions and re-enabling them one-by-one until you find the problematic extension.
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -57,14 +57,10 @@ Properties that are to be reflected in JavaScript needs to be exposed as setter

Annotation `@ReactProp` has one obligatory argument `name` of type `String`. Name assigned to the `@ReactProp` annotation linked to the setter method is used to reference the property on JS side.

<!-- alex ignore primitive -->

Except from `name`, `@ReactProp` annotation may take following optional arguments: `defaultBoolean`, `defaultInt`, `defaultFloat`. Those arguments should be of the corresponding type (accordingly `boolean`, `int`, `float`) and the value provided will be passed to the setter method in case when the property that the setter is referencing has been removed from the component. Note that "default" values are only provided for primitive types, in case when setter is of some complex type, `null` will be provided as a default value in case when corresponding property gets removed.

Setter declaration requirements for methods annotated with `@ReactPropGroup` are different than for `@ReactProp`, please refer to the `@ReactPropGroup` annotation class docs for more information about it.

<!-- alex ignore primitive -->

**IMPORTANT!** in ReactJS updating the property value will result in setter method call. Note that one of the ways we can update component is by removing properties that have been set before. In that case setter method will be called as well to notify view manager that property has changed. In that case "default" value will be provided (for primitive types "default" can value can be specified using `defaultBoolean`, `defaultFloat`, etc. arguments of `@ReactProp` annotation, for complex types setter will be called with value set to `null`).

```java
Expand Down
6 changes: 0 additions & 6 deletions website/versioned_docs/version-0.60/running-on-device.md
Original file line number Diff line number Diff line change
Expand Up @@ -83,8 +83,6 @@ You can also connect to the development server over Wi-Fi. You'll first need to

You can find the IP address in **System Preferences** → **Network**.

<!-- alex ignore host -->

1. Make sure your laptop and your phone are on the **same** Wi-Fi network.
2. Open your React Native app on your device.
3. You'll see a [red screen with an error](debugging.md#in-app-errors-and-warnings). This is OK. The following steps will fix that.
Expand Down Expand Up @@ -165,8 +163,6 @@ You can also connect to the development server over Wi-Fi. You'll first need to

Open the command prompt and type `ipconfig` to find your machine's IP address ([more info](http://windows.microsoft.com/en-us/windows/using-command-line-tools-networking-information)).

<!-- alex ignore host -->

1. Make sure your laptop and your phone are on the **same** Wi-Fi network.
2. Open your React Native app on your device.
3. You'll see a [red screen with an error](debugging.md#in-app-errors-and-warnings). This is OK. The following steps will fix that.
Expand Down Expand Up @@ -292,8 +288,6 @@ You can also connect to the development server over Wi-Fi. You'll first need to

Open a terminal and type `/sbin/ifconfig` to find your machine's IP address.

<!-- alex ignore host -->

1. Make sure your laptop and your phone are on the **same** Wi-Fi network.
2. Open your React Native app on your device.
3. You'll see a [red screen with an error](debugging.md#in-app-errors-and-warnings). This is OK. The following steps will fix that.
Expand Down
Loading