Permalink
Browse files

Add ability to use flag to specify whether new components should be s…

…caffolded using the "React Functional Component" or "React Class Component" template
  • Loading branch information...
anastasiya29 committed Jan 25, 2019
1 parent 673b077 commit b64700157f0449542729ccaf2dd675c6a9c59e42
Showing with 55 additions and 17 deletions.
  1. +15 −17 scripts/scaffold-component.js
  2. +40 −0 scripts/scaffold-templates.js
@@ -9,6 +9,7 @@
const fs = require('fs');
const path = require('path');
const chalk = require('chalk');
const getTemplate = require('./scaffold-templates').getTemplate;

/*
SCAFFOLDING SCRIPT
@@ -36,7 +37,19 @@ if (fs.existsSync(componentManifestDefinitionsPath)) {
);
}

const componentOutputPath = scaffoldComponent();
/*
Components can be created from different scaffolding templates.
Use flags when calling the `jss scaffold` command to speficiy which template to use.
Supported flags:
* --template=rfc - use template for react functional component
* --template=rcc - use template for react class component
*/
let template = process.argv.find((arg) => arg.indexOf('--template') === 0);
if (template) {
template = template.split('=')[1];
}

const componentOutputPath = scaffoldComponent(getTemplate(componentName, template));

console.log();
console.log(chalk.green(`Component ${componentName} has been scaffolded.`));
@@ -70,22 +83,7 @@ if (manifestOutputPath) {
TEMPLATING FUNCTIONS
*/

function scaffoldComponent() {
const exportVarName = componentName.replace(/[^\w]+/g, '');

const componentTemplate = `import React from 'react';
import { Text } from '@sitecore-jss/sitecore-jss-react';
const ${exportVarName} = (props) => (
<div>
<p>${componentName} Component</p>
<Text field={props.fields.heading} />
</div>
);
export default ${exportVarName};
`;

function scaffoldComponent(componentTemplate) {
const outputDirectoryPath = path.join(componentRootPath, componentName);

if (fs.existsSync(outputDirectoryPath)) {
@@ -0,0 +1,40 @@
module.exports.getTemplate = (componentName, template) => {
const exportVarName = componentName.replace(/[^\w]+/g, '');
const templates = {

// Template for React Class Component
rcc: `import React, { Component } from 'react';
import { Text } from '@sitecore-jss/sitecore-jss-react';
export default class ${exportVarName} extends Component {
render() {
return <div>
<p>${componentName} Component</p>
<Text field={this.props.fields.heading} />
</div>
}
};
`,

// Template for React Functional Component
rfc: `import React from 'react';
import { Text } from '@sitecore-jss/sitecore-jss-react';
const ${exportVarName} = (props) => (
<div>
<p>${componentName} Component</p>
<Text field={props.fields.heading} />
</div>
);
export default ${exportVarName};
`
};

if (templates.hasOwnProperty(template)) {
return templates[template]
}

console.log('No component template or invalid template specified, using React Functional Component template.');
return templates.rfc;
};

0 comments on commit b647001

Please sign in to comment.