Skip to content

feat: CSR-176 Render custom_elements' json-render output format (optional). - #534

Open
drubot wants to merge 1 commit into
2.xfrom
feature/CSR-176-json-render
Open

feat: CSR-176 Render custom_elements' json-render output format (optional).#534
drubot wants to merge 1 commit into
2.xfrom
feature/CSR-176-json-render

Conversation

@drubot

@drubot drubot commented Aug 20, 2026

Copy link
Copy Markdown
Collaborator

Frontend half of CSR-176 / upstream custom_elements #3580092 (MR !189): render the json-render output format — a flat element map {root, elements: {key: {type, props, children, slots}}} — on the decoupled frontend.

What this does

  • Opt-in module option jsonRender (default false): registers the global DrupalCeJsonRender component. The component statically imports @json-render/vue, so nothing lands in the bundle unless enabled.
  • Optional dependencies: @json-render/vue (+ its zod peer) declared as optional peerDependencies — install with npm i @json-render/vue zod only when using the format.
  • Detection in renderCustomElements: a content object with root + elements routes to the json-render renderer; with the option disabled, a clear console error explains what to enable/install (no accidental fallback into the custom-element default-component resolution).
  • Same component resolution as the other formats: every spec type resolves via resolveCustomElement, so existing app components serve all three formats.
  • Slot bridging: @json-render/vue's renderer only walks children; the named slots maps custom_elements emits are bridged by rendering each slot entry as a sub-spec rooted at that element, wired into the Vue component's named slots.
  • drupal-markup mapping: spec elements of type drupal-markup carry inline HTML in props.markup (per MR !189's normalizer) and render through the app's drupal-markup component (content prop).
  • Rendering runs inside JSONUIProvider, so json-render's state/visibility/action contexts are available with defaults.

Testing

  • New test/nuxt/drupalCeJsonRender.test.ts: spec detection, full render of the MR's example shape (props, children, named slot, drupal-markup), and the renderCustomElements routing path. Full suite 160/160 green, changed files eslint-clean.
  • Backend regression run of the upstream MR against LDP: ldp-project #3075.

🤖 Generated with Claude Code

}

// Handle the json-render format: a flat element map plus a root reference.
if (isJsonRenderSpec(customElements)) {

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

we should not have to guess here. when the setting is on, use it.

Comment thread src/module.ts
// unbundled) unless enabled.
if (options.jsonRender) {
addComponent({
name: 'DrupalCeJsonRender',

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

does not make sense as component really. this is the wrong tool

@wotnak

wotnak commented Aug 20, 2026

Copy link
Copy Markdown

Support for named slots in @json-render/vue was recently merged. vercel-labs/json-render@a4d033c
It isn't yet included in tagged release, but hopefully will be soon, then the custom handling of named slots will be no longer necessary.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Development

Successfully merging this pull request may close these issues.

3 participants