Unable to define context of sub-components using parent component's config

@frctl/fractal version: 1.1.3 + @frctl/nunjucks version: 1.0.3

I love Fractal so far, but I’m struggling a bit with including sub-components via method B (define context data in the parent componet’s config), documented here http://fractal.build/guide/components/sub-components#b-define-all-context-data-in-the-parent-component-s-config.

I’m using Nunjucks as my template engine, and .js files for component configs. Recreating the doc-example, I’m not able to pass in a different text to my button using the parent component’s config.

{# button.njk #}
<button type="button" name="submit">{{ text }}</button>

// button.config.js
module.exports = {
    title: 'Button',
    context: {
        text: 'A Button'
    }
};

{# search-box.njk #}
<div class="searchbox">
    <label for="search">{{ label }}</label>
    <input type="search" name="keywords" id="search">
    {% render '@button' %}
</div>

// search-box.config.js
module.exports = {
    title: 'Search Box',
    context: {
        label: 'Search here',
        button: {
            text: 'Go!'
        }
    }
};

According to the documentation, I could expect the following result:

<!-- button.html -->
<button type="button" name="submit">A Button</button>

<!-- search-box.html -->
<div class="searchbox">
    <label for="search">Search here</label>
    <input type="search" name="keywords" id="search">
    <button type="button" name="submit">Go!</button>
</div>

But instead I get the text “A Button” (defined in button.config.js) in both cases:

<button type="button" name="submit">A Button</button>

<!-- search-box.html -->
<div class="searchbox">
    <label for="search">Search here</label>
    <input type="search" name="keywords" id="search">
    <button type="button" name="submit">A Button</button>
</div>

[mikkelrom]

Hi @lucasctd. It’s actually better to include your CSS in the head of the preview layout: https://fractal.build/guide/components/preview-layouts

Hope this helps! 🙂

[LeBenLeBen]

@lucasctd If you use Nunjucks, see 7iomka comment, if you use Handlebars:

{{render '@example' partialData}}

Or to merge with component default context:

{{render '@example' partialData merge=true}}

See Using Handlebars section on https://fractal.build/guide/core-concepts/views