Merge pull request #75 from damiansilbergleithcunniff/cased-replacement-keys

enable alternate replacement keys to control case of replaced strings

Author: CVarisco

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.

src/files.js

@@ -43,14 +43,27 @@ function readFile(path, fileName) {
 
 /**
  * generate the file name
- * @param {string} newFileName
- * @param {string} templateFileName
+ * @param {string} searchString
+ * @param {string} replacement
  */
-function generateFileName(newFileName, templateFileName) {
-  if (templateFileName.includes('COMPONENT_NAME')) {
-    return templateFileName.replace(/COMPONENT_NAME/g, newFileName)
+function replaceKeys(searchString, replacement) {
+  const replacementKeys = {
+    COMPONENT_NAME: replacement,
+    component_name: replacement.toLowerCase(),
+    COMPONENT_CAP_NAME: replacement.toUpperCase(),
+    cOMPONENT_NAME: replacement[0].toLowerCase() + replacement.substr(1),
   }
-  return templateFileName
+
+  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
+    },
+    searchString
+  )
 }
 
 /**
@@ -68,9 +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)
+      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)
     })
@@ -94,8 +108,7 @@ function getFileNames(fileNames = [], componentName) {
 
   const formattedFileNames = Object.keys(fileNames).reduce(
     (acc, curr) => {
-      acc[curr] = fileNames[curr].replace(/COMPONENT_NAME/g, componentName)
-
+      acc[curr] = replaceKeys(fileNames[curr], componentName)
       return acc
     },
     { ...defaultFileNames }