create-sitecore-jss 22.6.0-canary.3 → 22.6.0-canary.5

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

@@ -11,7 +11,7 @@ interface ComponentProps {
 }
 
 export const Default = (props: ComponentProps): JSX.Element => {
-  const styles = `${props.params.GridParameters ?? ''} ${props.params.Styles ?? ''}`.trimEnd();
+  const styles = `${props?.params?.GridParameters ?? ''} ${props?.params?.Styles ?? ''}`.trimEnd();
   const columnWidths = [
     props.params.ColumnWidth1,
     props.params.ColumnWidth2,

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

@@ -11,12 +11,12 @@ interface ComponentProps {
 }
 
 const DefaultContainer = (props: ComponentProps): JSX.Element => {
-  const containerStyles = props.params && props.params.Styles ? props.params.Styles : '';
-  const styles = `${props.params.GridParameters} ${containerStyles}`.trimEnd();
-  const phKey = `container-${props.params.DynamicPlaceholderId}`;
-  const id = props.params.RenderingIdentifier;
+  const containerStyles = props?.params?.Styles ?? '';
+  const styles = `${props?.params?.GridParameters} ${containerStyles}`.trimEnd();
+  const phKey = `container-${props?.params?.DynamicPlaceholderId}`;
+  const id = props?.params?.RenderingIdentifier;
   const mediaUrlPattern = new RegExp(/mediaurl=\"([^"]*)\"/, 'i');
-  let backgroundImage = props.params.BackgroundImage as string;
+  let backgroundImage = props?.params?.BackgroundImage as string;
   let backgroundStyle: { [key: string]: string } = {};
 
   if (backgroundImage && backgroundImage.match(mediaUrlPattern)) {

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

@@ -22,7 +22,7 @@ type ImageProps = {
 };
 
 const ImageDefault = (props: ImageProps): JSX.Element => (
-  <div className={`component image ${props.params.styles}`.trimEnd()}>
+  <div className={`component image ${props?.params?.styles}`.trimEnd()}>
     <div className="component-content">
       <span className="is-empty-hint">Image</span>
     </div>
@@ -49,16 +49,16 @@ export const Banner = (props: ImageProps): JSX.Element => {
           .replace(`height="${props?.fields?.Image?.value?.height}"`, 'height="100%"'),
       }
     : {
-      ...props.fields.Image,
-      value: {
-        ...props.fields.Image.value,
-        style: { width: '100%', height: '100%' },
-      },
-    };
+        ...props.fields.Image,
+        value: {
+          ...props.fields.Image.value,
+          style: { width: '100%', height: '100%' },
+        },
+      };
 
   return (
     <div
-      className={`component hero-banner ${props.params.styles} ${classHeroBannerEmpty}`}
+      className={`component hero-banner ${props?.params?.styles} ${classHeroBannerEmpty}`}
       id={id ? id : undefined}
     >
       <div className="component-content sc-sxa-image-hero-banner" style={backgroundStyle}>
@@ -76,7 +76,7 @@ export const Default = (props: ImageProps): JSX.Element => {
     const id = props.params.RenderingIdentifier;
 
     return (
-      <div className={`component image ${props.params.styles}`} id={id ? id : undefined}>
+      <div className={`component image ${props?.params?.styles}`} id={id ? id : undefined}>
         <div className="component-content">
           {sitecoreContext.pageState === 'edit' || !props.fields.TargetUrl?.value?.href ? (
             <Image />

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

@@ -52,7 +52,7 @@ const LinkListItem = (props: LinkListItemProps) => {
 
 export const Default = (props: LinkListProps): JSX.Element => {
   const datasource = props.fields?.data?.datasource;
-  const styles = `component link-list ${props.params.styles}`.trimEnd();
+  const styles = `component link-list ${props?.params?.styles}`.trimEnd();
   const id = props.params.RenderingIdentifier;
 
   if (datasource) {

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

@@ -52,7 +52,7 @@ export const Default = (props: NavigationProps): JSX.Element => {
   const { sitecoreContext } = useSitecoreContext();
   const styles =
     props.params != null
-      ? `${props.params.GridParameters ?? ''} ${props.params.Styles ?? ''}`.trimEnd()
+      ? `${props.params.GridParameters ?? ''} ${props?.params?.Styles ?? ''}`.trimEnd()
       : '';
   const id = props.params != null ? props.params.RenderingIdentifier : null;
 
@@ -110,7 +110,7 @@ export const Default = (props: NavigationProps): JSX.Element => {
 const NavigationList = (props: NavigationProps) => {
   const { sitecoreContext } = useSitecoreContext();
   const [active, setActive] = useState(false);
-  const classNameList = `${props.fields.Styles.concat('rel-level' + props.relativeLevel).join(
+  const classNameList = `${props?.fields?.Styles.concat('rel-level' + props.relativeLevel).join(
     ' '
   )}`;
 

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

@@ -23,7 +23,7 @@ type ComponentContentProps = {
 const ComponentContent = (props: ComponentContentProps) => {
   const id = props.id;
   return (
-    <div className={`component content ${props.styles}`} id={id ? id : undefined}>
+    <div className={`component content ${props?.styles}`} id={id ? id : undefined}>
       <div className="component-content">
         <div className="field-content">{props.children}</div>
       </div>
@@ -37,7 +37,7 @@ export const Default = (props: PageContentProps): JSX.Element => {
 
   if (!(props.fields && props.fields.Content) && !sitecoreContext?.route?.fields?.Content) {
     return (
-      <div className={`component content ${props.params.styles}`} id={id ? id : undefined}>
+      <div className={`component content ${props?.params?.styles}`} id={id ? id : undefined}>
         <div className="component-content">
           <div className="field-content">[Content]</div>
         </div>
@@ -50,7 +50,7 @@ export const Default = (props: PageContentProps): JSX.Element => {
     : sitecoreContext?.route?.fields?.Content) as RichTextField;
 
   return (
-    <ComponentContent styles={props.params.styles} id={id}>
+    <ComponentContent styles={props?.params?.styles} id={id}>
       <JssRichText field={field} />
     </ComponentContent>
   );

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

@@ -21,7 +21,7 @@ type PromoProps = {
 };
 
 const PromoDefaultComponent = (props: PromoProps): JSX.Element => (
-  <div className={`component promo ${props.params.styles}`}>
+  <div className={`component promo ${props?.params?.styles}`}>
     <div className="component-content">
       <span className="is-empty-hint">Promo</span>
     </div>
@@ -32,7 +32,7 @@ export const Default = (props: PromoProps): JSX.Element => {
   const id = props.params.RenderingIdentifier;
   if (props.fields) {
     return (
-      <div className={`component promo ${props.params.styles}`} id={id ? id : undefined}>
+      <div className={`component promo ${props?.params?.styles}`} id={id ? id : undefined}>
         <div className="component-content">
           <div className="field-promoicon">
             <JssImage field={props.fields.PromoIcon} />
@@ -59,7 +59,7 @@ export const WithText = (props: PromoProps): JSX.Element => {
   const id = props.params.RenderingIdentifier;
   if (props.fields) {
     return (
-      <div className={`component promo ${props.params.styles}`} id={id ? id : undefined}>
+      <div className={`component promo ${props?.params?.styles}`} id={id ? id : undefined}>
         <div className="component-content">
           <div className="field-promoicon">
             <JssImage field={props.fields.PromoIcon} />

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

@@ -20,7 +20,7 @@ export const Default = (props: RichTextProps): JSX.Element => {
 
   return (
     <div
-      className={`component rich-text ${props.params.styles.trimEnd()}`}
+      className={`component rich-text ${props?.params?.styles.trimEnd()}`}
       id={id ? id : undefined}
     >
       <div className="component-content">{text}</div>

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

@@ -11,7 +11,7 @@ interface ComponentProps {
 }
 
 export const Default = (props: ComponentProps): JSX.Element => {
-  const styles = `${props.params.GridParameters ?? ''} ${props.params.Styles ?? ''}`.trimEnd();
+  const styles = `${props?.params?.GridParameters ?? ''} ${props?.params?.Styles ?? ''}`.trimEnd();
   const rowStyles = [
     props.params.Styles1,
     props.params.Styles2,

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

@@ -52,7 +52,7 @@ type ComponentContentProps = {
 const ComponentContent = (props: ComponentContentProps) => {
   const id = props.id;
   return (
-    <div className={`component title ${props.styles}`} id={id ? id : undefined}>
+    <div className={`component title ${props?.styles}`} id={id ? id : undefined}>
       <div className="component-content">
         <div className="field-title">{props.children}</div>
       </div>
@@ -79,7 +79,7 @@ export const Default = (props: TitleProps): JSX.Element => {
   }
 
   return (
-    <ComponentContent styles={props.params.styles} id={props.params.RenderingIdentifier}>
+    <ComponentContent styles={props?.params?.styles} id={props?.params?.RenderingIdentifier}>
       <>
         {sitecoreContext.pageEditing ? (
           <Text field={text} />

package/dist/templates/node-xmcloud-proxy/README.md

@@ -91,64 +91,73 @@ If the operation is successful, you’ll see the following message:
 
 Follow these steps to deploy your application to Netlify. The deployed site can be used as an editing host in XM Cloud.
 
-1. Run `npm init` in the root directory (which contains SPA and Node XM Cloud Proxy app folder) and add the following scripts to package.json:
-   ```
-      "build": "cd ./<your-proxy-app-name> && npm run build-all && cd ..",
-      "install": "cd ./<your-proxy-app-name> && npm install && npm run install-all && cd ..",
-   ```
-2. Ensure that `<your-proxy-app-name>/package.json` includes the following commands to handle the build and install steps properly:
-   ```
-      "build-all": "cd ../angular && npm run build && cd ../<your-proxy-app-name> && tsc",
-      "install-all": "cd ../angular && npm i && cd ../<your-proxy-app-name>"
-   ```
+1. Run `npm init` in the root directory (which contains SPA and Node XM Cloud Proxy app folders) and add the following scripts to package.json:
+    ```
+    "build": "cd ./<your-proxy-app-folder> && npm run build-all && cd ..",
+    "install": "cd ./<your-proxy-app-folder> && npm install && npm run install-all && cd .."
+    ```
+2. Ensure that `<your-proxy-app-folder>/package.json` includes the following commands to handle the build and install steps properly:
+    ```
+    "build-all": "cd ../angular && npm run build && cd ../<your-proxy-app-folder> && tsc",
+    "install-all": "cd ../angular && npm i && cd ../<your-proxy-app-folder> && npm i"
+    ```
 3. Configure `serverless-http`:
-    - Install the npm package
-      ```
-        npm i serverless-http
-        ```
-    - Import serverless-http in `<your-proxy-app-name>/src/index.ts` file.
+    - Install the serverless-http package :
+        - If you're deploying a standalone Angular app with the Node proxy, run the following command inside your proxy app folder:
+          ```
+          npm i serverless-http
+          ```
+        - If you're working within the pnpm setup context of the [xmcloud-foundation-head](https://github.com/sitecorelabs/xmcloud-foundation-head), run the following command inside your proxy app folder:
+          ```
+          pnpm add serverless-http
+          ```
+    - Import serverless-http in `<your-proxy-app-folder>/src/index.ts` file and export the serverless handler:
         ```
-          export const handler = serverless(server);
+        import serverless from 'serverless-http';
+        ...
+        export const handler = serverless(server);
         ```
 4. Create a `netlify.toml` file and ensure that the following Netlify configuration is added there:
-   - The following allows the proxy app to be treated as Netlify functions. [Functions Overview](https://docs.netlify.com/functions/overview/)
-     ```
-        [functions]
-        directory = "<your-proxy-app-name>/src"
-        node_bundler = "esbuild"
-        included_files = ["<your-proxy-app-name>/dist/**"]
-     ```
-   - To ensure that static assets are accessed properly, you might need to add the following redirects statement to the toml file:
-     ```
-        [[redirects]]
-        from = "/dist/browser/*"
-        status = 200
-        to = "/browser/:splat"
-     ```
-   - By default, redirects won’t be applied if there’s a file with the same path as the one defined in the `from` property. Setting `force` to `true` will make the redirect rule take precedence over any existing files.
-     ```
-       [[redirects]]
-       from = "/*"
-       status = 200
-       to = "/.netlify/functions/index/:splat"
-       force = true
-     ```
-   - Add the following build command:
-     ```
-     [build]
-     command = "npm run build"
-     publish = "<your-proxy-app-name>/dist"
-     ```
+    ```
+    [functions]
+    directory = "<your-proxy-app-folder>/src"
+    node_bundler = "esbuild"
+    included_files = ["<your-proxy-app-folder>/dist/**"]
+    [[redirects]]
+    from = "/dist/browser/*"
+    status = 200
+    to = "/browser/:splat"
+    [[redirects]]
+    from = "/*"
+    status = 200
+    to = "/.netlify/functions/index/:splat"
+    force = true
+    [build]
+    command = "npm run build"
+    publish = "<your-proxy-app-folder>/dist"
+    ```
+   - The `[functions]` section allows the proxy app to be treated as Netlify functions. [Functions Overview](https://docs.netlify.com/functions/overview/)
+   - The first `[[redirects]]` section ensures that static assets are accessed properly.
+   - The second `[[redirects]]` section means that, by default, redirects aren't applied if a file exists at the same path as the one defined in the `from` property. Setting `force` to `true` ensures the redirect rule takes precedence over existing files, preventing files in the deploy folder from being publicly accessible.
+
 5. Create your [Netlify deployment](https://www.netlify.com/blog/2016/09/29/a-step-by-step-guide-deploying-on-netlify/):
    - Set up all your necessary environment variables like `SITECORE_EDGE_CONTEXT_ID`, `SITECORE_SITE_NAME` etc.
+   - Configure Netlify to use the latest LTS version of Node.js.
    - Configure your build settings in the Build and Deploy tab under Site configuration.
-      - sample configuration:
-       ```
-        Base Directory: /
-        Build command: npm run build
-        Publish directory: /proxy/dist
-        Functions directory: /proxy/src
-        ```
+      - sample configuration for standalone Angular + proxy deployment:
+      ```
+      Base directory: /
+      Build command: npm run build
+      Publish directory: /proxy/dist
+      Functions directory: /proxy/src
+      ```
+      - Sample configuration for use within the context of [xmcloud-foundation-head](https://github.com/sitecorelabs/xmcloud-foundation-head): 
+      ```
+      Base directory: /headapps/spa-starters/
+      Build command: npm run build
+      Publish directory:  /headapps/spa-starters/proxy/dist
+      Functions directory:  /headapps/spa-starters/proxy/src
+      ```
    NOTE: If `proxy/dist` folder is not picked up properly by Netlify make sure that the `PROXY_BUILD_PATH` env variable is unix style path e.g. `../proxy/dist`
 
 ### Deploy to Vercel

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-sitecore-jss",
-  "version": "22.6.0-canary.3",
+  "version": "22.6.0-canary.5",
   "description": "Sitecore JSS initializer",
   "bin": "./dist/index.js",
   "scripts": {
@@ -65,5 +65,5 @@
     "ts-node": "^10.9.1",
     "typescript": "~5.6.3"
   },
-  "gitHead": "2d3cad0e4860e082edc20a069d6644135793d1f8"
+  "gitHead": "0a90a403b97540a79f17c2c40c9b961ed22dc5c2"
 }