These are chat archives for ractivejs/ractive

29th
Oct 2017
Cerem Cem ASLAN
@ceremcem
Oct 29 2017 01:41
I know, someone will shoot me, but it's okay: Is there any way to get the list of component dependencies of a component while we are using self registering components?

for example, a template like:

<a href="...">hello</a>
<hello>there</hello>

should return ['hello'] if only hello component is registered, but should return ['a', 'hello'] if a is also registered itself as a component. moreover, it should return ['a', 'hello', 'foo', 'bar', 'baz', ...] if hello uses foo, and foo uses bar and baz under the hood.

...or should I open an issue for that?
(without the shooting part)
Joseph
@fskreuz
Oct 29 2017 02:52
I think it was mentioned to me before that Ractive cannot tell apart a component from an element just by looking at the template.
It only knows about it during runtime, when it finds component definition in the registries when trying to render an item.
If you meant an API that looks to see if a component definition of a given name is available somewhere, there's an undocumented static function called findPluginhttps://github.com/ractivejs/ractive/blob/dev/src/Ractive/static/findPlugin.js
Example is Ractive.findPlugin('MyComponentName', 'component', instanceToStartLookingFrom)
Joseph
@fskreuz
Oct 29 2017 02:58
If you want your component to declare its component dependencies via template, that's exactly the purpose of <link rel="ractive"> when using component file format. https://ractive.js.org/api/#component-files
Joseph
@fskreuz
Oct 29 2017 03:03
From there, you can use Ractive.parse to parse the template, look for all the top-level <link rel="ractive"> and use that data. It's pretty much how the existing component-file loaders work.
Joseph
@fskreuz
Oct 29 2017 03:09
And if I may ask, what are you trying to do? :D
Chris Reeves
@evs-chris
Oct 29 2017 04:23
I think I see where you're headed, and it's not built into ractive, but it wouldn't be too difficult to walk a template and collect elements
from there, determining if an element is a component should just be a check against and instance's component registry
webdesQ
@webdesq
Oct 29 2017 11:37
I'm wondering if we could enhance the findComponent() method to support some form of selector engine. Currently it expects a component name and returns the first instance of that component. However, in some cases I want to target a specific instance of a component. I have to use findAllComponents and then loop over the result to find the one instance I need. Any ideas/plans on how we could improve findComponent?
kouts
@kouts
Oct 29 2017 12:46
You can set a name for each component and then target that specific one
e.g
say you have a popup component
that it's normally called Ractive.components['popup'] ( <popup></popup>)
when you instantiate your instance (or parent component)
you can give the popup a different name
components: {
    'popup-1':               Ractive.components['popup'],
    'popup-2':               Ractive.components['popup']
},
webdesQ
@webdesq
Oct 29 2017 13:07
Hi @kouts , thanks for the input. I'm wondering if this approach would hold if you instantiate multiple instances of a certain component at runtime. For example: I have a tab component that creates a new instance of <tab> component when a new tab is added at runtime. My templates simply use <tab /> to instantiate tab component, so even if I would manage to add differente names for each instance and add it the components key, then I would have to modify to my templates at runtime to use <tab1 />, <tab2 />, etc.
I was thinking of a sort of css like selector syntax: Ractive.findComponent('tab.selected')
Or if each component instance could be given an ID (for example 'properties'): ractive.findComponent('tab#properties')
Joseph
@fskreuz
Oct 29 2017 13:43
I'm curious if instance.findAllComponents('tab').filter(tab => tab.get('selected')) works.
Joseph
@fskreuz
Oct 29 2017 13:49
Besides, component attributes aren't really "attributes". They just define data mappings, props. tab.selected would be confusing since components don't really have classes.
webdesQ
@webdesq
Oct 29 2017 14:10
@fskreuz Yes, I agree that a css like selector syntax might be confusing as it might suggest you're expecting a real css class 'selected' instead of a data property 'selected'. Maybe i'll have to stick with the one-liner you mentioned using the filter method
kouts
@kouts
Oct 29 2017 14:48
you can even make it a method and stick it to Ractive.prototype
Ractive.prototype.findComponentsByAttr = function(component_name, attr){ 
    return this.findAllComponents(component_name).filter(tab => tab.get(attr));
}
Cerem Cem ASLAN
@ceremcem
Oct 29 2017 20:52

And if I may ask, what are you trying to do? :D

sorry for the late reply, but I think @evs-chris has pretty good idea what I'm trying to build :)

I want to load the minimum amount of application code on the first request and push more components after page load (aktos-io/scada.js#110).