How to add variables in *.libraries.yml in drupal 8

Question

I need to convert the below code added in hook_page_attachments() and
add the external js in *.libraries.yml but not sure how to add variables like
$token and $user->mail in the *.libraries.yml so I can just attach library

   drupal_add_js('http://js.acobot.com/' . check_plain($token) . '.js', 'external');
    $script = 'var _aco = _aco || [];';
    drupal_add_js($script, array('type' => 'inline', 'scope' => 'footer'));
    if ($user->uid) {
      $user_info = "_aco.push(['email', '" . check_plain($user->mail) . "']);";
      drupal_add_js($user_info, array('type' => 'inline', 'scope' => 'footer'));
    }

Add Your Script to a file In *.libraries.yml, I have added

acobot-initialise:
  version: 1.x
  js:
    js/acobot.js: {}
  dependencies:
    - core/jquery
    - core/drupalSettings

Added that file to the library under

$attachments['#attached']['library'][] = 'acobot/acobot-initialise';

Use drupalSettings to pass data from php to js

  $attachments['#attached']['drupalSettings']['acobot']['email'] = check_plain($account->getEmail());

Added script acobot.js as follows

(function ($, Drupal, drupalSettings) {

'use strict';

Drupal.behaviors.acobot = { attach: function (context, settings) { var _aco = _aco || []; _aco.push(['email', drupalSettings.acobot.email]);
} };

})(jQuery, Drupal, drupalSettings);

Answer 1

First add your acobot script inline:

function mymodule_page_attachments(array &$attachments) {
  $attachments['#attached']['html_head'][] = [
    // The data.
    [
      '#type' => 'html_tag',
      // The HTML tag to add, in this case a  tag.
      '#tag' => 'script',
      // The value of the HTML tag, here we want to end up with
      // alert("Hello world!");.
      '#value' => 'alert("Hello world!");',
      // Set attributes like src to load a file.
      '#attributes' => array('src' => 'http://js.acobot.com/' . check_plain($token) . '.js'),

    ],
    // A key, to make it possible to recognize this HTML  element when altering.
    'hello-world',
  ];
}

next add your library with *.js file where you can call push method

cuddly-slider:
  version: 1.x
  js:
    js/cuddly-slider.js: {}
  dependencies:
    - core/jquery
    - core/drupalSettings

and pass user mail to drupalSettings.

$build['#attached']['drupalSettings']['fluffiness']['cuddlySlider']['foo'] = 'user mail here';

All examples are available here https://www.drupal.org/docs/8/creating-custom-modules/adding-stylesheets-css-and-javascript-js-to-a-drupal-8-module

Answer 2

The biggest issue I see here is the hyphen in your library name. I haven't figured out how to escape the hyphen in the library name when passing the name of a library to drupalSettings so I will instead use an underscore or join the words. In this case the library name would be acobot_initialise or acobotinitialise. In this example use the underscore so to begin, change your library name to acobot_initialise.

You need to add your variable(s) to drupalSettings and that is done in the preprocess of the entity you are working with. It could be a node or a paragraph or some other entity in which case you'll use hook_preprocess() in your_module.module file. In your example, it would look like the following:

function mymodule_preprocess(&$variables, $hook, $info) {
  // Add code to expose $account->getEmail() to this code block
  $computed_settings = [
    "acobotemail" => check_plain($account->getEmail());,
    "anothervariable" => "a variable you want to pass to the js file";,      
  ];
  $build['#attached']['library'][] = 'acobot/acobot_initialise';
  $build['#attached']['drupalSettings']['acobot']['acobot_initialise'] = $computed_settings;
}

Then you need to expose drupalSettings to your JS file, acobot.js. You will do this as follows:

(function ($, Drupal, drupalSettings) {
  Drupal.behaviors.Acobot = {
    attach: function (context, settings) {
      var acobotemail = drupalSettings.acobot.acobot_initialise.acobotemail;
      var anothervariable = drupalSettings.acobot.acobot_initialise.anothervariable;
      // Do Some stuff with the variables acobotemail and anothervariable.
    }
  }
})(jQuery, Drupal, drupalSettings);