<adambeynon>
I think i closed it as a dup of that issue
<adambeynon>
(same thing, I guess)
<meh`>
yeah
<adambeynon>
as for fixing it, I will try and take a look this week
<adambeynon>
we probably need some runtime helper
<adambeynon>
test if its an array
<adambeynon>
then if it responds to to_a (or to_ary ?)
<adambeynon>
then otherwise just wrap inside an [a] array
<meh`>
just use Array()
<meh`>
it already does that
<adambeynon>
ah, that should do the trick then
<adambeynon>
should also make it a quicker fix ;)
<adambeynon>
meh`: Im out for 2 hours, will give it a crack when Im back (Y)
<meh`>
thanks
<adambeynon>
i'll ping you to update
mneorr has quit [Remote host closed the connection]
mneorr has joined #opal
mneorr has quit [Ping timeout: 245 seconds]
<fkchang>
meh`: u add reactiveness to lissio yet? I'm spiking an idea in lissio and could use it
<meh`>
fkchang, not yet, but if you try to write code with an API you'd like my work would be faster
<meh`>
still improving the component stuff
mneorr has joined #opal
<fkchang>
meh`: we'll see how it goes, I might have to back it up to just using opal/browser direct depending on how quickly I'm able to figure out what I want to spike
DouweM_ has quit [Read error: Connection reset by peer]
<fkchang>
meh`: So I want to make a kanban board, it makes sense that I want to make a column component and then have board component that has 5 column subcomponents. Not certain how to structure that, it doesn't look like you have an example of that
<meh`>
fkchang, keep in mind you can use components in the DOM DSL
<meh`>
html { |_| _ << Component.new }
mneorr has quit [Remote host closed the connection]
<meh`>
I usually create the subcomponents inside the component
<meh`>
and save them to instance variables
<meh`>
then iterate through them in the html block
mneorr has joined #opal
<fkchang>
meh`: thx, let me see if I can work that
mneorr has quit [Ping timeout: 245 seconds]
<fkchang>
meh`: do you have to do anything special in the initialize() method for Lissio::Component ?
<meh`>
fkchang, no
<meh`>
you should call super tho
<meh`>
but it currently does nothing
<meh`>
just sets @parent
<fkchang>
first or last
<fkchang>
guess doesn't matter now
<meh`>
yeah, doesn't matter, but you should it first
<meh`>
could add some set up things in the future
dfranciosi has quit [Remote host closed the connection]
<fkchang>
meh`: could not infer selector, I'm taking it that element() has to point an existing parent ?
<meh`>
fkchang, yes, .element is to attach the component to an existing element
<meh`>
.tag is to define what the tag for the component is (name, class, id)
<meh`>
and I'm about to push some fixes so you don't need to define an element or tag for the .css to work its magic
<fkchang>
meh`: I can NOT intermix << and nesting? i.e.
<fkchang>
html do |_|
<fkchang>
_.div.board! do
<fkchang>
%w(Unstarted Started Finished Delivered Accepted).each { |title|
<fkchang>
_ << Component::Column.new(title)
<fkchang>
}
<fkchang>
end
<fkchang>
end
<fkchang>
<meh`>
you can, if it's not working it's a bug
mneorr has joined #opal
<meh`>
let me test
<fkchang>
I'm getting this error "Uncaught ArgumentError: element not found",
<fkchang>
and I've set element in column.rb to be "#board", guess it can't find the board element? i.e. it hasn't been rendered yet?
<meh`>
fkchang, who is supposed to render #board?
<meh`>
the Application?
<fkchang>
the snippet I showed is the html block in application
<meh`>
and Component::Column has element '#board?
<fkchang>
no, #board is the parent div to the columns
<meh`>
element doesn't define the parent, it defines the element the component is going to take ownership of
<meh`>
in short
<meh`>
in Column put tag class: :column
<meh`>
for now, as I finish fixing this you won't require it
<meh`>
you can put css blocks on anything, no matter the element or tag
<meh`>
still, adding a class can be useful for debugging
<fkchang>
meh`: ok, that gets me past that error
<fkchang>
thx
<meh`>
in short, tag -> when you render, a new element is created where the rendering happens
<meh`>
element -> the render happens inside the element matching the selector
<fkchang>
meh`: though I don't know why title is coming up blank here
<fkchang>
module Component
<fkchang>
class Column < Lissio::Component
<fkchang>
tag class: :column
<fkchang>
<fkchang>
def initialize(title)
<fkchang>
super()
<fkchang>
@title = title
<fkchang>
end
<fkchang>
<fkchang>
html do
<fkchang>
h1 @title
<fkchang>
end
<fkchang>
<fkchang>
css do
<fkchang>
color 'blue'
<fkchang>
float 'left'
<meh`>
that's normal
<fkchang>
width 20.%
<fkchang>
end
<meh`>
html { |_| _.h1 @title }
<fkchang>
<fkchang>
end
<fkchang>
<meh`>
html { } -> instance_exec
<fkchang>
end
<meh`>
html { |_| } -> call
<fkchang>
<fkchang>
where the earlier html snippet creates the components
<meh`>
if you need to access instance variable or methods of the component, you have to call the html block with a parameter
<meh`>
this behaviour is pervasive in lissio and opal-browser
<meh`>
if the block has arity == 0, it gets instance_exec'd, if it has a greater arity, it's called with self
<fkchang>
meh`: that's something you should document prominently
<meh`>
fkchang, I agree
<meh`>
I will fairly soon, got some time on my hands
<fkchang>
Sometimes I think I just need to paste all the answers you give on irc in 1 place
<meh`>
lol
<meh`>
yeah, it would be better than nothing :P
<fkchang>
there was something from a few weeks ago, that I thought I should really do that, and now I've forgotten what it is
<fkchang>
meh`: So while I don't know what I'm doing, I still think it's definitely way easier than doing it from raw html, css, js -- so mondo cool. Buon lavoro !
<meh`>
great :D
DrShoggoth has quit [Quit: Leaving]
DrShoggoth has joined #opal
<fkchang>
meh`: how do I do border-left in the css DSL?
<meh`>
border left:
<meh`>
border left: 1.px
<meh`>
border left: [1.px, :solid, :black]
<fkchang>
meh`: grazie
mneorr has quit [Remote host closed the connection]
mneorr has joined #opal
mneorr has quit [Ping timeout: 272 seconds]
elia has joined #opal
kings has joined #opal
<kings>
evening
<meh`>
evening
<kings>
I'm excited
<kings>
at work we use casper.js to perform automated testing - I'm writing a wrapper around phantomjs api and a small layer ontop that looks similar to casper.js - but now I can do it all in ruby - instead of using casper
<kings>
which is great
<kings>
and furthermore - I have homemade pizza in the oven :)
kings has quit [Quit: Leaving...]
<fkchang>
meh`: is there way to put an on click on the top level element that gets made by the component?
<fkchang>
meh`: and does lissio start run a sinatra app, can I write code for that sinatra app?
mojavelinux has quit [Ping timeout: 252 seconds]
<meh`>
fkchang, lissio start starts a rack server
<meh`>
fkchang, I'm thinking about expanding the configuration stuff
<meh`>
so you can do your own thing
<meh`>
but it's not there right now
<meh`>
fkchang, also I'm not sure how you mean with the on click
<fkchang>
so I made a card component, and I do a tag class: :card, which makes a div.card as the top level "widget", I want to put click behavior on that
<fkchang>
got it, I just found a shekels example that's similar
<meh`>
it depends where the behaviour is
<meh`>
if the card has localized behaviour or the behaviour is grouped with the parent
mneorr has joined #opal
DouweM has joined #opal
<fkchang>
meh`: how do I change css on the fly, i.e. I click on something, so I want to highlight it, changing either the color value directly or maybe adding/subtracting a css class?
<meh`>
fkchang, you have two approaches
<meh`>
you use add_class/remove_class
<meh`>
or element.style { usual DSL here }
<meh`>
I prefer the former
mneorr_ has joined #opal
<fkchang>
meh`: grazie
mneorr_ has quit [Remote host closed the connection]
mneorr_ has joined #opal
mneorr has quit [Ping timeout: 245 seconds]
mneorr_ has quit [Remote host closed the connection]
mneorr has joined #opal
<meh`>
fkchang, anyway, it takes some time to get used to lissio, but once you do you'll find it's a lot easier and shorter to do anything
<meh`>
I mean, I wrote lissio and even I keep finding better ways to do thing
<meh`>
s
<fkchang>
meh`: I like it a lot, I have to ask tons of questions, but for the most part I know what needs to be done, but can't figure out the lissio syntax
<fkchang>
I'm quite happy w/how little and coherent the code I have is. Maybe I'll remake my spike as a videocast
<fkchang>
I think a lot of people can't really appreciate the value in the component way, because it's different, but I think the ease and clarity of what I've been able to do should speak for itself
<meh`>
yeah
<meh`>
it's not obvious
<meh`>
unless you start doing actual things with it
<meh`>
and it was just luck, it started off like vienna
<meh`>
except using opal-browser
<fkchang>
meh`: so I'd probably like to figure out how to inject ruby backend controller variables into lissio markup, basically how opal markup can get the @variables from the rails controller
<fkchang>
trying to also find the balance of server rendered and in browser rendered. I remember adambeynon having some future vienna example where he leverages server rendering and the ability to put server code into his opal, similar to *.js.erb where the js gets served up with server variables
<meh`>
right now with lissio I focus on full-blown client-side
<ryanstout>
meh`: your promises lib is part of opal now right?
<meh`>
fkchang, but I'm open to ideas to allow for what you have in mind
<meh`>
ryanstout, yep, stdlib
<ryanstout>
require 'promises' ?
<meh`>
require 'promise'
<ryanstout>
cool, thanks
<fkchang>
meh`: not certain how that integration goes. full blow client w/rest is good and backend agnostic, how could we modify, maybe via additional classes, so that if we had a ruby or opal backend, we could get a little more transparency from server to backend?
<meh`>
fkchang, you could go crazy
<meh`>
and render some components server side
<fkchang>
I guess 1 way is to have something lissio backend rendering, to match say how haml on opal-rails allows you to embed opal tags
<fkchang>
ultimately, I like the idea of just write code in ruby and the system knows which side it lives on, dunno how practical that is, but that's a perceived perk of meteor, if I read it right
<meh`>
it's not the way I work, but nothing against figuring something out for lissio
<ryanstout>
sorry, I might have asked this before, but if I'm getting JSON from the backend, how do I convert it into opal objects?
<adambeynon>
ryanstout: JSON.parse(json_string)
<adambeynon>
or Hash.new(javascript_object)
<ryanstout>
ok, I'm getting back an array
<ryanstout>
and I can't inspect on it
<adambeynon>
so, its an array of javascript objects?
<ryanstout>
yea
<ryanstout>
really I want to go ruby -> JSON -> JSON -> opal
<ryanstout>
(actually, I just want to go ruby on server -> ruby on client)
<adambeynon>
ryanstout: you could try
<adambeynon>
JSON.from_object(array_of_js_objets)
<adambeynon>
I think that digs through nested arrays and hashes and converts them
<adambeynon>
i havent actually tried it recently, so let me know if it has any obvious bugs
<adambeynon>
fkchang: one thing I have tried recently is detecting instance_variables inside the rails controller, and put them into a javascript variable as json in the page and then getting my views in opal to instantiate with the models re-created
<ryanstout>
adambeynon: yep, that worked. Thanks
<fkchang>
adambeynon: that could work
<fkchang>
meh`: so how do I take the code I write in a lissio new project and then serve it up from sinatra?
<meh`>
fkchang, the best way would probably be to use the Lissio::Server
<meh`>
and cascade sinatra with it
<meh`>
fkchang, the only special thing Lissio::Server currently does
<meh`>
is always providing the index
<meh`>
unless it's a static file
<meh`>
to make the HTML5 history work
<meh`>
it will do prerendering sooner or later
<meh`>
fkchang, in the end, lissio code is just opal
<fkchang>
meh`: I'll have to make a template for opal starter kit to have a lissio backed by sinatra template
<fkchang>
meh`: when u develop against lissio run, what do you do when you want to start to do backend interaction, just create the server in another process and call it?
<meh`>
fkchang, yes, another port
<meh`>
then REST
<fkchang>
yeah, I'll have to figure out sinatra thing and then make a template so others can dev front end and and backend in the same codebase in ruby/opal
elia has quit [Quit: Computer has gone to sleep.]
fkchang` has joined #opal
fkchang has quit [Read error: Connection reset by peer]
<meh`>
fkchang`, yeah, lissio start is more for speedy dev of just client stuff
mojavelinux has joined #opal
DrShoggoth has quit [Quit: Leaving]
mneorr_ has joined #opal
mneorr_ has quit [Remote host closed the connection]