Issue #2398331 by cilefen, davidhernandez, Wim Leers, nod_: Add the ability to attach asset libraries directly from a template file

core/core.services.yml

@@ -1290,6 +1290,7 @@ services:
       - { name: service_collector, tag: 'twig.extension', call: addExtension }
   twig.extension:
     class: Drupal\Core\Template\TwigExtension
+    arguments: ['@renderer']
     tags:
       - { name: twig.extension, priority: 100 }
     calls:

core/lib/Drupal/Core/Template/TwigExtension.php

@@ -12,6 +12,7 @@
 
 namespace Drupal\Core\Template;
 
+use Drupal\Core\Render\RendererInterface;
 use Drupal\Core\Routing\UrlGeneratorInterface;
 use Drupal\Core\Url;
 use Drupal\Core\Utility\LinkGeneratorInterface;
@@ -39,11 +40,30 @@ class TwigExtension extends \Twig_Extension {
    */
   protected $linkGenerator;
 
+  /**
+   * The renderer.
+   *
+   * @var \Drupal\Core\Render\RendererInterface
+   */
+  protected $renderer;
+
   /**
    * Constructs \Drupal\Core\Template\TwigExtension.
    *
+   * @param \Drupal\Core\Render\RendererInterface $renderer
+   *   The renderer.
+   */
+  public function __construct(RendererInterface $renderer) {
+    $this->renderer = $renderer;
+  }
+
+  /**
+   * Sets the URL generator.
+   *
    * @param \Drupal\Core\Routing\UrlGeneratorInterface $url_generator
    *   The URL generator.
+   *
+   * @return $this
    */
   public function setGenerators(UrlGeneratorInterface $url_generator) {
     $this->urlGenerator = $url_generator;
@@ -77,6 +97,7 @@ class TwigExtension extends \Twig_Extension {
       new \Twig_SimpleFunction('url_from_path', array($this, 'getUrlFromPath'), array('is_safe_callback' => array($this, 'isUrlGenerationSafe'))),
       new \Twig_SimpleFunction('link', array($this, 'getLink')),
       new \Twig_SimpleFunction('file_url', 'file_create_url'),
+      new \Twig_SimpleFunction('attach_library', array($this, 'attachLibrary'))
     );
   }
 
@@ -257,4 +278,22 @@ class TwigExtension extends \Twig_Extension {
     return array();
   }
 
+  /**
+   * Attaches an asset library to the template, and hence to the response.
+   *
+   * Allows Twig templates to attach asset libraries using
+   * @code
+   * {{ attach_library('extension/library_name') }}
+   * @endcode
+   *
+   * @param string $library
+   *   An asset library.
+   */
+  public function attachLibrary($library) {
+    // Use Renderer::render() on a temporary render array to get additional
+    // bubbleable metadata on the render stack.
+    $template_attached = ['#attached' => ['library' => [$library]]];
+    $this->renderer->render($template_attached);
+  }
+
 }

core/modules/system/src/Tests/Theme/EngineTwigTest.php

@@ -111,4 +111,12 @@ class EngineTwigTest extends WebTestBase {
     $this->assertRaw('<div>file_url: ' . $filepath . '</div>');
   }
 
+  /**
+   * Tests the attach of asset libraries.
+   */
+  public function testTwigAttachLibrary() {
+    $this->drupalGet('/twig-theme-test/attach-library');
+    $this->assertRaw('ckeditor.js');
+  }
+
 }

core/modules/system/tests/modules/twig_extension_test/twig_extension_test.services.yml

@@ -1,5 +1,6 @@
 services:
   twig_extension_test.twig.test_extension:
+    arguments: ['@renderer']
     class: Drupal\twig_extension_test\TwigExtension\TestExtension
     tags:
       - { name: twig.extension }

core/modules/system/tests/modules/twig_theme_test/src/TwigThemeTestController.php

@@ -68,6 +68,15 @@ class TwigThemeTestController {
     );
   }
 
+  /**
+   * Renders for testing attach_library functions in a Twig template.
+   */
+  public function attachLibraryRender() {
+    return array(
+      '#theme' => 'twig_theme_test_attach_library',
+    );
+  }
+
   /**
    * Menu callback for testing the Twig registry loader.
    */

core/modules/system/tests/modules/twig_theme_test/templates/twig_theme_test.attach_library.html.twig

@@ -0,0 +1 @@
+{{ attach_library('core/ckeditor') }}

core/modules/system/tests/modules/twig_theme_test/twig_theme_test.module

@@ -50,6 +50,10 @@ function twig_theme_test_theme($existing, $type, $theme, $path) {
     'variables' => array(),
     'template' => 'twig_theme_test.file_url',
   );
+  $items['twig_theme_test_attach_library'] = array(
+    'variables' => array(),
+    'template' => 'twig_theme_test.attach_library',
+  );
   return $items;
 }
 

core/modules/system/tests/modules/twig_theme_test/twig_theme_test.routing.yml

@@ -40,6 +40,13 @@ twig_theme_test_file_url:
   requirements:
     _access: 'TRUE'
 
+twig_theme_test_attach_library:
+  path: '/twig-theme-test/attach-library'
+  defaults:
+    _controller: '\Drupal\twig_theme_test\TwigThemeTestController::attachLibraryRender'
+  requirements:
+    _access: 'TRUE'
+
 twig_theme_test_registry_loader:
   path: '/twig-theme-test/registry-loader'
   defaults:

core/tests/Drupal/Tests/Core/Template/TwigExtensionTest.php

@@ -25,13 +25,14 @@ class TwigExtensionTest extends UnitTestCase {
    * @dataProvider providerTestEscaping
    */
   public function testEscaping($template, $expected) {
+    $renderer = $this->getMock('\Drupal\Core\Render\RendererInterface');
     $twig = new \Twig_Environment(NULL, array(
       'debug' => TRUE,
       'cache' => FALSE,
       'autoescape' => TRUE,
       'optimizations' => 0
     ));
-    $twig->addExtension((new TwigExtension())->setGenerators($this->getMock('Drupal\Core\Routing\UrlGeneratorInterface')));
+    $twig->addExtension((new TwigExtension($renderer))->setGenerators($this->getMock('Drupal\Core\Routing\UrlGeneratorInterface')));
 
     $nodes = $twig->parse($twig->tokenize($template));
 

core/themes/bartik/bartik.libraries.yml

@@ -22,7 +22,6 @@ global-styling:
       css/components/region-help.css: {}
       css/components/item-list.css: {}
       css/components/list-group.css: {}
-      css/components/messages.css: {}
       css/components/node-preview.css: {}
       css/components/pager.css: {}
       css/components/panel.css: {}
@@ -46,6 +45,12 @@ global-styling:
       css/colors.css: {}
       css/print.css: { media: print }
 
+messages:
+  version: VERSION
+  css:
+    theme:
+      css/components/messages.css: { preprocess: false }
+
 color.preview:
   version: VERSION
   css:

core/themes/bartik/templates/status-messages.html.twig

@@ -24,6 +24,7 @@
 #}
 {% block messages %}
   {% if message_list is not empty %}
+    {{ attach_library('bartik/messages') }}
     <div id="messages">
       <div class="section clearfix">
         {{ parent() }}