redux_rails 0.1.0 → 0.1.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: c7005e2d8abf030f440b8e7391de7e8aa012ad9d
-  data.tar.gz: 0acfddd8ab79fd603310d1b94fc4e3d084f269ac
+  metadata.gz: c80cec0ad4c8eec3d6d599700037c8c138f8fd3f
+  data.tar.gz: 5d1131af4afd5ca7fe3a6b1fd08f50b1f5f5aec7
 SHA512:
-  metadata.gz: 10d825e62643ec583607552e967963632fae73ea62c12f05acd6f435de7db9be7a6a324b6f5241dbef418280aee6e9f56133d7d166a0bd6a1d2542cb9032917c
-  data.tar.gz: e980eb0d2e0030a7d3f6823ce69efecbd695e72b80c55493ca0ee79982233f76db1929c6abb170639bbb3dc4fdb1751a9d9a9bc95929f2d7e7704ea94f3c6e8e
+  metadata.gz: 46a4c56021cca721c039eb47bd8d9b3714ff69a6b771ce3e9daf817513c71492eb720dadc9c160400362e4135ea43c80afdae5c85ef126db702ec7bd7de2c696
+  data.tar.gz: cd9dd9aee3dc339d130016df7861587486a5f1b7857688a12d20fd3c903000d9314f2759c70e1029b161ff9242680c2a8d65b1f7715442e3c6c5f28031c2dac8

data/README.md

@@ -1,15 +1,58 @@
 # ReduxRails
 
-Welcome to your new gem! In this directory, you'll find the files you need to be able to package up your Ruby library into a gem. Put your Ruby code in the file `lib/redux_rails`. To experiment with that code, run `bin/console` for an interactive prompt.
-
-TODO: Delete this and the text above, and describe your gem
+## Highlights
+- install, component and container generator
+- 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.
+- Links it to public/packs/manifest.json
+#### Created folders/files
+* app/javascript/src,
+* app/javascript/src/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
+
+###### 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
+
+### 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
+
+### 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
 
 ## Installation
 
+Create a new Rails project with webpack option
+
+    $ rails new app_name --webpack=react
+
 Add this line to your application's Gemfile:
 
 ```ruby
-gem 'redux_rails'
+gem 'redux-rails'
 ```
 
 And then execute:
@@ -18,11 +61,104 @@ And then execute:
 
 Or install it yourself as:
 
-    $ gem install redux_rails
+    $ gem install redux-rails
+
+Install all of the dependencies:
+
+    $ yarn install
+
+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.
+
+First create a controller:
+
+    $ rails generate controller Pages index
+
+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:
+
+```
+<%= javascript_pack_tag 'hello_react' %>
+```
+
+To allow javascript_pack_tag to load assets from webpack-dev-server navigate to `config/environments/development.rb` and add:
+
+```
+config.x.webpacker[:dev_server_host] = "http://127.0.0.1:8080"
+```
+
+Start the Rails server in a terminal window:
+
+    $ Rails server
+
+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
+```
+Hello React!
+```
 
 ## Usage
 
-TODO: Write usage instructions here
+### 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'*
+
+    $ 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
+```
+
+Once the install generator is finished:
+- 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:
+```
+Welcome you're now using React and Redux with Rails!
+```
+### Component generator
+To create a new component run:
+
+    $ rails generate component #{your_component_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`
+
+### Container generator
+To create a new container run:
+
+    $ rails generate container #{your_container_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`
+
+
 
 ## Development
 
@@ -32,7 +168,7 @@ To install this gem onto your local machine, run `bundle exec rake install`. To
 
 ## Contributing
 
-Bug reports and pull requests are welcome on GitHub at https://github.com/[USERNAME]/redux_rails.
+Bug reports and pull requests are welcome on GitHub at https://github.com/Luke-Popwell/redux_rails.
 
 ## License
 

data/lib/generators/component/component_generator.rb

@@ -0,0 +1,28 @@
+class ComponentGenerator < Rails::Generators::NamedBase
+  source_root File.expand_path('../templates', __FILE__)
+	argument :name, :type => :string, :default => "app"
+	
+	def create_component_directory
+		empty_directory("app/javascript/src/components/#{name}")
+	end
+
+	def create_component_index
+		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>
+			)
+
+			export default #{name};"
+		create_file "app/javascript/src/components/#{name}/#{name}.scss", "
+			.#{name} {
+
+			}"
+	end
+
+end

data/lib/generators/container/container_generator.rb

@@ -0,0 +1,41 @@
+class ContainerGenerator < Rails::Generators::NamedBase
+  source_root File.expand_path('../templates', __FILE__)
+  argument :name, :type => :string, :default => "app"
+
+
+	def create_directory
+		empty_directory("app/javascript/src/containers/#{name}")
+	end
+
+	def create_container_files
+		create_file "app/javascript/src/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';
+//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/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) => {
+switch (action.type) {
+default:
+  return state;
+}
+};
+
+export default #{name}Reducer;"
+	end
+
+end

data/lib/generators/redux_rails/install_generator.rb

@@ -0,0 +1,127 @@
+module ReduxRails
+	class InstallGenerator < Rails::Generators::Base
+		source_root File.expand_path('./templates', __FILE__)
+		argument :name, :type => :string, :default => "app"
+		
+		def create_src_directory
+		  empty_directory("app/javascript/src")
+		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'
+
+			const rootReducer = combineReducers({
+			  #{name}Reducer
+			})
+
+			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>
+			)
+
+			export default #{name};"
+			create_file "app/javascript/src/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';
+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';
+//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/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) => {
+  switch (action.type) {
+    default:
+      return state;
+  }
+};
+
+export default #{name}Reducer;"
+		end
+
+		def create_pack
+			create_file "app/javascript/packs/#{name}.jsx", "
+			import React from 'react'
+			import { render } from 'react-dom'
+			import { Provider } from 'react-redux'
+			import { createStore, combineReducers, applyMiddleware } from 'redux'
+
+			//this allows you to use the redux devtool in chrome
+			import { devToolsEnhancer } from 'redux-devtools-extension'
+
+			import { BrowserRouter as Router, Route, Link } from 'react-router-dom'
+
+			import #{name} from './src/components/#{name}/#{name}'
+
+			import rootReducer from '../src/reducer'
+
+			//this is for devToolsEnhancer otherwise would be 'let store = createStore(todoApp)'
+			let store = createStore(todoApp, /* preloadedState, */ devToolsEnhancer(
+			  // Specify name here, actionsBlacklist, actionsCreators and other options if needed
+			));
+			console.log(store.getState())
+
+			// Note that subscribe() returns a function for unregistering the listener
+			let unsubscribe = store.subscribe(() =>
+			  console.log(store.getState())
+			)
+
+			// Stop listening to state updates
+			unsubscribe()
+
+			document.addEventListener('DOMContentLoaded', () => {
+			  render(
+			    <Provider store={store}>
+			      <Router>
+			        <div>
+			          <Route exact path="/" component={#{name}} />
+			        </div>
+			      </Router>
+			    </Provider>,
+			    document.body.appendChild(document.createElement('div')),
+			  )
+			})"
+		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}.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.0"
+  VERSION = "0.1.1"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: redux_rails
 version: !ruby/object:Gem::Version
-  version: 0.1.0
+  version: 0.1.1
 platform: ruby
 authors:
 - Luke Popwell
 autorequire: 
 bindir: exe
 cert_chain: []
-date: 2017-07-15 00:00:00.000000000 Z
+date: 2017-07-16 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: bundler
@@ -70,6 +70,9 @@ files:
 - Rakefile
 - bin/console
 - bin/setup
+- lib/generators/component/component_generator.rb
+- lib/generators/container/container_generator.rb
+- lib/generators/redux_rails/install_generator.rb
 - lib/redux_rails.rb
 - lib/redux_rails/version.rb
 - redux_rails.gemspec