Twig component renders incorrectly from the docs

[uandco]

Steps to reproduce the issue

1. clone https://github.com/uandco/fractal-twig-issue
2. run npm install
3. run fractal start --sync

The navigation component shows up OK when viewed as a component or rendered via another component (I rendered it in the example component)

The rendering fails when rendered from the docs (HTML code is displayed). I tried to use the twig engine for docs too but get the same result.

Reproduces how often:

100%

Reduced test case

https://github.com/uandco/fractal-twig-issue

Context

• Fractal version: 1.3.0
• Node version: 10.15.1
• OS: MacOS 10.14.6

[mihkeleidast]

Hi! AFAIK this is related to an upstream bug in twig.js: twigjs/twig.js#727

You can either:

• not use macros
• use an older version of the adapter that depends on twig.js 1.14.0 or older and pin twig.js at that specific version.

Nothing we can do in Fractal to fix this, unfortunately.

[uandco]

Thanks but the issue seems different here. Also why would that only happen in the docs and not the components themselves? Also the docs start showing highlight JS code... that's not twig doing that by itself.

[uandco]

@mihkeleidast actually it's not related to twig macros at all, but to tabs in the code of the component?

I just made my twig component this:
<div>test</div>

With a tab in front of the opening <div> it renders as highlighted code in the docs:

Without the tab it renders correctly:

My actual component renders as a mix of "correct" and code because the it has tabs at some point. Copy/pasting the twig rendered code and getting rid of the tabs fixes the issue.

Is that the correct behaviour? view or render in docs render the component as source code with syntax highlighting when a new root element is prefixed by tabs?

That seems really odd as this ends up rendering as a mix:

<div>
	this renders correctly
</div>

	<div>
		this renders as highlighted syntax
	</div>

PS: I get the same behaviour when using HBS for components so it's not related to the twig adapter at all

[LeBenLeBen]

The reason this happens is because after being passed through the rendering engine, the template is given to the markdown parser and in Markdown, spaces at the beginning of a line creates a code block.

Twig has a spaceless tag that allows you to remove those spaces and probably work-around this.

[uandco]

Thanks @LeBenLeBen but that's not ideal to have extra twig tags in a design system. What's weird is it didn't do that with Fractal 1.1.7.

[mihkeleidast]

Sorry for leading you in the wrong way in the beginning, usually all my twig render troubles are related to bugs in twig.js.

Looking at v1.1.7...v1.3.0, we've updated our markdown parser (marked) in that time. Maybe the bug slipped in from there? We can try to update marked again to see if the behavior has been changed/fixed. If it hasn't, I'd suggest reporting it for marked, as I'm not sure Fractal does any additional parsing here.

[uandco]

@mihkeleidast no worries. That seems like a good plan, please check if you can get a newer version of marked that fixes the issue you can see in my test repo. Cheers.

[mihkeleidast]

I tested this, and it did not seem like an update fixes this. We may be able to turn of the indentation-to-code-blocks, but that'll be a breaking change for existing users so I don't think we'll be doing this in the near future.

[mel-miller]

@uandco Did you ever find a work around for this? I'm having the same problem.

[uandco]

@mel-miller no, but I haven't really looked at it either since then.

I guess the best solution would be to have another render helper that compresses the HTML code so it has no remaining leading spaces/tabs triggering the code highlighter in Markdown.

[mel-miller]

I'm trying to figure out why this is happening to some blocks of code and not others. I don't have a huge sample size yet, but this only seems to be happening when the base templates (in my case Twig) are multi-line and have a for loop in them.

[mihkeleidast]

If some HTML is indented and has an empty line before it, our markdown parser will convert that to a code block, for example:

some text

    <div>this is now a code block</div>

In your component, your macro ends with a newline:

...
</ul>
{% endmacro %}

These newlines are also visible when viewing the component source in the browser.

To remove the newlines and fix the issue, an inline spaceless helper can be added to the endmacro tag:

...
</ul>
{%- endmacro %}

This will trim the ending newline from the macro output & fix the issue.