README.md example does not work

[kWhittington]

Hi,

Trying to switch from JSPM to OpalRB and hyper-react. I've tried following the README.md but it results in a runtime error (in the browser console): every: undefined method every' for main`

I've also tried to follow the two links in the README.md given for gem installation rather than using reactrb-express (http://ruby-hyperloop.io/get_started/, http://ruby-hyperloop.io/installation/) but the first is specifically for reactrb-express and the second is for integration with Rails.

I'm developing a static site and followed OpalRB's instructions here but I'm now stuck trying to figure out which gems need to be installed and what api the classes or modules are providing. It's especially confusing since there aren't any examples with require statements in them.

From reading various reference pages (some older), I believe I need the following:

Gemfile

source 'https://rubygems.org'

gem 'hyper-react'
gem 'opal'
gem 'opal-browser'
gem 'opal-jquery'
gem 'opal-rspec'
gem 'rake'
gem 'rubocop'

Rakefile

require 'bundler'
Bundler.require

Opal.append_path(File.expand_path('../app', __FILE__))

require 'opal'
require 'opal/rspec/rake_task'

desc 'Compile app/application.rb to build.js'
task :build do
  File.binwrite('build.js', Opal::Builder.build('application').to_s)
end

Opal::RSpec::RakeTask.new do |_, task|
  task.runner = :node
end

app/application.rb

require 'opal'
require 'browser'
require 'opal-jquery'
require 'react/react-source'
require 'hyper-react'

class HelloWorld < React::Component::Base
  param :time, type: Time
  render do
    p do
      span { "Hello, " }
      input(type: :text, placeholder: "Your Name Here")
      span { "! It is #{params.time}"}
    end
  end
end

every(1) do
  Element["#example"].render do
    HelloWorld(time: Time.now)
  end
end

I first looked at reactrb-express and it was nice to not have to compile, but I didn't see how I could load other libraries via a Gemfile or make tests for the components via opal-rspec.

If anyone could point me in the right direction where there's solid instructional material to stand up a server-less application with hyper-react, I'd really appreciate it.

Thank you.

[kWhittington]

Looked through opal-browser, found #every defined in browser/interval.rb. Updated application.rb to:

require 'opal'
require 'browser/interval'
require 'opal-jquery'
require 'react/react-source'
require 'hyper-react'

class HelloWorld < React::Component::Base
  param :time, type: Time
  render do
    p do
      span { "Hello, " }
      input(type: :text, placeholder: "Your Name Here")
      span { "! It is #{params.time}"}
    end
  end
end

every(1) do
  Element["#example"].render do
    HelloWorld(time: Time.now)
  end
end

It's now rendering the HelloWorld component to the page but is also throwing an error on each #every iteration:

[Error] Warning: Using deprecated behavior of `React.render`, – "require \"react/top_level_render\" to get the correct behavior."
	$$render (build.js:71373)
	TMP_4 (build.js:74575)
	TMP_5 (build.js:75154:140)

Following the message, I updated application.rb again to:

require 'opal'
require 'browser/interval'
require 'opal-jquery'
require 'react/react-source'
require 'react/top_level_render'
require 'hyper-react'

class HelloWorld < React::Component::Base
  param :time, type: Time
  render do
    p do
      span { "Hello, " }
      input(type: :text, placeholder: "Your Name Here")
      span { "! It is #{params.time}"}
    end
  end
end

every(1) do
  Element["#example"].render do
    HelloWorld(time: Time.now)
  end
end

This does not fix the error and it is still being thrown on each #every iteration.

[zetachang]

Thanks for the detailed report, I am looking into it. Kyle Whittington <notifications@github.com> 於 2017年2月8日週三 下午10:56 寫道：

…

Looked through opal-browser, found #every defined in browser/interval.rb <https://github.com/opal/opal-browser/blob/master/opal/browser/interval.rb>. Updated application.rb to: require 'opal'require 'browser/interval' require 'opal-jquery'require 'react/react-source'require 'hyper-react' class HelloWorld < React::Component::Base param :time, type: Time render do p do span { "Hello, " } input(type: :text, placeholder: "Your Name Here") span { "! It is #{params.time}"} end endend every(1) do Element["#example"].render do HelloWorld(time: Time.now) endend It's now rendering the HelloWorld component to the page but is also throwing an error on each #every iteration: [Error] Warning: Using deprecated behavior of `React.render`, – "require \"react/top_level_render\" to get the correct behavior." $$render (build.js:71373) TMP_4 (build.js:74575) TMP_5 (build.js:75154:140) Following the message, I updated application.rb again to: require 'opal'require 'browser/interval'require 'opal-jquery'require 'react/react-source'require 'react/top_level_render' require 'hyper-react' class HelloWorld < React::Component::Base param :time, type: Time render do p do span { "Hello, " } input(type: :text, placeholder: "Your Name Here") span { "! It is #{params.time}"} end endend every(1) do Element["#example"].render do HelloWorld(time: Time.now) endend This does not fix the error and it is still being thrown on each #every iteration. — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#210 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAzRJXN-Lenhr1xW7_MEcsw_XxbBKr_Vks5radeugaJpZM4L65cX> .

[barriehadfield]

I will watch how this turns out then update the website docs accordingly. I also think we could do with a tutorial focused on using HyperReact without Rails.

@kWhittington have a look at https://github.com/ruby-hyperloop/hyper-spec - it should be compatible with Hyperloop Express

[zetachang]

@kWhittington try put the require of react/top_level_render after require "hyper-react".

[kWhittington]

@zetachang changing application.rb to your specifications:

require 'opal'
require 'browser/interval'
require 'opal-jquery'
require 'hyper-react'
require 'react/top_level_render'

class HelloWorld < React::Component::Base
  param :time, type: Time
  render do
    p do
      span { "Hello, " }
      input(type: :text, placeholder: "Your Name Here")
      span { "! It is #{params.time}"}
    end
  end
end

every(1) do
  Element["#example"].render do
    HelloWorld(time: Time.now)
  end
end

and re-building the application removes the deprecation warning, thank you.

Note I also removed the require 'react/react-source' from before the require 'hyper-react' and it functions correctly. Is that expected behavior?

It's kinda confusing keeping track of which dependency is overwriting what other dependency, would it be helpful to add these dependency requires (and the order they need to appear) to the README.md?

[zetachang]

Note I also removed the require 'react/react-source' from before the require 'hyper-react' and it functions correctly. Is that expected behavior?

The reactjs source may be already loaded in other place, do you manually load it from your html template?

It's kinda confusing keeping track of which dependency is overwriting what other dependency, would it be helpful to add these dependency requires (and the order they need to appear) to the README.md?

Totally agreed, I would update the deprecation warning above to be more clear.

[kWhittington]

@zetachang nice catch, thank you! I did have a ReactJS CDN link in my index.html. I removed the link and it failed without the require 'react/react-source' as expected.

I am able to place the require 'react/react-source' after require 'hyper-react' and no HTML JS link:

application.rb

require 'opal'
require 'browser/interval'
require 'opal-jquery'
require 'hyper-react'
require 'react/react-source'
require 'react/top_level_render'

class HelloWorld < React::Component::Base
  param :time, type: Time
  render do
    p do
      span { "Hello, " }
      input(type: :text, placeholder: "Your Name Here")
      span { "! It is #{params.time}"}
    end
  end
end

every(1) do
  Element["#example"].render do
    HelloWorld(time: Time.now)
  end
end

this require order works successfully, too:

require 'opal'
require 'browser/interval'
require 'opal-jquery'
require 'hyper-react'
require 'react/top_level_render'
require 'react/react-source'

class HelloWorld < React::Component::Base
  param :time, type: Time
  render do
    p do
      span { "Hello, " }
      input(type: :text, placeholder: "Your Name Here")
      span { "! It is #{params.time}"}
    end
  end
end

every(1) do
  Element["#example"].render do
    HelloWorld(time: Time.now)
  end
end

Is that expected behavior?

[zetachang]

react/react-source should be required before hyper-react, I think we do have a warning for this situation.

[kWhittington]

Kool. I'm not sure if that's working 100%, I didn't get any warnings with the above configuration and it functioned as if the requires were in the order you specified (react-source, hyper-react, top_level_render).

I made a P.R. for the fix the to README.md, tho: #211