reactive-ruby 0.7.36 → 0.7.38
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/README.md +54 -190
- data/lib/react/component/props_wrapper.rb +2 -1
- data/lib/reactive-ruby/version.rb +1 -1
- data/spec/react/param_declaration_spec.rb +21 -0
- metadata +2 -2
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA1:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 23600ed81f6cdbfd4492addb059c2fc226147f32
|
4
|
+
data.tar.gz: 7ae2faaeacc75627e86614168cd7a79f250165a8
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: b56872543b2db22c8b3682de518415f84a7753c0402365cbf39679d13aa5e16d7c65ae756d92917646cd51283d05671aeef33d85e662a2e82ef63cd9c60991fc
|
7
|
+
data.tar.gz: 787ef02379630312653277931881a916f8183f9998f634fb01545b78083102518e63de11fb120dcde63f70ac8ccdae318e8a7874410b2bd994316bb1dd9ebe33
|
data/README.md
CHANGED
@@ -11,225 +11,94 @@
|
|
11
11
|
It lets you write reactive UI components, with Ruby's elegance using the tried
|
12
12
|
and true React.js engine. :heart:
|
13
13
|
|
14
|
-
[**Visit
|
14
|
+
[**Visit reactrb.org For The Full Story**](http://reactrb.org)
|
15
15
|
|
16
|
-
###
|
16
|
+
### Important: current `react.rb` gem users please [read this!](#road-map)
|
17
17
|
|
18
|
-
|
19
|
-
merged back into react.rb's master branch. It aims to take react.rb a few steps
|
20
|
-
further by embracing it's 'Ruby-ness'.
|
18
|
+
## Installation
|
21
19
|
|
22
|
-
|
23
|
-
being used in a large rails app. However the gem itself has no dependency on
|
24
|
-
rails, and there are people using the gem in other environments.
|
20
|
+
Install the gem, or load the js library
|
25
21
|
|
26
|
-
|
27
|
-
|
22
|
+
+ add `gem 'reactive-ruby'` to your gem file or
|
23
|
+
+ `gem install reactive-ruby` or
|
24
|
+
+ install (or load via cdn) [inline-reactive-ruby.js](http://github.com/reactive-ruby/inline-reactive-ruby)
|
28
25
|
|
29
|
-
|
30
|
-
|
31
|
-
A react app is built from one or more trees of components. React components can
|
32
|
-
live side by side with other non-react html and javascript. A react component is
|
33
|
-
just like a rails view or a partial. Reactive-Ruby takes advantage of these
|
34
|
-
features by letting you add Reactive-Ruby components as views, and call them
|
35
|
-
directly from your controller like any other view.
|
36
|
-
|
37
|
-
By design Reactive-Ruby allows reactive components to be easily added to
|
38
|
-
existing Rails projects, as well in new development.
|
39
|
-
|
40
|
-
Components are first rendered to HTML on the server (called pre-rendering) this
|
41
|
-
is no different from what happens when your ERB or HAML templates are translated
|
42
|
-
to HTML.
|
43
|
-
|
44
|
-
A copy of the react engine, and your components follows the rendered HTML to the
|
45
|
-
browser, and then when a user interacts with the page, it is updated on the
|
46
|
-
client.
|
47
|
-
|
48
|
-
The beauty is you now have one markup description, written in the same language
|
49
|
-
as your server code, that works both as the HTML template and as an interactive
|
50
|
-
component.
|
51
|
-
|
52
|
-
See the [wiki](https://github.com/zetachang/react.rb/wiki) for more details.
|
53
|
-
|
54
|
-
## Using React.rb with Rails
|
55
|
-
|
56
|
-
### Installation
|
57
|
-
|
58
|
-
In your Gemfile:
|
59
|
-
|
60
|
-
```ruby
|
61
|
-
gem 'reactive-ruby'
|
62
|
-
gem 'react-rails', '~> 1.3.2'
|
63
|
-
gem 'opal-rails', '~> 0.8.1'
|
64
|
-
gem 'therubyracer', platforms: :ruby # Required for prerendering
|
65
|
-
# for JRuby you need the below line instead
|
66
|
-
# gem 'therubyrhino, platforms: :jruby
|
67
|
-
|
68
|
-
```
|
69
|
-
|
70
|
-
Run `bundle install` and restart your rails server.
|
71
|
-
|
72
|
-
### Both Client & Server Side Assets (Components)
|
73
|
-
|
74
|
-
Your react components will go into the `app/views/components/` directory of your
|
75
|
-
rails app.
|
76
|
-
|
77
|
-
Within your `app/views` directory you need to create a `components.rb` manifest.
|
78
|
-
Files required in `app/views/components.rb` will be made available to the server
|
79
|
-
side rendering system as well as the browser.
|
80
|
-
|
81
|
-
```
|
82
|
-
# app/views/components.rb
|
83
|
-
require 'opal'
|
84
|
-
require 'reactive-ruby'
|
85
|
-
require_tree './components'
|
86
|
-
```
|
87
|
-
|
88
|
-
### Client Side Assets
|
89
|
-
|
90
|
-
In `assets/javascript/application.rb` require your components manifest as well
|
91
|
-
as any additional browser only assets.
|
26
|
+
For gem installation it is highly recommended to read [the getting started section at reactrb.org](http://reactrb.org/docs/getting-started.html)
|
92
27
|
|
93
|
-
|
94
|
-
# assets/javascript/application.rb
|
95
|
-
# Require files that are browser side only.
|
96
|
-
|
97
|
-
# Make components available by requiring your components.rb manifest.
|
98
|
-
require 'components'
|
99
|
-
|
100
|
-
# 'react_ujs' tells react in the browser to mount rendered components.
|
101
|
-
require 'react_ujs'
|
102
|
-
|
103
|
-
# Finally, require your other javascript assets. jQuery for example...
|
104
|
-
require 'jquery' # You need both these files to access jQuery from Opal.
|
105
|
-
require 'opal-jquery' # They must be in this order.
|
106
|
-
```
|
107
|
-
|
108
|
-
### Rendering Components
|
109
|
-
|
110
|
-
Components may be rendered directly from a controller action by simply following
|
111
|
-
a naming convention. To render a component from the `home#show` action, create a
|
112
|
-
component class named `Show`. For details on how to override this behavior, and how the the module tree is searched for
|
113
|
-
the class see the next section.
|
114
|
-
|
115
|
-
```ruby
|
116
|
-
# app/views/components/home/show.rb
|
117
|
-
module Components
|
118
|
-
module Home
|
119
|
-
class Show
|
120
|
-
include React::Component # will create a new component named Show
|
121
|
-
|
122
|
-
optional_param :say_hello_to
|
123
|
-
|
124
|
-
def render
|
125
|
-
puts "Rendering my first component!"
|
126
|
-
|
127
|
-
# render "hello" with optional 'say_hello_to' param
|
128
|
-
"hello #{say_hello_to if say_hello_to}"
|
129
|
-
end
|
130
|
-
end
|
131
|
-
end
|
132
|
-
end
|
133
|
-
```
|
134
|
-
|
135
|
-
Call `render_component` in the controller action passing in any params (React
|
136
|
-
props), to render the component:
|
28
|
+
## Quick Overview
|
137
29
|
|
138
|
-
|
139
|
-
# controllers/home_controller.rb
|
140
|
-
class HomeController < ApplicationController
|
141
|
-
def show
|
142
|
-
# render_component uses the controller name to find the 'show' component.
|
143
|
-
render_component say_hello_to: params[:say_hello_to]
|
144
|
-
end
|
145
|
-
end
|
146
|
-
```
|
30
|
+
React.rb components are ruby classes that inherit from `React::Component::Base` or include `React::Component`.
|
147
31
|
|
148
|
-
|
149
|
-
route in your browser and you should see 'Hello' rendered.
|
32
|
+
`React::Component` provides a complete DSL to generate html and event handlers, and has full set of class macros to define states, parameters, and lifecycle callbacks.
|
150
33
|
|
151
|
-
|
152
|
-
on during rendering.
|
34
|
+
Each react component class has a render method that generates the markup for that component.
|
153
35
|
|
154
|
-
|
155
|
-
and you can set break points etc.
|
36
|
+
Each react component class defines a new tag-method in the DSL that works just like built-in html tags, so react components can render other react components.
|
156
37
|
|
157
|
-
|
38
|
+
As events occur, components update their state, which causes them to rerender, and perhaps pass new parameters to lower level components, thus causing them to rerender.
|
158
39
|
|
159
|
-
|
40
|
+
Under the hood the actual work is effeciently done by the [React.js](http://facebook.github.io/react/) engine.
|
160
41
|
|
161
|
-
|
162
|
-
You can also specify the component name explicitly in the `render_component` method.
|
163
|
-
`render_component "Blatz` will search the for a component class named `Blatz`
|
164
|
-
regardless of the name of the controller method.
|
42
|
+
React.rb components are *isomorphic* meaning they can run on the server as well as the client. This means that the initial expansion of the component tree to markup is done server side, just like ERB, or HAML templates. Then the same code runs on the client and will respond to any events.
|
165
43
|
|
166
|
-
|
167
|
-
"Foo" then react.rb will search for a module named `Foo` containing the component.
|
168
|
-
If this fails all modules will be searched (i.e. the name of the controller will be
|
169
|
-
ignored.) In either case the search begins at the outer most scope until a match is made.
|
44
|
+
React.rb integrates well with Rails, Sinatra, and simple static sites, and can be added to existing web pages very easily, or it can be used to deliver complete websites.
|
170
45
|
|
171
|
-
|
172
|
-
the `Components::Foo` module, in the outer most scope, or in any nested module.
|
173
|
-
The way the search works allows for small projects that do not need a lot
|
174
|
-
of name spacing, and also allows components to be shared across several controllers.
|
46
|
+
## Why ?
|
175
47
|
|
176
|
-
|
177
|
-
|
48
|
+
+ *Single Language:* Use Ruby everywhere, no JS, markup languages, or JSX
|
49
|
+
+ *Powerful DSL:* Describe HTML and event handlers with a minimum of fuss
|
50
|
+
+ *Ruby Goodness:* Use all the features of Ruby to create reusable, maintainable UI code
|
51
|
+
+ *React Simplicity:* Nothing is taken away from the React.js model
|
52
|
+
+ *Enhanced Features:* Enhanced parameter and state management and other new features
|
53
|
+
+ *Plays well with Others:* Works with other frameworks, React.js components, Rails, Sinatra and static web pages
|
178
54
|
|
55
|
+
# Problems, Questions, Issues
|
179
56
|
|
180
|
-
|
57
|
+
+ [Stack Overflow](http://stackoverflow.com/questions/tagged/react.rb) tag `react.rb` for specific problems.
|
58
|
+
+ [Gitter.im](https://gitter.im/zetachang/react.rb) for general questions, discussion, and interactive help.
|
59
|
+
+ [Github Issues](https://github.com/zetachang/react.rb/issues) for bugs, feature enhancements, etc.
|
181
60
|
|
182
|
-
See the [sinatra example](https://github.com/zetachang/react.rb/tree/master/example/sinatra-tutorial).
|
183
61
|
|
184
|
-
|
62
|
+
# Road Map
|
185
63
|
|
186
|
-
|
187
|
-
browser. To execute code only during server side rendering:
|
64
|
+
The original `react.rb` gem is still available as the [0-3-stable branch.](https://github.com/zetachang/react.rb/tree/0-3-stable) **but please read on..**
|
188
65
|
|
189
|
-
|
190
|
-
if React::IsomorphicHelpers.on_opal_server?
|
191
|
-
puts 'Hello from the server'
|
192
|
-
end
|
193
|
-
```
|
66
|
+
Many new features, bug fixes, and improvements are incoporated in the `reactive-ruby` gem currently built on the [0-7-stable branch.](https://github.com/zetachang/react.rb/tree/0-7-stable) In addtion more extensive documentation for the current stable branch is available at [reactrb.org](http://reactrb.org), and the [Opal Ruby Playground](http://fkchang.github.io/opal-playground/?code:&html_code=%3Cdiv%20id%3D%22container%22%3E%3C%2Fdiv%3E%0A&css_code=body%20%7B%0A%20%20background%3A%20%23eeeeee%3B%0A%7D%0A) incorporates the current stable branch.
|
194
67
|
|
195
|
-
|
68
|
+
Our plan is to do one more upgrade on the `reactive-ruby` gem which will be designated version 0.8.0. [click for detailed feature list](https://github.com/zetachang/react.rb/milestones/0.8.x)
|
196
69
|
|
197
|
-
|
198
|
-
if React::IsomorphicHelpers.on_opal_client?
|
199
|
-
puts 'Hello from the browser'
|
200
|
-
end
|
201
|
-
```
|
70
|
+
From 0.9.0 and beyond we will return to using the `react.rb` gem for releases, and `reactive-ruby` will continue as a meta gem that depends only on react.rb >= 0.9.x.
|
202
71
|
|
203
|
-
|
72
|
+
Version 0.9.0 of `react.rb` **will not be** 100% backward compatible with 0.3.0 so its very important to begin your upgrade process now by switching to `reactive-ruby` 0.7.0.
|
204
73
|
|
205
|
-
|
206
|
-
means the thing you are trying to render is not actually a react component.
|
207
|
-
Often is because the top level component name is wrong. For example if you are
|
208
|
-
in controller Foo and the method is `bar`, but you have named the component
|
209
|
-
Foo::Bars then you would see this message.
|
74
|
+
Please let us know either at [Gitter.im](https://gitter.im/zetachang/react.rb) or [via an issue](https://github.com/zetachang/react.rb/issues) if you have specific concerns with the upgrade from 0.3.0 to 0.9.0.
|
210
75
|
|
211
|
-
##
|
76
|
+
## Developing
|
212
77
|
|
213
|
-
|
214
|
-
your url.
|
78
|
+
`git clone` the project.
|
215
79
|
|
80
|
+
To play with some live examples cd to the project directory then
|
216
81
|
|
217
|
-
|
82
|
+
2. `cd example/examples`
|
83
|
+
2. `bundle install`
|
84
|
+
3. `bundle exec rackup`
|
85
|
+
4. Open `http://localhos:9292`
|
218
86
|
|
219
|
-
|
220
|
-
* Should load the RubyRacer, or at least report an error if the RubyRacer is not
|
221
|
-
present
|
222
|
-
* Get everything to autoload what it needs (i.e. much less config setup)
|
87
|
+
or
|
223
88
|
|
224
|
-
|
89
|
+
1. `cd example/rails-tutorial`
|
90
|
+
2. `bundle install`
|
91
|
+
3. `bundle exec rails s`
|
92
|
+
4. Open `http://localhost:3000`
|
225
93
|
|
226
|
-
|
94
|
+
or
|
227
95
|
|
228
|
-
1. `
|
229
|
-
2. `cd example/tutorial`
|
96
|
+
1. `cd example/sinatra-tutorial`
|
230
97
|
2. `bundle install`
|
231
98
|
3. `bundle exec rackup`
|
232
|
-
4. Open `http://localhost`
|
99
|
+
4. Open `http://localhost:9292`
|
100
|
+
|
101
|
+
Note that these are very simple examples, for the purpose of showing how to configure the gem in various server environments. For more examples and information see [reactrb.org.](http://reactrb.org)
|
233
102
|
|
234
103
|
## Testing
|
235
104
|
|
@@ -238,14 +107,9 @@ To run the above examples project yourself:
|
|
238
107
|
|
239
108
|
## Contributions
|
240
109
|
|
241
|
-
This project is still in early stage, so discussion, bug
|
242
|
-
really welcome :wink:.
|
243
|
-
https://gitter.im/zetachang/react.rb ask for @catmando as David is on leave
|
244
|
-
right now.
|
245
|
-
|
246
|
-
## Contact
|
110
|
+
This project is still in early stage, so discussion, bug reports and PRs are
|
111
|
+
really welcome :wink:.
|
247
112
|
|
248
|
-
We check in often at https://gitter.im/zetachang/react.rb ask for @catmando.
|
249
113
|
|
250
114
|
## License
|
251
115
|
|
@@ -33,7 +33,7 @@ module React
|
|
33
33
|
end
|
34
34
|
else
|
35
35
|
define_method("#{name}") do
|
36
|
-
if param_type.respond_to? :_react_param_conversion
|
36
|
+
@processed_params[name] ||= if param_type.respond_to? :_react_param_conversion
|
37
37
|
param_type._react_param_conversion props[name]
|
38
38
|
elsif param_type.is_a?(Array) &&
|
39
39
|
param_type[0].respond_to?(:_react_param_conversion)
|
@@ -49,6 +49,7 @@ module React
|
|
49
49
|
|
50
50
|
def initialize(props)
|
51
51
|
@props = props || {}
|
52
|
+
@processed_params = {}
|
52
53
|
end
|
53
54
|
|
54
55
|
def [](prop)
|
@@ -195,6 +195,27 @@ describe 'the param macro' do
|
|
195
195
|
expect(`window.dummy_log`).to eq(["Warning: Failed propType: In component `Foo`\nProvided prop `foo` could not be converted to BazWoggle"])
|
196
196
|
end
|
197
197
|
|
198
|
+
it "can will only convert once" do
|
199
|
+
stub_const "BazWoggle", Class.new
|
200
|
+
BazWoggle.class_eval do
|
201
|
+
def initialize(kind)
|
202
|
+
@kind = kind
|
203
|
+
end
|
204
|
+
attr_accessor :kind
|
205
|
+
def self._react_param_conversion(json, validate_only)
|
206
|
+
new(json[:bazwoggle]) if json[:bazwoggle]
|
207
|
+
end
|
208
|
+
end
|
209
|
+
Foo.class_eval do
|
210
|
+
param :foo, type: BazWoggle
|
211
|
+
def render
|
212
|
+
params.foo.kind = params.foo.kind+1
|
213
|
+
"#{params.foo.kind}"
|
214
|
+
end
|
215
|
+
end
|
216
|
+
expect(React.render_to_static_markup(React.create_element(Foo, foo: {bazwoggle: 1}))).to eq('<span>2</span>')
|
217
|
+
end
|
218
|
+
|
198
219
|
it "will alias a Proc type param" do
|
199
220
|
Foo.class_eval do
|
200
221
|
param :foo, type: Proc
|
metadata
CHANGED
@@ -1,14 +1,14 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: reactive-ruby
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 0.7.
|
4
|
+
version: 0.7.38
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- David Chang
|
8
8
|
autorequire:
|
9
9
|
bindir: bin
|
10
10
|
cert_chain: []
|
11
|
-
date:
|
11
|
+
date: 2016-01-30 00:00:00.000000000 Z
|
12
12
|
dependencies:
|
13
13
|
- !ruby/object:Gem::Dependency
|
14
14
|
name: opal
|