These are chat archives for ractivejs/ractive

12th
Dec 2017
Paul Maly
@PaulMaly_twitter
Dec 12 2017 07:36
@ceremcem Could you please describe a little bit more about it?
Cerem Cem ASLAN
@ceremcem
Dec 12 2017 11:12
@PaulMaly_twitter let me prepare a draft for that.
Cerem Cem ASLAN
@ceremcem
Dec 12 2017 11:57
vetsinen
@vetsinen
Dec 12 2017 12:55
hello, ractivers
does anybody know about support for ractive in IDE and debuggers?
it looks said that even phpstorm doesn't support ractive markup
or what do you use to debug apps?
Julian Knight
@TotallyInformation
Dec 12 2017 12:59
I'd love to see support for syntax highlighting of reactive script tags in html files in VSCode.
vetsinen
@vetsinen
Dec 12 2017 13:00
as everybody does
and who decide this?
are there ways to achieve this goal?
Julian Knight
@TotallyInformation
Dec 12 2017 13:05
Well many of the most popular IDE's are free and open source so anyone with the time and skill can contribute :smile:
vetsinen
@vetsinen
Dec 12 2017 13:07
sure
where there attepts to integrate ractive to somewhere
?
now tge situation is really sad
Paul Maly
@PaulMaly_twitter
Dec 12 2017 13:38
I don't know about special plugins for IDE, but webstorm have nice support for mustaches.
Joseph
@fskreuz
Dec 12 2017 13:46
What part of Ractive specifically? If you're writing component files whose extension is .html, the IDE should just pick it up as a regular HTML page and highlight HTML, CSS and JS for you. If you mean the template syntax, you can probably assign .html or .ractive.html specifically as Handlebars, and it should highlight the template as well.
Joseph
@fskreuz
Dec 12 2017 14:02
Screen Shot 2017-12-12 at 9.00.53 AM.png
Above is VS Code set to Handlebars highlighting. Since Ractive components are just HTML files and the template syntax is probably 99% identical to Handlebars, it just picks it up and highlights it like Handlebars. No extra effort required.
Joseph
@fskreuz
Dec 12 2017 14:12
There is no "integration" requirement really. You can freely build a syntax highlighter and host it on your own Github repo or publish it under your name.
Paul Maly
@PaulMaly_twitter
Dec 12 2017 14:45
@fskreuz I think not only, highlighter could have, for example, a special highlight for decorators and other Ractive's directives. Also, IDE plugins have "autocomplete" feature, for example, VueJS plugin for JetBrains products:
Joseph
@fskreuz
Dec 12 2017 14:48
Yup, that would be a nice project. Although I make up for it with sane folder structures, naming conventions and IDE quick-find utilities/hotkeys. I like to be tool-independent for the most part. :D
Although VS Code/PHP Storm intellisomething usually gets most of the stuff right out of the box.
Paul Maly
@PaulMaly_twitter
Dec 12 2017 14:50
Yep, I'm not suffer too, but for Ractive's ecosystem purposes...
Also, we need to have something like "best practice", you know, where we could include some recommendations about folder structures, naming conventions and other things.
Giovanni Piller Cottrer
@giovannipiller
Dec 12 2017 14:53

hmmm, on IntelliJ, does Handlebar syntax highlighting really works for Ractive’s templates?
I tested it >1y ago and it wasn’t behaving properly. I might have to take a look again 😊

(hi everyone !!)

Paul Maly
@PaulMaly_twitter
Dec 12 2017 14:56
hi, what problems did you get before? Ractive's mustaches quite similar to Handlebars.
Giovanni Piller Cottrer
@giovannipiller
Dec 12 2017 14:57
I’ll check it out again and report back!
Paul Maly
@PaulMaly_twitter
Dec 12 2017 14:58
Also, maybe you need to change preferences. For example you use .html extension, but your IDE doesn't cover Handlebars for this extension.
Giovanni Piller Cottrer
@giovannipiller
Dec 12 2017 15:09
IntelliJ IDEA.png
Ok, Handlebars does work, but for some reason it triggers tons of inspection warnings like this
stuff like: “Block helper if usually requires a parameter”, when it obviously already does.
(trying disabling these checks doesn’t do much)
I guess that it happens because Ractive’s syntax has a bit more.. flavor ? :D
Paul Maly
@PaulMaly_twitter
Dec 12 2017 15:12
yep)
Julian Knight
@TotallyInformation
Dec 12 2017 15:21
Ah, thanks @fskreuz ! Learned something new! Didn't know that I could use <template> tags! All of the examples use <script> Template is much nicer as it is more semantic. Thanks for the Handlebars tip too, I've done that now which really helps.
Joseph
@fskreuz
Dec 12 2017 15:22
Actually... the <template>isn't really supported. It's just one of my samples lying around that happen to be Ractive-like to illustrate Handlebars support (I should really have removed it before posting).
Paul Maly
@PaulMaly_twitter
Dec 12 2017 15:22
But don't forget compile your single file components with <template> tags before you go))
Julian Knight
@TotallyInformation
Dec 12 2017 15:25
Well <template> is working fine for me - sure compiling will be there in the future but one of my requirements is for a tool that continues to support dynamic loading of templates. I'm building a UI builder for Node-RED so I need to support a mix of pre-compiled components and ones provided statically by users and supplied dynamically from the Node-RED server.
Maybe <template> should be supported?
Actually, I'm thinking that all(?) browsers will ignore <template> tags? So as long as the browser respects an id property on the template, why wouldn't they work just as well as script tags?
Paul Maly
@PaulMaly_twitter
Dec 12 2017 15:31
Actually, I know nothing about this case, because I'm not putting templates to the page))
Joseph
@fskreuz
Dec 12 2017 15:32
Ractive's parser, iirc, will treat the <template>contents as a string. So you won't get the pre-parsed AST from its contents. Also, I think the browser validates its contents. Anything that's not valid HTML probably breaks it. Probably not great for replacing <script type="notjs">
Wrapping the template in <template> was also suggested a long time ago https://github.com/ractivejs/ractive/issues/1916#issue-67947835 ... by me :D
Paul Maly
@PaulMaly_twitter
Dec 12 2017 15:33
:smile:
Julian Knight
@TotallyInformation
Dec 12 2017 15:45
OK, thanks I've read that and can see the disadvantages :-1:
Chris Reeves
@evs-chris
Dec 12 2017 15:46
If you're preparsing using the ractive bin, template tags have no drawbacks
well, other than needing to compile
so the rollup and webpack bin plugins play well with them
Julian Knight
@TotallyInformation
Dec 12 2017 15:48
And the cognitive overload. That's important for me as I am not a "developer" as such, I'm only doing this in my "spare" time.
Paul Maly
@PaulMaly_twitter
Dec 12 2017 15:56
You can't just use "single file components" as is. You need to compile it to regular form with some tools.
It's nice in development, but introduces new expenses during deploy
Julian Knight
@TotallyInformation
Dec 12 2017 16:00
Beginner question ahead - sorry:
I have a small library that I've written that interacts with Socket.IO. It exposes a simple event system that triggers when certain types of messages are received.
My question is - What is the best way of integrating these events and data into Ractive?
Currently, I've used what I was doing with MoonJS which is to create an event listener inside the oninit function that updates the Ractive data with the msg. But I'm not sure if this is the most efficient way?
Paul Maly
@PaulMaly_twitter
Dec 12 2017 16:02
This lib have syntax like: io.on('posts:update', () => {}); ?

Currently, I've used what I was doing with MoonJS which is to create an event listener inside the oninit function that updates the Ractive data with the msg. But I'm not sure if this is the most efficient way?

Yea, I think it's good solution.

Joseph
@fskreuz
Dec 12 2017 16:17
In Ractive, there is no The Right Way™ but there are a lot of ways to do it, depending on your taste. :D
One approach is like what you described, a listener on oninit whose handler does ractive.set() onto the component data.
Another way is via adaptors (https://ractive.js.org/plugins/#adaptors). You create a custom object that talks to your library and updates its properties when messages arrive. Then write an adaptor that translates that custom object into POJOs Ractive can use, and update the object if Ractive updates the POJO.
If you have state management systems like Redux, which handle data changes separate from the renderer, Ractive wouldn't be involved at all.
Julian Knight
@TotallyInformation
Dec 12 2017 16:29

@PaulMaly_twitter : Yes, that's about right - I've wrapped everything up though so that UI authors don't have to think about the mechanics of Socket.IO nor the mechanics of how the messages are exchanged.

@fskreuz : Thanks for that. Good to know that I'm not a long way off. I've looked at adaptors but with my minimal knowledge, I've not yet managed to get something to work. I expect I'm still lacking something and it will eventually click. One oddity of what I'm doing is that data is typically flowing one way. A msg arrives and updates something locally. If a user interacts, that different data is typically sent back via a msg. So the data in the Ractive model is just right for maintaining local state.

Paul Maly
@PaulMaly_twitter
Dec 12 2017 16:35

@TotallyInformation I think you use most simple way to do your work. It could be something like:

const $$ = new Ractive({
     data: {
           posts: []
     },
     oninit: function() {
           io.on('posts:update', (posts) => this.set('posts', posts));
    }
});

Simple but effective.

Julian Knight
@TotallyInformation
Dec 12 2017 16:37
Thanks Paul, that is, indeed what I am doing
   oninit: function() {
        var that = this
        uibuilder.onChange('msg', function(newVal){
            /** If we receive an MQTT type msg with topic 'homie/<deviceId>/...
             */
            if ( newVal.hasOwnProperty('topic') ) {
                let splitTopic = newVal.topic.split('/')
                let devId = splitTopic[1]
                if ( splitTopic[0] === 'homie' ) {
                    if ( splitTopic[3] === '$updated' ) {
                        that.set( 'homie.'+devId+'.updated', new Date( newVal.payload.replace(/\"/g,'').trim() ) )
                    }
...
Paul Maly
@PaulMaly_twitter
Dec 12 2017 16:38
yep, it'll work)
Julian Knight
@TotallyInformation
Dec 12 2017 16:39
In this example, the input messages each form a part of a table that is accumulated in the front-end - it shows a summary table of information coming from IoT devices. The topic defines the device which equates to the table row
Paul Maly
@PaulMaly_twitter
Dec 12 2017 16:40
But the best way to split this code from Ractive instance initialization into some separated module
If I would use 'Ractive-app' I have made it like:
// main file
const App = require('ractive-app')();

const $$ = new App({ .... });

$$.use(require('./plugins/io'));

// IO plugin file
module.exports = function() {
     this.on('init', () => {
          // your code here
     });
};
Julian Knight
@TotallyInformation
Dec 12 2017 16:48
Thanks Paul. The Ractive part of my project is just starting. Doubtless I will refactor and compile things at some point but at the moment it is all just learning. Next big plan for my project is to build a Ractive wrapper round uibuilder with a mix of pre-defined and user delivered components with matching nodes in Node-RED to make it easy to create data-driven UI's - quite a long journey probably but it fills the long winter nights and beats watching rubbish TV :smile:
If I can work out how to create an adaptor, I may refactor my FE library and integrate them better in the way you are suggesting. Some way off that though yet.
I was going to use Moon as that was the best I'd found so far (after going through REACT, Angular, Vue, Riot and a bunch of others!). But the flexibility of Ractive is a definite plus here.
I think that it will let me send a new component via a websocket msg from the backend if I want it to! Which may have some uses.
Joseph
@fskreuz
Dec 12 2017 16:56

I think that it will let me send a new component via a websocket msg from the backend

Totally possible https://github.com/ractivejs/rcu

With that, you're able to parse component file strings into constructors (make specifically)
Julian Knight
@TotallyInformation
Dec 12 2017 16:58
Looks like you may have a new convert then :clap: - Most of the other frameworks have too many limitations.
After all, I'm not building massive, scalable architectures here but rather something that is commonly driven by a Raspberry Pi!
Joseph
@fskreuz
Dec 12 2017 17:00
I remember someone using Ractive for a media center interface. Was that you @evs-chris ?
Julian Knight
@TotallyInformation
Dec 12 2017 17:00
Gotta run to daughters Carol evening now - catch you later.
Chris Reeves
@evs-chris
Dec 12 2017 17:09
My home movie server is a simple node app with a json db pointing at a ton of mp4s and a ractive frontend for listing, searching, and streaming
Paul Maly
@PaulMaly_twitter
Dec 12 2017 17:27
nice)))
Paul Maly
@PaulMaly_twitter
Dec 12 2017 17:34
My question: where could I find some docs about ractive-cli?
Never used it before but want to try
Chris Reeves
@evs-chris
Dec 12 2017 17:35
npm i ractive; npx ractive -h
It's much more convenient to consume as a webpack loader or rollup plug-in though, if you already have a build structure
Paul Maly
@PaulMaly_twitter
Dec 12 2017 17:39
npx ractive -h ?
oh, I got it
ok, nice.
Chris Reeves
@evs-chris
Dec 12 2017 17:41
or ./node_modules/.bin/ractive -h if you on npm prior to 5, I think
Paul Maly
@PaulMaly_twitter
Dec 12 2017 17:42
no, it's works for me
so I can parse templates and single file components ?
Chris Reeves
@evs-chris
Dec 12 2017 17:43
yep
Paul Maly
@PaulMaly_twitter
Dec 12 2017 17:43
not much, but ok)
thanks Chris!
Chris Reeves
@evs-chris
Dec 12 2017 17:44
it stitches template and optionally css into is using simple variable subs so you can use the full power of js in your scripts
quite a departure from rcu-based stuff, but quite nice in the right env
Paul Maly
@PaulMaly_twitter
Dec 12 2017 17:51
ok, one more thing, I don't sleep at night, is Ractive still can't work with in-place markup like Vue and Angular?
const $$ = new Ractive({
     el: '#app',
    data: {
        name: 'Chris'
    }
});
// html
<div id="app">
      <p>{{ name }}</p>
</div>
Chris Reeves
@evs-chris
Dec 12 2017 17:52
it depends
there are several template constructs that html will break, so your template can get messed up
script tags aren't parsed by the browser, so their content doesn't get messed up
Paul Maly
@PaulMaly_twitter
Dec 12 2017 17:53
Earlier I thought that it works if enhance: true but it's not
Chris Reeves
@evs-chris
Dec 12 2017 17:54
yes, enhance is only for taking over pre-rendered html
Paul Maly
@PaulMaly_twitter
Dec 12 2017 17:54
It could be broken or will be no doubt?
How other guys doing that?
Chris Reeves
@evs-chris
Dec 12 2017 17:56
for instance on why script tags are very strongly pushed: <table>{{#each list}}<tr>...</tr>{{/each}}</table> will lose the each before ractive can get it
because the html spec doesn't allow text content as a direct child of tables
some others get away with it because they only use attributes for control structures, which avoids this issue but feels really weird in general cases to me
v-for in Vue, for instance
Paul Maly
@PaulMaly_twitter
Dec 12 2017 17:58
But if we get ideal case?

some others get away with it because they only use attributes for control structures, which avoids this issue but feels really weird in general cases to me
@PaulMaly_twitter
But if we get ideal case?
v-for in Vue, for instance

completely agree.

so, it will break my template in 100% cases or not?
maybe we can add it as additional option but warn user about it?
Maybe it's not the best way, yes. I won't do that in production, but for small test apps or fiddles.
Chris Reeves
@evs-chris
Dec 12 2017 18:00
I can't recall if ractive will refuse to use a non-script el at this point, but you can always use something like $('#el').html() as the template
Paul Maly
@PaulMaly_twitter
Dec 12 2017 18:01

I can't recall

Ractive just do nothing

no error, nothing
Chris Reeves
@evs-chris
Dec 12 2017 18:04
hmmm
Ractive just clear #app container at all )))
Chris Reeves
@evs-chris
Dec 12 2017 18:21
I've not used jsbin much
can you see my changes live?
if you specify #app as the template as well, you get an error from ractive
it won't try to load the template from the target el
Chris Reeves
@evs-chris
Dec 12 2017 18:27
here it is with progressive enhancement too, so it reuses the template DOM http://jsbin.com/gexotubuto/1/edit?html,css,js,output
a little roundabout, and definitely not recommended for general use, but it is workable
Paul Maly
@PaulMaly_twitter
Dec 12 2017 18:33

it won't try to load the template from the target el

yes, but I think it should try

a little roundabout, and definitely not recommended for general use, but it is workable

so, why we can't include this way to Ractive? Yes, not recommended for general use, but as I said, can be useful for small test apps )

Chris Reeves
@evs-chris
Dec 12 2017 18:36
Rich originally excluded it because of the number of bug reports coming in saying that ractive was broken because the browser's html parser had stripped out or rearranged part of the template
it's also a little rough on progressive enhancement, which is pretty quick when the target dom matches what will be rendered, but slows considerably when it has to do a bunch of rewriting
as anything other than the simplest templates would cause e.g. {{#if condition}}<p>something</p>{{/if}} has two text nodes {{#if condition}} and {{/if}} that have to be stripped out if condition happens to be true
and if it's false, then it the element has to be removed as well
I agree that it's nice for small tests, but it can also be pretty confusing for beginners, so I'd say a plugin would be a safer approach
Paul Maly
@PaulMaly_twitter
Dec 12 2017 18:41
ok, I see, people loves this way more than <script> tag, predictable. yea, I got you
your workaround with .innerHTML will be enough in most cases