create-sitecore-jss 22.2.0-canary.9 → 22.2.0

package/dist/templates/nextjs-xmcloud/package.json

@@ -1,7 +1,8 @@
-{
-  "dependencies": {
-    "@sitecore/components": "^1.1.10",
-    "@sitecore-cloudsdk/events": "^0.3.1",
-    "@sitecore-feaas/clientside": "^0.5.17"
-  }
-}
+{
+  "dependencies": {
+    "@sitecore/components": "~2.0.0",
+    "@sitecore-cloudsdk/core": "^0.4.0",
+    "@sitecore-cloudsdk/events": "^0.4.0",
+    "@sitecore-feaas/clientside": "^0.5.17"
+  }
+}

package/dist/templates/nextjs-xmcloud/src/Bootstrap.tsx

@@ -1,21 +1,36 @@
+import { useEffect } from 'react';
 import { SitecorePageProps } from 'lib/page-props';
-import { context } from 'src/lib/context';
+import { CloudSDK } from '@sitecore-cloudsdk/core/browser';
+import '@sitecore-cloudsdk/events/browser';
 import config from 'temp/config';
+import { LayoutServicePageState } from '@sitecore-jss/sitecore-jss-nextjs';
 
 /**
  * The Bootstrap component is the entry point for performing any initialization logic
  * that needs to happen early in the application's lifecycle.
  */
 const Bootstrap = (props: SitecorePageProps): JSX.Element | null => {
-  /**
-   * Initializes the application Context and associated Software Development Kits (SDKs).
-   * This function is the entry point for setting up the application's context and any SDKs that are required for its proper functioning.
-   * It prepares the resources needed to interact with various services and features within the application.
-   */
-  context.init({
-    siteName: props.site?.name || config.sitecoreSiteName,
-    pageState: props.layoutData?.sitecore?.context?.pageState,
-  });
+  // Browser ClientSDK init allows for page view events to be tracked
+  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();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [props.site?.name]);
 
   return null;
 };

package/dist/templates/nextjs-xmcloud/src/byoc/{index.ts → index.tsx}

@@ -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;

package/dist/templates/nextjs-xmcloud/src/components/CdpPageView.tsx

@@ -4,8 +4,8 @@ import {
   useSitecoreContext,
 } from '@sitecore-jss/sitecore-jss-nextjs';
 import { useEffect } from 'react';
+import { pageView } from '@sitecore-cloudsdk/events/browser';
 import config from 'temp/config';
-import { context } from 'lib/context';
 
 /**
  * This is the CDP page view component.
@@ -46,19 +46,14 @@ const CdpPageView = (): JSX.Element => {
       variantId as string,
       scope
     );
-    // there are cases where Events SDK will be absent which are expected to reject
-    context
-      .getSDK('Events')
-      .then((Events) =>
-        Events.pageView({
-          channel: 'WEB',
-          currency: 'USD',
-          page: route.name,
-          pageVariantId,
-          language,
-        })
-      )
-      .catch((e) => console.debug(e));
+    // there can be cases where Events are not initialized which are expected to reject
+    pageView({
+      channel: 'WEB',
+      currency: 'USD',
+      page: route.name,
+      pageVariantId,
+      language,
+    }).catch((e) => console.debug(e));
   }, [pageState, route, variantId, site]);
 
   return <></>;

package/dist/templates/nextjs-xmcloud/src/lib/middleware/plugins/personalize.ts

@@ -21,7 +21,6 @@ class PersonalizePlugin implements MiddlewarePlugin {
   order = 1;
 
   constructor() {
-
     this.personalizeMiddleware = new PersonalizeMiddleware({
       // Configuration for your Sitecore Experience Edge endpoint
       edgeConfig: {

package/dist/templates/nextjs-xmcloud/src/lib/page-props-factory/plugins/component-themes.ts

@@ -4,7 +4,8 @@ import { Plugin } from '..';
 import config from 'temp/config';
 
 class ComponentThemesPlugin implements Plugin {
-  order = 2;
+  // Make sure to run this plugin after the personalization plugin, since it relies on the layout data
+  order = 10;
 
   async exec(props: SitecorePageProps) {
     // Collect FEAAS, BYOC, SXA component themes

package/dist/templates/nextjs-xmcloud/src/lib/page-props-factory/plugins/preview-mode.ts

@@ -20,13 +20,14 @@ class PreviewModePlugin implements Plugin {
 
     // If we're in Pages preview (editing) Metadata Edit Mode, prefetch the editing data
     if (isEditingMetadataPreviewData(context.previewData)) {
-      const { site, itemId, language, version, variantIds } = context.previewData;
+      const { site, itemId, language, version, variantIds, layoutKind } = context.previewData;
 
       const data = await graphQLEditingService.fetchEditingData({
         siteName: site,
         itemId,
         language,
         version,
+        layoutKind,
       });
 
       if (!data) {

package/dist/templates/node-headless-ssr-experience-edge/README.md

@@ -1,56 +1,56 @@
-# node/express scaffolding for SSR using Sitecore Experience Edge
-
-Sitecore JSS for SSR using Experience Edge is considered experimental.
-
-<!---
-@TODO: Update to next version docs before release
--->
-
-[Documentation (Experience Platform)](https://doc.sitecore.com/xp/en/developers/hd/22/sitecore-headless-development/server-side-render-jss-apps-headlessly-using-a-sitecore-experience-edge-endpoint.html)
-
-> This is a sample setup that is not officially supported by Sitecore.
-
-This is a sample setup showing one of how you can configure rendering server on top of node.js and Express using Experience Edge. It performs only render of the sample app, quering layout data and dictionary data without proxying requests.
-
-## Pre-requisites
-
-1. Your instance needs to be configured with Headless Services Module and the API Key provisioned.
-
-   ### // TODO: document how to test GraphQL queries
-
-1. Next.js, React, Angular, and Vue samples support Experience Edge out of the box. The GraphQL components and query are compatible with the Experience Edge schema with no further changes necessary. Provide a `sc_apikey` header for authentication, this header is used for both Sitecore XM Edge schema and Sitecore Experience Edge. Refer to the GraphQL Connected demo component in the desired framework.
-
-1. Build your JS app bundle with `jss build`.
-
-   > You can use JSS sample apps which support server side rendering (JSS integrated mode) to operate with this project.
-
-1. Deploy the build artifacts from your app (`/dist` or `/build` within the app) to the `sitecoreDistPath` set in your app's `package.json` under the SSR sample root path. Most apps use `/dist/${jssAppName}`, for example `$ssrSampleRoot/dist/${jssAppName}`.
-
-   > Another way to deploy the artifacts to the SSR sample is to change the `instancePath` in your app's `scjssconfig.json` to the SSR sample root path, and then use `jss deploy files` within the app to complete the deployment to the SSR sample.
-
-## Setup
-
-Open `config.js` and specify your application bundle and connection settings.
-
-### Environment Variables
-
-The following environment variables can be set to configure the SSR sample instead of modifying `config.js`. You can use the `.env` file located in the root of the app or set these directly in the environment (for example, in containers).
-
-| Parameter                           | Description                                                                                                                                                       |
-| ----------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `SITECORE_JSS_APP_NAME`             | The JSS app's name. Used in the default value of `SITECORE_JSS_SERVER_BUNDLE` if it's not set. Used as the `SITECORE_SITE_NAME` if it's not set. |
-| `SITECORE_SITE_NAME`                | The Sitecore site name. Used for layout and dictionary data requests. |
-| `SITECORE_API_KEY`                  | The API key provisioned on Sitecore Experience Edge.                                                                                                              |
-| `SITECORE_JSS_SERVER_BUNDLE`        | Path to the JSS app's `server.bundle.js` file.                                                                                                                    |
-| `SITECORE_EXPERIENCE_EDGE_ENDPOINT` | Sitecore Experience Edge endpoint.                                                                                                                                |
-| `DEFAULT_LANGUAGE`                  | The JSS app's default language. Used to determine language context in case language is not specified in request URL.                                              |
-| `PORT`                              | Optional. Port which will be used when start sample. Default can be seen in [config.js](./config.js).                                                             |
-
-## Build & run
-
-1. Run `npm install`
-
-1. Run `npm run start`
-
-You should be able to see the following message:
-`server listening on port 3000!`.
+# node/express scaffolding for SSR using Sitecore Experience Edge
+
+Sitecore JSS for SSR using Experience Edge is considered experimental.
+
+<!---
+@TODO: Update to next version docs before release
+-->
+
+[Documentation (Experience Platform)](https://doc.sitecore.com/xp/en/developers/hd/22/sitecore-headless-development/server-side-render-jss-apps-headlessly-using-a-sitecore-experience-edge-endpoint.html)
+
+> This is a sample setup that is not officially supported by Sitecore.
+
+This is a sample setup showing one of how you can configure rendering server on top of node.js and Express using Experience Edge. It performs only render of the sample app, quering layout data and dictionary data without proxying requests.
+
+## Pre-requisites
+
+1. Your instance needs to be configured with Headless Services Module and the API Key provisioned.
+
+   ### // TODO: document how to test GraphQL queries
+
+1. Next.js, React, Angular, and Vue samples support Experience Edge out of the box. The GraphQL components and query are compatible with the Experience Edge schema with no further changes necessary. Provide a `sc_apikey` header for authentication, this header is used for both Sitecore XM Edge schema and Sitecore Experience Edge. Refer to the GraphQL Connected demo component in the desired framework.
+
+1. Build your JS app bundle with `jss build`.
+
+   > You can use JSS sample apps which support server side rendering (JSS integrated mode) to operate with this project.
+
+1. Deploy the build artifacts from your app (`/dist` or `/build` within the app) to the `sitecoreDistPath` set in your app's `package.json` under the SSR sample root path. Most apps use `/dist/${jssAppName}`, for example `$ssrSampleRoot/dist/${jssAppName}`.
+
+   > Another way to deploy the artifacts to the SSR sample is to change the `instancePath` in your app's `scjssconfig.json` to the SSR sample root path, and then use `jss deploy files` within the app to complete the deployment to the SSR sample.
+
+## Setup
+
+Open `config.js` and specify your application bundle and connection settings.
+
+### Environment Variables
+
+The following environment variables can be set to configure the SSR sample instead of modifying `config.js`. You can use the `.env` file located in the root of the app or set these directly in the environment (for example, in containers).
+
+| Parameter                           | Description                                                                                                                                                       |
+| ----------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `SITECORE_JSS_APP_NAME`             | The JSS app's name. Used in the default value of `SITECORE_JSS_SERVER_BUNDLE` if it's not set. Used as the `SITECORE_SITE_NAME` if it's not set. |
+| `SITECORE_SITE_NAME`                | The Sitecore site name. Used for layout and dictionary data requests. |
+| `SITECORE_API_KEY`                  | The API key provisioned on Sitecore Experience Edge.                                                                                                              |
+| `SITECORE_JSS_SERVER_BUNDLE`        | Path to the JSS app's `server.bundle.js` file.                                                                                                                    |
+| `SITECORE_EXPERIENCE_EDGE_ENDPOINT` | Sitecore Experience Edge endpoint.                                                                                                                                |
+| `DEFAULT_LANGUAGE`                  | The JSS app's default language. Used to determine language context in case language is not specified in request URL.                                              |
+| `PORT`                              | Optional. Port which will be used when start sample. Default can be seen in [config.js](./config.js).                                                             |
+
+## Build & run
+
+1. Run `npm install`
+
+1. Run `npm run start`
+
+You should be able to see the following message:
+`server listening on port 3000!`.

package/dist/templates/node-headless-ssr-experience-edge/package.json

@@ -1,34 +1,34 @@
-{
-  "name": "node-headless-ssr-experience-edge-sample",
-  "version": "22.2.0-canary",
-  "description": "Node server-side-rendering sample for running JSS apps under Node hosting using Experience Edge",
-  "scripts": {
-    "start": "ts-node ./src/index.ts"
-  },
-  "author": {
-    "name": "Sitecore Corporation",
-    "url": "https://jss.sitecore.com"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/sitecore/jss.git"
-  },
-  "bugs": {
-    "url": "https://github.com/sitecore/jss/issues"
-  },
-  "homepage": "https://jss.sitecore.com",
-  "license": "Apache-2.0",
-  "dependencies": {
-    "@sitecore-jss/sitecore-jss": "~22.2.0-canary",
-    "compression": "^1.7.4",
-    "express": "^4.18.2",
-    "dotenv": "^16.0.3"
-  },
-  "devDependencies": {
-    "@types/compression": "^1.7.2",
-    "@types/express": "^4.17.17",
-    "ts-node": "^10.9.1",
-    "typescript": "~4.9.5"
-  },
-  "private": true
-}
+{
+  "name": "node-headless-ssr-experience-edge-sample",
+  "version": "22.2.0",
+  "description": "Node server-side-rendering sample for running JSS apps under Node hosting using Experience Edge",
+  "scripts": {
+    "start": "ts-node ./src/index.ts"
+  },
+  "author": {
+    "name": "Sitecore Corporation",
+    "url": "https://jss.sitecore.com"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/sitecore/jss.git"
+  },
+  "bugs": {
+    "url": "https://github.com/sitecore/jss/issues"
+  },
+  "homepage": "https://jss.sitecore.com",
+  "license": "Apache-2.0",
+  "dependencies": {
+    "@sitecore-jss/sitecore-jss": "~22.2.0",
+    "compression": "^1.7.4",
+    "express": "^4.18.2",
+    "dotenv": "^16.0.3"
+  },
+  "devDependencies": {
+    "@types/compression": "^1.7.2",
+    "@types/express": "^4.17.17",
+    "ts-node": "^10.9.1",
+    "typescript": "~4.9.5"
+  },
+  "private": true
+}

package/dist/templates/node-headless-ssr-experience-edge/tsconfig.json

@@ -1,22 +1,22 @@
-{
-  "compilerOptions": {
-    "newLine": "LF",
-    "emitDecoratorMetadata": true,
-    "experimentalDecorators": true,
-    "noFallthroughCasesInSwitch": true,
-    "rootDir": ".",
-    "esModuleInterop": true,
-    "forceConsistentCasingInFileNames": true,
-    "strict": true,
-    "noImplicitAny": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noImplicitReturns": true,
-    "strictFunctionTypes": false,
-    "downlevelIteration": true,
-    "moduleResolution": "node",
-    "isolatedModules": true,
-    "allowSyntheticDefaultImports": true
-  },
-  "exclude": ["node_modules", "dist"]
-}
+{
+  "compilerOptions": {
+    "newLine": "LF",
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "noFallthroughCasesInSwitch": true,
+    "rootDir": ".",
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitAny": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noImplicitReturns": true,
+    "strictFunctionTypes": false,
+    "downlevelIteration": true,
+    "moduleResolution": "node",
+    "isolatedModules": true,
+    "allowSyntheticDefaultImports": true
+  },
+  "exclude": ["node_modules", "dist"]
+}

package/dist/templates/node-headless-ssr-proxy/.vscode/launch.json

@@ -1,48 +1,48 @@
-{
-  "version": "0.2.0",
-  "configurations": [
-    {
-      "name": "Launch",
-      "type": "node",
-      "request": "launch",
-      "program": "${workspaceRoot}/index.js",
-      "stopOnEntry": false,
-      "args": [
-        "doc"
-      ],
-      "cwd": "${workspaceRoot}",
-      "preLaunchTask": null,
-      "runtimeExecutable": null,
-      "runtimeArgs": [
-        "--nolazy"
-      ],
-      "env": {
-        "NODE_ENV": "development"
-      },
-      "console": "internalConsole",
-      "sourceMaps": false,
-      "outFiles": []
-    },
-    {
-      "name": "Attach",
-      "type": "node",
-      "request": "attach",
-      "port": 3000,
-      "address": "localhost",
-      "restart": false,
-      "sourceMaps": false,
-      "outFiles": [],
-      "localRoot": "${workspaceRoot}",
-      "remoteRoot": null
-    },
-    {
-      "name": "Attach to Process",
-      "type": "node",
-      "request": "attach",
-      "processId": "${command.PickProcess}",
-      "port": 5858,
-      "sourceMaps": false,
-      "outFiles": []
-    }
-  ]
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "Launch",
+      "type": "node",
+      "request": "launch",
+      "program": "${workspaceRoot}/index.js",
+      "stopOnEntry": false,
+      "args": [
+        "doc"
+      ],
+      "cwd": "${workspaceRoot}",
+      "preLaunchTask": null,
+      "runtimeExecutable": null,
+      "runtimeArgs": [
+        "--nolazy"
+      ],
+      "env": {
+        "NODE_ENV": "development"
+      },
+      "console": "internalConsole",
+      "sourceMaps": false,
+      "outFiles": []
+    },
+    {
+      "name": "Attach",
+      "type": "node",
+      "request": "attach",
+      "port": 3000,
+      "address": "localhost",
+      "restart": false,
+      "sourceMaps": false,
+      "outFiles": [],
+      "localRoot": "${workspaceRoot}",
+      "remoteRoot": null
+    },
+    {
+      "name": "Attach to Process",
+      "type": "node",
+      "request": "attach",
+      "processId": "${command.PickProcess}",
+      "port": 5858,
+      "sourceMaps": false,
+      "outFiles": []
+    }
+  ]
 }