Help with basic include implementation

[megclaypool]

Hi there,

The company at which I work is considering moving our twig component library from Pattern Lab to Fractal. We like Fractal's speedy rendering and support for internal documentation :) To do some exploring, I installed Fractal and followed the README instructions to install frctl/twig.

I dragged over some components from our current library. Unfortunately, although basic twig components seem to render ok, I can't figure out how to get include to work. This is pretty crucial, as we've used {% include ... with {...} %} to chain everything together from our atoms all the way up to our WP/Drupal templates.

The file /components/00-atoms/00-global/00-fonts appears to render fine in Fractal. In the file /components/00-atoms/00-global/00-color-examples.twig I tried to {% include '/components/00-atoms/00-global/00-fonts' %} but I'm getting an error. I've tried messing with the path name, but '00-atoms/00-global/00-fonts' and '00-fonts' proved equally disappointing. Just for giggles, I also tried {% include '@/components/00-atoms/00-global/00-fonts' %}, {% include '@components/00-atoms/00-global/00-fonts' %}, {% include '@00-atoms/00-global/00-fonts' %}, and {% include '@00-fonts' %} with similar results :(

Here's the error I see displayed in Fractal:

ERROR RENDERING COMPONENT
TwigException: Unable to parse 'include '/components/00-atoms/00-global/00-fonts''

 Error: TwigException: Unable to parse 'include '/components/00-atoms/00-global/00-fonts''
    at /Users/noxlady/Sites/fractal/test-fractal/node_modules/@frctl/twig/src/adapter.js:158:24
    at new Promise ()
    at TwigAdapter.render (/Users/noxlady/Sites/fractal/test-fractal/node_modules/@frctl/twig/src/adapter.js:144:16)
    at ComponentSource._renderVariant (/Users/noxlady/Sites/fractal/test-fractal/node_modules/@frctl/fractal/src/api/components/source.js:207:30)
    at _renderVariant.next ()
    at onFulfilled (/Users/noxlady/Sites/fractal/test-fractal/node_modules/co/index.js:65:19)
    at tryCatcher (/Users/noxlady/Sites/fractal/test-fractal/node_modules/bluebird/js/release/util.js:16:23)
    at Promise._settlePromiseFromHandler (/Users/noxlady/Sites/fractal/test-fractal/node_modules/bluebird/js/release/promise.js:512:31)
    at Promise._settlePromise (/Users/noxlady/Sites/fractal/test-fractal/node_modules/bluebird/js/release/promise.js:569:18)
    at Promise._settlePromise0 (/Users/noxlady/Sites/fractal/test-fractal/node_modules/bluebird/js/release/promise.js:614:10)
    at Promise._settlePromises (/Users/noxlady/Sites/fractal/test-fractal/node_modules/bluebird/js/release/promise.js:694:18)
    at Promise._fulfill (/Users/noxlady/Sites/fractal/test-fractal/node_modules/bluebird/js/release/promise.js:638:18)
    at Promise._resolveCallback (/Users/noxlady/Sites/fractal/test-fractal/node_modules/bluebird/js/release/promise.js:432:57)
    at Promise._settlePromiseFromHandler (/Users/noxlady/Sites/fractal/test-fractal/node_modules/bluebird/js/release/promise.js:524:17)
    at Promise._settlePromise (/Users/noxlady/Sites/fractal/test-fractal/node_modules/bluebird/js/release/promise.js:569:18)
    at Promise._settlePromise0 (/Users/noxlady/Sites/fractal/test-fractal/node_modules/bluebird/js/release/promise.js:614:10)
    at Promise._settlePromises (/Users/noxlady/Sites/fractal/test-fractal/node_modules/bluebird/js/release/promise.js:694:18)
    at Promise._fulfill (/Users/noxlady/Sites/fractal/test-fractal/node_modules/bluebird/js/release/promise.js:638:18)
    at Promise._resolveCallback (/Users/noxlady/Sites/fractal/test-fractal/node_modules/bluebird/js/release/promise.js:432:57)
    at Promise._settlePromiseFromHandler (/Users/noxlady/Sites/fractal/test-fractal/node_modules/bluebird/js/release/promise.js:524:17)
    at Promise._settlePromise (/Users/noxlady/Sites/fractal/test-fractal/node_modules/bluebird/js/release/promise.js:569:18)
    at Promise._settlePromise0 (/Users/noxlady/Sites/fractal/test-fractal/node_modules/bluebird/js/release/promise.js:614:10)

Can you explain how to use include with twig templates in Fractal? Is this a temporary bug or is there something terribly obvious that I'm missing?

[naomiHauret]

I'm using Fractal with twig at work and I'm also encountering issues with include.

[mihkeleidast]

The basic include tag should work like this:

{% include '@button' %}

The @button reference is your component's Fractal handle and can be found in the "Info" tab in the Fractal UI.

In your example, you should use {% include '@fonts' %} instead of {% include '@00-fonts' %}, since Fractal uses the number in the filename for ordering only & does not keep it for the handle.

If you want to pass custom data to the component:

{% include '@button' with { label: 'custom button label' } %}

If you want to include using the full path (relative to your components directory):

{% include 'components/button/button.twig' %}

This must also include the file extension.

[mihkeleidast]

Closing since this should be working as expected - but feel free to comment or file a new issue if there are any issues.

[julkue]

What's the difference between {% include "@text-field--default-light" with search %} and {% render "@text-field--default-light" with search %} then?

[mihkeleidast]

{% render "@text-field--default-light" %} includes the context defined for that component/variant by default.

If you're using with search, it might not matter.

[julkue]

@risker

I'm confused again about this behavior. It seems that including files that are non-Fractal components isn't possible.

Background: I would like to include Twig files from node_modules folder where I have an internal shared components library that I want to use in a project. But including a file that is not Fractal component living in the configured components directory will throw a "template not found" error by Twig.js. Even with a namespace (#25) it won't work.

How is it possible to include files like in normal Twig? I've already tried pristine, that didn't help either.