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

package/dist/templates/{angular/src/app/routing → angular-sxp/src/app/routing/scripts}/visitor-identification/visitor-identification.component.ts

@@ -1,6 +1,6 @@
 import { Component, OnInit, OnDestroy } from '@angular/core';
 import { Subscription } from 'rxjs';
-import { JssContextService } from '../../jss-context.service';
+import { JssContextService } from '../../../jss-context.service';
 
 let emittedVI = false;
 
@@ -13,7 +13,13 @@ let emittedVI = false;
  */
 @Component({
   selector: 'app-visitor-identification',
-  template: `<meta *ngIf="visitorIdentificationTimestamp" name="VIcurrentDateTime" [content]="visitorIdentificationTimestamp" />`,
+  template: `
+    <meta
+      *ngIf="visitorIdentificationTimestamp"
+      name="VIcurrentDateTime"
+      [content]="visitorIdentificationTimestamp"
+    />
+  `,
 })
 export class VisitorIdentificationComponent implements OnInit, OnDestroy {
   visitorIdentificationTimestamp: number;
@@ -21,7 +27,7 @@ export class VisitorIdentificationComponent implements OnInit, OnDestroy {
   private contextSubscription: Subscription;
 
   // inject the JssContextService, which maintains the current Sitecore Context
-  constructor(private jssContext: JssContextService) { }
+  constructor(private jssContext: JssContextService) {}
 
   ngOnInit() {
     this.contextSubscription = this.jssContext.state.subscribe((state) => {

package/dist/templates/angular-sxp/src/graphql-fragment-types.ts

@@ -0,0 +1,219 @@
+/* eslint-disable */
+export default {
+  __schema: {
+    types: [
+      {
+        kind: 'INTERFACE',
+        name: 'ItemField',
+        possibleTypes: [
+          {
+            name: 'RichTextField',
+          },
+          {
+            name: 'NumberField',
+          },
+          {
+            name: 'MultilistField',
+          },
+          {
+            name: 'LookupField',
+          },
+          {
+            name: 'LinkField',
+          },
+          {
+            name: 'TextField',
+          },
+          {
+            name: 'IntegerField',
+          },
+          {
+            name: 'ImageField',
+          },
+          {
+            name: 'DateField',
+          },
+          {
+            name: 'CheckboxField',
+          },
+          {
+            name: 'NameValueListField',
+          },
+        ],
+      },
+      {
+        kind: 'INTERFACE',
+        name: 'Item',
+        possibleTypes: [
+          {
+            name: 'UnknownItem',
+          },
+          {
+            name: 'StyleguideComponentParamsRenderingParameters',
+          },
+          {
+            name: 'C__StandardTemplate',
+          },
+          {
+            name: 'C__Route',
+          },
+          {
+            name: 'RenderEngineType',
+          },
+          {
+            name: '<%- helper.getAppPrefix(appPrefix, appName, false) %>StyleguideTracking',
+          },
+          {
+            name: '<%- helper.getAppPrefix(appPrefix, appName, false) %>StyleguideSitecoreContext',
+          },
+          {
+            name: '<%- helper.getAppPrefix(appPrefix, appName, false) %>StyleguideSection',
+          },
+          {
+            name: '<%- helper.getAppPrefix(appPrefix, appName, false) %>StyleguideRouteFields',
+          },
+          {
+            name: '<%- helper.getAppPrefix(appPrefix, appName, false) %>StyleguideMultilingual',
+          },
+          {
+            name: '<%- helper.getAppPrefix(appPrefix, appName, false) %>StyleguideLayoutTabsTab',
+          },
+          {
+            name: '<%- helper.getAppPrefix(appPrefix, appName, false) %>StyleguideLayoutTabs',
+          },
+          {
+            name: '<%- helper.getAppPrefix(appPrefix, appName, false) %>StyleguideLayoutReuse',
+          },
+          {
+            name:
+              '<%- helper.getAppPrefix(appPrefix, appName, false) %>StyleguideItemLinkItemTemplate',
+          },
+          {
+            name: '<%- helper.getAppPrefix(appPrefix, appName, false) %>StyleguideFieldUsageText',
+          },
+          {
+            name:
+              '<%- helper.getAppPrefix(appPrefix, appName, false) %>StyleguideFieldUsageRichText',
+          },
+          {
+            name: '<%- helper.getAppPrefix(appPrefix, appName, false) %>StyleguideFieldUsageNumber',
+          },
+          {
+            name: '<%- helper.getAppPrefix(appPrefix, appName, false) %>StyleguideFieldUsageLink',
+          },
+          {
+            name:
+              '<%- helper.getAppPrefix(appPrefix, appName, false) %>StyleguideFieldUsageItemLink',
+          },
+          {
+            name: '<%- helper.getAppPrefix(appPrefix, appName, false) %>StyleguideFieldUsageImage',
+          },
+          {
+            name: '<%- helper.getAppPrefix(appPrefix, appName, false) %>StyleguideFieldUsageFile',
+          },
+          {
+            name: '<%- helper.getAppPrefix(appPrefix, appName, false) %>StyleguideFieldUsageDate',
+          },
+          {
+            name: '<%- helper.getAppPrefix(appPrefix, appName, false) %>StyleguideFieldUsageCustom',
+          },
+          {
+            name:
+              '<%- helper.getAppPrefix(appPrefix, appName, false) %>StyleguideFieldUsageContentList',
+          },
+          {
+            name:
+              '<%- helper.getAppPrefix(appPrefix, appName, false) %>StyleguideFieldUsageCheckbox',
+          },
+          {
+            name:
+              '<%- helper.getAppPrefix(appPrefix, appName, false) %>StyleguideExplanatoryComponent',
+          },
+          {
+            name:
+              '<%- helper.getAppPrefix(appPrefix, appName, false) %>StyleguideContentListItemTemplate',
+          },
+          {
+            name: '<%- helper.getAppPrefix(appPrefix, appName, false) %>StyleguideComponentParams',
+          },
+          {
+            name:
+              '<%- helper.getAppPrefix(appPrefix, appName, false) %>StyleguideAngularLazyLoading',
+          },
+          {
+            name: '<%- helper.getAppPrefix(appPrefix, appName, false) %>GraphQLIntegratedDemo',
+          },
+          {
+            name: '<%- helper.getAppPrefix(appPrefix, appName, false) %>GraphQLConnectedDemo',
+          },
+          {
+            name: '<%- helper.getAppPrefix(appPrefix, appName, false) %>ExampleCustomRouteType',
+          },
+          {
+            name: '<%- helper.getAppPrefix(appPrefix, appName, false) %>ContentBlock',
+          },
+          {
+            name: 'C__<%- helper.getAppPrefix(appPrefix, appName, false) %>AppRoute',
+          },
+          {
+            name: 'JsonRendering',
+          },
+          {
+            name: 'JavaScriptRendering',
+          },
+          {
+            name: 'JSSLayout',
+          },
+          {
+            name: 'App',
+          },
+        ],
+      },
+      {
+        kind: 'INTERFACE',
+        name: 'RenderingOptions',
+        possibleTypes: [
+          {
+            name: 'JsonRendering',
+          },
+          {
+            name: 'JavaScriptRendering',
+          },
+        ],
+      },
+      {
+        kind: 'INTERFACE',
+        name: 'Layout',
+        possibleTypes: [
+          {
+            name: 'JSSLayout',
+          },
+        ],
+      },
+      {
+        kind: 'INTERFACE',
+        name: '<%- helper.getAppPrefix(appPrefix, appName, false) %>AppRoute',
+        possibleTypes: [
+          {
+            name: '<%- helper.getAppPrefix(appPrefix, appName, false) %>ExampleCustomRouteType',
+          },
+          {
+            name: 'C__<%- helper.getAppPrefix(appPrefix, appName, false) %>AppRoute',
+          },
+        ],
+      },
+      {
+        kind: 'INTERFACE',
+        name: 'Caching',
+        possibleTypes: [
+          {
+            name: 'JsonRendering',
+          },
+          {
+            name: 'JavaScriptRendering',
+          },
+        ],
+      },
+    ],
+  },
+};

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

@@ -0,0 +1,8 @@
+
+# ========== XM Cloud Proxy ===========
+
+# Your XM Cloud Proxy hostname is needed to build the app and execute the client-side requests against the proxy server.
+PROXY_HOST=http://localhost:3001
+
+# Your XM Cloud Proxy server path is needed to build the app. The build output will be copied to the proxy server path.
+PROXY_BUILD_PATH=<%- proxyAppDestination %>/dist

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

@@ -0,0 +1,10 @@
+{
+  "config": {
+    "sitecoreDistPath": "/dist"
+  },
+  "scripts": {
+    "postbuild:server": "npm-run-all --serial prepare:build prepare:proxy-build",
+    "prepare:build": "move-cli ./dist/main.js ./dist/server.bundle.js",
+    "prepare:proxy-build": "ts-node --project src/tsconfig.webpack-server.json ./scripts/proxy-build.ts"
+  }
+}

package/dist/templates/angular-xmcloud/scripts/config/plugins/xmcloud.ts

@@ -0,0 +1,23 @@
+import { JssConfig } from 'lib/config';
+import { ConfigPlugin } from '..';
+import { constantCase } from 'constant-case';
+
+/**
+ * This plugin will set XM Cloud related config props.
+ */
+class XMCloudPlugin implements ConfigPlugin {
+  // should come after other plugins (but before fallback)
+  order = 10;
+
+  async exec(config: JssConfig) {
+    const proxyBuildPath = process.env[`${constantCase('proxyBuildPath')}`]?.replace(/\/$/, '');
+    const proxyHost = process.env[`${constantCase('proxyHost')}`];
+
+    return Object.assign({}, config, {
+      proxyBuildPath,
+      proxyHost,
+    });
+  }
+}
+
+export const xmcloudPlugin = new XMCloudPlugin();

package/dist/templates/angular-xmcloud/scripts/proxy-build.ts

@@ -0,0 +1,15 @@
+import { execSync } from 'child_process';
+import { environment } from '../src/environments/environment';
+
+// Executed at the end of the build process (jss build) to move the build output to the proxy build path
+
+try {
+  console.log('Moving build output to proxy build path:', environment.proxyBuildPath);
+
+  execSync(`del-cli ${environment.proxyBuildPath} --force`, { stdio: 'inherit' });
+  execSync(`move-cli ./dist ${environment.proxyBuildPath}`, { stdio: 'inherit' });
+
+  console.log('Proxy build prepared successfully!');
+} catch (error) {
+  console.error('Error preparing proxy build:', error);
+}

package/dist/templates/angular-xmcloud/src/app/lib/config.ts

@@ -0,0 +1,15 @@
+/*
+ * Represents the type of config object available within the generated /environments/environment.js
+ */
+export interface JssConfig extends Record<string, string | boolean | undefined> {
+  production?: false;
+  sitecoreApiKey?: string;
+  sitecoreApiHost?: string;
+  sitecoreSiteName?: string;
+  defaultLanguage?: string;
+  graphQLEndpoint?: string;
+  graphQLEndpointPath?: string;
+  defaultServerRoute?: string;
+  proxyBuildPath?: string;
+  proxyHost?: string;
+}

package/dist/templates/angular-xmcloud/src/app/lib/graphql-client-factory.ts

@@ -0,0 +1,44 @@
+import {
+  GraphQLRequestClientFactoryConfig,
+  GraphQLRequestClient,
+} from '@sitecore-jss/sitecore-jss-angular';
+import { environment as env } from '../../environments/environment';
+
+// The GraphQLRequestClientFactory serves as the central hub for executing GraphQL requests within the application
+
+/**
+ * Creates a new GraphQLRequestClientFactory instance
+ * @returns GraphQLRequestClientFactory instance
+ */
+export const createGraphQLClientFactory = () => {
+  let clientConfig: GraphQLRequestClientFactoryConfig;
+
+  // If we are in a production environment we are going to use Node XM Cloud proxy
+  if (env.production === 'true') {
+    if (env.proxyHost && env.sitecoreApiKey && env.graphQLEndpoint) {
+      // Server side requests should go directly to the Sitecore, browser requests should go through the proxy.
+      clientConfig = {
+        endpoint:
+          typeof window === 'undefined'
+            ? env.graphQLEndpoint
+            : `${env.proxyHost}${env.graphQLEndpointPath}`,
+        apiKey: env.sitecoreApiKey,
+      };
+    } else {
+      throw new Error('Please configure your proxyHost, sitecoreApiKey, graphQLEndpoint.');
+    }
+  } else {
+    if (env.graphQLEndpoint && env.sitecoreApiKey) {
+      clientConfig = {
+        endpoint: env.graphQLEndpoint,
+        apiKey: env.sitecoreApiKey,
+      };
+    } else {
+      throw new Error('Please configure your graphQLEndpoint and sitecoreApiKey.');
+    }
+  }
+
+  return GraphQLRequestClient.createClientFactory(clientConfig);
+};
+
+export const clientFactory = createGraphQLClientFactory();

package/dist/templates/nextjs/next.config.js

@@ -40,6 +40,11 @@ const nextConfig = {
         hostname: 'edge*.**',
         port: '',
       },
+      {
+        protocol: 'https',
+        hostname: 'xmc-*.**',
+        port: '',
+      },
       {
         protocol: 'https',
         hostname: 'feaas*.blob.core.windows.net',

package/dist/templates/nextjs/package.json

@@ -1,7 +1,7 @@
 {
   "name": "<%- appName %>",
   "description": "Application utilizing Sitecore JavaScript Services and Next.js",
-  "version": "22.1.0-canary",
+  "version": "22.2.0-canary",
   "private": true,
   "config": {
     "appName": "<%- appName %>",
@@ -25,13 +25,14 @@
   },
   "license": "Apache-2.0",
   "dependencies": {
-    "@sitecore-jss/sitecore-jss-nextjs": "~22.1.0-canary",
+    "@sitecore-jss/sitecore-jss-nextjs": "~22.2.0-canary",
     "graphql": "~15.8.0",
     "graphql-tag": "^2.12.6",
     "next": "^14.1.0",
     "next-localization": "^0.12.0",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "sharp": "0.32.6"
   },
   "devDependencies": {
     "@graphql-codegen/cli": "^5.0.0",
@@ -42,9 +43,9 @@
     "@graphql-codegen/typescript-operations": "^4.0.1",
     "@graphql-codegen/typescript-resolvers": "^4.0.1",
     "@graphql-typed-document-node/core": "^3.2.0",
-    "@sitecore-jss/sitecore-jss-cli": "~22.1.0-canary",
-    "@sitecore-jss/sitecore-jss-dev-tools": "~22.1.0-canary",
-    "@types/node": "^18.11.18",
+    "@sitecore-jss/sitecore-jss-cli": "~22.2.0-canary",
+    "@sitecore-jss/sitecore-jss-dev-tools": "~22.2.0-canary",
+    "@types/node": "^20.14.2",
     "@types/react": "^18.2.22",
     "@types/react-dom": "^18.0.5",
     "@typescript-eslint/eslint-plugin": "^5.49.0",

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

@@ -22,15 +22,6 @@ const corsHeaderPlugin = (nextConfig = {}) => {
             },
           ],
         },
-        {
-          source: '/api/:path*',
-          headers: [
-            {
-              key: 'Access-Control-Allow-Origin',
-              value: config.sitecoreApiHost.replace(/\/$/, ''),
-            },
-          ],
-        },
       ];
     },
   });

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

@@ -7,10 +7,8 @@ import { GetServerSideProps } from 'next';
 import NotFound from 'src/NotFound';
 import Layout from 'src/Layout';
 import {
-  RenderingType,
   SitecoreContext,
   ComponentPropsContext,
-  EditingComponentPlaceholder,
   <% if (prerender === 'SSG') { -%>
   StaticPath,
   <% } -%>
@@ -36,8 +34,6 @@ const SitecorePage = ({ notFound, componentProps, layoutData, headLinks }: Sitec
   }
 
   const isEditing = layoutData.sitecore.context.pageEditing;
-  const isComponentRendering =
-    layoutData.sitecore.context.renderingType === RenderingType.Component;
 
   return (
     <ComponentPropsContext value={componentProps}>
@@ -45,15 +41,7 @@ const SitecorePage = ({ notFound, componentProps, layoutData, headLinks }: Sitec
         componentFactory={componentBuilder.getComponentFactory({ isEditing })}
         layoutData={layoutData}
       >
-        {/*
-          Sitecore Pages supports component rendering to avoid refreshing the entire page during component editing.
-          If you are using Experience Editor only, this logic can be removed, Layout can be left.
-        */}
-        {isComponentRendering ? (
-          <EditingComponentPlaceholder rendering={layoutData.sitecore.route} />
-        ) : (
-          <Layout layoutData={layoutData} headLinks={headLinks} />
-        )}
+        <Layout layoutData={layoutData} headLinks={headLinks} />
       </SitecoreContext>
     </ComponentPropsContext>
   );

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

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

package/dist/templates/nextjs-sxa/src/assets/sass/components/title/_component-title.scss

@@ -3,22 +3,28 @@
 
 .title {
   background: $title-bg;
+
   h1,
   .field-title {
-    >a, >span {
-      @include border-basic(bottom, $border-basic-color);
-      font-size: $font-extrabig;
-      margin-bottom: $small-margin;
-      color: $title-color;
-      line-height: normal;
-      padding-bottom: 10px;
-      display: block;
+    @include border-basic(bottom, $border-basic-color);
+    font-size: $font-extrabig;
+    margin-bottom: $small-margin;
+    color: $title-color;
+    line-height: normal;
+    padding-bottom: 10px;
+    display: block;
+    text-decoration: none;
+    cursor: pointer;
+
+    &:hover {
+      color: $title-color-active;
+    }
+
+    > a,
+    > span {
       text-decoration: none;
-      cursor: pointer;
-      &:hover {
-        color: $title-color-active;
-      }
+    }
   }
-}
+
   @import '@sass/variants/title';
 }

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

@@ -1,16 +1,17 @@
-import React, { CSSProperties } from 'react';
 import {
-  Image as JssImage,
-  Link as JssLink,
-  ImageField,
+  EditMode,
   Field,
+  ImageField,
+  NextImage as JssImage,
+  Link as JssLink,
   LinkField,
   Text,
   useSitecoreContext,
 } from '@sitecore-jss/sitecore-jss-nextjs';
+import React, { CSSProperties } from 'react';
 
 interface Fields {
-  Image: ImageField;
+  Image: ImageField & { metadata?: { [key: string]: unknown } };
   ImageCaption: Field<string>;
   TargetUrl: LinkField;
 }
@@ -29,8 +30,10 @@ const ImageDefault = (props: ImageProps): JSX.Element => (
 );
 
 export const Banner = (props: ImageProps): JSX.Element => {
+  const id = props.params.RenderingIdentifier;
   const { sitecoreContext } = useSitecoreContext();
   const isPageEditing = sitecoreContext.pageEditing;
+  const isMetadataMode = sitecoreContext?.editMode === EditMode.Metadata;
   const classHeroBannerEmpty =
     isPageEditing && props.fields?.Image?.value?.class === 'scEmptyImage'
       ? 'hero-banner-empty'
@@ -38,13 +41,20 @@ export const Banner = (props: ImageProps): JSX.Element => {
   const backgroundStyle = (props?.fields?.Image?.value?.src && {
     backgroundImage: `url('${props.fields.Image.value.src}')`,
   }) as CSSProperties;
-  const modifyImageProps = {
-    ...props.fields.Image,
-    editable: props?.fields?.Image?.editable
-      ?.replace(`width="${props?.fields?.Image?.value?.width}"`, 'width="100%"')
-      .replace(`height="${props?.fields?.Image?.value?.height}"`, 'height="100%"'),
-  };
-  const id = props.params.RenderingIdentifier;
+  const modifyImageProps = !isMetadataMode
+    ? {
+        ...props.fields.Image,
+        editable: props?.fields?.Image?.editable
+          ?.replace(`width="${props?.fields?.Image?.value?.width}"`, 'width="100%"')
+          .replace(`height="${props?.fields?.Image?.value?.height}"`, 'height="100%"'),
+      }
+    : {
+      ...props.fields.Image,
+      value: {
+        ...props.fields.Image.value,
+        style: { width: '100%', height: '100%' },
+      },
+    };
 
   return (
     <div

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import {
-  Image as JssImage,
+  NextImage as JssImage,
   Link as JssLink,
   RichText as JssRichText,
   ImageField,

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

@@ -1,11 +1,11 @@
-import React from 'react';
 import {
   Link,
-  Text,
-  useSitecoreContext,
   LinkField,
+  Text,
   TextField,
+  useSitecoreContext,
 } from '@sitecore-jss/sitecore-jss-nextjs';
+import React from 'react';
 
 interface Fields {
   data: {
@@ -17,7 +17,8 @@ interface Fields {
       field: {
         jsonValue: {
           value: string;
-          editable: string;
+          editable?: string;
+          metadata?: { [key: string]: unknown };
         };
       };
     };
@@ -29,7 +30,8 @@ interface Fields {
       field: {
         jsonValue: {
           value: string;
-          editable: string;
+          editable?: string;
+          metadata?: { [key: string]: unknown };
         };
       };
     };
@@ -61,21 +63,16 @@ const ComponentContent = (props: ComponentContentProps) => {
 export const Default = (props: TitleProps): JSX.Element => {
   const datasource = props.fields?.data?.datasource || props.fields?.data?.contextItem;
   const { sitecoreContext } = useSitecoreContext();
-
-  const text: TextField = {
-    value: datasource?.field?.jsonValue?.value,
-    editable: datasource?.field?.jsonValue?.editable,
-  };
+  const text: TextField = datasource?.field?.jsonValue || {};
   const link: LinkField = {
     value: {
       href: datasource?.url?.path,
       title: datasource?.field?.jsonValue?.value,
-      editable: true,
     },
   };
   if (sitecoreContext.pageState !== 'normal') {
     link.value.querystring = `sc_site=${datasource?.url?.siteName}`;
-    if (!text.value) {
+    if (!text?.value) {
       text.value = 'Title field';
       link.value.href = '#';
     }
@@ -84,7 +81,7 @@ export const Default = (props: TitleProps): JSX.Element => {
   return (
     <ComponentContent styles={props.params.styles} id={props.params.RenderingIdentifier}>
       <>
-        {sitecoreContext.pageState === 'edit' ? (
+        {sitecoreContext.pageEditing ? (
           <Text field={text} />
         ) : (
           <Link field={link}>

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

@@ -1,7 +1,7 @@
 {
   "dependencies": {
     "@sitecore/components": "^1.1.10",
-    "@sitecore-cloudsdk/events": "^0.3.0",
+    "@sitecore-cloudsdk/events": "^0.3.1",
     "@sitecore-feaas/clientside": "^0.5.17"
   }
 }