opal/opal

Ruby in the Browser

Elia Schito

@elia

@zw963 thanks! great! :smile:

Elia Schito

@elia

Opal has the best code ever, this one for example: throw #$!;

https://s3.amazonaws.com/lowres.cartoonstock.com/men-angry_driver-road_rage-cars-dirver-rude-sel0021_low.jpg

https://github.com/opal/opal/blob/master/opal/corelib/kernel.rb#L1048-L1052

Mitch VanDuyn

@catmando

@elia so what does #$! do? Is the other weird syntax like that?

Jamie Gaskins

@jgaskins

@catmando Inside strings and backticks, ivars and globals don't need a full #{} and can just use #, and since $! is the current exception within a rescue block, throw $#! between backticks is a re-raise of the currently rescued exception.

Mitch VanDuyn

@catmando

Huh! There u go. Tx @jgaskins

Billy.Zheng

@zw963

@all, http://game.zw963.online, online tetris game, original write by @elia for a opal talk, I just bundle into app.min.js and index.html, and threw it into my site. how to bundle inspire by @barriehadfield another project.

Sebastian Fiedlschuster

@fiedl

Hi all, I’m trying to integrate opal successively into an existing project. But I’m struggling with a basic concept: How can I export a class in opal such that I can use it from a typescript file?

# foo.rb

class Foo
  def bar
    "barbar!"
  end
end

// otherfile.ts

import { Foo } from './foo'
console.log((new Foo).bar());

Elia Schito

@elia

@fiedl all Opal classes are defined on Opal, which is a property of window, e.g. window.Opal.Array, that is the same as what MRI does because essentially every ruby constant is also a global

so the TS code would something like this: console.log(Opal.Foo.$new().$bar()); but I'm guessing, I don't know TS

Sebastian Fiedlschuster

@fiedl

Thanks @elia. Trying this I get TS2304: Cannot find name 'Opal‘.

Elia Schito

@elia

maybe, assuming you have an opal.js somewhere you need to add import { Opal } from 'opal'

@fiedl is there a way to require js stuff that doesn't use modules?

Sebastian Fiedlschuster

@fiedl

I’m not sure, but I’ve seen something like this: import * as showdown from 'showdown‘; instead of const showdown = require(‚showdown‘).

Elia Schito

@elia

then probably require('opal') will suffice

Sebastian Fiedlschuster

@fiedl

I think, it’s import * as Opal from 'opal‘;. This reduced the amount of errors significantly :)

Elia Schito

@elia

:smile:

@fiedl are you using sprockets, webpacker or something else?

Sebastian Fiedlschuster

@fiedl

ERROR in ./node_modules/opal/lib/opal-node.js
Module not found: Error: Can't resolve 'fs' in 'node_modules/opal/lib'

webpack

well, more precisely, I’m using ionic, which uses webpack

Elia Schito

@elia

ok, I'm not too familiar with any of those, how are you fetching the opal code? also which opal version?

Sebastian Fiedlschuster

@fiedl

unit testing with karma

opal 0.6.4

Elia Schito

@elia

oh my, :)

Sebastian Fiedlschuster

@fiedl

I’m using the opalrb-loader from https://www.npmjs.com/package/opal-webpack

Ooops, I’ve just seen on https://github.com/opal/opal/releases that the current release is 0.10.5. But I just did npm install opal :)

Elia Schito

@elia

latest version is 0.11, need to check releases

@fiedl maybe you can start experimenting installing the gem and compiling via the CLI

Sebastian Fiedlschuster

@fiedl

https://npms.io/search?q=opal has opal as first result with version 0.6.4.

Elia Schito

@elia

opal --compile --arity-check foo.rb > foo.js should work

@fiedl yeah the npm package is outdated

Sebastian Fiedlschuster

@fiedl

:-)

Elia Schito

@elia

I think there's someone using webpacker with more recent versions but I don't remember who it was…

Sebastian Fiedlschuster

@fiedl

To be honest, I’m not sure how to get the current version then.

Elia Schito

@elia

gem instal opal

Sebastian Fiedlschuster

@fiedl

I guess, then I would have to tell webpack somehow which opal to use, right?

Elia Schito

@elia

I think an easy (temporary) way could be to opal --compile --arity-check foo.rb > path/to/dir/watched/by/webpacker/foo.js

and then relauch the command everytime the sources change

Sebastian Fiedlschuster

@fiedl

I’ve found some pointers at the readme of https://www.npmjs.com/package/opal-webpack. I’ll report back when I’ve got something working …

thanks again!

Elia Schito

@elia

yeah, unfortunately that's the best I can do, keep me posted!

Frederic ZINGG

@fzingg

Hi huys,

What is the best way to get DATAS from a HTML FORMDATA and convert it to JSON.
I tried:

createdata = Element['#createform']
HTTP.post('/api/create', data: JSON.generate(createdata), dataType: :json) do |response|
end

Elia Schito

@elia

@fzingg I have this in my current project:

class Element
  def serialize_array
    `self.serializeArray()`.map { |e| Hash.new(e) }
  end
end

but be aware that data coming from a form could different from what you expect in a JSON, this caught me offguard in the past

Frederic ZINGG

@fzingg

@elia Ok, I will try, Tx !

Guillaume Grossetie

@Mogztter

Opal Webpack could use https://github.com/Mogztter/opal-node-compiler

Elia Schito

@elia

@fiedl ^

Mitch VanDuyn

@catmando

@fiedl ask over on hyperloop gitter lots of folks using webpack I think

Elthariel

@elthariel

Hi folks ! Is there a way to synchronously wait for a promise ? I’m using opal-rspec and I want to use the result of a promise chain as a subject

Elia Schito

@elia

@elthariel no, I don't think it's possible, the only way would be to implement async/await, but we're far from that now

Where communities thrive

People

Repo info

Activity