Contrib.social

`JavaScriptComponent` config entities must support default images: `File` content entity dependency, base64-encoded upon export

Open on Drupal.org →
Created on 26 June 2025, 8 days ago

Overview

SDCs can have default images. See for example tests/modules/xb_test_sdc/components/image-optional-with-example.

We need equal functionality for code components (JavaScriptComponent config entities).

To achieve this, we'll need to bring in part of the PoC at https://git.drupalcode.org/project/experience_builder/-/commit/8ecc46f91... from >1 year ago.

Proposed resolution

  1. Make it possible to specify the filename of the default image just like is the case for the above SDC:
    --- a/tests/modules/xb_test_code_components/config/install/experience_builder.js_component.xb_test_code_components_vanilla_image.yml
+++ b/tests/modules/xb_test_code_components/config/install/experience_builder.js_component.xb_test_code_components_vanilla_image.yml
@@ -12,7 +18,7 @@ props:
     type: object
     examples:
       -
-        src: 'https://placehold.co/1200x900@2x.png'
+        src: cosmo.jpg
         width: 1200
         height: 900
  2. Make it possible for that filename to be tied to a File entity by specifying a content dependency: 
    --- a/tests/modules/xb_test_code_components/config/install/experience_builder.js_component.xb_test_code_components_vanilla_image.yml
+++ b/tests/modules/xb_test_code_components/config/install/experience_builder.js_component.xb_test_code_components_vanilla_image.yml
@@ -1,7 +1,13 @@
 uuid: 3066d9d2-75f8-444d-a733-644698b43ad4
 langcode: en
 status: true
-dependencies: {  }
+dependencies:
+  content:
+    file:file:<UUID>
 machineName: xb_test_code_components_vanilla_image
 name: Vanilla Image
 block_override: null
  3. The above is then the updated YAML representation of this config entity while stored in the Drupal DB.
  4. Add DefaultRelativeUrlPropSource support. Which requires updating JsComponent::rewriteExampleUrl() to resolve cosmo.jpg to something like /sites/defaults/files/js_component/defaults/cosmo_1.jpg (assuming this is the second component pointing to cosmo.jpg: the File entity's mechanisms will have detected that this file already existed, so it might resolve to a slightly different filename, but the examples entry in the definition will still work!). Otherwise the default image won't render in actual instances of this code component.
  5. During export, ensure that the content dependency (file:file:<UUID>) is carried along with the config entity, to allow it to be reconstructed (File::create(…)->save()) on another site, and have that code component work as if magic! That's where the PoC comes in.
    --- a/tests/modules/xb_test_code_components/config/install/experience_builder.js_component.xb_test_code_components_vanilla_image.yml
+++ b/tests/modules/xb_test_code_components/config/install/experience_builder.js_component.xb_test_code_components_vanilla_image.yml
@@ -1,7 +1,13 @@
 uuid: 3066d9d2-75f8-444d-a733-644698b43ad4
 langcode: en
 status: true
-dependencies: {  }
+dependencies:
+  content:
+    file:file:<UUID>
+# @see https://git.drupalcode.org/project/experience_builder/-/commit/8ecc46f9141b0e563605b33ebdae7baf1d7730fc
+encoded_entities:
+  encoded_files:
+    …shrug…
 machineName: xb_test_code_components_vanilla_image
 name: Vanilla Image
 block_override: null

User interface changes

None, this is about back-end support only; not even including internal HTTP API support.

📌 Task
Status

Active

Version

0.0

Component

Theme builder

Created by

🇬🇧United Kingdom f.mazeikis Brighton

Live updates comments and jobs are added and updated live.
  • Needs tests

    The change is currently missing an automated test that fails when run with the original code, and succeeds when the bug has been fixed.

Sign in to follow issues

Merge Requests

Comments & Activities

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024