From 8ad3b26f4f93718d23bc4d928d39bba8a39aa92d Mon Sep 17 00:00:00 2001 From: Damian Silbergleith Cunniff Date: Mon, 12 Mar 2018 07:01:18 -0700 Subject: [PATCH 1/6] enable alternate replacement keys to control case of replaced strings --- src/files.js | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) diff --git a/src/files.js b/src/files.js index 534714f..ae9839a 100644 --- a/src/files.js +++ b/src/files.js @@ -50,6 +50,15 @@ function generateFileName(newFileName, templateFileName) { if (templateFileName.includes('COMPONENT_NAME')) { return templateFileName.replace(/COMPONENT_NAME/g, newFileName) } + if (templateFileName.includes('component_name')) { + return templateFileName.replace(/component_name/g, newFileName.toLowerCase()) + } + if (templateFileName.includes('COMPONENT_CAP_NAME')) { + return templateFileName.replace(/COMPONENT_CAP_NAME/g, newFileName.toUpperCase()) + } + if (templateFileName.includes('cOMPONENT_NAME')) { + return templateFileName.replace(/cOMPONENT_NAME/g, newFileName[0].toLowerCase() + newFileName.substr(1)) + } return templateFileName } @@ -69,6 +78,9 @@ async function generateFilesFromTemplate({ name, path, templatesPath }) { // Get the template content const content = await readFile(templatesPath, templateFileName) const replaced = content.replace(/COMPONENT_NAME/g, name) + .replace(/component_name/g, name.toLowerCase()) + .replace(/COMPONENT_CAP_NAME/g, name.toUpperCase()) + .replace(/cOMPONENT_NAME/g, name[0].toLowerCase() + name.substr(1)) // Exist ? const newFileName = generateFileName(name, templateFileName) // Write the new file with the new content @@ -95,7 +107,9 @@ function getFileNames(fileNames = [], componentName) { const formattedFileNames = Object.keys(fileNames).reduce( (acc, curr) => { acc[curr] = fileNames[curr].replace(/COMPONENT_NAME/g, componentName) - + .replace(/component_name/g, componentName.toLowerCase()) + .replace(/COMPONENT_CAP_NAME/g, componentName.toUpperCase()) + .replace(/cOMPONENT_NAME/g, componentName[0].toUpperCase() + componentName.substr(1)) return acc }, { ...defaultFileNames } From 8b7603c284a0d18b2baf221d355b7adacadb8d4e Mon Sep 17 00:00:00 2001 From: Damian Silbergleith Cunniff Date: Mon, 12 Mar 2018 07:10:44 -0700 Subject: [PATCH 2/6] clear ci/cd issue with too many returns --- src/files.js | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/src/files.js b/src/files.js index ae9839a..5d46a0d 100644 --- a/src/files.js +++ b/src/files.js @@ -47,19 +47,20 @@ function readFile(path, fileName) { * @param {string} templateFileName */ function generateFileName(newFileName, templateFileName) { + let generatedFileName = templateFileName; if (templateFileName.includes('COMPONENT_NAME')) { - return templateFileName.replace(/COMPONENT_NAME/g, newFileName) + generatedFileName = templateFileName.replace(/COMPONENT_NAME/g, newFileName) } if (templateFileName.includes('component_name')) { - return templateFileName.replace(/component_name/g, newFileName.toLowerCase()) + generatedFileName = templateFileName.replace(/component_name/g, newFileName.toLowerCase()) } if (templateFileName.includes('COMPONENT_CAP_NAME')) { - return templateFileName.replace(/COMPONENT_CAP_NAME/g, newFileName.toUpperCase()) + generatedFileName = templateFileName.replace(/COMPONENT_CAP_NAME/g, newFileName.toUpperCase()) } if (templateFileName.includes('cOMPONENT_NAME')) { - return templateFileName.replace(/cOMPONENT_NAME/g, newFileName[0].toLowerCase() + newFileName.substr(1)) + generatedFileName = templateFileName.replace(/cOMPONENT_NAME/g, newFileName[0].toLowerCase() + newFileName.substr(1)) } - return templateFileName + return generatedFileName } /** From 2c27e196cfccef27fac03c9e7101ee168fe3e04e Mon Sep 17 00:00:00 2001 From: Damian Silbergleith Cunniff Date: Mon, 12 Mar 2018 07:12:10 -0700 Subject: [PATCH 3/6] remove extra semi colon --- src/files.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/files.js b/src/files.js index 5d46a0d..8a821b3 100644 --- a/src/files.js +++ b/src/files.js @@ -47,7 +47,7 @@ function readFile(path, fileName) { * @param {string} templateFileName */ function generateFileName(newFileName, templateFileName) { - let generatedFileName = templateFileName; + let generatedFileName = templateFileName if (templateFileName.includes('COMPONENT_NAME')) { generatedFileName = templateFileName.replace(/COMPONENT_NAME/g, newFileName) } From ac33cf77d776aa48f8a067771f6324ebba4aab14 Mon Sep 17 00:00:00 2001 From: Damian Silbergleith Cunniff Date: Fri, 16 Mar 2018 07:33:31 -0700 Subject: [PATCH 4/6] use reduce method to process filenames --- src/files.js | 29 ++++++++++++++++------------- 1 file changed, 16 insertions(+), 13 deletions(-) diff --git a/src/files.js b/src/files.js index 8a821b3..4dc08b6 100644 --- a/src/files.js +++ b/src/files.js @@ -47,20 +47,23 @@ function readFile(path, fileName) { * @param {string} templateFileName */ function generateFileName(newFileName, templateFileName) { - let generatedFileName = templateFileName - if (templateFileName.includes('COMPONENT_NAME')) { - generatedFileName = templateFileName.replace(/COMPONENT_NAME/g, newFileName) + const replacementKeys = { + COMPONENT_NAME: newFileName, + component_name: newFileName.toLowerCase(), + COMPONENT_CAP_NAME: newFileName.toUpperCase(), + cOMPONENT_NAME: newFileName[0].toLowerCase() + newFileName.substr(1), } - if (templateFileName.includes('component_name')) { - generatedFileName = templateFileName.replace(/component_name/g, newFileName.toLowerCase()) - } - if (templateFileName.includes('COMPONENT_CAP_NAME')) { - generatedFileName = templateFileName.replace(/COMPONENT_CAP_NAME/g, newFileName.toUpperCase()) - } - if (templateFileName.includes('cOMPONENT_NAME')) { - generatedFileName = templateFileName.replace(/cOMPONENT_NAME/g, newFileName[0].toLowerCase() + newFileName.substr(1)) - } - return generatedFileName + + return Object.keys(replacementKeys).reduce( + (acc, curr) => { + if (acc.includes(curr)) { + const regEx = new RegExp(curr, 'g') + return acc.replace(regEx, replacementKeys[curr]) + } + return acc + }, + templateFileName + ) } /** From 038cde44004ff31223436a254bd08e794451c401 Mon Sep 17 00:00:00 2001 From: Damian Silbergleith Cunniff Date: Fri, 16 Mar 2018 18:45:00 -0700 Subject: [PATCH 5/6] functionalize replacement and simplify calls --- src/files.js | 29 ++++++++++++----------------- 1 file changed, 12 insertions(+), 17 deletions(-) diff --git a/src/files.js b/src/files.js index 4dc08b6..99cf494 100644 --- a/src/files.js +++ b/src/files.js @@ -43,15 +43,15 @@ function readFile(path, fileName) { /** * generate the file name - * @param {string} newFileName - * @param {string} templateFileName + * @param {string} searchString + * @param {string} replacement */ -function generateFileName(newFileName, templateFileName) { +function replaceKeys(searchString, replacement) { const replacementKeys = { - COMPONENT_NAME: newFileName, - component_name: newFileName.toLowerCase(), - COMPONENT_CAP_NAME: newFileName.toUpperCase(), - cOMPONENT_NAME: newFileName[0].toLowerCase() + newFileName.substr(1), + COMPONENT_NAME: replacement, + component_name: replacement.toLowerCase(), + COMPONENT_CAP_NAME: replacement.toUpperCase(), + cOMPONENT_NAME: replacement[0].toLowerCase() + replacement.substr(1), } return Object.keys(replacementKeys).reduce( @@ -62,7 +62,7 @@ function generateFileName(newFileName, templateFileName) { } return acc }, - templateFileName + searchString ) } @@ -81,12 +81,10 @@ async function generateFilesFromTemplate({ name, path, templatesPath }) { files.map(async (templateFileName) => { // Get the template content const content = await readFile(templatesPath, templateFileName) - const replaced = content.replace(/COMPONENT_NAME/g, name) - .replace(/component_name/g, name.toLowerCase()) - .replace(/COMPONENT_CAP_NAME/g, name.toUpperCase()) - .replace(/cOMPONENT_NAME/g, name[0].toLowerCase() + name.substr(1)) + const replaced = replaceKeys(content, name) + // Exist ? - const newFileName = generateFileName(name, templateFileName) + const newFileName = replaceKeys(templateFileName, name) // Write the new file with the new content fs.outputFile(`${outputPath}/${newFileName}`, replaced) }) @@ -110,10 +108,7 @@ function getFileNames(fileNames = [], componentName) { const formattedFileNames = Object.keys(fileNames).reduce( (acc, curr) => { - acc[curr] = fileNames[curr].replace(/COMPONENT_NAME/g, componentName) - .replace(/component_name/g, componentName.toLowerCase()) - .replace(/COMPONENT_CAP_NAME/g, componentName.toUpperCase()) - .replace(/cOMPONENT_NAME/g, componentName[0].toUpperCase() + componentName.substr(1)) + acc[curr] = replaceKeys(fileNames[curr], componentName) return acc }, { ...defaultFileNames } From 56331407154e39fab43f077d78c8b7bbeb3e2718 Mon Sep 17 00:00:00 2001 From: Damian Silbergleith Cunniff Date: Mon, 19 Mar 2018 06:20:23 -0700 Subject: [PATCH 6/6] add documentation --- docs/CUSTOM-TEMPLATES.md | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/docs/CUSTOM-TEMPLATES.md b/docs/CUSTOM-TEMPLATES.md index 7b596f7..0303de3 100644 --- a/docs/CUSTOM-TEMPLATES.md +++ b/docs/CUSTOM-TEMPLATES.md @@ -2,6 +2,17 @@ With this library you can create your own templates and use them to generate your components in a second! +`create-component-app` offers 4 replacement keys which can be used in the names of the files in your template, as well as within the templates themselves. Each key corresponds to a formatted transformation of the component name that you enter when running `create-component-app`. + +#### Keys and Replacements + Replacement Key | Description + --- | --- + `COMPONENT_NAME` | Each instance of the string is replaced with the component name that you entered without modification. This is the standard behavior. (eg: `MyComponent` => `MyComponent` and replaces all instances of `COMPONENT_NAME` in files and file names.) + `COMPONENT_CAP_NAME` | Each instance of the string is replaced with an uppercased transformation of the component name that you entered. (eg: `MyComponent` => `MYCOMPONENTNAME` and replaces all instances of `COMPONENT_CAP_NAME` in files and file names.) + `component_name` | Each instance of the string is replaced with a lowercased transformation of the component name that you entered. (eg: `MyComponent` => `mycomponentname` and replaces all instances of `component_name` in files and file names.) + `cOMPONENT_NAME` | Each instance of the string is replaced with a lower camel case transformation of the component name that you entered. For clarity, the first letter is simply lowercased. (eg: `MyComponent` => `myComponent` and replaces all instances of `cOMPONENT_NAME` in files and file names.) + + ### 1) Create your custom template folder Create a folder to contain all your custom templates.