Question: would it be possible to auto-load components?

[dagnelies]

Hi,

I find the concept of packaging components in separate htmls a great idea, although I'm not yet very familiar with the ins and outs.

Currently, to import components, you have to do something like this:

Ractive.load({
    comp1: 'comp1.html',
    comp2: 'comp2.html'
    comp3: 'comp3.html'
}).then( function ( components ) {
    console.log( components )
    var ractive = new Ractive({
        el: 'body',
        template: '#template',
        components: components,
        data: ...
    });
});

Would it be possible for ractive to automatically parse the document head for links like these:

<link rel="ractive" src="fancy-tree.html" />
<link rel="ractive" src="fancy-slideshow.html" />
<link rel="ractive" src="fancy-panel.html" />

...and register them automatically the same way? So that components of the name "fancy-_" (simply the same name as the html file) could be used by default for _all* ractive instances. This would reduce the other part to:

    var ractive = new Ractive({
        el: 'body',
        template: '#template',
        data: ...
    })

I think it would be great in terms of simplicity. One potential issue would perhaps be that Ractive would have to wait for all components to load before rendering (or with a special flag in order to avoid to do so, like "ignore_components: true"). I don't know if that would be problematic or not though.

Best Regards

[martypdx]

If I understand you correctly, that's what Ractive.load().then(function(){...}) does. Load all link tags and assigned to Ractive.components.[component] = [Component]

[Rich-Harris]

Gah, Marty beat me to it! Was just about to say:

This should already work - use href instead of src, then...

<link rel="ractive" href="fancy-tree.html">
<link rel="ractive" href="fancy-slideshow.html">
<link rel="ractive" href="fancy-panel.html">

<!-- later... -->
<script src='ractive.js'></script>
<script src='ractive-load.js'></script>
<script>
  Ractive.load().then( function () {
    var ractive = new Ractive.components['fancy-slideshow']({...});
  });
</script>

[martypdx]

@Rich-Harris Yes, but you saved him the frustration of tracking down that he had the wrong attributes, something I totally overlooked. :)

[dagnelies]

Thanks!