create-sitecore-jss 21.0.0 → 21.0.2

package/dist/initializers/nextjs/index.js

@@ -69,7 +69,7 @@ class NextjsInitializer {
                             value: 'nextjs-styleguide-tracking',
                         },
                         {
-                            name: 'nextjs-sxa - Includes example components and setup for Headless SXA projects (only compatible with Sitecore XM Cloud)',
+                            name: 'nextjs-sxa - Includes example components and setup for Headless SXA projects',
                             value: 'nextjs-sxa',
                         },
                         {

package/dist/templates/angular/package.json

@@ -1,6 +1,6 @@
 {
   "name": "<%- appName %>",
-  "version": "21.0.0",
+  "version": "21.0.2",
   "description": "Application utilizing Sitecore JavaScript Services and Angular (angular-cli).",
   "config": {
     "appName": "<%- appName %>",
@@ -63,7 +63,7 @@
     "@apollo/client": "^3.3.12",
     "@ngx-translate/core": "~13.0.0",
     "@ngx-translate/http-loader": "~6.0.0",
-    "@sitecore-jss/sitecore-jss-angular": "^21.0.0",
+    "@sitecore-jss/sitecore-jss-angular": "^21.0.2",
     "apollo-angular": "~2.4.0",
     "bootstrap": "^4.3.1",
     "core-js": "~3.9.1",
@@ -86,9 +86,9 @@
     "@angular/cli": "~11.2.5",
     "@angular/compiler-cli": "~11.2.6",
     "@angular/language-service": "~11.2.6",
-    "@sitecore-jss/sitecore-jss-angular-schematics": "^21.0.0",
-    "@sitecore-jss/sitecore-jss-cli": "^21.0.0",
-    "@sitecore-jss/sitecore-jss-dev-tools": "^21.0.0",
+    "@sitecore-jss/sitecore-jss-angular-schematics": "^21.0.2",
+    "@sitecore-jss/sitecore-jss-cli": "^21.0.2",
+    "@sitecore-jss/sitecore-jss-dev-tools": "^21.0.2",
     "@types/isomorphic-fetch": "0.0.35",
     "@types/jasmine": "~3.6.7",
     "@types/jasminewd2": "~2.0.8",

package/dist/templates/angular/sitecore/definitions/components/graph-ql-integrated-demo.sitecore.graphql

@@ -42,8 +42,8 @@ query IntegratedDemoQuery($datasource: String!, $contextItem: String!, $language
   # (as long as the GraphQLData helper is used)
   contextItem: item(path: $contextItem, language: $language) {
     id
-    # Get the page title from the page template
-    ...on <%- helper.getAppPrefix(appPrefix, appName, false) %>Page {
+    # Get the page title from the app route template
+    ...on <%- helper.getAppPrefix(appPrefix, appName, false) %>AppRoute {
       pageTitle {
         value
       }
@@ -56,7 +56,7 @@ query IntegratedDemoQuery($datasource: String!, $contextItem: String!, $language
         # typing fragments can be used anywhere!
         # so in this case, we're grabbing the 'pageTitle'
         # field on all child route items.
-        ...on <%- helper.getAppPrefix(appPrefix, appName, false) %>Page {
+        ...on <%- helper.getAppPrefix(appPrefix, appName, false) %>AppRoute {
           pageTitle {
             jsonValue
             value

package/dist/templates/angular/sitecore/definitions/routes.sitecore.ts

@@ -16,7 +16,7 @@ export default function addRoutesToManifest(manifest: Manifest): Promise<void> {
   // which routes can use by setting `template: YourCustomRouteTypeName` in their definition.
   const appTemplateSection = 'Page Metadata';
   manifest.setDefaultRouteType({
-    name: '<%- helper.getAppPrefix(appPrefix, appName) %>Page',
+    name: '<%- helper.getAppPrefix(appPrefix, appName) %>App Route',
     fields: [
       {
         name: 'pageTitle',
@@ -25,7 +25,7 @@ export default function addRoutesToManifest(manifest: Manifest): Promise<void> {
         type: CommonFieldTypes.SingleLineText,
       },
     ],
-    insertOptions: ['<%- helper.getAppPrefix(appPrefix, appName) %>Page'],
+    insertOptions: ['<%- helper.getAppPrefix(appPrefix, appName) %>App Route'],
   });
 
   return mergeFs('./data/routes') // relative to process invocation (i.e. your package.json)

package/dist/templates/angular/src/app/components/graph-ql-connected-demo/graph-ql-connected-demo.component.graphql

@@ -40,8 +40,8 @@ query ConnectedDemoQuery($datasource: String!, $contextItem: String!, $language:
   # $contextItem should be set to the ID of the current context item (the route item)
   contextItem: item(path: $contextItem, language: $language) {
     id
-    # Get the page title from the page template
-    ...on <%- helper.getAppPrefix(appPrefix, appName, false) %>Page {
+    # Get the page title from the app route template
+    ...on <%- helper.getAppPrefix(appPrefix, appName, false) %>AppRoute {
       pageTitle {
         value
       }
@@ -54,7 +54,7 @@ query ConnectedDemoQuery($datasource: String!, $contextItem: String!, $language:
         # typing fragments can be used anywhere!
         # so in this case, we're grabbing the 'pageTitle'
         # field on all child route items.
-        ...on <%- helper.getAppPrefix(appPrefix, appName, false) %>Page {
+        ...on <%- helper.getAppPrefix(appPrefix, appName, false) %>AppRoute {
           pageTitle {
             jsonValue
             value

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

@@ -153,7 +153,7 @@ export default {
             name: '<%- helper.getAppPrefix(appPrefix, appName, false) %>ContentBlock',
           },
           {
-            name: 'C__<%- helper.getAppPrefix(appPrefix, appName, false) %>Page',
+            name: 'C__<%- helper.getAppPrefix(appPrefix, appName, false) %>AppRoute',
           },
           {
             name: 'JsonRendering',
@@ -192,13 +192,13 @@ export default {
       },
       {
         kind: 'INTERFACE',
-        name: '<%- helper.getAppPrefix(appPrefix, appName, false) %>Page',
+        name: '<%- helper.getAppPrefix(appPrefix, appName, false) %>AppRoute',
         possibleTypes: [
           {
             name: '<%- helper.getAppPrefix(appPrefix, appName, false) %>ExampleCustomRouteType',
           },
           {
-            name: 'C__<%- helper.getAppPrefix(appPrefix, appName, false) %>Page',
+            name: 'C__<%- helper.getAppPrefix(appPrefix, appName, false) %>AppRoute',
           },
         ],
       },

package/dist/templates/nextjs/package.json

@@ -1,7 +1,7 @@
 {
   "name": "<%- appName %>",
   "description": "Application utilizing Sitecore JavaScript Services and Next.js",
-  "version": "21.0.0",
+  "version": "21.0.2",
   "private": true,
   "config": {
     "appName": "<%- appName %>",
@@ -29,10 +29,10 @@
   },
   "license": "Apache-2.0",
   "dependencies": {
-    "@sitecore-jss/sitecore-jss-nextjs": "^21.0.0",
+    "@sitecore-jss/sitecore-jss-nextjs": "^21.0.2",
     "graphql": "~15.8.0",
     "graphql-tag": "^2.11.0",
-    "next": "^12.2.5",
+    "next": "^12.3.1",
     "next-localization": "^0.12.0",
     "react": "^18.1.0",
     "react-dom": "^18.1.0"
@@ -45,7 +45,7 @@
     "@graphql-codegen/typescript-operations": "^1.17.9",
     "@graphql-codegen/typescript-resolvers": "^1.17.10",
     "@graphql-typed-document-node/core": "^3.1.0",
-    "@sitecore-jss/sitecore-jss-cli": "^21.0.0",
+    "@sitecore-jss/sitecore-jss-cli": "^21.0.2",
     "@types/node": "^14.6.4",
     "@types/react": "^18.0.12",
     "@types/react-dom": "^18.0.5",

package/dist/templates/nextjs/src/temp/GraphQLIntrospectionResult.json

@@ -2179,7 +2179,7 @@
           },
           {
             "kind": "OBJECT",
-            "name": "C__<%- helper.getAppPrefix(appPrefix, appName, false) %>Page",
+            "name": "C__<%- helper.getAppPrefix(appPrefix, appName, false) %>AppRoute",
             "ofType": null
           },
           {
@@ -17760,7 +17760,7 @@
         "interfaces": [
           {
             "kind": "INTERFACE",
-            "name": "<%- helper.getAppPrefix(appPrefix, appName, false) %>Page",
+            "name": "<%- helper.getAppPrefix(appPrefix, appName, false) %>AppRoute",
             "ofType": null
           },
           {
@@ -18219,8 +18219,8 @@
       },
       {
         "kind": "OBJECT",
-        "name": "C__<%- helper.getAppPrefix(appPrefix, appName, false) %>Page",
-        "description": "/sitecore/templates/Project/<%- helper.getAppPrefix(appPrefix, appName, false) %>/<%- helper.getAppPrefix(appPrefix, appName, false) %>-Page template (ID: {787584C0-A057-5876-9836-F8B3708F0CAF}). NOTE: This is a concrete type. Favor using interfaces instead of this type (e.g. <%- helper.getAppPrefix(appPrefix, appName, false) %>Page) for reliable querying.",
+        "name": "C__<%- helper.getAppPrefix(appPrefix, appName, false) %>AppRoute",
+        "description": "/sitecore/templates/Project/<%- helper.getAppPrefix(appPrefix, appName, false) %>/<%- helper.getAppPrefix(appPrefix, appName, false) %>-App Route template (ID: {787584C0-A057-5876-9836-F8B3708F0CAF}). NOTE: This is a concrete type. Favor using interfaces instead of this type (e.g. <%- helper.getAppPrefix(appPrefix, appName, false) %>AppRoute) for reliable querying.",
         "fields": [
           {
             "name": "ancestors",
@@ -18643,7 +18643,7 @@
         "interfaces": [
           {
             "kind": "INTERFACE",
-            "name": "<%- helper.getAppPrefix(appPrefix, appName, false) %>Page",
+            "name": "<%- helper.getAppPrefix(appPrefix, appName, false) %>AppRoute",
             "ofType": null
           },
           {
@@ -21496,8 +21496,8 @@
       },
       {
         "kind": "INTERFACE",
-        "name": "<%- helper.getAppPrefix(appPrefix, appName, false) %>Page",
-        "description": "/sitecore/templates/Project/<%- helper.getAppPrefix(appPrefix, appName, false) %>/<%- helper.getAppPrefix(appPrefix, appName, false) %>-Page template (ID: {787584C0-A057-5876-9836-F8B3708F0CAF}). Also implements Route.",
+        "name": "<%- helper.getAppPrefix(appPrefix, appName, false) %>AppRoute",
+        "description": "/sitecore/templates/Project/<%- helper.getAppPrefix(appPrefix, appName, false) %>/<%- helper.getAppPrefix(appPrefix, appName, false) %>-App Route template (ID: {787584C0-A057-5876-9836-F8B3708F0CAF}). Also implements Route.",
         "fields": [
           {
             "name": "pageTitle",
@@ -21523,7 +21523,7 @@
           },
           {
             "kind": "OBJECT",
-            "name": "C__<%- helper.getAppPrefix(appPrefix, appName, false) %>Page",
+            "name": "C__<%- helper.getAppPrefix(appPrefix, appName, false) %>AppRoute",
             "ofType": null
           }
         ]

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

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

package/dist/templates/nextjs-styleguide/sitecore/definitions/components/graphql/GraphQL-IntegratedDemo.sitecore.graphql

@@ -42,8 +42,8 @@ query IntegratedDemoQuery($datasource: String!, $contextItem: String!, $language
   # (as long as the GraphQLData helper is used)
   contextItem: item(path: $contextItem, language: $language) {
     id
-    # Get the page title from the page template
-    ...on <%- helper.getAppPrefix(appPrefix, appName, false) %>Page {
+    # Get the page title from the app route template
+    ...on <%- helper.getAppPrefix(appPrefix, appName, false) %>AppRoute {
       pageTitle {
         value
       }
@@ -56,7 +56,7 @@ query IntegratedDemoQuery($datasource: String!, $contextItem: String!, $language
         # typing fragments can be used anywhere!
         # so in this case, we're grabbing the 'pageTitle'
         # field on all child route items.
-        ...on <%- helper.getAppPrefix(appPrefix, appName, false) %>Page {
+        ...on <%- helper.getAppPrefix(appPrefix, appName, false) %>AppRoute {
           pageTitle {
             jsonValue
             value

package/dist/templates/nextjs-styleguide/sitecore/definitions/routes.sitecore.ts

@@ -24,8 +24,8 @@ export default function addRoutesToManifest(manifest: Manifest): Promise<void> {
   const appTemplateSection = 'Page Metadata';
 
   manifest.setDefaultRouteType({
-    name: '<%- helper.getAppPrefix(appPrefix, appName) %>Page',
-    displayName: 'Page',
+    name: '<%- helper.getAppPrefix(appPrefix, appName) %>App Route',
+    displayName: 'App Route',
     fields: [
       {
         name: 'pageTitle',
@@ -34,7 +34,7 @@ export default function addRoutesToManifest(manifest: Manifest): Promise<void> {
         type: CommonFieldTypes.SingleLineText,
       },
     ],
-    insertOptions: ['<%- helper.getAppPrefix(appPrefix, appName) %>Page'],
+    insertOptions: ['<%- helper.getAppPrefix(appPrefix, appName) %>App Route'],
   });
 
   return mergeFs('./data/routes') // relative to process invocation (i.e. your package.json)

package/dist/templates/nextjs-styleguide/src/components/graphql/GraphQL-ConnectedDemo.dynamic.graphql

@@ -40,8 +40,8 @@ query ConnectedDemoQuery($datasource: String!, $contextItem: String!, $language:
   # $contextItem should be set to the ID of the current context item (the route item)
   contextItem: item(path: $contextItem, language: $language) {
     id
-    # Get the page title from the page template
-    ...on <%- helper.getAppPrefix(appPrefix, appName, false) %>Page {
+    # Get the page title from the app route template
+    ...on <%- helper.getAppPrefix(appPrefix, appName, false) %>AppRoute {
       pageTitle {
         value
       }
@@ -54,7 +54,7 @@ query ConnectedDemoQuery($datasource: String!, $contextItem: String!, $language:
         # typing fragments can be used anywhere!
         # so in this case, we're grabbing the 'pageTitle'
         # field on all child route items.
-        ...on <%- helper.getAppPrefix(appPrefix, appName, false) %>Page {
+        ...on <%- helper.getAppPrefix(appPrefix, appName, false) %>AppRoute {
           pageTitle {
             jsonValue
             value

package/dist/templates/nextjs-styleguide/src/components/graphql/GraphQL-ConnectedDemo.dynamic.tsx

@@ -12,18 +12,18 @@ import {
 import NextLink from 'next/link';
 import {
   ConnectedDemoQueryDocument,
-  <%- helper.getAppPrefix(appPrefix, appName, false) %>Page as Page,
+  <%- helper.getAppPrefix(appPrefix, appName, false) %>AppRoute as AppRoute,
   Item,
   <%- helper.getAppPrefix(appPrefix, appName, false) %>GraphQlConnectedDemo as GrapQLConnectedDemoDatasource,
 } from './GraphQL-ConnectedDemo.dynamic.graphql';
 import { ComponentProps } from 'lib/component-props';
 import config from 'temp/config';
 
-type PageItem = Page & Item;
+type RouteItem = AppRoute & Item;
 
 type GraphQLConnectedDemoData = {
   datasource: GrapQLConnectedDemoDatasource;
-  contextItem: PageItem;
+  contextItem: RouteItem;
 };
 
 type GraphQLConnectedDemoProps = ComponentProps & GraphQLConnectedDemoData;
@@ -80,12 +80,12 @@ const GraphQLConnectedDemo = (props: GraphQLConnectedDemoProps): JSX.Element =>
           children:
           <ul>
             {props.contextItem.children.results.map((child) => {
-              const pageItem = child as PageItem;
+              const routeItem = child as RouteItem;
 
               return (
-                <li key={pageItem.id}>
-                  <NextLink href={pageItem.url.path}>{pageItem.pageTitle?.value}</NextLink>
-                  (editable title too! <Text field={pageItem.pageTitle?.jsonValue} />)
+                <li key={routeItem.id}>
+                  <NextLink href={routeItem.url.path}>{routeItem.pageTitle?.value}</NextLink>
+                  (editable title too! <Text field={routeItem.pageTitle?.jsonValue} />)
                 </li>
               );
             })}

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

@@ -1,16 +1,6 @@
 @import "@sass/abstracts/mixins";
 @import "variables";
 
-.prod-mode {
-  #footer {
-    padding-top: 80px;
-
-    @include respond-to(mobile-large) {
-      padding-top: 0;
-    }
-  }
-}
-
 footer {
   @include respond-to(mobile-large) {
     padding-top: 0;
@@ -26,10 +16,8 @@ footer {
       color: $text-white;
     }
 
-    p {
-      span {
-        color: $text-white;
-      }
+    p, span {
+      color: $text-white;
     }
   }
 

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

@@ -7,6 +7,11 @@
     padding-left: 0;
     padding-right: 0;
     padding-bottom: 0;
+    margin-bottom: 80px;
+
+    @include respond-to(mobile-large) {
+      margin-bottom: 0;
+    }
 
     >.component-content {
       border: 0;

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

@@ -2,14 +2,17 @@
 
 .container-wrapper {
   width: 100%;
-  .container {
-    padding: 0;
-  
-    &.fullwidth-container {
-      max-width: unset;
-    }
-    .component-content {
-      @include clearfix();
-    }
+}
+
+.container {
+  padding: 0;
+
+  &.fullwidth-container {
+    max-width: unset;
   }
+
+  .component-content {
+    @include clearfix();
+  }
+
 }

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

@@ -8,7 +8,6 @@ import {
   Text,
   useSitecoreContext,
 } from '@sitecore-jss/sitecore-jss-nextjs';
-import { getEEMarkup } from '@sitecore-jss/sitecore-jss-react';
 
 interface Fields {
   Image: ImageField;
@@ -38,12 +37,12 @@ export const Banner = (props: ImageProps): JSX.Element => {
       ?.replace(`width="${props?.fields?.Image?.value?.width}"`, 'width="100%"')
       .replace(`height="${props?.fields?.Image?.value?.height}"`, 'height="100%"'),
   };
-  const Image = () => (modifyImageProps.editable ? getEEMarkup(modifyImageProps) : null);
+  const id = props.params.RenderingIdentifier;
 
   return (
-    <div className={`component hero-banner ${props.params.styles}`}>
+    <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 ? <Image /> : ''}
+        {sitecoreContext.pageEditing ? <JssImage field={modifyImageProps} /> : ''}
       </div>
     </div>
   );

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

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

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

@@ -19,13 +19,16 @@ const sitemapApi = async (
     siteName: config.jssAppName,
   });
 
+  // if url has sitemap-{n}.xml type. The id - can be null if it's sitemap.xml request
   const sitemapPath = await sitemapXmlService.getSitemap(id as string);
 
+  // if sitemap is match otherwise redirect to 404 page
   if (sitemapPath) {
     const isAbsoluteUrl = sitemapPath.match(ABSOLUTE_URL_REGEXP);
     const sitemapUrl = isAbsoluteUrl ? sitemapPath : `${config.sitecoreApiHost}${sitemapPath}`;
     res.setHeader('Content-Type', 'text/xml;charset=utf-8');
 
+    // need to prepare stream from sitemap url
     return new AxiosDataFetcher()
       .get(sitemapUrl, {
         responseType: 'stream',
@@ -36,7 +39,28 @@ const sitemapApi = async (
       .catch(() => res.redirect('/404'));
   }
 
-  res.redirect('/404');
+  // this approache if user go to /sitemap.xml - under it generate xml page with list of sitemaps
+  const sitemaps = await sitemapXmlService.fetchSitemaps();
+
+  if (!sitemaps.length) {
+    return res.redirect('/404');
+  }
+
+  const SitemapLinks = sitemaps
+    .map(
+      (item) =>
+        `<sitemap>
+            <loc>${item}</loc>
+          </sitemap>
+        `
+    )
+    .join('');
+
+  res.setHeader('Content-Type', 'text/xml;charset=utf-8');
+
+  return res.send(`
+  <sitemapindex xmlns="http://sitemaps.org/schemas/sitemap/0.9" encoding="UTF-8">${SitemapLinks}</sitemapindex>
+  `);
 };
 
 export default sitemapApi;

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

@@ -1,6 +1,6 @@
 {
   "name": "node-headless-ssr-experience-edge-sample",
-  "version": "21.0.0",
+  "version": "21.0.2",
   "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.0.0",
+    "@sitecore-jss/sitecore-jss": "^21.0.2",
     "compression": "^1.7.4",
     "express": "^4.17.1",
     "dotenv": "^16.0.0"

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

@@ -1,6 +1,6 @@
 {
   "name": "node-headless-ssr-proxy-sample",
-  "version": "21.0.0",
+  "version": "21.0.2",
   "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.0.0",
-    "@sitecore-jss/sitecore-jss-proxy": "^21.0.0",
+    "@sitecore-jss/sitecore-jss": "^21.0.2",
+    "@sitecore-jss/sitecore-jss-proxy": "^21.0.2",
     "agentkeepalive": "^4.1.3",
     "compression": "~1.7.3",
     "express": "~4.16.4",

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.0.0",
+  "version": "21.0.2",
   "private": true,
   "config": {
     "appName": "<%- appName %>",
@@ -32,7 +32,7 @@
   "license": "Apache-2.0",
   "dependencies": {
     "@apollo/client": "^3.5.6",
-    "@sitecore-jss/sitecore-jss-react": "^21.0.0",
+    "@sitecore-jss/sitecore-jss-react": "^21.0.2",
     "axios": "^0.21.1",
     "bootstrap": "^4.3.1",
     "cross-fetch": "^3.0.6",
@@ -54,9 +54,9 @@
     "@babel/core": "^7.16.0",
     "@babel/preset-env": "^7.10.4",
     "@babel/register": "~7.6.2",
-    "@sitecore-jss/sitecore-jss-cli": "^21.0.0",
-    "@sitecore-jss/sitecore-jss-dev-tools": "^21.0.0",
-    "@sitecore-jss/sitecore-jss-rendering-host": "^21.0.0",
+    "@sitecore-jss/sitecore-jss-cli": "^21.0.2",
+    "@sitecore-jss/sitecore-jss-dev-tools": "^21.0.2",
+    "@sitecore-jss/sitecore-jss-rendering-host": "^21.0.2",
     "babel-eslint": "^10.1.0",
     "babel-loader": "8.1.0",
     "babel-preset-react-app": "~9.0.2",

package/dist/templates/react/sitecore/definitions/components/GraphQL-IntegratedDemo.sitecore.graphql

@@ -42,8 +42,8 @@ query IntegratedDemoQuery($datasource: String!, $contextItem: String!, $language
   # (as long as the GraphQLData helper is used)
   contextItem: item(path: $contextItem, language: $language) {
     id
-    # Get the page title from the page template
-    ...on <%- helper.getAppPrefix(appPrefix, appName, false) %>Page {
+    # Get the page title from the app route template
+    ...on <%- helper.getAppPrefix(appPrefix, appName, false) %>AppRoute {
       pageTitle {
         value
       }
@@ -56,7 +56,7 @@ query IntegratedDemoQuery($datasource: String!, $contextItem: String!, $language
         # typing fragments can be used anywhere!
         # so in this case, we're grabbing the 'pageTitle'
         # field on all child route items.
-        ...on <%- helper.getAppPrefix(appPrefix, appName, false) %>Page {
+        ...on <%- helper.getAppPrefix(appPrefix, appName, false) %>AppRoute {
           pageTitle {
             jsonValue
             value

package/dist/templates/react/sitecore/definitions/routes.sitecore.js

@@ -28,7 +28,7 @@ export default function addRoutesToManifest(manifest) {
   const appTemplateSection = 'Page Metadata';
 
   manifest.setDefaultRouteType({
-    name: '<%- helper.getAppPrefix(appPrefix, appName) %>Page',
+    name: '<%- helper.getAppPrefix(appPrefix, appName) %>App Route',
     fields: [
       {
         name: 'pageTitle',
@@ -37,7 +37,7 @@ export default function addRoutesToManifest(manifest) {
         type: CommonFieldTypes.SingleLineText,
       },
     ],
-    insertOptions: ['<%- helper.getAppPrefix(appPrefix, appName) %>Page'],
+    insertOptions: ['<%- helper.getAppPrefix(appPrefix, appName) %>App Route'],
   });
 
   return mergeFs('./data/routes') // relative to process invocation (i.e. your package.json)

package/dist/templates/react/src/components/GraphQL-ConnectedDemo/query.graphql

@@ -40,8 +40,8 @@ query ConnectedDemoQuery($datasource: String!, $contextItem: String!, $language:
   # $contextItem should be set to the ID of the current context item (the route item)
   contextItem: item(path: $contextItem, language: $language) {
     id
-    # Get the page title from the page template
-    ...on <%- helper.getAppPrefix(appPrefix, appName, false) %>Page  {
+    # Get the page title from the app route template
+    ...on <%- helper.getAppPrefix(appPrefix, appName, false) %>AppRoute  {
       pageTitle {
         value
       }
@@ -54,7 +54,7 @@ query ConnectedDemoQuery($datasource: String!, $contextItem: String!, $language:
         # typing fragments can be used anywhere!
         # so in this case, we're grabbing the 'pageTitle'
         # field on all child route items.
-        ...on <%- helper.getAppPrefix(appPrefix, appName, false) %>Page  {
+        ...on <%- helper.getAppPrefix(appPrefix, appName, false) %>AppRoute  {
           pageTitle {
             jsonValue
             value

package/dist/templates/react/src/temp/GraphQLFragmentTypes.json

@@ -141,7 +141,7 @@
             "name": "<%- helper.getAppPrefix(appPrefix, appName, false) %>ContentBlock"
           },
           {
-            "name": "C__<%- helper.getAppPrefix(appPrefix, appName, false) %>Page"
+            "name": "C__<%- helper.getAppPrefix(appPrefix, appName, false) %>AppRoute"
           },
           {
             "name": "JsonRendering"
@@ -180,13 +180,13 @@
       },
       {
         "kind": "INTERFACE",
-        "name": "<%- helper.getAppPrefix(appPrefix, appName, false) %>Page",
+        "name": "<%- helper.getAppPrefix(appPrefix, appName, false) %>AppRoute",
         "possibleTypes": [
           {
             "name": "<%- helper.getAppPrefix(appPrefix, appName, false) %>ExampleCustomRouteType"
           },
           {
-            "name": "C__<%- helper.getAppPrefix(appPrefix, appName, false) %>Page"
+            "name": "C__<%- helper.getAppPrefix(appPrefix, appName, false) %>AppRoute"
           }
         ]
       },

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

@@ -1,6 +1,6 @@
 {
   "name": "<%- appName %>",
-  "version": "21.0.0",
+  "version": "21.0.2",
   "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.0.0",
+    "@sitecore-jss/sitecore-jss-react-native": "^21.0.2",
     "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.0.0",
-    "@sitecore-jss/sitecore-jss-dev-tools": "^21.0.0",
+    "@sitecore-jss/sitecore-jss-cli": "^21.0.2",
+    "@sitecore-jss/sitecore-jss-dev-tools": "^21.0.2",
     "babel-core": "^6.26.0",
     "babel-eslint": "^8.2.1",
     "babel-plugin-inline-replace-variables": "^1.3.1",

package/dist/templates/vue/package.json

@@ -1,6 +1,6 @@
 {
   "name": "<%- appName %>",
-  "version": "21.0.0",
+  "version": "21.0.2",
   "description": "Application utilizing Sitecore JavaScript Services and Vue (vue-cli).",
   "private": true,
   "config": {
@@ -48,7 +48,7 @@
   "dependencies": {
     "@apollo/client": "^3.5.6",
     "@panter/vue-i18next": "~0.15.1",
-    "@sitecore-jss/sitecore-jss-vue": "^21.0.0",
+    "@sitecore-jss/sitecore-jss-vue": "^21.0.2",
     "@vue/apollo-composable": "^4.0.0-alpha.12",
     "@vue/apollo-option": "^4.0.0-alpha.11",
     "@vue/apollo-ssr": "^4.0.0-alpha.11",
@@ -67,8 +67,8 @@
   },
   "devDependencies": {
     "@babel/register": "7.6.2",
-    "@sitecore-jss/sitecore-jss-cli": "^21.0.0",
-    "@sitecore-jss/sitecore-jss-dev-tools": "^21.0.0",
+    "@sitecore-jss/sitecore-jss-cli": "^21.0.2",
+    "@sitecore-jss/sitecore-jss-dev-tools": "^21.0.2",
     "@vue/cli-plugin-babel": "~4.5.13",
     "@vue/cli-plugin-eslint": "~4.5.13",
     "@vue/cli-service": "~4.5.13",

package/dist/templates/vue/sitecore/definitions/components/GraphQL-IntegratedDemo.sitecore.graphql

@@ -42,8 +42,8 @@ query IntegratedDemoQuery($datasource: String!, $contextItem: String!, $language
   # (as long as the GraphQLData helper is used)
   contextItem: item(path: $contextItem, language: $language) {
     id
-    # Get the page title from the page template
-    ...on  <%- helper.getAppPrefix(appPrefix, appName, false) %>Page {
+    # Get the page title from the app route template
+    ...on  <%- helper.getAppPrefix(appPrefix, appName, false) %>AppRoute {
       pageTitle {
         value
       }
@@ -56,7 +56,7 @@ query IntegratedDemoQuery($datasource: String!, $contextItem: String!, $language
         # typing fragments can be used anywhere!
         # so in this case, we're grabbing the 'pageTitle'
         # field on all child route items.
-        ...on  <%- helper.getAppPrefix(appPrefix, appName, false) %>Page {
+        ...on  <%- helper.getAppPrefix(appPrefix, appName, false) %>AppRoute {
           pageTitle {
             jsonValue
             value

package/dist/templates/vue/sitecore/definitions/routes.sitecore.js

@@ -22,7 +22,7 @@ export default function addRoutesToManifest(manifest) {
   const appTemplateSection = 'Page Metadata';
 
   manifest.setDefaultRouteType({
-    name: '<%- helper.getAppPrefix(appPrefix, appName) %>Page',
+    name: '<%- helper.getAppPrefix(appPrefix, appName) %>App Route',
     fields: [
       {
         name: 'pageTitle',
@@ -31,7 +31,7 @@ export default function addRoutesToManifest(manifest) {
         type: CommonFieldTypes.SingleLineText,
       },
     ],
-    insertOptions: ['<%- helper.getAppPrefix(appPrefix, appName) %>Page'],
+    insertOptions: ['<%- helper.getAppPrefix(appPrefix, appName) %>App Route'],
   });
 
   return mergeFs('./data/routes') // relative to process invocation (i.e. your package.json)

package/dist/templates/vue/src/components/GraphQL/GraphQL-ConnectedDemo.query.graphql

@@ -40,8 +40,8 @@ query ConnectedDemoQuery($datasource: String!, $contextItem: String!, $language:
   # $contextItem should be set to the ID of the current context item (the route item)
   contextItem: item(path: $contextItem, language: $language) {
     id
-    # Get the page title from the page template
-    ...on  <%- helper.getAppPrefix(appPrefix, appName, false) %>Page {
+    # Get the page title from the app route template
+    ...on  <%- helper.getAppPrefix(appPrefix, appName, false) %>AppRoute {
       pageTitle {
         value
       }
@@ -54,7 +54,7 @@ query ConnectedDemoQuery($datasource: String!, $contextItem: String!, $language:
         # typing fragments can be used anywhere!
         # so in this case, we're grabbing the 'pageTitle'
         # field on all child route items.
-        ...on  <%- helper.getAppPrefix(appPrefix, appName, false) %>Page {
+        ...on  <%- helper.getAppPrefix(appPrefix, appName, false) %>AppRoute {
           pageTitle {
             jsonValue
             value

package/dist/templates/vue/src/temp/GraphQLFragmentTypes.json

@@ -144,7 +144,7 @@
             "name": "<%- helper.getAppPrefix(appPrefix, appName, false) %>ContentBlock"
           },
           {
-            "name": "C__<%- helper.getAppPrefix(appPrefix, appName, false) %>Page"
+            "name": "C__<%- helper.getAppPrefix(appPrefix, appName, false) %>AppRoute"
           },
           {
             "name": "JsonRendering"
@@ -246,13 +246,13 @@
       },
       {
         "kind": "INTERFACE",
-        "name": "<%- helper.getAppPrefix(appPrefix, appName, false) %>Page",
+        "name": "<%- helper.getAppPrefix(appPrefix, appName, false) %>AppRoute",
         "possibleTypes": [
           {
             "name": "<%- helper.getAppPrefix(appPrefix, appName, false) %>ExampleCustomRouteType"
           },
           {
-            "name": "C__<%- helper.getAppPrefix(appPrefix, appName, false) %>Page"
+            "name": "C__<%- helper.getAppPrefix(appPrefix, appName, false) %>AppRoute"
           }
         ]
       },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-sitecore-jss",
-  "version": "21.0.0",
+  "version": "21.0.2",
   "description": "Sitecore JSS initializer",
   "bin": "./dist/index.js",
   "scripts": {
@@ -64,5 +64,5 @@
     "ts-node": "^10.4.0",
     "typescript": "~4.3.5"
   },
-  "gitHead": "e91b32f87b033eb4c26a765590c578fe037e839d"
+  "gitHead": "68120df122eb55a0f0f0776d008c83014a9c3010"
 }