Adding Asset Mapper support + new StimulusBundle

Author: weaverryan

CHANGELOG.md

@@ -1,5 +1,13 @@
 # CHANGELOG
 
+## 2.9.0
+
+-   Replace `symfony/webpack-encore-bundle` by `symfony/stimulus-bundle` in dependencies
+
+-   Add support for symfony/asset-mapper
+
+-   Minimum PHP version is now 8.1
+
 ## 2.7.0
 
 -   Add `assets/src` to `.gitattributes` to exclude source TypeScript files from

assets/package.json

@@ -13,6 +13,10 @@
                 "fetch": "eager",
                 "enabled": true
             }
+        },
+        "importmap": {
+            "@hotwired/stimulus": "^3.0.0",
+            "vue": "^3.0"
         }
     },
     "peerDependencies": {

composer.json

@@ -32,13 +32,14 @@
         }
     },
     "require": {
-        "symfony/webpack-encore-bundle": "^1.11"
+        "php": ">=8.1",
+        "symfony/stimulus-bundle": "^2.9"
     },
     "require-dev": {
-        "symfony/framework-bundle": "^4.4|^5.0|^6.0",
-        "symfony/phpunit-bridge": "^5.2|^6.0",
-        "symfony/twig-bundle": "^4.4|^5.0|^6.0",
-        "symfony/var-dumper": "^4.4|^5.0|^6.0"
+        "symfony/framework-bundle": "^5.4|^6.0",
+        "symfony/phpunit-bridge": "^5.4|^6.0",
+        "symfony/twig-bundle": "^5.4|^6.0",
+        "symfony/var-dumper": "^5.4|^6.0"
     },
     "extra": {
         "thanks": {

src/DependencyInjection/VueExtension.php

@@ -11,8 +11,10 @@
 
 namespace Symfony\UX\Vue\DependencyInjection;
 
+use Symfony\Component\AssetMapper\AssetMapperInterface;
 use Symfony\Component\DependencyInjection\ContainerBuilder;
 use Symfony\Component\DependencyInjection\Definition;
+use Symfony\Component\DependencyInjection\Extension\PrependExtensionInterface;
 use Symfony\Component\DependencyInjection\Reference;
 use Symfony\Component\HttpKernel\DependencyInjection\Extension;
 use Symfony\UX\Vue\Twig\VueComponentExtension;
@@ -23,15 +25,30 @@
  *
  * @internal
  */
-class VueExtension extends Extension
+class VueExtension extends Extension implements PrependExtensionInterface
 {
     public function load(array $configs, ContainerBuilder $container)
     {
         $container
             ->setDefinition('twig.extension.vue', new Definition(VueComponentExtension::class))
-            ->setArgument(0, new Reference('webpack_encore.twig_stimulus_extension'))
+            ->setArgument(0, new Reference('stimulus.helper'))
             ->addTag('twig.extension')
             ->setPublic(false)
         ;
     }
+
+    public function prepend(ContainerBuilder $container)
+    {
+        if (!interface_exists(AssetMapperInterface::class)) {
+            return;
+        }
+
+        $container->prependExtensionConfig('framework', [
+            'asset_mapper' => [
+                'paths' => [
+                    __DIR__.'/../../assets/dist' => '@symfony/ux-vue',
+                ],
+            ],
+        ]);
+    }
 }

src/Twig/VueComponentExtension.php

@@ -11,8 +11,8 @@
 
 namespace Symfony\UX\Vue\Twig;
 
+use Symfony\UX\StimulusBundle\Helper\StimulusHelper;
 use Symfony\WebpackEncoreBundle\Twig\StimulusTwigExtension;
-use Twig\Environment;
 use Twig\Extension\AbstractExtension;
 use Twig\TwigFunction;
 
@@ -24,27 +24,38 @@
  */
 class VueComponentExtension extends AbstractExtension
 {
-    private $stimulusExtension;
+    private $stimulusHelper;
 
-    public function __construct(StimulusTwigExtension $stimulusExtension)
+    /**
+     * @param $stimulus StimulusHelper
+     */
+    public function __construct(StimulusHelper|StimulusTwigExtension $stimulus)
     {
-        $this->stimulusExtension = $stimulusExtension;
+        if ($stimulus instanceof StimulusTwigExtension) {
+            trigger_deprecation('symfony/ux-vue', '2.9', 'Passing an instance of "%s" to "%s" is deprecated, pass an instance of "%s" instead.', StimulusTwigExtension::class, __CLASS__, StimulusHelper::class);
+            $stimulus = new StimulusHelper(null);
+        }
+
+        $this->stimulusHelper = $stimulus;
     }
 
     public function getFunctions(): array
     {
         return [
-            new TwigFunction('vue_component', [$this, 'renderVueComponent'], ['needs_environment' => true, 'is_safe' => ['html_attr']]),
+            new TwigFunction('vue_component', [$this, 'renderVueComponent'], ['is_safe' => ['html_attr']]),
         ];
     }
 
-    public function renderVueComponent(Environment $env, string $componentName, array $props = []): string
+    public function renderVueComponent(string $componentName, array $props = []): string
     {
         $params = ['component' => $componentName];
         if ($props) {
             $params['props'] = $props;
         }
 
-        return $this->stimulusExtension->renderStimulusController($env, '@symfony/ux-vue/vue', $params);
+        $stimulusAttributes = $this->stimulusHelper->createStimulusAttributes();
+        $stimulusAttributes->addController('@symfony/ux-vue/vue', $params);
+
+        return (string) $stimulusAttributes;
     }
 }

tests/Kernel/AppKernelTrait.php

@@ -16,8 +16,8 @@
 use Symfony\Component\Config\Loader\LoaderInterface;
 use Symfony\Component\DependencyInjection\ContainerBuilder;
 use Symfony\Component\HttpKernel\Kernel;
+use Symfony\UX\StimulusBundle\StimulusBundle;
 use Symfony\UX\Vue\VueBundle;
-use Symfony\WebpackEncoreBundle\WebpackEncoreBundle;
 
 /**
  * @author Titouan Galopin <galopintitouan@gmail.com>
@@ -27,22 +27,40 @@
  */
 class TwigAppKernel extends Kernel
 {
-    use AppKernelTrait;
-
     public function registerBundles(): iterable
     {
-        return [new WebpackEncoreBundle(), new FrameworkBundle(), new TwigBundle(), new VueBundle()];
+        return [new StimulusBundle(), new FrameworkBundle(), new TwigBundle(), new VueBundle()];
     }
 
     public function registerContainerConfiguration(LoaderInterface $loader)
     {
         $loader->load(function (ContainerBuilder $container) {
             $container->loadFromExtension('framework', ['secret' => '$ecret', 'test' => true]);
-            $container->loadFromExtension('webpack_encore', ['output_path' => '%kernel.project_dir%/public/build']);
             $container->loadFromExtension('twig', ['default_path' => __DIR__.'/templates', 'strict_variables' => true, 'exception_controller' => null]);
 
             $container->setAlias('test.twig', 'twig')->setPublic(true);
             $container->setAlias('test.twig.extension.vue', 'twig.extension.vue')->setPublic(true);
         });
     }
+
+    public function getCacheDir(): string
+    {
+        return $this->createTmpDir('cache');
+    }
+
+    public function getLogDir(): string
+    {
+        return $this->createTmpDir('logs');
+    }
+
+    private function createTmpDir(string $type): string
+    {
+        $dir = sys_get_temp_dir().'/vue_bundle/'.uniqid($type.'_', true);
+
+        if (!file_exists($dir)) {
+            mkdir($dir, 0777, true);
+        }
+
+        return $dir;
+    }
 }

tests/Kernel/FrameworkAppKernel.php

@@ -32,7 +32,6 @@ public function testRenderComponent()
         $extension = $kernel->getContainer()->get('test.twig.extension.vue');
 
         $rendered = $extension->renderVueComponent(
-            $kernel->getContainer()->get('test.twig'),
             'SubDir/MyComponent',
             ['fullName' => 'Titouan Galopin']
         );
@@ -51,7 +50,7 @@ public function testRenderComponentWithoutProps()
         /** @var VueComponentExtension $extension */
         $extension = $kernel->getContainer()->get('test.twig.extension.vue');
 
-        $rendered = $extension->renderVueComponent($kernel->getContainer()->get('test.twig'), 'SubDir/MyComponent');
+        $rendered = $extension->renderVueComponent('SubDir/MyComponent');
 
         $this->assertSame(
             'data-controller="symfony--ux-vue--vue" data-symfony--ux-vue--vue-component-value="SubDir/MyComponent"',

tests/Kernel/TwigAppKernel.php

@@ -12,8 +12,6 @@
 namespace Symfony\UX\Vue\Tests;
 
 use PHPUnit\Framework\TestCase;
-use Symfony\Component\HttpKernel\Kernel;
-use Symfony\UX\Vue\Tests\Kernel\FrameworkAppKernel;
 use Symfony\UX\Vue\Tests\Kernel\TwigAppKernel;
 
 /**
@@ -24,17 +22,9 @@
  */
 class VueBundleTest extends TestCase
 {
-    public function provideKernels()
-    {
-        yield 'framework' => [new FrameworkAppKernel('test', true)];
-        yield 'twig' => [new TwigAppKernel('test', true)];
-    }
-
-    /**
-     * @dataProvider provideKernels
-     */
-    public function testBootKernel(Kernel $kernel)
+    public function testBootKernel()
     {
+        $kernel = new TwigAppKernel('test', true);
         $kernel->boot();
         $this->assertArrayHasKey('VueBundle', $kernel->getBundles());
     }