add-component - npm Package Compare versions

Comparing version 2.3.0 to 2.4.0

components/component-index.js

@@ -7,8 +7,11 @@ const path = require('path')
 
-function ComponentIndex (rootDirectory, name) {
-  const file = path.join(rootDirectory, 'index.js')
-  const templateLocation = '../templates/index.js'
+function ComponentIndex (dir, name, techConfig) {
+  let fileName = techConfig.fileName
+  try {
+    fileName = eval(fileName)
+  } catch (e) {}
+  const file = path.join(dir, fileName)
 
   const body = fs
-    .readFileSync(path.join(__dirname, templateLocation), 'utf-8')
+    .readFileSync(techConfig.template, 'utf-8')
     .split('Template')
@@ -15,0 +18,0 @@ .join(toTitleCase(name))

components/redux-actions.js

@@ -1,7 +0,17 @@
-const getTemplate = require('./get-template')
+const path = require('path')
+const fs = require('fs')
 
 module.exports = ReduxActions
 
-function ReduxActions (rootDirectory, name, hasCSS) {
-  return getTemplate(rootDirectory, 'actions', hasCSS, 'action')
+function ReduxActions (dir, name, techConfig) {
+  let fileName = techConfig.fileName
+  try {
+    fileName = eval(fileName)
+  } catch (e) {}
+  const file = path.join(dir, fileName)
+
+  const body = fs
+    .readFileSync(techConfig.template, 'utf-8')
+
+  return fs.writeFileSync(file, body)
 }

components/redux-actionTypes.js

@@ -1,7 +0,17 @@
-const getTemplate = require('./get-template')
+const path = require('path')
+const fs = require('fs')
 
 module.exports = ReduxActionTypes
 
-function ReduxActionTypes (rootDirectory, name, hasCSS) {
-  return getTemplate(rootDirectory, 'actionTypes', hasCSS, 'actionTypes')
+function ReduxActionTypes (dir, name, techConfig) {
+  let fileName = techConfig.fileName
+  try {
+    fileName = eval(fileName)
+  } catch (e) {}
+  const file = path.join(dir, fileName)
+
+  const body = fs
+    .readFileSync(techConfig.template, 'utf-8')
+
+  return fs.writeFileSync(file, body)
 }

components/redux-reducer.js

@@ -1,7 +0,17 @@
-const getTemplate = require('./get-template')
+const path = require('path')
+const fs = require('fs')
 
 module.exports = ReduxReducer
 
-function ReduxReducer (rootDirectory, name) {
-  return getTemplate(rootDirectory, 'reducer', false, 'reducer')
+function ReduxReducer (dir, name, techConfig) {
+  let fileName = techConfig.fileName
+  try {
+    fileName = eval(fileName)
+  } catch (e) {}
+  const file = path.join(dir, fileName)
+
+  const body = fs
+    .readFileSync(techConfig.template, 'utf-8')
+
+  return fs.writeFileSync(file, body)
 }

components/shallow-render.js

@@ -7,8 +7,11 @@ const path = require('path')
 
-function ShallowRenderTest (rootDirectory, name) {
-  const file = path.join(rootDirectory, `${name}.test.js`)
-  const templateLocation = '../templates/test.js'
+function ShallowRenderTest (dir, name, techConfig) {
+  let fileName = techConfig.fileName
+  try {
+    fileName = eval(fileName)
+  } catch (e) {}
+  const file = path.join(dir, fileName)
 
   const body = fs
-    .readFileSync(path.join(__dirname, templateLocation), 'utf-8')
+    .readFileSync(techConfig.template, 'utf-8')
     .split('Template')
@@ -15,0 +18,0 @@ .join(toTitleCase(name))

components/stylesheet.js

@@ -6,7 +6,16 @@ const path = require('path')
 
-function StyleSheet (rootDirectory) {
-  const templateLocation = '../templates/style.css'
-  const body = fs.readFileSync(path.join(__dirname, templateLocation), 'utf-8')
+function StyleSheet (dir, name, techConfig) {
+  let fileName = techConfig.fileName
+  try {
+    fileName = eval(fileName)
+  } catch (e) {}
+  const file = path.join(dir, fileName)
 
-  fs.writeFileSync(path.join(rootDirectory, 'style.css'), body)
+  const body = fs.readFileSync(techConfig.template, 'utf-8')
+
+  fs.writeFileSync(file, body)
+
+  return {
+    toImport: [ `import style from './${techConfig.fileName}'` ]
+  }
 }

index.js

@@ -7,13 +7,4 @@ #!/usr/bin/env node
 const chalk = require('chalk')
+const deepmerge = require('deepmerge')
 
-const ComponentIndex = require('./components/component-index')
-const PureComponent = require('./components/pure-component')
-const StyleSheet = require('./components/stylesheet')
-const ShallowRender = require('./components/shallow-render')
-const FunctionComponent = require('./components/function-component')
-
-const ReduxActions = require('./components/redux-actions.js')
-const ReduxActionTypes = require('./components/redux-actionTypes.js')
-const ReduxReducer = require('./components/redux-reducer.js')
-
 let componentName
@@ -27,12 +18,106 @@
   .option('-r, --redux', 'Create Redux Store')
-  .option('-c, --css', `Add ${componentName}.css`)
   .option('-d, --directory <directory>', 'Use directory')
+  .option('--no-index', 'Without index file')
+  .option('-c, --css [css]', 'Add styling')
+  .option('--config [config]', 'Custom configuration')
   .parse(process.argv)
 
+const config = getConfig(program.config)
+
+function getConfig (customConfigPath) {
+
+  // get default config
+  const defaultConfig = require('./config.js')
+
+  let customConfig = {}
+  if (customConfigPath) {
+    customConfig = require(path.resolve(customConfigPath))
+  }
+
+  let commonConfig =  deepmerge(defaultConfig, customConfig)
+
+  // adjust config according to given options
+
+  // define techs to generate by default
+  if (!commonConfig.techsToGen) {
+    commonConfig.techsToGen = Object.keys(commonConfig.techs)
+
+  }
+
+  // include redux technologies if there was no option
+  if (program.redux) {
+    if (commonConfig.techsToGen.indexOf('redux-actions') === -1) {
+      commonConfig.techsToGen.push('redux-actions')
+    }
+    if (commonConfig.techsToGen.indexOf('redux-actiontypes') === -1) {
+      commonConfig.techsToGen.push('redux-actiontypes')
+    }
+    if (commonConfig.techsToGen.indexOf('redux-reducer') === -1) {
+      commonConfig.techsToGen.push('redux-reducer')
+    }
+  }
+
+  // remove CSS technologies if they are not needed
+  // do not remove if they are specified in config
+  if (!program.css) {
+    // do nothing
+  }
+  else if (program.css === 'css' || program.css === true) {
+    // leave only original CSS technology
+    if (commonConfig.techsToGen.indexOf('css') === -1) {
+      commonConfig.techsToGen.push('css')
+    }
+    Object.keys(commonConfig.techs).forEach(function (techName) {
+      if (commonConfig.techs[techName].cliOption === 'css'  && commonConfig.techsToGen.indexOf(techName) !== -1) {
+        commonConfig.techsToGen.splice(commonConfig.techsToGen.indexOf(techName), 1)
+      }
+    })
+  } else {
+    // leave only specific CSS technology
+    if (commonConfig.techsToGen.indexOf(program.css) === -1) {
+      commonConfig.techsToGen.push(program.css)
+    }
+    Object.keys(commonConfig.techs).forEach(function (techName) {
+      if (techName === 'css' && commonConfig.techsToGen.indexOf('css') !== -1) {
+        commonConfig.techsToGen.splice(commonConfig.techsToGen.indexOf('css'), 1)
+      } else if (techName !== program.css && commonConfig.techs[techName].cliOption === 'css' && commonConfig.techsToGen.indexOf(techName) !== -1) {
+        commonConfig.techsToGen.splice(commonConfig.techsToGen.indexOf(techName), 1)
+      }
+    })
+  }
+
+  // filter out technologies
+  if (commonConfig.techsToGen) {
+    Object.keys(commonConfig.techs).forEach(function (techName) {
+      if (commonConfig.techsToGen.indexOf(techName) === -1) {
+        delete commonConfig.techs[techName]
+      }
+    })
+  }
+
+  // rewrite directory
+  if (program.directory) {
+    commonConfig.directory = program.directory
+  }
+
+  if (program.fn) {
+   // make functional component
+   if (commonConfig.techs['react']) {
+     commonConfig.techs['react'].template = commonConfig.techs['react'].functionalTemplate
+   }
+  }
+
+  // change main file to index or not
+  if (!program.index) {
+    commonConfig.techs['react'].fileName = 'index.js'
+    delete commonConfig.techs['index']
+  }
+
+  return commonConfig
+}
+
 createComponent(componentName)
 
 function createComponent (name) {
-  const rootDirectory = program.directory ? path.join(path.resolve(program.directory), name) : path.resolve(name)
-  const hasCSS = program.css
-  const makeFn = program.fn
+  const rootDirectory = path.join(path.resolve(config.directory), name)
   const createStore = program.store
@@ -47,19 +132,34 @@
   }
-  ComponentGen(name, rootDirectory, hasCSS, makeFn)
+  ComponentGen(name, rootDirectory, config)
 }
 
-function ComponentGen (name, rootDirectory, hasCSS, makeFn) {
-  if (hasCSS) {
-    StyleSheet(rootDirectory)
+function ComponentGen (name, rootDirectory, config) {
+  function TechGen (techConfig) {
+    if (techConfig.generator) {
+      const generator = require(techConfig.generator)
+      const generated = generator(rootDirectory, name, techConfig, toImport)
+      if (generated && generated.toImport) {
+        toImport = toImport.concat(generated.toImport)
+      }
+    }
   }
 
-  if (makeFn) {
-    FunctionComponent(rootDirectory, name, hasCSS)
-  } else {
-    PureComponent(rootDirectory, name, hasCSS)
+  let toImport = [],
+      lastToGenerate
+
+  Object.keys(config.techs).forEach(function(techName) {
+    const tech = config.techs[techName]
+    if (tech.last) {
+      // generate it later
+      lastToGenerate = tech
+      return
+    } else {
+      TechGen(tech)
+    }
+  })
+
+  if (lastToGenerate) {
+    TechGen(lastToGenerate)
   }
 
-  ComponentIndex(rootDirectory, name)
-  ShallowRender(rootDirectory, name)
-
   console.log(chalk.green(`Component ${chalk.blue.underline.bold(name)} created`))
@@ -66,0 +166,0 @@ }

package.json

 {
   "name": "add-component",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "description": "Create React Component CLI",
@@ -26,2 +26,3 @@ "repository": {
     "commander": "~2.9.0",
+    "deepmerge": "^2.0.1",
     "mkdirp": "~0.5.1",
@@ -28,0 +29,0 @@ "titlecase": "~1.1.2"

README.md

@@ -24,3 +24,3 @@ # add-component
 # Generate a full redux store
-$ add-component ${name} --store
+$ add-component ${name} --redux
 ```
@@ -82,3 +82,3 @@
 ```sh
-add-component count --store
+add-component count --redux
 ```
@@ -137,7 +137,44 @@ Generates `count` folder with the following:
 $ add-react-component -d src Example
+
+# Creates component with styled-components as styling solution
+$ add-react-component -c styled-components Example
+
+# Does not use summary index.js but puts component into it
+$ add-react-component --no-index Example
 ```
 
+## Configuration
 
+You can define all the options in configuration file. Also, with configuration, you can redefine technology
+generators, technology templates and filenames. Look into `config.js` to find out what cat be setted.
+
+```
+# Run with configuration
+$ add-react-component --config .add-component/config.js Example
+
+# Example of configuration
+$ cat .add-component/config.js
+
+const path = require('path')
+
+module.exports = {
+  techsToGen: [
+    'styled-components',
+    'react',
+    'storybook',
+  ],
+  techs: {
+    'react': {
+      fileName: 'index.js'
+    },
+   'storybook': {
+      template: path.resolve(__dirname, './storybook-template.js')
+    }
+  },
+  directory: './src',
+}
+```
+
 ## License
 
 MIT © [Jack Hanford](http://jackhanford.com)

templates/functional-component.js

 import React from 'react'
 
+// Imports
+
 function Template (props) {
@@ -4,0 +6,0 @@ return <div>Template</div>

templates/pure-component.js

 import React, { PureComponent } from 'react'
 
+// Imports
+
 class Template extends PureComponent {
@@ -4,0 +6,0 @@ render () {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Uses eval

Supply chain risk

Package uses dynamic code execution (e.g., eval()), which is a dangerous practice. This can prevent the code from running in certain environments and increases the risk that the code may contain exploits or malicious behavior.

Found 1 instance in 1 package

Dynamic require

Supply chain risk

Dynamic require can indicate the package is performing dangerous or unsafe dynamic code execution.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

16067

increased by74.72%

Lines of code

404

increased by108.25%

Number of lines in readme file

178

increased by26.24%

Worsened metrics

Dependency count

5

increased by25%

Number of low supply chain risk alerts

12

increased by140%

Number of medium supply chain risk alerts

10

increased byInfinity%

Dependency changes

• + Addeddeepmerge@^2.0.1

• + Addeddeepmerge@2.2.1(transitive)