JavaScriptComponent CSS libraries should depend on AssetLibrary libraries

Giving it a try on this.

Hi @mglaman,

Could you please share the steps to reproduce this issue?

Below are the steps I followed—please let me know if they are correct or if I’m missing something. The CSS appears to be getting applied, but I’m not sure if I’m approaching it the right way. I’d appreciate your guidance on this.

Thanks!

1. I created a new component in the XB page - Test Component
2. Added a Title prop of type text
3. In the code editor - global css - I declared a variable
   

   :root {
     --brand-color: #0074D9;
   }

4. In css section and used the variable as text color
   

   .test-box {
       color: var(--brand-color);
     }

5. last, I used the .test-box is js code.

I again tried but couldn't reproduce the issue. In the last comment I forgot to attach the screenshot so I have attached it now!

The problem/challenge here is that it's possible that both the code component (JavaScriptComponent config entity)'s and the AssetLibrary config entity (only a single one allowed for now, with the ID global) can have a draft (auto-saved) version.

So dependencies don't quite end up working, because it depends on the context which should be loaded:

  private static function shouldLoadAssetFromAutoSave(AutoSaveData $autoSave, bool $isPreview) : bool {
    return $isPreview && !$autoSave->isEmpty();
  }

— \Drupal\experience_builder\Entity\JavaScriptComponent::shouldLoadAssetFromAutoSave()

isPreview will be true when editing inside XB, not outside of it, and an auto-save entry can (dis)appear at any time. Similar thing for the global asset library:

\Drupal\experience_builder\Hook\ComponentSourceHooks::pageAttachments

—

\Drupal\experience_builder\Hook\ComponentSourceHooks::pageAttachments()    // Load the auto-save/draft version of the global asset library in the XB UI.
    $global_asset_library = AssetLibrary::load(AssetLibrary::GLOBAL_ID);
    assert($global_asset_library instanceof AssetLibrary);

    $auto_saved_global_asset_library = NULL;
    $auto_save = $this->autoSaveManager->getAutoSaveData($global_asset_library);
    if (!$auto_save->isEmpty()) {
      \assert($auto_save->data !== NULL);
      $auto_saved_global_asset_library = $global_asset_library->forAutoSavePreview($auto_save->data);
    }
    $page['#cache']['tags'][] = AutoSaveManager::CACHE_TAG;
    $page['#attached']['library'][] = $auto_saved_global_asset_library !== NULL ?
      'experience_builder/asset_library.' . AssetLibrary::GLOBAL_ID . '.draft' :
      'experience_builder/asset_library.' . AssetLibrary::GLOBAL_ID;

However … the work I did on 🐛 Regression after #3500386: import map scope mismatch when auto-saved code component's JS sends a 307 Active gave me an idea:

1. let ApiConfigAutoSaveControllers::getCss() and ApiConfigAutoSaveControllers::getJs() do the disambiguation: return auto-save data if it exists, return stored/live data if not
2. always load the "draft" inside XB, even if no auto-save entry exists
3. … which means I can create a "draft" asset library for the code component, which can always depend on the "draft" asset library for the global asset library
4. This should work?

Can you test this, @mglaman? Quick manual test suggests it works fine. 😊

Just a couple of minor nits about the use of the verbose match for booleans

Only +1s from @larowlan, so going ahead and RTBC'ing :)