Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
add-component
Advanced tools
add-component - npm Package Compare versions
Comparing version 2.0.0 to 2.1.0
@@ -8,16 +8,13 @@ const path = require('path') | ||
| function ComponentIndex (rootDirectory, name) { | ||
| const file = path.join(rootDirectory, `index.js`) | ||
| const body = template(name) | ||
| const file = path.join(rootDirectory, 'index.js') | ||
| const templateLocation = '../templates/index.js' | ||
| const body = fs | ||
| .readFileSync(path.join(__dirname, templateLocation), 'utf-8') | ||
| .split('Template') | ||
| .join(toTitleCase(name)) | ||
| .split('template') | ||
| .join(name) | ||
| return fs.writeFileSync(file, body) | ||
| } | ||
| // pretty janky, but we want this whitespace to be reflected in the component. | ||
| function template (name) { | ||
| const proper = toTitleCase(name) | ||
| return `import ${proper} from './${name}.js' | ||
| export default ${proper} | ||
| ` | ||
| } |
@@ -1,40 +0,7 @@ | ||
| const path = require('path') | ||
| const fs = require('fs') | ||
| const toTitleCase = require('titlecase') | ||
| const getTemplate = require('./get-template') | ||
| module.exports = FunctionComponent | ||
| module.exports = PureComponent | ||
| function FunctionComponent (rootDirectory, name, hasCSS) { | ||
| const file = path.join(rootDirectory, `${name}.js`) | ||
| const body = hasCSS ? templateWithCSS(name) : templateWithoutCSS(name) | ||
| return fs.writeFileSync(file, body) | ||
| function PureComponent (rootDirectory, name, hasCSS) { | ||
| return getTemplate(rootDirectory, name, hasCSS, 'functional-component') | ||
| } | ||
| // pretty janky, but we want this whitespace to be reflected in the component. | ||
| function templateWithCSS (name) { | ||
| const proper = toTitleCase(name) | ||
| return `import React from 'react' | ||
| import style from './style.css' | ||
| export default function ${proper} (props) { | ||
| return ( | ||
| <div className={style.container}>${name}</div> | ||
| ) | ||
| } | ||
| ` | ||
| } | ||
| // pretty janky, but we want this whitespace to be reflected in the component. | ||
| function templateWithoutCSS (name) { | ||
| return `import React from 'react' | ||
| export default function ${name} (props) { | ||
| return ( | ||
| <div>${name}</div> | ||
| ) | ||
| } | ||
| ` | ||
| } |
@@ -1,4 +0,2 @@ | ||
| const path = require('path') | ||
| const fs = require('fs') | ||
| const toTitleCase = require('titlecase') | ||
| const getTemplate = require('./get-template') | ||
@@ -8,42 +6,3 @@ module.exports = PureComponent | ||
| function PureComponent (rootDirectory, name, hasCSS) { | ||
| const file = path.join(rootDirectory, `${name}.js`) | ||
| const body = hasCSS ? templateWithCSS(name) : templateWithoutCSS(name) | ||
| return fs.writeFileSync(file, body) | ||
| return getTemplate(rootDirectory, name, hasCSS, 'pure-component') | ||
| } | ||
| // pretty janky, but we want this whitespace to be reflected in the component. | ||
| function templateWithCSS (name) { | ||
| const proper = toTitleCase(name) | ||
| return `import React, { PureComponent } from 'react' | ||
| import style from './style.css' | ||
| class ${proper} extends PureComponent { | ||
| render () { | ||
| return ( | ||
| <div className={style.container}>${name}</div> | ||
| ) | ||
| } | ||
| } | ||
| export default ${proper} | ||
| ` | ||
| } | ||
| // pretty janky, but we want this whitespace to be reflected in the component. | ||
| function templateWithoutCSS (name) { | ||
| return `import React, { PureComponent } from 'react' | ||
| class ${name} extends PureComponent { | ||
| render () { | ||
| return ( | ||
| <div>${name}</div> | ||
| ) | ||
| } | ||
| } | ||
| export default ${name} | ||
| ` | ||
| } |
@@ -9,20 +9,12 @@ const path = require('path') | ||
| const file = path.join(rootDirectory, `${name}.test.js`) | ||
| const body = template(name) | ||
| const templateLocation = '../templates/test.js' | ||
| const body = fs | ||
| .readFileSync(path.join(__dirname, templateLocation), 'utf-8') | ||
| .split('Template') | ||
| .join(toTitleCase(name)) | ||
| .split('template') | ||
| .join(name) | ||
| return fs.writeFileSync(file, body) | ||
| } | ||
| // pretty janky, but we want this whitespace to be reflected in the component. | ||
| function template (name) { | ||
| const proper = toTitleCase(name) | ||
| return `import React from 'react' | ||
| import { shallow } from 'enzyme' | ||
| import ${proper} from './${name}.js' | ||
| it('renders without props', () => { | ||
| shallow(<${proper} />) | ||
| }) | ||
| ` | ||
| } |
@@ -6,8 +6,7 @@ const path = require('path') | ||
| const container = `.container { | ||
| } | ||
| ` | ||
| function StyleSheet (rootDirectory) { | ||
| const templateLocation = '../templates/style.css' | ||
| const body = fs.readFileSync(path.join(__dirname, templateLocation), 'utf-8') | ||
| function StyleSheet (rootDirectory, name) { | ||
| return fs.writeFileSync(path.join(rootDirectory, 'style.css'), container) | ||
| fs.writeFileSync(path.join(rootDirectory, 'style.css'), body) | ||
| } |
22
index.js
@@ -14,2 +14,7 @@ #!/usr/bin/env node | ||
| const ReduxActions = require('./components/redux-actions.js') | ||
| // const ReduxStore = require('./redux/ReduxStore') | ||
| const ReduxActionTypes = require('./components/redux-actionTypes.js') | ||
| const ReduxReducer = require('./components/redux-reducer.js') | ||
| let componentName | ||
@@ -22,2 +27,3 @@ | ||
| .option('-f, --fn', 'Create Function Component') | ||
| .option('-s, --store', 'Create Redux Store') | ||
| .option('-c, --css', `Add ${componentName}.css`) | ||
@@ -32,2 +38,3 @@ .parse(process.argv) | ||
| const makeFn = program.fn | ||
| const createStore = program.store | ||
@@ -38,2 +45,9 @@ if (!fs.existsSync(rootDirectory)) { | ||
| if (createStore) { | ||
| return StoreGen(name, rootDirectory) | ||
| } | ||
| ComponentGen(name, rootDirectory, hasCSS, makeFn) | ||
| } | ||
| function ComponentGen (name, rootDirectory, hasCSS, makeFn) { | ||
| if (hasCSS) { | ||
@@ -54,1 +68,9 @@ StyleSheet(rootDirectory) | ||
| } | ||
| function StoreGen (name, rootDirectory) { | ||
| ReduxActions(rootDirectory, name) | ||
| // ReduxStore(rootDirectory, name) | ||
| ReduxActionTypes(rootDirectory, name) | ||
| ReduxReducer(rootDirectory, name) | ||
| } |
| { | ||
| "name": "add-component", | ||
| "version": "2.0.0", | ||
| "version": "2.1.0", | ||
| "description": "Create React Component CLI", | ||
@@ -19,2 +19,6 @@ "repository": { | ||
| }, | ||
| "scripts": { | ||
| "standard": "standard", | ||
| "test": "standard" | ||
| }, | ||
| "dependencies": { | ||
@@ -39,3 +43,6 @@ "chalk": "~2.1.0", | ||
| "cli" | ||
| ] | ||
| ], | ||
| "devDependencies": { | ||
| "standard": "~10.0.3" | ||
| } | ||
| } |
@@ -15,9 +15,12 @@ # add-component | ||
| # Generate PureComponent and shallow render test | ||
| $ add-component | ||
| $ add-component ${name} | ||
| # Generate PureComponent and shallow render test with stylesheet | ||
| $ add-component -c | ||
| $ add-component ${name} -c | ||
| # Generate Functional Component and shallow render test with stylesheet | ||
| $ add-component -c -f | ||
| $ add-component ${name} -c -f | ||
| # Generate a full redux store | ||
| $ add-component ${name} --store | ||
| ``` | ||
@@ -27,2 +30,5 @@ | ||
| #### Component | ||
| ```sh | ||
@@ -74,4 +80,57 @@ add-component example -c | ||
| #### Redux Store | ||
| ```sh | ||
| add-component count --store | ||
| ``` | ||
| Generates `count` folder with the following: | ||
| `actions.js` | ||
| ```js | ||
| import t from './actionTypes.js' | ||
| export function increment () { | ||
| return { | ||
| type: t.INCREMENT | ||
| } | ||
| } | ||
| ``` | ||
| `actionTypes.js` | ||
| ```js | ||
| export default { | ||
| INCREMENT: 'INCREMENT' | ||
| } | ||
| ``` | ||
| `reducer.js` | ||
| ```js | ||
| import t from './actionTypes' | ||
| const defaultState = { | ||
| count: 0, | ||
| } | ||
| const score = (state = defaultState, action) => { | ||
| switch (action.type) { | ||
| case t.INCREMENT: | ||
| return { | ||
| ...state, | ||
| count: state.count + 1 | ||
| } | ||
| default: | ||
| return state | ||
| } | ||
| } | ||
| export default users | ||
| ``` | ||
| ## License | ||
| MIT © [Jack Hanford](http://jackhanford.com) |
New alerts
License Policy Violation
LicenseThis 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 riskPackage 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
Fixed alerts
License Policy Violation
LicenseThis 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
- increased by42.84%
9500
- Number of package files
- increased by188.89%
26
- Lines of code
- increased by45.7%
220
- Number of lines in readme file
- increased by78.67%
134
- Number of low supply chain risk alerts
- decreased by-16.67%
5
Worsened metrics
- Dev dependency count
- increased byInfinity%
1
- Number of medium supply chain risk alerts
- increased byInfinity%
1
No dependency changes