diff --git a/args.js b/args.js index 27bba11..354845e 100644 --- a/args.js +++ b/args.js @@ -1,22 +1,24 @@ module.exports = { dependencies: [ - 'i', - 'react', - 'react-dom', - 'prop-types', - 'webpack', - 'css-loader', - 'style-loader', - 'file-loader', + "i", + "react", + "react-dom", + "webpack", + "prop-types", + "css-loader", + "style-loader", + "file-loader" ], devDependencies: [ - 'i', - '--save-dev', - 'babel-cli', - 'babel-core', - 'babel-loader', - 'babel-plugin-transform-object-rest-spread', - 'babel-plugin-transform-react-jsx', - 'babel-preset-env', - ], + "i", + "--save-dev", + "babel-cli", + "babel-core", + "babel-loader", + "babel-plugin-transform-object-rest-spread", + "babel-plugin-transform-react-jsx", + "babel-preset-env", + "babel-plugin-transform-class-properties", + "eslint-plugin-class-property" + ] }; diff --git a/index.js b/index.js index 9b2cf30..aad35fe 100755 --- a/index.js +++ b/index.js @@ -1,54 +1,54 @@ #! /usr/local/bin/node -const { spawn } = require('child_process'); -const fs = require('fs'); +const { spawn } = require("child_process"); +const fs = require("fs"); -const colors = require('colors'); -const commandLineArgs = require('command-line-args'); -const getUsage = require('command-line-usage'); +const colors = require("colors"); +const commandLineArgs = require("command-line-args"); +const getUsage = require("command-line-usage"); const { babelrc, gitignore, index, packageJSON, - webpackConfig, -} = require('./templates'); -const { dependencies, devDependencies } = require('./args'); + webpackConfig +} = require("./templates"); +const { dependencies, devDependencies } = require("./args"); // define the flags that are needed for this tool. -const optionDefinitions = [{ name: 'help', alias: 'h', type: Boolean }]; +const optionDefinitions = [{ name: "help", alias: "h", type: Boolean }]; // define the usage sections const sections = [ { - header: 'create-react-npm-component', - content: 'generates a skeleton project for a react component to upload to npm', + header: "create-react-npm-component", + content: "generates a skeleton project for a react component to upload to npm" }, { - header: 'Usage', - content: ['$ create-react-npm-component [project-name]'], + header: "Usage", + content: ["$ create-react-npm-component [project-name]"] }, { - header: 'Options', + header: "Options", optionList: [ { - name: 'help', - alias: 'h', - description: 'Print this usage guide.', - }, - ], - }, + name: "help", + alias: "h", + description: "Print this usage guide." + } + ] + } ]; const Do = (cmd, args, callback) => { - const p = spawn(cmd, args, { stdio: ['pipe', 'pipe', 'pipe'] }); + const p = spawn(cmd, args, { stdio: ["pipe", "pipe", "pipe"] }); p.stdout.pipe(process.stdout); p.stderr.pipe(process.stderr); process.stdin.pipe(p.stdin); - p.on('close', () => { + p.on("close", () => { if (callback) { callback(); } @@ -69,21 +69,21 @@ const Main = () => { fs.mkdirSync(project); process.chdir(project); - fs.mkdirSync('build'); - fs.mkdirSync('src'); + fs.mkdirSync("build"); + fs.mkdirSync("src"); // write some boilerplate files... - console.log(colors.green('\nwriting boilerplate files...')); - const files = [babelrc, gitignore, webpackConfig, index, packageJSON]; - files.forEach((file) => { + console.log(colors.green("\nwriting boilerplate files...")); + const files = [gitignore, webpackConfig, index, packageJSON]; + files.forEach(file => { let f; - if (typeof file.content === 'object') { + if (typeof file.content === "object") { f = JSON.stringify(file.content); } else { f = file.content; } - fs.writeFile(`./${file.name}`, f, { mode: '755' }, (err) => { + fs.writeFile(`./${file.name}`, f, { mode: "644" }, err => { if (err) { console.log(`error writing ${file.name}`); console.log(err); @@ -92,24 +92,20 @@ const Main = () => { }); // start and run the user through npm init... - console.log( - colors.green( - '\nstarting npm init...(you should put src/index.js as the main entrypoint)', - ), - ); - Do('npm', ['init'], () => { + console.log(colors.green("\nstarting npm init...")); + Do("npm", ["init"], () => { // install dependencies... console.log( - colors.green('\ninstalling npm dependencies, this may take a while...'), + colors.green("\ninstalling npm dependencies, this may take a while...") ); - Do('npm', dependencies, () => { + Do("npm", dependencies, () => { // install dev dependencies... console.log( - colors.green('\ninstalling dev dependencies, this may take a while...'), + colors.green("\ninstalling dev dependencies, this may take a while...") ); - Do('npm', devDependencies, () => { + Do("npm", devDependencies, () => { console.log(`\n[ ${project} ] created successfully`); - console.log('press any key to exit'); + console.log("press any key to exit"); }); }); }); diff --git a/package.json b/package.json index 42f3c43..1395952 100755 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "create-react-npm-component", - "version": "0.0.1", + "version": "0.0.2", "description": "quickly create react component skeleton for upload to npm", "main": "index.js", "bin": { @@ -20,6 +20,7 @@ "distribute" ], "author": "Jeff Willette", + "repository": "https://github.com/deltaskelta/create-react-npm-component", "license": "MIT", "dependencies": { "colors": "^1.1.2", diff --git a/templates.js b/templates.js index 51d5c04..ea14c5d 100755 --- a/templates.js +++ b/templates.js @@ -1,22 +1,13 @@ module.exports = { - // the babelrc file which needs to be written in main - babelrc: { - name: '.babelrc', - content: { - presets: ['env'], - plugins: ['transform-object-rest-spread', 'transform-react-jsx'], - }, - }, - // gitignore written in main gitignore: { - name: '.gitignore', - content: 'node_modules/', + name: ".gitignore", + content: "node_modules/" }, // webpackConfig written in main webpackConfig: { - name: 'webpack.config.js', + name: "webpack.config.js", content: `var path = require('path'); module.exports = { entry: './src/index.js', @@ -33,9 +24,7 @@ module.exports = { exclude: /(node_modules|bower_components|build)/, use: { loader: 'babel-loader', - options: { - presets: ['env'] - } + options: {}, } }, { @@ -43,7 +32,7 @@ module.exports = { use: [ 'style-loader', 'css-loader' ] }, { - test: /\.(png|jpg|gif)$/, + test: /\.(png|jpg|gif|eot|svg|ttf|woff|woff2)$/, use: [ { loader: 'file-loader', @@ -56,11 +45,11 @@ module.exports = { externals: { 'react': 'commonjs react' // this line is just to use the React dependency of our parent-testing-project instead of using our own React. } -};`, +};` }, index: { - name: 'src/index.js', + name: "src/index.js", content: `import React from 'react'; class MyComponent extends React.Component { @@ -70,25 +59,33 @@ class MyComponent extends React.Component { ); } } -export default MyComponent;`, +export default MyComponent;` }, packageJSON: { - name: 'package.json', + name: "package.json", content: { - name: '', - version: '0.1.0', - description: '', - main: 'build/index.js', + name: "", + version: "0.1.0", + description: "", + main: "build/index.js", scripts: { test: 'echo "Error: no test specified" && exit 1', - start: 'webpack --watch', - build: 'webpack', + start: "webpack --watch", + build: "webpack -p" }, author: { - name: '', - email: '', + name: "", + email: "" }, - }, - }, + babel: { + presets: ["env"], + plugins: [ + "transform-object-rest-spread", + "transform-react-jsx", + "transform-class-properties" + ] + } + } + } };