Sitecore · CobyPear · Sep 8, 2021 · Sep 1, 2021 · Sep 2, 2021 · Sep 3, 2021
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -8,6 +8,7 @@ This project does NOT adhere to [Semantic Versioning](https://semver.org/spec/v2
 ### New Features & Improvements
 
 `[samples/angular]` Language is now preserved when navigating to another page ([#793](https://github.com/Sitecore/jss/pull/793))
+`[samples/nextjs][sitecore-jss-cli]` Prefix added to templates which is replaced on jss create ([#800](https://github.com/Sitecore/jss/pull/800))
 
 ## 19.0.0
 

diff --git a/packages/sitecore-jss-cli/src/create/index.test.ts b/packages/sitecore-jss-cli/src/create/index.test.ts
@@ -4,6 +4,7 @@ import {
   applyNameToPackageJson,
   applyHostNameToSitecoreConfig,
   applyNameReplacement,
+  getPascalCaseName,
 } from './index';
 
 describe('applyNameReplacement', () => {
@@ -207,3 +208,17 @@ describe('applyHostNameToSitecoreConfig', () => {
     expect(result).to.match(/<site ((.|\n|\r)*?)hostName="bar.localhost"/, 'site host name');
   });
 });
+
+describe('getPascalCaseName', () => {
+  it('should reformat kebab-case to PascalCase', () => {
+    const result = getPascalCaseName('my-next-sitecore-app');
+
+    expect(result).to.match(/MyNextSitecoreApp/);
+  });
+
+  it('should reformat one word lowercase app name to be capitalized', () => {
+    const result = getPascalCaseName('onewordappnamenohyphen');
+
+    expect(result).to.match(/Onewordappnamenohyphen/);
+  });
+});
diff --git a/packages/sitecore-jss-cli/src/create/index.ts b/packages/sitecore-jss-cli/src/create/index.ts
@@ -105,4 +105,40 @@ export function applyNameToProject(
 
       fs.writeFileSync(finalConfigFileName, configXml);
     });
+
+  replacePrefix(projectFolder, name, replaceName);
+}
+
+/**
+ * Returns a string formatted to PascalCase
+ * my-next-sitecore-app becomes MyNextSitecoreApp
+ * @param {string} name
+ */
+export function getPascalCaseName(name: string): string {
+  const temp: string[] = name.split('-');
+  name = temp.map((item: string) => (item = item.charAt(0).toUpperCase() + item.slice(1))).join('');
+  return name;
+}
+
+/**
+ * Called during jss create, this function replaces the sample's prefix with the app's name on Sitecore templates
+ * @param {string} projectFolder Project folder
+ * @param {string} name Name value to replace
+ * @param {string} prefix Prefix of the sample app's template - should match Jss[RAV|Next]Web
+ */
+export function replacePrefix(projectFolder: string, name: string, prefix: string) {
+  console.log(chalk.cyan(`Replacing template prefix with ${getPascalCaseName(name)}`));
+  glob
+    .sync(path.join(projectFolder, './{data,sitecore/definitions,src}/**/*.*'))
+    .forEach((filePath: string) => {
+      let fileContents: string = fs.readFileSync(filePath, 'utf8');
+
+      // replace prefix with pascal case app name
+      fileContents = applyNameReplacement(fileContents, prefix, getPascalCaseName(name));
+      fs.writeFileSync(filePath, fileContents);
+
+      // "" on the filename
+      const newPath: string = applyNameReplacement(filePath, prefix, getPascalCaseName(name));
+      fs.renameSync(filePath, newPath);
+    });
 }
diff --git a/samples/nextjs/data/component-content/Styleguide/ContentReuse/LoremIpsumContentBlock/en.yml b/samples/nextjs/data/component-content/Styleguide/ContentReuse/LoremIpsumContentBlock/en.yml
@@ -3,7 +3,7 @@
 # - is under component-content (normally) or content
 # Reuse is accomplished by referencing the content by ID in a route definition.
 id: lorem-ipsum-content-block
-componentName: ContentBlock
+componentName: JssNextWeb-ContentBlock
 displayName: Lorem Ipsum Dolor Sit Amet
 fields:
   content: <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque felis mauris, pretium id neque vitae, vulputate pellentesque tortor. Mauris hendrerit dolor et ipsum lobortis bibendum non finibus neque. Morbi volutpat aliquam magna id posuere. Duis commodo cursus dui, nec interdum velit congue nec. Aliquam erat volutpat. Aliquam facilisis, sapien quis fringilla tincidunt, magna nulla feugiat neque, a consectetur arcu orci eu augue.</p>
diff --git a/samples/nextjs/data/content/Styleguide/ContentListField/Item1/en.yml b/samples/nextjs/data/content/Styleguide/ContentListField/Item1/en.yml
@@ -1,6 +1,6 @@
 id: styleguide-content-list-field-shared-1
 displayName: Styleguide Content List Item 1 (Shared)
 # Template defines the available fields. See /sitecore/definitions/templates/Styleguide-ContentList-Template.sitecore.js
-template: Styleguide-ContentList-Item-Template
+template: JssNextWeb-Styleguide-ContentList-Item-Template
 fields:
   textField: ContentList Demo (Shared) Item 1 Text Field
diff --git a/samples/nextjs/data/content/Styleguide/ContentListField/Item2/en.yml b/samples/nextjs/data/content/Styleguide/ContentListField/Item2/en.yml
@@ -1,6 +1,6 @@
 id: styleguide-content-list-field-shared-2
 displayName: Styleguide Content List Item 2 (Shared)
 # Template defines the available fields. See /sitecore/definitions/templates/Styleguide-ContentList-Template.sitecore.js
-template: Styleguide-ContentList-Item-Template
+template: JssNextWeb-Styleguide-ContentList-Item-Template
 fields:
   textField: ContentList Demo (Shared) Item 2 Text Field
diff --git a/samples/nextjs/data/content/Styleguide/ItemLinkField/Item1/en.yml b/samples/nextjs/data/content/Styleguide/ItemLinkField/Item1/en.yml
@@ -1,6 +1,6 @@
 id: styleguide-item-link-field-shared-1
 displayName: Styleguide Item Link Item 1 (Shared)
 # Template defines the available fields. See /sitecore/definitions/templates/Styleguide-ItemLink-Template.sitecore.js
-template: Styleguide-ItemLink-Item-Template
+template: JssNextWeb-Styleguide-ItemLink-Item-Template
 fields:
   textField: ItemLink Demo (Shared) Item 1 Text Field
diff --git a/samples/nextjs/data/content/Styleguide/ItemLinkField/Item2/en.yml b/samples/nextjs/data/content/Styleguide/ItemLinkField/Item2/en.yml
@@ -1,6 +1,6 @@
 id: styleguide-item-link-field-shared-2
 displayName: Styleguide Item Link Item 2 (Shared)
 # Template defines the available fields. See /sitecore/definitions/templates/Styleguide-ItemLink-Template.sitecore.js
-template: Styleguide-ItemLink-Item-Template
+template: JssNextWeb-Styleguide-ItemLink-Item-Template
 fields:
   textField: ItemLink Demo (Shared) Item 2 Text Field
diff --git a/samples/nextjs/data/routes/en.yml b/samples/nextjs/data/routes/en.yml
@@ -20,7 +20,7 @@ fields:
 # root placeholder names are defined in the package.json config section (required for Sitecore deployment)
 placeholders:
   jss-main:
-    - componentName: ContentBlock
+    - componentName: JssNextWeb-ContentBlock
       fields:
         heading: Welcome to Sitecore JSS
         # to author content in YAML, use _multi-line values_ (prefixed with | + endline)

diff --git a/samples/nextjs/data/routes/graphql/en.yml b/samples/nextjs/data/routes/graphql/en.yml
@@ -2,23 +2,23 @@ fields:
   pageTitle: GraphQL | Sitecore JSS
 placeholders:
   jss-main:
-  - componentName: ContentBlock
+  - componentName: JssNextWeb-ContentBlock
     fields:
       heading: Using GraphQL with JSS
       content: |
         <p>This is a live example of using Integrated GraphQL and Connected GraphQL with a JSS app.
         For more information on GraphQL use in JSS, please see <a href="https://jss.sitecore.com" target="_blank" rel="noopener noreferrer">the documentation</a>.</p>
-  - componentName: GraphQL-Layout
+  - componentName: JssNextWeb-GraphQL-Layout
     placeholders:
       jss-graphql-layout:
-      - componentName: GraphQL-IntegratedDemo
+      - componentName: JssNextWeb-GraphQL-IntegratedDemo
         fields:
           sample1: Hello integrated GraphQL world!
           sample2:
             href: https://www.sitecore.com
             target: _blank
             text: GraphQL lets you get structured field data too
-      - componentName: GraphQL-ConnectedDemo
+      - componentName: JssNextWeb-GraphQL-ConnectedDemo
         fields:
           sample1: Hello connected GraphQL world!
           sample2:

diff --git a/samples/nextjs/data/routes/graphql/sample-1/en.yml b/samples/nextjs/data/routes/graphql/sample-1/en.yml
@@ -2,7 +2,7 @@ fields:
   pageTitle: Sample 1 Page Title
 placeholders:
   jss-main:
-  - componentName: ContentBlock
+  - componentName: JssNextWeb-ContentBlock
     fields:
       heading: GraphQL Sample 1
       content: |

diff --git a/samples/nextjs/data/routes/graphql/sample-2/en.yml b/samples/nextjs/data/routes/graphql/sample-2/en.yml
@@ -2,7 +2,7 @@ fields:
   pageTitle: Sample 2 Page Title
 placeholders:
   jss-main:
-  - componentName: ContentBlock
+  - componentName: JssNextWeb-ContentBlock
     fields:
       heading: GraphQL Sample 2
       content: |

diff --git a/samples/nextjs/data/routes/styleguide/custom-route-type/en.yml b/samples/nextjs/data/routes/styleguide/custom-route-type/en.yml
@@ -1,5 +1,5 @@
 # Using a Custom Route Type enables adding more field data to the route level.
-template: ExampleCustomRouteType
+template: JssNextWeb-ExampleCustomRouteType
 fields:
   # Note that custom route types inherit from the default route type automatically.
   # This is what makes the `pageTitle` field available here, when it's not defined on the custom route type.
@@ -9,4 +9,4 @@ fields:
   content: <p>Custom route type fields are good for things like articles, where you may wish to have a filter UI on content fields, such as author or category. Route level fields are easy to query against, whereas component-level fields are not because it's possible to remove a component from a route. Note that route level fields <em>cannot be personalized</em> because you cannot conditionally swap out the route item for a different content item.</p>
 placeholders:
   jss-main:
-  - componentName: Styleguide-CustomRouteType
+  - componentName: JssNextWeb-Styleguide-CustomRouteType
diff --git a/samples/nextjs/data/routes/styleguide/da-DK.yml b/samples/nextjs/data/routes/styleguide/da-DK.yml
@@ -2,7 +2,7 @@ fields:
   pageTitle: Styleguide | Sitecore JSS
 placeholders:
   jss-main:
-  - componentName: ContentBlock
+  - componentName: JssNextWeb-ContentBlock
     fields:
       heading: JSS Styleguide
       content: |
@@ -11,15 +11,15 @@ placeholders:
           Use the <a href="/en/styleguide">English version</a> for full content.
         </div>
         <p>Indholdet og layoutet på denne side er defineret i <code>/data/routes/styleguide/da-DK.yml</code></p>
-  - componentName: Styleguide-Layout
+  - componentName: JssNextWeb-Styleguide-Layout
     placeholders:
       jss-styleguide-layout:
-      - componentName: Styleguide-Section
+      - componentName: JssNextWeb-Styleguide-Section
         fields:
           heading: Flersprogede mønstre
         placeholders:
           jss-styleguide-section:
-          - componentName: Styleguide-Multilingual
+          - componentName: JssNextWeb-Styleguide-Multilingual
             fields:
               heading: Brug af ordbogen
               sample: Denne tekst kan oversættes til da-DK.yml