Fractal: Make linking to assets within a components folder easier

[allmarkedup]

For example generating non-brittle links to stylesheets or JS files that live within a components directory.

[allmarkedup]

See https://github.com/frctl/fractal/issues/43#issuecomment-234599159 for reference.

[shawnbot]

One idea: could you include a list of each component's assets in its template data? E.g. if your component looked like:

src/
  component/
    component.config.yml
    component.css
    component.js

Then you might be able to iterate over its assets by type (or, more simply, filename extension) in a template like so:

{{#each assets.js}}
<script src="{{ path . }}"></script>
{{/each}}

{{#each assets.css}}
<link rel="stylesheet" href="{{ path . }}">
{{/each}}

This would be tricky to get right if the scripts needed to execute in a different order, in which case it might still be good to allow an assets dictionary in the config that overrides the automatic behavior.

[allmarkedup]

@shawnbot yep I've been working on adding exactly that functionality (ie. providing access a list of assets). However the main sticking point I'm running into is how to handle components that include other components. If the preview layout is only including the top-level component's assets then any partials will be unstyled... and parsing out the template's 'partials dependency tree' to put together list of all required assets for will get ugly pretty quickly I think...

Obviously passing custom data through the config is a workable solution but I'd really like to avoid the links breaking if stuff is moved around, so I still need to give it a bit more thought!

[shawnbot]

@allmarkedup sweet! Good point about nested assets. I feel like that's something to tackle after a first pass at getting component-level assets stubbed out, though. Maybe component pages could display a dependency tree that just links out to the other components?

[allmarkedup]

@shawnbot right, just pushed up a few updates and amongst them is a first pass at improving the way that component assets can get linked to. If you npm update all the things then you should now be able to do something like this in your preview layout files:

    {{#each _target.resources.assets}}
      {{#if isCSS}}
        <link rel="stylesheet" href="{{ path '/components/raw/{{ _target.baseHandle }}/{{ this.base }}' }}">
      {{/if}}
    {{/each}}

    {{#each _target.resources.assets}}
      {{#if isJS}}
        <script src="{{ path '/components/raw/{{ _target.baseHandle }}/{{ this.base }}' }}"></script>
      {{/if}}
    {{/each}}

It's a bit more verbose than I'd like (for a number of reasons) and I may add some additional syntactic sugar on top later but for now that _should_ give you a dynamic way to link to a component's assets. These links should still work even if you move components around in the filesystem.

Note that for now this does not address the issue of loading a sub-component's assets (if one exists) nor have I yet added the ability to 'pass through' user-defined config data yet (tracking that one on a separate issue here: https://github.com/frctl/fractal/issues/89).

If you have a chance to try it out then let me know what you think!

[shawnbot]

Thanks @allmarkedup, I'll check it out!

[juliaelman]

@allmarkedup FWIW I tried out this method and it works like a charm - thanks @allmarkedup! 🎉