create-sitecore-jss 21.3.0 → 21.3.1

package/dist/common/processes/transform.js

@@ -35,7 +35,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.transform = exports.diffAndWriteFiles = exports.diffFiles = exports.mergeEnv = exports.merge = exports.transformFilename = void 0;
+exports.transform = exports.diffAndWriteFiles = exports.diffFiles = exports.concatEnv = exports.merge = exports.transformFilename = void 0;
 const chalk_1 = __importDefault(require("chalk"));
 const fs_extra_1 = __importDefault(require("fs-extra"));
 const glob_1 = __importDefault(require("glob"));
@@ -81,40 +81,19 @@ const merge = (targetObj, sourceObj) => {
     return mergeObject(targetObj, sourceObj);
 };
 exports.merge = merge;
-const mergeEnv = (targetContent, sourceContent) => {
-    const sourceEnv = (0, dotenv_1.parse)(sourceContent);
-    if (!sourceEnv || !Object.keys(sourceEnv).length)
-        return targetContent;
-    const targetEnv = (0, dotenv_1.parse)(targetContent);
-    const sourceLines = sourceContent.split('\r\n');
-    Object.keys(sourceEnv).forEach((sourceEnvVar) => {
-        const isDuplicate = Object.keys(targetEnv).includes(sourceEnvVar);
-        if (!isDuplicate)
-            return;
-        // Overriding value in a target .env file
-        targetContent = targetContent.replace(new RegExp(`^${sourceEnvVar}=.*$`, 'gm'), `${sourceEnvVar}=${sourceEnv[sourceEnvVar]}`);
-        // Removing duplicate variable and related comments in a source .env file,
-        // since source and target will be concatenated
-        let lineIndex = sourceLines.findIndex((line) => line.startsWith(sourceEnvVar));
-        // remove empty lines after the definition
-        while (sourceLines[lineIndex + 1] === '') {
-            sourceLines.splice(lineIndex + 1, 1);
-        }
-        // remove definition and comments
-        do {
-            sourceLines.splice(lineIndex, 1);
-            lineIndex--;
-        } while (lineIndex >= 0 && sourceLines[lineIndex].startsWith('#'));
-    });
-    sourceContent = sourceLines.join('\r\n');
-    // No variables left in a source
-    if (!sourceContent)
+const concatEnv = (targetContent, sourceContent) => {
+    const env = (0, dotenv_1.parse)(sourceContent);
+    if (env &&
+        Object.keys(env).length > 0 &&
+        Object.keys(env).every((value) => targetContent.includes(value))) {
+        // Don't add if the target already contains every .env value
         return targetContent;
+    }
     // NOTE we are enforcing CRLF for the repo in .gitattributes, so match it here
     const eol = '\r\n';
     return targetContent + eol + sourceContent;
 };
-exports.mergeEnv = mergeEnv;
+exports.concatEnv = concatEnv;
 /**
  * @param {string} sourceFileContent transformed version of our template
  * @param {string} targetFilePath user's file path
@@ -242,8 +221,8 @@ const transform = (templatePath, answers, options = {}) => __awaiter(void 0, voi
                 // read the current .env and the template .env (rendered with ejs)
                 const currentDotEnv = fs_extra_1.default.readFileSync(path_1.default.resolve(process.cwd(), pathToNewFile), 'utf8');
                 const templateDotEnv = yield (0, ejs_1.renderFile)(path_1.default.resolve(pathToTemplate), ejsData);
-                // merge them and set the result to str which will then go through diff
-                str = (0, exports.mergeEnv)(currentDotEnv, templateDotEnv);
+                // concatenate them and set the result to str which will then go through diff
+                str = (0, exports.concatEnv)(currentDotEnv, templateDotEnv);
             }
             str = str !== null && str !== void 0 ? str : (yield (0, ejs_1.renderFile)(path_1.default.resolve(pathToTemplate), ejsData));
             if (!answers.force) {

package/dist/templates/angular/README.md

@@ -1,8 +1,5 @@
 # Sitecore JSS Angular Sample Application
 
-<!---
-@TODO: Update to next version docs before release
--->
 [Documentation (Experience Platform)](https://doc.sitecore.com/xp/en/developers/hd/21/sitecore-headless-development/sitecore-javascript-rendering-sdk--jss--for-angular.html)
 
 

package/dist/templates/angular/angular.json

@@ -46,7 +46,12 @@
               ],
               "baseHref": "/",
               "aot": true,
-              "optimization": true,
+              "//": [
+                "You might want to adjust the optimization entry to workaround a bug with bootstrap warnings caused by Angular",
+                "The warnings may occur during build and when running connected mode. Check below for possible fixes.",
+                "https://github.com/ng-bootstrap/ng-bootstrap/issues/4306"
+              ],
+              "optimization": "true",
               "outputHashing": "all",
               "sourceMap": false,
               "namedChunks": false,

package/dist/templates/angular/package.json

@@ -1,6 +1,6 @@
 {
   "name": "<%- appName %>",
-  "version": "21.3.0-canary",
+  "version": "21.3.1",
   "description": "Application utilizing Sitecore JavaScript Services and Angular (angular-cli).",
   "config": {
     "appName": "<%- appName %>",
@@ -64,10 +64,10 @@
     "@apollo/client": "^3.3.12",
     "@ngx-translate/core": "~14.0.0",
     "@ngx-translate/http-loader": "~7.0.0",
-    "@sitecore-jss/sitecore-jss-angular": "~21.3.0-canary",
+    "@sitecore-jss/sitecore-jss-angular": "~21.3.1",
     "apollo-angular": "~4.2.1",
     "bootstrap": "^5.3.1",
-    "core-js": "~3.9.1",
+    "core-js": "~3.32.1",
     "graphql": "15.5.0",
     "graphql-tag": "~2.11.0",
     "lodash": "^4.17.21",
@@ -86,9 +86,9 @@
     "@angular/cli": "~15.2.9",
     "@angular/compiler-cli": "~15.2.9",
     "@angular/language-service": "~15.2.9",
-    "@sitecore-jss/sitecore-jss-angular-schematics": "~21.3.0-canary",
-    "@sitecore-jss/sitecore-jss-cli": "~21.3.0-canary",
-    "@sitecore-jss/sitecore-jss-dev-tools": "~21.3.0-canary",
+    "@sitecore-jss/sitecore-jss-angular-schematics": "~21.3.1",
+    "@sitecore-jss/sitecore-jss-cli": "~21.3.1",
+    "@sitecore-jss/sitecore-jss-dev-tools": "~21.3.1",
     "@types/isomorphic-fetch": "0.0.35",
     "@types/jasmine": "~3.6.7",
     "@types/jasminewd2": "~2.0.8",

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

@@ -19,7 +19,6 @@ export function generateConfig(configOverrides?: { [key: string]: unknown }, out
     sitecoreLayoutServiceConfig: 'jss',
     defaultLanguage: 'en',
     defaultServerRoute: '/',
-    layoutServiceConfigurationName: 'default',
   };
 
   if (!outputPath) {

package/dist/templates/angular/src/app/lib/layout-service-factory.ts

@@ -18,7 +18,7 @@ export class LayoutServiceFactory {
           apiHost: environment.sitecoreApiHost,
           apiKey: environment.sitecoreApiKey,
           siteName: environment.jssAppName,
-          configurationName: environment.layoutServiceConfigurationName,
+          configurationName: 'default',
         });
   }
 }

package/dist/templates/angular/src/tsconfig.server.json

@@ -3,7 +3,7 @@
   "compilerOptions": {
     "outDir": "../out-tsc/app",
     "baseUrl": "./",
-    "target": "es2016",
+    "target": "ES2022",
     "module": "commonjs",
     "newLine": "LF",
     "types": []

package/dist/templates/nextjs/README.md

@@ -1,8 +1,5 @@
 # Sitecore JSS Next.js Sample Application
 
-<!---
-@TODO: Update to next version docs before release
--->
 [Documentation (Experience Platform)](https://doc.sitecore.com/xp/en/developers/hd/21/sitecore-headless-development/sitecore-javascript-rendering-sdk--jss--for-next-js.html)
 
 [Documentation (XM Cloud)](https://doc.sitecore.com/xmc/en/developers/xm-cloud/sitecore-javascript-rendering-sdk--jss--for-next-js.html)

package/dist/templates/nextjs/package.json

@@ -1,7 +1,7 @@
 {
   "name": "<%- appName %>",
   "description": "Application utilizing Sitecore JavaScript Services and Next.js",
-  "version": "21.3.0-canary",
+  "version": "21.3.1",
   "private": true,
   "config": {
     "appName": "<%- appName %>",
@@ -29,7 +29,7 @@
   },
   "license": "Apache-2.0",
   "dependencies": {
-    "@sitecore-jss/sitecore-jss-nextjs": "~21.3.0-canary",
+    "@sitecore-jss/sitecore-jss-nextjs": "~21.3.1",
     "graphql": "~15.8.0",
     "graphql-tag": "^2.12.6",
     "next": "^13.1.6",
@@ -46,8 +46,8 @@
     "@graphql-codegen/typescript-operations": "^2.5.12",
     "@graphql-codegen/typescript-resolvers": "^2.7.12",
     "@graphql-typed-document-node/core": "^3.1.1",
-    "@sitecore-jss/sitecore-jss-cli": "~21.3.0-canary",
-    "@sitecore-jss/sitecore-jss-dev-tools": "~21.3.0-canary",
+    "@sitecore-jss/sitecore-jss-cli": "~21.3.1",
+    "@sitecore-jss/sitecore-jss-dev-tools": "~21.3.1",
     "@types/node": "^18.11.18",
     "@types/react": "^18.0.12",
     "@types/react-dom": "^18.0.5",

package/dist/templates/nextjs/scripts/config/index.ts

@@ -11,7 +11,6 @@ export interface JssConfig extends Record<string, string | undefined> {
   graphQLEndpointPath?: string;
   defaultLanguage?: string;
   graphQLEndpoint?: string;
-  layoutServiceConfigurationName?: string;
 }
 
 export interface ConfigPlugin {

package/dist/templates/nextjs/scripts/config/plugins/fallback.ts

@@ -11,8 +11,7 @@ class FallbackPlugin implements ConfigPlugin {
   async exec(config: JssConfig) {
     return Object.assign({}, config, {
       defaultLanguage: config.defaultLanguage || 'en',
-      sitecoreApiKey: config.sitecoreApiKey || 'no-api-key-set',
-      layoutServiceConfigurationName: config.layoutServiceConfigurationName || 'default',
+      sitecoreApiKey: config.sitecoreApiKey || 'no-api-key-set'
     });
   }
 }

package/dist/templates/nextjs/scripts/generate-component-builder/index.ts

@@ -1,11 +1,10 @@
 // eslint-disable-next-line @typescript-eslint/no-var-requires
 const plugins = require('scripts/temp/generate-component-builder-plugins');
-import { PackageDefinition, ComponentFile } from '@sitecore-jss/sitecore-jss-dev-tools';
+import { PackageDefinition } from '@sitecore-jss/sitecore-jss-dev-tools';
 
 export interface ComponentBuilderPluginConfig {
   watch?: boolean;
   packages?: PackageDefinition[];
-  components?: ComponentFile[];
 }
 
 export interface ComponentBuilderPlugin {

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

@@ -11,7 +11,7 @@ class ComponentBuilderPlugin implements ComponentBuilderPluginType {
   order = 9999;
 
   exec(config: ComponentBuilderPluginConfig) {
-    generateComponentBuilder(config);
+    generateComponentBuilder({ packages: config.packages, watch: config.watch });
 
     return config;
   }

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

@@ -17,7 +17,6 @@ const defaultConfig: JssConfig = {
   graphQLEndpointPath: process.env[`${constantCase('graphQLEndpointPath')}`],
   defaultLanguage: process.env[`${constantCase('defaultLanguage')}`],
   graphQLEndpoint: process.env[`${constantCase('graphQLEndpoint')}`],
-  layoutServiceConfigurationName: process.env[`${constantCase('layoutServiceConfigurationName')}`],
 };
 
 generateConfig(defaultConfig);

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

@@ -1,6 +1,4 @@
 import { ModuleType, generatePlugins } from '@sitecore-jss/sitecore-jss-dev-tools';
-import generateComponentSrc from 'scripts/templates/component-src';
-import chalk from 'chalk';
 
 generatePlugins({
   distPath: 'scripts/temp/scaffold-component-plugins.ts',
@@ -30,8 +28,6 @@ export interface ScaffoldComponentPluginConfig {
   [key: string]: unknown;
   componentName: string;
   componentPath: string;
-  componentTemplateGenerator: (componentName: string) => string;
-  args: string[];
   nextSteps: string[];
 }
 
@@ -49,9 +45,8 @@ export interface ScaffoldComponentPlugin {
 
 // 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 nameParamFormat = new RegExp(/^((?:[\w-]+\/)*)([A-Z][\w-]+)$/);
 const componentArg = process.argv[2];
-const args = process.argv.slice(3);
 
 if (!componentArg) {
   throw 'Component name was not passed. Usage: jss scaffold <ComponentName>';
@@ -67,18 +62,9 @@ dashes, or underscores. If specifying a path, it must be relative to src/compone
 const defaultConfig: ScaffoldComponentPluginConfig = {
   componentPath: regExResult[1],
   componentName: regExResult[2],
-  componentTemplateGenerator: generateComponentSrc,
-  args: args,
   nextSteps: [],
 };
 
-// default entry in next steps
-defaultConfig.nextSteps.push(
-  chalk.green(`
-Scaffolding of ${defaultConfig.componentName} complete.
-Next steps:`)
-);
-
 const config = (Object.values(plugins) as ScaffoldComponentPlugin[])
   .sort((p1, p2) => p1.order - p2.order)
   .reduce((config, plugin) => plugin.exec(config), defaultConfig);

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

@@ -1,19 +1,21 @@
 import path from 'path';
 import { scaffoldFile } from '@sitecore-jss/sitecore-jss-dev-tools';
+import generateComponentSrc from 'scripts/templates/component-src';
 import { ScaffoldComponentPlugin, ScaffoldComponentPluginConfig } from '..';
 
 /**
  * Generates the component file.
  */
 class ComponentPlugin implements ScaffoldComponentPlugin {
-  order = 99;
+  order = 0;
+
+  componentRootPath = 'src/components';
 
   exec(config: ScaffoldComponentPluginConfig) {
     const { componentName, componentPath } = config;
     const filename = `${componentName}.tsx`;
-    const componentRoot = componentPath.startsWith('src/') ? '' : 'src/components';
-    const outputFilePath = path.join(componentRoot, componentPath, filename);
-    const template = config.componentTemplateGenerator(componentName);
+    const outputFilePath = path.join(this.componentRootPath, componentPath, filename);
+    const template = generateComponentSrc(componentName);
 
     const componentOutputPath = scaffoldFile(outputFilePath, template);
 

package/dist/templates/nextjs/scripts/scaffold-component/plugins/next-steps.ts

@@ -12,16 +12,12 @@ class NextStepsPlugin implements ScaffoldComponentPlugin {
 
     if (componentOutputPath) {
       config.nextSteps.push(
+        chalk.green(`
+Scaffolding of ${componentName} complete.
+Next steps:`),
         `* Implement the React component in ${chalk.green(componentOutputPath)}`
       );
     }
-    if (!(componentOutputPath as string).includes('src\\components')) {
-      config.nextSteps.push(
-        `* ${chalk.green(
-          componentName
-        )} has been created outside src\\components. Ensure it is registered via scripts\\generate-component-builder.`
-      );
-    }
 
     return config;
   }

package/dist/templates/nextjs/src/lib/layout-service-factory.ts

@@ -25,7 +25,7 @@ export class LayoutServiceFactory {
           apiHost: config.sitecoreApiHost,
           apiKey: config.sitecoreApiKey,
           siteName,
-          configurationName: config.layoutServiceConfigurationName,
+          configurationName: 'default',
         });
   }
 }

package/dist/templates/nextjs/src/lib/middleware/index.ts

@@ -1,6 +1,5 @@
 import { NextResponse } from 'next/server';
 import type { NextFetchEvent, NextRequest } from 'next/server';
-import { debug } from '@sitecore-jss/sitecore-jss-nextjs/middleware';
 import * as plugins from 'temp/middleware-plugins';
 
 export interface MiddlewarePlugin {
@@ -20,15 +19,7 @@ export default async function middleware(
 ): Promise<NextResponse> {
   const response = NextResponse.next();
 
-  debug.common('next middleware start');
-
-  const start = Date.now();
-
-  const finalRes = await (Object.values(plugins) as MiddlewarePlugin[])
+  return (Object.values(plugins) as MiddlewarePlugin[])
     .sort((p1, p2) => p1.order - p2.order)
     .reduce((p, plugin) => p.then((res) => plugin.exec(req, res, ev)), Promise.resolve(response));
-
-  debug.common('next middleware end in %dms', Date.now() - start);
-
-  return finalRes;
 }

package/dist/templates/nextjs/src/lib/page-props-factory/index.ts

@@ -1,5 +1,4 @@
 import { GetServerSidePropsContext, GetStaticPropsContext } from 'next';
-import { debug } from '@sitecore-jss/sitecore-jss-nextjs';
 import { SitecorePageProps } from 'lib/page-props';
 import * as plugins from 'temp/page-props-factory-plugins';
 
@@ -36,9 +35,6 @@ export class SitecorePagePropsFactory {
   public async create(
     context: GetServerSidePropsContext | GetStaticPropsContext
   ): Promise<SitecorePageProps> {
-    const startTimestamp = Date.now();
-    debug.common('page-props-factory start');
-
     const extendedProps = await (Object.values(plugins) as Plugin[])
       .sort((p1, p2) => p1.order - p2.order)
       .reduce(async (result, plugin) => {
@@ -47,8 +43,6 @@ export class SitecorePagePropsFactory {
         return newProps;
       }, Promise.resolve({} as SitecorePageProps));
 
-    debug.common('page-props-factory end in %dms', Date.now() - startTimestamp);
-
     return extendedProps;
   }
 }

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

@@ -1,4 +1,4 @@
-import { ComponentPropsService, ComponentPropsError } from '@sitecore-jss/sitecore-jss-nextjs';
+import { ComponentPropsService } from '@sitecore-jss/sitecore-jss-nextjs';
 import { SitecorePageProps } from 'lib/page-props';
 import { GetServerSidePropsContext, GetStaticPropsContext } from 'next';
 import { moduleFactory } from 'temp/componentBuilder';
@@ -31,20 +31,6 @@ class ComponentPropsPlugin implements Plugin {
       });
     }
 
-    const errors = Object.keys(props.componentProps)
-      .map(id => {
-        const component = props.componentProps[id] as ComponentPropsError;
-
-        return component.error
-          ? `\nUnable to get component props for ${component.componentName} (${id}): ${component.error}`
-          : '';
-      })
-      .join('');
-
-    if (errors.length) {
-      throw new Error(errors);
-    }
-
     return props;
   }
 }

package/dist/templates/nextjs/src/pages/api/editing/data/[key].ts

@@ -1,4 +1,5 @@
 import { EditingDataMiddleware } from '@sitecore-jss/sitecore-jss-nextjs/editing';
+
 /**
  * This Next.js API route is used to handle Sitecore editor data storage and retrieval by key
  * on serverless deployment architectures (e.g. Vercel) via the `ServerlessEditingDataService`.

package/dist/templates/nextjs/src/pages/api/editing/render.ts

@@ -14,12 +14,6 @@ import { EditingRenderMiddleware } from '@sitecore-jss/sitecore-jss-nextjs/editi
  *  5. Return the rendered page HTML to the Sitecore editor
  */
 
-/**
- * For Vercel deployments: 
- * if you experience crashes in editing, you may need to use VercelEditingDataCache or a custom Redis data cache implementation with EditingRenderMiddleware
- * Please refer to documentation for a detailed guide.
- */
-
 // Bump body size limit (1mb by default) and disable response limit for Sitecore editor payloads
 // See https://nextjs.org/docs/api-routes/request-helpers#custom-config
 export const config = {

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

@@ -4,7 +4,7 @@
     "nprogress": "~0.2.0"
   },
   "devDependencies": {
-    "@sitecore-jss/sitecore-jss-dev-tools": "~21.3.0-canary",
+    "@sitecore-jss/sitecore-jss-dev-tools": "~21.2.2",
     "@types/nprogress": "^0.2.0"
   },
   "scripts": {

package/dist/templates/nextjs-styleguide/scripts/scaffold-component/plugins/{next-steps-styleguide.ts → next-steps.ts}

@@ -4,11 +4,17 @@ import { ScaffoldComponentPlugin, ScaffoldComponentPluginConfig } from '..';
 /**
  * Set next steps.
  */
-class NextStepsStyleguidePlugin implements ScaffoldComponentPlugin {
-  order = 101;
+class NextStepsPlugin implements ScaffoldComponentPlugin {
+  order = 100;
 
   exec(config: ScaffoldComponentPluginConfig) {
-    const { manifestOutputPath, componentName } = config;
+    const { componentOutputPath, manifestOutputPath, componentName } = config;
+
+    config.nextSteps.push(
+      chalk.green(`
+Scaffolding of ${componentName} complete.
+Next steps:`)
+    );
 
     if (manifestOutputPath) {
       config.nextSteps.push(`* Define the component's data in ${chalk.green(manifestOutputPath)}`);
@@ -19,6 +25,9 @@ class NextStepsStyleguidePlugin implements ScaffoldComponentPlugin {
         )}, or create the rendering item and datasource template yourself.`
       );
     }
+    if (componentOutputPath) {
+      config.nextSteps.push(`* Implement the React component in ${chalk.green(componentOutputPath)}`);
+    }
     if (manifestOutputPath) {
       config.nextSteps.push(
         `* Add the component to a route layout (/data/routes) and test it with ${chalk.green(
@@ -38,4 +47,4 @@ class NextStepsStyleguidePlugin implements ScaffoldComponentPlugin {
   }
 }
 
-export const nextStepsStyleguidePlugin = new NextStepsStyleguidePlugin();
+export const nextStepsPlugin = new NextStepsPlugin();

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

@@ -7,6 +7,6 @@
     "sass-alias": "^1.0.5"
   },
   "scripts": {
-    "scaffold": "ts-node --project tsconfig.scripts.json scripts/scaffold-component/index.ts"
+    "scaffold": "ts-node --project tsconfig.scripts.json scripts/scaffold-component.ts"
   }
 }

package/dist/templates/nextjs-sxa/src/assets/basic/_component.scss

@@ -16,33 +16,3 @@
     }
   }
 }
-
-.hero-banner {
-  .component-content {
-    background-position: center;
-    background-repeat: no-repeat;
-    background-size: cover;
-    height: 800px;
-
-    @include respond-to(mobile-large) {
-      height: 300px;
-    }
-  }
-  .sc-image-wrapper {
-    opacity: 0;
-  }
-  &.scEnabledChrome {
-    &.hero-banner-empty {
-      .sc-image-wrapper {
-        display: block;
-        width: 100%;
-  
-        .scEmptyImage {
-          max-height: 800px;
-          max-width: 100%;
-          width: 100%;
-        }
-      }
-    }
-  }
-}

package/dist/templates/nextjs-sxa/src/assets/sass/_app.scss

@@ -100,7 +100,3 @@ ul li {
   color:#fff;
   max-width: 500px;
 }
-
-.editing-mode {
-  padding: 0 8px;
-}

package/dist/templates/nextjs-sxa/src/assets/sass/components/image/_image-banner.scss

@@ -0,0 +1,15 @@
+.hero-banner {
+  .component-content {
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    height: 800px;
+
+    @include respond-to(mobile-large) {
+      height: 300px;
+    }
+  }
+  .sc-image-wrapper {
+    opacity: 0;
+  }
+}

package/dist/templates/nextjs-sxa/src/assets/sass/components/image/index.scss

@@ -1 +1,2 @@
 @import "image-default-size";
+@import "image-banner";

package/dist/templates/nextjs-sxa/src/components/Image.tsx

@@ -30,11 +30,6 @@ const ImageDefault = (props: ImageProps): JSX.Element => (
 
 export const Banner = (props: ImageProps): JSX.Element => {
   const { sitecoreContext } = useSitecoreContext();
-  const isPageEditing = sitecoreContext.pageEditing;
-  const classHeroBannerEmpty =
-    isPageEditing && props.fields?.Image?.value?.class === 'scEmptyImage'
-      ? 'hero-banner-empty'
-      : '';
   const backgroundStyle = { backgroundImage: `url('${props?.fields?.Image?.value?.src}')` };
   const modifyImageProps = {
     ...props.fields.Image,
@@ -45,10 +40,7 @@ export const Banner = (props: ImageProps): JSX.Element => {
   const id = props.params.RenderingIdentifier;
 
   return (
-    <div
-      className={`component hero-banner ${props.params.styles} ${classHeroBannerEmpty}`}
-      id={id ? id : undefined}
-    >
+    <div className={`component hero-banner ${props.params.styles}`} id={id ? id : undefined}>
       <div className="component-content sc-sxa-image-hero-banner" style={backgroundStyle}>
         {sitecoreContext.pageEditing ? <JssImage field={modifyImageProps} /> : ''}
       </div>
@@ -66,7 +58,7 @@ export const Default = (props: ImageProps): JSX.Element => {
     return (
       <div className={`component image ${props.params.styles}`} id={id ? id : undefined}>
         <div className="component-content">
-          {sitecoreContext.pageState === 'edit' || !props.fields.TargetUrl?.value?.href ? (
+          {sitecoreContext.pageState === 'edit' ? (
             <Image />
           ) : (
             <JssLink field={props.fields.TargetUrl}>

package/dist/templates/nextjs-sxa/src/pages/api/robots.ts

@@ -4,7 +4,8 @@ import { siteResolver } from 'lib/site-resolver';
 import config from 'temp/config';
 
 const robotsApi = async (req: NextApiRequest, res: NextApiResponse): Promise<void> => {
-  res.setHeader('Content-Type', 'text/plain');
+  // Ensure response is text/html
+  res.setHeader('Content-Type', 'text/html;charset=utf-8');
 
   // Resolve site based on hostname
   const hostName = req.headers['host']?.split(':')[0] || 'localhost';

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

@@ -2,10 +2,6 @@
 
 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/21/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.

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

@@ -1,6 +1,6 @@
 {
   "name": "node-headless-ssr-experience-edge-sample",
-  "version": "21.3.0-canary",
+  "version": "21.3.1",
   "description": "Node server-side-rendering sample for running JSS apps under Node hosting using Experience Edge",
   "scripts": {
     "start": "ts-node ./src/index.ts"
@@ -23,7 +23,7 @@
   "homepage": "https://jss.sitecore.com",
   "license": "Apache-2.0",
   "dependencies": {
-    "@sitecore-jss/sitecore-jss": "~21.3.0-canary",
+    "@sitecore-jss/sitecore-jss": "~21.3.1",
     "compression": "^1.7.4",
     "express": "^4.18.2",
     "dotenv": "^16.0.3"

package/dist/templates/node-headless-ssr-proxy/README.md

@@ -4,10 +4,6 @@ This is a sample setup showing one one of how you can configure rendering server
 
 The setup is using `sitecore-jss-proxy` that enables request proxying to Sitecore CD along with the http cookies to enable tracking, personalization and contact identification.
 
-<!---
-@TODO: Update to next version docs before release
--->
-
 [Documentation (Experience Platform)](https://doc.sitecore.com/xp/en/developers/hd/21/sitecore-headless-development/walkthrough--rendering-a-jss-app-server-side-using-the-headless-jss-proxy.html)
 
 > This is a sample setup that is not officially supported by Sitecore.

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

@@ -1,6 +1,6 @@
 {
   "name": "node-headless-ssr-proxy-sample",
-  "version": "21.3.0-canary",
+  "version": "21.3.1",
   "description": "Node server-side-rendering proxy sample for running JSS apps under Node hosting",
   "scripts": {
     "start": "ts-node ./src/index.ts"
@@ -23,8 +23,8 @@
   "homepage": "https://jss.sitecore.com",
   "license": "Apache-2.0",
   "dependencies": {
-    "@sitecore-jss/sitecore-jss": "~21.3.0-canary",
-    "@sitecore-jss/sitecore-jss-proxy": "~21.3.0-canary",
+    "@sitecore-jss/sitecore-jss": "~21.3.1",
+    "@sitecore-jss/sitecore-jss-proxy": "~21.3.1",
     "agentkeepalive": "^4.2.1",
     "compression": "~1.7.4",
     "express": "~4.18.2",

package/dist/templates/react/README.md

@@ -1,8 +1,5 @@
 # Sitecore JSS React Sample Application
 
-<!---
-@TODO: Update to next version docs before release
--->
 [Documentation (Experience Platform)](https://doc.sitecore.com/xp/en/developers/hd/21/sitecore-headless-development/sitecore-javascript-rendering-sdk--jss--for-react.html)
 
 ## Disconnected Sitecore-less Development

package/dist/templates/react/package.json

@@ -1,7 +1,7 @@
 {
   "name": "<%- appName %>",
   "description": "Application utilizing Sitecore JavaScript Services and React (create-react-app).",
-  "version": "21.3.0-canary",
+  "version": "21.3.1",
   "private": true,
   "config": {
     "appName": "<%- appName %>",
@@ -32,7 +32,7 @@
   "license": "Apache-2.0",
   "dependencies": {
     "@apollo/client": "^3.7.1",
-    "@sitecore-jss/sitecore-jss-react": "~21.3.0-canary",
+    "@sitecore-jss/sitecore-jss-react": "~21.3.1",
     "axios": "^1.2.0",
     "bootstrap": "^5.2.3",
     "cross-fetch": "^3.1.5",
@@ -57,9 +57,9 @@
     "@babel/preset-env": "^7.20.2",
     "@babel/preset-react": "^7.18.6",
     "@babel/register": "~7.18.9",
-    "@sitecore-jss/sitecore-jss-cli": "~21.3.0-canary",
-    "@sitecore-jss/sitecore-jss-dev-tools": "~21.3.0-canary",
-    "@sitecore-jss/sitecore-jss-rendering-host": "~21.3.0-canary",
+    "@sitecore-jss/sitecore-jss-cli": "~21.3.1",
+    "@sitecore-jss/sitecore-jss-dev-tools": "~21.3.1",
+    "@sitecore-jss/sitecore-jss-rendering-host": "~21.3.1",
     "babel-loader": "~9.1.0",
     "babel-preset-react-app": "~10.0.1",
     "chalk": "~4.1.2",

package/dist/templates/react/scripts/config/plugins/fallback.js

@@ -11,7 +11,6 @@ class FallbackPlugin {
       defaultLanguage: config.defaultLanguage || 'en',
       sitecoreApiKey: config.sitecoreApiKey || 'no-api-key-set',
       jssAppName: config.jssAppName || 'Unknown',
-      layoutServiceConfigurationName: config.layoutServiceConfigurationName || 'default',
     });
   }
 }

package/dist/templates/react/scripts/generate-component-builder/plugins/component-builder.js

@@ -7,7 +7,7 @@ class ComponentBuilderPlugin {
   order = 9999;
 
   exec(config) {
-    generateComponentBuilder(config);
+    generateComponentBuilder({ packages: config.packages, watch: config.watch });
   }
 }
 

package/dist/templates/react/scripts/generate-config.js

@@ -16,7 +16,6 @@ const defaultConfig = {
   graphQLEndpointPath: process.env[`${constantCase('reactAppGraphQLEndpointPath')}`],
   defaultLanguage: process.env[`${constantCase('reactAppDefaultLanguage')}`],
   graphQLEndpoint: process.env[`${constantCase('reactAppGraphQLEndpoint')}`],
-  layoutServiceConfigurationName: process.env[`${constantCase('reactAppLayoutServiceConfigurationName')}`],
 };
 
 generateConfig()

package/dist/templates/react/src/lib/layout-service-factory.js

@@ -17,7 +17,7 @@ export class LayoutServiceFactory {
           apiHost: config.sitecoreApiHost,
           apiKey: config.sitecoreApiKey,
           siteName: config.jssAppName,
-          configurationName: config.layoutServiceConfigurationName,
+          configurationName: 'default',
         });
   }
 }

package/dist/templates/react-native/README.MD

@@ -1,8 +1,5 @@
 # Sitecore JSS React Native Sample Application
 
-<!---
-@TODO: Update to next version docs before release
--->
 [Documentation (Experience Platform)](https://doc.sitecore.com/xp/en/developers/hd/21/sitecore-headless-development/sitecore-javascript-rendering-sdk--jss--for-react-native.html)
 
 ## Note

package/dist/templates/react-native/package.json

@@ -1,6 +1,6 @@
 {
   "name": "<%- appName %>",
-  "version": "21.3.0-canary",
+  "version": "21.3.1",
   "description": "A basic React Native app utilizing Sitecore JavaScript Services",
   "config": {
     "appName": "<%- appName %>",
@@ -27,7 +27,7 @@
   },
   "dependencies": {
     "@react-native-community/masked-view": "^0.1.10",
-    "@sitecore-jss/sitecore-jss-react-native": "~21.3.0-canary",
+    "@sitecore-jss/sitecore-jss-react-native": "~21.3.1",
     "prop-types": "^15.6.0",
     "react": "16.13.1",
     "react-native": "^0.63.4",
@@ -41,8 +41,8 @@
   },
   "private": true,
   "devDependencies": {
-    "@sitecore-jss/sitecore-jss-cli": "~21.3.0-canary",
-    "@sitecore-jss/sitecore-jss-dev-tools": "~21.3.0-canary",
+    "@sitecore-jss/sitecore-jss-cli": "~21.3.1",
+    "@sitecore-jss/sitecore-jss-dev-tools": "~21.3.1",
     "babel-core": "^6.26.0",
     "babel-eslint": "^8.2.1",
     "babel-plugin-inline-replace-variables": "^1.3.1",

package/dist/templates/vue/README.md

@@ -1,8 +1,5 @@
 # Sitecore JSS Vue.js Sample Application
 
-<!---
-@TODO: Update to next version docs before release
--->
 [Documentation (Experience Platform)](https://doc.sitecore.com/xp/en/developers/hd/21/sitecore-headless-development/sitecore-javascript-rendering-sdk--jss--for-vue-js.html)
 
 ## Project setup

package/dist/templates/vue/package.json

@@ -1,6 +1,6 @@
 {
   "name": "<%- appName %>",
-  "version": "21.3.0-canary",
+  "version": "21.3.1",
   "description": "Application utilizing Sitecore JavaScript Services and Vue (vue-cli).",
   "private": true,
   "config": {
@@ -49,7 +49,7 @@
   "dependencies": {
     "@apollo/client": "^3.7.4",
     "@panter/vue-i18next": "~0.15.2",
-    "@sitecore-jss/sitecore-jss-vue": "~21.3.0-canary",
+    "@sitecore-jss/sitecore-jss-vue": "~21.3.1",
     "@vue/apollo-composable": "4.0.0-beta.2",
     "@vue/apollo-option": "^4.0.0-alpha.20",
     "@vue/apollo-ssr": "^4.0.0-alpha.18",
@@ -68,8 +68,8 @@
   "devDependencies": {
     "@babel/eslint-parser": "^7.19.1",
     "@babel/register": "7.18.9",
-    "@sitecore-jss/sitecore-jss-cli": "~21.3.0-canary",
-    "@sitecore-jss/sitecore-jss-dev-tools": "~21.3.0-canary",
+    "@sitecore-jss/sitecore-jss-cli": "~21.3.1",
+    "@sitecore-jss/sitecore-jss-dev-tools": "~21.3.1",
     "@vue/cli-plugin-babel": "~5.0.8",
     "@vue/cli-plugin-eslint": "~5.0.8",
     "@vue/cli-service": "~5.0.8",
@@ -81,14 +81,13 @@
     "cross-env": "~7.0.3",
     "dotenv": "^16.0.3",
     "eslint": "^8.32.0",
-    "eslint-plugin-prettier": "^5.0.0",
+    "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-vue": "~9.9.0",
     "eslint-plugin-yaml": "^0.5.0",
     "graphql-tag": "^2.12.6",
     "html-loader": "~1.3.2",
     "npm-run-all": "~4.1.5",
     "null-loader": "~4.0.1",
-    "prettier": "^3.0.0",
     "tslib": "2.5.1"
   }
 }

package/dist/templates/vue/scripts/generate-config.js

@@ -18,7 +18,6 @@ module.exports = function generateConfig(configOverrides) {
     sitecoreApiKey: 'no-api-key-set',
     sitecoreApiHost: '',
     jssAppName: 'Unknown',
-    layoutServiceConfigurationName: 'default',
   };
 
   // require + combine config sources

package/dist/templates/vue/src/lib/layout-service-factory.js

@@ -13,7 +13,7 @@ export class LayoutServiceFactory {
           apiHost: config.sitecoreApiHost,
           apiKey: config.sitecoreApiKey,
           siteName: config.jssAppName,
-          configurationName: config.layoutServiceConfigurationName,
+          configurationName: 'default',
         });
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-sitecore-jss",
-  "version": "21.3.0",
+  "version": "21.3.1",
   "description": "Sitecore JSS initializer",
   "bin": "./dist/index.js",
   "scripts": {
@@ -64,5 +64,5 @@
     "ts-node": "^10.9.1",
     "typescript": "~4.9.5"
   },
-  "gitHead": "a01a4693a0c1c4b58d74595a3591277b00e9d2cf"
+  "gitHead": "973fe436c7fe943ec07123b315fadbe72313a945"
 }

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

@@ -1,30 +0,0 @@
-import { ComponentBuilderPlugin, ComponentBuilderPluginConfig } from '..';
-
-/**
- * Provides custom components configuration
- */
-class ComponentsPlugin implements ComponentBuilderPlugin {
-  order = 0;
-
-  exec(config: ComponentBuilderPluginConfig) {
-    /**
-     * You can specify components which you want to import using custom path in format:
-     * {
-     *   path: string; // path to component
-     *   moduleName: string; // module name to import
-     *   componentName: 'component name'; // component rendering name
-     * }
-     *
-     * Or you can register all components from a path using the below approach:
-     * import { getComponentList } from '@sitecore-jss/sitecore-jss-dev-tools';
-     * ...
-     * const componentsPath = 'src/extra';
-     * config.components = getComponentList(componentsPath);
-     */
-    config.components = [];
-
-    return config;
-  }
-}
-
-export const componentsPlugin = new ComponentsPlugin();

package/dist/templates/nextjs/src/lib/next-config/plugins/cors-header.js

@@ -1,22 +0,0 @@
-const config = require('../../../temp/config');
-
-/**
- * @param {import('next').NextConfig} nextConfig
- */
-const corsHeaderPlugin = (nextConfig = {}) => {
-  if (!config.sitecoreApiHost) {
-    return nextConfig;
-  }
-  return Object.assign({}, nextConfig, {
-    async headers() {
-      return [
-        {
-          source: '/_next/:path*',
-          headers: [{ key: 'Access-Control-Allow-Origin', value: config.sitecoreApiHost }],
-        },
-      ];
-    },
-  });
-};
-
-module.exports = corsHeaderPlugin;

package/dist/templates/nextjs-sxa/scripts/config/plugins/sxa.ts

@@ -1,17 +0,0 @@
-import { ConfigPlugin, JssConfig } from '..';
-
-/**
- * This plugin will set configuration specific for SXA. 
- */
-class SXAPlugin implements ConfigPlugin {
-  // should come before fallback
-  order = 1;
-
-  async exec(config: JssConfig) {
-    return Object.assign({}, config, {
-      layoutServiceConfigurationName: 'sxa-jss',
-    });
-  }
-}
-
-export const sxaPlugin = new SXAPlugin();

package/dist/templates/nextjs-sxa/scripts/scaffold-component/plugins/byoc.ts

@@ -1,19 +0,0 @@
-import { ScaffoldComponentPlugin, ScaffoldComponentPluginConfig } from '..';
-import generateByocComponentSrc from 'scripts/templates/byoc-component-src'; 
-
-/**
- * Sets up generation for BYOC components
- */
-class ByocPlugin implements ScaffoldComponentPlugin {
-  order = 0;
-
-  exec(config: ScaffoldComponentPluginConfig) {
-    if (config.args.includes('--byoc')) {
-      config.componentTemplateGenerator = generateByocComponentSrc;
-    }
-
-    return config;
-  }
-}
-
-export const byocPlugin = new ByocPlugin();

package/dist/templates/nextjs-sxa/scripts/scaffold-component/plugins/next-steps-byoc.ts

@@ -1,20 +0,0 @@
-import { ScaffoldComponentPlugin, ScaffoldComponentPluginConfig } from '..';
-
-/**
- * Set next steps for BYOC component.
- */
-class NextStepsByocPlugin implements ScaffoldComponentPlugin {
-  order = 101;
-
-  exec(config: ScaffoldComponentPluginConfig) {
-    if (config.args.includes('--byoc')) {
-      config.nextSteps.push(
-        `* Modify component registration through FEAAS.External.registerComponent if needed`
-      );
-    }
-
-    return config;
-  }
-}
-
-export const nextStepsByocPlugin = new NextStepsByocPlugin();

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

@@ -1,49 +0,0 @@
-/**
- * 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 React from 'react';
-import * as FEAAS from '@sitecore-feaas/clientside/react';
-
-interface ${componentName}Props {
-  title: string;
-  columnsCount: number;
-}
-
-export const ${componentName} = (props: ${componentName}Props): JSX.Element => {
-  const columns: string[] = [];
-  for (let i = 0; i < props.columnsCount; i++) {
-    columns.push(\`Component Column \${i + 1}\`);
-  }
-  return (
-    <div className="container">
-      <h2>{props.title || 'BYOC Demo'}</h2>
-      <p>${componentName} Component</p>
-      <div className="row">
-        {columns.map((text, index) => (
-          <div key={index} className={\`col-sm-\${props.columnsCount}\`}>
-            {text}
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-};
-
-FEAAS.External.registerComponent(${componentName}, {
-  name: '${componentName}',
-  properties: {
-    title: {
-      type: 'string',
-    },
-    columnsCount: {
-      type: 'number',
-    },
-  },
-});
-`;
-}
-
-export default generateComponentSrc;

package/dist/templates/nextjs-sxa/src/components/BYOCWrapper.tsx

@@ -1,19 +0,0 @@
-import { BYOCProps, BYOCRenderer } from '@sitecore-jss/sitecore-jss-nextjs';
-import React from 'react';
-import * as FEAAS from '@sitecore-feaas/clientside/react';
-
-export const Default = (props: BYOCProps): JSX.Element => {
-  const styles = props.params?.styles?.trimEnd();
-  const id = props.params?.RenderingIdentifier;
-  const rendererProps = {
-    components: FEAAS.External.registered,
-    ...props,
-  };
-  return (
-    <div className={styles ? styles : undefined} id={id ? id : undefined}>
-      <div className="component-content">
-        <BYOCRenderer {...rendererProps} />
-      </div>
-    </div>
-  );
-};

package/dist/templates/nextjs-sxa/src/lib/page-props-factory/plugins/feaas-themes.ts

@@ -1,16 +0,0 @@
-import { SitecorePageProps } from 'lib/page-props';
-import { getFEAASLibraryStylesheetLinks } from '@sitecore-jss/sitecore-jss-nextjs';
-import { Plugin } from '..';
-
-class FEeaSThemesPlugin implements Plugin {
-  order = 2;
-
-  async exec(props: SitecorePageProps) {
-    // Collect FEAAS themes
-    props.headLinks.push(...getFEAASLibraryStylesheetLinks(props.layoutData));
-
-    return props;
-  }
-}
-
-export const feaasThemesPlugin = new FEeaSThemesPlugin();

package/dist/templates/react/scripts/generate-component-builder/plugins/components.js

@@ -1,28 +0,0 @@
-/**
- * Provides custom components configuration
- */
-class ComponentsPlugin {
-  order = 0;
-
-  exec(config) {
-    /**
-     * You can specify components which you want to import using custom path in format:
-     * {
-     *   path: string; // path to component
-     *   moduleName: string; // module name to import
-     *   componentName: 'component name'; // component rendering name
-     * }
-     *
-     * Or you can register all components from a path using the below approach:
-     * const { getComponentList } = require('@sitecore-jss/sitecore-jss-dev-tools');
-     * ...
-     * const componentsPath = 'src/extra';
-     * config.components = getComponentList(componentsPath);
-     */
-    config.components = [];
-
-    return config;
-  }
-}
-
-module.exports = new ComponentsPlugin();