These are chat archives for ractivejs/ractive

17th
Apr 2018
Joe Turner
@JoeTurner-IR
Apr 17 2018 18:17
I work with Ractive so much I have dreams about it now, here is the idea I had:
style: function() {
    var me = this;
    return {
        '.selector': {
            '.child': {
                __rules: {
                    'height': me.get('isOpen')? '100px' : '0'
                }
            }
        }
    }
}
could be pretty powerful, reduce code, replace need for less / sass
knowing Ractive it could also already be implemented somehow
or could have some fundamental flaw I haven't thought of
let me know what you think :)
Joe Turner
@JoeTurner-IR
Apr 17 2018 18:40
I noticed cssData in the docs, maybe an example of how to use this would be cool
Paul Maly
@PaulMaly_twitter
Apr 17 2018 19:02
I wish to be able to define components just like an options object which will be wrapped in Ractive.extend(options) automatically inside of Ractive. I don't think that it very hard to implement:
// Component.js
export default {
    template: `Hello world`,
    data: () => ({})
};

// App.js

import Component from './Component';

new Ractive({
    template: `<Component />`,
    components: {
          Component
   }
});
Inside of Ractive (pseudo code):

if ( ! (component instanceof Ractive)) {
       component = Ractive.extend(component);
}
Joseph
@fskreuz
Apr 17 2018 20:36
@JoeTurner-IR It's a combo of cssData, ractive.styleSet() and the function-form of css. It's similar to how you'd use data, ractive.set() and template.
Chris Reeves
@evs-chris
Apr 17 2018 20:53
@JoeTurner-IR that's probably not a case you want to use for css as a function because it's going to rewrite the stylesheet every time the var changes. Those styles are also component-wide, so if you have more than one instance, it will affect them all at once. While it's not exactly a replacement for less/sass/etc, I've pretty much replaced those in my components with style functions because variables and computations are mostly what I use from compile-to-css libs. Being able to update variables at runtime is great for user-customized theming too.
We could implement styles as you dreamed, but it would probably create a whole lot of style tags floating around the DOM, as I'd think in order to be close to performant, each variable bit would need to be separated from the others.
@PaulMaly_twitter out of curiosity, why not just import the component and add it as components: { Component: Ractive.extend(Component) }?
beyond that, I think you'd want to add a flag to the object, like component: true or component: ComponentToExtend
Anatoli Radulov
@avoto
Apr 17 2018 20:56
@evs-chris @fskreuz where would be a good place to find some examples for using cssData, styleSet() and css functions ?
Chris Reeves
@evs-chris
Apr 17 2018 21:00
there are small examples in the docs, and a few more in the tests
Paul Maly
@PaulMaly_twitter
Apr 17 2018 21:02

out of curiosity, why not just import the component and add it as

hm, lets see what we got in this case:

import NavBar from '';
import ListView from '';
import ActionBar from '';

new Ractive({
    components: {
         NavBar: Ractive.extend(NavBar),
         ListView: Ractive.extend(ListView),
         ActionBar: Ractive.extend(ActionBar),
    }
});
Do we really need it?
import NavBar from '';
import ListView from '';
import ActionBar from '';

new Ractive({
    components: {
         NavBar,
         ListView,
         ActionBar,
    }
});