Make JS files generated from code components import Preact modules with the correct paths

In my local testing this is allowing hydration although props aren't being passed through properly.
Ran out of time to work out what is wrong with props:

Here's my component

uuid: 221b3268-089f-48dd-ad84-52a9d9dd868c
langcode: en
status: true
dependencies:
  config:
    - experience_builder.js_component.chips
label: Chips
id: js.chips
source: js
category: '@todo'
settings:
  plugin_id: chips
  prop_field_definitions:
    name:
      field_type: string
      field_storage_settings: {  }
      field_instance_settings: {  }
      field_widget: string_textfield
      default_value:
        value: steve
      expression: ℹ︎string␟value

And my Javascript component:

uuid: 690ce531-b957-42f2-925d-cac7bd042cf0
langcode: en
status: true
dependencies: {  }
machineName: chips
name: Chips
required: {  }
props:
  name:
    title: Name
    type: string
    examples:
      - steve
slots: {  }
js:
  original: "const Title = ({name} = 'Steve') => {\n  return <h1 className=\"biggin\">Heya {name}</h1>\n}\nexport default Title;"
  compiled: "import { jsxs as _jsxs } from \"react/jsx-runtime\";\nconst Title = ({ name } = 'Steve')=>{\n    return /*#__PURE__*/ _jsxs(\"h1\", {\n        className: \"biggin\",\n        children: [\n            \"Heya \",\n            name\n        ]\n    });\n};\nexport default Title;\n"
css:
  original: '.biggin { font-size: 5rem;}'
  compiled: "/*removed a load of tailwind stuff here that I didn't add*/.biggin{font-size:5rem}"

Here's how it is rendered in the island

<astro-island uid="14806625-5dd9-4035-9da4-93cccf9859a8" component-url="/sites/default/files/astro-island/i1mwDMruPt1dJK1tlNyp7MGMN38P9JKooOtZVqAxnQc.js" component-export="default" renderer-url="/modules/experience_builder/ui/lib/astro-hydration/dist/client.js" props="{&quot;name&quot;:&quot;bobby&quot;}" client="only" opts="{&quot;name&quot;:&quot;Chips&quot;,&quot;value&quot;:&quot;preact&quot;}" data-xb-uuid="14806625-5dd9-4035-9da4-93cccf9859a8"><h1 class="biggin">Heya </h1></astro-island>

You can see the name prop is being set. but not being rendered properly

Screenshot showing 3 placed instances

Ignore the default value in the component above {name} = 'Steve' if I fix that to {name = 'Steve' } I get a name to show, but it's always Steve, i.e. the props still don't get passed in.

props="{"name":"bobby"}"

Astro receives props as tuples, so this would need to be props="{"name":[0,"bobby"]}". ✨ Code Components as Block Overrides, step 1 Active contains a more generic fix for non-scalar prop values by using 'raw' instead of 0. In any case, this is pre-existing in 0.x and not this MR's responsibility to fix.

This is a really nice implementation of option #2. Merged to 0.x.

I made 🐛 Fix code component prop serialization in Astro islands Needs work for #7 📌 Make JS files generated from code components import Preact modules with the correct paths Active and #8 📌 Make JS files generated from code components import Preact modules with the correct paths Active , I thought it would be useful to land that sooner.

Very nice use of the html_response.attachments_processor infrastructure, in two ways:

1. service decoration to insert ourselves in the right spot
2. declaring one new kind of attachment (import_maps) and mapping it to a pre-existing one provided by core (html_head), which then allows it to transparently work everywhere!

(This is the same overall strategy that BigPipe in core uses.)

This merits being documented in 📌 [PP-5] Documentation for code components Postponed .

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