Merge pull request #165 from simpleweb/feature/remove-class-component-option

Feature: Removes the `classComponent` option from component command

Author: craigcoles

.changeset/twelve-mayflies-deny.md

@@ -0,0 +1,6 @@
+---
+"romulus-cli": minor
+---
+
+Removes the `classComponent` option from component command
+Updates the stateless component to use `function` instead of `const`

docs/commands.md

@@ -4,11 +4,10 @@ These commands rely on the original structure created by `romulus init`.
 
 ## Component
 
-Creates a new component or class based component.
+Creates a new component.
 
 ```
 romulus component MyComponent
-romulus component MyComponent --classComponent
 ```
 
 This will generate three files:
@@ -25,7 +24,7 @@ import { View, Text } from "./styles";
 
 interface Props {}
 
-const MyComponent: React.FC<Props> = () => {
+function MyComponent() {
   return (
     <View>
       <Text>MyComponent</Text>
@@ -36,28 +35,7 @@ const MyComponent: React.FC<Props> = () => {
 export default MyComponent;
 ```
 
-If you pass the `--classComponent` flag this stateful component will be generated.
-
-```js
-import React from "react";
-import { View, Text } from "./styles";
-
-interface Props {}
-
-class MyComponent extends React.Component<Props, {}> {
-  render() {
-    return (
-      <View>
-        <Text>MyComponent</Text>
-      </View>
-    );
-  }
-}
-
-export default MyComponent;
-```
-
-Both types of components get the same accompanying styles.
+Components get accompanying styles.
 
 ```js
 import styled from "styled-components/native";

generators/component/index.js

@@ -1,5 +1,5 @@
-var Generator = require('yeoman-generator');
-var path = require('path');
+var Generator = require("yeoman-generator");
+var path = require("path");
 
 module.exports = class extends Generator {
   constructor(args, opts) {
@@ -8,31 +8,29 @@ module.exports = class extends Generator {
     // name of the app based on the directory name generated by React Native
     this.name = process.cwd().split(path.sep).pop();
 
-    this.argument('component', { type: String, required: true });
-    this.option('classComponent');
+    this.argument("component", { type: String, required: true });
   }
 
   writing() {
-    var template = (this.options.classComponent) ? 'class.tsx' : 'stateless.tsx';
     var component = this.options.component;
 
     // create entry points for Android and iOS
     this.fs.copyTpl(
-      this.templatePath(template),
+      this.templatePath("index.tsx"),
       this.destinationPath(`App/Components/${component}/index.tsx`),
-      { name: this.name, component: component, }
+      { name: this.name, component: component }
     );
 
     this.fs.copyTpl(
-      this.templatePath('styles.ts'),
+      this.templatePath("styles.ts"),
       this.destinationPath(`App/Components/${component}/styles.ts`),
-      { name: this.name, component: component, }
+      { name: this.name, component: component }
     );
 
     this.fs.copyTpl(
-      this.templatePath('test.tsx'),
+      this.templatePath("test.tsx"),
       this.destinationPath(`App/Components/${component}/index.test.tsx`),
-      { name: this.name, component: component, }
+      { name: this.name, component: component }
     );
   }
 };

generators/component/templates/class.tsx

@@ -3,7 +3,7 @@ import { View, Text } from "./styles";
 
 interface Props {}
 
-const <%= component %>: React.FC<Props> = () => {
+function <%= component %>() {
   return (
     <View>
       <Text><%= component %></Text>