Adicionando JS a um tema Drupal 8 (substituto para drupal_add_js)

No Drupal 7, posso usar drupal_add_jso arquivo template.php de um tema como uma theme_preprocess_html(&$vars)função:

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

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

No Drupal 8, tentei converter isso usando attachedo arquivo .theme do meu tema da seguinte forma:

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

... mas isso não funcionou e não houve erros no watchdog / console ou de outra forma.

De acordo com a página da API D8 para drupal_add_js:

Descontinuado - a partir do Drupal 8.0. Use a chave #attached nas matrizes de renderização.

No entanto, não havia muito mais informações do que isso. Parece que drupal_add_csstambém usará esse método. Eu sei que ainda é cedo para o Drupal 8, mas eu esperava dar um salto nisso.

Parece que você pode usar hook_preprocess_pagecom anexado 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);
}

Isso funciona muito bem ( theme.inc usa esse método), observe a matriz extra aninhada em torno do peso.

O ponto chave na documentação é este bit

Use a chave #attached nas matrizes de renderização .

Ênfase minha.

A $variablesmatriz em uma função de tema / pré-processo não é uma matriz de renderização, é apenas uma matriz contendo variáveis. Para usar, #attachedvocê precisará de algo assim na função pré-processo:

$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,
    ),
  ),
);

E isso no arquivo de modelo:

{ foo }

Em outras palavras, mais ou menos o mesmo que no Drupal 7 (neste momento, pelo menos).

hook_preprocess_html()provavelmente não é o lugar certo para esse código; não esqueça que os arquivos js / css são renderizados naquele modelo; portanto, é tarde demais para adicionar mais hook_preprocess_page(), hook_preprocess_node()ou o equivalente provavelmente obterá resultados mais confiáveis.

Consulte a página Melhores práticas do Twig - funções de pré-processamento e modelos para obter mais informações sobre variáveis ​​de pré-processamento.

No Drupal 8.0.x-beta2, você pode anexar CSS e JS a partir de funções de pré-processamento.

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

Neste exemplo, você está usando uma matriz de renderização real e não uma que é renderizada na própria função.

Dessa forma, outros módulos, temas etc. podem alterá-lo.

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

Embora o OP seja sobre o Drupal 8, isso pode ser feito de maneira semelhante no Drupal 7 sem usar drupal_add_js()para começar a se acostumar a não ter por drupal_add_js()perto:

/**
 * 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();
}

As opções podem ser definidas na matriz vazia, consulte https://api.drupal.org/api/drupal/includes%21common.inc/function/drupal_add_js/7 .