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=esmvia 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