Fractal: Importing components

[kjugi]

I have the struggle with importing components to the other components.

In the documentation you are writing about 2 solutions to this:

• first with {{render '@button'}}
• second with {{> '@button'}}

The problem with the first one is just importing (renderings) existing component like it looks without the possibility to edit any configuration to it in my config.js file. The second problem is importing components without '' (like {{render @button}} and components get lost (??) with returning weird information like rendering not this component as I passed.

The problem with the second one is when you import component with > scope after this importing are broken. What does it mean? If we request component like this {{> '@button'}} it will print us button but if below in the code, we have like in my case importing script by another helper he will search it in button component, not in this where the file exist and return error in console:

GET http://localhost:4000/components/raw/button/file-upload.js 404 (Not Found)

And the code:

{{> '@button' }}
<script src="{{ static 'file-upload.js' }}"></script>

helper static:

hbsEngine.handlebars.registerHelper('static', (file, data) => {
    return '/components/raw/' + data.data.root._self.baseHandle + '/' + file;
});

If want some more info about problem let me info which one.

Greetings,
Filip

[nategreen]

The render helper takes the partial name as a string, because it's actually an argument value for that helper. It's almost like spelling out {{render partial='@button' }}...it needs to be quoted because it's truly a string being passed in. Like you mentioned, that special helper doesn't currently support configuration, AFAIK. You can think of the render helper as just spitting out the HTML from the other component, not going through and doing anything with the template.

To use the component as a partial, you need to not quote the handle, e.g. {{> @button }}. Handlebars is looking for the name of a partial after the {{>, according to its syntax.

That way, you can pass in configuration either by giving it a chunk of context ({{> @button button-context }}) or by passing individual values ({{> @button label='My Button' style='primary' }}), depending on what your template requires.

[kjugi]

In docs, examples are showing with quotes so I added it too. But the problem is with this scope only. The situation takes place in for ex. in Form component and I want to import/render button component here so I do it and in next lines, my induction are searching file in button component not in Form.

[dkhuntrods]

Closing as this is quite old now, but please feel free to re-open if this is still unresolved @kjugi.