bootstrap-component - npm Package Compare versions

Comparing version 1.1.0 to 1.2.0

bin/comp.js

@@ -10,2 +10,4 @@ #!/usr/bin/env node
 
+const componentTypes = require('./_templates');
+
 const EXIT_CODES = {
@@ -20,3 +22,5 @@ OK: 0,
 
-const getIndexTemplate = name => `import ${name} from './${name}';
+const getIndexTemplate = name => 
+`import ${name} from './${name}';
+
 export default ${name};
@@ -30,4 +34,5 @@ `;
         console.error(
-            '💩  Looks like you\'re not in the root folder, since there isn\'t a package.json there. ' +
-            'Please navigate to your root folder and try again'
+`💩  Looks like you\'re not in the root folder of your project, since there 
+isn\'t a package.json in the current directory. In order to place your component 
+in the right spot, please navigate to your root folder and try again.`
         );
@@ -38,3 +43,3 @@ process.exit(EXIT_CODES.NOT_IN_ROOT_FOLDER);
 
-    let componentName = args._[0];
+    let [componentName] = args._;
     if (!componentName) {
@@ -50,5 +55,7 @@ const result = await inquirer.prompt([{
         console.error(
-            '💩  You didn\'t provide a component name. That means we\'re done here. Kthxbai! 👋'
+`💩  You didn\'t provide a component name. That means we\'re done here. 
+
+Kthxbai! 👋`
         );
-        exit(EXIT_CODES.COMPONENT_NAME_MISSING);
+        process.exit(EXIT_CODES.COMPONENT_NAME_MISSING);
     }
@@ -66,7 +73,11 @@
 
-    const componentFolder = path.resolve(CURRENT_DIR, componentPath, toCase.kebab(componentName));
+    const componentFolder = path.resolve(
+        CURRENT_DIR, 
+        componentPath, 
+        toCase.kebab(componentName)
+    );
     if (fs.existsSync(componentFolder)) {
         console.error(
-            `💩  There is already a component folder with the name '${toCase.pascal(componentName)}'. ` +
-            'Please try another name.'
+`💩  There is already a component folder with the name '${toCase.pascal(componentName)}'. 
+Please try another name.`
         );
@@ -76,2 +87,25 @@ process.exit(EXIT_CODES.ALREADY_EXISTS);
 
+    let componentType = args.type;
+    if (!componentType) {
+        const result = await inquirer.prompt([{
+            message: 'What kind of component is it?',
+            type: 'list',
+            name: 'type',
+            choices: [
+                { value: 'empty', name: 'None (blank file)'},
+                { value: 'functionComponent', name: 'Function component'},
+                { value: 'classComponent', name: 'Class component'},
+            ],
+            default: 'empty'
+        }]);
+        componentType = result.type;
+    }
+    let template = componentTypes[componentType];
+    if (!template) {
+        console.warn(
+`💩  "${componentType}" is not a valid component type. Defaulting to blank file`
+        );
+        template = f => f;
+    }
+
     // Dope! Now let's create stuff!
@@ -86,4 +120,4 @@ mkdirp.sync(componentFolder);
     fs.writeFileSync(
-        path.resolve(componentFolder, toCase.pascal(componentName) + '.js'),
-        ''
+        path.resolve(componentFolder, `${toCase.pascal(componentName)}.js`),
+        template(toCase.pascal(componentName))
     );
@@ -94,2 +128,2 @@
 };
-app();
+app();

CHANGELOG.md

@@ -1,10 +0,20 @@
-# 1.1.0
+# Changelog
 
+## 1.2.0
+
+Add component templates. An interactive question, as well as a new argument `--type`.
+
+## 1.1.1
+
+Add an extra space between the import and the export in the index file
+
+## 1.1.0
+
 Added `--path` flag for specifying path to your components. This is great if you need the same structure
 somewhere else in your code base, like `src/containers` or wherever.
 
-# 1.0.0
+## 1.0.0
 
 Initial release! 🎉
 
-- Support for creating a component folder and files in the src/components folder
+- Support for creating a component folder and files in the src/components folder

package.json

 {
   "name": "bootstrap-component",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "",
@@ -5,0 +5,0 @@ "bin": {

README.md

@@ -10,6 +10,7 @@ # Bootstrap a new React component!
       index.js
-      ComponentName.md
+      ComponentName.js
 ```
 
-The `index.js` file simply works as a proxy for the component, so that you can import it like this:
+The `index.js` file simply works as a proxy for the component, so that you can 
+import it like this:
 
@@ -24,3 +25,3 @@ ```javascript
 
-I recommend you to install this globally (but you don't have to if you don't want to):
+You can (and should) install this tool globally:
 
@@ -32,19 +33,37 @@ ```
 
+You can also use `npx` without installing it first - if you'd like to 
+"try before you buy":
+
+```
+npx bootstrap-component
+```
+
 Run this script from your project's root folder like this:
 
 ```
+$ comp
+```
+
+You can specify the name of your component like this:
+
+```
 $ comp my-component
 ```
 
-If you don't provide a component name, you'll be asked to provide it. You can case it as you want,
-this script uses `case` in order to figure it out :)
+### Arguments
 
-You can specify the path too with the `--path=some/path/to/components`, if you need to create a similar
-structure somewhere else in your code base. The default is `src/components`.
+This script is interactive, but can also be used in a scriptable way - via 
+command line arguments. 
 
-```
-$ comp my-component --path=src/components
+#### `--path`
 
-This will bootstrap a new component, complete with index.js file and ready to be coded.
+This is the path to your components folder, relative to the current folder. 
+Default is `--path=src/components`.
 
+#### `--type`
+
+One of `functionComponent`, `classComponent` or `empty` Default is `empty`.
+You can also use the shorthand `function` or `func` for function components, and 
+`class` for class components.
+
 ## Have a feature request? Found a bug?
@@ -51,0 +70,0 @@

No alert changes

Improved metrics

Total package byte prevSize

14779

increased by228.86%

Number of package files

6

increased by50%

Lines of code

133

increased by87.32%

Number of lines in readme file

70

increased by37.25%

No dependency changes