These are chat archives for ractivejs/ractive

23rd
Jul 2018
Cerem Cem ASLAN
@ceremcem
Jul 23 2018 09:05
Ractive was throwing exceptions when we use <p><div> the div inside p tag</div></p>. When is it gone? How do we make it come back?
Joseph
@fskreuz
Jul 23 2018 12:07
<div> in <p> is technically not valid. iirc, you can't put a block element inside <p>. Browsers usually "eject" the element by automatically closing the <p>, create the <div> after it, then open another <p> to match the closing.
Cerem Cem ASLAN
@ceremcem
Jul 23 2018 12:08
this is the exact reason why I want exception throwing back
I usually do that mistake and older browser do not handle that properly
Joseph
@fskreuz
Jul 23 2018 12:10
It should be throwing though. What version are you on?
It may also be something swallowing the errors. Some tools are known to do that (esp when in watch mode).
Cerem Cem ASLAN
@ceremcem
Jul 23 2018 12:11
0.10.5
Cerem Cem ASLAN
@ceremcem
Jul 23 2018 16:47
apparently something swallows
might it be because of preparsing process? I'm preparsing templates by myself
Chris Reeves
@evs-chris
Jul 23 2018 17:06
yep, that would do it
the error would be generated during parsing
kouts
@kouts
Jul 23 2018 17:12
Something I noticed recently
seems that Ractive inserts a second semicolon
after inline styles
eg <div style="font-size: 13px; color: #5a5a5a;;" class="row mb0">
can anyone verify this?
maybe it's my PC only
Cerem Cem ASLAN
@ceremcem
Jul 23 2018 17:26
@kouts I've no idea, sorry
kouts
@kouts
Jul 23 2018 17:28
I'll create a playground
Cerem Cem ASLAN
@ceremcem
Jul 23 2018 17:28
@evs-chris @fskreuz I got the problem: Playground
If we pass a <div> inside a <p>, Ractive throws an error, that's okay. But if we pass <div> to a component and use that component inside <p>, it can't throw the exception
Joseph
@fskreuz
Jul 23 2018 17:38
I think that's correct behavior. During parsing, Ractive only knows that <hello> is a special, non-element node. It doesn't know the contents of <hello>.
Cerem Cem ASLAN
@ceremcem
Jul 23 2018 17:39
I implemented a <p> component as a workaround. Not a workaround maybe, it seems like a solid solution
Joseph
@fskreuz
Jul 23 2018 17:41
Yep, looks reasonable.
But then, it would prevent usage of regular <p>.
Cerem Cem ASLAN
@ceremcem
Jul 23 2018 17:42
yes. I'm not a fan of <p>
Cerem Cem ASLAN
@ceremcem
Jul 23 2018 17:47
...and it's fishing time! after updating the framework, I caught 5 such <p> usages in the other project :)
Joseph
@fskreuz
Jul 23 2018 17:50
:joy:
Cerem Cem ASLAN
@ceremcem
Jul 23 2018 17:58
hmm. can I throw a ractive warning, like Ractive's "deprecated" warning?
it's very hard to find a p usage in the template (yes it's very hard if you use Pug instead of HTML)
Joseph
@fskreuz
Jul 23 2018 18:40
It's just a console.warn() iirc.
Cerem Cem ASLAN
@ceremcem
Jul 23 2018 18:40
I want to get a template level stack trace
Chris Reeves
@evs-chris
Jul 23 2018 18:42
You'd need to turn on position tracking for that
but it's possible
each vdom node gets position info stuck on it
Cerem Cem ASLAN
@ceremcem
Jul 23 2018 18:43
a-ha!
is it somewhere inside context?
Joseph
@fskreuz
Jul 23 2018 18:57
https://ractive.js.org/api/#ractiveparse , it's the includeLinePositions option.
It will add a new property to each node, an array that consists of 3 numbers: line, column, and offset (relative to the start of the string). Not exactly sure if that's the order they appear tho.
Finding p in pug would probably go like:
  1. Parse the pug into HTML
  2. Parse the HTML into an AST with Ractive.parse()
  3. Traverse the tree and look for <p>
TL;DR: Traversed the template and collected nodes into an array (ala document.all). Then with that array, do magic :tada:
Cerem Cem ASLAN
@ceremcem
Jul 23 2018 19:05

I was going to say

Ractive.components.p = Ractive.extend do
    template: "<div class='ui p {{class}}' style='{{style}}'>{{yield}}</div>"
    onrender: (ctx) ->
        console.warn "You shouldn't use <p> tag, you should use .ui.p instead:"
        console.warn ctx.element.to-string!

works for now

the ctx.element.toString() part did the trick for me
Joseph
@fskreuz
Jul 23 2018 19:05
I type too fast :joy:
Cerem Cem ASLAN
@ceremcem
Jul 23 2018 19:06
ahahah :)
Cerem Cem ASLAN
@ceremcem
Jul 23 2018 19:51
anyone using webworkers?
Chris Reeves
@evs-chris
Jul 23 2018 19:52
not yet
they're on my list to look into
from what I've seen, they can be extremely painful to update
lots of gotchas
Cerem Cem ASLAN
@ceremcem
Jul 23 2018 19:55
you mean, updating worker javascript itself, right?
Chris Reeves
@evs-chris
Jul 23 2018 19:55
yes
new code releases for the worker tend not to make it to the client
oh wait
I'm thinking serviceworkers, which are webworkers
ignore me :smile:
Cerem Cem ASLAN
@ceremcem
Jul 23 2018 19:57
workers can spawn new workers, which would easily fetch and execute new version and commit a suicide
:))
if we could cache the assets and popup some push notifications (while browser is closed), then it can be effectively considered as a native application, I think
Chris Reeves
@evs-chris
Jul 23 2018 20:00
that's where serviceworkers come in
webworkers are just basically a background thread
lets you execute script without blocking the ui
Cerem Cem ASLAN
@ceremcem
Jul 23 2018 20:00
did I misinterpret the concepts?
Chris Reeves
@evs-chris
Jul 23 2018 20:01
I think maybe, but I'm not super clear on it myself :smile:
I know that you need to use a self-hosted ace-editor if you want syntax checking, because it uses a webworker that is subject to same-origin policy
PWAs are a good step beyond that
Cerem Cem ASLAN
@ceremcem
Jul 23 2018 20:08
it seems that I've mixed the two similar concepts. yes, what I've been looking for was service workers