document ImportedController

Author: theKashey

README.md

@@ -144,7 +144,7 @@ const ClientSideOnly = () => (
 const ServerSideFriendly = () => (
   <LazyBoundary>
     {' '}
-    // LazyBoundary is Suspense on the client, and "nothing" on the server
+    // LazyBoundary is Suspense* on the client, and "nothing" on the server
     <Component />
   </LazyBoundary>
 );
@@ -254,7 +254,7 @@ If you have `imported` definition in one file, and use it from another - just `i
 
   - `importFunction` - function which resolves with Component to be imported.
   - `options` - optional settings
-  - `options.async` - activates react suspense support. Will throw a Promise in a Loading State - use it with Suspense in a same way you use **React.lazy**.
+  - `options.async` - activates react suspense support. Will throw a Promise in a Loading State - use it with Suspense in a same way you use **React.lazy**. See [working with Suspense](working-with-suspense)
   - `options.LoadingComponent` - component to be shown in Loading state
   - `options.ErrorComponent` - component to be shown in Error state. Will re-throw error if ErrorComponent is not set. Use ErrorBoundary to catch it.
   - `options.onError` - function to consume the error, if one will thrown. Will rethrow a real error if not set.
@@ -291,6 +291,10 @@ Hints:
 - use `options.import=false` to perform conditional import - `importFunction` would not be used if this option set to `false.
 - use `options.track=true` to perform SSR only import - to usage would be tracked if this option set to `false.
 
+##### ImportedController
+
+- `<ImportedControoler>` - a controller for Suspense Hydration. **Compulsory** for async/lazy usecases
+
 ##### Misc
 
 There is also API method, unique for imported-component, which could be useful on the client side
@@ -442,12 +446,17 @@ Before rendering your application you have to ensure - all parts are loaded.
 `rehydrateMarks` will load everything you need, and provide a promise to await.
 
 ```js
-import { rehydrateMarks } from 'react-imported-component';
+import { rehydrateMarks, ImportedController } from 'react-imported-component';
 
 // this will trigger all marked imports, and await for competition.
 rehydrateMarks().then(() => {
-  // better
-  ReactDOM.hydrate(<App />, document.getElementById('main'));
+  // better (note ImportedController usage)
+  ReactDOM.hydrate(
+    <ImportedController>
+      <App />
+    </ImportedController>,
+    document.getElementById('main')
+  );
   // or
   ReactDOM.render(<App />, document.getElementById('main'));
 });

yarn.lock

@@ -15976,7 +15976,7 @@ ts-pnp@^1.1.6:
   resolved "https://registry.yarnpkg.com/ts-pnp/-/ts-pnp-1.2.0.tgz#a500ad084b0798f1c3071af391e65912c86bca92"
   integrity sha512-csd+vJOb/gkzvcCHgTGSChYpy5f1/XKNsmvBGO4JXS+z1v2HobugDz4s1IeFXM3wZB44uczs+eazB5Q/ccdhQw==
 
-tslib@^1.10.0, tslib@^1.6.0, tslib@^1.8.0, tslib@^1.8.1, tslib@^1.9.3:
+tslib@^1.6.0, tslib@^1.8.0, tslib@^1.8.1, tslib@^1.9.3:
   version "1.10.0"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.10.0.tgz#c3c19f95973fb0a62973fb09d90d961ee43e5c8a"
   integrity sha512-qOebF53frne81cf0S9B41ByenJ3/IuH8yJKngAX35CmiZySA0khhkovshKK+jGCaMnVomla7gVlIcc3EvKPbTQ==
@@ -15986,6 +15986,11 @@ tslib@^1.9.0:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.9.3.tgz#d7e4dd79245d85428c4d7e4822a79917954ca286"
   integrity sha512-4krF8scpejhaOgqzBEcGM7yDIEfi0/8+8zDRZhNZZ2kjmHJ4hv3zCbQWxoJGz1iw5U0Jl0nma13xzHXcncMavQ==
 
+tslib@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.1.0.tgz#da60860f1c2ecaa5703ab7d39bc05b6bf988b97a"
+  integrity sha512-hcVC3wYEziELGGmEEXue7D75zbwIIVUMWAVbHItGPx0ziyXxrOMQx4rQEVEV45Ut/1IotuEvwqPopzIOkDMf0A==
+
 tslint-config-prettier@^1.18.0:
   version "1.18.0"
   resolved "https://registry.yarnpkg.com/tslint-config-prettier/-/tslint-config-prettier-1.18.0.tgz#75f140bde947d35d8f0d238e0ebf809d64592c37"