Merge pull request #15 from houdiniproject/react_generator

React generators

README.md

@@ -140,6 +140,22 @@ contribute!
 
 Assets get compiled from `/client` to `/public/client`
 
+## React Generators
+If creating new React code,  please use the Rails generators with the 'react:' prefix. This include:
+
+### react:packroot
+This generator creates a new entry for Webpack. This is a place where Webpack will start
+when packing a new javascript output file. It also creates a corresponding component for the entry.
+Usually, you will have one of these per page.
+
+### react:component
+This generator creates a React component along with a test file for testing with Jest. 
+Each component should have its own file. 
+
+### react:lib
+This generator creates a basic Typescript module along with a test file.
+
+
 ### Style
 
 #### Ruby
@@ -147,7 +163,7 @@ Assets get compiled from `/client` to `/public/client`
 
 #### New frontend code
 - All new front end code should be written in Typescript 
-and React (using TSX files)
+and React (using TSX files). Please use the React Generators for creation.
 
 #### Legacy Javascript
 - 2 spaces for tabs

lib/generators/react/component/USAGE

@@ -0,0 +1,14 @@
+Description:
+    Explain the generator
+
+Example:
+
+    rails generate react:component name
+
+    This will create:
+        Creates a new React component named Name in javascripts/component/name.ts along with a corresponding Jest test
+
+    rails generate react:component parent_dir/name
+
+    This will create:
+        Creates a new React component named Name in javascripts/component/parent_dir/name.ts along with a corresponding Jest test

lib/generators/react/component/component_generator.rb

@@ -0,0 +1,9 @@
+# License: AGPL-3.0-or-later WITH Web-Template-Output-Additional-Permission-3.0-or-later
+class React::ComponentGenerator < Rails::Generators::NamedBase
+  source_root File.expand_path('../templates', __FILE__)
+
+  def copy_file_to_component
+    template 'component.tsx.erb', File.join("javascripts/src/components", *(class_path + ["#{file_name.underscore}.tsx"]))
+    template 'component.spec.ts.erb', File.join("javascripts/src/components", *(class_path + ["#{file_name.underscore}.spec.ts"]))
+  end
+end

lib/generators/react/component/templates/component.spec.ts.erb

@@ -0,0 +1,10 @@
+// License: LGPL-3.0-or-later
+import * as React from 'react';
+import 'jest';
+import * as Component from './<%= file_name.underscore%>'
+
+describe('<%= file_name.camelize %>', () => {
+    test('your test here', () => {
+        expect(false).toBe(true)
+    })
+})

lib/generators/react/component/templates/component.tsx.erb

@@ -0,0 +1,14 @@
+// License: LGPL-3.0-or-later
+import * as React from 'react';
+
+export interface <%= file_name.camelize %>Props
+{
+
+}
+
+export default class <%= file_name.camelize %> extends React.Component<<%= file_name.camelize %>Props, {}> {
+  render() {
+     return <div></div>;
+  }
+}
+

lib/generators/react/lib/USAGE

@@ -0,0 +1,13 @@
+Description:
+    Generates a basic Typescript module
+
+Example:
+    rails generate react:lib name
+
+    This will create:
+        Creates a new class-based module in javascripts/lib/name.ts along with a corresponding Jest test
+
+    rails generate react:lib parent_dir/name
+
+    This will create:
+        Creates a new class-based module in javascripts/lib/parent_dir/name.ts along with a corresponding Jest test

lib/generators/react/lib/lib_generator.rb

@@ -0,0 +1,7 @@
+class React::LibGenerator < Rails::Generators::NamedBase
+  source_root File.expand_path('../templates', __FILE__)
+  def copy_file_to_lib
+    template 'module.ts.erb', File.join("javascripts/src/lib/", *(class_path + ["#{file_name.underscore}.ts"]))
+    template 'module.spec.ts.erb', File.join("javascripts/src/lib/", *(class_path + ["#{file_name.underscore}.spec.ts"]))
+  end
+end

lib/generators/react/lib/templates/module.spec.ts.erb

@@ -0,0 +1,9 @@
+// License: LGPL-3.0-or-later
+import 'jest';
+import * as Lib from './<%= file_name.underscore%>'
+
+describe('<%= file_name.camelize %>', () => {
+    test('your test here', () => {
+        expect(false).toBe(true)
+    })
+})

lib/generators/react/lib/templates/module.ts.erb

@@ -0,0 +1,5 @@
+// License: LGPL-3.0-or-later
+
+export default class <%= file_name.camelize %> {
+
+}

lib/generators/react/packroot/USAGE

@@ -0,0 +1,9 @@
+Description:
+    Used for generating a new packroot for a page on Webpack
+
+Example:
+    rails generate react:packroot Name
+
+    This will create:
+        A file named javascripts/app/name.ts which refers to a newly created component at
+        javascript/src/components/name/name.tsx (uses the react:component generator)

lib/generators/react/packroot/packroot_generator.rb

@@ -0,0 +1,11 @@
+# License: AGPL-3.0-or-later WITH Web-Template-Output-Additional-Permission-3.0-or-later
+module React
+  class PackrootGenerator < Rails::Generators::NamedBase
+    source_root File.expand_path('../templates', __FILE__)
+    def copy_file_to_app
+      template 'page.ts.erb', "javascripts/app/#{file_name.underscore}.ts"
+      generate 'react:component', "#{file_name.underscore}/#{file_name.underscore}"
+    end
+  end
+end
+

lib/generators/react/packroot/templates/page.ts.erb

@@ -0,0 +1,5 @@
+// License: LGPL-3.0-or-later
+
+// require a root component here. This will be treated as the root of a webpack package
+
+import "../src/components/<%= file_name.underscore%>/<%= file_name.underscore%>"

package.json

@@ -15,6 +15,8 @@
     "export-i18n": "bundle exec rake settings:combine_translations"
   },
   "devDependencies": {
+    "@types/jest": "^22.2.2",
+    "@types/react": "^16.1.0",
     "babel-core": "^6.26.0",
     "babel-loader": "^7.1.4",
     "babel-preset-env": "^1.6.1",
@@ -25,15 +27,24 @@
     "compression-webpack-plugin": "^1.1.11",
     "css-loader": "^0.28.10",
     "cssnano": "3.10.0",
+    "enzyme": "^3.3.0",
+    "enzyme-adapter-react-16": "^1.1.1",
     "expose-loader": "^0.7.5",
     "extract-text-webpack-plugin": "^3.0.2",
     "file-loader": "^1.1.11",
+    "jest": "^22.4.3",
+    "jest-enzyme": "^6.0.0",
     "phantomjs-prebuilt": "2.1.12",
     "postcss-cssnext": "^2.9.0",
     "postcss-import": "^9.1.0",
     "postcss-loader": "^2.1.1",
+    "react": "^16.2.0",
+    "react-dom": "^16.2.0",
     "string-replace-loader": "^2.1.1",
     "string-replace-webpack-plugin": "^0.1.3",
+    "ts-jest": "^22.4.2",
+    "ts-loader": "^3.5.0",
+    "typescript": "^2.8.1",
     "webpack": "^3",
     "webpack-merge": "^4.1.2",
     "webpack-sweet-entry": "^1.1.4",
@@ -90,5 +101,19 @@
     "view-script": "0.3.6",
     "virtual-dom": "2.1.1",
     "vvvview": "0.4.3"
+  },
+  "jest": {
+    "transform": {
+      "^.+\\.tsx?$": "ts-jest"
+    },
+    "testRegex": "(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$",
+    "moduleFileExtensions": [
+      "ts",
+      "tsx",
+      "js",
+      "jsx",
+      "json",
+      "node"
+    ]
   }
 }

tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "sourceMap": true,
+    "noImplicitAny": true,
+    "module": "commonjs",
+    "target": "es5",
+    "jsx": "react"
+  }
+}