-
Notifications
You must be signed in to change notification settings - Fork 278
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[nextjs] Update Cloudsdk to v0.4 (#1933)
- Loading branch information
1 parent
e0b7ad9
commit 16daf81
Showing
17 changed files
with
240 additions
and
523 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,129 @@ | ||
| # Nextjs - XMCloud | ||
|
|
||
| * Update the `@sitecore/components` dependency to `~2.0.0` | ||
| * Update the `@sitecore-cloudsdk/events` dependency to `^0.4.0` | ||
| * Add the dependency on `@sitecore-cloudsdk/core` with version `^0.4.0`. You should now have the below dependencies present: | ||
| ``` | ||
| "@sitecore/components": "~2.0.0", | ||
| "@sitecore-cloudsdk/core": "^0.4.0", | ||
| "@sitecore-cloudsdk/events": "^0.4.0", | ||
| ``` | ||
| * Remove the `src/lib/context` folder | ||
|
|
||
| * Update `src/Bootstrap.tsx`: | ||
| * Remove the context import: | ||
| ``` | ||
| import { context } from 'src/lib/context'; | ||
| ``` | ||
| * Add imports required for CloudSDK setup: | ||
| ``` | ||
| import { CloudSDK } from '@sitecore-cloudsdk/core/browser'; | ||
| import '@sitecore-cloudsdk/events/browser'; | ||
| import { LayoutServicePageState } from '@sitecore-jss/sitecore-jss-nextjs'; | ||
| ``` | ||
| * Remove the context.init() call: | ||
| ``` | ||
| context.init({ | ||
| siteName: props.site?.name || config.sitecoreSiteName, | ||
| pageState: props.layoutData?.sitecore?.context?.pageState, | ||
| }); | ||
| ``` | ||
| * Replace it with CloudSDK initialization, making sure it is performed within `useEffect()` and only in normal, non-dev mode: | ||
| ``` | ||
| useEffect(() => { | ||
| const pageState = props.layoutData?.sitecore?.context.pageState; | ||
| if (process.env.NODE_ENV === 'development') | ||
| console.debug('Browser Events SDK is not initialized in development environment'); | ||
| else if (pageState !== LayoutServicePageState.Normal) | ||
| console.debug('Browser Events SDK is not initialized in edit and preview modes'); | ||
| else { | ||
| CloudSDK({ | ||
| sitecoreEdgeUrl: config.sitecoreEdgeUrl, | ||
| sitecoreEdgeContextId: config.sitecoreEdgeContextId, | ||
| siteName: props.site?.name || config.sitecoreSiteName, | ||
| enableBrowserCookie: true, | ||
| // Replace with the top level cookie domain of the website that is being integrated e.g ".example.com" and not "www.example.com" | ||
| cookieDomain: window.location.hostname.replace(/^www\./, ''), | ||
| }) | ||
| .addEvents() | ||
| .initialize(); | ||
| } | ||
| }, [props.site?.name]); | ||
| ``` | ||
| * Update `src/components/CDPPageView.tsx`: | ||
| * Remove the context import: | ||
| ``` | ||
| import { context } from 'lib/context'; | ||
| ``` | ||
| * Add import for CloudSDK: | ||
| ``` | ||
| import { pageView } from '@sitecore-cloudsdk/events/browser'; | ||
| ``` | ||
| * Replace the context promise code | ||
| ``` | ||
| context | ||
| .getSDK('Events') | ||
| .then((Events) => | ||
| Events.pageView({ | ||
| channel: 'WEB', | ||
| currency: 'USD', | ||
| page: route.name, | ||
| pageVariantId, | ||
| language, | ||
| }) | ||
| ) | ||
| .catch((e) => console.debug(e)); | ||
| ``` | ||
| with a simplified `pageView` direct call: | ||
| ``` | ||
| pageView({ | ||
| channel: 'WEB', | ||
| currency: 'USD', | ||
| page: route.name, | ||
| pageVariantId, | ||
| language, | ||
| }).catch((e) => console.debug(e)); | ||
| ``` | ||
| * Update `src/byoc/index.ts` to make sure Forms are functioning post-upgrade: | ||
| * Rename the file to `index.tsx` | ||
| * Remove the context import: | ||
| ``` | ||
| import { context } from 'lib/context'; | ||
| ``` | ||
| * Add imports for config and CloudSDK: | ||
| ``` | ||
| import React from 'react'; | ||
| import * as Events from '@sitecore-cloudsdk/events/browser'; | ||
| import config from 'temp/config'; | ||
| import { | ||
| LayoutServicePageState, | ||
| SitecoreContextReactContext, | ||
| } from '@sitecore-jss/sitecore-jss-nextjs'; | ||
| ``` | ||
| * Remove the existing `FEAAS.setContextProperties()` call | ||
| * Add the component defintion that will hold the updated logic: | ||
| ``` | ||
| const BYOCInit = (): JSX.Element | null => { | ||
| const sitecoreContext = React.useContext(SitecoreContextReactContext).context; | ||
| // Set context properties to be available within BYOC components | ||
| FEAAS.setContextProperties({ | ||
| sitecoreEdgeUrl: config.sitecoreEdgeUrl, | ||
| sitecoreEdgeContextId: config.sitecoreEdgeContextId, | ||
| pageState: sitecoreContext?.pageState || LayoutServicePageState.Normal, | ||
| siteName: sitecoreContext?.site?.name || config.sitecoreSiteName, | ||
| eventsSDK: Events, | ||
| }); | ||
| return <FEAAS.ExternalComponentBundle />; | ||
| }; | ||
| ``` | ||
| * Replace the default import at the end of the file with | ||
| ``` | ||
| export default BYOCInit; | ||
| ``` | ||
| * If you have any other instances of using CloudSDK in your app, follow the CloudSDK 0.4.0 upgrade guide. | ||
| * Remove any other `lib/context` import, if present. If you used `context.getSDK()` method, you can now use CloudSDK method calls directly. If `context` was used to retrieve other values, consider using `temp/config` instead. |
5 changes: 3 additions & 2 deletions
5
packages/create-sitecore-jss/src/templates/nextjs-xmcloud/package.json
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,7 +1,8 @@ | ||
| { | ||
| "dependencies": { | ||
| "@sitecore/components": "^1.1.10", | ||
| "@sitecore-cloudsdk/events": "^0.3.1", | ||
| "@sitecore/components": "~2.0.0", | ||
| "@sitecore-cloudsdk/core": "^0.4.0", | ||
| "@sitecore-cloudsdk/events": "^0.4.0", | ||
| "@sitecore-feaas/clientside": "^0.5.17" | ||
| } | ||
| } |
35 changes: 25 additions & 10 deletions
35
packages/create-sitecore-jss/src/templates/nextjs-xmcloud/src/Bootstrap.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
33 changes: 25 additions & 8 deletions
33
...emplates/nextjs-xmcloud/src/byoc/index.ts → ...mplates/nextjs-xmcloud/src/byoc/index.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,26 +1,43 @@ | ||
| import React from 'react'; | ||
| import * as FEAAS from '@sitecore-feaas/clientside/react'; | ||
| import * as Events from '@sitecore-cloudsdk/events/browser'; | ||
| import '@sitecore/components/context'; | ||
| import dynamic from 'next/dynamic'; | ||
| import { context } from 'lib/context'; | ||
| import config from 'temp/config'; | ||
| import { | ||
| LayoutServicePageState, | ||
| SitecoreContextReactContext, | ||
| } from '@sitecore-jss/sitecore-jss-nextjs'; | ||
| /** | ||
| * This is an out-of-box bundler for External components (BYOC) (see Sitecore documentation for more details) | ||
| * It enables registering components in client-only or SSR/hybrid contexts | ||
| * It's recommended to not modify this file - please add BYOC imports in corresponding index.*.ts files instead | ||
| */ | ||
|
|
||
| // Set context properties to be available within BYOC components | ||
| FEAAS.setContextProperties(context); | ||
|
|
||
| // Import your client-only components via client-bundle. Nextjs's dynamic() call will ensure they are only rendered client-side | ||
| const ClientBundle = dynamic(() => import('./index.client'), { | ||
| ssr: false, | ||
| }); | ||
|
|
||
| // Import your hybrid (server rendering with client hydration) components via index.hybrid.ts | ||
| import './index.hybrid'; | ||
|
|
||
| // As long as component bundle is exported and rendered on page (as an empty element), client-only BYOC components are registered and become available | ||
| // The rest of components will be regsitered in both server and client-side contexts when this module is imported into Layout | ||
| FEAAS.enableNextClientsideComponents(dynamic, ClientBundle); | ||
|
|
||
| export default FEAAS.ExternalComponentBundle; | ||
| // Import your hybrid (server rendering with client hydration) components via index.hybrid.ts | ||
| import './index.hybrid'; | ||
|
|
||
| const BYOCInit = (): JSX.Element | null => { | ||
| const sitecoreContext = React.useContext(SitecoreContextReactContext).context; | ||
| // Set context properties to be available within BYOC components | ||
| FEAAS.setContextProperties({ | ||
| sitecoreEdgeUrl: config.sitecoreEdgeUrl, | ||
| sitecoreEdgeContextId: config.sitecoreEdgeContextId, | ||
| pageState: sitecoreContext?.pageState || LayoutServicePageState.Normal, | ||
| siteName: sitecoreContext?.site?.name || config.sitecoreSiteName, | ||
| eventsSDK: Events, | ||
| }); | ||
|
|
||
| return <FEAAS.ExternalComponentBundle />; | ||
| }; | ||
|
|
||
| export default BYOCInit; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
22 changes: 0 additions & 22 deletions
22
packages/create-sitecore-jss/src/templates/nextjs-xmcloud/src/lib/context/index.ts
This file was deleted.
Oops, something went wrong.
26 changes: 0 additions & 26 deletions
26
packages/create-sitecore-jss/src/templates/nextjs-xmcloud/src/lib/context/sdk/events.ts
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.