Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 12 commits into from
Sep 8, 2021
Merged
1 change: 1 addition & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -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

15 changes: 15 additions & 0 deletions packages/sitecore-jss-cli/src/create/index.test.ts
Original file line number Diff line number Diff line change
@@ -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/);
});
});
72 changes: 71 additions & 1 deletion packages/sitecore-jss-cli/src/create/index.ts
Original file line number Diff line number Diff line change
@@ -65,12 +65,14 @@ export function applyHostNameToSitecoreConfig(configXml: string, hostName: strin
* @param {string} name App name
* @param {string} hostName App hostname
* @param {string} replaceName Name value to replace
* @param {string} withPrefix Option to pass to replacePrefix - defaults to false
*/
export function applyNameToProject(
projectFolder: string,
name: string,
hostName: string,
replaceName: string
replaceName: string,
withPrefix?: string
) {
// Apply name to package.json file
console.log(chalk.cyan(`Applying name ${name} to package.json...`));
@@ -105,4 +107,72 @@ export function applyNameToProject(

fs.writeFileSync(finalConfigFileName, configXml);
});

replacePrefix(projectFolder, name, replaceName, withPrefix);
}

/**
* 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
* @param {string} withPrefix if true, replaces prefix with app name in PascalCase,
* otherwise strip the prefix
*/
export function replacePrefix(
projectFolder: string,
name: string,
prefix: string,
withPrefix?: string
) {
const value: boolean = withPrefix?.toLowerCase() === 'true' ? true : false;

if (!value) {
console.log(chalk.cyan('Removing template prefix...'));
name = '';
const prefixWithHyphen = prefix + '-';
glob
.sync(path.join(projectFolder, './{data,sitecore/definitions,src}/**/*.*'))
.forEach((filePath: string) => {
let fileContents: string = fs.readFileSync(filePath, 'utf8');

// remove prefix
fileContents = applyNameReplacement(fileContents, prefixWithHyphen, name);
// need to call applyNameReplacement again with original prefix
// to account for GraphQL queries and associated components
fileContents = applyNameReplacement(fileContents, prefix, name);
fs.writeFileSync(filePath, fileContents);

// remove prefix on the filename
const newPath: string = applyNameReplacement(filePath, prefixWithHyphen, name);
fs.renameSync(filePath, newPath);
});
return;
}

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);
});
}
Original file line number Diff line number Diff line change
@@ -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>
Original file line number Diff line number Diff line change
@@ -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
Original file line number Diff line number Diff line change
@@ -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
Original file line number Diff line number Diff line change
@@ -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
Original file line number Diff line number Diff line change
@@ -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
2 changes: 1 addition & 1 deletion samples/nextjs/data/routes/en.yml
Original file line number Diff line number Diff line change
@@ -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)
8 changes: 4 additions & 4 deletions samples/nextjs/data/routes/graphql/en.yml
Original file line number Diff line number Diff line change
@@ -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:
2 changes: 1 addition & 1 deletion samples/nextjs/data/routes/graphql/sample-1/en.yml
Original file line number Diff line number Diff line change
@@ -2,7 +2,7 @@ fields:
pageTitle: Sample 1 Page Title
placeholders:
jss-main:
- componentName: ContentBlock
- componentName: JssNextWeb-ContentBlock
fields:
heading: GraphQL Sample 1
content: |
2 changes: 1 addition & 1 deletion samples/nextjs/data/routes/graphql/sample-2/en.yml
Original file line number Diff line number Diff line change
@@ -2,7 +2,7 @@ fields:
pageTitle: Sample 2 Page Title
placeholders:
jss-main:
- componentName: ContentBlock
- componentName: JssNextWeb-ContentBlock
fields:
heading: GraphQL Sample 2
content: |
Original file line number Diff line number Diff line change
@@ -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
8 changes: 4 additions & 4 deletions samples/nextjs/data/routes/styleguide/da-DK.yml
Original file line number Diff line number Diff line change
@@ -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
Loading