survos/tree-bundle

incorporate jstree, using twig and stimulus and api-platform

1.5.529 2025-02-22 14:40 UTC

Requires

• php: ^8.3
• doctrine/doctrine-bundle: ^2.7
• doctrine/orm: ^3.3
• doctrine/persistence: ^2.0 || ^3.0 || ^4.0
• stof/doctrine-extensions-bundle: ^1.8
• survos/core-bundle: ^1.5
• survos/inspection-bundle: ^1.5
• symfony/config: ^6.4 || ^7.1
• symfony/dependency-injection: ^6.4 || ^7.1
• symfony/http-kernel: ^6.4 || ^7.1
• symfony/options-resolver: ^6.4 || ^7.1
• symfony/stimulus-bundle: ^2.21
• symfony/ux-twig-component: ^2.8
• tacman/twig-tree-tag: ^3.0.1
• twig/twig: ^3.4

Requires (Dev)

• api-platform/core: ^4.0
• phpstan/phpstan: ^2.0
• phpunit/phpunit: ^11.4
• symfony/browser-kit: ^6.4 || ^7.1
• symfony/framework-bundle: ^6.4 || ^7.1
• symfony/phpunit-bridge: ^6.4 || ^7.1
• symfony/twig-bundle: ^6.4 || ^7.1
• symfony/var-dumper: ^6.4 || ^7.1

MIT

• Tac Tacelosky

• hierarchical
• symfony-ux

README

Working with hierarchical data can get complex quickly. Fortunately, there are tools to help. This bundle wraps 3 amazing tools together.

• a {% tree %} twig tag for recursively displaying a tree without writing a twig macro Wrapper for jstree using ApiPlatform. Also includes a {% tree %} twig tag.
• A stimulus controller that calls the jstree javascript library
• Some helpers to integrate with ApiPlatform for editing and creating tree nodes.

In addition to the above, the has a dependency on stof/doctrine-extensions-bundle to make doctrine entities hierarchical.

composer req survos/tree-bundle

Tree Tag

The {% tree %} tag works almost like {% for %}, but inside a {% tree %} you can call {% subtree var %} See more details at tacman/tree-tag.

{% tree item in menu %}
  {% if treeloop.first %}<ul>{% endif %}
    <li>
        <a href="{{ item.url }}">{{ item.name }}</a>
        {% subtree item.children %}
    </li>
  {% if treeloop.last %}</ul>{% endif %}
{% endtree %}

symfony new tree-demo --webapp --version=next --php=8.2 && cd tree-demo
composer config minimum-stability dev
composer config extra.symfony.allow-contrib true
composer req symfony/asset-mapper:^6.4 symfony/stimulus-bundle:2.x-dev survos/tree-bundle

bin/console make:controller Tree -i
cat > templates/tree.html.twig <<END
{% extends 'base.html.twig' %}
{% block body %}
    {% set food = [
        {name: 'fruit', children: [
            {name: 'apple', children: [
                {name: 'Granny Smith'},
                {name: 'Gala'},
                {name: 'Fuji'},
            ]},
            {name: 'banana'}
        ]},
        {name: 'veggies', children: [
            {name: 'peas'},
            {name: 'carrots'},
            {name: 'beets'}
        ]},

    ] %}

    <h2>Food Tree</h2>
    {% set _sc = '@survos/tree-bundle/tree' %}
<div {{ stimulus_controller(_sc) }} {{ stimulus_target(_sc, 'html') }}>
    {% tree item in food %}
        {% if treeloop.first %}<ul>{% endif %}
        <li>
            {{ item.name }}
            {% subtree item.children|default([]) %}
        </li>
        {% if treeloop.last %}</ul>{% endif %}
    {% endtree %}
</div>
{% endblock %}

END
symfony server:start -d
symfony open:local --path=/tree

Issue with AutoImport

    "controllers": {
      "tree": {
        "main": "src/controllers/tree_controller.js",
        "webpackMode": "eager",
        "fetch": "lazy",
        "enabled": true,
        "autoimport": {
          "jstree/dist/themes/default/style.min.css": true
        }
      },