react-create - npm Package Compare versions

Comparing version 0.2.0 to 1.0.2

lib/constants/env_vars.js

+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var args = process.argv.slice(2),
+
+
+// Component arguments
+withFolder = args.indexOf('--dir') !== -1 || args.indexOf('-d') !== -1,
+    withJSX = args.indexOf('--jsx') !== -1,
+    withPkg = args.indexOf('--pkg') !== -1 || args.indexOf('-p') !== -1,
+    es5 = args.indexOf('--es5') !== -1,
+    isEntry = args.indexOf('--entry') !== -1;
+
+// Make variables accessible globally
+exports.withFolder = withFolder;
+exports.withJSX = withJSX;
+exports.withPkg = withPkg;
+exports.es5 = es5;
+exports.isEntry = isEntry;

lib/constants/index.js

+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var createFile = void 0;
+
+// Detecting if platform is Windows, OSX, or Linux
+// for creating files
+switch (process.platform) {
+  case 'darwin':
+  case 'linux':
+    exports.createFile = createFile = 'touch ';
+    break;
+  case 'win32':
+    exports.createFile = createFile = 'echo > ';
+    break;
+  default:
+    throw new Error('Unsupported platform: ' + process.platform);
+}
+
+// stylesheet extensions
+var styleExts = ['--scss', '--css', '--styl', '--less'];
+
+exports.createFile = createFile;
+exports.styleExts = styleExts;

lib/constants/npm-imports.js

+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var ReactDOM = exports.ReactDOM = ["import ReactDOM from 'react-dom';", "var ReactDOM = require('react-dom');"];
+
+var React = exports.React = ["import React, { Component } from 'react';", "var React = require('react');"];

lib/index.js

+#! /usr/bin/env node
+'use strict';
+
+var _package = require('../package.json');
+
+var _package2 = _interopRequireDefault(_package);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var args = process.argv.slice(2),
+    action = args[0],
+
+
+// options passed in as arguments
+version = args.indexOf('-v') !== -1 || args.indexOf('--version') !== -1,
+    help = args.indexOf('-h') !== -1 || args.indexOf('--help') !== -1;
+
+if (version) {
+  console.log(_package2.default.version);
+  process.exit();
+}
+
+if (help) {
+  console.log(['usage: react-create <action> <filename> [options]', '', 'actions:', '  comp, component          Passed in as first argument to signify component creation', '', 'options:', '  -v, --version            Output\'s the version number (e.g react-create -v)', '  -d, --dir                Creates a [componen name] directory with component file inside', '  -p, --pkg                Includes a package.json file with component', '  --es5                    Generates the compoenent with React\'s ES5 syntax. (Default is ES6)', '  --jsx                    Creates the component with `.jsx` extenstion. (Default is `.js`)', '  --entry                  Bootstraps the component with the \'ReactDOM.render\' function.', '--css,--styl,--less, -scss Create and choose your css preprocessor to generate'].join('\n'));
+  process.exit();
+}
+
+if (action === 'component' || action === 'comp') {
+  require('./scripts/component');
+}

lib/scripts/component.js

+'use strict';
+
+var _env_vars = require('../constants/env_vars');
+
+var _constants = require('../constants');
+
+var _file = require('../utils/file');
+
+var _component = require('../templates/component');
+
+var _component2 = _interopRequireDefault(_component);
+
+var _pjson = require('../templates/pjson');
+
+var _pjson2 = _interopRequireDefault(_pjson);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+// Loading in appropriate templates
+
+
+var args = process.argv.slice(2),
+    component = args[1],
+    extensions = [];
+
+// Used for reading and writing component files
+// Constants
+
+
+var subDir = '';
+
+/**
+  Grabbing style extension from arguments and adding to
+  full list of extensions
+*/
+function addCssExtension(args, styleExts, extensions) {
+  for (var x = 0, len = args.length; x < len; x++) {
+    if (styleExts.indexOf(args[x]) !== -1) {
+      extensions.push('.' + args[x].slice(2));
+    }
+  }
+}
+
+// Adding component file extension
+_env_vars.withJSX ? extensions.push('.jsx') : extensions.push('.js');
+
+// Adding stylesheet extensions
+addCssExtension(args, _constants.styleExts, extensions);
+
+// Creating component folder
+if (_env_vars.withFolder) {
+  (0, _file.createDirectory)(component);
+  subDir = component + '/';
+}
+
+// Loop through to create necessary files
+(0, _file.createFiles)(extensions, _constants.createFile, subDir, component, _component2.default, _file.writeToFile);
+
+// Creating package.json pointing to component (via main) if needed
+if (_env_vars.withPkg) {
+  (0, _file.createPjson)(_constants.createFile, subDir, _pjson2.default);
+}

lib/templates/component.js

+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _env_vars = require('../constants/env_vars');
+
+var _npmImports = require('../constants/npm-imports');
+
+var deps = _interopRequireWildcard(_npmImports);
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
+
+var args = process.argv.slice(2),
+    component = args[1];
+
+var template = void 0,
+    reactImports = void 0,
+    compBody = void 0,
+    compEnd = '';
+
+// Generate ES5 Component
+if (_env_vars.es5) {
+  reactImports = deps.React[1];
+  compBody = '\n\nvar ' + component + ' = React.createClass({\n  render: function() {\n    return (\n      <div className="' + component.toLowerCase() + '">\n        { this.props.children }\n      </div>\n    )\n  }\n})\n';
+}
+
+// Or ES6 Component
+else {
+    reactImports = deps.React[0];
+    compBody = '\n\nexport default class ' + component + ' extends Component {\n  render() {\n    return (\n      <div className="' + component.toLowerCase() + '">\n        { this.props.children }\n      </div>\n    )\n  }\n}\n';
+  }
+
+// Mounts component to the DOM
+if (_env_vars.isEntry) {
+  if (_env_vars.es5) {
+    reactImports += '\n' + deps.ReactDOM[1];
+  } else {
+    reactImports += '\n' + deps.ReactDOM[0];
+  }
+
+  compEnd += '\nReactDOM.render(<' + component + '/>, document.getElementById(\'app\'));\n';
+} else {
+  if (_env_vars.es5) {
+    compEnd += '\nmodule.exports = ' + component + ';\n  ';
+  }
+}
+
+template = reactImports + compBody + compEnd;
+
+// Export component
+exports.default = template;

lib/templates/pjson.js

+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _env_vars = require('../constants/env_vars');
+
+var args = process.argv.slice(2),
+    component = args[1],
+    extension = _env_vars.withJSX ? '.jsx' : '.js',
+    template = '{\n  "name": "' + component + '",\n  "version": "0.0.0",\n  "private": true,\n  "main": "./' + component + extension + '"\n}';
+
+exports.default = template;

lib/utils/file.js

+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createPjson = exports.writeToFile = exports.createFiles = exports.createDirectory = undefined;
+
+var _fs = require('fs');
+
+var _fs2 = _interopRequireDefault(_fs);
+
+var _child_process = require('child_process');
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function createDirectory(component) {
+  (0, _child_process.exec)('mkdir ' + component, function (err, stdout) {
+    if (err) {
+      throw err;
+    };
+  });
+}
+
+function createFiles(extensions, action, subDir, component, template, cb) {
+  extensions.forEach(function (ext) {
+    (0, _child_process.exec)(action + subDir + component + ext, function (err, stdout) {
+      if (err) {
+        throw err;
+      };
+      if (ext === '.js' || ext === '.jsx') {
+
+        // Writing up markup to component (.js or jsx) file
+        cb(subDir, component, ext, template);
+      }
+    });
+  });
+}
+
+function writeToFile(subDir, component, ext, compTmpl) {
+  _fs2.default.writeFile(subDir + component + ext, compTmpl, function (err) {
+    if (err) {
+      throw err;
+    };
+  });
+}
+
+function createPjson(action, subDir, template) {
+  (0, _child_process.exec)(action + subDir + 'package.json', function () {
+    _fs2.default.writeFile(subDir + 'package.json', template, function (err) {
+      if (err) {
+        throw err;
+      };
+    });
+  });
+}
+
+exports.createDirectory = createDirectory;
+exports.createFiles = createFiles;
+exports.writeToFile = writeToFile;
+exports.createPjson = createPjson;

package.json

 {
   "name": "react-create",
-  "version": "0.2.0",
+  "version": "1.0.2",
   "description": "Simple React CLI that aims to speed up development by generating desired React component markup based on your preferences via the command line.",
   "scripts": {
-    "test": "eslint ."
+    "lint": "eslint src",
+    "clean": "rimraf lib",
+    "build": "npm run clean && babel src --out-dir lib",
+    "start": "node server.js"
   },
@@ -21,7 +24,14 @@ "repository": {
   "bin": {
-    "react": "src/index.js"
+    "react-create": "lib/index.js"
   },
   "devDependencies": {
-    "eslint": "^1.10.3"
+    "babel-cli": "^6.6.5",
+    "babel-core": "^6.5.2",
+    "babel-eslint": "^5.0.0",
+    "babel-plugin-array-includes": "^2.0.3",
+    "babel-preset-es2015": "^6.5.0",
+    "eslint": "^1.10.3",
+    "express": "^4.13.4",
+    "rimraf": "^2.5.2"
   }
 }

README.md

 # react-create
-Simple React CLI that aims to speed up development by generating desired React component markup based on your preferences via the command line.
+Simple React CLI that aims to speed up development by allowing you to create react components from the command line with lots of customizations.
 
-[![Build Status](https://travis-ci.org/ipeters90/react-create.svg?branch=master)](https://travis-ci.org/ipeters90/react-create)
+[![Build Status](https://travis-ci.org/ipeters90/react-create.svg?branch=master)](https://travis-ci.org/ipeters90/react-create) [![npm version](https://badge.fury.io/js/react-create.svg)](https://badge.fury.io/js/react-create)
 ## Installation
@@ -20,4 +20,8 @@ ### Via NPM
 ```
-Lastly, run command in root folder of repo to add script to NPM path (So you can execute anywhere)
+Do a build
 ```bash
+$ npm run build
+```
+Lastly, run this command in root folder of repo to add script to NPM path (So you can execute anywhere)
+```bash
 $ npm link
@@ -28,19 +32,23 @@ ```
 
-    Usage: react component [component name]
+    Usage: react-create component <component name> [options]
 
+    Actions:
+      comp, component            Passed in as first argument to signify component creation
+
     Options:
-      -v, --version    Outputs the version number (e.g react -v)
-      -h, --help       Prints out usage options
-      -d, --dir        Creates a [component name] directory with component file inside. (Default is just the component file)
-      -p, --pkg        Includes a package.json file with component
-      --es5            Generates the component with React's ES5 syntax. (Default is ES6).
-      --jsx            Creates the component with `.jsx` extenstion. (Default is `.js`)
-      --entry          Bootstraps the component with the 'ReactDOM.render' function.
+      -v, --version              Outputs the version number (e.g rc -v)
+      -h, --help                 Prints out usage options
+      -d, --dir                  Creates a [component name] directory with component file inside. (Default is just the component file)
+      -p, --pkg                  Includes a package.json file with component
+      --es5                      Generates the component with React's ES5 syntax. (Default is ES6).
+      --jsx                      Creates the component with `.jsx` extenstion. (Default is `.js`)
+      --entry                    Bootstraps the component with the 'ReactDOM.render' function.
+      --css,--styl,--less, -scss Create and choose your css preprocessor to generate
       
 ## Examples
-#### Create `Header` component file that mounts to the DOM
+#### Create `Home` component file that mounts to the DOM
 ```bash
-$ react component Header --entry
+$ react-create component Home --entry
 ```
-will generate this `Header.js` file
+will generate this `Home.js` file
 ```js
@@ -50,6 +58,6 @@ import React, { Component } from 'react';
 
-export default class Header extends Component {
+export default class Home extends Component {
  render() {
     return (
-      <div className="header">
+      <div className="home">
         { this.props.children }
@@ -61,3 +69,3 @@ </div>
 
-ReactDOM.render(<Header/>, document.getElementById('app'));
+ReactDOM.render(<Home/>, document.getElementById('app'));
 ```
@@ -67,3 +75,3 @@
 ```bash
-$ react component Header --jsx --es5
+$ react-create component Header --jsx --es5
 ```
@@ -83,2 +91,4 @@ will generate this `Header.jsx` file
 })
+
+module.exports = Header;
 ```
@@ -88,3 +98,3 @@
 ```bash
-$ react component Header -d -jsx -p
+$ react-create component Header -d --jsx -pkg --styl
 ```
@@ -96,4 +106,4 @@ will generate 3 files
    ├─ Header.jsx         -> With ES6 Markup of a React component
-   ├─ Header.css
+   ├─ Header.styl        -> Stylus stylesheet
    └─ package.json       -> With name, main and version number markup included
 ```

src/constants/env_vars.js

-var args = process.argv.slice(2);
-
-// Component creation
-var withFolder = (args.indexOf('--dir') > -1) || (args.indexOf('-d') > -1);
-var withJSX = args.indexOf('--jsx') > -1;
-var withPkg = (args.indexOf('--pkg') > -1) || (args.indexOf('-p') > -1);
-var es5 = args.indexOf('--es5') > -1;
-var isEntry = args.indexOf('--entry') > -1;
-
-
-// Make variables accessible globally
-module.exports = {
-	withFolder: withFolder,
-	withJSX: withJSX,
-	withPkg: withPkg,
-	es5: es5,
-	isEntry: isEntry
-}

src/index.js

-#! /usr/bin/env node
-
-var pjson = require('../package.json');
-
-var args = process.argv.slice(2);
-var action = args[0];
-
-// options passed in as arguments
-var version = (args.indexOf('-v') > -1) || (args.indexOf('--version') > -1);
-var help = (args.indexOf('-h') > -1) || (args.indexOf('--help') > -1);
-
-if (version) {
-  console.log(pjson.version);
-  return;
-}
-
-if (help) {
-  console.log([
-    'usage: react <fileType> <filename> [options]',
-    '',
-    'options:',
-    '  -v, --version    Output\'s the version number (e.g react-create -v)',
-    '  -d, --dir        Creates a [componen name] directory with component file inside',
-    '  -p, --pkg        Includes a package.json file with component',
-    '  comp, component  Passed in as first argument to signify component creation', 
-    '  --es5            Generates the compoenent with React\'s ES5 syntax. (Default is ES6)',
-    '  --jsx            Creates the component with `.jsx` extenstion. (Default is `.js`)',
-    '  --entry          Bootstraps the component with the \'ReactDOM.render\' function.'
-  ].join('\n'));
-  process.exit();
-}
-
-if (action === 'component' || action === 'comp') {
-  require('./scripts/component');
-}

src/scripts/component.js

-#! /usr/bin/env node
-
-var args = process.argv.slice(2);
-var component = args[1];
-var createFile, subDir = '';
-
-var options = require('../constants/env_vars');
-
-// Used for reading and writing component files
-var fs = require('fs');
-var exec = require('child_process').exec;
-
-// Loading in appropriate templates
-var compTmpl = require('../templates/component');
-var pjTmpl = require('../templates/pjson');
-
-// Adding extensions for component
-var extensions = [];
-options.withJSX ? extensions.push('.jsx') : extensions.push('.js');
-if (options.withFolder) { extensions.push('.css') };
-
-// Detecting if platform is Windows, OSX, or Linux
-switch (process.platform) {
-  case 'darwin':
-    createFile = 'touch ';
-    break;
-  case 'win32':
-    createFile = 'echo > ';
-    break;
-  case 'linux':
-    createFile = 'touch ';
-    break;
-  default:
-    throw new Error('Unsupported platform: ' + process.platform);
-}
-
-// Creating component folder
-if (options.withFolder) {
-  exec('mkdir ' + component, function(err, stdout) {
-    if (err) { throw err };
-  });
-  subDir = component + '/';
-}
-
-// Loop through to create necessary files
-extensions.forEach(function(ext) {
-  exec(createFile + subDir + component + ext, function(err, stdout) {
-    if (err) { throw err };
-  });
-})
-
-// Writing up markup to component (.js or jsx) file
-fs.writeFile(subDir + component + extensions[0], compTmpl, function(err) {
-  if (err) { throw err };
-})
-
-// Creating package.json pointing to component (via main) if needed
-if (options.withPkg) {
-  exec(createFile + subDir + 'package.json');
-  fs.writeFile(subDir + 'package.json', pjTmpl, function(err) {
-    if (err) { throw err };
-  })
-}

src/templates/component.js

-var args = process.argv.slice(2);
-var component = args[1];
-var options = require('../constants/env_vars');
-var reactImport, compBegin, compEnd, compBody;
-
-// Generate ES5 Component
-if (options.es5) {
-  reactImport = 'var React = require(\'react\');';
-  compBegin = '\n\nvar ' + component + ' = React.createClass({\n';
-  compBody = '\u0020\u0020render: function() {\n\u0020\u0020\u0020\u0020return (\n\u0020\u0020\u0020\u0020\u0020\u0020<div className="' + component.toLowerCase() + '">\n\u0020\u0020\u0020\u0020\u0020\u0020\u0020\u0020{ this.props.children }\n\u0020\u0020\u0020\u0020\u0020\u0020</div>\n\u0020\u0020\u0020\u0020)\n\u0020\u0020}\n';
-  compEnd = '});';
-}
-
-// Or ES6 Component
-else {
-  reactImport = 'import React, { Component } from \'react\';';
-  compBegin = '\n\nexport default class ' + component + ' extends Component {\n';
-  compBody = '\u0020\u0020render() {\n\u0020\u0020\u0020\u0020return (\n\u0020\u0020\u0020\u0020\u0020\u0020<div className="' + component.toLowerCase() + '">\n\u0020\u0020\u0020\u0020\u0020\u0020\u0020\u0020{ this.props.children }\n\u0020\u0020\u0020\u0020\u0020\u0020</div>\n\u0020\u0020\u0020\u0020)\n\u0020\u0020}\n';
-  compEnd = '};';
-}
-
-// Mounts component to the DOM
-if (options.isEntry) {
-  if (options.es5) {
-    reactImport += '\nvar ReactDOM = require(\'react-dom\');';
-  }
-  else {
-    reactImport += '\nimport ReactDOM from \'react-dom\';';
-  }
-  compEnd += '\n\nReactDOM.render(<' + component + '/>, document.getElementById(\'app\'));';
-}
-
-// Export component
-module.exports = reactImport + compBegin + compBody + compEnd;

src/templates/pjson.js

-var args = process.argv.slice(2);
-var component = args[1];
-var options = require('../constants/env_vars');
-
-module.exports = '{\n\u0020\u0020"name": "' + component + '",\n\u0020\u0020"version": "0.0.0",\n\u0020\u0020"private": true,\n\u0020\u0020"main": "./' + component + (options.withJSX ? '.jsx' : '.js') + '"\n}';

New alerts

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

Shell access

Supply chain risk

This module accesses the system shell. Accessing the system shell increases the risk of executing arbitrary code.

Found 1 instance in 1 package

Filesystem access

Supply chain risk

Accesses the file system, and could potentially read sensitive data.

Found 1 instance in 1 package

Fixed alerts

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

Shell access

Supply chain risk

This module accesses the system shell. Accessing the system shell increases the risk of executing arbitrary code.

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

Filesystem access

Supply chain risk

Accesses the file system, and could potentially read sensitive data.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

13564

40.95%

Number of package files

12

33.33%

Lines of code

201

57.03%

Number of low quality alerts

1

-50%

Number of lines in readme file

102

10.87%

Number of low supply chain risk alerts

1

-66.67%

Worsened metrics

Dev dependency count

8

700%

No dependency changes