Contrib.social

[PP-1] Build import maps for code component dependencies, attach their CSS

Open on Drupal.org →
Created on 9 April 2025, 12 days ago

Overview

Code component dependencies need to be added in an import map, and their CSS need to be attached. See the parent issue, 🌱 [Plan] First-party code component imports Active , and the issue to be solved before this one, ✨ Store and calculate dependencies in `JavaScriptComponent` Active .

Proposed resolution

Import maps

\Drupal\experience_builder\Plugin\ExperienceBuilder\ComponentSource\JsComponent already builds an import map for the common JS dependencies. Extend it by using the dependencies of the corresponding JavaScriptComponent entity.

Example import map:

<script type="importmap">  
  {  
    "imports": {  
      "@/components/button": "/sites/default/files/astro-island/8RXxcDE5c1RVLOC4Mvm-ZWvUTumW_bALDVy19e8J4EA.js",  
      "@/components/card": "/sites/default/files/astro-island/S_ROf_ktZmcl4uOJv12hB_yztlx_ZztgalZAedDRCqc.js",  
    }  
  }  
</script>
  • button and card in the above example are JavaScriptComponent config entity machine names. Prepend them with @/components/.
  • The paths are referencing JS files that are created for JavaScriptComponent config entities, containing the JS source code. Make sure these paths are pointing at the endpoint that serves the auto-saved version if that exists.

Attaching CSS

Attach CSS from the loaded dependencies using the generated libraries (named 'experience_builder/astro_island.' . $component→id() by experience_builder_library_info_build()).

User interface changes

None.

✨ Feature request
Status

Postponed

Version

0.0

Component

Page builder

Created by

🇳🇱Netherlands balintbrews Amsterdam, NL

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Merge Requests

Comments & Activities

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024