Twig - Set twig variables from manifest.json

Question

I'm trying to implement a Webpack environment on my Craft 3 projects. In order to dynamically call my hashed resources I'm outputting the in a manifest.json file and importing it into my template.

manifest.json

{"app":["js/app3bfb132e4187389fccd4.js","css/app53079ca4a05210b4af0c.css"],"vendor":"js/vendor49171fe3f01c19da9296.js"}

index.twig

{% set manifest %}
    {% include './manifest.json' %}
{% endset %}

The output of that variable is a string. Is there anyway to encode it so that the variables are accessible/printable using only Twig? (Using {{ manifest.app }} for example)

Add it with a `filter/function`? See [here](https://docs.craftcms.com/v3/extend/extending-twig.html) — DarkBee, Dec 18 '18 at 18:46
If you want to use the manifest to look up the 'real' filenames, the Symfony/asset component is designed to do that. https://symfony.com/doc/current/components/asset.html#json-file-manifest — Alister Bulman, Dec 18 '18 at 19:26

score 2 · Answer 1 · answered Dec 18 '18 at 18:50

You have to decode the JSON first. I would suggest one of the two approaches:

Create custom manifest function for Twig which will return decoded manifest object
or create json_decode filter for Twig, decode included json content and use it

manifest function

<?php

namespace App\Twig;

class ManifestExtension extends \Twig_Extension
{
    private $manifestFile;

    public function __construct($manifestFile)
    {
        $this->manifestFile = $manifestFile;
    }

    public function getFunctions()
    {
        return array(
            new \Twig_SimpleFunction('manifest', array($this, 'manifest')),
        );
    }

    public function manifest()
    {
        $content = file_get_contents($this->manifestFile);

        return json_decode($content);
    }
}

You can register it as a service in services.yml providing path to the manifest.json file.

App\Twig\ManifestExtension:
    class: 'App\Twig\ManifestExtension'
    arguments: ['%kernel.project_dir%/../public/manifest.json']
    tags: [twig.extension]

Usage:

{% set manifest = manifest() %}

json_decode filter

It's already been covered here:

Decoding JSON in Twig

Usage:

{% set manifest %}
    {% include './manifest.json' %}
{% endset %}

{% set manifest = manifest | json_decode %}

Twig - Set twig variables from manifest.json

1 Answers1