docs: V5 breaking change README guidance (#10649)

README.md

@@ -23,6 +23,9 @@
 [![Feature Requests](https://img.shields.io/github/issues/aws-amplify/amplify-js/feature-request?color=ff9001&label=feature%20requests)](https://github.com/aws-amplify/amplify-js/issues?q=is%3Aissue+label%3Afeature-request+is%3Aopen)
 [![Closed Issues](https://img.shields.io/github/issues-closed/aws-amplify/amplify-js?color=%2325CC00&label=issues%20closed)](https://github.com/aws-amplify/amplify-js/issues?q=is%3Aissue+is%3Aclosed+)
 
+> **Note**
+> aws-amplify 5 has be released. If you are looking for upgrade guidance [click here](#notice)
+
 ### AWS Amplify is a JavaScript library for frontend and mobile developers building cloud-enabled applications
 
 AWS Amplify provides a declarative and easy-to-use interface across different categories of cloud operations. AWS Amplify goes well with any JavaScript based frontend workflow and React Native for mobile developers.
@@ -56,35 +59,95 @@ Our default implementation works with Amazon Web Services (AWS), but AWS Amplify
 
 ## Getting Started
 
-AWS Amplify is available as `aws-amplify` package on [npm](https://www.npmjs.com/package/aws-amplify).
+AWS Amplify is available as `aws-amplify` on [npm](https://www.npmjs.com/package/aws-amplify).
 
-**Web**
+To get started pick your platform from our [**Getting Started** home page](https://docs.amplify.aws/start/?sc_icampaign=start&sc_ichannel=docs-home)
 
-If you are developing a JavaScript app, please visit our documentation site on [JavaScript](https://docs.amplify.aws/start/q/integration/js).
+## Notice:
 
-**React**
+### Amplify 5.x.x has breaking changes. Please see the breaking changes below:
 
-If you are developing a [React](https://github.com/facebook/react/) app, please visit our documentation site on [React](https://docs.amplify.aws/start/q/integration/react).
+- If you are using **default exports** from any Amplify package, then you will need to migrate to using named exports. For example:
 
-**Angular**
+  ```diff
+  - import Amplify from 'aws-amplify';
+  + import { Amplify } from 'aws-amplify'
 
-If you are developing an [Angular](https://github.com/angular/angular) app, please visit our documentation site on [Angular](https://docs.amplify.aws/start/q/integration/angular).
+  - import Analytics from '@aws-amplify/analytics';
+  + import { Analytics } from '@aws-amplify/analytics';
+  // or better
+  + import { Analytics } from 'aws-amplify';
 
-**Vue**
+  - import Storage from '@aws-amplify/storage';
+  + import { Storage } from '@aws-amplify/storage';
+  // or better
+  + import { Storage } from 'aws-amplify';
+  ```
 
-If you are developing a [Vue](https://github.com/vuejs/vue) app, please visit our documentation site on [Vue](https://docs.amplify.aws/start/q/integration/vue).
+- Datastore predicate syntax has changed, impacting the `DataStore.query`, `DataStore.save`, `DataStore.delete`, and `DataStore.observe` interfaces. For example:
 
-**React Native**
+  ```diff
+  - await DataStore.delete(Post, (post) => post.status('eq', PostStatus.INACTIVE));
+  + await DataStore.delete(Post, (post) => post.status.eq(PostStatus.INACTIVE));
 
-For React Native development, install `aws-amplify`:
+  - await DataStore.query(Post, p => p.and( p => [p.title('eq', 'Amplify Getting Started Guide'), p.score('gt', 8)]));
+  + await DataStore.query(Post, p => p.and( p => [p.title.eq('Amplify Getting Started Guide'), p.score.gt(8)]));
+  ```
 
-```bash
-$ npm install aws-amplify --save
-```
+  - To use the new syntax with 5.x.x you may need to rebuild your Datastore models with the latest version of Amplify codegen. To do this:
+    - [Upgrade the Amplify CLI](https://docs.amplify.aws/cli/start/workflows/#upgrade-amplify-cli)
+      - `npm install -g @aws-amplify/cli`
+    - [Re-generate your models with Amplify codegen](https://docs.amplify.aws/lib/datastore/getting-started/q/platform/js/#code-generation-amplify-cli)
+      - `amplify codegen models`
 
-Visit our [Installation Guide for React Native](https://docs.amplify.aws/start/q/integration/react-native) to start building your web app.
+- `Storage.list` has changed the name of the `maxKeys` parameter to `pageSize` and has a new return type that contains the results list. For example:
 
-## Notice:
+  ```diff
+  - const photos = await Storage.list('photos/', { maxKeys: 100 });
+  - const { key } = photos[0];
+
+  + const photos = await Storage.list('photos/', { pageSize: 100 });
+  + const { key } = photos.results[0];
+  ```
+
+- `Storage.put` with resumable turned on has changed the key to no longer include the bucket name. For example:
+
+  ```diff
+  - let uploadedObjectKey;
+  - Storage.put(file.name, file, {
+  -   resumable: true,
+  -   // Necessary to parse the bucket name out to work with the key
+  -   completeCallback: (obj) => uploadedObjectKey = obj.key.substring( obj.key.indexOf("/") + 1 )
+  - }
+
+  + let uploadedObjectKey;
+  + Storage.put(file.name, file, {
+  +   resumable: true,
+  +   completeCallback: (obj) => uploadedObjectKey = obj.key
+  + }
+  ```
+
+- `Analytics.record` no longer supports passing a string only as input. For example:
+
+  ```diff
+  - Analytics.record('my example event');
+  + Analytics.record( { name: 'my example event' });
+  ```
+
+- The `JS` export has been removed from `@aws-amplify/core` in favor the exporting the functions it contained.
+- Any calls to `Amplify.Auth`, `Amplify.Cache`, and `Amplify.ServiceWorker` are no longer supported, instead use the named exports. For example:
+
+  ```diff
+  - import { Amplify } from 'aws-amplify';
+  - Amplify.configure(...);
+  - // ...
+  - Amplify.Auth.signIn(...);
+
+  + import { Amplify, Auth } from 'aws-amplify';
+  + Amplify.configure(...);
+  + // ...
+  + Auth.signIn(...);
+  ```
 
 ### Amplify 4.x.x has breaking changes for React Native. Please see the breaking changes below: