Adicionando JavaScript no Drupal 8

A forma como adicionar um JavaScript no Drupal 8, teve algumas mudanças. Neste tutorial, mostro como era feito no Drupal 7, e agora veremos como fazer no Drupal 8.

No exemplo abaixo, vou mostrar como criar e adicionar um JavaScript dentro do tema.

Para exemplificar, vou utilizar trechos de códigos do tema Bootstrap.

O primeiro passo, é criar o arquivo libraries dentro da raiz do seu tema (nome_do_tema.libraries.yml)

Segue abaixo o conteúdo do bootstrap.libraries.yml:

base-theme:
  css: {}
  js:
    js/drupal.bootstrap.js: {}
  dependencies:
    - core/underscore
    - core/jquery
    - core/drupal
    - core/drupalSettings

# libraries-extend
drupal.ajax:
  js:
    js/misc/ajax.js: {}

# libraries-override
drupal.vertical-tabs:
  js:
    js/misc/vertical-tabs.js: {}
  dependencies:
    - bootstrap/base-theme
    - core/jquery.once
    - core/drupal.form
    - core/matchmedia
 
No exemplo acima, eu defino o nome da library, seu arquivo js, e sua dependência (caso tenha).
 
Podemos observar que temos 3 libraries sendo definidas no exemplo acima: A base-theme que faz referência ao arquivo "js/drupal.bootstrap.js" e tem como dependência outras libraries do core; a library "drupal.ajax", estende uma library existente no Drupal (a library da qual ela vai estender será definida no arquivo "bootstrap.info.yml", que vamos ver mais a frente); e a libray "drupal.vertical-tabs", que neste caso vai substituir uma já existente.
 
Agora, para adicionar esses JavaScripts, precisamos chama-los no arquivo "bootstrap.info.yml" localizado na raiz do tema:
libraries:
  - 'bootstrap/base-theme'

libraries-extend:
  core/drupal.ajax:
    - bootstrap/drupal.ajax

libraries-override:
  core/drupal.vertical-tabs: bootstrap/drupal.vertical-tabs

Repare que na "libraries-extend" primeiro definimos a library que será estendida e na sequência a sua extensão.
 
No caso da "libraries-override", primeiro definimos a library original e na sequência a que irá substituí-la.
 
Pronto! Com isso seu tema já estará chamando os JavaScripts.
 
OK, e como faço para adicionar um JavaScript que está dentro de um módulo custom?
 
Dentro do seu módulo, você também deve crair o arquivo <nome-do-modulo.libraries.yml>.
 
Conteúdo do arquivo mymodule.libraries.yml:
 
myjs:
  version: VERSION
  js:
    js/my.js: {}
  dependencies:
    - core/jquery
    - core/jquery.once
    - core/drupal

myjs.node.preview:
  version: VERSION
  js:
    js/my-preview.js: {}
  dependencies:
    - core/jquery
    - core/jquery.once
    - core/drupal

myjs.form:
  version: VERSION
  js:
    js/myjsform.js: {}
  dependencies:
    - core/jquery
    - core/drupal
    - core/drupalSettings
    - core/jquery.once
    - core/drupal.dialog
 
Vejá alguns hooks que você pode utilizar para adicionar ou remover uma library:
 
<?php

function mymodule_page_attachments_alter(array &$attachments) {
  // Conditionally remove an asset.
  if (in_array('core/jquery', $attachments['#attached']['library'])) {
    $index = array_search('core/jquery', $attachments['#attached']['library']);
    unset($attachments['#attached']['library'][$index]);
  }
}

function mymodule_page_attachments(array &$attachments) {
	$attachments['#attached']['library'][] = 'mymodule/myjs';
}

function mymodule_preprocess_page(&$variables) {
  $variables['#cache']['contexts'][] = 'route';
  if (\Drupal::routeMatch()->getRouteName() === 'entity.node.preview') {
    $variables['#attached']['library'][] = 'mymodule/myjs.node.preview';
  }
}

/**
 * Implements hook_form_BASE_FORM_ID_alter() for 'filter_format_form'.
 */
function mymodule_form_myformid_alter(&$form, FormStateInterface $form_state) {

  $form['myform']['settings'] = array(
    '#tree' => TRUE,
    '#weight' => -8,
    '#type' => 'container',
    '#id' => 'my-form-id',
    '#attached' => array(
      'library' => array(
        'mymodule/myjs.form',
      ),
    ),
  );
} 
 
Você também pode adicionar diretamente no seu template.html.twig:
 
{{ attach_library('extension/library_name') }}
 
Lembrando, que a função "drupal_add_js" deixou de existir no Drupal 8.
 
OBS.: No Drupal 8, o jQuery não é mais chamado em todas as páginas como padrão. Para adicionar o jQuery, você pode adiciona-lo como uma dependência do seu js (como mostrado nas libraries acima) ou utilizar algum hook para anexa-lo. Exemplo:
<?php

function mymodule_page_attachments(array &$attachments) {
	$attachments['#attached']['library'][] = 'core/jquery';
}

Até o próximo tutorial!