Component preview not loading for JS components

The component preview is now loading, but it appears empty. Debugging the issue.

I think the work on default_markup for code components is still pending.

default_markup: "@todo Make something 🆒 in https://www.drupal.org/project/experience_builder/issues/3498889" - Which appears to be fixed issue.

Updating title for consistent terminology.

Tagging per https://www.drupal.org/project/experience_builder/issues/3455753#release... 🌱 Milestone 0.2.0: Experience Builder-rendered nodes Active .

#6: Good observation, but that's not responsible for the preview 😅

/xb/api/config/component does render preview markup for code components:

  "js.optional": {
    "source": "Code component",
    "metadata": {
      "slots": [
        
      ]
    },
    "field_data": {
      "maybe": {
        "required": false,
        "jsonSchema": {
          "type": "string"
        },
        "sourceType": "static:field_item:string",
        "value": null,
        "expression": "ℹ︎string␟value"
      }
    },
    "dynamic_prop_source_candidates": [
      
    ],
    "transforms": {
      "maybe": {
        "mainProperty": [
          
        ]
      }
    },
    "id": "js.optional",
    "name": "optional",
    "library": "primary_components",
    "category": "@todo",
    "default_markup": "<!-- xb-start-5b3715c6-9e10-4fa9-9692-732bfe366912 --><astro-island uid=\"5b3715c6-9e10-4fa9-9692-732bfe366912\"\n        component-url=\"/sites/default/files/astro-island/pKL_OwLDMlNxnBnBYIsn9BSu349KEpkBmq26qw_z8EQ.js\"\n        component-export=\"default\"\n        renderer-url=\"/modules/contrib/experience_builder/ui/lib/astro-hydration/dist/client.js\"\n        props=\"{}\"\n        ssr=\"\" client=\"only\"\n        opts=\"{&quot;name&quot;:&quot;optional&quot;,&quot;value&quot;:&quot;preact&quot;}\"><script type=\"module\" src=\"/modules/contrib/experience_builder/ui/lib/astro-hydration/dist/client.js\" blocking=\"render\"></script><script type=\"module\" src=\"/sites/default/files/astro-island/pKL_OwLDMlNxnBnBYIsn9BSu349KEpkBmq26qw_z8EQ.js\" blocking=\"render\"></script></astro-island><!-- xb-end-5b3715c6-9e10-4fa9-9692-732bfe366912 -->",
    "css": "<link rel=\"stylesheet\" media=\"all\" href=\"/sites/default/files/css/css_2L-jRULv7_xXe52gIO_bjqU3o7kiFhu1A3RE26luuI8.css?delta=0&amp;language=en&amp;theme=olivero&amp;include=eJxLrShILcpMzUtOjU8qzcxJSS3STywuKcqPzyzOScxL0csvKMnMz0vMAQBNxxA1\" />\n",
    "js_header": "",
    "js_footer": "<script src=\"/sites/default/files/js/js_62jyEDukuEKD8nfERQhtlwDsBadoEVzY0V2toERniis.js?scope=footer&amp;delta=0&amp;language=en&amp;theme=olivero&amp;include=eJxLrShILcpMzUtOjU8qzcxJSS3STywuKcrXy6hMKUosyczPAwDxxA3H\"></script>\n"
  },

Investigating…

wim leers → credited balintbrews → .

Paired with @balintbrews — he gave me a hunch!

Note how the example in #10 does not include the import maps!

Bingo:

What was needed, is making #attached[import_maps] be respected not just when rendering a full HTML response, but also when rendering each individual component preview.

wim leers → credited hooroomoo → .

Per @hooroomoo's review — they manually tested it; it didn’t interfere with any click events for opening the menus which was their concern 🥳

🙌🙌👏👏

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