These are chat archives for ractivejs/ractive

19th
Mar 2018
Paul Maly
@PaulMaly_twitter
Mar 19 2018 09:31
@evs-chris did you see this interesting issue in Svelte : sveltejs/svelte#1259
Seems Ractive also has this problem, isn't it ?
Chris Reeves
@evs-chris
Mar 19 2018 13:42
I suppose so, but that's more a footgun of the dom than ractive or svelte
kouts
@kouts
Mar 19 2018 14:04
Question for you guys: What would be the most appropriate method to a add functionality as a "plugin" to an existing component?
This came up building some functionality for the ractive-modal that I didn't want to include into the component by default.
Joseph
@fskreuz
Mar 19 2018 14:21
That depends on what you want to do.
And how you wrote ractive-modal
Also, I usually avoid "modifying" a component. I see them as "open for extension, closed for modification". I either wrap them in another component (with the additional stuff I want ,without touching the original implementation) or just build another that fits my need (because it makes no sense bending something to do what it doesn't).
kouts
@kouts
Mar 19 2018 14:25
It is wrote as a single file component
Chris Reeves
@evs-chris
Mar 19 2018 14:26
I usually try to make mine extensible using partials and events
it works well for some components, and not so much for others
Cerem Cem ASLAN
@ceremcem
Mar 19 2018 14:29
I'm also interested in @kouts ' question's answers
Chris Reeves
@evs-chris
Mar 19 2018 14:29
the nice thing about partials is that you can override them from the template without having to use MyComponent.extend
Joseph
@fskreuz
Mar 19 2018 14:30
Modals are notorious for being so simple to componentize, but becomes a rabbit hole the more you extend. I often find myself falling back to vanilla Bootstrap modals because of this. :grin:
Chris Reeves
@evs-chris
Mar 19 2018 14:30
yep
Cerem Cem ASLAN
@ceremcem
Mar 19 2018 14:30
@fskreuz that's right, that's why I use @kouts ' modal :D
kouts
@kouts
Mar 19 2018 14:31
The functionality I'm talking about is the "body scroll lock" that has to happen when the modal opens up
I have left this out of ractive-modal because thare are all sorts of caveats
Joseph
@fskreuz
Mar 19 2018 14:31
<ractive-modal on-open="@this.someMethodOnEnclosingComponentThatLocksBodyScroll()">
Chris Reeves
@evs-chris
Mar 19 2018 14:32
honestly, I just rely on evergreens for this stuff along with
Cerem Cem ASLAN
@ceremcem
Mar 19 2018 14:32
There are two points of configuration: Global configuration, Instance configuration. we perform "instance configuration" by attributes, but how do we configure global settings?
Chris Reeves
@evs-chris
Mar 19 2018 14:33
overscroll-behavior
you could use shared, or if only for the component style
@style is a legit model that only applies to a component and its extensions
just also happens to be available to css fns
Cerem Cem ASLAN
@ceremcem
Mar 19 2018 14:41
Okay, here we have an example: I have a component and there is a alert-mode switch available: Playground
I want to expose an API to user whether configure alert-mode per instance (via alert-mode="true/false" option):
<mybutton alert-mode="true" on-click="@global.alert('wow!')">Hello!</mybutton>
Paul Maly
@PaulMaly_twitter
Mar 19 2018 14:43
@kouts I think you can use custom plugins and use() method for this.
Cerem Cem ASLAN
@ceremcem
Mar 19 2018 14:43
or globally:
Ractive.components.mybutton = MyComponent.settings({
  defaultMode: 'alert'
});
how can I make it available the second one?
kouts
@kouts
Mar 19 2018 14:45
@PaulMaly_twitter I've heard about the use method but I don't know what it does exactly + is only available on edge right?
Paul Maly
@PaulMaly_twitter
Mar 19 2018 14:46
yes
Custom plugins is just a simple function:
export default function({Ractive, proto, instance}) {


};
Cerem Cem ASLAN
@ceremcem
Mar 19 2018 14:48
This would be great if it didn't throw an exception like "Uncaught TypeError: MyComponent.config is not a function"
Paul Maly
@PaulMaly_twitter
Mar 19 2018 14:48
You able to assign this function to any instance or even constructor itself:
import myplugin from '';

Ractive.use(myplugin);

var r = new Ractive();
r.use(myplugin);
Or you can use currying to be able to setup plugin before assign:
export default function(options = {}) {
        return ({Ractive, proto, instance}) => {


      };

};
Ractive.use(myplugin({ foo: 'bar'}));
Paul Maly
@PaulMaly_twitter
Mar 19 2018 14:54
This plugin works like this.
Cerem Cem ASLAN
@ceremcem
Mar 19 2018 14:56
Wow, @PaulMaly_twitter :+1:
Thanks for the "currying function" tip. So MyComponentbecomes like this where it behaves exactly how I wanted
Paul Maly
@PaulMaly_twitter
Mar 19 2018 14:57
:+1:
Juan C. Andreu
@andreujuanc
Mar 19 2018 17:56
Oh sweet jesus
Joseph
@fskreuz
Mar 19 2018 18:06
:joy:
JavaScript is doomed
Won't be long before we all write in symbols and glyphs.
Chris Reeves
@evs-chris
Mar 19 2018 18:25
let there be pipes
...as long as there's something good in them to smoke
Joseph
@fskreuz
Mar 19 2018 20:24
When there's smoke, there's JavaScript. :joy:
Larry Osborn
@larryosborn
Mar 19 2018 21:26
|> is a crack pipe though
Cerem Cem ASLAN
@ceremcem
Mar 19 2018 21:26
is there any reference documentation that defines how autovivification must be done?
I mean, currently @.push throws an exception even for falsy values, which I think it shouldn't be so strict