feature #177 [Chartjs] Rely on Stimulus values instead of custom attributes (tgalopin)

This PR was merged into the main branch.

Discussion
----------

[Chartjs] Rely on Stimulus values instead of custom attributes

| Q             | A
| ------------- | ---
| Bug fix?      | no
| New feature?  | no
| Tickets       | -
| License       | MIT

In preparation of Symfony UX 2.0, this PR replaces the usage of custom attributes by Stimulus values. It also add Webpack Encore as an optional dependency to leverage the `stimulus_controller` helper it provides in the Twig extension.

Commits
-------

ebeaedb [Chartjs] Rely on Stimulus values instead of custom attributes

Author: weaverryan

src/Chartjs/DependencyInjection/ChartjsExtension.php

@@ -13,10 +13,12 @@
 
 use Symfony\Component\DependencyInjection\ContainerBuilder;
 use Symfony\Component\DependencyInjection\Definition;
+use Symfony\Component\DependencyInjection\Reference;
 use Symfony\Component\HttpKernel\DependencyInjection\Extension;
 use Symfony\UX\Chartjs\Builder\ChartBuilder;
 use Symfony\UX\Chartjs\Builder\ChartBuilderInterface;
 use Symfony\UX\Chartjs\Twig\ChartExtension;
+use Symfony\WebpackEncoreBundle\Twig\StimulusTwigExtension;
 use Twig\Environment;
 
 /**
@@ -38,9 +40,10 @@ public function load(array $configs, ContainerBuilder $container)
             ->setPublic(false)
         ;
 
-        if (class_exists(Environment::class)) {
+        if (class_exists(Environment::class) && class_exists(StimulusTwigExtension::class)) {
             $container
                 ->setDefinition('chartjs.twig_extension', new Definition(ChartExtension::class))
+                ->addArgument(new Reference('webpack_encore.twig_stimulus_extension'))
                 ->addTag('twig.extension')
                 ->setPublic(false)
             ;

src/Chartjs/README.md

@@ -68,7 +68,8 @@ class HomeController extends AbstractController
 All options and data are provided as-is to Chart.js. You can read
 [Chart.js documentation](https://www.chartjs.org/docs/latest/) to discover them all.
 
-Once created in PHP, a chart can be displayed using Twig:
+Once created in PHP, a chart can be displayed using Twig if installed
+(requires [Symfony Webpack Encore](https://symfony.com/doc/current/frontend/encore/installation.html)):
 
 ```twig
 {{ render_chart(chart) }}

src/Chartjs/Resources/assets/src/controller.ts

@@ -13,17 +13,16 @@ import { Controller } from '@hotwired/stimulus';
 import { Chart } from 'chart.js';
 
 export default class extends Controller {
+    static values = {
+        view: Object,
+    };
+
     connect() {
         if (!(this.element instanceof HTMLCanvasElement)) {
             throw new Error('Invalid element');
         }
 
-        const viewData = this.element.getAttribute('data-view');
-        if (!viewData) {
-            throw new Error('Missing data-view attribute.');
-        }
-
-        const payload = JSON.parse(viewData);
+        const payload = this.viewValue;
         if (Array.isArray(payload.options) && 0 === payload.options.length) {
             payload.options = {};
         }

src/Chartjs/Resources/assets/test/controller.test.ts

@@ -46,7 +46,7 @@ describe('ChartjsController', () => {
             <canvas
                 data-testid="canvas"
                 data-controller="check chartjs"
-                data-view="&#x7B;&quot;type&quot;&#x3A;&quot;line&quot;,&quot;data&quot;&#x3A;&#x7B;&quot;labels&quot;&#x3A;&#x5B;&quot;January&quot;,&quot;February&quot;,&quot;March&quot;,&quot;April&quot;,&quot;May&quot;,&quot;June&quot;,&quot;July&quot;&#x5D;,&quot;datasets&quot;&#x3A;&#x5B;&#x7B;&quot;label&quot;&#x3A;&quot;My&#x20;First&#x20;dataset&quot;,&quot;backgroundColor&quot;&#x3A;&quot;rgb&#x28;255,&#x20;99,&#x20;132&#x29;&quot;,&quot;borderColor&quot;&#x3A;&quot;rgb&#x28;255,&#x20;99,&#x20;132&#x29;&quot;,&quot;data&quot;&#x3A;&#x5B;0,10,5,2,20,30,45&#x5D;&#x7D;&#x5D;&#x7D;,&quot;options&quot;&#x3A;&#x5B;&#x5D;&#x7D;"
+                data-chartjs-view-value="&#x7B;&quot;type&quot;&#x3A;&quot;line&quot;,&quot;data&quot;&#x3A;&#x7B;&quot;labels&quot;&#x3A;&#x5B;&quot;January&quot;,&quot;February&quot;,&quot;March&quot;,&quot;April&quot;,&quot;May&quot;,&quot;June&quot;,&quot;July&quot;&#x5D;,&quot;datasets&quot;&#x3A;&#x5B;&#x7B;&quot;label&quot;&#x3A;&quot;My&#x20;First&#x20;dataset&quot;,&quot;backgroundColor&quot;&#x3A;&quot;rgb&#x28;255,&#x20;99,&#x20;132&#x29;&quot;,&quot;borderColor&quot;&#x3A;&quot;rgb&#x28;255,&#x20;99,&#x20;132&#x29;&quot;,&quot;data&quot;&#x3A;&#x5B;0,10,5,2,20,30,45&#x5D;&#x7D;&#x5D;&#x7D;,&quot;options&quot;&#x3A;&#x5B;&#x5D;&#x7D;"
             ></canvas>
         `);
 
@@ -68,7 +68,7 @@ describe('ChartjsController', () => {
             <canvas
                 data-testid="canvas"
                 data-controller="check chartjs"
-                data-view="&#x7B;&quot;type&quot;&#x3A;&quot;line&quot;,&quot;data&quot;&#x3A;&#x7B;&quot;labels&quot;&#x3A;&#x5B;&quot;January&quot;,&quot;February&quot;,&quot;March&quot;,&quot;April&quot;,&quot;May&quot;,&quot;June&quot;,&quot;July&quot;&#x5D;,&quot;datasets&quot;&#x3A;&#x5B;&#x7B;&quot;label&quot;&#x3A;&quot;My&#x20;First&#x20;dataset&quot;,&quot;backgroundColor&quot;&#x3A;&quot;rgb&#x28;255,&#x20;99,&#x20;132&#x29;&quot;,&quot;borderColor&quot;&#x3A;&quot;rgb&#x28;255,&#x20;99,&#x20;132&#x29;&quot;,&quot;data&quot;&#x3A;&#x5B;0,10,5,2,20,30,45&#x5D;&#x7D;&#x5D;&#x7D;,&quot;options&quot;&#x3A;&#x7B;&quot;showLines&quot;&#x3A;false&#x7D;&#x7D;"
+                data-chartjs-view-value="&#x7B;&quot;type&quot;&#x3A;&quot;line&quot;,&quot;data&quot;&#x3A;&#x7B;&quot;labels&quot;&#x3A;&#x5B;&quot;January&quot;,&quot;February&quot;,&quot;March&quot;,&quot;April&quot;,&quot;May&quot;,&quot;June&quot;,&quot;July&quot;&#x5D;,&quot;datasets&quot;&#x3A;&#x5B;&#x7B;&quot;label&quot;&#x3A;&quot;My&#x20;First&#x20;dataset&quot;,&quot;backgroundColor&quot;&#x3A;&quot;rgb&#x28;255,&#x20;99,&#x20;132&#x29;&quot;,&quot;borderColor&quot;&#x3A;&quot;rgb&#x28;255,&#x20;99,&#x20;132&#x29;&quot;,&quot;data&quot;&#x3A;&#x5B;0,10,5,2,20,30,45&#x5D;&#x7D;&#x5D;&#x7D;,&quot;options&quot;&#x3A;&#x7B;&quot;showLines&quot;&#x3A;false&#x7D;&#x7D;"
             ></canvas>
         `);
 

src/Chartjs/Tests/Kernel/TwigAppKernel.php

@@ -17,6 +17,7 @@
 use Symfony\Component\DependencyInjection\ContainerBuilder;
 use Symfony\Component\HttpKernel\Kernel;
 use Symfony\UX\Chartjs\ChartjsBundle;
+use Symfony\WebpackEncoreBundle\WebpackEncoreBundle;
 
 /**
  * @author Titouan Galopin <[email protected]>
@@ -29,14 +30,15 @@ class TwigAppKernel extends Kernel
 
     public function registerBundles(): iterable
     {
-        return [new FrameworkBundle(), new TwigBundle(), new ChartjsBundle()];
+        return [new FrameworkBundle(), new TwigBundle(), new WebpackEncoreBundle(), new ChartjsBundle()];
     }
 
     public function registerContainerConfiguration(LoaderInterface $loader)
     {
         $loader->load(function (ContainerBuilder $container) {
             $container->loadFromExtension('framework', ['secret' => '$ecret', 'test' => true]);
             $container->loadFromExtension('twig', ['default_path' => __DIR__.'/templates', 'strict_variables' => true, 'exception_controller' => null]);
+            $container->loadFromExtension('webpack_encore', ['output_path' => '%kernel.project_dir%/public/build']);
 
             $container->setAlias('test.chartjs.builder', 'chartjs.builder')->setPublic(true);
             $container->setAlias('test.chartjs.twig_extension', 'chartjs.twig_extension')->setPublic(true);

src/Chartjs/Tests/Twig/ChartExtensionTest.php

@@ -58,10 +58,7 @@ public function testRenderChart()
         );
 
         $this->assertSame(
-            '<canvas
-                data-controller="mycontroller symfony--ux-chartjs--chart"
-                data-view="&#x7B;&quot;type&quot;&#x3A;&quot;line&quot;,&quot;data&quot;&#x3A;&#x7B;&quot;labels&quot;&#x3A;&#x5B;&quot;January&quot;,&quot;February&quot;,&quot;March&quot;,&quot;April&quot;,&quot;May&quot;,&quot;June&quot;,&quot;July&quot;&#x5D;,&quot;datasets&quot;&#x3A;&#x5B;&#x7B;&quot;label&quot;&#x3A;&quot;My&#x20;First&#x20;dataset&quot;,&quot;backgroundColor&quot;&#x3A;&quot;rgb&#x28;255,&#x20;99,&#x20;132&#x29;&quot;,&quot;borderColor&quot;&#x3A;&quot;rgb&#x28;255,&#x20;99,&#x20;132&#x29;&quot;,&quot;data&quot;&#x3A;&#x5B;0,10,5,2,20,30,45&#x5D;&#x7D;&#x5D;&#x7D;,&quot;options&quot;&#x3A;&#x7B;&quot;showLines&quot;&#x3A;false&#x7D;&#x7D;"
-        class="myclass"></canvas>',
+            '<canvas data-controller="mycontroller symfony--ux-chartjs--chart" data-symfony--ux-chartjs--chart-view-value="&#x7B;&quot;type&quot;&#x3A;&quot;line&quot;,&quot;data&quot;&#x3A;&#x7B;&quot;labels&quot;&#x3A;&#x5B;&quot;January&quot;,&quot;February&quot;,&quot;March&quot;,&quot;April&quot;,&quot;May&quot;,&quot;June&quot;,&quot;July&quot;&#x5D;,&quot;datasets&quot;&#x3A;&#x5B;&#x7B;&quot;label&quot;&#x3A;&quot;My&#x20;First&#x20;dataset&quot;,&quot;backgroundColor&quot;&#x3A;&quot;rgb&#x28;255,&#x20;99,&#x20;132&#x29;&quot;,&quot;borderColor&quot;&#x3A;&quot;rgb&#x28;255,&#x20;99,&#x20;132&#x29;&quot;,&quot;data&quot;&#x3A;&#x5B;0,10,5,2,20,30,45&#x5D;&#x7D;&#x5D;&#x7D;,&quot;options&quot;&#x3A;&#x7B;&quot;showLines&quot;&#x3A;false&#x7D;&#x7D;" class="myclass"></canvas>',
             $rendered
         );
     }

src/Chartjs/Twig/ChartExtension.php

@@ -12,6 +12,7 @@
 namespace Symfony\UX\Chartjs\Twig;
 
 use Symfony\UX\Chartjs\Model\Chart;
+use Symfony\WebpackEncoreBundle\Twig\StimulusTwigExtension;
 use Twig\Environment;
 use Twig\Extension\AbstractExtension;
 use Twig\TwigFunction;
@@ -24,6 +25,13 @@
  */
 class ChartExtension extends AbstractExtension
 {
+    private $stimulus;
+
+    public function __construct(StimulusTwigExtension $stimulus)
+    {
+        $this->stimulus = $stimulus;
+    }
+
     public function getFunctions(): array
     {
         return [
@@ -35,11 +43,13 @@ public function renderChart(Environment $env, Chart $chart, array $attributes =
     {
         $chart->setAttributes(array_merge($chart->getAttributes(), $attributes));
 
-        $html = '
-            <canvas
-                data-controller="'.trim($chart->getDataController().' symfony--ux-chartjs--chart').'"
-                data-view="'.twig_escape_filter($env, json_encode($chart->createView()), 'html_attr').'"
-        ';
+        $controllers = [];
+        if ($chart->getDataController()) {
+            $controllers[$chart->getDataController()] = [];
+        }
+        $controllers['@symfony/ux-chartjs/chart'] = ['view' => $chart->createView()];
+
+        $html = '<canvas '.$this->stimulus->renderStimulusController($env, $controllers).' ';
 
         foreach ($chart->getAttributes() as $name => $value) {
             if ('data-controller' === $name) {

src/Chartjs/composer.json

@@ -35,10 +35,12 @@
         "symfony/framework-bundle": "^4.4.17|^5.0|^6.0",
         "symfony/phpunit-bridge": "^5.2|^6.0",
         "symfony/twig-bundle": "^4.4.17|^5.0|^6.0",
-        "symfony/var-dumper": "^4.4.17|^5.0|^6.0"
+        "symfony/var-dumper": "^4.4.17|^5.0|^6.0",
+        "symfony/webpack-encore-bundle": "^1.11"
     },
     "conflict": {
-        "symfony/flex": "<1.13"
+        "symfony/flex": "<1.13",
+        "symfony/webpack-encore-bundle": "<1.11"
     },
     "extra": {
         "branch-alias": {