Create a gist now

Instantly share code, notes, and snippets.

Embed
import './style.scss'
import React, { PropTypes } from 'react'
export default class {{ componentName }} extends React.Component {
static propTypes = {
};
static defaultProps = {
};
render () {
return (
<div className='{{camelCase componentName}}'>
</div>
)
}
}
@import "~styles/colors.scss";
.{{camelCase componentName}} {
}
'use strict'
module.exports = function (plop) {
plop.setGenerator('component', {
description: 'Generate a new component',
prompts: [
{
type: 'input',
name: 'componentName',
message: 'What is the name of the new component?',
validate: (value) => {
if (/.+/.test(value.trim())) { return true }
return 'Component name is required.'
}
}
],
actions: [
{
type: 'add',
path: 'src/client/components/{{componentName}}/index.jsx',
templateFile: 'plopTemplates/component.jsx.hbs',
abortOnFail: true,
},
{
type: 'add',
path: 'src/client/components/{{componentName}}/style.scss',
templateFile: 'plopTemplates/component.scss.hbs',
abortOnFail: true,
},
function customAction (answers) {
// inserts a line into index.js while maintaining alphabetical sort.
const fs = require('fs')
const toAdd = plop.renderString("export { default as {{componentName}} } from './{{componentName}}'", answers)
let imports = fs.readFileSync('src/client/components/index.js', 'utf8')
.split('\n').slice(0, -1) // chop off the trailing blank line
imports.push(toAdd)
imports = imports.sort()
imports.push('') // add a trailing blank line
fs.writeFileSync('src/client/components/index.js', imports.join('\n'), 'utf8')
return 'add component to components/index.js'
}
],
})
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment