#376

fix(devtools-solid): mounting devtools removes the rendered content

Opencoygeekopened 1mo ago

Summary

Adding the documented drop-in JsonRenderDevtools sibling to a Solid renderer removes the visible content of a one-element spec. The renderer becomes an empty keyed span without a browser exception.

Steps to reproduce

  1. Create a Vite consumer with vite-plugin-solid and install @json-render/core@0.21.0, @json-render/solid@0.21.0, @json-render/devtools-solid@0.21.0, solid-js@1.9.15, and zod@4.3.6.
  2. Mount this component in the browser.
import { render } from "solid-js/web";
import { JSONUIProvider, Renderer } from "@json-render/solid";
import { JsonRenderDevtools } from "@json-render/devtools-solid";

const registry = { Text: (ctx) => <p>{ctx.element.props.text}</p> };
const spec = {
  root: "text",
  elements: { text: { type: "Text", props: { text: "Visible renderer" } } },
};
render(() => (
  <JSONUIProvider registry={registry}>
    <Renderer spec={spec} registry={registry} />
    <JsonRenderDevtools spec={spec} />
  </JSONUIProvider>
), document.getElementById("app"));
  1. Inspect the application content after the devtools toggle mounts. Repeat after removing the JsonRenderDevtools sibling.

Expected behavior

Both runs show Visible renderer. Enabling devtools may add inspection attributes or wrappers, but it must preserve the renderer's content. That differential is the closure signal.

Actual behavior

Without devtools, the application contains <p>Visible renderer</p>. With the drop-in devtools component, it contains <span style="display:contents" data-jr-key="text"></span> and no text. Both runs have zero page errors. A third control that calls markDevtoolsActive() before mounting restores the text inside the keyed span.

Affected area

Solid renderer devtools activation and the @json-render/devtools-solid adapter.

Runtime or environment

Reproduced with all json-render packages at 0.21.0, Node v22.23.2, solid-js 1.9.15, vite-plugin-solid 2.11.10, Vite 6.4.3, Playwright 1.58.2, and Chromium 145.0.7632.6. The same differential was previously observed with Vite 7.3.1. Inspected source revision is fc2a696a50a30cb30c878ab1eb65e102487eea0f.

Evidence

The adapter README documents the sibling mount used above. ElementRendererContent places a cached rendered value in the fallback and active wrapper branches of Show. The browser differential isolates the behavior to devtools activation with one renderer component and one spec element.

Impact

The documented devtools integration makes an otherwise working Solid view disappear.

Activity

0

No activity yet.