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

balintbrews → credited tedbow → .

FYI: \Drupal\experience_builder\Render\ImportMapResponseAttachmentsProcessor added support for #attached[import_maps], so this should be relatively straightforward.

(Introduced by 📌 Make JS files generated from code components import Preact modules with the correct paths Active , refined in 🐛 Component preview not loading for JS components Active .)

Republishing after d.o unpublished 🙄

✨ Store and calculate dependencies in `JavaScriptComponent` Active is in!

Started but probably still rough. Need to self review more

I think I need to update this issue based on 🐛 Regression after #3500386: import map scope mismatch when auto-saved code component's JS sends a 307 Active because I think introduced the same problem for dependencies. Shouldn't be too hard

re #9 it is not only use the draft version of the libraries and JS files if there is an auto-save for the dependency. Hope @wim leers can confirm that since he worked on 🐛 Regression after #3500386: import map scope mismatch when auto-saved code component's JS sends a 307 Active

wim leers → credited larowlan → .

test failing

🤞🏻 tests will pass

📌 ComponentSource robustness: add `ComponentSourceTestBase::testSettings()` Active just landed, and now requires this to be rerolled, sorry 😬

Ok. ready for review again. There still isn't test coverage for the 3 new public methods added to JavaScriptComponent. They are test indirectly. so we could add the tests in a follow-up

In the words of @larowlan:

Looking great, that refactor was the bomb @tedbow 💥

Glad I asked for one more iteration round, this is now solid, and easy to evolve in the future 👏

Changing to , because 99% of the work here is in the JsComponent class and its test coverage.

We are missing one smaller piece here. Here is how an import map currently looks like:

{
  "scopes": {
    "/sites/default/files/astro-island/z2TNPL8SBbhdCntH5L8-nUxBDIJKHG-QMqYOC8xazRY.js": {
      "preact": "/modules/experience_builder/ui/lib/astro-hydration/dist/preact.module.js",
      "preact/hooks": "/modules/experience_builder/ui/lib/astro-hydration/dist/hooks.module.js",
      "react/jsx-runtime": "/modules/experience_builder/ui/lib/astro-hydration/dist/jsxRuntime.module.js",
      "react": "/modules/experience_builder/ui/lib/astro-hydration/dist/compat.module.js",
      "react-dom": "/modules/experience_builder/ui/lib/astro-hydration/dist/compat.module.js",
      "react-dom/client": "/modules/experience_builder/ui/lib/astro-hydration/dist/compat.module.js",
      "clsx": "/modules/experience_builder/ui/lib/astro-hydration/dist/clsx.js",
      "class-variance-authority": "/modules/experience_builder/ui/lib/astro-hydration/dist/class-variance-authority.js",
      "tailwind-merge": "/modules/experience_builder/ui/lib/astro-hydration/dist/tailwind-merge.js",
      "@/lib/utils": "/modules/experience_builder/ui/lib/astro-hydration/dist/utils.js",
      "@/components/card": "/sites/default/files/astro-island/e7KF9ds1KTO6BgcK5ocVIBs0AwihvLBL6dq9fxvnwxI.js"
    }
  }
}

@/components/card is brought in as a dependency of another component. So far so good! 👍🏻

Now, because everything in the import map is scoped under the individual components, when the code from @/components/card is imported, the browser won't know how to map react, react/jsx-runtime etc. To solve that, we need to move all those to the global scope:

{
  "imports": {
    "preact": "/modules/experience_builder/ui/lib/astro-hydration/dist/preact.module.js",
    "preact/hooks": "/modules/experience_builder/ui/lib/astro-hydration/dist/hooks.module.js",
    "react/jsx-runtime": "/modules/experience_builder/ui/lib/astro-hydration/dist/jsxRuntime.module.js",
    "react": "/modules/experience_builder/ui/lib/astro-hydration/dist/compat.module.js",
    "react-dom": "/modules/experience_builder/ui/lib/astro-hydration/dist/compat.module.js",
    "react-dom/client": "/modules/experience_builder/ui/lib/astro-hydration/dist/compat.module.js",
    "clsx": "/modules/experience_builder/ui/lib/astro-hydration/dist/clsx.js",
    "class-variance-authority": "/modules/experience_builder/ui/lib/astro-hydration/dist/class-variance-authority.js",
    "tailwind-merge": "/modules/experience_builder/ui/lib/astro-hydration/dist/tailwind-merge.js",
    "@/lib/utils": "/modules/experience_builder/ui/lib/astro-hydration/dist/utils.js",
  },
  "scopes": {
    "/sites/default/files/astro-island/z2TNPL8SBbhdCntH5L8-nUxBDIJKHG-QMqYOC8xazRY.js": {
      "@/components/card": "/sites/default/files/astro-island/e7KF9ds1KTO6BgcK5ocVIBs0AwihvLBL6dq9fxvnwxI.js"
    }
  }
}

Thanks for that detailed analysis! 🤩🙏

@balintbrews I have pushed a new MR that tries to nest the imports like you mentioned

I am not getting this error

Warning: Array to string conversion in
Drupal\Core Render Htm|ResponseAttachmentsProcessor->process-Htm|HeadLink() (line 416 of core/lib/Drupal/Core/Render/Htm/Respon-seAttachmentsProcessor.php).

$attached['html_head'][] = [$element, 'html_head_link:' . $rel . ':' . $href];

because $href is my list of imports not sure why this happening yet

larowlan → credited penyaskito → .

Addressed feedback and worked with @balintbrews to confirm it was working

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