Attach JavaScript and CSS assets when render entity using Web Sockets

Solutions

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.

Tags: Theming / Drupal 8 / Ajax

Similar questions

How can I use webform to upload assets and create a project that can be assigned to different users

I am trying to put together a creative request form that a client would fill out. A studio manager would then follow up and assign to a project manager. I am using webform and rules as a starting point with the possibility of using Open Atrium.

Rules Webforms Distributions

How to load jQuery assets before blocks and regions

I need a jQuery script to load immediately before a certain block shows on my Drupal 8 front page. I'm trying to use the following but I get 'TypeError $ is not a function' in code inspector. Here's my script: The problem is the first line. In Drupal 8 what is the preferred way to write this script to accomplish what I want?

Drupal 8 Javascript

Link an image and add assets

I'm new to drupal, so this might be simple even if I can't find the solution. I have a custom module back_module with folders : From my templates/block-back.html.twig First issue: I want to print an image located in images/back.png I can't find the right url for the image <img src ="???" alt='backButton'/> I already find solutions to retrieve...

Drupal Drupal 8

Attach a node to a menu link OR attach custom fields to menu links?

My client would like to add content to the top-level links in the main menu, in order to have "Featured" content that is displayed in the drop-down menu. They must be able to choose which piece of content will be shown, and which menu link it will be associated with. I figure I have two options: 1) Creating a "Featured in Menu" Content Type and add...

Drupal 7 Entities Routes

Eliminate render-blocking JavaScript and CSS in above-the-fold content

I am building a Drupal 7 site. These are some of the modules I use: Adaptivetheme (theme), Views and Content Panes, Panels, Mini panels, Panels everywhere, Page manager, Superfish for menus, Addthis, Chosen (drop down). For improving my site performance and the dealing with the CSS and JS files I am using the Advagg module. When running the Pagespe...

Drupal 7 Theming Javascript

Changing numbers of render-blocking JavaScript and CSS

I have a drupal 7 site. I use the Advanced CSS/JS Aggregation module In the past I asked this question, and tried to improve performance and "Eliminate render-blocking JavaScript and CSS in above-the-fold content" as Google Page speed test suggested. After I got answers to the question I changed the module configuration, and set the Target Number O...

Theming Performance Drupal 8

Attach JavaScript and CSS assets when render entity using Web Sockets

Solutions

Similar questions

Also ask