react_webpack_rails 0.0.5 → 0.1.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/.babelrc +3 -0
- data/.gitignore +3 -0
- data/.npmignore +1 -0
- data/.travis.yml +37 -3
- data/CHANGELOG.md +56 -0
- data/README.md +6 -0
- data/Rakefile +42 -6
- data/bin/setup +2 -0
- data/docs/README.md +10 -9
- data/docs/api.md +103 -99
- data/js/.eslintrc +12 -0
- data/js/src/env.js +1 -0
- data/js/src/index.js +30 -0
- data/js/src/integrations-manager.js +22 -0
- data/js/src/integrations/react-router.js +48 -0
- data/js/src/integrations/react.js +49 -0
- data/js/src/nodes.js +51 -0
- data/js/src/version.js +1 -0
- data/js/test/env.spec.js +10 -0
- data/js/test/integrations-manager.spec.js +38 -0
- data/js/test/integrations/react-router.spec.js +133 -0
- data/js/test/integrations/react.spec.js +96 -0
- data/js/test/nodes.spec.js +121 -0
- data/lib/assets/javascripts/react_integration.js.erb +74 -155
- data/lib/generators/react_webpack_rails/templates/.babelrc +1 -1
- data/lib/generators/react_webpack_rails/templates/karma.conf.js +1 -1
- data/lib/generators/react_webpack_rails/templates/package.json.erb +9 -3
- data/lib/generators/react_webpack_rails/templates/react/index.js.erb +4 -6
- data/lib/generators/react_webpack_rails/templates/webpack.config.js +1 -1
- data/lib/react_webpack_rails/railtie.rb +5 -0
- data/lib/react_webpack_rails/version.rb +1 -1
- data/lib/react_webpack_rails/view_helpers.rb +24 -12
- data/package.json +49 -0
- metadata +19 -4
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA1:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 59c32fad93906a7fe5d5459d0bc091dcbdcda2c9
|
4
|
+
data.tar.gz: 9800aa8218f61aa770932a13057a3e97ddebcbae
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 8663103a400c5a87088b770923118b17d10de4f6c65bd7f4c13b4dac24eece013316f61ecb32bb4449adb69b94fc06264a6c195df0e770135da96848d3c59cca
|
7
|
+
data.tar.gz: 5a77f4bc72ff1e6f3c14e46e0b809e38bd64ea0d834df209004aaeb1147b29ba8b7a059328e40762d8b42597b5c5ad7480a6e7f6f02324d68fd1fb7ebc7abcba
|
data/.babelrc
ADDED
data/.gitignore
CHANGED
data/.npmignore
ADDED
@@ -0,0 +1 @@
|
|
1
|
+
js/src/
|
data/.travis.yml
CHANGED
@@ -1,4 +1,38 @@
|
|
1
|
+
branches:
|
2
|
+
except:
|
3
|
+
- docs
|
4
|
+
|
1
5
|
language: ruby
|
2
|
-
|
3
|
-
|
4
|
-
|
6
|
+
|
7
|
+
cache:
|
8
|
+
bundler: true
|
9
|
+
directories:
|
10
|
+
- spec/rails3_dummy_app/node_modules
|
11
|
+
- spec/rails4_dummy_app/node_modules
|
12
|
+
- node_modules
|
13
|
+
|
14
|
+
matrix:
|
15
|
+
include:
|
16
|
+
- rvm: 2.2.4
|
17
|
+
gemfile: spec/rails4_dummy_app/Gemfile
|
18
|
+
env: TEST_SUITE=rails4
|
19
|
+
- rvm: 2.2.4
|
20
|
+
gemfile: spec/rails3_dummy_app/Gemfile
|
21
|
+
env: TEST_SUITE=rails3
|
22
|
+
- rvm: 2.2.4
|
23
|
+
gemfile: Gemfile
|
24
|
+
env: TEST_SUITE=gem
|
25
|
+
- rvm: 2.2.4
|
26
|
+
env: TEST_SUITE=node
|
27
|
+
|
28
|
+
before_script:
|
29
|
+
- npm install -g npm@^2.0
|
30
|
+
- npm install -g webpack@^1.12.1
|
31
|
+
- bundle exec rake setup:$TEST_SUITE
|
32
|
+
- 'export CHROME_BIN=chromium-browser'
|
33
|
+
- "export DISPLAY=:99.0" # Setup display for selenium driver
|
34
|
+
- "sh -e /etc/init.d/xvfb start"
|
35
|
+
- sleep 3 # give xvfb some time to start
|
36
|
+
|
37
|
+
script:
|
38
|
+
- bundle exec rake test:$TEST_SUITE
|
data/CHANGELOG.md
CHANGED
@@ -1,3 +1,57 @@
|
|
1
|
+
## 0.1.0 (January 27, 2015)
|
2
|
+
* `config.react.camelize_props = true` will camelize `react_component` prop keys
|
3
|
+
* Babel updated to version 6
|
4
|
+
* `react-webpack-rails` npm package
|
5
|
+
* replacing javascript integrations
|
6
|
+
* removing global javascript helpers (registerComponent, getComponent, createComponent, renderComponent, renderRouter, getRouter)
|
7
|
+
|
8
|
+
#### migration 0.0.5 -> 0.1.0
|
9
|
+
1. Install react-webpack-rails package.
|
10
|
+
|
11
|
+
```
|
12
|
+
$ npm install --save react-webpack-rails
|
13
|
+
```
|
14
|
+
|
15
|
+
2. Update gem react_webpack_rails
|
16
|
+
|
17
|
+
```
|
18
|
+
$ bundle update react_webpack_rails
|
19
|
+
```
|
20
|
+
3. Update babel to version 6.x.
|
21
|
+
|
22
|
+
```
|
23
|
+
$ npm i --save-dev babel-core@^6.0.0 babel-loader@^6.0.0 babel-preset-stage-1@^6.0.0 babel-preset-react@^6.0.0 babel-preset-es2015@^6.0.0
|
24
|
+
```
|
25
|
+
|
26
|
+
4. Update babel config file (we use stage-1).
|
27
|
+
|
28
|
+
```
|
29
|
+
{
|
30
|
+
"presets": ["stage-1", "es2015", "react"]
|
31
|
+
}
|
32
|
+
```
|
33
|
+
|
34
|
+
5. Import and expose RWR in `react/index.js` file
|
35
|
+
add on the top:
|
36
|
+
|
37
|
+
```js
|
38
|
+
// app/react/index.js
|
39
|
+
import RWR from 'react-webpack-rails';
|
40
|
+
window.RWR = RWR;
|
41
|
+
```
|
42
|
+
|
43
|
+
6. Use helpers from RWR instead of globals. Example:
|
44
|
+
|
45
|
+
```
|
46
|
+
# old
|
47
|
+
registerComponent(...)
|
48
|
+
|
49
|
+
# new
|
50
|
+
RWR.registerComponent(...)
|
51
|
+
```
|
52
|
+
|
53
|
+
7. You can remove exposed `React` and `ReactDOM` from `react/index.js`. No need to expose them globally.
|
54
|
+
|
1
55
|
## 0.0.5 (November 26, 2015)
|
2
56
|
* Add Hot Reload support
|
3
57
|
* Dependencies:
|
@@ -40,11 +94,13 @@
|
|
40
94
|
$ npm install react-dom --save`
|
41
95
|
```
|
42
96
|
* Expose `ReactDOM` in app/react/index.js.
|
97
|
+
|
43
98
|
```js
|
44
99
|
import ReactDOM from 'react-dom';
|
45
100
|
window.ReactDOM = ReactDOM;
|
46
101
|
```
|
47
102
|
* Create `.bablerc` in your project directory:
|
103
|
+
|
48
104
|
```js
|
49
105
|
{
|
50
106
|
"stage": 1
|
data/README.md
CHANGED
@@ -1,4 +1,6 @@
|
|
1
1
|
# ReactWebpackRails
|
2
|
+
[![Travis CI](https://travis-ci.org/netguru/react_webpack_rails.svg?branch=master)](https://travis-ci.org/netguru/react_webpack_rails)
|
3
|
+
|
2
4
|
#### Rails - Webpack setup with React integration.
|
3
5
|
Inspired and partially based on https://github.com/reactjs/react-rails/ this gem provides generators and helpers that makes react-webpack-rails integration easy.
|
4
6
|
|
@@ -52,6 +54,10 @@ Establish the node packages (may take a few moments)
|
|
52
54
|
|
53
55
|
$ npm install # you may see warnings to consider updating the provided package.json file with license and repository
|
54
56
|
|
57
|
+
Make sure you have [webpack](https://webpack.github.io/docs/installation.html) installed globally:
|
58
|
+
|
59
|
+
$ npm install webpack -g
|
60
|
+
|
55
61
|
Generate `react_bundle` for first time:
|
56
62
|
|
57
63
|
$ webpack
|
data/Rakefile
CHANGED
@@ -1,26 +1,62 @@
|
|
1
1
|
require "bundler/gem_tasks"
|
2
2
|
require "rspec/core/rake_task"
|
3
3
|
|
4
|
-
namespace :
|
4
|
+
namespace :test do
|
5
5
|
desc 'Run all tests'
|
6
|
-
task all: [:gem, :rails3, :rails4] do
|
6
|
+
task all: [:node, :gem, :rails3, :rails4] do
|
7
7
|
puts 'Finished all tests, yay!'
|
8
8
|
end
|
9
9
|
|
10
|
+
desc 'Run node package tests'
|
11
|
+
task :node do
|
12
|
+
sh %Q(npm test)
|
13
|
+
end
|
14
|
+
|
10
15
|
desc 'Run gem tests'
|
11
16
|
task :gem do
|
12
|
-
sh %Q(rspec spec/react_webpack_rails_spec.rb)
|
17
|
+
sh %Q(bundle exec rspec spec/react_webpack_rails_spec.rb)
|
13
18
|
end
|
14
19
|
|
15
20
|
desc 'Run rspec for rails3 application'
|
16
21
|
task :rails3 do
|
17
|
-
|
22
|
+
Bundler.with_clean_env do
|
23
|
+
sh %Q(cd spec/rails3_dummy_app && npm run build && bundle exec rspec && npm test)
|
24
|
+
end
|
18
25
|
end
|
19
26
|
|
20
27
|
desc 'Run rspec for rails4 application'
|
21
28
|
task :rails4 do
|
22
|
-
|
29
|
+
Bundler.with_clean_env do
|
30
|
+
sh %Q(cd spec/rails4_dummy_app && npm run build && bundle exec rspec && npm test)
|
31
|
+
end
|
23
32
|
end
|
24
33
|
end
|
25
34
|
|
26
|
-
task default: '
|
35
|
+
task default: 'test:all'
|
36
|
+
|
37
|
+
namespace :setup do
|
38
|
+
desc 'Prepare every environment'
|
39
|
+
task all: [:gem, :rails3, :rails4] do
|
40
|
+
puts 'Prepared all, yay!'
|
41
|
+
end
|
42
|
+
|
43
|
+
desc 'Prepare node module dependencies'
|
44
|
+
task :node do
|
45
|
+
sh %Q(npm install)
|
46
|
+
end
|
47
|
+
|
48
|
+
desc 'Prepare gem dependencies'
|
49
|
+
task :gem do
|
50
|
+
sh %Q(bundle install)
|
51
|
+
end
|
52
|
+
|
53
|
+
desc 'Prepare rails3 test app dependencies'
|
54
|
+
task :rails3 do
|
55
|
+
sh %Q(npm install && cd spec/rails3_dummy_app && npm install && bundle install)
|
56
|
+
end
|
57
|
+
|
58
|
+
desc 'Prepare rails4 test app dependencies'
|
59
|
+
task :rails4 do
|
60
|
+
sh %Q(npm install && cd spec/rails4_dummy_app && npm install && bundle install)
|
61
|
+
end
|
62
|
+
end
|
data/bin/setup
CHANGED
data/docs/README.md
CHANGED
@@ -1,11 +1,12 @@
|
|
1
1
|
# Docs
|
2
2
|
1. [Api](https://github.com/netguru/react_webpack_rails/blob/master/docs/api.md)
|
3
|
-
1. [
|
4
|
-
* [registerComponent](https://github.com/netguru/react_webpack_rails/blob/master/docs/api.md#registercomponent)
|
5
|
-
* [createComponent](https://github.com/netguru/react_webpack_rails/blob/master/docs/api.md#getcomponent)
|
6
|
-
* [renderComponent](https://github.com/netguru/react_webpack_rails/blob/master/docs/api.md#rendercomponent)
|
7
|
-
* [
|
8
|
-
* [
|
9
|
-
1. [
|
10
|
-
* [
|
11
|
-
* [
|
3
|
+
1. [React](https://github.com/netguru/react_webpack_rails/blob/master/docs/api.md#React)
|
4
|
+
* [js: registerComponent](https://github.com/netguru/react_webpack_rails/blob/master/docs/api.md#registercomponent)
|
5
|
+
* [js: createComponent](https://github.com/netguru/react_webpack_rails/blob/master/docs/api.md#getcomponent)
|
6
|
+
* [js: renderComponent](https://github.com/netguru/react_webpack_rails/blob/master/docs/api.md#rendercomponent)
|
7
|
+
* [js: unmountComponent](https://github.com/netguru/react_webpack_rails/blob/master/docs/api.md#unmountcomponent)
|
8
|
+
* [ruby: react_component](https://github.com/netguru/react_webpack_rails/blob/master/docs/api.md#react_component)
|
9
|
+
1. [ReactRouter](https://github.com/netguru/react_webpack_rails/blob/master/docs/api.md#ReactRouter)
|
10
|
+
* [js: getRouter](https://github.com/netguru/react_webpack_rails/blob/master/docs/api.md#getrouter)
|
11
|
+
* [js: renderRouter](https://github.com/netguru/react_webpack_rails/blob/master/docs/api.md#renderrouter)
|
12
|
+
* [ruby: react_router](https://github.com/netguru/react_webpack_rails/blob/master/docs/api.md#react_router)
|
data/docs/api.md
CHANGED
@@ -1,152 +1,156 @@
|
|
1
|
-
|
1
|
+
# RWR api
|
2
2
|
|
3
|
-
|
4
|
-
```js
|
5
|
-
registerComponent(String componentName, class|function component)
|
6
|
-
```
|
3
|
+
## React
|
7
4
|
|
8
|
-
|
5
|
+
* #### registerComponent [js]
|
6
|
+
```js
|
7
|
+
registerComponent(String componentName, class|function component)
|
8
|
+
```
|
9
9
|
|
10
|
-
|
10
|
+
Register component so it's globally accessible.
|
11
11
|
|
12
|
-
|
13
|
-
import MyComponent from 'my-component';
|
12
|
+
##### example:
|
14
13
|
|
15
|
-
|
16
|
-
|
14
|
+
```js
|
15
|
+
import MyComponent from 'my-component';
|
17
16
|
|
18
|
-
|
17
|
+
registerComponent('MyComponentName', MyComponent);
|
18
|
+
```
|
19
19
|
|
20
|
-
|
20
|
+
**note:** Registered components are accessible in globally exposed `RWR.react` under `components` property.
|
21
21
|
|
22
|
-
|
23
|
-
getComponent(String componentName)
|
24
|
-
```
|
22
|
+
* #### getComponent [js]
|
25
23
|
|
26
|
-
|
24
|
+
```js
|
25
|
+
getComponent(String componentName)
|
26
|
+
```
|
27
27
|
|
28
|
-
|
28
|
+
Shortcut for accessing registered component.
|
29
29
|
|
30
|
-
|
31
|
-
getComponent('MyComponentName');
|
32
|
-
```
|
30
|
+
##### example:
|
33
31
|
|
34
|
-
|
32
|
+
```js
|
33
|
+
getComponent('MyComponentName');
|
34
|
+
```
|
35
35
|
|
36
|
-
|
37
|
-
createComponent(String componentName[, Object props])
|
38
|
-
```
|
36
|
+
* #### createComponent [js]
|
39
37
|
|
40
|
-
|
38
|
+
```js
|
39
|
+
createComponent(String componentName[, Object props])
|
40
|
+
```
|
41
41
|
|
42
|
-
|
42
|
+
Wrapper over React.createElement that creates ready to render component with props.
|
43
43
|
|
44
|
-
|
45
|
-
createComponent('MyComponentName', {foo: 'bar'});
|
46
|
-
```
|
44
|
+
##### example:
|
47
45
|
|
48
|
-
|
46
|
+
```js
|
47
|
+
createComponent('MyComponentName', {foo: 'bar'});
|
48
|
+
```
|
49
49
|
|
50
|
-
|
51
|
-
renderComponent(String componentName, Object props, DOMElement container)
|
52
|
-
```
|
50
|
+
* #### renderComponent [js]
|
53
51
|
|
54
|
-
|
52
|
+
```js
|
53
|
+
renderComponent(String componentName, Object props, DOMElement container)
|
54
|
+
```
|
55
55
|
|
56
|
-
|
56
|
+
Wrapper over `React.render` and `React.createElement`. Renders component with given props into specified DOM element.
|
57
57
|
|
58
|
-
|
59
|
-
var element = document.getElementById('my-element');
|
60
|
-
renderComponent('MyComponentName', {foo: 'bar'}, element);
|
61
|
-
```
|
58
|
+
##### example:
|
62
59
|
|
63
|
-
|
60
|
+
```js
|
61
|
+
var element = document.getElementById('my-element');
|
62
|
+
renderComponent('MyComponentName', {foo: 'bar'}, element);
|
63
|
+
```
|
64
64
|
|
65
|
-
|
66
|
-
unmountComponent(DOMElement container)
|
67
|
-
```
|
65
|
+
* #### unmountComponent [js]
|
68
66
|
|
69
|
-
|
67
|
+
```js
|
68
|
+
unmountComponent(DOMElement container)
|
69
|
+
```
|
70
70
|
|
71
|
-
|
71
|
+
Wrapper over `React.unmountComponentAtNode`. It will unmount component from given DOM node.
|
72
72
|
|
73
|
-
|
74
|
-
var element = document.getElementById('my-element');
|
75
|
-
unmountComponent(element);
|
76
|
-
```
|
73
|
+
##### example:
|
77
74
|
|
78
|
-
|
79
|
-
|
80
|
-
|
81
|
-
|
75
|
+
```js
|
76
|
+
var element = document.getElementById('my-element');
|
77
|
+
unmountComponent(element);
|
78
|
+
```
|
82
79
|
|
83
|
-
Register router so it's globally accessible.
|
84
80
|
|
85
|
-
|
81
|
+
* ### react_component [ruby]
|
86
82
|
|
87
|
-
|
88
|
-
|
83
|
+
```ruby
|
84
|
+
react_component(String component_name[, Object props, Object options])
|
85
|
+
```
|
89
86
|
|
90
|
-
|
91
|
-
|
87
|
+
Creates DOM node with props as data attributes in rendered view so RWR can grab it and mount proper component.
|
88
|
+
Options hash contains customization of React component, such as `tag`, `class`.
|
92
89
|
|
93
|
-
|
90
|
+
##### example:
|
94
91
|
|
95
|
-
|
92
|
+
```ruby
|
93
|
+
<%= react_component('MyComponentName', MySerializer.new(my_data), { tag: :ul, class: 'my-class' }) %>
|
94
|
+
```
|
96
95
|
|
97
|
-
|
98
|
-
getRouter(String routerName)
|
99
|
-
```
|
96
|
+
**note:** Props Object will be parsed to JSON. Be careful when passing rails models there - all its data accessible after `.to_json` will be exposed as data-attributes. We recommend using serializers to control it.
|
100
97
|
|
101
|
-
Shortcut for accessing registered router.
|
102
98
|
|
103
|
-
|
99
|
+
## ReactRouter
|
100
|
+
* #### registerRouter [js]
|
101
|
+
```js
|
102
|
+
registerRouter(String routerName, class|function component)
|
103
|
+
```
|
104
104
|
|
105
|
-
|
106
|
-
getRouter('MyRouterName');
|
107
|
-
```
|
105
|
+
Register router so it's globally accessible.
|
108
106
|
|
109
|
-
|
107
|
+
##### example:
|
110
108
|
|
111
|
-
|
112
|
-
|
113
|
-
```
|
109
|
+
```js
|
110
|
+
import MyComponent from 'my-component';
|
114
111
|
|
115
|
-
|
112
|
+
registerComponent('MyComponentName', MyComponent);
|
113
|
+
```
|
116
114
|
|
117
|
-
|
115
|
+
**note:** Registered components are accessible in globally exposed `RWR.reactRouter` under `routers` property.
|
118
116
|
|
119
|
-
|
120
|
-
var element = document.getElementById('my-element');
|
121
|
-
renderComponent('MyComponentName', {foo: 'bar'}, element);
|
122
|
-
```
|
117
|
+
* #### getRouter [js]
|
123
118
|
|
124
|
-
|
119
|
+
```js
|
120
|
+
getRouter(String routerName)
|
121
|
+
```
|
125
122
|
|
126
|
-
|
123
|
+
Shortcut for accessing registered router.
|
127
124
|
|
128
|
-
|
129
|
-
react_component(String component_name[, Object props])
|
130
|
-
```
|
125
|
+
##### example:
|
131
126
|
|
132
|
-
|
127
|
+
```js
|
128
|
+
getRouter('MyRouterName');
|
129
|
+
```
|
133
130
|
|
134
|
-
|
131
|
+
* #### renderRouter [js]
|
135
132
|
|
136
|
-
|
137
|
-
|
138
|
-
|
133
|
+
```js
|
134
|
+
renderRouter(String routerName, DOMElement container)
|
135
|
+
```
|
139
136
|
|
140
|
-
|
137
|
+
Wrapper over `React.render`. Search and render given router into specified DOM element.
|
141
138
|
|
142
|
-
|
139
|
+
##### example:
|
143
140
|
|
144
|
-
|
145
|
-
|
146
|
-
|
141
|
+
```js
|
142
|
+
var element = document.getElementById('my-element');
|
143
|
+
renderRouter('MyRouterName', element);
|
144
|
+
```
|
147
145
|
|
148
|
-
|
146
|
+
* #### react_router [ruby]
|
149
147
|
|
150
|
-
|
151
|
-
|
152
|
-
|
148
|
+
```ruby
|
149
|
+
react_router(String router_name)
|
150
|
+
```
|
151
|
+
|
152
|
+
##### example:
|
153
|
+
|
154
|
+
```ruby
|
155
|
+
<%= react_router('MyRouterName') %>
|
156
|
+
```
|