@croct/plug-react 0.2.3 → 0.4.0

package/README.md

@@ -64,7 +64,6 @@ We suggest putting the `<CroctProvider/ >` somewhere high in your app, above any
 ideally in the top-level `<App/>` component.
 
 ```tsx
-import React from 'react';
 import {render} from 'react-dom';
 import {CroctProvider} from '@croct/plug-react';
 
@@ -97,7 +96,7 @@ and a render function, which tells the component how to render the UI, depending
 This is what our component would look like:
 
 ```tsx
-import {ReactElement, Fragment} from 'react';
+import {ReactElement, Suspense} from 'react';
 import {Personalization} from '@croct/plug-react';
 
 function OnboardingPage(): ReactElement {
@@ -117,7 +116,7 @@ function OnboardingPage(): ReactElement {
 If you don't want your component to suspend while loading, you can provide an `initial` state to be rendered instead:
 
 ```tsx
-import {ReactElement, Fragment} from 'react';
+import {ReactElement} from 'react';
 import {Personalization} from '@croct/plug-react';
 
 function OnboardingPage(): ReactElement {
@@ -135,7 +134,7 @@ function OnboardingPage(): ReactElement {
 Now, let's create a `ViewDocsLink` component to see the `useEvaluation` hook in action:
 
 ```tsx
-import {ReactElement, Fragment} from 'react';
+import {ReactElement, Suspense} from 'react';
 import {useEvaluation} from '@croct/plug-react';
 
 function ViewDocsLink(): ReactElement {
@@ -164,13 +163,14 @@ user's profile.
 
 #### Fault tolerance
 
-We strongly recommend always specifying the `fallback` property to ensure your app behaves the same way regardless of
-the personalization. In this way, the UI will still be fully functional even in maintenance windows.
+We strongly recommend specifying the `fallback` property in client-side rendered applications to ensure your app behaves 
+the same way regardless of the personalization. In this way, the UI will still be fully functional even in maintenance 
+windows. **Specifying a `fallback` is required for server-side rendering (SSR).**
 
 The following example shows how you can specify a fallback behaviour for the docs link:
 
 ```tsx
-import {ReactElement} from 'react';
+import {ReactElement, Fragment, Suspense} from 'react';
 import {Personalization, useEvaluation} from '@croct/plug-react';
 
 function ViewDocsLink(): ReactElement {
@@ -233,7 +233,7 @@ To render the content of the slot, you can either use the `<Slot />` component o
 Here's how to use the `<Slot />` component:
 
 ```tsx
-import {Suspense, ReactElement} from 'react';
+import {ReactElement, Suspense} from 'react';
 import {Slot} from '@croct/plug-react';
 
 export default function OnboardingPage(): ReactElement {
@@ -253,10 +253,10 @@ export default function OnboardingPage(): ReactElement {
 }
 ```
 
-To avoid the component to suspend while loading you can provide an `initial` state to be rendered instead:
+To avoid the component from suspending while loading, you can provide an `initial` state to be rendered instead:
 
 ```tsx
-import {Suspense, ReactElement} from 'react';
+import {ReactElement} from 'react';
 import {Slot} from '@croct/plug-react';
 
 export default function OnboardingPage(): ReactElement {
@@ -281,7 +281,7 @@ export default function OnboardingPage(): ReactElement {
 And here's an example using the `useContent` hook:
 
 ```tsx
-import {ReactElement} from 'react';
+import {ReactElement, Suspense} from 'react';
 import {useContent} from '@croct/plug-react';
 
 function HomeBanner(): ReactElement {
@@ -310,7 +310,7 @@ export default function HomePage(): ReactElement {
 The following example shows how you can specify a fallback state for the `home-banner` slot:
 
 ```tsx
-import {Suspense, ReactElement} from 'react';
+import {ReactElement, Suspense} from 'react';
 import {Slot, useContent} from '@croct/plug-react';
 
 const fallbackBanner: HomeBanner = {
@@ -487,7 +487,7 @@ The component takes the followings properties:
 Here's a simple example showing how to evaluate the user's persona:
 
 ```tsx
-import {ReactElement, Fragment} from 'react';
+import {ReactElement} from 'react';
 import {Personalization} from '@croct/plug-react';
 
 function PersonaBadge(): ReactElement {
@@ -521,7 +521,7 @@ The component takes the followings properties:
 Here's a simple example showing how to render a banner in a slot:
 
 ```tsx
-import {ReactElement, Fragment} from 'react';
+import {ReactElement} from 'react';
 import {Slot} from '@croct/plug-react';
 
 function HeroBanner(): ReactElement {
@@ -597,7 +597,7 @@ These are the currently supported options:
 Here's a simple example showing how to evaluate the user's persona:
 
 ```tsx
-import {ReactElement, Fragment} from 'react';
+import {ReactElement} from 'react';
 import {useEvaluation} from '@croct/plug-react';
 
 function PersonaBadge(): ReactElement {
@@ -632,7 +632,7 @@ These are the currently supported options:
 Here's a simple example showing how to fetch the content for a banner:
 
 ```tsx
-import {ReactElement, Fragment} from 'react';
+import {ReactElement} from 'react';
 import {useContent} from '@croct/plug-react';
 
 function HeroBanner(): ReactElement {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@croct/plug-react",
-  "version": "0.2.3",
+  "version": "0.4.0",
   "description": "React components and hooks to plug your React applications into Croct.",
   "author": {
     "name": "Croct",
@@ -34,11 +34,11 @@
     "build-storybook": "build-storybook -s ./.storybook/static"
   },
   "peerDependencies": {
-    "react": "^16.8.0  || ^17.0.0",
-    "react-dom": "^16.8.0  || ^17.0.0"
+    "react": "^16.8.0  || ^17.0.0 || ^18.0.0",
+    "react-dom": "^16.8.0  || ^17.0.0 || ^18.0.0"
   },
   "dependencies": {
-    "@croct/plug": "^0.8.2"
+    "@croct/plug": "^0.10.0"
   },
   "devDependencies": {
     "@babel/core": "^7.13.13",
@@ -46,9 +46,9 @@
     "@babel/preset-react": "^7.13.13",
     "@babel/preset-typescript": "^7.13.0",
     "@storybook/addon-actions": "^6.2.3",
-    "@storybook/addon-essentials": "^6.2.3",
+    "@storybook/addon-essentials": "^6.4.13",
     "@storybook/addon-links": "^6.2.3",
-    "@storybook/react": "^6.2.3",
+    "@storybook/react": "^6.4.13",
     "@testing-library/jest-dom": "^5.12.0",
     "@testing-library/react": "^11.2.7",
     "@testing-library/react-hooks": "^7.0.0",
@@ -73,12 +73,12 @@
     "eslint-plugin-standard": "^5.0.0",
     "jest": "26.6.0",
     "jest-environment-node": "^26.6.2",
-    "microbundle": "^0.13.0",
+    "microbundle": "^0.13.3",
     "react": "^16.0.0",
     "react-dom": "^16.0.0",
     "ts-node": "^10.0.0",
     "typescript": "^4.1.5",
-    "webpack": "4.44.2"
+    "webpack": "^5.39.1"
   },
   "files": [
     "**/*.js",