fix: #3591751 Compile JSX server-side for AI-created code components

Fixes #3591751.

canvas_ai's CreateComponent and EditComponentJs stored the source JSX but left compiledJs empty:

'sourceCodeJs' => $javascript,
'compiledJs' => '',

Code components are normally compiled in the browser editor (swc/wasm) on save, which populates compiledJs. The AI/programmatic path skipped that, so JavaScriptComponent::getJs() returned an empty body and the <canvas-island> rendered its fallback text → [object Object].

This compiles the JSX server-side when storing the component, matching the in-browser output (automatic JSX runtime → react/jsx-runtime, imports kept):

esbuild --loader=jsx --jsx=automatic --format=esm

via a small compileSourceJs() helper that discovers esbuild in the Node toolchain and falls back gracefully to '' when it is unavailable (no regression). Verified on Drupal 11.3 / Canvas 1.7.0: AI-created components now render instead of showing [object Object].


AI usage disclosure (per https://www.drupal.org/docs/develop/issues/issue-procedures-and-etiquette/policy-on-the-use-of-ai-when-contributing-to-drupal): AI-Generated: Yes — the patch and this writeup were drafted with AI (Claude) assistance. I, Rajab Natshah, reviewed, tested, and take full responsibility for the correctness, security, and GPL compatibility of this change.

Checkpoints:

  • File an issue
  • Addition/Change/Update/Fix
  • Testing to ensure no regression
  • Automated unit testing coverage
  • Automated functional testing coverage
  • UX/UI designer responsibilities
  • Readability
  • Accessibility
  • Performance
  • Security
  • Documentation
  • Reviewed by a human
  • Code review by maintainers
  • Full testing and approval
  • Credit contributors
  • Review with the product owner
  • Release notes snippet
  • Release
Edited by Rajab Natshah

Merge request reports

Loading