Overview

Parent issue #3499919: [Meta] Plan for in-browser code components
Blocked by #3499988: Editing code components

Code components, just like SDCs, can have props and slots. Building a UI for that and passing the default values was explored in #3483267: [exploratory] PoC of Preact+Tailwind components editable via CodeMirror.

Proposed resolution

Take what was implemented for props in #3483267: [exploratory] PoC of Preact+Tailwind components editable via CodeMirror. Make sure the data matches the shape of how #3499927: Config entity for storing code components expects it. (Saving is out of the scope of this issue.)

User interface changes

Code component props

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

Comments

balintbrews created an issue. See original summary.

balintbrews’s picture

Issue summary: View changes
balintbrews’s picture

wim leers’s picture

Make sure the data matches the shape of how #3499927: Config entity for storing code components expects it. (Saving is out of the scope of this issue.)

… but per that issue, it'll be exactly like SDC props. So that means … that this can get started ahead of that issue being done? :)

wim leers’s picture

Assigned: Unassigned » balintbrews
Status: Active » Postponed (maintainer needs more info)
Issue tags: +Needs issue summary update
Related issues: +#3499927: Config entity for storing code components, +#3467870: Support `{type: array, …}` prop shapes

This issue summary does not explicitly state which JSON schema types should be available to pick from while defining props for code components.

Are you aware that type: array and type: object are both impossible to support at this time? Which means that this issue would be restricted to "primitive/scalar" JSON schema types.

Citing the relevant bit of config schema that landed in #3499927: Config entity for storing code components:

          type:
            type: string
            label: 'Type'
            constraints:
              Choice:
                # Not all JSON Schema basic types make sense (for example: `null`).
                # @see https://json-schema.org/understanding-json-schema/reference/type
                - 'string'
                - 'number'
                - 'integer'
                - 'boolean'
                # @todo Consider adding `array` after https://www.drupal.org/i/3467870 is fixed.
                # @todo Consider adding `object`, but defining _arbitrary_ object shapes is not yet supported.
                # @see \Drupal\experience_builder\JsonSchemaInterpreter\SdcPropJsonSchemaType::computeStorablePropShape()
balintbrews’s picture

Assigned: balintbrews » Unassigned
Status: Postponed (maintainer needs more info) » Active

Are you aware that type: array and type: object are both impossible to support at this time? Which means that this issue would be restricted to "primitive/scalar" JSON schema types.

Yes, I was aware. We'll, of course, need to conform to whatever #3499927: Config entity for storing code components can support in terms of schema and whatever the current capabilities are when it comes to rendering a component props form (which will happen in #3498889: ComponentSource plugin for code components).

effulgentsia’s picture

Issue tags: +sprint
balintbrews’s picture

Assigned: Unassigned » balintbrews

balintbrews’s picture

Crediting @callumharrod for helping with the design.

hooroomoo made their first commit to this issue’s fork.

balintbrews’s picture

Assigned: balintbrews » jessebaker
Status: Active » Needs review

We made an attempt to add auto-save in this MR, but it didn't work out as easily as I hoped. Let's land that in a new issue.

balintbrews’s picture

  • balintbrews committed 28ece862 on 0.x
    Issue #3500017 by balintbrews, hooroomoo, wim leers, callumharrod,...
balintbrews’s picture

Assigned: jessebaker » balintbrews
Status: Needs review » Fixed
Issue tags: -Needs issue summary update +Needs screenshots

@jessebaker, I deeply appreciate your swift review and thorough feedback. Thank you for helping to land this. 🚢

effulgentsia’s picture

Issue tags: -sprint

lauriii’s picture

wim leers’s picture

Status: Fixed » Reviewed & tested by the community
Related issues: +#3506424: Loading and auto-saving an edited code component

Looks AMAZING! 🤩👏

Looking forward to being able to save it in #3506424: Loading and auto-saving an edited code component 😄

wim leers’s picture

Status: Reviewed & tested by the community » Patch (to be ported)

Signaling this still needs a screencast/GIF.

balintbrews’s picture

Assigned: balintbrews » Unassigned
Status: Patch (to be ported) » Fixed
Issue tags: -Needs screenshots
StatusFileSize
new3.71 MB

Video thumbnail

balintbrews’s picture

StatusFileSize
new3.04 MB

Status: Fixed » Closed (fixed)

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