react_webpack_rails 0.0.3 → 0.0.4
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/CHANGELOG.md +31 -0
- data/README.md +8 -0
- data/docs/README.md +10 -80
- data/docs/api.md +152 -0
- data/docs/deployment.md +65 -0
- data/lib/assets/javascripts/react_integration.js.erb +51 -11
- data/lib/generators/react_webpack_rails/install_generator.rb +3 -0
- data/lib/generators/react_webpack_rails/templates/.babelrc +3 -0
- data/lib/generators/react_webpack_rails/templates/karma.conf.js +3 -1
- data/lib/generators/react_webpack_rails/templates/package.json.erb +13 -11
- data/lib/generators/react_webpack_rails/templates/react/index.js.erb +6 -5
- data/lib/generators/react_webpack_rails/templates/webpack/dev.config.js +1 -0
- data/lib/react_webpack_rails/version.rb +1 -1
- data/lib/react_webpack_rails/view_helpers.rb +5 -2
- data/react_webpack_rails.gemspec +2 -0
- metadata +20 -2
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA1:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 3fd3ea5641aff396b2ade349f530503b12fda9dc
|
4
|
+
data.tar.gz: 65b1f0030b965aef255c22e58ed19b4309529a91
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 2afdd1696782b2b19b7520c14ea07b7c6b63838a7e945109c623f12af6cd03a9b91b761b8f568f570ed81ce3738726fd4c36f4973b971bfd378dedf97d017a52
|
7
|
+
data.tar.gz: 269768ac294ea3e532978fa23e9a3a6db9830aeaec1385a61cd0058020061d9de3e0608570e24a6a300fca4d365cace7b7268261c24b743987e672cfef83121d
|
data/CHANGELOG.md
CHANGED
@@ -1,3 +1,34 @@
|
|
1
|
+
## 0.0.4 (October 26, 2015)
|
2
|
+
* Add [react-router [v1]](https://github.com/rackt/react-router) integration:
|
3
|
+
* js helpers:
|
4
|
+
* `registerRouter`
|
5
|
+
* `getRouter`
|
6
|
+
* `renderRouter`
|
7
|
+
* rails helper:
|
8
|
+
* `react_router`
|
9
|
+
* Add `unmountComponent` js helper.
|
10
|
+
* Bump package.json.
|
11
|
+
* Add React 0.14 compatibility.
|
12
|
+
* Add `.babelrc` file as part of generator.
|
13
|
+
|
14
|
+
### migration 0.0.3 -> 0.0.4
|
15
|
+
* Make sure your package.json is up-to-date.
|
16
|
+
* install `react-dom 0.14`:
|
17
|
+
```
|
18
|
+
$ npm install react-dom --save`
|
19
|
+
```
|
20
|
+
* Expose `ReactDOM` in app/react/index.js.
|
21
|
+
```js
|
22
|
+
import ReactDOM from 'react-dom';
|
23
|
+
window.ReactDOM = ReactDOM;
|
24
|
+
```
|
25
|
+
* Create `.bablerc` in your project directory:
|
26
|
+
```js
|
27
|
+
{
|
28
|
+
"stage": 1
|
29
|
+
}
|
30
|
+
```
|
31
|
+
|
1
32
|
## 0.0.3 (September 6, 2015)
|
2
33
|
* Reorganize config files.
|
3
34
|
* Add UJS helpers:
|
data/README.md
CHANGED
@@ -35,6 +35,7 @@ This will create following files:
|
|
35
35
|
│ ├── dev.config.js
|
36
36
|
│ ├── production.config.js
|
37
37
|
│ └── tests.config.js
|
38
|
+
|── .babelrc
|
38
39
|
├── karma.conf.js
|
39
40
|
├── package.json
|
40
41
|
└── webpack.config.js
|
@@ -55,6 +56,10 @@ And require integration and bundle files in `application.js`
|
|
55
56
|
//= require react_bundle
|
56
57
|
```
|
57
58
|
|
59
|
+
### Babel
|
60
|
+
|
61
|
+
By default, `react-webpack-rails` uses Babel Stage 1 - Proposal. If you want to change the stage, you can do so in the `.babelrc` file. It is however not recommended to use Stage 0 in a production app, because the features present there can be dropped, which would break your application.
|
62
|
+
|
58
63
|
## Usage
|
59
64
|
##### Check [docs](https://github.com/netguru/react_webpack_rails/tree/master/docs) for detailed api description.
|
60
65
|
#### Register component in index.js
|
@@ -96,6 +101,9 @@ or manually:
|
|
96
101
|
|
97
102
|
$ webpack -p --config YOUR_CONFIG
|
98
103
|
|
104
|
+
#### Deployment
|
105
|
+
Check [docs/deployment.md](docs/deployment.md)
|
106
|
+
|
99
107
|
## Development
|
100
108
|
|
101
109
|
After checking out the repo, run `bin/setup` to install dependencies. Then, run `rake rspec` to run the tests. You can also run `bin/console` for an interactive prompt that will allow you to experiment.
|
data/docs/README.md
CHANGED
@@ -1,81 +1,11 @@
|
|
1
1
|
# Docs
|
2
|
-
|
3
|
-
|
4
|
-
|
5
|
-
*
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
##### example:
|
13
|
-
|
14
|
-
```js
|
15
|
-
import MyComponent from 'my-component';
|
16
|
-
|
17
|
-
registerComponent('MyComponentName', MyComponent);
|
18
|
-
```
|
19
|
-
|
20
|
-
**note:** Registered components are accessible in globally exposed `ReactRailsUJS` under `reactComponents` property.
|
21
|
-
|
22
|
-
* ### getComponent
|
23
|
-
|
24
|
-
```js
|
25
|
-
getComponent(String componentName)
|
26
|
-
```
|
27
|
-
|
28
|
-
Shortcut for accessing registered component.
|
29
|
-
|
30
|
-
##### example:
|
31
|
-
|
32
|
-
```js
|
33
|
-
getComponent('MyComponentName');
|
34
|
-
```
|
35
|
-
|
36
|
-
* ### createComponent
|
37
|
-
|
38
|
-
```js
|
39
|
-
createComponent(String componentName[, Object props])
|
40
|
-
```
|
41
|
-
|
42
|
-
Wrapper over React.createElement that creates ready to render component with props.
|
43
|
-
|
44
|
-
##### example:
|
45
|
-
|
46
|
-
```js
|
47
|
-
createComponent('MyComponentName', {foo: 'bar'});
|
48
|
-
```
|
49
|
-
|
50
|
-
* ### renderComponent
|
51
|
-
|
52
|
-
```js
|
53
|
-
renderComponent(String componentName, Object props, DOMElement container)
|
54
|
-
```
|
55
|
-
|
56
|
-
Wrapper over `React.render` and `React.createElement`. Renders component with given props into specified DOM element.
|
57
|
-
|
58
|
-
##### example:
|
59
|
-
|
60
|
-
```js
|
61
|
-
var element = document.getElementById('my-element');
|
62
|
-
renderComponent('MyComponentName', {foo: 'bar'}, element);
|
63
|
-
```
|
64
|
-
|
65
|
-
## Rails helpers
|
66
|
-
|
67
|
-
* ### react_component
|
68
|
-
|
69
|
-
```ruby
|
70
|
-
react_component(String component_name[, Object props])
|
71
|
-
```
|
72
|
-
|
73
|
-
Creates DOM node with props as data attributes in rendered view so ReactRailsUJS can grab it and mount proper component.
|
74
|
-
|
75
|
-
##### example:
|
76
|
-
|
77
|
-
```ruby
|
78
|
-
<%= react_component('MyComponentName', MySerializer.new(my_data)) %>
|
79
|
-
```
|
80
|
-
|
81
|
-
**note:** Props Object will 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.
|
2
|
+
1. [Api](https://github.com/netguru/react_webpack_rails/blob/master/docs/api.md)
|
3
|
+
1. [UJS helpers](https://github.com/netguru/react_webpack_rails/blob/master/docs/api.md#ujs-helpers)
|
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
|
+
* [getRouter](https://github.com/netguru/react_webpack_rails/blob/master/docs/api.md#getrouter)
|
8
|
+
* [renderRouter](https://github.com/netguru/react_webpack_rails/blob/master/docs/api.md#renderrouter)
|
9
|
+
1. [Rails helpers](https://github.com/netguru/react_webpack_rails/blob/master/docs/api.md#rails-helpers)
|
10
|
+
* [react_component]( https://github.com/netguru/react_webpack_rails/blob/master/docs/api.md#react_component)
|
11
|
+
* [react_router](https://github.com/netguru/react_webpack_rails/blob/master/docs/api.md#react_router)
|
data/docs/api.md
ADDED
@@ -0,0 +1,152 @@
|
|
1
|
+
## UJS helpers
|
2
|
+
|
3
|
+
* ### registerComponent
|
4
|
+
```js
|
5
|
+
registerComponent(String componentName, class|function component)
|
6
|
+
```
|
7
|
+
|
8
|
+
Register component so it's globally accessible.
|
9
|
+
|
10
|
+
##### example:
|
11
|
+
|
12
|
+
```js
|
13
|
+
import MyComponent from 'my-component';
|
14
|
+
|
15
|
+
registerComponent('MyComponentName', MyComponent);
|
16
|
+
```
|
17
|
+
|
18
|
+
**note:** Registered components are accessible in globally exposed `ReactRailsUJS` under `reactComponents` property.
|
19
|
+
|
20
|
+
* ### getComponent
|
21
|
+
|
22
|
+
```js
|
23
|
+
getComponent(String componentName)
|
24
|
+
```
|
25
|
+
|
26
|
+
Shortcut for accessing registered component.
|
27
|
+
|
28
|
+
##### example:
|
29
|
+
|
30
|
+
```js
|
31
|
+
getComponent('MyComponentName');
|
32
|
+
```
|
33
|
+
|
34
|
+
* ### createComponent
|
35
|
+
|
36
|
+
```js
|
37
|
+
createComponent(String componentName[, Object props])
|
38
|
+
```
|
39
|
+
|
40
|
+
Wrapper over React.createElement that creates ready to render component with props.
|
41
|
+
|
42
|
+
##### example:
|
43
|
+
|
44
|
+
```js
|
45
|
+
createComponent('MyComponentName', {foo: 'bar'});
|
46
|
+
```
|
47
|
+
|
48
|
+
* ### renderComponent
|
49
|
+
|
50
|
+
```js
|
51
|
+
renderComponent(String componentName, Object props, DOMElement container)
|
52
|
+
```
|
53
|
+
|
54
|
+
Wrapper over `React.render` and `React.createElement`. Renders component with given props into specified DOM element.
|
55
|
+
|
56
|
+
##### example:
|
57
|
+
|
58
|
+
```js
|
59
|
+
var element = document.getElementById('my-element');
|
60
|
+
renderComponent('MyComponentName', {foo: 'bar'}, element);
|
61
|
+
```
|
62
|
+
|
63
|
+
* ### unmountComponent
|
64
|
+
|
65
|
+
```js
|
66
|
+
unmountComponent(DOMElement container)
|
67
|
+
```
|
68
|
+
|
69
|
+
Wrapper over `React.unmountComponentAtNode`. It will unmount component from given DOM node.
|
70
|
+
|
71
|
+
##### example:
|
72
|
+
|
73
|
+
```js
|
74
|
+
var element = document.getElementById('my-element');
|
75
|
+
unmountComponent(element);
|
76
|
+
```
|
77
|
+
|
78
|
+
* ### registerRouter
|
79
|
+
```js
|
80
|
+
registerRouter(String routerName, class|function component)
|
81
|
+
```
|
82
|
+
|
83
|
+
Register router so it's globally accessible.
|
84
|
+
|
85
|
+
##### example:
|
86
|
+
|
87
|
+
```js
|
88
|
+
import MyComponent from 'my-component';
|
89
|
+
|
90
|
+
registerComponent('MyComponentName', MyComponent);
|
91
|
+
```
|
92
|
+
|
93
|
+
**note:** Registered components are accessible in globally exposed `ReactRailsUJS` under `reactRouters` property.
|
94
|
+
|
95
|
+
* ### getRouter
|
96
|
+
|
97
|
+
```js
|
98
|
+
getRouter(String routerName)
|
99
|
+
```
|
100
|
+
|
101
|
+
Shortcut for accessing registered router.
|
102
|
+
|
103
|
+
##### example:
|
104
|
+
|
105
|
+
```js
|
106
|
+
getRouter('MyRouterName');
|
107
|
+
```
|
108
|
+
|
109
|
+
* ### renderRouter
|
110
|
+
|
111
|
+
```js
|
112
|
+
renderRouter(String routerName, Object props, DOMElement container)
|
113
|
+
```
|
114
|
+
|
115
|
+
Wrapper ove `Router.run` function with possibility to pass props to handler.
|
116
|
+
|
117
|
+
##### example:
|
118
|
+
|
119
|
+
```js
|
120
|
+
var element = document.getElementById('my-element');
|
121
|
+
renderComponent('MyComponentName', {foo: 'bar'}, element);
|
122
|
+
```
|
123
|
+
|
124
|
+
## Rails helpers
|
125
|
+
|
126
|
+
* ### react_component
|
127
|
+
|
128
|
+
```ruby
|
129
|
+
react_component(String component_name[, Object props])
|
130
|
+
```
|
131
|
+
|
132
|
+
Creates DOM node with props as data attributes in rendered view so ReactRailsUJS can grab it and mount proper component.
|
133
|
+
|
134
|
+
##### example:
|
135
|
+
|
136
|
+
```ruby
|
137
|
+
<%= react_component('MyComponentName', MySerializer.new(my_data)) %>
|
138
|
+
```
|
139
|
+
|
140
|
+
**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.
|
141
|
+
|
142
|
+
* ### react_router
|
143
|
+
|
144
|
+
```ruby
|
145
|
+
react_router(String router_name)
|
146
|
+
```
|
147
|
+
|
148
|
+
##### example:
|
149
|
+
|
150
|
+
```ruby
|
151
|
+
<%= react_router('MyRouterName') %>
|
152
|
+
```
|
data/docs/deployment.md
ADDED
@@ -0,0 +1,65 @@
|
|
1
|
+
#### Heroku
|
2
|
+
Heroku will generally assume that it is a Rails application if deployed without further configuration. However, Heroku needs to install the
|
3
|
+
node packages and use webpack to seed the asset pipeline with the `react_bundle`.
|
4
|
+
|
5
|
+
Two main steps are necessary to allow the application to properly deploy onto Heroku. First, tell Heroku that you're using two buildpacks and make sure
|
6
|
+
the nodejs one is first:
|
7
|
+
|
8
|
+
```bash
|
9
|
+
$ heroku buildpacks:clear # this line is only necessary if buildpacks were previously specified
|
10
|
+
$ heroku buildpacks:add --index 1 https://github.com/heroku/heroku-buildpack-nodejs
|
11
|
+
$ heroku buildpacks:add --index 2 https://github.com/heroku/heroku-buildpack-ruby
|
12
|
+
```
|
13
|
+
|
14
|
+
Second, amend the provided `package.json` file to include a `postinstall` script that is the same as the build script (by default; otherwise
|
15
|
+
however as configured for production as described earlier for webpack). This `postinstall` script makes sure the `react_bundle` file is put
|
16
|
+
into `app/assets/javascript` before Heroku's `assets:precompile` step when it builds the Rails app.
|
17
|
+
|
18
|
+
```json
|
19
|
+
"scripts": {
|
20
|
+
"test": "karma start",
|
21
|
+
"start": "webpack -w --config webpack/dev.config.js",
|
22
|
+
"build": "webpack -p --config webpack/production.config.js",
|
23
|
+
"postinstall": "webpack -p --config webpack/production.config.js"
|
24
|
+
},
|
25
|
+
```
|
26
|
+
|
27
|
+
Deploying to Heroku should now work correctly:
|
28
|
+
|
29
|
+
```bash
|
30
|
+
$ git push heroku master # or however you'd like to push to Heroku
|
31
|
+
```
|
32
|
+
|
33
|
+
#### Tie Webpack assets to Rails rake tasks
|
34
|
+
|
35
|
+
Rake task `assets.rake`
|
36
|
+
```ruby
|
37
|
+
# The webpack must compile assets before assets:environment task.
|
38
|
+
# Otherwise Sprockets sees no changes and doesn't precompile assets.
|
39
|
+
Rake::Task['assets:precompile']
|
40
|
+
.clear_prerequisites
|
41
|
+
.enhance(['assets:compile_environment'])
|
42
|
+
|
43
|
+
# Remove Webpack assets as well
|
44
|
+
Rake::Task['assets:clobber'].enhance do
|
45
|
+
Rake::Task['assets:clobber_webpack'].invoke
|
46
|
+
end
|
47
|
+
|
48
|
+
namespace :assets do
|
49
|
+
#In this task, set prerequisites for the assets:precompile task
|
50
|
+
task :compile_environment => :webpack do
|
51
|
+
Rake::Task['assets:environment'].invoke
|
52
|
+
end
|
53
|
+
|
54
|
+
desc 'Compile Webpack assets'
|
55
|
+
task :webpack do
|
56
|
+
sh "NODE_ENV=#{Rails.env} npm run build" # this runs a react_webpack_rails script
|
57
|
+
end
|
58
|
+
|
59
|
+
desc 'Remove compiled Webpack assets'
|
60
|
+
task :clobber_webpack do
|
61
|
+
rm_rf "#{Rails.application.config.root}/app/assets/javascripts/react_bundle.js"
|
62
|
+
rm_rf "#{Rails.application.config.root}/app/assets/stylesheets/react_bundle.css"
|
63
|
+
end
|
64
|
+
end
|
65
|
+
```
|
@@ -6,12 +6,24 @@
|
|
6
6
|
// jQuery is optional. Use it to support legacy browsers.
|
7
7
|
var $ = (typeof window.jQuery !== 'undefined') && window.jQuery;
|
8
8
|
|
9
|
+
var _ReactDOM = function () {
|
10
|
+
if(typeof window.ReactDOM !== 'undefined'){
|
11
|
+
return window.ReactDOM;
|
12
|
+
};
|
13
|
+
if(parseFloat(window.React.version) >= 0.14) {
|
14
|
+
console.warn("ReactDOM is missing. Make sure it's exposed in app/react/index.js");
|
15
|
+
};
|
16
|
+
return window.React;
|
17
|
+
}
|
18
|
+
|
9
19
|
// create the namespace
|
10
20
|
window.ReactRailsUJS = {
|
11
21
|
CLASS_NAME_ATTR: 'data-react-class',
|
12
22
|
PROPS_ATTR: 'data-react-props',
|
23
|
+
ROUTER_FLAG: 'data-react-router',
|
13
24
|
RAILS_ENV_DEVELOPMENT: <%= Rails.env == "development" %>,
|
14
25
|
reactComponents: {},
|
26
|
+
reactRouters: {},
|
15
27
|
// helper method for the mount and unmount methods to find the
|
16
28
|
// `data-react-class` DOM elements
|
17
29
|
_findDOMNodes: function(searchSelector) {
|
@@ -45,7 +57,28 @@
|
|
45
57
|
|
46
58
|
renderComponent: function (name, props, element) {
|
47
59
|
var component = window.ReactRailsUJS.createComponent(name, props);
|
48
|
-
|
60
|
+
_ReactDOM().render(component, element);
|
61
|
+
},
|
62
|
+
|
63
|
+
unmountComponent: function (node) {
|
64
|
+
_ReactDOM().unmountComponentAtNode(node);
|
65
|
+
},
|
66
|
+
|
67
|
+
registerRouter: function(name, routes) {
|
68
|
+
window.ReactRailsUJS.reactRouters[name] = routes;
|
69
|
+
},
|
70
|
+
|
71
|
+
getRouter: function(name) {
|
72
|
+
return window.ReactRailsUJS.reactRouters[name];
|
73
|
+
},
|
74
|
+
|
75
|
+
renderRouter: function(name, element) {
|
76
|
+
if(window.ReactRailsUJS.routerEnabled == true){
|
77
|
+
throw new Error("Error when renering " + name + "router: can't render more than one router.")
|
78
|
+
}
|
79
|
+
window.ReactRailsUJS.routerEnabled = true;
|
80
|
+
var router = window.ReactRailsUJS.getRouter(name);
|
81
|
+
_ReactDOM().render(router, element);
|
49
82
|
},
|
50
83
|
|
51
84
|
mountComponents: function(searchSelector) {
|
@@ -54,25 +87,27 @@
|
|
54
87
|
for (var i = 0; i < nodes.length; ++i) {
|
55
88
|
var node = nodes[i];
|
56
89
|
var className = node.getAttribute(window.ReactRailsUJS.CLASS_NAME_ATTR);
|
57
|
-
|
58
|
-
// Assume className is simple and can be found at top-level (window).
|
59
|
-
// Fallback to eval to handle cases like 'My.React.ComponentName'.
|
60
|
-
|
61
|
-
var constructor = window.ReactRailsUJS.reactComponents[className];
|
62
90
|
var propsJson = node.getAttribute(window.ReactRailsUJS.PROPS_ATTR);
|
91
|
+
try {
|
92
|
+
var isRouter = JSON.parse(node.getAttribute(window.ReactRailsUJS.ROUTER_FLAG));
|
93
|
+
} catch(error) {
|
94
|
+
var isRouter = false
|
95
|
+
}
|
63
96
|
var props = propsJson && JSON.parse(propsJson);
|
64
|
-
|
65
|
-
|
97
|
+
if (isRouter) {
|
98
|
+
window.ReactRailsUJS.renderRouter(className, node)
|
99
|
+
} else {
|
100
|
+
window.ReactRailsUJS.renderComponent(className, props, node)
|
101
|
+
}
|
66
102
|
}
|
67
103
|
},
|
68
104
|
|
69
105
|
unmountComponents: function(searchSelector) {
|
70
106
|
var nodes = window.ReactRailsUJS._findDOMNodes(searchSelector);
|
71
|
-
|
107
|
+
window.ReactRailsUJS.routerEnabled = false;
|
72
108
|
for (var i = 0; i < nodes.length; ++i) {
|
73
109
|
var node = nodes[i];
|
74
|
-
|
75
|
-
React.unmountComponentAtNode(node);
|
110
|
+
window.ReactRailsUJS.unmountComponent(node);
|
76
111
|
}
|
77
112
|
}
|
78
113
|
};
|
@@ -82,6 +117,11 @@
|
|
82
117
|
window.getComponent = ReactRailsUJS.getComponent;
|
83
118
|
window.createComponent = ReactRailsUJS.createComponent;
|
84
119
|
window.renderComponent = ReactRailsUJS.renderComponent;
|
120
|
+
window.unmountComponent = ReactRailsUJS.unmountComponent;
|
121
|
+
|
122
|
+
window.registerRouter = ReactRailsUJS.registerRouter;
|
123
|
+
window.getRouter = ReactRailsUJS.getRouter;
|
124
|
+
window.renderRouter = ReactRailsUJS.renderRouter;
|
85
125
|
|
86
126
|
// functions not exposed publicly
|
87
127
|
function handleTurbolinksEvents () {
|
@@ -2,8 +2,11 @@ module ReactWebpackRails
|
|
2
2
|
class InstallGenerator < Rails::Generators::Base
|
3
3
|
source_root File.expand_path('../templates', __FILE__)
|
4
4
|
class_option :example, type: :boolean, default: true, desc: 'Include example component and test files.'
|
5
|
+
class_option :router, type: :boolean, default: true, desc: 'Add and expose react-router globally.'
|
6
|
+
|
5
7
|
|
6
8
|
def generate_layout
|
9
|
+
copy_file '.babelrc', '.babelrc'
|
7
10
|
copy_file 'webpack.config.js', 'webpack.config.js'
|
8
11
|
copy_file 'webpack/dev.config.js', 'webpack/dev.config.js'
|
9
12
|
copy_file 'webpack/production.config.js', 'webpack/production.config.js'
|
@@ -6,7 +6,9 @@ module.exports = function (config) {
|
|
6
6
|
singleRun: true,
|
7
7
|
frameworks: ['mocha', 'sinon'],
|
8
8
|
files: ['webpack/tests.config.js'],
|
9
|
-
preprocessors: {
|
9
|
+
preprocessors: {
|
10
|
+
'webpack/tests.config.js': ['webpack', 'sourcemap']
|
11
|
+
},
|
10
12
|
reporters: ['dots'],
|
11
13
|
webpack: {
|
12
14
|
module: {
|
@@ -1,26 +1,28 @@
|
|
1
1
|
{
|
2
2
|
"name": "<%="#{Rails.application.class.parent_name}"%>",
|
3
3
|
"devDependencies": {
|
4
|
-
"babel-eslint": "^4.1.
|
5
|
-
"eslint": "^
|
6
|
-
"eslint-plugin-react": "^3.3
|
7
|
-
"expect": "^1.
|
8
|
-
"karma": "^0.13.
|
9
|
-
"karma-chrome-launcher": "^0.2.
|
4
|
+
"babel-eslint": "^4.1.3",
|
5
|
+
"eslint": "^1.7.3",
|
6
|
+
"eslint-plugin-react": "^3.6.3",
|
7
|
+
"expect": "^1.12.2",
|
8
|
+
"karma": "^0.13.13",
|
9
|
+
"karma-chrome-launcher": "^0.2.1",
|
10
10
|
"karma-mocha": "^0.2.0",
|
11
11
|
"karma-sinon": "^1.0.4",
|
12
|
-
"karma-sourcemap-loader": "^0.3.
|
12
|
+
"karma-sourcemap-loader": "^0.3.6",
|
13
13
|
"karma-webpack": "^1.7.0",
|
14
14
|
"webpack-notifier": "^1.2.1"
|
15
15
|
},
|
16
16
|
"dependencies": {
|
17
|
-
"babel-core": "^5.8.
|
17
|
+
"babel-core": "^5.8.25",
|
18
18
|
"babel-loader": "^5.3.2",
|
19
19
|
"extract-text-webpack-plugin": "^0.8.2",
|
20
|
-
"node-sass": "^3.
|
21
|
-
"react": "^0.
|
20
|
+
"node-sass": "^3.3.3",
|
21
|
+
"react": "^0.14.0",
|
22
|
+
"react-dom": "^0.14.0",
|
23
|
+
<%= options.router ? ' "react-router": "1.0.0-rc3",' : ''%>
|
22
24
|
"react-tools": "*",
|
23
|
-
"sass-loader": "^
|
25
|
+
"sass-loader": "^3.0.0",
|
24
26
|
"webpack": "^1.12.1"
|
25
27
|
},
|
26
28
|
"scripts": {
|
@@ -1,11 +1,12 @@
|
|
1
|
-
|
1
|
+
import React from 'react';
|
2
|
+
import ReactDOM from 'react-dom';
|
3
|
+
window.React = React;
|
4
|
+
window.ReactDOM = ReactDOM;
|
2
5
|
<% if options.example %>
|
3
6
|
import HelloWorld from './components/hello-world';
|
4
|
-
|
5
|
-
registerComponent('hello-world', HelloWorld);
|
7
|
+
registerComponent('HelloWorld', HelloWorld);
|
6
8
|
<% else %>
|
7
9
|
// example usage:
|
8
10
|
// import HelloWorld from './components/hello-world';
|
9
|
-
|
10
|
-
// registerComponent('hello-world', HelloWorld);
|
11
|
+
// registerComponent('HelloWorld', HelloWorld);
|
11
12
|
<% end %>
|
@@ -2,17 +2,20 @@ module ReactWebpackRails
|
|
2
2
|
module ViewHelpers
|
3
3
|
# based on https://github.com/reactjs/react-rails/blob/master/lib/react/rails/view_helper.rb
|
4
4
|
def react_component(name, props = {}, options = {}, &block)
|
5
|
-
options = { tag: options } if options.is_a?(Symbol)
|
6
|
-
|
7
5
|
html_options = options.reverse_merge(data: {})
|
8
6
|
html_options[:data].tap do |data|
|
9
7
|
data[:react_class] = name
|
10
8
|
data[:react_props] = (props.is_a?(String) ? props : props.to_json)
|
9
|
+
data[:react_router] = options.delete(:react_router)
|
11
10
|
end
|
12
11
|
html_tag = html_options[:tag] || :div
|
13
12
|
html_options.except!(:tag)
|
14
13
|
|
15
14
|
content_tag(html_tag, '', html_options, &block)
|
16
15
|
end
|
16
|
+
|
17
|
+
def react_router(name)
|
18
|
+
react_component(name, {}, react_router: true)
|
19
|
+
end
|
17
20
|
end
|
18
21
|
end
|
data/react_webpack_rails.gemspec
CHANGED
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.4
|
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-
|
12
|
+
date: 2015-10-26 00:00:00.000000000 Z
|
13
13
|
dependencies:
|
14
14
|
- !ruby/object:Gem::Dependency
|
15
15
|
name: bundler
|
@@ -53,6 +53,20 @@ dependencies:
|
|
53
53
|
- - "~>"
|
54
54
|
- !ruby/object:Gem::Version
|
55
55
|
version: '3.3'
|
56
|
+
- !ruby/object:Gem::Dependency
|
57
|
+
name: rails
|
58
|
+
requirement: !ruby/object:Gem::Requirement
|
59
|
+
requirements:
|
60
|
+
- - ">="
|
61
|
+
- !ruby/object:Gem::Version
|
62
|
+
version: '3.2'
|
63
|
+
type: :runtime
|
64
|
+
prerelease: false
|
65
|
+
version_requirements: !ruby/object:Gem::Requirement
|
66
|
+
requirements:
|
67
|
+
- - ">="
|
68
|
+
- !ruby/object:Gem::Version
|
69
|
+
version: '3.2'
|
56
70
|
description: ''
|
57
71
|
email:
|
58
72
|
- gawlikraf@gmail.com
|
@@ -72,8 +86,11 @@ files:
|
|
72
86
|
- bin/console
|
73
87
|
- bin/setup
|
74
88
|
- docs/README.md
|
89
|
+
- docs/api.md
|
90
|
+
- docs/deployment.md
|
75
91
|
- lib/assets/javascripts/react_integration.js.erb
|
76
92
|
- lib/generators/react_webpack_rails/install_generator.rb
|
93
|
+
- lib/generators/react_webpack_rails/templates/.babelrc
|
77
94
|
- lib/generators/react_webpack_rails/templates/karma.conf.js
|
78
95
|
- lib/generators/react_webpack_rails/templates/package.json.erb
|
79
96
|
- lib/generators/react_webpack_rails/templates/react/components/hello-world-test.jsx
|
@@ -114,3 +131,4 @@ signing_key:
|
|
114
131
|
specification_version: 4
|
115
132
|
summary: React and Rails integration done with webpack
|
116
133
|
test_files: []
|
134
|
+
has_rdoc:
|