Agregar JS a un tema de Drupal 8 (reemplazo de drupal_add_js)

En Drupal 7, puedo usar drupal_add_jsdentro del archivo template.php de un tema como una theme_preprocess_html(&$vars)función:

   drupal_add_js(drupal_get_path('theme', 'mytheme') . '/js/scripts.js',
        array(
          'group' => JS_THEME,
          'preprocess' => TRUE,
          'weight' => '999',
        ));

  $vars['scripts'] = drupal_get_js();

En Drupal 8, intenté convertir esto usando attachedel archivo .theme de mi tema como tal:

  $vars['#attached']['js'] = array(
    array(
      'data' => drupal_get_path('theme', 'mytheme') . '/js/scripts.js',
      'options' => array(
        'group' => JS_THEME,
        'preprocess' => TRUE,
        'every_page' => TRUE,
      ),
    ),
  );

... pero eso no funcionó y no hubo errores en watchdog / console o de otra manera.

De acuerdo con la página D8 API para drupal_add_js:

En desuso: a partir de Drupal 8.0. Utilice la clave # adjunta en las matrices de renderizado en su lugar.

Sin embargo, no había mucha más información que eso. Parece que drupal_add_csstambién usará este método. Sé que todavía es temprano para Drupal 8, pero esperaba dar un salto en esto.

Parece que puede usar hook_preprocess_pagecon adjunto como tal:

function MYTHEME_preprocess_page(&$vars, $hook) {
  $path = drupal_get_path('theme', 'MYTHEME');
     // Render the main scripts file.
  $local_js = array(
    '#attached' => array(
      'js' => array(
        $path . '/js/scripts.js' => array(
          'group' => JS_THEME,
          'weight' => 9999),
      ),
    ),
  );
  \Drupal::service('renderer')->renderRoot($local_js);
}

Esto funciona muy bien ( theme.inc usa este método), tenga en cuenta la matriz anidada adicional alrededor del peso.

El punto clave en la documentación es este bit

Utilice la clave # adjunta en las matrices de renderizado .

El énfasis es mío.

La $variablesmatriz en una función de tema / preproceso no es una matriz de renderizado, es solo una matriz que contiene variables. Para usar #attached, necesitará algo como esto en la función de preproceso:

$vars['foo'] = array(
  '#markup' => '<p>Bar</p>',
  '#attached' => array(
    'data' => drupal_get_path('theme', 'mytheme') . '/js/scripts.js',
    'options' => array(
      'group' => JS_THEME,
      'preprocess' => TRUE,
      'every_page' => TRUE,
    ),
  ),
);

Y esto en el archivo de plantilla:

{ foo }

En otras palabras, más o menos lo mismo que en Drupal 7 (en este momento, al menos).

hook_preprocess_html()es probable que no sea el lugar correcto para este código por cierto; no olvide que los archivos js / css se representan realmente en esa plantilla, por lo que es demasiado tarde para agregar más hook_preprocess_page(), hook_preprocess_node()o el equivalente probablemente obtendrá resultados más confiables.

Consulte la página de prácticas recomendadas de Twig: funciones y plantillas de preproceso para obtener más información sobre las variables de preprocesamiento.

A partir de Drupal 8.0.x-beta2, puede adjuntar CSS y JS desde las funciones de preproceso.

Ver https://www.drupal.org/node/2352319

En este ejemplo, está utilizando una matriz de representación real y no una que se representa en la función misma.

De esta forma, otros módulos, temas, etc. pueden alterarlo.

/**
 * Implements hook_page_alter().
 */
function db_jacket_page_alter(&$page) {
  $page['#attached']['js'][] = drupal_get_path('theme', 'db_jacket') . '/js/jquery.image-depth.js';
}

Aunque el OP trata sobre Drupal 8, esto podría hacerse de manera similar en Drupal 7 sin usar drupal_add_js()para comenzar a acostumbrarse a no tener drupal_add_js():

/**
 * Implements hook_preprocess_page().
 */
function YOURMODULE_preprocess_page(&$variables) {
  $module_path = drupal_get_path('module', 'YOURMODULE');
  $variables['page']['content']['#attached']['js'][$module_path . '/js/YOURMODULE.js'] = array();
}

Las opciones se pueden definir en la matriz vacía, consulte https://api.drupal.org/api/drupal/includes%21common.inc/function/drupal_add_js/7 .