0

Goal:

Attach all the necessary JavaScript and CSS files to the page, when a rendered entity is delivered on a Web Socket event.

Given:

  1. I have a Web Socket with an event when a new entity is created (Via pusher.com but nevermind).
  2. The Web Socket delivers JSON with some meta-data(entity id, created date, title, etc.) and HTML of a single rendered entity.
  3. I catch the event in and render the entity (I do it in JavaScript, client is the same Drupal website).

Problem:

JavaScript and CSS files, needed for rendering, are not attached on the page. (E.g. scripts for display of an image gallery, lazy-loading of images).

My ideas:

I think that I should list all the necessary JavaScript and CSS files (or something like ajax commands, which can attach assets) in the JSON, when I push the event. To achieve this I might need to rendered the entity via some Drupal-AJAX-Renderer.

Afterwards (when I receive the JSON from Web Socket) there should be some way on a Drupal website to attach these files by executing some JavaScript method in Drupal.ajax.

Currently I haven't figured out how to achieve this. Could you give some advice?

0

It was quite some work to adapt the rendering process. There is a lot of code, I will just summarise the solution. If you want more details, just write a comment.

The solution looks similar to my ideas/hypothesis in the question's description.

I created a custom render which collects all the libraries during rendering in an array. It results in an array:

return [
      'commands' ['An array with ajax commands for settings'],
      'content' => 'Rendered content(HTML)',
      'libraries' => 'all the needed assets grouped into libraries',
    ];

I had to to override the AjaxResponseAttachmentsProcessor and AssetResolver classes.

Also I implemented the hook_js_settings_build() to collect all the libraries on the page, as ajaxPageState does not contain all the dependencies.

At the front-end side it is not possible to attach all the assets by comparing ajaxPageState and the response from a Web Socket.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.