Contrib.social

Code component preview renders slots inside a tag

Open on Drupal.org →
Created on 15 February 2025, about 2 months ago

Overview

The code component preview renders the example value provided for slots wrapped in a <Fragment> tag. This HTML tag not only doesn't exist, we don't want anything wrapping the slots, because that would interfere with providing an accurate preview. We already solved this problem for the main XB preview in ✨ Leverage HTML comment annotations, remove wrapping div elements Active .

Proposed resolution

Defining slots for code components and rendering their example value in the code component preview was introduced in ✨ Defining props for code components Active . This is the code we generate for the preview to be passed to Preact's render() method:

`${camelCase(slot.name)}: h('Fragment', {
  dangerouslySetInnerHTML: {
    __html: '${slot?.example?.replace(/[\r\n]+/g, '')}'
  }
})`

The oversight was passing Fragment as a string as opposed to a function name (and also making sure Fragment gets imported inside the iframe). Removing the quotes would solve that, except the Fragment component doesn't support dangerouslySetInnerHTML.

After thinking through many scenarios, my proposal is to generate JavaScript code for each slot example value that wraps them in a function so each slot value becomes a Preact component, include this code in our JavaScript compilation, and pass the component names to the render() function in the iframe where we're composing props.

User interface changes

Accurate code component previews. 💫

🐛 Bug report
Status

Needs work

Version

0.0

Component

Page builder

Created by

🇳🇱Netherlands balintbrews Amsterdam, NL

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Merge Requests

Comments & Activities

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024