Include compiled CSS from global asset library when displaying component library preview thumbnails

Now that 🐛 Canvas and hover preview out of sync after drag-drop and publish Active is straightforward to land, let's do that first, so we don't get confused by the problem that issue fixes.

+1 — the reason we didn't do this originally is because the global asset library functionality was not yet implemented in February — it was just "compiled into" each individual code component's CSS.

This will require \Drupal\experience_builder\Hook\ComponentSourceHooks::pageAttachments()-like behavior but within each code component's asset library, and taking into account draft-or-not. Thanks to 🐛 Regression after #3500386: import map scope mismatch when auto-saved code component's JS sends a 307 Active , that should be trivial to achieve.

It's too late for me to test this in detail and to think through everything, but I think this is enough:

diff --git a/src/Plugin/ExperienceBuilder/ComponentSource/JsComponent.php b/src/Plugin/ExperienceBuilder/ComponentSource/JsComponent.php
index 92ce9e429..dca8d53cd 100644
--- a/src/Plugin/ExperienceBuilder/ComponentSource/JsComponent.php
+++ b/src/Plugin/ExperienceBuilder/ComponentSource/JsComponent.php
@@ -16,6 +16,7 @@ use Drupal\experience_builder\AutoSave\AutoSaveManager;
 use Drupal\experience_builder\AutoSaveData;
 use Drupal\experience_builder\ComponentDoesNotMeetRequirementsException;
 use Drupal\experience_builder\ComponentMetadataRequirementsChecker;
+use Drupal\experience_builder\Entity\AssetLibrary;
 use Drupal\experience_builder\Entity\Component as ComponentEntity;
 use Drupal\experience_builder\Entity\ComponentInterface;
 use Drupal\experience_builder\Entity\JavaScriptComponent;
@@ -167,8 +168,12 @@ final class JsComponent extends GeneratedFieldExplicitInputUxComponentSourceBase
       $component = $component->forAutoSavePreview($autoSave->data);
     }
     if ($isPreview) {
+      $build['#attached']['library'][] = 'experience_builder/asset_library.' . AssetLibrary::GLOBAL_ID . '.draft';
       $build['#cache']['tags'][] = AutoSaveManager::CACHE_TAG;
     }
+    else {
+      $build['#attached']['library'][] = 'experience_builder/asset_library.' . AssetLibrary::GLOBAL_ID;
+    }
 
     $valid_props = $component->getProps() ?? [];
 

Could you give this a try? 😇

It works! 🙂 Assigning to Ted for code review.

Still needs tests.

The changes here are trivial. So, self-RTBC'ing.

.

(d.o issue status rendering is wrong due to #9 and #10 racing)

Automatically closed - issue fixed for 2 weeks with no activity.