docs: prepare next docs for v3 (#66)

* docs: prepare next docs as for v3

* docs: update wording

* docs: more stylistic changes

docs/docs/api/is-cached.md

@@ -10,4 +10,4 @@ Call this function if you need to check whether the component was already loaded
 
 `isCached(componentName: string)` => `boolean`
 
-- `componentName` - name of the component/screen that was registered in `register` function
+- `componentName` - name of the component/screen that was registered in `register` function

docs/docs/api/preload.md

@@ -13,4 +13,4 @@ You can select what you'd like to load:
 
 - `preload().group(groupName: string)` => `Promise`
 
-  - `groupName` - name of your group, that was specified in `register` function
+  - `groupName` - name of your group, that was specified in `register` function

docs/docs/api/register.md

@@ -15,4 +15,4 @@ Params:
 - `group` (optional) - You need specify it, only if you need to `preload` entire group of screens
 - `static` (optional) - all static members from your presentational component.
 - `cached` (optional) - Default: `true`. Set to `false` if you don't need cache your screens. _**Warning:**_ it may decrease performance of your application.
-- `placeholder` (optional) - React component which will display during screen loading. Should specify if you don't use `preload` for this screen.
+- `placeholder` (optional) - React component which will display during screen loading. Should specify if you don't use `preload` for this screen.

docs/docs/fundamentals/basic-usage.md

@@ -65,4 +65,4 @@ class App extends PureComponent {
 ```
 
 Usually your output from log will look like `Bundle Info: { loaded: 2731, waiting: 141 }`. Such way allows to understand is your changes make sense or not. After adding new screen to this library count of loaded files should be decreasing. Of course, ideal way is when you load as minimum modules as you can. For example only one page with login. In this case your startup time will be almost the same as just created application. And splash screen will not take a lot of time.
-But it depends absolutely on you and yours architecture solutions. Feel free to play around this library and find suitable way for separating your files.
+But it depends absolutely on you and yours architecture solutions. Feel free to play around this library and find suitable way for separating your files.

docs/docs/fundamentals/enabling-ram-bundle.md

@@ -57,7 +57,7 @@ You can choose between formats, since Android support both format (indexed and f
 :::
 
 :::caution Hermes enabled
-If you are trying to enable this feature with Hermes engine, you may faced with application crash. It's a known [issue](https://github.com/facebook/react-native/issues/25730). As a temporary solution you can don't activate this bundle format for Android, since Hermes is using similar [mechanism](https://github.com/facebook/react-native/issues/25730#issuecomment-514115115). 
+If you are trying to enable this feature with Hermes engine, you may faced with application crash. It's a known [issue](https://github.com/facebook/react-native/issues/25730). As a temporary solution you can don't activate this bundle format for Android, since Hermes is using similar [mechanism](https://github.com/facebook/react-native/issues/25730#issuecomment-514115115).
 :::
 
 ### iOS

docs/docs/fundamentals/getting-started.mdx

@@ -8,11 +8,16 @@ sidebar_position: 1
 
 Splitting your bundle into small pieces allows you reduce size of main bundle, which is loaded on application startup. It means, that you can load only necessary things, such as login pages, which user inevitably will see if open an application. And only "necessary" things will be in main bundle. Thus, this means that **the time of initial launch of the application will be minimized** and **memory consumption will be decreased**, since often in applications is a lot of code (components and screens) that the user may simply not see.
 
-import BundleSplittingImageUrl from '@site/static/img/bundle-splitting.png';
-
-<p style={{textAlign: 'center'}}>
- <img src={BundleSplittingImageUrl}></img>
- <i>On green part of this picture, you can see that all components/screens are divided into different groups. It allows you to load the application much faster, because instead of loading the entire bundle (red picture), you can load only the parts that you need.</i>
+import BundleSplittingImageUrl from "@site/static/img/bundle-splitting.png";
+
+<p style={{ textAlign: "center" }}>
+  <img src={BundleSplittingImageUrl}></img>
+  <i>
+    On green part of this picture, you can see that all components/screens are
+    divided into different groups. It allows you to load the application much
+    faster, because instead of loading the entire bundle (red picture), you can
+    load only the parts that you need.
+  </i>
 </p>
 
 ## What does this package do?
@@ -24,7 +29,9 @@ This package is built on top of **RAM** bundles. In addition to the base functio
 - and has web support.
 
 ## Features
+
 This library is add-on on react-native API. But this library has some features, and here is list of them:
+
 - **Enhanced cache management**. This library provide a way for caching yours components. This mechanism allows you to improve performance of your application and help to avoid unnecessary reloading yours components, which were already loaded.
 - **Ability to preload component**. You can preload components in background, which user may see in the nearest future. It allows to make UI experience more smooth and use your components from cache without any intermittentions.
 - **Supporting all navigation libraries**. This library is compatible with all most known navigation libraries, such as [react-navigation](https://reactnavigation.org/), [react-native-navigation](https://wix.github.io/react-native-navigation/#/) and more others.
@@ -42,5 +49,5 @@ yarn add react-native-bundle-splitter
 This module does not use any native (platform) dependencies and does not need to be linked. So installation process basically is finished. But you also need to enable `RAM bundles` feature in your application. To see how to do it, please read [the guide](./enabling-ram-bundle).
 
 :::tip Minimal react-native version
-You need to use react-native 0.59 or higher, since feature with inline requires is available out-of-box only from this version.
+You need to use react-native 0.60 or higher, since feature with inline requires is available out-of-box only from this version.
 :::

docs/docs/guides/async-loading.md

@@ -128,4 +128,4 @@ So, what are you doing here? Instead of specifying `name` and calling `preload()
 
 This library does not do any magic. It simply allows you to transfer the time (which is required to load the bundle at the start of the application) to runtime execution.
 
-This way you can load additional parts of the application when doing other asynchronous operations (such as HTTP calls, reading data from storage, etc.) and reduce initial load times.
+This way you can load additional parts of the application when doing other asynchronous operations (such as HTTP calls, reading data from storage, etc.) and reduce initial load times.

docs/docs/guides/metro.md

@@ -76,4 +76,4 @@ I recommend to repeat this operation several times (restart `metro`, copying/pas
 
 :::info New cycle dependencies
 It's fine if you start receiving warnings, that cycle dependencies were detected. Since you are loading modules lazily - bundler can not compute all dependencies tree in advance and build it in optimized way, so you will have to resolve it yourself manually and break cycle dependencies.
-:::
+:::

docs/docs/guides/navigation.md

@@ -158,4 +158,4 @@ As you saw in both cases (integration with `react-navigation` and `react-native-
 
 :::tip
 As you can see in this section we used `register` function directly in the navigation declaration, unlike [Basic usage](../fundamentals/basic-usage.md), where we used `register` in the `index` file. You can choose which way is more preferable for you: use this HOC in the routes declaration or in `index` files. No need to use it twice.
-:::
+:::

docs/docs/guides/static-options.md

@@ -59,4 +59,4 @@ class HomeScreen extends React.Component {
 
   /* render function, etc */
 }
-```
+```

docs/docs/guides/upgrading-from-1.x.md

@@ -1,5 +1,5 @@
 ---
-sidebar_position: 4
+sidebar_position: 5
 ---
 
 # Upgrading from 1.x
@@ -32,4 +32,4 @@ If you used the API of the library correctly before, then there will be no chang
 
 However, after updating to newest version you will get warnings, about the fact, that you should use **`loader` instead of `require`**.
 
-If you want ot get rid off of that, you can do a quick migration. Just replace next expression `require: () => require(` to `loader: () => import(` expression. All modern IDEs allow you to do it for all project. That's all. Congratulations 🎉
+If you want ot get rid off of that, you can do a quick migration. Just replace next expression `require: () => require(` to `loader: () => import(` expression. All modern IDEs allow you to do it for all project. That's all. Congratulations 🎉

docs/docs/guides/upgrading-from-2.x.md

@@ -0,0 +1,20 @@
+---
+sidebar_position: 6
+---
+
+# Upgrading from 2.x
+
+## Breaking changes
+
+Fortunately, this release is fully backward compatible with the `2.x.x` release. The only thing is that minimal supported version of React Native was raised to `0.60.0`.
+
+## Key changes
+
+- the library now uses `Suspense` component internally, so in future it'll be easier to adopt concurrent react features.
+- internally the cache layer was migrated from `Object`s to `Map`s, which in turn should improve the performance a little bit.
+
+## Migration
+
+I believe that for all projects that are using this library, there will be no changes and you can simply bump the version of the library in `package.json` to `3.x.x`.
+
+If you use `react-native` version `0.59.x` then you should stick to `2.x.x` version of the library.

docs/docs/recipes/bundle-analysis.md

@@ -32,11 +32,13 @@ After installation edit your `package.json`:
 And then run analyzer:
 
 - In one terminal:
+
 ```bash
 react-native start
 ```
 
 - In the second terminal
+
 ```bash
 yarn run bundle:analysis
 # or with npm
@@ -76,4 +78,4 @@ Thus, by explicitly specifying common dependencies for some packages, you can av
 
 ## Summary
 
-The main goal of this article is to demonstrate a way for determining the order and prioritizing thing where you should work. Via visualization of bundle you can understand, what exactly may slow down your startup of an application and understand possible way for resolving it.
+The main goal of this article is to demonstrate a way for determining the order and prioritizing thing where you should work. Via visualization of bundle you can understand, what exactly may slow down your startup of an application and understand possible way for resolving it.

docs/docs/recipes/capturing-startup-time.md

@@ -87,4 +87,4 @@ As an example I can show you the performance table from the last project, which
 
 As you can see the difference in startup time is ~500ms for **Android** and ~700ms for **iOS**.
 
-But it doesn't mean, that for your application results will be the same. Each application and each platform is universal - it has own structure and business logic, so there is only one 100% way to know what is the boost of performance you may get - try to integrate this library to your project and see the results.
+But it doesn't mean, that for your application results will be the same. Each application and each platform is universal - it has own structure and business logic, so there is only one 100% way to know what is the boost of performance you may get - try to integrate this library to your project and see the results.