redux_rails 0.1.2 → 0.1.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: c49a8ea0a58f79e7a4f41f8f90889e39c47c3b25
-  data.tar.gz: 07a27fa4221f637df04524f78c6e84106d3ad3b9
+  metadata.gz: 47499912ebfcb4b6458a809851ce58e051413625
+  data.tar.gz: b15c4bf9d2b82456e7a0d7a34a49e8533ae748d1
 SHA512:
-  metadata.gz: 3c3e5a1627ab759817ffa8ffaebaa669296a00a35679b6922def59c8cc8cc4aa3eb0536f5fe5820fa21504b4f29ebf467bd4ec67ff168fd4fb6c3de5ee3340e6
-  data.tar.gz: 61d3e933a7d2f81497777144b3b843e53d7cd76b8fbb5d00820a0e283806968811aebad5921b3387de6872935c1bc9ebad6e5d5cf5584cc981a744d3e94fd430
+  metadata.gz: 79a79ef291e0c10c954b67273b19632cf43f45282bca22a11b23b6e8e930d80483a69b7326e7d9d99cf7dec6c1ceadfe91d37b2b9d696264c843b0a410ac9af4
+  data.tar.gz: 5112f1d49cc2409d7eade0bcc242f72afb533848c861be0fdbc2d3c45ae47cc5a23c89eb40e3947dca2b54701f64b504049d73328d4005f85250f18a49b3a1cc

data/README.md

@@ -2,46 +2,49 @@
 
 ## Highlights
 - install, component and container generator
+- creates a new pack tag for each `rails g redux_rails:install #{your_app_name}` command and installs the necessary lines to manifest.json. Allowing you to have several seperate React apps inside of a single rails project.
+- install component and container folders in any folder location from the command line with the necessary import/export/require lines.
 - react-router-dom
 - redux-devtools-extension
 
 ### Install generator
 - Installs a new #{your_app_name}.jsx file in app/javascript/packs with additional Redux setup options commented out for modifications.
+###### *if you leave #{your_app_name} blank.  file, component and container names will default to 'app'*
 - Links it to public/packs/manifest.json
 #### Created folders/files
-* app/javascript/src,
-* app/javascript/src/reducer.js, `for your combineReducer`
+* app/javascript/src/#{your_app_name},
+* app/javascript/src/#{your_app_name}/reducer.js, `for your combineReducer`
 
 ###### Component folder
-* app/javascript/src/components,
-* app/javascript/src/components/app,
-* app/javascript/src/components/app/app.js,
-* app/javascript/src/components/app/app.scss
+* app/javascript/src/#{your_app_name}/components,
+* app/javascript/src/#{your_app_name}/components/app,
+* app/javascript/src/#{your_app_name}/components/app/app.js,
+* app/javascript/src/#{your_app_name}/components/app/app.scss
 
 ###### Container folder
-* app/javascript/src/containers,
-* app/javascript/src/containers/app,
-* app/javascript/src/containers/app/app.js,
-* app/javascript/src/containers/app/action.js,
-* app/javascript/src/containers/app/actionTypes.js,
-* app/javascript/src/containers/app/constants.js,
-* app/javascript/src/containers/app/appReducer.js
+* app/javascript/src/#{your_app_name}/containers,
+* app/javascript/src/#{your_app_name}/containers/app,
+* app/javascript/src/#{your_app_name}/containers/app/app.js,
+* app/javascript/src/#{your_app_name}/containers/app/action.js,
+* app/javascript/src/#{your_app_name}/containers/app/actionTypes.js,
+* app/javascript/src/#{your_app_name}/containers/app/constants.js,
+* app/javascript/src/#{your_app_name}/containers/app/appReducer.js
 
 ### Component generator
 #### Created folder/files
-* app/javascript/src/components/app/#{your_component_name},
-* app/javascript/src/components/app/#{your_component_name}/#{your_component_name}.js,
-* app/javascript/src/components/app/#{your_component_name}/#{your_component_name}.scss
+* app/javascript/src/#{your_app_name}/components/app/#{your_component_name},
+* app/javascript/src/#{your_app_name}/components/app/#{your_component_name}/#{your_component_name}.js,
+* app/javascript/src/#{your_app_name}/components/app/#{your_component_name}/#{your_component_name}.scss
 
 ### Container generator
 #### Created folder/files
-* app/javascript/src/containers/#{your_container_name},
-* app/javascript/src/containers/#{your_container_name}/#{your_container_name}.js,
-* app/javascript/src/containers/#{your_container_name}/action.js,
-* app/javascript/src/containers/#{your_container_name}/actionTypes.js,
-* app/javascript/src/containers/#{your_container_name}/constants.js,
-* app/javascript/src/containers/#{your_container_name}/#{your_container_name}Reducer.js
-- each generated container reducer will be imported into the root reducer at app/javascript/src/reducer.js and included in the combineReducer
+* app/javascript/src/#{your_app_name}/containers/#{your_container_name},
+* app/javascript/src/#{your_app_name}/containers/#{your_container_name}/#{your_container_name}.js,
+* app/javascript/src/#{your_app_name}/containers/#{your_container_name}/action.js,
+* app/javascript/src/#{your_app_name}/containers/#{your_container_name}/actionTypes.js,
+* app/javascript/src/#{your_app_name}/containers/#{your_container_name}/constants.js,
+* app/javascript/src/#{your_app_name}/containers/#{your_container_name}/#{your_container_name}Reducer.js
+- each generated container reducer will be imported into #{your_app_name} root reducer at app/javascript/src/#{your_app_name}/reducer.js and included in the combineReducer
 
 ## Installation
 
@@ -49,10 +52,14 @@ Create a new Rails project with webpack option
 
     $ rails new app_name --webpack=react
 
+Then navigate into your new project:
+
+    $ cd app_name
+
 Add this line to your application's Gemfile:
 
 ```ruby
-gem 'redux-rails'
+gem 'redux_rails'
 ```
 
 And then execute:
@@ -61,39 +68,40 @@ And then execute:
 
 Or install it yourself as:
 
-    $ gem install redux-rails
+    $ gem install redux_rails
 
-Install all of the dependencies:
+To allow javascript_pack_tag to load assets from webpack-dev-server navigate to `config/environments/development.rb` and add:
 
-    $ yarn install
+```
+config.x.webpacker[:dev_server_host] = "http://127.0.0.1:8080"
+```
 
-At this point, Rails has created a javascript friendly app for you. To render the sample react component rails creates for you follow these steps.
+To create the packs/manifest.json run:
 
-First create a controller:
+    $ ./bin/webpack-dev-server --host 127.0.0.1
 
-    $ rails generate controller Pages index
+At this point, Rails has created a javascript friendly app for you. To render the sample react component rails creates for you follow these steps. Or to start using the redux_rails gem skip down to Usage.
 
-This creates a Pages controller with an index method in it. A view template at `app/views/pages/index.html.erb`. Navigate to this file and replace the contents with:
+1. Open a new terminal tab/window. Make sure you are in the correct directory and create a controller and a view:
 
-```
-<%= javascript_pack_tag 'hello_react' %>
-```
+    $ rails generate controller Pages index
 
-To allow javascript_pack_tag to load assets from webpack-dev-server navigate to `config/environments/development.rb` and add:
+- This creates a Pages controller with an index method in it. A view template at `app/views/pages/index.html.erb`.
+2. Navigate to this file and replace the contents with:
 
 ```
-config.x.webpacker[:dev_server_host] = "http://127.0.0.1:8080"
+<%= javascript_pack_tag 'hello_react' %>
 ```
 
-Start the Rails server in a terminal window:
+3. Start the Rails server in a terminal window:
 
     $ Rails server
 
-and in a second server window:
+4. and in a second server window:
 
     $ ./bin/webpack-dev-server --host 127.0.0.1
 
-Navigate to http://localhost:3000/pages/index and you should see
+5. Navigate to http://localhost:3000/pages/index and you should see
 ```
 Hello React!
 ```
@@ -102,61 +110,67 @@ Hello React!
 
 ### Install generator
 Once your rails app is setup with the webpack=react option and the redux-rails gem is installed execute:
-###### *if you leave #{your_app_name} blank file names will default to 'app'*
+###### *if you leave #{your_app_name} blank file, component and container names will default to 'app'*
 
-    $ rails generate redux-rails:install #{your_app_name}
+    $ rails generate redux_rails:install #{your_app_name}
 
 This will install the following files:
 ```
 app/javascript/src,
-app/javascript/src/reducer.js, "this is for your combineReducer"
-
-app/javascript/src/components,
-app/javascript/src/components/#{your_app_name},
-app/javascript/src/components/#{your_app_name}/#{your_app_name}.js,
-app/javascript/src/components/#{your_app_name}/#{your_app_name}.scss
-
-app/javascript/src/containers,
-app/javascript/src/containers/#{your_app_name},
-app/javascript/src/containers/#{your_app_name}/#{your_app_name}.js,
-app/javascript/src/containers/#{your_app_name}/action.js,
-app/javascript/src/containers/#{your_app_name}/actionTypes.js,
-app/javascript/src/containers/#{your_app_name}/constants.js,
-app/javascript/src/containers/#{your_app_name}/#{your_app_name}Reducer.js
+app/javascript/src/#{your_app_name}/reducer.js, "this is for your combineReducer"
+
+app/javascript/src/#{your_app_name}/components,
+app/javascript/src/#{your_app_name}/components/#{your_app_name},
+app/javascript/src/#{your_app_name}/components/#{your_app_name}/#{your_app_name}.js,
+app/javascript/src/#{your_app_name}/components/#{your_app_name}/#{your_app_name}.scss
+
+app/javascript/src/#{your_app_name}/containers,
+app/javascript/src/#{your_app_name}/containers/#{your_app_name},
+app/javascript/src/#{your_app_name}/containers/#{your_app_name}/#{your_app_name}.js,
+app/javascript/src/#{your_app_name}/containers/#{your_app_name}/action.js,
+app/javascript/src/#{your_app_name}/containers/#{your_app_name}/actionTypes.js,
+app/javascript/src/#{your_app_name}/containers/#{your_app_name}/constants.js,
+app/javascript/src/#{your_app_name}/containers/#{your_app_name}/#{your_app_name}Reducer.js
 ```
 
 Once the install generator is finished:
-- add the following pack_tags to the file you want the react component to be rendered in
+1. add the following pack_tags to the file you want the react component to be rendered in
 ```
 <%= javascript_pack_tag '#{your_app_name}' %>
 <%= stylesheet_pack_tag '#{your_app_name}' %>
 ```
-Restart your servers or open two new ones with the commands above and navigate to the page in your browser and you should see:
+2. Restart your servers or open two new ones with the commands above and navigate to the page in your browser and you should see:
 ```
-Welcome you're now using React and Redux with Rails!
+#{your_app_name} component!
+find me in find me in app/javascript/src/#{your_app_name}/components/#{your_app_name}#{your_app_name}.js
 ```
+
 ### Component generator
+The Component generator takes two arguments (the new Component name and the desired install location)
+###### *if you leave #{your_app_name} blank file, component and container names will default to 'app'*
 To create a new component run:
 
-    $ rails generate component #{your_component_name}
+    $ rails generate component  #{your_component_name} #{your_app_name}
 
 This will generate a new folder inside of your components folder with the following files:
-- `app/javascript/src/components/#{your_component_name}`
-- `app/javascript/src/components/#{your_component_name}/#{your_component_name}.js`
-- `app/javascript/src/components/#{your_component_name}/#{your_component_name}.scss`
+- `app/javascript/src/#{your_app_name}/components/#{your_component_name}`
+- `app/javascript/src/#{your_app_name}/components/#{your_component_name}/#{your_component_name}.js`
+- `app/javascript/src/#{your_app_name}/components/#{your_component_name}/#{your_component_name}.scss`
 
 ### Container generator
+The Container generator takes two arguments (the new Container name and the desired install location)
+###### *if you leave #{your_app_name} blank file, component and container names will default to 'app'*
 To create a new container run:
 
-    $ rails generate container #{your_container_name}
+    $ rails generate container  #{your_container_name} #{your_app_name}
 
 This will generate a new folder inside of your containers folder with the following files:
-- `app/javascript/src/containers/#{your_container_name}`
-- `app/javascript/src/containers/#{your_container_name}/#{your_container_name}.js`
-- `app/javascript/src/containers/#{your_container_name}/action.js`
-- `app/javascript/src/containers/#{your_container_name}/actionTypes.js`
-- `app/javascript/src/containers/#{your_container_name}/constants.js`
-- `app/javascript/src/containers/#{your_container_name}/#{your_container_name}Reducer.js`
+- `app/javascript/src/#{your_app_name}/containers/#{your_container_name}`
+- `app/javascript/src/#{your_app_name}/containers/#{your_container_name}/#{your_container_name}.js`
+- `app/javascript/src/#{your_app_name}/containers/#{your_container_name}/action.js`
+- `app/javascript/src/#{your_app_name}/containers/#{your_container_name}/actionTypes.js`
+- `app/javascript/src/#{your_app_name}/containers/#{your_container_name}/constants.js`
+- `app/javascript/src/#{your_app_name}/containers/#{your_container_name}/#{your_container_name}Reducer.js`
 
 
 

data/lib/generators/component/component_generator.rb

@@ -1,28 +1,29 @@
 class ComponentGenerator < Rails::Generators::NamedBase
   source_root File.expand_path('../templates', __FILE__)
 	argument :name, :type => :string, :default => "app"
-	
+	argument :install_folder_name, :type => :string, :default => "app"
+
 	def create_component_directory
-		empty_directory("app/javascript/src/components/#{name}")
+		empty_directory("app/javascript/src/#{install_folder_name}/components/#{name}")
 	end
 
 	def create_component_index
-		create_file "app/javascript/src/components/#{name}/#{name}.js",
+		create_file "app/javascript/src/#{install_folder_name}/components/#{name}/#{name}.js",
 "import React from 'react';
-			import './#{name}.scss';
+import './#{name}.scss';
 
-			const #{name} = () => (
-			      <div className='#{name}'>
-              <h1>#{name} component!</h1>
-                  <p>find me in app/javascript/src/components/#{name}/#{name}.js</p>
-			      </div>
-			)
+const #{name} = () => (
+      <div className='#{name}'>
+        <h1>#{name} component!</h1>
+            <p>find me in app/javascript/src/#{install_folder_name}/components/#{name}/#{name}.js</p>
+      </div>
+)
 
-			export default #{name};"
-		create_file "app/javascript/src/components/#{name}/#{name}.scss", "
-			.#{name} {
+export default #{name};"
+		create_file "app/javascript/src/#{install_folder_name}/components/#{name}/#{name}.scss",
+".#{name} {
 
-			}"
+}"
 	end
 
 end

data/lib/generators/container/container_generator.rb

@@ -1,20 +1,20 @@
 class ContainerGenerator < Rails::Generators::NamedBase
   source_root File.expand_path('../templates', __FILE__)
   argument :name, :type => :string, :default => "app"
-
+  argument :install_folder_name, :type => :string, :default => "app"
 
 	def create_directory
-		empty_directory("app/javascript/src/containers/#{name}")
+		empty_directory("app/javascript/src/#{install_folder_name}/containers/#{name}")
 	end
 
 	def create_container_files
-		create_file "app/javascript/src/containers/#{name}/#{name}.js",
+		create_file "app/javascript/src/#{install_folder_name}/containers/#{name}/#{name}.js",
 "import * as actions from './actions';
 import * as constants from './constants';
 import #{name}Reducer from './reducer';
 
 export default { actions, constants, #{name}Reducer };"
-    create_file "app/javascript/src/containers/#{name}/action.js",
+    create_file "app/javascript/src/#{install_folder_name}/containers/#{name}/action.js",
 "// import {} from './constants';
 //import * as t from './actionTypes';
 
@@ -22,20 +22,26 @@ export default { actions, constants, #{name}Reducer };"
 //	type: t.SOME_ACTION,
 //	payload: { text }
 //});"
-    create_file "app/javascript/src/containers/#{name}/actionTypes.js",
+    create_file "app/javascript/src/#{install_folder_name}/containers/#{name}/actionTypes.js",
 "//export const SOME_ACTION = '#{name}/SOME_ACTION';"
-    create_file "app/javascript/src/containers/#{name}/constants.js",
+    create_file "app/javascript/src/#{install_folder_name}/containers/#{name}/constants.js",
 "// export const SOME_CONST = 'SOME_CONST';"
 
-    create_file "app/javascript/src/containers/#{name}/#{name}Reducer.js",
+    create_file "app/javascript/src/#{install_folder_name}/containers/#{name}/#{name}Reducer.js",
 "const #{name}Reducer = (state = {}, action) => {
-switch (action.type) {
-default:
+  switch (action.type) {
+    default:
   return state;
-}
+  }
 };
 
 export default #{name}Reducer;"
 	end
 
+  def add_namedReducer_to_reducer
+    inject_into_file "app/javascript/src/#{install_folder_name}/reducer.js", "import #{name}Reducer from './containers/#{name}/#{name}.js'\n", :after => "import { combineReducers } from 'redux'\n"
+
+    inject_into_file "app/javascript/src/#{install_folder_name}/reducer.js", "  #{name}Reducer,\n", :after => "const rootReducer = combineReducers({\n"
+  end
+
 end

data/lib/generators/redux_rails/install_generator.rb

@@ -3,68 +3,73 @@ module ReduxRails
 		source_root File.expand_path('../templates', __FILE__)
 	  argument :name, :type => :string, :default => "app"
 
+		def add_packages
+			system("yarn add react-redux redux redux-devtools-extension react-router-dom react-router-redux history")
+		end
+
 		def create_src_directory
 		  empty_directory("app/javascript/src")
+		  empty_directory("app/javascript/src/#{name}")
 		end
 
-		def create_reducer_base_files
-		  create_file "app/javascript/src/reducer.js", "
-			import { combineReducers } from 'redux'
-			import #{name}Reducer from './containers/#{name}/#{name}Reducer.js'
+		def create_reducer_base_file
+			create_file "app/javascript/src/#{name}/reducer.js",
+"import { combineReducers } from 'redux'
+import #{name}Reducer from './containers/#{name}/#{name}.js'
 
-			const rootReducer = combineReducers({
-			  #{name}Reducer
-			})
+const rootReducer = combineReducers({
+  #{name}Reducer
+})
 
-			export default rootReducer"
+export default rootReducer"
 		end
 
 		def create_component_base_files
-			empty_directory("app/javascript/src/components")
-			empty_directory("app/javascript/src/components/#{name}")
-			create_file "app/javascript/src/components/#{name}/#{name}.js", "
-			import React from 'react';
-			import './#{name}.scss';
-
-			const #{name} = () => (
-			      <div className='#{name}'>
-              <h1>#{name} component!</h1>
-                  <p>find me in app/javascript/src/components/#{name}/#{name}.js</p>
-			      </div>
-			)
+			empty_directory("app/javascript/src/#{name}/components")
+			empty_directory("app/javascript/src/#{name}/components/#{name}")
+			create_file "app/javascript/src/#{name}/components/#{name}/#{name}.js",
+"import React from 'react';
+import './#{name}.scss';
+
+const #{name} = () => (
+      <div className='#{name}'>
+        <h1>#{name} component!</h1>
+            <p>find me in app/javascript/src/#{name}/components/#{name}/#{name}.js</p>
+      </div>
+)
 
 			export default #{name};"
-			create_file "app/javascript/src/components/#{name}/#{name}.scss", "
-			.#{name} {
+			create_file "app/javascript/src/#{name}/components/#{name}/#{name}.scss",
+".#{name} {
 
-			}"
+}"
 		end
 
 		def create_container_base_files
-			empty_directory("app/javascript/src/containers")
-			empty_directory("app/javascript/src/containers/#{name}")
-			create_file "app/javascript/src/containers/#{name}/#{name}.js", "
-import * as actions from './actions';
+			empty_directory("app/javascript/src/#{name}/containers")
+			empty_directory("app/javascript/src/#{name}/containers/#{name}")
+			create_file "app/javascript/src/#{name}/containers/#{name}/#{name}.js",
+"import * as actions from './actions';
 import * as constants from './constants';
 import #{name}Reducer from './reducer';
 
 export default { actions, constants, #{name}Reducer };"
-			create_file "app/javascript/src/containers/#{name}/action.js", "
-// import {} from './constants';
+			create_file "app/javascript/src/#{name}/containers/#{name}/action.js",
+"// import {} from './constants';
 //import * as t from './actionTypes';
 
 //export const someAction = (text) => ({
 //	type: t.SOME_ACTION,
 //	payload: { text }
 //});"
-			create_file "app/javascript/src/containers/#{name}/actionTypes.js", "
-//export const SOME_ACTION = '#{name}/SOME_ACTION';"
+			create_file "app/javascript/src/#{name}/containers/#{name}/actionTypes.js",
+"//export const SOME_ACTION = '#{name}/SOME_ACTION';"
 
-			create_file "app/javascript/src/containers/#{name}/constants.js", "
-// export const SOME_CONST = 'SOME_CONST';"
+			create_file "app/javascript/src/#{name}/containers/#{name}/constants.js",
+"// export const SOME_CONST = 'SOME_CONST';"
 
-			create_file "app/javascript/src/containers/#{name}/#{name}Reducer.js", "
-const #{name}Reducer = (state = {}, action) => {
+			create_file "app/javascript/src/#{name}/containers/#{name}/#{name}Reducer.js",
+"const #{name}Reducer = (state = {}, action) => {
   switch (action.type) {
     default:
       return state;
@@ -76,7 +81,9 @@ export default #{name}Reducer;"
 
 		def create_pack
 			create_file "app/javascript/packs/#{name}.jsx",
-"import React from 'react'
+"// add <%= javascript_pack_tag '#{name}' %> and <%= stylesheet_pack_tag '#{name}' %> to the html.erb file you would like your React App to be rendered.
+
+import React from 'react'
 import { render } from 'react-dom'
 import { Provider } from 'react-redux'
 import { createStore, combineReducers, applyMiddleware } from 'redux'
@@ -86,12 +93,12 @@ import { devToolsEnhancer } from 'redux-devtools-extension'
 
 import { BrowserRouter as Router, Route, Link } from 'react-router-dom'
 
-import #{name} from './src/components/#{name}/#{name}'
+import #{name} from '../src/#{name}/components/#{name}/#{name}.js'
 
-import rootReducer from '../src/reducer'
+import rootReducer from '../src/#{name}/reducer'
 
-//this is for devToolsEnhancer otherwise would be 'let store = createStore(todoApp)'
-let store = createStore(todoApp, /* preloadedState, */ devToolsEnhancer(
+//this is for devToolsEnhancer otherwise would be 'let store = createStore(rootReducer)'
+let store = createStore(rootReducer, /* preloadedState, */ devToolsEnhancer(
   // Specify name here, actionsBlacklist, actionsCreators and other options if needed
 ));
 console.log(store.getState())
@@ -109,7 +116,7 @@ document.addEventListener('DOMContentLoaded', () => {
     <Provider store={store}>
       <Router>
         <div>
-          <Route exact path='/' component={#{name}} />
+          <Route path=\"/\" component={#{name}} />
         </div>
       </Router>
     </Provider>,
@@ -119,9 +126,9 @@ document.addEventListener('DOMContentLoaded', () => {
 		end
 
 		def insert_into_manifest
-		  inject_into_file "public/packs/manifest.json", "\"#{name}.js\" : \"http://0.0.0.0:8080/packs/#{name}.js\",\n", :after => "{\n"
+		  inject_into_file "public/packs/manifest.json", "	\"#{name}.js\" : \"http://0.0.0.0:8080/packs/#{name}.js\",\n", :after => "{\n"
 
-		  inject_into_file "public/packs/manifest.json",  "\"#{name}.css\" : \"http://0.0.0.0:8080/packs/#{name}.css\",\n", :after =>  "\"#{name}.js\" : \"http://0.0.0.0:8080/packs/#{name}.js\",\n"
+		  inject_into_file "public/packs/manifest.json",  "  \"#{name}.css\" : \"http://0.0.0.0:8080/packs/#{name}.css\",\n", :after =>  "\"#{name}.js\" : \"http://0.0.0.0:8080/packs/#{name}.js\",\n"
 		end
 	end
 end

data/lib/redux_rails/version.rb

@@ -1,3 +1,3 @@
 module ReduxRails
-  VERSION = "0.1.2"
+  VERSION = "0.1.3"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: redux_rails
 version: !ruby/object:Gem::Version
-  version: 0.1.2
+  version: 0.1.3
 platform: ruby
 authors:
 - Luke Popwell