feature #102 Adding support for custom attributes on rendered script and link tags (weaverryan)

weaverryan · weaverryan · commit ea80d29e82da · 2021-01-15T11:57:00.000-05:00
This PR was squashed before being merged into the main branch. Discussion ---------- Adding support for custom attributes on rendered script and link tags Fixes #10 - thanks to @dsech for the idea of relying on named Twig arguments (otherwise the new Twig attributes argument is the 4th argument... and rather inconvenient). This can be configured in *3* different ways: ## 1) Globally ``` webpack_encore: # ... script_attributes: defer: true ``` 2) when when using the Twig functions: ```twig {{ encore_entry_script_tags('my_entry', attributes={ defer: true }) }} ``` 3) Via a new `RenderAssetTagEvent` As stated at the bottom of #10 - #10 (comment) - there may be some additional options that would also be nice, but this probably covers the biggest use-case. NOTE: This also drops support for EOL Symfony versions. Cheers! Commits ------- b26cc85 Adding support for custom attributes on rendered script and link tags
diff --git a/.travis.yml b/.travis.yml
@@ -20,7 +20,7 @@ matrix:
           env: deps=low
         - php: 7.4
           env: SYMFONY_PHPUNIT_VERSION=9.4
-        - php: nightly
+        - php: 8.0
           env: SYMFONY_PHPUNIT_VERSION=9.4
 
 before_install:
diff --git a/README.md b/README.md
@@ -24,6 +24,13 @@ webpack_encore:
     output_path: '%kernel.project_dir%/public/build'
     # If multiple builds are defined (as shown below), you can disable the default build:
     # output_path: false
+
+    # Set attributes that will be rendered on all script and link tags
+    # script_attributes:
+    #     defer: true
+    #     referrerpolicy: origin
+    # link_attributes:
+    #     referrerpolicy: origin
     
     # if using Encore.enableIntegrityHashes() and need the crossorigin attribute (default: false, or use 'anonymous' or 'use-credentials')
     # crossorigin: 'anonymous'
@@ -84,6 +91,13 @@ For example, to render all of the `script` and `link` tags for a specific
     {{ parent() }}
 
     {{ encore_entry_script_tags('entry1') }}
+
+    {# or render a custom attribute #}
+    {#
+    {{ encore_entry_script_tags('entry1', attributes={
+        defer: true
+    }) }}
+    #}
 {% endblock %}
 
 {% block stylesheets %}
@@ -144,3 +158,44 @@ class SomeController
 If you have multiple builds, you can also autowire
 `Symfony\WebpackEncoreBundle\Asset\EntrypointLookupCollectionInterface`
 and use it to get the `EntrypointLookupInterface` object for any build.
+
+## Custom Attributes on script and link Tags
+
+Custom attributes can be added to rendered `script` or `link` in 3
+different ways:
+
+1. Via global config (`script_attributes` and `link_attributes`) - see the
+   config example above.
+
+1. When rendering in Twig - see the `attributes` option in the docs above.
+
+1. By listening to the `Symfony\WebpackEncoreBundle\Event\RenderAssetTagEvent`
+   event. For example:
+
+```php
+<?php
+
+namespace App\EventSubscriber;
+
+use Symfony\Component\EventDispatcher\EventSubscriberInterface;
+use Symfony\WebpackEncoreBundle\Event\RenderAssetTagEvent;
+
+class ScriptNonceSubscriber implements EventSubscriberInterface
+{
+    public static function getSubscribedEvents()
+    {
+        return [
+            RenderAssetTagEvent::class => 'onRenderAssetTag'
+        ];
+    }
+
+    public function onRenderAssetTag(RenderAssetTagEvent $event)
+    {
+        if ($event->isScriptTag()) {
+            $event->setAttribute('nonce', 'lookup nonce');
+        }
+    }
+}
+```
+
+Ok, have fun!
diff --git a/composer.json b/composer.json
@@ -22,17 +22,17 @@
     "minimum-stability": "dev",
     "require": {
         "php": ">=7.1.3",
-        "symfony/asset": "^3.4 || ^4.0 || ^5.0",
-        "symfony/config": "^3.4 || ^4.0 || ^5.0",
-        "symfony/dependency-injection": "^3.4 || ^4.0 || ^5.0",
-        "symfony/http-kernel": "^3.4 || ^4.0 || ^5.0",
+        "symfony/asset": "^4.4 || ^5.0",
+        "symfony/config": "^4.4 || ^5.0",
+        "symfony/dependency-injection": "^4.4 || ^5.0",
+        "symfony/http-kernel": "^4.4 || ^5.0",
         "symfony/service-contracts": "^1.0 || ^2.0"
     },
     "require-dev": {
-        "symfony/framework-bundle": "^3.4 || ^4.0 || ^5.0",
-        "symfony/phpunit-bridge": "^4.3.5 || ^5.0",
-        "symfony/twig-bundle": "^3.4 || ^4.0 || ^5.0",
-        "symfony/web-link": "^3.4 || ^4.0 || ^5.0"
+        "symfony/framework-bundle": "^4.4 || ^5.0",
+        "symfony/phpunit-bridge": "^4.4 || ^5.0",
+        "symfony/twig-bundle": "^4.4 || ^5.0",
+        "symfony/web-link": "^4.4 || ^5.0"
     },
     "extra": {
         "thanks": {
diff --git a/src/Asset/TagRenderer.php b/src/Asset/TagRenderer.php
@@ -11,25 +11,31 @@
 
 use Symfony\Component\Asset\Packages;
 use Symfony\Component\DependencyInjection\ServiceLocator;
+use Symfony\Contracts\EventDispatcher\EventDispatcherInterface;
 use Symfony\Contracts\Service\ResetInterface;
+use Symfony\WebpackEncoreBundle\Event\RenderAssetTagEvent;
 
 /**
  * @final
  */
 class TagRenderer implements ResetInterface
 {
     private $entrypointLookupCollection;
-
     private $packages;
-
     private $defaultAttributes;
+    private $defaultScriptAttributes;
+    private $defaultLinkAttributes;
+    private $eventDispatcher;
 
     private $renderedFiles = [];
 
     public function __construct(
         $entrypointLookupCollection,
         Packages $packages,
-        array $defaultAttributes = []
+        array $defaultAttributes = [],
+        array $defaultScriptAttributes = [],
+        array $defaultLinkAttributes = [],
+        EventDispatcherInterface $eventDispatcher = null
     ) {
         if ($entrypointLookupCollection instanceof EntrypointLookupInterface) {
             @trigger_error(sprintf('The "$entrypointLookupCollection" argument in method "%s()" must be an instance of EntrypointLookupCollection.', __METHOD__), E_USER_DEPRECATED);
@@ -47,24 +53,39 @@ public function __construct(
 
         $this->packages = $packages;
         $this->defaultAttributes = $defaultAttributes;
+        $this->defaultScriptAttributes = $defaultScriptAttributes;
+        $this->defaultLinkAttributes = $defaultLinkAttributes;
+        $this->eventDispatcher = $eventDispatcher;
 
         $this->reset();
     }
 
-    public function renderWebpackScriptTags(string $entryName, string $packageName = null, string $entrypointName = '_default'): string
+    public function renderWebpackScriptTags(string $entryName, string $packageName = null, string $entrypointName = null, array $extraAttributes = []): string
     {
+        $entrypointName = $entrypointName ?: '_default';
         $scriptTags = [];
         $entryPointLookup = $this->getEntrypointLookup($entrypointName);
         $integrityHashes = ($entryPointLookup instanceof IntegrityDataProviderInterface) ? $entryPointLookup->getIntegrityData() : [];
 
         foreach ($entryPointLookup->getJavaScriptFiles($entryName) as $filename) {
-            $attributes = $this->defaultAttributes;
+            $attributes = [];
             $attributes['src'] = $this->getAssetPath($filename, $packageName);
+            $attributes = array_merge($attributes, $this->defaultAttributes, $this->defaultScriptAttributes, $extraAttributes);
 
             if (isset($integrityHashes[$filename])) {
                 $attributes['integrity'] = $integrityHashes[$filename];
             }
 
+            $event = new RenderAssetTagEvent(
+                RenderAssetTagEvent::TYPE_SCRIPT,
+                $attributes['src'],
+                $attributes
+            );
+            if (null !== $this->eventDispatcher) {
+                $event = $this->eventDispatcher->dispatch($event);
+            }
+            $attributes = $event->getAttributes();
+
             $scriptTags[] = sprintf(
                 '<script %s></script>',
                 $this->convertArrayToAttributes($attributes)
@@ -76,21 +97,33 @@ public function renderWebpackScriptTags(string $entryName, string $packageName =
         return implode('', $scriptTags);
     }
 
-    public function renderWebpackLinkTags(string $entryName, string $packageName = null, string $entrypointName = '_default'): string
+    public function renderWebpackLinkTags(string $entryName, string $packageName = null, string $entrypointName = null, array $extraAttributes = []): string
     {
+        $entrypointName = $entrypointName ?: '_default';
         $scriptTags = [];
         $entryPointLookup = $this->getEntrypointLookup($entrypointName);
         $integrityHashes = ($entryPointLookup instanceof IntegrityDataProviderInterface) ? $entryPointLookup->getIntegrityData() : [];
 
         foreach ($entryPointLookup->getCssFiles($entryName) as $filename) {
-            $attributes = $this->defaultAttributes;
+            $attributes = [];
             $attributes['rel'] = 'stylesheet';
             $attributes['href'] = $this->getAssetPath($filename, $packageName);
+            $attributes = array_merge($attributes, $this->defaultAttributes, $this->defaultLinkAttributes, $extraAttributes);
 
             if (isset($integrityHashes[$filename])) {
                 $attributes['integrity'] = $integrityHashes[$filename];
             }
 
+            $event = new RenderAssetTagEvent(
+                RenderAssetTagEvent::TYPE_LINK,
+                $attributes['href'],
+                $attributes
+            );
+            if (null !== $this->eventDispatcher) {
+                $this->eventDispatcher->dispatch($event);
+            }
+            $attributes = $event->getAttributes();
+
             $scriptTags[] = sprintf(
                 '<link %s>',
                 $this->convertArrayToAttributes($attributes)
@@ -146,6 +179,10 @@ private function convertArrayToAttributes(array $attributesMap): string
     {
         return implode(' ', array_map(
             function ($key, $value) {
+                // allows for things like defer: true to only render "defer"
+                if ($value === true) {
+                    return $key;
+                }
                 return sprintf('%s="%s"', $key, htmlentities($value));
             },
             array_keys($attributesMap),
diff --git a/src/DependencyInjection/Configuration.php b/src/DependencyInjection/Configuration.php
@@ -55,16 +55,31 @@ public function getConfigTreeBuilder()
                     ->useAttributeAsKey('name')
                     ->normalizeKeys(false)
                     ->scalarPrototype()
-                    ->validate()
+                        ->validate()
                         ->always(function ($values) {
                             if (isset($values['_default'])) {
                                 throw new InvalidDefinitionException("Key '_default' can't be used as build name.");
                             }
 
                             return $values;
                         })
+                        ->end()
                     ->end()
                 ->end()
+                ->arrayNode('script_attributes')
+                    ->info('Key/value pair of attributes to render on all script tags')
+                    ->example('{ defer: true, referrerpolicy: "origin" }')
+                    ->useAttributeAsKey('name')
+                    ->normalizeKeys(false)
+                    ->scalarPrototype()->end()
+                ->end()
+                ->arrayNode('link_attributes')
+                    ->info('Key/value pair of attributes to render on all CSS link tags')
+                    ->example('{ referrerpolicy: "origin" }')
+                    ->useAttributeAsKey('name')
+                    ->normalizeKeys(false)
+                    ->scalarPrototype()->end()
+                ->end()
             ->end()
         ;
 
diff --git a/src/DependencyInjection/WebpackEncoreExtension.php b/src/DependencyInjection/WebpackEncoreExtension.php
@@ -68,7 +68,9 @@ public function load(array $configs, ContainerBuilder $container)
         }
 
         $container->getDefinition('webpack_encore.tag_renderer')
-            ->replaceArgument(2, $defaultAttributes);
+            ->replaceArgument(2, $defaultAttributes)
+            ->replaceArgument(3, $config['script_attributes'])
+            ->replaceArgument(4, $config['link_attributes']);
 
         if ($config['preload']) {
             if (!class_exists(AddLinkHeaderListener::class)) {
diff --git a/src/Event/RenderAssetTagEvent.php b/src/Event/RenderAssetTagEvent.php
@@ -0,0 +1,64 @@
+<?php
+
+/*
+ * This file is part of the Symfony WebpackEncoreBundle package.
+ * (c) Fabien Potencier <fabien@symfony.com>
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+namespace Symfony\WebpackEncoreBundle\Event;
+
+/**
+ * Dispatched each time a script or link tag is rendered.
+ */
+final class RenderAssetTagEvent
+{
+    public const TYPE_SCRIPT = 'script';
+    public const TYPE_LINK = 'link';
+
+    private $type;
+    private $url;
+    private $attributes;
+
+    public function __construct(string $type, string $url, array $attributes)
+    {
+        $this->type = $type;
+        $this->url = $url;
+        $this->attributes = $attributes;
+    }
+
+    public function isScriptTag(): bool
+    {
+        return $this->type === self::TYPE_SCRIPT;
+    }
+
+    public function isLinkTag(): bool
+    {
+        return $this->type === self::TYPE_LINK;
+    }
+
+    public function getUrl(): string
+    {
+        return $this->url;
+    }
+
+    public function getAttributes(): array
+    {
+        return $this->attributes;
+    }
+
+    /**
+     * @param string $name The attribute name
+     * @param string|bool $value Value can be "true" to have an attribute without a value (e.g. "defer")
+     */
+    public function setAttribute(string $name, $value): void
+    {
+        $this->attributes[$name] = $value;
+    }
+
+    public function removeAttribute(string $name): void
+    {
+        unset($this->attributes[$name]);
+    }
+}
diff --git a/src/Resources/config/services.xml b/src/Resources/config/services.xml
@@ -17,7 +17,10 @@
             <tag name="kernel.reset" method="reset" />
             <argument type="service" id="webpack_encore.entrypoint_lookup_collection" />
             <argument type="service" id="assets.packages" />
-            <argument type="collection" />
+            <argument type="collection"/> <!-- Default attributes-->
+            <argument type="collection"/> <!-- Default script attributes -->
+            <argument type="collection"/> <!-- Default link attributes -->
+            <argument type="service" id="event_dispatcher" />
         </service>
 
         <service id="webpack_encore.twig_entry_files_extension" class="Symfony\WebpackEncoreBundle\Twig\EntryFilesTwigExtension">
diff --git a/src/Twig/EntryFilesTwigExtension.php b/src/Twig/EntryFilesTwigExtension.php
@@ -46,16 +46,16 @@ public function getWebpackCssFiles(string $entryName, string $entrypointName = '
             ->getCssFiles($entryName);
     }
 
-    public function renderWebpackScriptTags(string $entryName, string $packageName = null, string $entrypointName = '_default'): string
+    public function renderWebpackScriptTags(string $entryName, string $packageName = null, string $entrypointName = '_default', array $attributes = []): string
     {
         return $this->getTagRenderer()
-            ->renderWebpackScriptTags($entryName, $packageName, $entrypointName);
+            ->renderWebpackScriptTags($entryName, $packageName, $entrypointName, $attributes);
     }
 
-    public function renderWebpackLinkTags(string $entryName, string $packageName = null, string $entrypointName = '_default'): string
+    public function renderWebpackLinkTags(string $entryName, string $packageName = null, string $entrypointName = '_default', array $attributes = []): string
     {
         return $this->getTagRenderer()
-            ->renderWebpackLinkTags($entryName, $packageName, $entrypointName);
+            ->renderWebpackLinkTags($entryName, $packageName, $entrypointName, $attributes);
     }
 
     private function getEntrypointLookup(string $entrypointName): EntrypointLookupInterface
diff --git a/tests/Asset/TagRendererTest.php b/tests/Asset/TagRendererTest.php
diff --git a/tests/IntegrationTest.php b/tests/IntegrationTest.php
diff --git a/tests/fixtures/template.twig b/tests/fixtures/template.twig

Original file line number	Diff line number	Diff line change
`@@ -68,7 +68,9 @@ public function load(array $configs, ContainerBuilder $container)`
`68`	`68`	`}`
`69`	`69`
`70`	`70`	`$container->getDefinition('webpack_encore.tag_renderer')`
`71`		`- ->replaceArgument(2, $defaultAttributes);`
	`71`	`+ ->replaceArgument(2, $defaultAttributes)`
	`72`	`+ ->replaceArgument(3, $config['script_attributes'])`
	`73`	`+ ->replaceArgument(4, $config['link_attributes']);`
`72`	`74`
`73`	`75`	`if ($config['preload']) {`
`74`	`76`	`if (!class_exists(AddLinkHeaderListener::class)) {`
Original file line number	Diff line number	Diff line change
`@@ -46,16 +46,16 @@ public function getWebpackCssFiles(string $entryName, string $entrypointName = '`
`46`	`46`	`->getCssFiles($entryName);`
`47`	`47`	`}`
`48`	`48`
`49`		`- public function renderWebpackScriptTags(string $entryName, string $packageName = null, string $entrypointName = '_default'): string`
	`49`	`+ public function renderWebpackScriptTags(string $entryName, string $packageName = null, string $entrypointName = '_default', array $attributes = []): string`
`50`	`50`	`{`
`51`	`51`	`return $this->getTagRenderer()`
`52`		`- ->renderWebpackScriptTags($entryName, $packageName, $entrypointName);`
	`52`	`+ ->renderWebpackScriptTags($entryName, $packageName, $entrypointName, $attributes);`
`53`	`53`	`}`
`54`	`54`
`55`		`- public function renderWebpackLinkTags(string $entryName, string $packageName = null, string $entrypointName = '_default'): string`
	`55`	`+ public function renderWebpackLinkTags(string $entryName, string $packageName = null, string $entrypointName = '_default', array $attributes = []): string`
`56`	`56`	`{`
`57`	`57`	`return $this->getTagRenderer()`
`58`		`- ->renderWebpackLinkTags($entryName, $packageName, $entrypointName);`
	`58`	`+ ->renderWebpackLinkTags($entryName, $packageName, $entrypointName, $attributes);`
`59`	`59`	`}`
`60`	`60`
`61`	`61`	`private function getEntrypointLookup(string $entrypointName): EntrypointLookupInterface`