Version 0.0.2

- changed file permissions to 644
- added babel transform class properties plugin
- added eslint plugin to go with babel plugin
- added babelrc to package.json
- added some binary font and image filetypes to the file loader
- changed webpack build to production

Author: jeffwillette

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"
+  ]
 };

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");
       });
     });
   });

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",

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,17 +24,15 @@ module.exports = {
         exclude: /(node_modules|bower_components|build)/,
         use: {
           loader: 'babel-loader',
-          options: {
-            presets: ['env']
-          }
+          options: {},
         }
       },
       {
         test: /\.css$/,
         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"
+        ]
+      }
+    }
+  }
 };