[Nextjs] Use the app name as the prefix value for templates

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
 

packages/sitecore-jss-cli/src/create/index.test.ts

@@ -4,6 +4,7 @@ import {
   applyNameToPackageJson,
   applyHostNameToSitecoreConfig,
   applyNameReplacement,
+  getGqlFormattedName,
 } from './index';
 
 describe('applyNameReplacement', () => {
@@ -207,3 +208,11 @@ describe('applyHostNameToSitecoreConfig', () => {
     expect(result).to.match(/<site ((.|\n|\r)*?)hostName="bar.localhost"/, 'site host name');
   });
 });
+
+describe('getGqlFormattedName', () => {
+  it('should reformat kebab-case to Capitalization case', () => {
+    const result = getGqlFormattedName('my-next-sitecore-app');
+
+    expect(result).to.match(/Mynextsitecoreapp/);
+  });
+});

packages/sitecore-jss-cli/src/create/index.ts

@@ -25,7 +25,7 @@ export function applyNameReplacement(value: string, replaceName: string, withNam
   const escapeLiteral = (literal: string) => {
     return literal.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&');
   };
-  return value.replace(RegExp(escapeLiteral(replaceName), 'g'), withName);
+  return value.replace(RegExp(escapeLiteral(replaceName), 'gi'), withName);
 }
 
 /**
@@ -105,4 +105,77 @@ export function applyNameToProject(
 
       fs.writeFileSync(finalConfigFileName, configXml);
     });
+
+  replacePrefix(projectFolder, name, replaceName);
+}
+
+/**
+ * Returns a string formatted to Uppercase and no hyphens
+ * so my-next-sitecore-app becomes Mynextsitecoreapp
+ * @param {string} name
+ */
+export function getGqlFormattedName(name: string): string {
+  let gqlFormattedName: string = name.split('-').join('');
+  gqlFormattedName = gqlFormattedName.charAt(0).toUpperCase() + gqlFormattedName.slice(1);
+
+  return gqlFormattedName;
+}
+
+/**
+ * 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) {
+  glob.sync(path.join(projectFolder, '**/*.*')).forEach((filePath: string) => {
+    if (filePath.match(/data|sitecore\/definitions|src/)) {
+      let fileContents: string = fs.readFileSync(filePath, 'utf8');
+
+      if (filePath.match('routes/graphql') && fileContents.match(`${prefix}-GraphQL`)) {
+        // in this case there are multiple prefixes on the page to replace,
+        // but some should be gqlFormatted and others shouldn't
+        fileContents = applyNameReplacement(
+          fileContents,
+          `${prefix}-GraphQL-IntegratedDemo`,
+          `${getGqlFormattedName(name)}-GraphQL-IntegratedDemo`
+        );
+        fileContents = applyNameReplacement(
+          fileContents,
+          `${prefix}-GraphQL-ConnectedDemo`,
+          `${getGqlFormattedName(name)}-GraphQL-ConnectedDemo`
+        );
+        fileContents = applyNameReplacement(fileContents, prefix, name);
+        fs.writeFileSync(filePath, fileContents);
+        return;
+      }
+
+      if (fileContents.match(/ConnectedDemo|IntegratedDemo/g)) {
+        // this case is for the GraphQL components that need file renames in addition to
+        // the applyNameReplacement
+        fileContents = applyNameReplacement(fileContents, prefix, getGqlFormattedName(name));
+        fs.writeFileSync(filePath, fileContents);
+
+        // need to change filename here because it's imported in another component
+        const newPath: string = applyNameReplacement(filePath, prefix, getGqlFormattedName(name));
+        fs.renameSync(filePath, newPath);
+        if (filePath.match(/GraphQl/)) {
+          fileContents = applyNameReplacement(fileContents, prefix, getGqlFormattedName(name));
+          fs.writeFileSync(filePath, fileContents);
+        }
+        return;
+      }
+
+      if (filePath.includes(`${prefix}-`)) {
+        fileContents = applyNameReplacement(fileContents, prefix, name);
+        fs.writeFileSync(filePath, fileContents);
+        const newPath: string = applyNameReplacement(filePath, prefix, name);
+        fs.renameSync(filePath, newPath);
+        return;
+      }
+
+      fileContents = applyNameReplacement(fileContents, prefix, name);
+      fs.writeFileSync(filePath, fileContents);
+    }
+  });
 }

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>

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

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

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

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

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)

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:

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: |

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: |

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

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