create-sitecore-jss 20.0.0-canary.78

package/dist/templates/nextjs/scripts/generate-config.ts

@@ -0,0 +1,85 @@
+import fs from 'fs';
+import path from 'path';
+import { constantCase } from 'constant-case';
+import packageConfig from '../package.json';
+
+/* eslint-disable no-console */
+
+/**
+ * Generate config
+ * The object returned from this function will be made available by importing src/temp/config.js.
+ * This is executed prior to the build running, so it's a way to inject environment or build config-specific
+ * settings as variables into the JSS app.
+ * NOTE! Any configs returned here will be written into the client-side JS bundle. DO NOT PUT SECRETS HERE.
+ * @param {object} configOverrides Keys in this object will override any equivalent global config keys.
+ */
+export function generateConfig(configOverrides?: { [key: string]: string }): void {
+  const defaultConfig = {
+    sitecoreApiKey: 'no-api-key-set',
+    sitecoreApiHost: '',
+    jssAppName: 'Unknown',
+  };
+
+  // require + combine config sources
+  const scjssConfig = transformScJssConfig();
+  const packageJson = transformPackageConfig();
+
+  // Object.assign merges the objects in order, so config overrides are performed as:
+  // default config <-- scjssconfig.json <-- package.json <-- configOverrides
+  // Optional: add any other dynamic config source (e.g. environment-specific config files).
+  const config = Object.assign(defaultConfig, scjssConfig, packageJson, configOverrides);
+
+  // The GraphQL endpoint is an example of making a _computed_ config setting
+  // based on other config settings.
+  const computedConfig: { [key: string]: string } = {};
+  computedConfig.graphQLEndpoint = '`${config.sitecoreApiHost}${config.graphQLEndpointPath}`';
+
+  let configText = `/* eslint-disable */
+// Do not edit this file, it is auto-generated at build time!
+// See scripts/bootstrap.ts to modify the generation of this file.
+const config = {};\n`;
+
+  // Set base configuration values, allowing override with environment variables
+  Object.keys(config).forEach((prop) => {
+    configText += `config.${prop} = process.env.${constantCase(prop)} || "${config[prop]}",\n`;
+  });
+  // Set computed values, allowing override with environment variables
+  Object.keys(computedConfig).forEach((prop) => {
+    configText += `config.${prop} = process.env.${constantCase(prop)} || ${
+      computedConfig[prop]
+    };\n`;
+  });
+  configText += `module.exports = config;`;
+
+  const configPath = path.resolve('src/temp/config.js');
+  console.log(`Writing runtime config to ${configPath}`);
+  fs.writeFileSync(configPath, configText, { encoding: 'utf8' });
+}
+
+function transformScJssConfig() {
+  // scjssconfig.json may not exist if you've never run `jss setup` (development)
+  // or are depending on environment variables instead (production).
+  let config;
+  try {
+    // eslint-disable-next-line global-require
+    config = require('../scjssconfig.json');
+  } catch (e) {
+    return {};
+  }
+
+  if (!config) return {};
+
+  return {
+    sitecoreApiKey: config.sitecore.apiKey,
+    sitecoreApiHost: config.sitecore.layoutServiceHost,
+  };
+}
+
+function transformPackageConfig() {
+  if (!packageConfig.config) return {};
+
+  return {
+    jssAppName: packageConfig.config.appName,
+    graphQLEndpointPath: packageConfig.config.graphQLEndpointPath,
+  };
+}

package/dist/templates/nextjs/scripts/generate-plugins.ts

@@ -0,0 +1,103 @@
+import fs from 'fs';
+import path from 'path';
+import { getItems } from './utils';
+
+/*
+  PLUGINS GENERATION
+  NOTE: pluginName: the name of the plugin in the src/lib folder
+  Generates the `/src/temp/{pluginName}-plugins.ts` file, which exports list of plugins
+
+  Generating the plugins is optional, and it can be maintained manually if preferred.
+
+  The default convention uses the plugin's filename (without the extension) as the first part of the component
+  name. For example, the file `/lib/page-props-factory/plugins/exampleName.ts` would map to plugin `exampleNamePlugin`.
+  This can be customized in writePlugins().
+*/
+
+enum ModuleType {
+  CJS,
+  ESM,
+}
+
+interface PluginDefinition {
+  listPath: string;
+  rootPath: string;
+  moduleType: ModuleType;
+}
+
+interface PluginFile {
+  path: string;
+  name: string;
+}
+
+const pluginDefinitions = [
+  {
+    listPath: 'src/temp/sitemap-fetcher-plugins.ts',
+    rootPath: 'src/lib/sitemap-fetcher/plugins',
+    moduleType: ModuleType.ESM,
+  },
+  {
+    listPath: 'src/temp/page-props-factory-plugins.ts',
+    rootPath: 'src/lib/page-props-factory/plugins',
+    moduleType: ModuleType.ESM,
+  },
+  {
+    listPath: 'src/temp/next-config-plugins.js',
+    rootPath: 'src/lib/next-config/plugins',
+    moduleType: ModuleType.CJS,
+  },
+];
+
+run(pluginDefinitions);
+
+function run(definitions: PluginDefinition[]) {
+  definitions.forEach((definition) => {
+    writePlugins(definition.listPath, definition.rootPath, definition.moduleType);
+  });
+}
+
+/**
+ * Generates the plugins file and saves it to the filesystem.
+ * By convention, we expect to find plugins under src/lib/{pluginName}/plugins/** (subfolders are
+ * searched recursively). The filename, with extension and non-word characters
+ * stripped, is used to identify the plugin's JavaScript module definition (for adding
+ * new plugin to the factory).
+ * Modify this function to use a different convention.
+ */
+function writePlugins(listPath: string, rootPath: string, moduleType: ModuleType) {
+  const pluginName = rootPath.split('/')[2];
+  const plugins = getPluginList(rootPath, pluginName);
+  let fileContent = '';
+
+  fileContent = plugins
+    .map((plugin) => {
+      return moduleType === ModuleType.CJS
+        ? `exports.${plugin.name} = require('${plugin.path.replace('src/', '../')}');`
+        : `export { ${plugin.name} } from '${plugin.path}';`;
+    })
+    .join('\r\n')
+    .concat('\r\n');
+
+  if (!plugins.length) {
+    fileContent = moduleType === ModuleType.CJS ? 'module.exports = {};\r\n' : 'export {};\r\n';
+  }
+
+  const filePath = path.resolve(listPath);
+  console.log(`Writing ${pluginName} plugins to ${filePath}`);
+  fs.writeFileSync(filePath, fileContent, {
+    encoding: 'utf8',
+  });
+}
+
+function getPluginList(path: string, pluginName: string): PluginFile[] {
+  const plugins = getItems<PluginFile>({
+    path,
+    resolveItem: (path, name) => ({
+      path: `${path}/${name}`,
+      name: `${name.replace(/[^\w]+/g, '')}Plugin`,
+    }),
+    cb: (name) => console.debug(`Registering ${pluginName} plugin ${name}`),
+  });
+
+  return plugins;
+}

package/dist/templates/nextjs/scripts/scaffold-component.ts

@@ -0,0 +1,89 @@
+/*
+  Component Scaffolding Script
+  This is a script that enables scaffolding a new JSS component using `jss scaffold <ComponentName>`.
+  The default convention is that component names must start with a capital letter, and can contain
+  letters, number, underscores, or dashes.
+  
+  If the <ComponentName> parameter includes a path, it must be relative to the src/components folder.
+  For example, `jss scaffold search/SearchBox` will create a component called `SearchBox` in
+  `src/components/search/SearchBox.tsx`. Specifying a relative path is optional, and just providing
+  the name is ok.
+
+  Edit this script if you wish to use your own conventions for component storage in your JSS app.
+*/
+
+/* eslint-disable no-throw-literal,no-console */
+
+import fs from 'fs';
+import path from 'path';
+import chalk from 'chalk';
+import generateComponentSrc from './templates/component-src';
+
+const componentRootPath = 'src/components';
+
+// Matches component names that start with a capital letter, and contain only letters, number,
+// underscores, or dashes. Optionally, the component name can be preceded by a relative path
+const nameParamFormat = new RegExp(/^((?:[\w-]+\/)*)([A-Z][\w-]+)$/);
+const componentArg = process.argv[2];
+
+if (!componentArg) {
+  throw 'Component name was not passed. Usage: jss scaffold <ComponentName>';
+}
+
+const regExResult = nameParamFormat.exec(componentArg);
+
+if (regExResult === null) {
+  throw `Component name should start with an uppercase letter and contain only letters, numbers,
+dashes, or underscores. If specifying a path, it must be relative to src/components`;
+}
+
+const componentPath = regExResult[1];
+const componentName = regExResult[2];
+const filename = `${componentName}.tsx`;
+
+const componentOutputPath = scaffoldFile(
+  componentRootPath,
+  generateComponentSrc(componentName),
+  filename
+);
+
+console.log(
+  chalk.green(`
+Scaffolding of ${componentName} complete.
+Next steps:`)
+);
+
+if (componentOutputPath) {
+  console.log(`* Implement the React component in ${chalk.green(componentOutputPath)}`);
+}
+
+/**
+ * Force to use `crlf` line endings, we are using `crlf` across the project.
+ * Replace: `lf` (\n), `cr` (\r)
+ * @param {string} content
+ */
+function editLineEndings(content: string) {
+  return content.replace(/\r|\n/gm, '\r\n');
+}
+
+/**
+ * Creates a file relative to the specified path if the file doesn't exist. Creates directories as needed.
+ * @param {string} rootPath - the root path
+ * @param {string} fileContent - the file content
+ * @param {string} filename - the filename
+ * @returns the new file's filepath
+ */
+function scaffoldFile(rootPath: string, fileContent: string, filename: string): string | null {
+  const outputDir = path.join(rootPath, componentPath);
+  const outputFile = path.join(outputDir, filename);
+
+  if (fs.existsSync(outputFile)) {
+    console.log(chalk.red(`Skipping creating ${outputFile}; already exists.`));
+    return null;
+  }
+
+  fs.mkdirSync(outputDir, { recursive: true });
+  fs.writeFileSync(outputFile, editLineEndings(fileContent), 'utf8');
+  console.log(chalk.green(`File ${outputFile} has been scaffolded.`));
+  return outputFile;
+}

package/dist/templates/nextjs/scripts/templates/component-factory.ts

@@ -0,0 +1,119 @@
+/**
+ * Describes a file that represents a component definition
+ */
+ export interface ComponentFile {
+  path: string;
+  moduleName: string;
+  componentName: string;
+}
+
+export interface PackageDefinition {
+  name: string;
+  components: {
+    moduleName: string;
+    componentName: string;
+  }[];
+}
+
+const isLazyLoadingModule = (componentPath: string) => componentPath.includes('.dynamic');
+
+const removeDynamicModuleNameEnding = (moduleName: string) =>
+  moduleName.replace(/\.?dynamic$/i, '');
+
+/**
+ * Generates the contents of the component factory file using a predefined string template.
+ * @param components - the list of component files to include
+ * @returns component factory file contents
+ */
+function generateComponentFactory(components: (PackageDefinition | ComponentFile)[]): string {
+  const componentFiles = components.filter(
+    (component) => (component as ComponentFile).path
+  ) as ComponentFile[];
+  const packages = components.filter(
+    (component) => (component as PackageDefinition).components
+  ) as PackageDefinition[];
+
+  const hasLazyModules = componentFiles.find((component) => isLazyLoadingModule(component.path));
+
+  return `/* eslint-disable */
+// Do not edit this file, it is auto-generated at build time!
+// See scripts/generate-component-factory.ts to modify the generation of this file.
+
+${hasLazyModules ? "import dynamic from 'next/dynamic'" : ''}
+
+${packages.map((pkg) => {
+  const list = pkg.components.map((c) => c.moduleName).join(', ');
+
+  return `import { ${list} } from '${pkg.name}'`;
+})}
+${componentFiles
+  .map((component) => {
+    if (isLazyLoadingModule(component.path)) {
+      const moduleName = removeDynamicModuleNameEnding(component.moduleName);
+      return `const ${moduleName} = {
+  module: () => import('${component.path}'),
+  element: () => dynamic(${moduleName}.module)
+}`;
+    }
+
+    return `import * as ${component.moduleName} from '${component.path}';`;
+  })
+  .join('\n')}
+
+const components = new Map();
+${packages.map((p) =>
+  p.components.map(
+    (component) => `components.set('${component.componentName}', ${component.moduleName})`
+  )
+)}
+${componentFiles
+  .map(
+    (component) =>
+      `components.set('${
+        isLazyLoadingModule(component.path)
+          ? removeDynamicModuleNameEnding(component.componentName)
+          : component.componentName
+      }', ${
+        isLazyLoadingModule(component.path)
+          ? removeDynamicModuleNameEnding(component.moduleName)
+          : component.moduleName
+      });`
+  )
+  .join('\n')}
+
+// Next.js 'dynamic' import and JavaScript 'dynamic' import are different.
+// Next.js 'dynamic(...)' returns common 'React.ComponentType' while
+// 'import('...')' returns 'Promise' that will resolve module.
+// componentModule uses 'import(...)' because primary usage of it to get not only 'React Component' (default export) but all named exports.
+// See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#dynamic_imports
+// componentFactory uses 'dynamic(...)' because primary usage of it to render 'React Component' (default export).
+// See https://nextjs.org/docs/advanced-features/dynamic-import
+// At the end you will have single preloaded script for each lazy loading module.
+
+export function componentModule(componentName: string) {
+  const component = components.get(componentName);
+
+  // check that component is lazy loading module
+  if (!component?.default && component?.module) {
+    // return js dynamic import
+    return component.module();
+  }
+
+  return component;
+}
+  
+export function componentFactory(componentName: string) {
+  const component = components.get(componentName);
+
+  // check that component should be dynamically imported
+  if (component?.element) {
+    // return next.js dynamic import
+    return component.element();
+  }
+
+  return component?.default || component;
+}
+`;
+}
+
+export default generateComponentFactory;

package/dist/templates/nextjs/scripts/templates/component-src.ts

@@ -0,0 +1,27 @@
+/**
+ * Generates React boilerplate for a component under `src/components`
+ * @param componentName - the component name
+ * @returns component src boilerplate as a string
+ */
+function generateComponentSrc(componentName: string): string {
+  return `import { Text, Field, withDatasourceCheck } from '@sitecore-jss/sitecore-jss-nextjs';
+import { ComponentProps } from 'lib/component-props';
+
+type ${componentName}Props = ComponentProps & {
+  fields: {
+    heading: Field<string>;
+  };
+};
+
+const ${componentName} = (props: ${componentName}Props): JSX.Element => (
+  <div>
+    <p>${componentName} Component</p>
+    <Text field={props.fields.heading} />
+  </div>
+);
+
+export default withDatasourceCheck()<${componentName}Props>(${componentName});
+`;
+}
+
+export default generateComponentSrc;

package/dist/templates/nextjs/scripts/utils.ts

@@ -0,0 +1,59 @@
+import fs from 'fs';
+import chokidar from 'chokidar';
+
+/**
+ * Run watch mode, watching on @var rootPath
+ */
+export function watchItems(rootPath: string, cb: () => void): void {
+  chokidar
+    .watch(rootPath, { ignoreInitial: true, awaitWriteFinish: true })
+    .on('add', cb)
+    .on('unlink', cb);
+}
+
+/**
+ * Using @var path find all files recursively and generate output using @var resolveItem by calling it for each file
+ * @param path plugins path
+ * @param resolveItem will resolve item in required data format
+ * @param cb will be called when new item is found
+ * @param fileFormat Matches specific files
+ * @returns {Item[]} items
+ */
+export function getItems<Item>(settings: {
+  path: string;
+  resolveItem: (path: string, name: string) => Item;
+  cb?: (name: string) => void;
+  fileFormat?: RegExp;
+}): Item[] {
+  const { path, resolveItem, cb, fileFormat = new RegExp(/(.+)(?<!\.d)\.[jt]sx?$/) } = settings;
+  const items: Item[] = [];
+  const folders: fs.Dirent[] = [];
+
+  if (!fs.existsSync(path)) return [];
+
+  fs.readdirSync(path, { withFileTypes: true }).forEach((item) => {
+    if (item.isDirectory()) {
+      folders.push(item);
+    }
+
+    if (fileFormat.test(item.name)) {
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      const name = item.name.match(fileFormat)![1];
+      items.push(resolveItem(path, name));
+      cb && cb(name);
+    }
+  });
+
+  for (const folder of folders) {
+    items.push(
+      ...getItems<Item>({
+        path: `${path}/${folder.name}`,
+        resolveItem,
+        cb,
+        fileFormat,
+      })
+    );
+  }
+
+  return items;
+}

package/dist/templates/nextjs/sitecore/config/{{appName}}.config

@@ -0,0 +1,151 @@
+<!--
+  JSS Sitecore Configuration Patch File
+
+  This configuration file registers the JSS site with Sitecore, and configures the Layout Service
+  to work with it. Config patches need to be deployed to the Sitecore server.
+
+  Normally `jss deploy config` can do this for local development. To manually deploy, or to deploy via CI,
+  this file can be placed in the `App_Config/Include` folder, or a subfolder of it, within the Sitecore site.
+-->
+<configuration xmlns:patch="http://www.sitecore.net/xmlconfig/" xmlns:set="http://www.sitecore.net/xmlconfig/set/" xmlns:role="http://www.sitecore.net/xmlconfig/role/">
+  <sitecore>
+    <!--
+      Note that if any of these settings are enabled, they will apply to the entire Sitecore instance. If there are
+      multiple sites defined in the instances, the settings will affect all of them.
+    -->
+    <settings>
+      <!--
+        ANALYTICS FORWARDED REQUEST HEADER
+        When using Next.js SSR routes, Layout Service requests will send the original IP address of the client on the 'X-Forwarded-For' header.
+        This setting tells Sitecore to read the forwarded header, thus making analytics track the correct original client IP address.
+
+        <setting name="Analytics.ForwardedRequestHttpHeader" set:value="X-Forwarded-For" />
+      -->
+      
+      <!--
+        ANALYTICS DISABLE ROBOT DETECTION
+        During development, activity will flag us as a robot.
+        These settings will enable tracking of robot activity for ease of testing (development ONLY).
+        
+        <setting name="Analytics.AutoDetectBots" set:value="false" />
+        <setting name="Analytics.Robots.IgnoreRobots" set:value="false" />
+      -->
+
+      <!--
+        JSS EDITING SECRET
+        To secure the Experience Editor endpoint exposed by your Next.js app (see `serverSideRenderingEngineEndpointUrl` below),
+        a secret token is used. This is taken from an env variable by default, but could be patched and set directly by uncommenting.
+        This (server-side) value must match your client-side value, which is configured by the JSS_EDITING_SECRET env variable (see the Next.js .env file).
+        We recommend an alphanumeric value of at least 16 characters.
+
+        <setting name="JavaScriptServices.ViewEngine.Http.JssEditingSecret" value="" />
+      -->
+
+      <!--
+        LANGUAGE FALLBACK
+        These settings enable item-level language fallback for JSS apps that use Experience Edge.
+        In addition to these settings, ensure that Language Fallback is configured on the Language
+        item in Sitecore, and that items in the content tree have "Enable Item Fallback" field set
+        to true. Other settings related to item-level language fallback that may exist in Sitecore
+        configuration will not impact Edge functionality.
+
+        <setting name="ExperienceEdge.EnableItemLanguageFallback" value="true"/>
+        <setting name="ExperienceEdge.EnableFieldLanguageFallback" value="true"/>
+      -->
+    </settings>
+    <sites>
+      <!--
+        JSS Site Registration
+        This configures the site with Sitecore - i.e. host headers, item paths.
+        If your JSS app lives within an existing Sitecore site, this may not be necessary.
+
+        IMPORTANT: JSS sites ship in 'live mode', which makes development and testing easy,
+        but disables workflow and publishing. Before going to production, change the `database`
+        below to `web` instead of `master`.
+      -->
+      <site patch:before="site[@name='website']"
+            inherits="website"
+            name="<%- appName %>"
+            hostName="<%- hostName.replace(/^https?:\/\//, '') %>"
+            rootPath="/sitecore/content/<%- appName %>"
+            startItem="/home"
+            database="master" />
+    </sites>
+    <javaScriptServices>
+      <apps>
+        <!--
+          JSS App Registration
+          The JSS app needs to be registered in order to support layout service and import services.
+
+          There are many available attributes, and they inherit the defaults if not explicitly specified here.
+          Defaults are defined in `/App_Config/Sitecore/JavaScriptServices/Sitecore.JavaScriptServices.Apps.config`
+
+          NOTE: graphQLEndpoint enables _Integrated GraphQL_. If not using integrated GraphQL, it can be removed.
+
+          NOTE: layoutServiceConfiguration should be set to "default" when using GraphQL Edge schema.
+          When using integrated GraphQL with Edge schema, a $language value is injected
+          since language is required in all Edge queries. "jss" configuration does not do this (which is backwards
+          compatible with JSS versions < 18.0.0).
+        -->
+        <app name="<%- appName %>"
+            layoutServiceConfiguration="default"
+            sitecorePath="/sitecore/content/<%- appName %>"
+            useLanguageSpecificLayout="true"
+            graphQLEndpoint="/sitecore/api/graph/edge"
+            inherits="defaults"
+            serverSideRenderingEngine="http"
+            serverSideRenderingEngineEndpointUrl="http://localhost:3000/api/editing/render"
+            serverSideRenderingEngineApplicationUrl="http://localhost:3000"
+        />
+      </apps>
+      <!--
+        IMAGE RESIZING WHITELIST
+        Using Sitecore server-side media resizing (i.e. the `imageParams` or `srcSet` props on the `<Image/>` helper component)
+        could expose your Sitecore server to a denial-of-service attack by rescaling an image with many arbitrary dimensions.
+        In JSS resizing param sets that are unknown are rejected by a whitelist.
+
+        Sets of image sizing parameters that are used in app components must be whitelisted here.
+        If a param set is not whitelisted, the image will be returned _without resizing_.
+
+        To determine the image parameters being used, look at the query string on the `src` of the rendered image, i.e. '/img.jpg?mw=100&h=72' -> mw=100,h=72
+        Note: the parameter sets defined here are comma-delimited (,) instead of &-delimited like the query string. Multiple sets are endline-delimited.
+       -->
+      <allowedMediaParams>
+        <!-- XML element name is arbitary, useful for organizing and patching -->
+        <styleguide-image-sample>
+          mw=100,mh=50
+        </styleguide-image-sample>
+        <styleguide-image-sample-adaptive>
+          mw=300
+          mw=100
+        </styleguide-image-sample-adaptive>
+      </allowedMediaParams>
+    </javaScriptServices>
+    <!--
+      Media URLs resolving
+      Tells Sitecore to not include the Sitecore server URL as part of the media requests, so that they are instead routed through Next.js rewrites (see next.config.js).
+      This eliminates exposing the Sitecore server publicly.
+      
+      "default" configuration is used for Sitecore GraphQL Edge requests.
+      "jss" configuration is used for Sitecore Layout Service REST requests.
+    -->
+    <layoutService>
+      <configurations>
+        <config name="default">
+          <rendering>
+            <renderingContentsResolver>
+              <IncludeServerUrlInMediaUrls>false</IncludeServerUrlInMediaUrls>
+            </renderingContentsResolver>
+          </rendering>
+        </config>
+        <config name="jss">
+          <rendering>
+            <renderingContentsResolver>
+              <IncludeServerUrlInMediaUrls>false</IncludeServerUrlInMediaUrls>
+            </renderingContentsResolver>
+          </rendering>
+        </config>
+      </configurations>
+    </layoutService>
+  </sitecore>
+</configuration>

package/dist/templates/nextjs/src/Layout.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import Head from 'next/head';
+import deepEqual from 'deep-equal';
+import {
+  Placeholder,
+  VisitorIdentification,
+  withSitecoreContext,
+  getPublicUrl,
+  SitecoreContextValue,
+} from '@sitecore-jss/sitecore-jss-nextjs';
+import Navigation from 'src/Navigation';
+
+// Prefix public assets with a public URL to enable compatibility with Sitecore Experience Editor.
+// If you're not supporting the Experience Editor, you can remove this.
+const publicUrl = getPublicUrl();
+
+interface LayoutProps {
+  sitecoreContext: SitecoreContextValue;
+}
+
+const Layout = ({ sitecoreContext: { route } }: LayoutProps): JSX.Element => {
+  return (
+    <>
+      <Head>
+        <title>{route?.fields?.pageTitle?.value || 'Page'}</title>
+        <link rel="icon" href={`${publicUrl}/favicon.ico`} />
+      </Head>
+
+      {/*
+        VisitorIdentification is necessary for Sitecore Analytics to determine if the visitor is a robot.
+        If Sitecore XP (with xConnect/xDB) is used, this is required or else analytics will not be collected for the JSS app.
+        For XM (CMS-only) apps, this should be removed.
+
+        VI detection only runs once for a given analytics ID, so this is not a recurring operation once cookies are established.
+      */}
+      <VisitorIdentification />
+
+      <Navigation />
+      {/* root placeholder for the app, which we add components to using route data */}
+      <div className="container">
+        {route && <Placeholder name="<%- appPrefix ? `${appName}-` : '' %>jss-main" rendering={route} />}
+      </div>
+    </>
+  );
+};
+
+const propsAreEqual = (prevProps: LayoutProps, nextProps: LayoutProps) => {
+  if (deepEqual(prevProps.sitecoreContext.route, nextProps.sitecoreContext.route)) return true;
+
+  return false;
+};
+
+export default withSitecoreContext()(React.memo(Layout, propsAreEqual));