react_webpack_rails 0.0.1 → 0.0.2
Sign up to get free protection for your applications and to get access to all the features.
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA1:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 23e61ad851d49804d84cff1615b14aa4ddec2ba8
|
4
|
+
data.tar.gz: 0adf9b76662d547ae6e2c22de4d117ce129669cd
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 858c4be7c690ebb7784d2caee695bae07984b3d09c428c26775a5640bd205c27c06af4692d694e09fe481876182fecd944e640641e57e74517b08a9a0afd5f14
|
7
|
+
data.tar.gz: 28d0dc73a1bb691ae1062e72d9551811452dc4a48e967f5f79e179b40671da3a600590cccd5e110e47d6430073b6a58c8d06f8172ee38d6927f28d8d0fc6fe3a
|
data/CHANGELOG.md
ADDED
@@ -0,0 +1,25 @@
|
|
1
|
+
## (0.0.2)
|
2
|
+
* using rails like names
|
3
|
+
* simplifying webpack setup
|
4
|
+
* making `registerComponent` helper part of ujs,
|
5
|
+
|
6
|
+
### migration 0.0.1 -> 0.0.2
|
7
|
+
* in `application.js` replace:
|
8
|
+
|
9
|
+
```js
|
10
|
+
//= require react-integration
|
11
|
+
//= require generated/bundle
|
12
|
+
```
|
13
|
+
|
14
|
+
with:
|
15
|
+
```js
|
16
|
+
//= require react_integration
|
17
|
+
//= require react_bundle
|
18
|
+
```
|
19
|
+
|
20
|
+
## (0.0.1) Initial release
|
21
|
+
* generators for webpack configuration
|
22
|
+
* helpers:
|
23
|
+
* js - `registerComponent` exposing component for rails
|
24
|
+
* rails - `react_component` using component based on https://github.com/reactjs/react-rails/blob/master/lib/react/rails/view_helper.rb
|
25
|
+
* integration script based on https://github.com/reactjs/react-rails/blob/master/lib/assets/javascripts/react_ujs.js.erb
|
data/README.md
CHANGED
@@ -1,8 +1,6 @@
|
|
1
1
|
# ReactWebpackRails
|
2
|
-
|
3
|
-
|
4
|
-
|
5
|
-
TODO: Delete this and the text above, and describe your gem
|
2
|
+
#### Rails - webpack setup with react integration.
|
3
|
+
Inspired and partially based on https://github.com/reactjs/react-rails/ this gem provides generators and helpers that makes rails-webpack-react integration easy.
|
6
4
|
|
7
5
|
## Installation
|
8
6
|
|
@@ -12,7 +10,7 @@ Add this line to your application's Gemfile:
|
|
12
10
|
gem 'react_webpack_rails'
|
13
11
|
```
|
14
12
|
|
15
|
-
|
13
|
+
Execute:
|
16
14
|
|
17
15
|
$ bundle
|
18
16
|
|
@@ -20,9 +18,45 @@ Or install it yourself as:
|
|
20
18
|
|
21
19
|
$ gem install react_webpack_rails
|
22
20
|
|
21
|
+
Then run installation:
|
22
|
+
|
23
|
+
$ rails g react_webpack_rails:install
|
24
|
+
|
25
|
+
Generate `react_bundle` for first time:
|
26
|
+
|
27
|
+
$ webpack
|
28
|
+
|
29
|
+
And require integration and bundle files in `application.js`
|
30
|
+
|
31
|
+
```js
|
32
|
+
//= require react_integration
|
33
|
+
//= require react_bundle
|
34
|
+
```
|
35
|
+
|
23
36
|
## Usage
|
37
|
+
1. Register component in index.js
|
24
38
|
|
25
|
-
|
39
|
+
```js
|
40
|
+
import Component from 'some-component';
|
41
|
+
|
42
|
+
registerComponent('customComponentName', Component)
|
43
|
+
```
|
44
|
+
|
45
|
+
2. Use it in view
|
46
|
+
|
47
|
+
```erb
|
48
|
+
<%= react_component('customComponentName', { user: User.last })
|
49
|
+
```
|
50
|
+
|
51
|
+
#### Development
|
52
|
+
Run webpack in watch mode so it will react on any file change.
|
53
|
+
|
54
|
+
webpack -w
|
55
|
+
|
56
|
+
#### Production
|
57
|
+
Run webpack in production mode before compiling assets
|
58
|
+
|
59
|
+
webpack -p
|
26
60
|
|
27
61
|
## Development
|
28
62
|
|
@@ -32,10 +66,9 @@ To install this gem onto your local machine, run `bundle exec rake install`. To
|
|
32
66
|
|
33
67
|
## Contributing
|
34
68
|
|
35
|
-
Bug reports and pull requests are welcome on GitHub at https://github.com/
|
69
|
+
Bug reports and pull requests are welcome on GitHub at https://github.com/netguru/react_webpack_rails.
|
36
70
|
|
37
71
|
|
38
72
|
## License
|
39
73
|
|
40
74
|
The gem is available as open source under the terms of the [MIT License](http://opensource.org/licenses/MIT).
|
41
|
-
|
@@ -6,19 +6,15 @@
|
|
6
6
|
// jQuery is optional. Use it to support legacy browsers.
|
7
7
|
var $ = (typeof window.jQuery !== 'undefined') && window.jQuery;
|
8
8
|
|
9
|
-
window.reactComponents = {};
|
10
|
-
window.registerComponent = function (name, component) {
|
11
|
-
window.reactComponents[name] = component;
|
12
|
-
};
|
13
|
-
|
14
9
|
// create the namespace
|
15
10
|
window.ReactRailsUJS = {
|
16
11
|
CLASS_NAME_ATTR: 'data-react-class',
|
17
12
|
PROPS_ATTR: 'data-react-props',
|
18
13
|
RAILS_ENV_DEVELOPMENT: <%= Rails.env == "development" %>,
|
14
|
+
reactComponents: {},
|
19
15
|
// helper method for the mount and unmount methods to find the
|
20
16
|
// `data-react-class` DOM elements
|
21
|
-
|
17
|
+
_findDOMNodes: function(searchSelector) {
|
22
18
|
// we will use fully qualified paths as we do not bind the callbacks
|
23
19
|
var selector;
|
24
20
|
if (typeof searchSelector === 'undefined') {
|
@@ -34,8 +30,12 @@
|
|
34
30
|
}
|
35
31
|
},
|
36
32
|
|
33
|
+
registerComponent: function (name, component) {
|
34
|
+
window.ReactRailsUJS.reactComponents[name] = component;
|
35
|
+
},
|
36
|
+
|
37
37
|
mountComponents: function(searchSelector) {
|
38
|
-
var nodes = window.ReactRailsUJS.
|
38
|
+
var nodes = window.ReactRailsUJS._findDOMNodes(searchSelector);
|
39
39
|
|
40
40
|
for (var i = 0; i < nodes.length; ++i) {
|
41
41
|
var node = nodes[i];
|
@@ -44,7 +44,7 @@
|
|
44
44
|
// Assume className is simple and can be found at top-level (window).
|
45
45
|
// Fallback to eval to handle cases like 'My.React.ComponentName'.
|
46
46
|
|
47
|
-
var constructor = window.reactComponents[className] || eval.call(window, className);
|
47
|
+
var constructor = window.ReactRailsUJS.reactComponents[className] || eval.call(window, className);
|
48
48
|
var propsJson = node.getAttribute(window.ReactRailsUJS.PROPS_ATTR);
|
49
49
|
var props = propsJson && JSON.parse(propsJson);
|
50
50
|
|
@@ -53,7 +53,7 @@
|
|
53
53
|
},
|
54
54
|
|
55
55
|
unmountComponents: function(searchSelector) {
|
56
|
-
var nodes = window.ReactRailsUJS.
|
56
|
+
var nodes = window.ReactRailsUJS._findDOMNodes(searchSelector);
|
57
57
|
|
58
58
|
for (var i = 0; i < nodes.length; ++i) {
|
59
59
|
var node = nodes[i];
|
@@ -63,6 +63,9 @@
|
|
63
63
|
}
|
64
64
|
};
|
65
65
|
|
66
|
+
// expose registerComponent globally
|
67
|
+
window.registerComponent = ReactRailsUJS.registerComponent;
|
68
|
+
|
66
69
|
// functions not exposed publicly
|
67
70
|
function handleTurbolinksEvents () {
|
68
71
|
var handleEvent;
|
@@ -2,8 +2,8 @@ module.exports = {
|
|
2
2
|
context: __dirname + '/app/react',
|
3
3
|
entry: './index',
|
4
4
|
output: {
|
5
|
-
path: __dirname + '/app/assets/javascripts
|
6
|
-
filename: '
|
5
|
+
path: __dirname + '/app/assets/javascripts',
|
6
|
+
filename: 'react_bundle.js'
|
7
7
|
},
|
8
8
|
module: {
|
9
9
|
loaders: [
|
metadata
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: react_webpack_rails
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 0.0.
|
4
|
+
version: 0.0.2
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Rafał Gawlik
|
@@ -9,7 +9,7 @@ authors:
|
|
9
9
|
autorequire:
|
10
10
|
bindir: exe
|
11
11
|
cert_chain: []
|
12
|
-
date: 2015-08-
|
12
|
+
date: 2015-08-29 00:00:00.000000000 Z
|
13
13
|
dependencies:
|
14
14
|
- !ruby/object:Gem::Dependency
|
15
15
|
name: bundler
|
@@ -64,13 +64,14 @@ files:
|
|
64
64
|
- ".gitignore"
|
65
65
|
- ".rspec"
|
66
66
|
- ".travis.yml"
|
67
|
+
- CHANGELOG.md
|
67
68
|
- Gemfile
|
68
69
|
- LICENSE.txt
|
69
70
|
- README.md
|
70
71
|
- Rakefile
|
71
72
|
- bin/console
|
72
73
|
- bin/setup
|
73
|
-
- lib/assets/javascripts/
|
74
|
+
- lib/assets/javascripts/react_integration.js.erb
|
74
75
|
- lib/generators/react_webpack_rails/USAGE
|
75
76
|
- lib/generators/react_webpack_rails/install_generator.rb
|
76
77
|
- lib/generators/react_webpack_rails/templates/hello-world-test.jsx
|