These are chat archives for opal/opal

24th
Mar 2018
G. Gibson
@mistergibson
Mar 24 2018 17:37
So, I'm looking at opal-browser / opal-jquery for tips on how to best render the DOM from in-opal object trees. I'm probably going the opal-jquery route as I use jQuery as a page dep. Anyone have some good examples of rendering to the DOM from opal script? I see opal-browser has an xml method - but was wondering about virtual doms, etc.
Any good example code would be appreciated
Mitch VanDuyn
@catmando
Mar 24 2018 19:21
I am upgrading a gem to opal 11.0 The gem has a rake task that compiles the code and then compresses it using uglify.
I get the following error during uglify:
Uglifier::Error: Unexpected token punc «;», expected punc «,»
this is uglifier 4.1.8
Jan Biedermann
@janbiedermann
Mar 24 2018 19:33
@catmando maybe it helps to add this:
  config.assets.js_compressor = Uglifier.new(
    :harmony => true
  )
Mitch VanDuyn
@catmando
Mar 24 2018 19:33
I already added that...
Jan Biedermann
@janbiedermann
Mar 24 2018 19:34
then there is a error in your code ;)
maybe
Mitch VanDuyn
@catmando
Mar 24 2018 19:34
the "code" is output from Opal compiler
that is the point
Jan Biedermann
@janbiedermann
Mar 24 2018 19:35
and it outputs wrong code, because there is a error in your code, maybe, thats my point
that it worked with 0.10 might not be a argument, but a bug in 0.10
does this gem use js inlining?
Mitch VanDuyn
@catmando
Mar 24 2018 19:52
i'm closing in on it.
you are correct
it seems
Mitch VanDuyn
@catmando
Mar 24 2018 20:06
extra semi-colon was left in a js-inline block. Worked in 0.10 / uglifier 3.x but now opal 0.11 / uglifier 4.x that extra semi colon kills it.
G. Gibson
@mistergibson
Mar 24 2018 21:54
Does anyone have a good primer on manipulating the DOM with opal-browser? I'm reading the source code - but not quite groking it all.
meh.
@meh
Mar 24 2018 22:25
I can help maybe
what kind of DOM manipulation are you trying to do?
@mistergibson ^
G. Gibson
@mistergibson
Mar 24 2018 22:32
I have to remove/add/update dom objects
I'll take a look at the link you provided
I'm attempting a data-driven dom
meh.
@meh
Mar 24 2018 23:01
@mistergibson most of the relevant methods are in NodeSet and Element
or actually just Element
NodeSet just forwards to each element in the set
G. Gibson
@mistergibson
Mar 24 2018 23:07
Yeah, I was just dorking around with opal-jquery stuff
I'll look at it though
Colin Gunn
@balmoral
Mar 24 2018 23:32

@mistergibson maybe take a look at the DOM and component parts of https://github.com/balmoral/robe. No docs, and not ready for public release, but it’s working well in a small production app.

The DOM stuff uses opal-browser under the hood, with it’s own straigtforward DSL, and data (state) driven removing/adding/updating of DOM elements using bindings to state.

There’s a couple of examples of the whole setup in https://github.com/balmoral/robe/tree/master/examples/apps.

The main interface to opal-browser is in https://github.com/balmoral/robe/blob/master/lib/robe/client/dom.rb. If nothing else it might show you how to get started with opal-browser.

G. Gibson
@mistergibson
Mar 24 2018 23:33
@balmoral : thanks
Colin Gunn
@balmoral
Mar 24 2018 23:34
If you want virtual DOM, you can’t go past https://github.com/clearwater-rb/clearwater, but it doesn’t use opa-lbrowser.
G. Gibson
@mistergibson
Mar 24 2018 23:34
ok