redux_rails 0.1.3 → 0.1.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/README.md +56 -22
- data/lib/generators/pack/pack_generator.rb +129 -0
- data/lib/generators/redux_rails/install_generator.rb +4 -3
- data/lib/redux_rails/version.rb +1 -1
- data/redux_rails.gemspec +1 -1
- metadata +4 -3
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA1:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: '0458dcd23ed778b5909241bbc905235c77016732'
|
4
|
+
data.tar.gz: 56dd6816d30383dc66564fdc15eafc238740e943
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 9447cf2697c8019fc1fdd5997548a6b2fb5fbdf67477e5807c155f96647f01ef1c87befaa42e7014c4aab52c04f0da8ea3574ce3b54f0f7bfcdb7f11e68a23f8
|
7
|
+
data.tar.gz: 1aafd80b82473c258bfbdbd8469bc2fb0e0a212bd743375ae454eda11b7a9c0c05c293fab6720706797aac6638aca837da2e6b46887598cf5eae47294c4248ea
|
data/README.md
CHANGED
@@ -1,13 +1,14 @@
|
|
1
1
|
# ReduxRails
|
2
2
|
|
3
3
|
## Highlights
|
4
|
-
- install, component and container generator
|
4
|
+
- install, pack, component and container generator
|
5
5
|
- 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.
|
6
6
|
- install component and container folders in any folder location from the command line with the necessary import/export/require lines.
|
7
7
|
- react-router-dom
|
8
8
|
- redux-devtools-extension
|
9
9
|
|
10
10
|
### Install generator
|
11
|
+
- Installs the following dependencies `yarn add react-redux redux redux-devtools-extension react-router-dom react-router-redux history`
|
11
12
|
- Installs a new #{your_app_name}.jsx file in app/javascript/packs with additional Redux setup options commented out for modifications.
|
12
13
|
###### *if you leave #{your_app_name} blank. file, component and container names will default to 'app'*
|
13
14
|
- Links it to public/packs/manifest.json
|
@@ -30,6 +31,9 @@
|
|
30
31
|
* app/javascript/src/#{your_app_name}/containers/app/constants.js,
|
31
32
|
* app/javascript/src/#{your_app_name}/containers/app/appReducer.js
|
32
33
|
|
34
|
+
### Pack generator
|
35
|
+
#### Runs the Install generator without re-installing the javascript dependencies again
|
36
|
+
|
33
37
|
### Component generator
|
34
38
|
#### Created folder/files
|
35
39
|
* app/javascript/src/#{your_app_name}/components/app/#{your_component_name},
|
@@ -78,7 +82,7 @@ config.x.webpacker[:dev_server_host] = "http://127.0.0.1:8080"
|
|
78
82
|
|
79
83
|
To create the packs/manifest.json run:
|
80
84
|
|
81
|
-
$
|
85
|
+
$ bin/webpack-dev-server --host 127.0.0.1
|
82
86
|
|
83
87
|
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.
|
84
88
|
|
@@ -109,29 +113,33 @@ Hello React!
|
|
109
113
|
## Usage
|
110
114
|
|
111
115
|
### Install generator
|
112
|
-
|
116
|
+
###### *only run this once! If you wish to create additional pack files run `rails generate redux_rails:pack #{pack_name}`*
|
117
|
+
Once your rails app is setup with the webpack=react option and the redux-rails gem is installed and your `config/environments/development.rb` is updated execute:
|
113
118
|
###### *if you leave #{your_app_name} blank file, component and container names will default to 'app'*
|
114
119
|
|
115
120
|
$ rails generate redux_rails:install #{your_app_name}
|
116
121
|
|
117
122
|
This will install the following files:
|
118
|
-
|
119
|
-
app/javascript/src
|
120
|
-
app/javascript/src/#{your_app_name}/reducer.js
|
121
|
-
|
122
|
-
app/javascript/src/#{your_app_name}/components
|
123
|
-
app/javascript/src/#{your_app_name}/components/#{your_app_name}
|
124
|
-
app/javascript/src/#{your_app_name}/components/#{your_app_name}/#{your_app_name}.js
|
125
|
-
app/javascript/src/#{your_app_name}/components/#{your_app_name}/#{your_app_name}.scss
|
126
|
-
|
127
|
-
app/javascript/src/#{your_app_name}/containers
|
128
|
-
app/javascript/src/#{your_app_name}/containers/#{your_app_name}
|
129
|
-
app/javascript/src/#{your_app_name}/containers/#{your_app_name}/#{your_app_name}.js
|
130
|
-
app/javascript/src/#{your_app_name}/containers/#{your_app_name}/action.js
|
131
|
-
app/javascript/src/#{your_app_name}/containers/#{your_app_name}/actionTypes.js
|
132
|
-
app/javascript/src/#{your_app_name}/containers/#{your_app_name}/constants.js
|
133
|
-
app/javascript/src/#{your_app_name}/containers/#{your_app_name}/#{your_app_name}Reducer.js
|
134
|
-
|
123
|
+
###### src section
|
124
|
+
- `app/javascript/src`
|
125
|
+
- `app/javascript/src/#{your_app_name}/reducer.js` *"this is for your combineReducer"*
|
126
|
+
###### components section
|
127
|
+
- `app/javascript/src/#{your_app_name}/components`
|
128
|
+
- `app/javascript/src/#{your_app_name}/components/#{your_app_name}`
|
129
|
+
- `app/javascript/src/#{your_app_name}/components/#{your_app_name}/#{your_app_name}.js`
|
130
|
+
- `app/javascript/src/#{your_app_name}/components/#{your_app_name}/#{your_app_name}.scss`
|
131
|
+
###### containers section
|
132
|
+
- `app/javascript/src/#{your_app_name}/containers`
|
133
|
+
- `app/javascript/src/#{your_app_name}/containers/#{your_app_name}`
|
134
|
+
- `app/javascript/src/#{your_app_name}/containers/#{your_app_name}/#{your_app_name}.js`
|
135
|
+
- `app/javascript/src/#{your_app_name}/containers/#{your_app_name}/action.js`
|
136
|
+
- `app/javascript/src/#{your_app_name}/containers/#{your_app_name}/actionTypes.js`
|
137
|
+
- `app/javascript/src/#{your_app_name}/containers/#{your_app_name}/constants.js`
|
138
|
+
- `app/javascript/src/#{your_app_name}/containers/#{your_app_name}/#{your_app_name}Reducer.js`
|
139
|
+
|
140
|
+
and adds and installs these dependencies to your package.json file:
|
141
|
+
|
142
|
+
`react-redux` `redux` `redux-devtools-extension` `react-router-dom` `react-router-redux` `history`
|
135
143
|
|
136
144
|
Once the install generator is finished:
|
137
145
|
1. add the following pack_tags to the file you want the react component to be rendered in
|
@@ -144,10 +152,36 @@ Once the install generator is finished:
|
|
144
152
|
#{your_app_name} component!
|
145
153
|
find me in find me in app/javascript/src/#{your_app_name}/components/#{your_app_name}#{your_app_name}.js
|
146
154
|
```
|
155
|
+
### Pack generator
|
156
|
+
The Pack generator takes a single name argument
|
157
|
+
###### *if you leave #{your_app_name} blank file, component and container names will default to 'app'*
|
158
|
+
To create a new Pack file run:
|
159
|
+
|
160
|
+
$ rails generate pack #{your_app_name}
|
161
|
+
|
162
|
+
This will generate a new React app inside of the `app/javascript/src` folder. Including a new `pack/#{your_app_name}.jsx` file and links to `public/packs/manifest.json`. Includes the following folder and files:
|
163
|
+
|
164
|
+
###### src section
|
165
|
+
- `app/javascript/src`
|
166
|
+
- `app/javascript/src/#{your_app_name}/reducer.js` *"this is for your combineReducer"*
|
167
|
+
###### components section
|
168
|
+
- `app/javascript/src/#{your_app_name}/components`
|
169
|
+
- `app/javascript/src/#{your_app_name}/components/#{your_app_name}`
|
170
|
+
- `app/javascript/src/#{your_app_name}/components/#{your_app_name}/#{your_app_name}.js`
|
171
|
+
- `app/javascript/src/#{your_app_name}/components/#{your_app_name}/#{your_app_name}.scss`
|
172
|
+
###### containers section
|
173
|
+
- `app/javascript/src/#{your_app_name}/containers`
|
174
|
+
- `app/javascript/src/#{your_app_name}/containers/#{your_app_name}`
|
175
|
+
- `app/javascript/src/#{your_app_name}/containers/#{your_app_name}/#{your_app_name}.js`
|
176
|
+
- `app/javascript/src/#{your_app_name}/containers/#{your_app_name}/action.js`
|
177
|
+
- `app/javascript/src/#{your_app_name}/containers/#{your_app_name}/actionTypes.js`
|
178
|
+
- `app/javascript/src/#{your_app_name}/containers/#{your_app_name}/constants.js`
|
179
|
+
- `app/javascript/src/#{your_app_name}/containers/#{your_app_name}/#{your_app_name}Reducer.js`
|
180
|
+
|
147
181
|
|
148
182
|
### Component generator
|
149
183
|
The Component generator takes two arguments (the new Component name and the desired install location)
|
150
|
-
###### *if you leave #{your_app_name} blank file, component and container names will default to 'app'*
|
184
|
+
###### *if you leave #{your_app_name} or #{your_component_name} blank file, component and container names will default to 'app'*
|
151
185
|
To create a new component run:
|
152
186
|
|
153
187
|
$ rails generate component #{your_component_name} #{your_app_name}
|
@@ -159,7 +193,7 @@ This will generate a new folder inside of your components folder with the follow
|
|
159
193
|
|
160
194
|
### Container generator
|
161
195
|
The Container generator takes two arguments (the new Container name and the desired install location)
|
162
|
-
###### *if you leave #{your_app_name} blank file, component and container names will default to 'app'*
|
196
|
+
###### *if you leave #{your_app_name} or #{your_container_name} blank file, component and container names will default to 'app'*
|
163
197
|
To create a new container run:
|
164
198
|
|
165
199
|
$ rails generate container #{your_container_name} #{your_app_name}
|
@@ -0,0 +1,129 @@
|
|
1
|
+
class PackGenerator < Rails::Generators::NamedBase
|
2
|
+
source_root File.expand_path('../templates', __FILE__)
|
3
|
+
argument :name, :type => :string, :default => "app"
|
4
|
+
|
5
|
+
def create_src_directory
|
6
|
+
empty_directory("app/javascript/src")
|
7
|
+
empty_directory("app/javascript/src/#{name}")
|
8
|
+
end
|
9
|
+
|
10
|
+
def create_reducer_base_file
|
11
|
+
create_file "app/javascript/src/#{name}/reducer.js",
|
12
|
+
"import { combineReducers } from 'redux'
|
13
|
+
import #{name}Reducer from './containers/#{name}/#{name}Reducer.js'
|
14
|
+
|
15
|
+
const rootReducer = combineReducers({
|
16
|
+
#{name}Reducer
|
17
|
+
})
|
18
|
+
|
19
|
+
export default rootReducer"
|
20
|
+
end
|
21
|
+
|
22
|
+
def create_component_base_files
|
23
|
+
empty_directory("app/javascript/src/#{name}/components")
|
24
|
+
empty_directory("app/javascript/src/#{name}/components/#{name}")
|
25
|
+
create_file "app/javascript/src/#{name}/components/#{name}/#{name}.js",
|
26
|
+
"import React from 'react';
|
27
|
+
import './#{name}.scss';
|
28
|
+
|
29
|
+
const #{name} = () => (
|
30
|
+
<div className='#{name}'>
|
31
|
+
<h1>#{name} component!</h1>
|
32
|
+
<p>find me in app/javascript/src/#{name}/components/#{name}/#{name}.js</p>
|
33
|
+
</div>
|
34
|
+
)
|
35
|
+
|
36
|
+
export default #{name};"
|
37
|
+
create_file "app/javascript/src/#{name}/components/#{name}/#{name}.scss",
|
38
|
+
".#{name} {
|
39
|
+
|
40
|
+
}"
|
41
|
+
end
|
42
|
+
|
43
|
+
def create_container_base_files
|
44
|
+
empty_directory("app/javascript/src/#{name}/containers")
|
45
|
+
empty_directory("app/javascript/src/#{name}/containers/#{name}")
|
46
|
+
create_file "app/javascript/src/#{name}/containers/#{name}/#{name}.js",
|
47
|
+
"import * as actions from './actions';
|
48
|
+
import * as constants from './constants';
|
49
|
+
import #{name}Reducer from './#{name}Reducer';
|
50
|
+
|
51
|
+
export default { actions, constants, #{name}Reducer };"
|
52
|
+
create_file "app/javascript/src/#{name}/containers/#{name}/actions.js",
|
53
|
+
"// import {} from './constants';
|
54
|
+
//import * as t from './actionTypes';
|
55
|
+
|
56
|
+
//export const someAction = (text) => ({
|
57
|
+
// type: t.SOME_ACTION,
|
58
|
+
// payload: { text }
|
59
|
+
//});"
|
60
|
+
create_file "app/javascript/src/#{name}/containers/#{name}/actionTypes.js",
|
61
|
+
"//export const SOME_ACTION = '#{name}/SOME_ACTION';"
|
62
|
+
|
63
|
+
create_file "app/javascript/src/#{name}/containers/#{name}/constants.js",
|
64
|
+
"// export const SOME_CONST = 'SOME_CONST';"
|
65
|
+
|
66
|
+
create_file "app/javascript/src/#{name}/containers/#{name}/#{name}Reducer.js",
|
67
|
+
"const #{name}Reducer = (state = {}, action) => {
|
68
|
+
switch (action.type) {
|
69
|
+
default:
|
70
|
+
return state;
|
71
|
+
}
|
72
|
+
};
|
73
|
+
|
74
|
+
export default #{name}Reducer;"
|
75
|
+
end
|
76
|
+
|
77
|
+
def create_pack
|
78
|
+
create_file "app/javascript/packs/#{name}.jsx",
|
79
|
+
"// add <%= javascript_pack_tag '#{name}' %> and <%= stylesheet_pack_tag '#{name}' %> to the html.erb file you would like your React App to be rendered.
|
80
|
+
|
81
|
+
import React from 'react'
|
82
|
+
import { render } from 'react-dom'
|
83
|
+
import { Provider } from 'react-redux'
|
84
|
+
import { createStore, combineReducers, applyMiddleware } from 'redux'
|
85
|
+
|
86
|
+
//this allows you to use the redux devtool in chrome
|
87
|
+
import { devToolsEnhancer } from 'redux-devtools-extension'
|
88
|
+
|
89
|
+
import { BrowserRouter as Router, Route, Link } from 'react-router-dom'
|
90
|
+
|
91
|
+
import #{name} from '../src/#{name}/components/#{name}/#{name}.js'
|
92
|
+
|
93
|
+
import rootReducer from '../src/#{name}/reducer'
|
94
|
+
|
95
|
+
//this is for devToolsEnhancer otherwise would be 'let store = createStore(rootReducer)'
|
96
|
+
let store = createStore(rootReducer, /* preloadedState, */ devToolsEnhancer(
|
97
|
+
// Specify name here, actionsBlacklist, actionsCreators and other options if needed
|
98
|
+
));
|
99
|
+
console.log(store.getState())
|
100
|
+
|
101
|
+
// Note that subscribe() returns a function for unregistering the listener
|
102
|
+
let unsubscribe = store.subscribe(() =>
|
103
|
+
console.log(store.getState())
|
104
|
+
)
|
105
|
+
|
106
|
+
// Stop listening to state updates
|
107
|
+
unsubscribe()
|
108
|
+
|
109
|
+
document.addEventListener('DOMContentLoaded', () => {
|
110
|
+
render(
|
111
|
+
<Provider store={store}>
|
112
|
+
<Router>
|
113
|
+
<div>
|
114
|
+
<Route path=\"/\" component={#{name}} />
|
115
|
+
</div>
|
116
|
+
</Router>
|
117
|
+
</Provider>,
|
118
|
+
document.body.appendChild(document.createElement('div')),
|
119
|
+
)
|
120
|
+
})"
|
121
|
+
end
|
122
|
+
|
123
|
+
def insert_into_manifest
|
124
|
+
inject_into_file "public/packs/manifest.json", " \"#{name}.js\" : \"http://0.0.0.0:8080/packs/#{name}.js\",\n", :after => "{\n"
|
125
|
+
|
126
|
+
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"
|
127
|
+
end
|
128
|
+
|
129
|
+
end
|
@@ -15,7 +15,7 @@ module ReduxRails
|
|
15
15
|
def create_reducer_base_file
|
16
16
|
create_file "app/javascript/src/#{name}/reducer.js",
|
17
17
|
"import { combineReducers } from 'redux'
|
18
|
-
import #{name}Reducer from './containers/#{name}/#{name}.js'
|
18
|
+
import #{name}Reducer from './containers/#{name}/#{name}Reducer.js'
|
19
19
|
|
20
20
|
const rootReducer = combineReducers({
|
21
21
|
#{name}Reducer
|
@@ -51,10 +51,10 @@ const #{name} = () => (
|
|
51
51
|
create_file "app/javascript/src/#{name}/containers/#{name}/#{name}.js",
|
52
52
|
"import * as actions from './actions';
|
53
53
|
import * as constants from './constants';
|
54
|
-
import #{name}Reducer from '
|
54
|
+
import #{name}Reducer from './#{name}Reducer';
|
55
55
|
|
56
56
|
export default { actions, constants, #{name}Reducer };"
|
57
|
-
create_file "app/javascript/src/#{name}/containers/#{name}/
|
57
|
+
create_file "app/javascript/src/#{name}/containers/#{name}/actions.js",
|
58
58
|
"// import {} from './constants';
|
59
59
|
//import * as t from './actionTypes';
|
60
60
|
|
@@ -130,5 +130,6 @@ document.addEventListener('DOMContentLoaded', () => {
|
|
130
130
|
|
131
131
|
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"
|
132
132
|
end
|
133
|
+
|
133
134
|
end
|
134
135
|
end
|
data/lib/redux_rails/version.rb
CHANGED
data/redux_rails.gemspec
CHANGED
@@ -9,7 +9,7 @@ Gem::Specification.new do |spec|
|
|
9
9
|
spec.authors = ["Luke Popwell"]
|
10
10
|
spec.email = ["lukepopwell@mac.com"]
|
11
11
|
spec.summary = %q{Setup React and Redux for Rails 5.1}
|
12
|
-
spec.description = %q{Complete setup for React and Redux into Rails 5.1 pipeline or later. Includes initial install generator, component and container generator. Full description of install located at https://github.com/Luke-Popwell/redux_rails }
|
12
|
+
spec.description = %q{Complete setup for React and Redux into Rails 5.1 pipeline or later. Includes initial install generator, component and container generator. Full description of install located at "https://github.com/Luke-Popwell/redux_rails" }
|
13
13
|
spec.homepage = "https://github.com/Luke-Popwell/redux_rails"
|
14
14
|
spec.license = "MIT"
|
15
15
|
|
metadata
CHANGED
@@ -1,14 +1,14 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: redux_rails
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 0.1.
|
4
|
+
version: 0.1.4
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Luke Popwell
|
8
8
|
autorequire:
|
9
9
|
bindir: exe
|
10
10
|
cert_chain: []
|
11
|
-
date: 2017-07-
|
11
|
+
date: 2017-07-17 00:00:00.000000000 Z
|
12
12
|
dependencies:
|
13
13
|
- !ruby/object:Gem::Dependency
|
14
14
|
name: bundler
|
@@ -54,7 +54,7 @@ dependencies:
|
|
54
54
|
version: '3.0'
|
55
55
|
description: 'Complete setup for React and Redux into Rails 5.1 pipeline or later.
|
56
56
|
Includes initial install generator, component and container generator. Full description
|
57
|
-
of install located at https://github.com/Luke-Popwell/redux_rails '
|
57
|
+
of install located at "https://github.com/Luke-Popwell/redux_rails" '
|
58
58
|
email:
|
59
59
|
- lukepopwell@mac.com
|
60
60
|
executables: []
|
@@ -71,6 +71,7 @@ files:
|
|
71
71
|
- bin/setup
|
72
72
|
- lib/generators/component/component_generator.rb
|
73
73
|
- lib/generators/container/container_generator.rb
|
74
|
+
- lib/generators/pack/pack_generator.rb
|
74
75
|
- lib/generators/redux_rails/install_generator.rb
|
75
76
|
- lib/redux_rails.rb
|
76
77
|
- lib/redux_rails/version.rb
|