frctl / twig Goto Github PK

Hi @Chapabu ,

I think we need a version bump and npm publish to ensure the fix for #13 is propagated to the registry. Currently, v. 1.0.0-beta.4 still resolves to https://registry.npmjs.org/@frctl/twig/-/twig-1.0.0-beta.4.tgz which is the broken version.

From package-lock.json

    "@frctl/twig": {
      "version": "1.0.0-beta.4",
      "resolved": "https://registry.npmjs.org/@frctl/twig/-/twig-1.0.0-beta.4.tgz",
      "integrity": "sha512-TyP0GOAZQdzYn1Wgy+rfPjFwCWzgWXstRmtMwdBrPFxL4dikPLCShQCralEUCduuini9DQLEsLeUHdeK1F7Cyg==",
      "dev": true,
      "requires": {
        "lodash": "^4.17.10",
        "twig": "^1.12.0"
      }

Thanks!

Currently, when installing @frctl/twig, it also installs twig.js 1.14.0. However, with that update, all uses of the render tag are broken.

For example, when trying to render this template:

<div class="b">
    {% render '@a' %}
</div>

rendering fails with an error:

ERROR RENDERING COMPONENT
TypeError: this.importFile is not a function

(PR incoming)

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?

So I don't know if this even works in Twig.js itself, but honestly Fractal could implement it for the Twig handler regardless? You should be able to pass an array to {% include %}, and Twig should stop at the first template it finds. So for instance:

{% include ['@site-mobile-nav', 'site-mobile-nav/site-mobile-nav.twig'] %}

Should render the @site-mobile-nav component inside Fractal (and site-mobile-nav/site-mobile-nav.twig anywhere else I copy the Twig template to.) Currently it throws an error.

slider.twig

<div class="slider">
<ul class="slider-list">
{% block slides %}
{% for item in items %}
<li class="slider-item">{{item}}
{% endfor %}
{% endblock %}
</ul>
</div>

carousel.twg

{% embed '@slider' with {items: slider.items} %}
{% block slides %}
{% for item in items %}
<li class="slider-item">{{item}}
{% endfor %}
{% endblock %}
{% endembed %}

slider.items is an array with objects like this:

slider: {
  items: [
    {
      ...
    }
  ]
}

I found no solution for this.

Hi @allmarkedup. When installing this adapter via npm, the alpha.0 release is installed (1.0.0-alpha.0 is the latest of 5 releases) which doesn't work with v1.1.4. When I manually installed beta.1, everything worked fine. Think you just need to publish the npm package to make sure it's updated. Thanks

https://www.npmjs.com/package/@frctl/twig

Hi there!

The version of twig.js used here (^0.9.5) contains annoying bugs (twigjs/twig.js#386) fixed in more recent versions. Could you please update it or declare it as a peer dependency so that we can use the version we want?

Thanks!

I have this error whenever I try to create a new preview layout for a group of components

Here's the scaffolding

├── components/
│   ├── 04-pages/
│   │   ├── home/
│   │   ├── _preview.twig
│   │   └── pages.config.js
│   └── _preview.twig

and here's the pages.config.js file

// pages.config.js
module.exports = {
  prefix: 'page',
  preview: 'fractal/components/04-pages/_preview.twig',
};

Getting TwigException: Unable to parse 'include '@page-link' with link' and similar whenever I try to include another template, since the latest round of updates.

Potential answer seems to be here, to do with new namespacing rules in twig.js, but I've tried the solutions in that comment thread and can't figure it out.

Setting the fractal.docs.engine(twigAdapter); work as expected for markdown files located in the folder defined by fractal.docs.set('path', ...);, but it seem to break the note panel / note templating engine for a component with a readme.md (https://fractal.build/guide/components/notes.html#the-readme-md-file)

It still break even if I simply use plain text, nothing related to twig.
The error only occurs on component with a readme.md file.

And this is the error in question :

 (C:\projects\_internal\frontend-structure\_frontend\node_modules\@frctl\mandelbrot\views\pages\components\detail.nunj)
  Template render error: (C:\projects\_internal\frontend-structure\_frontend\node_modules\@frctl\mandelbrot\views\partials\pen\browser.nunj)
  Template render error: (C:\projects\_internal\frontend-structure\_frontend\node_modules\@frctl\mandelbrot\views\partials\browser\browser.nunj)
  Template render error: (C:\projects\_internal\frontend-structure\_frontend\node_modules\@frctl\mandelbrot\views\partials\browser\panel-notes.nunj)
  TypeError: The "to" argument must be of type string. Received type object

Pulled this one out from #25

when registering the adapter like this:

const twigAdapter = require('@frctl/twig')({
    handlePrefix: '%',
});

{% render '%icon' with { text: 'helloworld' } %}

fails with error Error: You must provide a valid component handle to the render tag.

{% include '%icon' with { text: 'helloworld' } %} works fine.

The twig adapter has no implementation for the render function. Would be awesome if you can add this.

E.g. the render function of the Handlebars adapter:
https://github.com/frctl/handlebars/blob/master/src/helpers/render.js

Related issue: frctl/fractal#126

Very minor "bug" here I guess.
Using 1.0.0-beta.2 and @frctl/fractal 1.1.7, with this config:

const fractal = module.exports = require('@frctl/fractal').create();
fractal.components.engine(require('@frctl/twig')());
fractal.components.set('ext', '.twig');

Twig templates are working alright, but the _config.components.engine value is still set to "@frctl/handlebars":

{{ dump(_config.components.engine) }}
{# string(17) "@frctl/handlebars" #}

Instead if I use this config, the value will be correct:

const fractal = module.exports = require('@frctl/fractal').create();
fractal.components.set('engine', '@frctl/twig');
fractal.components.set('ext', '.twig');

It's well-supported and it would be very helpful! https://github.com/ianbytchek/twig-js-markdown
It uses the marked parser, which is already included by Fractal, so it should be pretty trivial.

I'm not sure if this happens all the time, but if you have nested components with paths passed to the | path filter, then it triggers the following error:

Error: TypeError: Cannot read property 'request' of undefined
    at /PATH/TO/FRACTAL/PROJECT/node_modules/@frctl/twig/src/adapter.js:158:24
    at new Promise ()
    at TwigAdapter.render (/PATH/TO/FRACTAL/PROJECT/node_modules/@frctl/twig/src/adapter.js:144:16)
    at ComponentSource._renderVariant (/PATH/TO/FRACTAL/PROJECT/node_modules/@frctl/fractal/src/api/components/source.js:207:30)
    at _renderVariant.next ()
    at onFulfilled (/PATH/TO/FRACTAL/PROJECT/node_modules/co/index.js:65:19)
    at tryCatcher (/PATH/TO/FRACTAL/PROJECT/node_modules/bluebird/js/release/util.js:16:23)
    at Promise._settlePromiseFromHandler (/PATH/TO/FRACTAL/PROJECT/node_modules/bluebird/js/release/promise.js:512:31)
    at Promise._settlePromise (/PATH/TO/FRACTAL/PROJECT/node_modules/bluebird/js/release/promise.js:569:18)
    at Promise._settlePromise0 (/PATH/TO/FRACTAL/PROJECT/node_modules/bluebird/js/release/promise.js:614:10)
    at Promise._settlePromises (/PATH/TO/FRACTAL/PROJECT/node_modules/bluebird/js/release/promise.js:694:18)
    at Promise._fulfill (/PATH/TO/FRACTAL/PROJECT/node_modules/bluebird/js/release/promise.js:638:18)
    at Promise._resolveCallback (/PATH/TO/FRACTAL/PROJECT/node_modules/bluebird/js/release/promise.js:432:57)
    at Promise._settlePromiseFromHandler (/PATH/TO/FRACTAL/PROJECT/node_modules/bluebird/js/release/promise.js:524:17)
    at Promise._settlePromise (/PATH/TO/FRACTAL/PROJECT/node_modules/bluebird/js/release/promise.js:569:18)
    at Promise._settlePromise0 (/PATH/TO/FRACTAL/PROJECT/node_modules/bluebird/js/release/promise.js:614:10)

Browsing through, the error looks to be coming from https://github.com/frctl/twig/blob/master/src/filters/path.js#L10-L11. We check for validity of the env object, but we're checking too late as we're using it on the line directly prior to the safety check.

Hopefully this is as quick as adding an extra check in place.

This is a follow-up issue from my comment here.

I would like to include a Twig file within the node_modules folder from a components Twig file. This doesn't work currently, because node_modules is located outside the configured components directory.

I've already experiemented with the base option and with Twig namespaces (#25), but unfortunately nothing worked. Base only seems to be a base within the components directory, so it's relative to it and can't be an absolute path. The same applies for Twig namespaces. Using the root directory of the project as component directory won't work, as it would also check all the node_modules whether they are components to show in the library – which takes years.

The reason why I need this? Because I'm building a shared frontend components library that we can re-use in all customer projects. You can import and directly export the fractal.js file of this components library that was included as dependency using npm successfully like described in the Fractal docs. But then you can't extend this library or just show some of the components.

Therefore I've decided to embed the shared components library as npm dependency and import JS/CSS/Twig files individually, so I have to re-create all components that I want to show in a customer project. For JS/CSS it's fine to import files from node_modules, but Twig is the show stopper currently.

Hi Tnottu

Is there a specific reason for the console.log in the 'Custom loader for @component reference handles' ?
adapter.js, line 28

Can we remove this or add a settings option to prevent it?
I feel it really clutters up the console output during the build process.

I'm happy to make a pull request!

Bart

Docs need updating with usage info, and correct fractal version

In native Twig an exception will be thrown by default when calling an undefined variable. In Twig.js, we have to set this explicitly. However, if you pass strict_variables: false to this adapter, it'll not forward it to Twig.js.

Hi I am trying to build a site in Metalsmith using Fractal, I have been previously using Handlebars for templating but was wanting to use Twig this time using the twig adapter but when I go to build Metalsmith I get the following:

Error parsing twig template /Users/custa/markjohnstonxd/fractal/design/templates/page/page.twig:
Error: ENOENT: no such file or directory, stat '@navigation'
    at Error (native)
    at Object.fs.statSync (fs.js:844:18)
    at Object.<anonymous> (/Users/custa/markjohnstonxd/node_modules/twig/twig.min.js:8:20427)
    at Object.Twig.Templates.loadRemote (/Users/custa/markjohnstonxd/node_modules/twig/twig.min.js:8:15035)
    at Twig.Template.importFile (/Users/custa/markjohnstonxd/node_modules/twig/twig.min.js:8:17280)
    at Twig.logic.definitions.parse (/Users/custa/markjohnstonxd/node_modules/twig/twig.min.js:9:15049)
    at Twig.logic.parse (/Users/custa/markjohnstonxd/node_modules/twig/twig.min.js:9:21671)
    at parseToken (/Users/custa/markjohnstonxd/node_modules/twig/twig.min.js:8:11471)
    at Array.forEach (native)
    at Object.Twig.forEach (/Users/custa/markjohnstonxd/node_modules/twig/twig.min.js:8:822)
buffer.js:138
    throw new TypeError('must start with number, buffer, array or string');
    ^

TypeError: must start with number, buffer, array or string
    at fromObject (buffer.js:138:11)
    at new Buffer (buffer.js:65:10)
    at twig.load (/Users/custa/markjohnstonxd/node_modules/metalsmith-twig/lib/index.js:45:22)
    at loadTemplateFn (/Users/custa/markjohnstonxd/node_modules/twig/twig.min.js:8:20154)
    at FSReqWrap.readFileAfterClose [as oncomplete] (fs.js:380:3)

In my Twig template I have the following :

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>{{ title }} - {{metadata.sitename}}</title>
    <meta name="description" content="{{ description }}">
  </head>
  <body>
    <div class="header">
        {% include '@navigation' %}
        {% block header %}

        {% endblock %}
    </div>
    <div class="body">
        {% block body %}

        {% endblock %}
    </div>
    <div class="footer">
        {% block footer %}

        {% endblock %}
        
    </div>
  </body>
</html>

If you have the docs engine set to Twig, you only ever get an error saying entity.variants is not a function. I've tracked this down to line 68 in adapter.js.

entity = entity.isVariant ? entity : entity.variants().default();

A document is not a variant, so the second part is called. but variants() is not a method on a document object.

Just needs an if (entity.isDoc) wrapping around that somewhere so we don't hit that second part for documents.

I'm using this Twig handler to easily reference templates from within a backend Twig template. Therefore I have to also simulate the @component handle and render as an alternative to include. Is someone of you familiar with a way to achieve this?

When dumping

{{ dump(_self) }}

in the main component I'm receiving a lot of information including _self.title. However, when including the same component, just with a different variant (e.g. video--autoplay) using the render helper, then _self will only contain

  [lang]=> 
  string(4) "Twig"
  [editorMode]=> 
  string(4) "twig"
  [editorScope]=> 
  string(14) "text.html.twig"

in the nested call. So I can e.g. no longer check the variant name.

so... I have a component that has its context defined in its config file. When viewing the component it shows as expected.

i've now created a collection page and used the "render" tag to show this component, working as expected.

I've now used "with" on the render tag to override some of the context on this collection page, and this works as expected, now my issue is that when i go back a view the component page it is now showing the context from the collection page, not what is defined in the component config context.

Using

fractal.components.set('ext', '.html.twig');

will always create a "HTML" variant for each component:

Here's my use case: I want a Fractal instance to be a component library for a Symfony project. I would like to use the same Twig templates in the Symfony codebase and in the Fractal codebase.

My problem is Fractal has a very opinionated way of including templates. You don't use a filesystem path, like PHP Twig does, instead you use a Fractal handle. If I had this directory structure:

└── components
    └── button
        └── button.twig

To include the button component, I would have to do:

{% include '@button' %}

but I want to configure Fractal to include it like:

{% include 'button/button.twig %}

so that I could use the same templates with an instance of PHP Twig.

I could get around this by making a custom Twig Loader for PHP Twig, like what these guys did for Drupal 8. But I'd rather not have to introduce this complexity and requirement for using this component library. And this seems like a fairly common use case for PHP devs. Is there any way around this? Could the Twig adapter be extended to handle this use case?