require 'opal'
require 'browser/interval' # gives us wrappers on javascript methods such as setTimer and setInterval
require 'jquery'
require 'opal-jquery' # gives us a nice wrapper on jQuery which we will use mainly for HTTP calls
require "json" # json conversions
require 'reactrb' # and the whole reason we are gathered here today!
Document.ready? do # Document.ready? is a opal-jquery method. The block will run when doc is loaded
# render an instance of the CommentBox component at the '#content' element.
# url and poll_interval are the initial params for this comment box
React.render(
React.create_element(
CommentBox, url: "comments.json", poll_interval: 2),
Element['#content']
)
end
class CommentBox
# A react component is simply a class that has a "render" method.
# But including React::Component mixin provides a nice dsl, and many other features
include React::Component
# Components can have parameters that are passed in when the component is first "mounted"
# and then updated as the application state changes. In this case url, and poll_interval will
# never change since this is the top level component.
required_param :url
required_param :poll_interval
# Components also may have internal state variables, which are like instance variables,
# with one added feature: Changing state causes a rerender to occur.
# The "comments" state is being initialized by parsing the javascript object at window.initial_comments
# This is not a react feature, but was just set up in the HTML header (see config.ru for how this was done).
define_state comments: JSON.from_object(`window.initial_comments`)
# The following call backs are made during the component lifecycle:
# before_mount before component is first rendered
# after_mount after component is first rendered, after DOM is loaded. ONLY CALLED ON CLIENT
# before_receive_props when component is being about to be rerendered by an outside state change. CANCELLABLE
# before_update just before a rerender, and not cancellable.
# after_update after DOM has been updated.
# before_unmount before component instance will be removed. Use this to kill low level handlers etc.
# just to show off how these callbacks work we have separated setting up a repeating fetch into three pieces.
# before mounting we will initialize a polling loop, but we don't want to start it yet.
before_mount do
@fetcher = every(poll_interval) do # we use the opal browser utility to call the server every poll_interval seconds
HTTP.get(url) do |response| # notice that params poll_interval, and url are accessed as instance methods
if response.ok?
comments! JSON.parse(response.body) # comments!(value) updates the state and notifies react of the state change
else
puts "failed with status #{response.status_code}"
end
end
end
end
# once we have things up and displayed lets start polling for updates
after_mount do
puts "start me up!"
@fetcher.start
end
# finally our component should be a good citizen and stop the polling when its unmounted
before_unmount do
@fetcher.stop
end
# components can have their own methods like any other class
# in this case we receive a new comment and send it the server
def send_comment_to_server(comment)
HTTP.post(url, payload: comment) do |response|
puts "failed with status #{response.status_code}" unless response.ok?
end
comment
end
# every component must implement a render method. The method must generate a single
# react virtual DOM element. React compares the output of each render and determines
# the minimum actual DOM update needed.
# A very common mistake is to try generate two or more elements (or none at all.) Either case will
# throw an error. Just remember that there is already a DOM node waiting for the output of the render
# hence the need for exactly one element per render.
def render
# the dsl syntax is simply a method call, with params hash, followed by a block
# the built in dsl methods correspond to the standard HTML5 tags such as div, h1, table, tr, td, span etc.
#return div.comment { h1 {"hello"} }
div class: "commentBox" do # just like <div class="commentBox">
h1 { "Comments" } # yep just like <h1>Comments</h1>
# Custom components use their class name, as the tag. Notice that the comments state is passed to
# to the CommentList component. This is the normal React paradigm: Data flows towards the leaf nodes.
CommentList comments: comments
# Sometimes its necessary for data to move upwards, and react provides several ways to do this.
# In this case we need to know when a new comment is submitted. So we pass a callback proc.
# The callback takes the new comment and sends it to the server and then pushes it onto the comments list.
# Again the comments! method is used to signal that the state is changing. The use of the "bang" pseudo
# operator is important as the value of comments has NOT changed (its still tha same array), but its
# internal state has.
CommentForm submit_comment: lambda { |comment| comments! << send_comment_to_server(comment)}
end
end
end
# Our second component!
class CommentList
include React::Component
# As we saw above a CommentList component takes a comments parameter
# Here we introduce optional parameter type checking. The syntax [Hash] means "Array of Hashes"
# In our case each comment is a hash with an author and text key.
# Failure to match the type puts a warning on the console not an error,
# and only in development mode not production.
required_param :comments, type: Array
# This is a good place to think more about the component lifecycle. The first time
# CommentList is mounted, comments will be the initial array of author, text hashes.
# As new comments are added the component will receive new params. However the component
# does NOT reinitialize its state. If changes in state are needed as result of incoming param changes
# the before_receive_props call back can be used.
def render
# Lets render some comments - all we need to do is iterate over the comments array using the usual
# ruby "each" method.
# This is a good place to clarify how the DSL works. Notice that we use comments.each NOT comments.collect
# When a tag method (such as div, or Comment) is called its "output" is internally pushed into a render buffer.
# This simplifies the DSL by separating the control flow from the output, but can sometimes be a bit confusing.
div.commentList.and_another_class.and_another do # you can also include the class haml style (tx to @dancinglightning!)
comments.each do |comment|
# By now we are getting used to the react paradigm: Stuff comes in, is processed, and then
# passed to next lower level. In this case we pass along each author-text pair to the Comment component.
Comment author: comment[:author], text: comment[:text], hash: comment
end
end
end
end
# Notice that the above CommentList component had no state. Each time its parameters change, it simply re-renders.
# CommentForm does have internal state as we will see...
class CommentForm
include React::Component
# While declaring the type of a param is optional its handy not only for debug, but also to let React create
# appropriate helpers based on the type. In this case we are passing in a Proc, and so React will treat the
# "submit_comment" param specially. Instead of submit_comment returning its value (as the previous params have done)
# it will call the associated Proc, thus allow CommentForm to communicate state changes back to the parent.
required_param :submit_comment, type: Proc
# We are going to have 2 state variable. One for each field in the comment. As the user types,
# these state variables will be updating causing a rerender of the CommentForm (but no other components.)
define_state :author, :text
def render
div do
div do
"Author: ".span # Note the shorthand for span { "Author" }. You can do this with br, span, th, td, and para (for p) tags
# Now we are going to generate an input tag. Notice how the author state variable is provided. Referencing
# author is what will cause us to re-render and update the input as the value of author changes.
# React will optimize the updates so parts that are not changing will not be effected.
input.author_name(type: :text, value: author, placeholder: "Your name", style: {width: "30%"}).
# and we attach an on_change handler to the input. As the input changes we simply update author.
on(:change) { |e| author! e.target.value }
end
div do
# lets have some fun with the text. Same deal as the author except we will use a text area...
div(style: {float: :left, width: "50%"}) do
textarea(value: text, placeholder: "Say something...", style: {width: "90%"}, rows: 30).
on(:change) { |e| text! e.target.value }
end
# and lets use Showdown to allow for markdown, and display the mark down to the left of input
# we will define Showdown later, and it will be our first reusable component, as we will use it twice.
div(style: {float: :left, width: "50%"}) do
Showdown markup: text
end
end
# Finally lets give the use a button to submit changes. Why not? We have come this far!
# Notice how the submit_comment proc param allows us to be ignorant of how the update is made.
# Notice that (author! "") updates author, but returns the current value.
# This is usually the desired behavior in React as we are typically interested in state changes,
# and before/after values, not simply doing a chained update of multiple variables.
button { "Post" }.on(:click) { submit_comment :author => (author! ""), :text => (text! "") }
end
end
end
# Wow only two more components left! This one is a breeze. We just take the author, and text and display
# them. We already know how to use our Showdown component to display the markdown so we can just reuse that.
class Comment
include React::Component
required_param :author
required_param :text
required_param :hash, type: Hash
def render
div.comment do
h2.comment_author { author } # NOTE: single underscores in haml style class names are converted to dashes
# so comment_author becomes comment-author, but comment__author would be comment_author
# this is handy for boot strap names like col-md-push-9 which can be written as col_md_push_9
Showdown markup: text
end
end
end
# Last but not least here is our ShowDown Component
class Showdown
include React::Component
required_param :markup
def render
# we will use some Opal lowlevel stuff to interface to the javascript Showdown class
# we only need to build the converter once, and then reuse it so we will use a plain old
# instance variable to keep track of it.
@converter ||= Native(`new Showdown.converter()`)
# then we will take our markup param, and convert it to html
raw_markup = @converter.makeHtml(markup) if markup
# React.js takes a very dim view of passing raw html so its purposefully made
# difficult so you won't do it by accident. After all think of how dangerous what we
# are doing right here is!
# The span tag can be replaced by any tag that could sensibly take a child html element.
# You could also use div, td, etc.
span(dangerously_set_inner_HTML: {__html: raw_markup})
end
end