create-sitecore-jss 22.6.0-canary.8 → 22.6.0

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

@@ -1,19 +1,19 @@
-
-# ========== Sitecore Edge Platform ===========
-
-# Your unified Sitecore Edge Context Id.
-# This will be used over any Sitecore Preview / Delivery Edge variables (above).
-SITECORE_EDGE_CONTEXT_ID=
-
-# ==============================================
-
-# An optional Sitecore Personalize scope identifier.
-# This can be used to isolate personalization data when multiple XM Cloud Environments share a Personalize tenant.
-# This should match the PAGES_PERSONALIZE_SCOPE environment variable for your connected XM Cloud Environment.
-NEXT_PUBLIC_PERSONALIZE_SCOPE=
-
-# Timeout (ms) for Sitecore CDP requests to respond within. Default is 400.
-PERSONALIZE_MIDDLEWARE_CDP_TIMEOUT=
-
-# Timeout (ms) for Sitecore Experience Edge requests to respond within. Default is 400.
-PERSONALIZE_MIDDLEWARE_EDGE_TIMEOUT=
+
+# ========== Sitecore Edge Platform ===========
+
+# Your unified Sitecore Edge Context Id.
+# This will be used over any Sitecore Preview / Delivery Edge variables (above).
+SITECORE_EDGE_CONTEXT_ID=
+
+# ==============================================
+
+# An optional Sitecore Personalize scope identifier.
+# This can be used to isolate personalization data when multiple XM Cloud Environments share a Personalize tenant.
+# This should match the PAGES_PERSONALIZE_SCOPE environment variable for your connected XM Cloud Environment.
+NEXT_PUBLIC_PERSONALIZE_SCOPE=
+
+# Timeout (ms) for Sitecore CDP requests to respond within. Default is 400.
+PERSONALIZE_MIDDLEWARE_CDP_TIMEOUT=
+
+# Timeout (ms) for Sitecore Experience Edge requests to respond within. Default is 400.
+PERSONALIZE_MIDDLEWARE_EDGE_TIMEOUT=

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

@@ -1,8 +1,8 @@
-{
-  "dependencies": {
-    "@sitecore/components": "~2.0.1",
-    "@sitecore-cloudsdk/core": "^0.4.2",
-    "@sitecore-cloudsdk/events": "^0.4.2",
-    "@sitecore-feaas/clientside": "^0.5.19"
-  }
-}
+{
+  "dependencies": {
+    "@sitecore/components": "~2.0.1",
+    "@sitecore-cloudsdk/core": "^0.4.2",
+    "@sitecore-cloudsdk/events": "^0.4.2",
+    "@sitecore-feaas/clientside": "^0.5.19"
+  }
+}

package/dist/templates/nextjs-xmcloud/scripts/generate-component-builder/plugins/form.ts

@@ -0,0 +1,24 @@
+import { ComponentBuilderPlugin, ComponentBuilderPluginConfig } from '..';
+
+/**
+ * Provides Form component configuration
+ */
+class FormPlugin implements ComponentBuilderPlugin {
+  order = 1;
+
+  exec(config: ComponentBuilderPluginConfig) {
+    config.packages.push({
+      name: '@sitecore-jss/sitecore-jss-nextjs',
+      components: [
+        {
+          componentName: 'Form',
+          moduleName: 'Form',
+        },
+      ],
+    });
+
+    return config;
+  }
+}
+
+export const formPlugin = new FormPlugin();

package/dist/templates/nextjs-xmcloud/src/lib/next-config/plugins/monorepo-xmcloud.js

@@ -14,6 +14,10 @@ const monorepoPlugin = (nextConfig = {}) => {
           './node_modules/@sitecore-feaas/clientside/dist/browser/react.esm.js'
       );
 
+      config.resolve.alias['@sitecore-cloudsdk/events'] = path.resolve(
+        CWD, './node_modules/@sitecore-cloudsdk/events'
+      );
+
       // Overload the Webpack config if it was already overloaded
       if (typeof nextConfig.webpack === 'function') {
         return nextConfig.webpack(config, options);

package/dist/templates/nextjs-xmcloud/src/pages/[[...path]].tsx

@@ -0,0 +1,112 @@
+import { useEffect } from 'react';
+<% if (prerender === 'SSG') { -%>
+import { GetStaticPaths, GetStaticProps } from 'next';
+<% } else if (prerender === 'SSR') { -%>
+import { GetServerSideProps } from 'next';
+<% } -%>
+import NotFound from 'src/NotFound';
+import Layout from 'src/Layout';
+import {
+  SitecoreContext,
+  ComponentPropsContext,
+  <% if (prerender === 'SSG') { -%>
+  StaticPath,
+  <% } -%>
+} from '@sitecore-jss/sitecore-jss-nextjs';
+import { handleEditorFastRefresh } from '@sitecore-jss/sitecore-jss-nextjs/utils';
+import { SitecorePageProps } from 'lib/page-props';
+import { sitecorePagePropsFactory } from 'lib/page-props-factory';
+import { componentBuilder } from 'temp/componentBuilder';
+import config from 'temp/config';
+<% if (prerender === 'SSG') { -%>
+import { sitemapFetcher } from 'lib/sitemap-fetcher';
+
+<% } -%>
+
+const SitecorePage = ({ notFound, componentProps, layoutData, headLinks }: SitecorePageProps): JSX.Element => {
+  useEffect(() => {
+    // Since Sitecore editors do not support Fast Refresh, need to refresh editor chromes after Fast Refresh finished
+    handleEditorFastRefresh();
+  }, []);
+
+  if (notFound || !layoutData.sitecore.route) {
+    // Shouldn't hit this (as long as 'notFound' is being returned below), but just to be safe
+    return <NotFound />;
+  }
+
+  const isEditing = layoutData.sitecore.context.pageEditing;
+
+  return (
+    <ComponentPropsContext value={componentProps}>
+      <SitecoreContext
+        componentFactory={componentBuilder.getComponentFactory({ isEditing })}
+        layoutData={layoutData}
+        api={{
+          edge: {
+            contextId: config.sitecoreEdgeContextId,
+            edgeUrl: config.sitecoreEdgeUrl,
+          },
+        }}
+      >
+        <Layout layoutData={layoutData} headLinks={headLinks} />
+      </SitecoreContext>
+    </ComponentPropsContext>
+  );
+};
+
+<% if (prerender === 'SSG') { -%>
+// This function gets called at build and export time to determine
+// pages for SSG ("paths", as tokenized array).
+export const getStaticPaths: GetStaticPaths = async (context) => {
+  // Fallback, along with revalidate in getStaticProps (below),
+  // enables Incremental Static Regeneration. This allows us to
+  // leave certain (or all) paths empty if desired and static pages
+  // will be generated on request (development mode in this example).
+  // Alternatively, the entire sitemap could be pre-rendered
+  // ahead of time (non-development mode in this example).
+  // See https://nextjs.org/docs/basic-features/data-fetching/incremental-static-regeneration
+
+  let paths: StaticPath[] = [];
+  let fallback: boolean | 'blocking' = 'blocking';
+
+  if (process.env.NODE_ENV !== 'development' && process.env.DISABLE_SSG_FETCH?.toLowerCase() !== 'true') {
+    try {
+      // Note: Next.js runs export in production mode
+      paths = await sitemapFetcher.fetch(context);
+    } catch (error) {
+      console.log('Error occurred while fetching static paths');
+      console.log(error);
+    }
+
+    fallback = process.env.EXPORT_MODE ? false : fallback;
+  }
+
+  return {
+    paths,
+    fallback,
+  };
+};
+
+// This function gets called at build time on server-side.
+// It may be called again, on a serverless function, if
+// revalidation (or fallback) is enabled and a new request comes in.
+export const getStaticProps: GetStaticProps = async (context) => {
+<% } else if (prerender === 'SSR') { -%>
+// This function gets called at request time on server-side.
+export const getServerSideProps: GetServerSideProps = async (context) => {
+<% } -%>
+  const props = await sitecorePagePropsFactory.create(context);
+
+  return {
+    props,
+<% if (prerender === 'SSG') { -%>
+    // Next.js will attempt to re-generate the page:
+    // - When a request comes in
+    // - At most once every 5 seconds
+    revalidate: 5, // In seconds
+<% } -%>
+    notFound: props.notFound, // Returns custom 404 page with a status code of 404 when true
+  };
+};
+
+export default SitecorePage;

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/gitignore

@@ -1,19 +1,19 @@
-# See http://help.github.com/ignore-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-
-# local env files
-.env.local
-.env.*.local
-
-# IDE - VSCode
-.vscode/*
-!.vscode/settings.json
-!.vscode/tasks.json
-!.vscode/launch.json
-!.vscode/extensions.json
-
-# System Files
-.DS_Store
-Thumbs.db
+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+
+# local env files
+.env.local
+.env.*.local
+
+# IDE - VSCode
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+
+# System Files
+.DS_Store
+Thumbs.db

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

@@ -1,34 +1,34 @@
-{
-  "name": "node-headless-ssr-experience-edge-sample",
-  "version": "<%- version %>",
-  "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": "~<%- version %>",
-    "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": "~5.6.3"
-  },
-  "private": true
-}
+{
+  "name": "node-headless-ssr-experience-edge-sample",
+  "version": "0.1.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": "<%- version %>",
+    "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": "~5.6.3"
+  },
+  "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": []
+    }
+  ]
 }