solid-tag-runtime 0.0.17 → 0.0.18

package/ARCHITECTURE.md

@@ -1344,11 +1344,11 @@ The shared render adapter lazily resolves the host application's own `solid-js`
 3. `data-solid-runtime` selects a matching HTML controller whose configured root contains the element. Without the attribute, controller selection follows the same rule as unscoped script discovery: a containing scoped controller may participate when `acceptUnscoped:true`, while an unscoped controller naturally accepts it. Equally specific matches are ambiguous and require explicit scope. A controller outside the element's root is never selected merely because it is the only candidate.
 4. The element remains in the DOM and is the light-DOM mount container. Wrapperless rendering belongs to bare `<script render>`.
 5. Renderer configuration (`module`, `component`, `data-solid-runtime`) is never forwarded as component props.
-6. Declarative props use `prop:*`; kebab names normalize to camelCase. Empty/presence values are boolean `true`, other values remain strings.
-7. `.props` carries arbitrary JavaScript references and overrides declarative props.
+6. Declarative prop layers are bulk `props`, individual `prop:*`, then programmatic `.props`. Kebab `prop:*` names normalize to camelCase. Empty/presence values are boolean `true`; plain values remain strings; one outer `{...}` pair opts an individual prop into safe typed-data parsing.
+7. Bulk `props` uses a safe JSON5-style object parser. Declarative parsing never evaluates JavaScript. `.props` carries arbitrary JavaScript references and overrides both declarative layers.
 8. Prop changes update a reactive prop facade and do not remount the component, preserving local state.
 9. Module/component/runtime identity changes increment a generation token, dispose the current owner, and remount. Stale async import successes and failures are ignored; they cannot mount or report an error against a newer identity.
-10. Initial light-DOM child nodes are captured once and exposed as reusable `props.children`; named slots and dynamic child recapture are not part of this phase.
+10. Initial light-DOM child nodes are captured once and exposed as reusable `props.children`. From 0.0.18 the element is hidden while pending by default so those children do not flash before activation; `show-until-ready` intentionally exposes a cloned fallback while pending. Named slots and dynamic child recapture remain out of scope.
 11. Multiple elements may share one evaluated module namespace while owning independent Solid component roots.
 12. Disconnect disposes the mounted root; reconnect mounts a fresh component instance from the retained declaration inputs.
 13. Custom-element registration is global/idempotent per `CustomElementRegistry`, but controller creation does **not** eagerly upgrade existing `solid-render` elements. Initial `register()` / `observe()` first install the complete declarative script batch and then ensure the custom element is registered. `registerSolidRenderElement()` remains available for explicit/custom-registry use.
@@ -1356,7 +1356,7 @@ The shared render adapter lazily resolves the host application's own `solid-js`
 
 Rendering lifecycle joins the existing HTML event stream through `render-mounting`, `render-mounted`, `render-disposing`, and `render-disposed`; failures are also reported through `html-error` with `render`/`solid-render` operations. Lifecycle subscriptions remain observational and cannot alter rendering.
 
-The first `solid-render` phase intentionally excludes named slots, Shadow DOM, automatic numeric/JSON coercion, arbitrary unprefixed prop forwarding, loading/fallback templates, and expression evaluation inside attributes.
+The initial `solid-render` phase excluded named slots, Shadow DOM, typed declarative data, loading/fallback visibility policy, and expression evaluation. `0.0.18` adds safe typed data plus pending/fallback visibility while continuing to exclude named slots, Shadow DOM, arbitrary unprefixed prop forwarding, and JavaScript expression evaluation.
 
 ### 0.0.10 — unresolved scoped render diagnostics
 
@@ -1549,3 +1549,57 @@ Default `idleMs` is 50 ms. Invalid modes and negative/non-finite idle values are
 Invariant: use continuous observation only when runtime declarations may enter the DOM through code outside the runtime's explicit APIs. Controlled dynamic module loading should remain observer-free after initial registration.
 
 Regression coverage verifies continuous compatibility, bootstrap initial registration, late startup additions, unrelated mutation filtering, automatic disconnect, option validation, and re-observation after bootstrap.
+
+### 0.0.18 — `<solid-render>` pending visibility and safe typed declarative props
+
+Decision: make reusable `<solid-render>` instances visually stable during asynchronous activation and make declarative prop data expressive without turning HTML attributes into executable JavaScript.
+
+Visibility lifecycle:
+
+```text
+connected / identity changed
+    ↓
+pending
+    ↓
+module import + component mount
+    ↓
+ready
+
+error path: pending → error
+```
+
+Rules:
+
+1. `<solid-render>` is hidden while `data-solid-render-state="pending"` by default.
+2. The HTML runtime installs one document-level visibility rule automatically; application CSS is not required. The rule also covers `solid-render:not(:defined)` once the HTML runtime has initialized, preventing the custom-element upgrade window from exposing fallback content.
+3. `show-until-ready` opts out of hiding and displays a clone of captured initial light-DOM children while pending.
+4. Error state is visible and restores captured initial content as fallback when no component mount exists.
+5. `renderState` exposes `pending | ready | error`; `hideUntilReady` is the programmatic visibility-policy property.
+6. Identity changes immediately re-enter `pending`; existing generation guards remain authoritative, so stale imports cannot reveal or mark ready a newer generation.
+7. Visibility management does not change light-DOM ownership, `props.children` capture, runtime routing, or the independent Solid owner for each instance.
+
+Declarative prop layers:
+
+```text
+props="{ ... }"
+    ↓ overridden by
+prop:*
+    ↓ overridden by
+element.props
+```
+
+Parsing rules:
+
+1. Bulk `props` must parse to a top-level object.
+2. The built-in parser accepts a safe JSON5-style data subset: unquoted keys, single/double quoted strings, arrays/objects, booleans, null, finite numbers, comments, and trailing commas.
+3. Plain individual `prop:*` attribute values remain HTML strings; empty/presence values remain boolean `true`.
+4. One outer `{...}` pair marks an individual prop as typed data. Examples: `{3}`, `{true}`, `{[1,2,3]}`, and `{{a:123}}`.
+5. Declarative parsing never uses `eval`, `new Function`, variable lookup, calls, member access, functions, constructors, or other executable JavaScript semantics. Unsupported expression syntax fails as a render/data error.
+6. Prop-only changes update the existing reactive prop facade and do not remount. Invalid later declarative updates preserve the existing component mount rather than partially applying data.
+7. An optional `parseProps(source, context)` controller hook may replace only declarative data decoding. `context.kind` distinguishes bulk `props` from one typed `prop:*`; module resolution, controller routing, and render ownership are unaffected.
+8. Programmatic `.props` remains the path for functions, signals/accessors, services, DOM nodes, class instances, Maps/Sets, and other identity-sensitive JavaScript values.
+
+Implementation boundary: the safe parser lives under `src/html/` and has no external runtime dependency, preserving direct-browser/zero-build package usage. The core runtime remains completely unaware of these HTML/data semantics.
+
+Regression coverage verifies pending/ready/error state, default hiding, visible fallback opt-out, fallback restoration on error, typed individual values, structured bulk values, precedence, reactive updates without remount, custom parser behavior, non-execution of JavaScript-like input, and automatic visibility-style installation.
+

package/README.md

@@ -16,6 +16,23 @@ host Solid runtime
 
 The core package is module-first and DOM-independent. Browser discovery, ownership, declarative rendering, and `<solid-render>` live in `solid-tag-runtime/html`. Optional Solid setup/provider helpers live in `solid-tag-runtime/solid`.
 
+## 0.0.18 `<solid-render>` lifecycle and typed declarative props
+
+`0.0.18` hides `<solid-render>` light-DOM content until the selected component is ready by default, exposes `pending` / `ready` / `error` through `data-solid-render-state`, and provides `show-until-ready` for intentional fallback content. The HTML runtime installs the pending-visibility rule automatically; applications do not need their own CSS.
+
+Structured component data can now be written declaratively:
+
+```html
+<solid-render
+  module="/Counter.jsx"
+  props="{ initial: 100, options: { theme: 'dark' } }"
+  prop:step="{5}"
+  prop:items="{[1, 2, 3]}"
+></solid-render>
+```
+
+Plain `prop:*` values remain HTML strings; one outer `{...}` pair opts an individual prop into safe typed-data parsing. Bulk `props` uses a safe JSON5-style object syntax. Neither form evaluates JavaScript. Precedence is `props < prop:* < element.props`, and prop-only changes remain reactive without remounting.
+
 ## 0.0.17 observation strategies
 
 `0.0.17` adds explicit observation lifecycle strategies while keeping existing behavior backward compatible. `observe()` is still continuous by default. Applications that only need DOM discovery during startup can use `observe({ mode: "bootstrap" })`; it observes through DOM readiness and disconnects after a configurable quiet period of relevant runtime mutations.
@@ -192,6 +209,8 @@ See [Wrapperless delegation](./docs/wrapperless-delegation.md).
 
 **In HTML, always use the explicit closing tag.** Do not write `<solid-render ... />`; custom elements are not HTML void elements and the self-closing slash is ignored by the HTML parser.
 
+Initial light-DOM content is hidden until the component is ready by default. Use `show-until-ready` when those children are intentional loading/fallback content. See the [`<solid-render>` guide](./docs/solid-render.md) for structured `props`, typed `prop:*` literals, precedence, and render-state details.
+
 ## Persistent compile cache
 
 The opt-in compile cache persists **pre-link compiler artifacts**. Runtime-specific linked URLs and evaluated module namespaces are never persisted.
@@ -242,9 +261,9 @@ When loading from an import map, map every used package subpath to the same rele
 ```json
 {
   "imports": {
-    "solid-tag-runtime": "https://esm.sh/solid-tag-runtime@0.0.17",
-    "solid-tag-runtime/html": "https://esm.sh/solid-tag-runtime@0.0.17/html",
-    "solid-tag-runtime/solid": "https://esm.sh/solid-tag-runtime@0.0.17/solid"
+    "solid-tag-runtime": "https://esm.sh/solid-tag-runtime@0.0.18",
+    "solid-tag-runtime/html": "https://esm.sh/solid-tag-runtime@0.0.18/html",
+    "solid-tag-runtime/solid": "https://esm.sh/solid-tag-runtime@0.0.18/solid"
   }
 }
 ```

package/docs/api/html.md

@@ -25,6 +25,7 @@ Common options:
 - `executeEntries`
 - `executeRenders`
 - `onError`
+- `parseProps(source, context)` for optional custom `<solid-render>` declarative-data parsing
 
 ## Discovery and observation
 
@@ -95,3 +96,27 @@ For rendering semantics see [Declarative rendering](../rendering.md) and [`<soli
 For bare `<script render>` ranges, automatic Solid delegated-event setup is available when the underlying runtime was created with `createSolidRuntime()` from `solid-tag-runtime/solid`.
 
 The HTML adapter asks the runtime's private Solid integration to establish document-level delegation lazily, then keeps the declaration in its existing independent `createRoot() + insert()` lifecycle. Selector renders and `<solid-render>` retain their existing container semantics.
+
+## `<solid-render>` state and props
+
+`0.0.18` exposes these element properties/state surfaces:
+
+```ts
+renderer.renderState;     // "pending" | "ready" | "error"
+renderer.hideUntilReady;  // true by default
+renderer.props = { ... }; // strongest prop layer
+```
+
+The DOM mirrors render state through `data-solid-render-state`. Pending content is hidden automatically unless `show-until-ready` is present.
+
+Declarative data layers are:
+
+```text
+props="{ initial: 100 }"
+< prop:step="{5}"
+< renderer.props
+```
+
+Plain `prop:*` values are strings. An outer `{...}` marker parses one individual value with the same safe JSON5-style data parser used by bulk `props`. No declarative form evaluates JavaScript.
+
+A custom parser receives `(source, context)` where `context.kind` is `"props"` or `"prop"`; bulk `props` must return a top-level object.

package/docs/getting-started.md

@@ -97,6 +97,21 @@ Declarative source:
 
 See [HTML runtime](./html-runtime.md), [declarative rendering](./rendering.md), and [`<solid-render>`](./solid-render.md).
 
+
+## Reusable component instance
+
+After the HTML controller registers declarations, an existing runtime module can be instantiated directly from HTML:
+
+```html
+<solid-render
+  module="/Counter.jsx"
+  props="{ initial: 100 }"
+  prop:step="{5}"
+></solid-render>
+```
+
+`<solid-render>` is hidden while pending by default, so initial child content does not flash before the Solid mount is ready. Add `show-until-ready` when the initial children are intentional loading content. Plain `prop:*` values are strings; `{...}` opts an individual prop into safe typed-data parsing.
+
 ## Browser import maps
 
 Map every used package subpath explicitly:
@@ -104,9 +119,9 @@ Map every used package subpath explicitly:
 ```json
 {
   "imports": {
-    "solid-tag-runtime": "https://esm.sh/solid-tag-runtime@0.0.17",
-    "solid-tag-runtime/html": "https://esm.sh/solid-tag-runtime@0.0.17/html",
-    "solid-tag-runtime/solid": "https://esm.sh/solid-tag-runtime@0.0.17/solid"
+    "solid-tag-runtime": "https://esm.sh/solid-tag-runtime@0.0.18",
+    "solid-tag-runtime/html": "https://esm.sh/solid-tag-runtime@0.0.18/html",
+    "solid-tag-runtime/solid": "https://esm.sh/solid-tag-runtime@0.0.18/solid"
   }
 }
 ```

package/docs/html-runtime.md

@@ -152,3 +152,9 @@ A low-level `createRuntime()` controller behaves exactly as before and does not
 When the runtime comes from `createSolidRuntime()` in `solid-tag-runtime/solid`, a bare `<script render>` can lazily request the document-level delegated-event setup required by Solid 2. Each marker-range declaration still owns an independent reactive root and disposer; the delegation host is infrastructure only and is not a shared reactive owner.
 
 See [Solid runtime setup](./solid-runtime-setup.md) and [Wrapperless delegation](./wrapperless-delegation.md).
+
+## `<solid-render>` declarative data and pending visibility
+
+The HTML controller also owns the declarative-data parser configuration used by `<solid-render>`. The default parser treats bulk `props` as a safe JSON5-style object and treats `prop:name="{...}"` as an explicitly typed individual value. Plain individual attributes remain strings. Applications may override this data parser with `parseProps`, but parsing never changes module/runtime ownership.
+
+When a controller is created in a browser document it installs one internal visibility rule for `<solid-render>`. Pending elements are hidden by default, including the pre-upgrade `:not(:defined)` window after the runtime has initialized. `show-until-ready` opts into visible fallback content. The custom element itself drives `data-solid-render-state="pending|ready|error"`.

package/docs/rendering.md

@@ -69,3 +69,7 @@ Combining `entry` and `render` on one declaration is rejected.
 ## Runtime scope diagnostics
 
 A scoped render declaration is immediate work. If `data-solid-runtime="main"` cannot be handled by any registered controller covering that DOM root, the HTML adapter emits `html-warning` with code `unresolved-runtime-scope` and logs one warning.
+
+## Reusable `<solid-render>` lifecycle
+
+Reusable `<solid-render>` instances use container rendering rather than the marker-range wrapperless path. From `0.0.18`, they are hidden while pending by default and expose `data-solid-render-state="pending|ready|error"`. `show-until-ready` keeps captured initial children visible as fallback content. Structured `props` and typed `prop:*="{...}"` values are data-only and do not evaluate JavaScript. See [`<solid-render>`](./solid-render.md).

package/docs/solid-render.md

@@ -1,20 +1,21 @@
 # `<solid-render>`
 
-`<solid-render>` references an already-defined runtime module and mounts a component instance into its own light DOM.
+`<solid-render>` references an already-defined runtime module and mounts one component instance into its own light DOM.
 
 ```html
 <script type="solid-jsx" module="/Counter.jsx">
-  export default function Counter() {
-    return <button>Counter</button>;
+  export default function Counter(props) {
+    return <button>{props.initial}</button>;
   }
 </script>
 
-<solid-render module="/Counter.jsx"></solid-render>
+<solid-render
+  module="/Counter.jsx"
+  props="{ initial: 100 }"
+></solid-render>
 ```
 
-## Important HTML syntax rule
-
-**Always use an explicit closing tag in HTML.**
+## Always use an explicit closing tag
 
 Correct:
 
@@ -28,7 +29,68 @@ Do not write:
 <solid-render module="/Counter.jsx" />
 ```
 
-Custom elements are not HTML void elements. The HTML parser ignores the XML-style self-closing slash, so following siblings may become children of `<solid-render>`. Because initial child content is captured as `props.children`, this can make later page content appear to disappear.
+Custom elements are not HTML void elements. The HTML parser ignores the XML-style self-closing slash, so following siblings may accidentally become children of `<solid-render>`.
+
+## Hidden until ready by default
+
+`0.0.18` prevents initial light-DOM content from flashing before the requested component is ready.
+
+```html
+<solid-render module="/Counter.jsx">
+  this text is captured, but does not flash before the component mounts
+</solid-render>
+```
+
+The runtime installs the required visibility rule automatically; application CSS is not required.
+
+The element exposes its current state:
+
+```text
+data-solid-render-state="pending"
+data-solid-render-state="ready"
+data-solid-render-state="error"
+```
+
+The normal lifecycle is:
+
+```text
+pending
+  ↓
+module import / component mount
+  ↓
+ready
+```
+
+On failure:
+
+```text
+pending → error
+```
+
+Error state is visible, and captured initial content is restored as fallback content.
+
+The visibility rule is installed as soon as the HTML runtime is created. For pages that need to avoid any paint before the runtime bootstrap itself executes, load/bootstrap the HTML runtime early in the document.
+
+### Show fallback content while pending
+
+If initial children are intentional loading content, opt out of hiding:
+
+```html
+<solid-render
+  module="/Account.jsx"
+  show-until-ready
+>
+  Loading account…
+</solid-render>
+```
+
+Programmatically:
+
+```ts
+renderer.hideUntilReady = false;
+```
+
+The state attribute still transitions through `pending`, `ready`, and `error`; only the visibility policy changes.
 
 ## Named component
 
@@ -39,6 +101,8 @@ Custom elements are not HTML void elements. The HTML parser ignores the XML-styl
 ></solid-render>
 ```
 
+Without `component`, `module.default` is used.
+
 ## Runtime selection
 
 ```html
@@ -50,48 +114,180 @@ Custom elements are not HTML void elements. The HTML parser ignores the XML-styl
 
 The selected controller must match scope rules and contain the element within its configured root.
 
-## Declarative props
+## Structured declarative props
+
+Use `props` for a structured object:
 
 ```html
 <solid-render
   module="/UserCard.jsx"
-  prop:name="Alice"
-  prop:user-id="42"
-  prop:compact
+  props="{
+    user: {
+      name: 'Alice',
+      age: 32,
+    },
+    compact: true,
+    tags: ['admin', 'active'],
+  }"
 ></solid-render>
 ```
 
-Rules:
+The built-in parser accepts safe JSON5-style data conveniences:
 
-- `prop:user-id` becomes `userId`
-- a present empty prop becomes `true`
-- other attribute values remain strings
-- renderer configuration (`module`, `component`, `data-solid-runtime`) is not forwarded
-- `prop:module` is a normal component prop and does not collide with renderer `module`
+- unquoted object keys
+- single- or double-quoted strings
+- arrays and nested objects
+- numbers, booleans, and `null`
+- trailing commas
+- line/block comments
 
-## Programmatic props
+Declarative props are **data only**. The parser never uses `eval()` or `new Function()` and does not resolve JavaScript variables, member access, calls, functions, or constructors.
 
-```ts
-const element = document.querySelector("solid-render");
+This is rejected rather than executed:
+
+```html
+<solid-render props="{ value: getValue() }"></solid-render>
+```
+
+The top-level `props` value must be an object.
+
+## Individual `prop:*` values
+
+Plain HTML attribute values remain strings:
+
+```html
+<solid-render
+  prop:first="123"
+  prop:second=123
+></solid-render>
+```
+
+Both values are the string `"123"`.
+
+A present empty prop remains boolean `true`:
+
+```html
+<solid-render prop:compact></solid-render>
+```
+
+To opt one prop into typed data parsing, wrap it in one outer `{...}` pair:
+
+```html
+<solid-render
+  prop:count="{3}"
+  prop:enabled="{true}"
+  prop:missing="{null}"
+  prop:label="{'3'}"
+  prop:items="{[1, 2, 3]}"
+  prop:options="{{ theme: 'dark', step: 5 }}"
+></solid-render>
+```
+
+Effective values:
+
+```js
+{
+  count: 3,
+  enabled: true,
+  missing: null,
+  label: "3",
+  items: [1, 2, 3],
+  options: { theme: "dark", step: 5 },
+}
+```
+
+The outer braces are a typed-data marker, not JavaScript expression syntax. Object values naturally use double braces because the inner braces belong to the object literal.
+
+`prop:user-id` still normalizes to `userId`.
+
+## Prop precedence
+
+The effective prop layers are:
+
+```text
+props="..."
+    ↓ overridden by
+prop:*
+    ↓ overridden by
+element.props
+```
+
+Example:
+
+```html
+<solid-render
+  module="/Counter.jsx"
+  props="{ initial: 100, step: 5 }"
+  prop:step="{10}"
+></solid-render>
+```
 
-element.props = {
-  user,
+Then:
+
+```ts
+renderer.props = {
+  step: 20,
   onSave,
-  service,
 };
 ```
 
-Programmatic values may contain arbitrary JavaScript references and override declarative `prop:*` values.
+The effective `step` is `20`. Programmatic `.props` can contain arbitrary JavaScript values such as functions, signals, services, class instances, Maps/Sets, or identity-sensitive objects.
+
+## Reactive prop updates
+
+Changing any of these updates the existing mounted component without remounting:
+
+```text
+props attribute
+prop:* attributes
+element.props
+```
+
+For example:
+
+```ts
+renderer.setAttribute(
+  "props",
+  "{ initial: 200, options: { theme: 'light' } }",
+);
 
-## Reactive updates
+renderer.setAttribute("prop:step", "{20}");
+```
 
-Changing `prop:*` or `.props` updates the existing component instance without remounting.
+Local component state is preserved.
 
 Changing `module`, `component`, or `data-solid-runtime` changes render identity and therefore disposes/remounts.
 
+Invalid declarative data produces a `solid-render` error; it is never partially executed as JavaScript.
+
+## Custom declarative parser
+
+Applications with a domain-specific data syntax may override declarative parsing at the HTML-controller boundary:
+
+```ts
+const html = createHTMLRuntime(runtime, {
+  parseProps(source, context) {
+    if (context.kind === "props") {
+      return myObjectParser(source);
+    }
+
+    return myValueParser(source);
+  },
+});
+```
+
+Context distinguishes:
+
+```text
+kind: "props"   bulk props attribute
+kind: "prop"    typed prop:* value
+```
+
+A custom bulk parser must still return an object. Parser customization changes data decoding only; it does not change runtime selection, module resolution, or component ownership.
+
 ## Children
 
-Initial child DOM becomes `props.children`:
+Initial child DOM is captured once and becomes `props.children`:
 
 ```html
 <solid-render module="/Card.jsx">
@@ -99,7 +295,9 @@ Initial child DOM becomes `props.children`:
 </solid-render>
 ```
 
-Initial children are captured once. Named slots and dynamic child recapture are not part of the current API.
+By default those children are hidden while the element is pending, then instantiated through `props.children` when the component mounts. With `show-until-ready`, a clone is also displayed as fallback content while pending.
+
+Named slots and dynamic child recapture are not part of the current API.
 
 ## Multiple instances
 

package/docs/solid-runtime-setup.md

@@ -126,7 +126,7 @@ When provider fallback is needed and there is no versioned Solid anchor, this re
 import { TESTED_SOLID_VERSION } from "solid-tag-runtime/solid";
 ```
 
-For `0.0.14` through `0.0.17`, the tested fallback line is Solid `2.0.0-rc.13`.
+For `0.0.14` through `0.0.18`, the tested fallback line is Solid `2.0.0-rc.13`.
 
 If an existing Solid mapping is explicitly versioned, that version becomes the family anchor for generated siblings. An explicitly unversioned existing mapping remains unversioned; the loader does not pretend it is pinned.
 

package/examples/render.html

@@ -37,14 +37,19 @@
     <solid-render
       data-solid-runtime="main"
       module="/Counter.jsx"
-      prop:label="Counter A"
+      props="{ label: 'Counter A' }"
+      prop:initial="{100}"
     ></solid-render>
 
     <solid-render
       data-solid-runtime="main"
       module="/Counter.jsx"
       prop:label="Counter B"
-    ></solid-render>
+      prop:initial="{200}"
+      show-until-ready
+    >
+      Loading Counter B…
+    </solid-render>
 
     <!--
       This bootstrap is ordinary JavaScript. The surrounding application/import

package/html.d.ts

@@ -18,8 +18,13 @@ export interface HTMLAttributeElementLike {
 
 export interface HTMLModuleScriptElement extends HTMLAttributeElementLike {}
 
+export type SolidRenderState = "pending" | "ready" | "error";
+
 export interface SolidRenderElement extends HTMLAttributeElementLike, HTMLAppendTarget {
   props: Record<string, unknown>;
+  readonly renderState: SolidRenderState;
+  /** Default true. Set false to expose captured fallback children while pending. */
+  hideUntilReady: boolean;
   childNodes?: ArrayLike<any> | Iterable<any>;
   attributes?: ArrayLike<{ name: string; value: string }> | Iterable<{ name: string; value: string }>;
   replaceChildren?(...nodes: any[]): void;
@@ -32,6 +37,7 @@ export interface HTMLAppendTarget {
 }
 
 export interface HTMLDocumentLike extends HTMLModuleRoot, HTMLAppendTarget {
+  head?: HTMLAppendTarget;
   body?: HTMLAppendTarget;
   documentElement?: HTMLAppendTarget;
   createElement?(tagName: string): any;
@@ -159,6 +165,8 @@ export interface RemoveHTMLElementResult {
 
 export interface RegisterHTMLOptions extends DefineScriptOptions {
   selector?: string;
+  /** Override safe declarative data parsing for `<solid-render props>` and typed `prop:*="{...}"`. */
+  parseProps?: HTMLDeclarativePropsParser;
   executeEntries?: boolean;
   /** Execute declarative render actions. Default: true. */
   executeRenders?: boolean;
@@ -257,6 +265,19 @@ export interface AddHTMLModuleOptions extends DefineScriptOptions {
   createElement?: (tagName: string) => HTMLModuleScriptElement;
 }
 
+export interface HTMLDeclarativePropsParseContext {
+  element: SolidRenderElement;
+  /** `props` parses a top-level object; `prop` parses one typed prop value. */
+  kind: "props" | "prop";
+  attribute: string;
+  key?: string;
+}
+
+export type HTMLDeclarativePropsParser = (
+  source: string,
+  context: HTMLDeclarativePropsParseContext,
+) => unknown;
+
 export interface HTMLRuntimeOptions extends ObserveHTMLOptions {
   appendTo?: HTMLAppendTarget;
   createElement?: (tagName: string) => HTMLModuleScriptElement;
@@ -323,6 +344,8 @@ export interface CustomElementRegistryLike {
 export interface RegisterSolidRenderElementOptions {
   customElements?: CustomElementRegistryLike;
   HTMLElement?: new (...args: any[]) => any;
+  /** Document that receives the built-in pending-visibility rule. Defaults to global document. */
+  document?: HTMLDocumentLike;
 }
 
 export type HTMLObserverController = HTMLRuntimeController;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "solid-tag-runtime",
-  "version": "0.0.17",
+  "version": "0.0.18",
   "description": "Runtime module system for JSX modules compiled with solid-tag and executed through @solidjs/html",
   "type": "module",
   "exports": {

package/src/html/data-literal.js

@@ -0,0 +1,270 @@
+/**
+ * Parse a safe JSON5-style data literal without evaluating JavaScript.
+ *
+ * Supported conveniences intentionally cover declarative HTML data:
+ * - single/double quoted strings
+ * - unquoted object keys
+ * - line/block comments
+ * - trailing commas
+ * - arrays/objects
+ * - booleans/null/numbers
+ *
+ * Identifiers are accepted only as object keys or the literals true/false/null.
+ * Calls, property access, functions, constructors, variables, and expressions
+ * are rejected because this parser never executes JavaScript.
+ */
+export function parseHTMLDataLiteral(source) {
+  const input = String(source ?? "");
+  let index = 0;
+
+  const error = message => {
+    const position = index;
+    const context = input.slice(Math.max(0, position - 16), Math.min(input.length, position + 16));
+    const failure = new SyntaxError(`${message} at position ${position}${context ? ` near ${JSON.stringify(context)}` : ""}.`);
+    failure.position = position;
+    throw failure;
+  };
+
+  const peek = () => input[index];
+  const consume = expected => {
+    if (input[index] !== expected) error(`Expected ${JSON.stringify(expected)}`);
+    index += 1;
+  };
+
+  function skipSpaceAndComments() {
+    while (index < input.length) {
+      const char = input[index];
+      if (/\s/.test(char)) {
+        index += 1;
+        continue;
+      }
+      if (char === "/" && input[index + 1] === "/") {
+        index += 2;
+        while (index < input.length && input[index] !== "\n" && input[index] !== "\r") index += 1;
+        continue;
+      }
+      if (char === "/" && input[index + 1] === "*") {
+        index += 2;
+        const end = input.indexOf("*/", index);
+        if (end < 0) error("Unterminated block comment");
+        index = end + 2;
+        continue;
+      }
+      break;
+    }
+  }
+
+  function parseString() {
+    const quote = input[index++];
+    let result = "";
+    while (index < input.length) {
+      const char = input[index++];
+      if (char === quote) return result;
+      if (char === "\n" || char === "\r") error("Unterminated string literal");
+      if (char !== "\\") {
+        result += char;
+        continue;
+      }
+      if (index >= input.length) error("Unterminated escape sequence");
+      const escape = input[index++];
+      switch (escape) {
+        case "'": result += "'"; break;
+        case '"': result += '"'; break;
+        case "\\": result += "\\"; break;
+        case "/": result += "/"; break;
+        case "b": result += "\b"; break;
+        case "f": result += "\f"; break;
+        case "n": result += "\n"; break;
+        case "r": result += "\r"; break;
+        case "t": result += "\t"; break;
+        case "v": result += "\v"; break;
+        case "0": {
+          if (/[0-9]/.test(input[index] ?? "")) error("Legacy octal escapes are not supported");
+          result += "\0";
+          break;
+        }
+        case "x": {
+          const hex = input.slice(index, index + 2);
+          if (!/^[0-9a-fA-F]{2}$/.test(hex)) error("Invalid hexadecimal escape");
+          result += String.fromCharCode(Number.parseInt(hex, 16));
+          index += 2;
+          break;
+        }
+        case "u": {
+          if (input[index] === "{") {
+            index += 1;
+            const close = input.indexOf("}", index);
+            if (close < 0) error("Invalid Unicode escape");
+            const hex = input.slice(index, close);
+            if (!/^[0-9a-fA-F]{1,6}$/.test(hex)) error("Invalid Unicode escape");
+            result += String.fromCodePoint(Number.parseInt(hex, 16));
+            index = close + 1;
+          } else {
+            const hex = input.slice(index, index + 4);
+            if (!/^[0-9a-fA-F]{4}$/.test(hex)) error("Invalid Unicode escape");
+            result += String.fromCharCode(Number.parseInt(hex, 16));
+            index += 4;
+          }
+          break;
+        }
+        case "\n": break;
+        case "\r":
+          if (input[index] === "\n") index += 1;
+          break;
+        default:
+          result += escape;
+      }
+    }
+    error("Unterminated string literal");
+  }
+
+  function parseIdentifier() {
+    const start = index;
+    if (!/[A-Za-z_$]/.test(input[index] ?? "")) error("Expected identifier");
+    index += 1;
+    while (/[A-Za-z0-9_$]/.test(input[index] ?? "")) index += 1;
+    return input.slice(start, index);
+  }
+
+  function parseNumber() {
+    const start = index;
+    if (input[index] === "+" || input[index] === "-") index += 1;
+
+    if (input[index] === "0" && /[xX]/.test(input[index + 1] ?? "")) {
+      index += 2;
+      const hexStart = index;
+      while (/[0-9a-fA-F]/.test(input[index] ?? "")) index += 1;
+      if (index === hexStart) error("Invalid hexadecimal number");
+      const raw = input.slice(start, index);
+      const sign = raw.startsWith("-") ? -1 : 1;
+      const normalized = raw.replace(/^[+-]?0[xX]/, "");
+      return sign * Number.parseInt(normalized, 16);
+    }
+
+    let digits = 0;
+    while (/[0-9]/.test(input[index] ?? "")) {
+      digits += 1;
+      index += 1;
+    }
+    if (input[index] === ".") {
+      index += 1;
+      while (/[0-9]/.test(input[index] ?? "")) {
+        digits += 1;
+        index += 1;
+      }
+    }
+    if (digits === 0) error("Invalid number");
+    if (/[eE]/.test(input[index] ?? "")) {
+      index += 1;
+      if (input[index] === "+" || input[index] === "-") index += 1;
+      const exponentStart = index;
+      while (/[0-9]/.test(input[index] ?? "")) index += 1;
+      if (index === exponentStart) error("Invalid exponent");
+    }
+    const raw = input.slice(start, index);
+    const value = Number(raw);
+    if (!Number.isFinite(value)) error("Invalid finite number");
+    return value;
+  }
+
+  function defineDataProperty(target, key, value) {
+    Object.defineProperty(target, key, {
+      configurable: true,
+      enumerable: true,
+      writable: true,
+      value,
+    });
+  }
+
+  function parseObject() {
+    consume("{");
+    skipSpaceAndComments();
+    const object = {};
+    if (peek() === "}") {
+      index += 1;
+      return object;
+    }
+    while (index < input.length) {
+      skipSpaceAndComments();
+      let key;
+      const char = peek();
+      if (char === "'" || char === '"') key = parseString();
+      else if (/[A-Za-z_$]/.test(char ?? "")) key = parseIdentifier();
+      else if (/[+\-.0-9]/.test(char ?? "")) key = String(parseNumber());
+      else error("Expected object key");
+
+      skipSpaceAndComments();
+      consume(":");
+      skipSpaceAndComments();
+      defineDataProperty(object, key, parseValue());
+      skipSpaceAndComments();
+      if (peek() === "}") {
+        index += 1;
+        return object;
+      }
+      consume(",");
+      skipSpaceAndComments();
+      if (peek() === "}") {
+        index += 1;
+        return object;
+      }
+    }
+    error("Unterminated object literal");
+  }
+
+  function parseArray() {
+    consume("[");
+    skipSpaceAndComments();
+    const array = [];
+    if (peek() === "]") {
+      index += 1;
+      return array;
+    }
+    while (index < input.length) {
+      array.push(parseValue());
+      skipSpaceAndComments();
+      if (peek() === "]") {
+        index += 1;
+        return array;
+      }
+      consume(",");
+      skipSpaceAndComments();
+      if (peek() === "]") {
+        index += 1;
+        return array;
+      }
+    }
+    error("Unterminated array literal");
+  }
+
+  function parseValue() {
+    skipSpaceAndComments();
+    const char = peek();
+    if (char === "{") return parseObject();
+    if (char === "[") return parseArray();
+    if (char === "'" || char === '"') return parseString();
+    if (/[+\-.0-9]/.test(char ?? "")) return parseNumber();
+    if (/[A-Za-z_$]/.test(char ?? "")) {
+      const identifier = parseIdentifier();
+      if (identifier === "true") return true;
+      if (identifier === "false") return false;
+      if (identifier === "null") return null;
+      error(`Unsupported identifier ${JSON.stringify(identifier)}; declarative values cannot execute JavaScript`);
+    }
+    error("Expected data literal");
+  }
+
+  skipSpaceAndComments();
+  const value = parseValue();
+  skipSpaceAndComments();
+  if (index !== input.length) error("Unexpected trailing input");
+  return value;
+}
+
+export function parseHTMLPropsObject(source) {
+  const value = parseHTMLDataLiteral(source);
+  if (!value || typeof value !== "object" || Array.isArray(value)) {
+    throw new TypeError("The `props` attribute must contain a top-level object literal.");
+  }
+  return value;
+}

package/src/html.js

@@ -1,6 +1,7 @@
 import { ModuleResolutionError, SolidTagRuntimeError } from "./errors.js";
 import { createEventDispatcher } from "./events.js";
 import { HTMLRenderError, createDefaultHTMLRenderAdapter, resolveRenderComponent } from "./render.js";
+import { parseHTMLDataLiteral, parseHTMLPropsObject } from "./html/data-literal.js";
 
 const DEFAULT_SELECTOR = [
   'script[type="solid-jsx"]',
@@ -12,6 +13,10 @@ const DEFAULT_SELECTOR = [
 ].join(",");
 
 const RUNTIME_SCOPE_ATTRIBUTE = "data-solid-runtime";
+const SOLID_RENDER_STATE_ATTRIBUTE = "data-solid-render-state";
+const SOLID_RENDER_SHOW_UNTIL_READY_ATTRIBUTE = "show-until-ready";
+const SOLID_RENDER_VISIBILITY_STYLE_ATTRIBUTE = "data-solid-tag-render-visibility";
+const solidRenderVisibilityDocuments = new WeakSet();
 const elementOwners = new WeakMap();
 const defaultControllers = new WeakMap();
 const activeControllers = new Set();
@@ -73,6 +78,7 @@ export function createHTMLRuntime(runtime, options = {}) {
     createElement: options.createElement,
     appendTo: options.appendTo,
     renderAdapter: options.renderAdapter ?? createDefaultHTMLRenderAdapter(runtime),
+    parseProps: typeof options.parseProps === "function" ? options.parseProps : undefined,
     bindings: new Map(),
     renderElements: new Set(),
     disposed: false,
@@ -134,6 +140,7 @@ export function createHTMLRuntime(runtime, options = {}) {
 
   controller.api = api;
   activeControllers.add(controller);
+  ensureSolidRenderVisibilityStyle(resolveControllerDocument(controller));
   // Do not define/upgrade <solid-render> here. Existing declarative script
   // modules must be installed first; otherwise connectedCallback() can import
   // a module before register()/observe() has defined the preceding <script>.
@@ -667,6 +674,7 @@ export const htmlRuntimeScopeAttribute = RUNTIME_SCOPE_ATTRIBUTE;
  * browser; programmatic-only applications may call it explicitly.
  */
 export function registerSolidRenderElement(options = {}) {
+  ensureSolidRenderVisibilityStyle(options.document ?? globalThis.document);
   const registry = options.customElements ?? globalThis.customElements;
   const HTMLElementBase = options.HTMLElement ?? globalThis.HTMLElement;
   if (!registry || typeof registry.define !== "function" || typeof registry.get !== "function" || typeof HTMLElementBase !== "function") {
@@ -680,7 +688,7 @@ export function registerSolidRenderElement(options = {}) {
 
   class SolidRenderElement extends HTMLElementBase {
     static get observedAttributes() {
-      return ["module", "component", RUNTIME_SCOPE_ATTRIBUTE];
+      return ["module", "component", RUNTIME_SCOPE_ATTRIBUTE, SOLID_RENDER_SHOW_UNTIL_READY_ATTRIBUTE];
     }
 
     constructor() {
@@ -696,13 +704,16 @@ export function registerSolidRenderElement(options = {}) {
         propObserver: undefined,
         pendingModuleResolution: undefined,
         pendingCheckGeneration: undefined,
+        renderState: "pending",
       });
     }
 
     connectedCallback() {
       const state = getSolidRenderState(this);
       state.connected = true;
+      setSolidRenderState(this, state, "pending");
       captureSolidRenderChildren(this, state);
+      syncSolidRenderPendingContent(this, state);
       startSolidRenderPropObserver(this, state);
       void remountSolidRender(this, "connect");
     }
@@ -720,9 +731,26 @@ export function registerSolidRenderElement(options = {}) {
       if (oldValue === newValue) return;
       const state = getSolidRenderState(this);
       if (!state.connected) return;
+      if (name === SOLID_RENDER_SHOW_UNTIL_READY_ATTRIBUTE) {
+        syncSolidRenderPendingContent(this, state);
+        return;
+      }
       void remountSolidRender(this, `identity:${name}`);
     }
 
+    get renderState() {
+      return getSolidRenderState(this).renderState;
+    }
+
+    get hideUntilReady() {
+      return !this.hasAttribute?.(SOLID_RENDER_SHOW_UNTIL_READY_ATTRIBUTE);
+    }
+
+    set hideUntilReady(value) {
+      if (value === false) this.setAttribute?.(SOLID_RENDER_SHOW_UNTIL_READY_ATTRIBUTE, "");
+      else this.removeAttribute?.(SOLID_RENDER_SHOW_UNTIL_READY_ATTRIBUTE);
+    }
+
     get props() {
       return getSolidRenderState(this).programmaticProps;
     }
@@ -753,12 +781,78 @@ function getSolidRenderState(element) {
       propObserver: undefined,
       pendingModuleResolution: undefined,
       pendingCheckGeneration: undefined,
+      renderState: "pending",
     };
     solidRenderInternals.set(element, state);
   }
   return state;
 }
 
+
+function resolveControllerDocument(controller) {
+  const root = controller?.root ?? globalThis.document;
+  if (root && typeof root.createElement === "function" && (root.head || root.documentElement || root.body)) return root;
+  return root?.ownerDocument ?? globalThis.document;
+}
+
+function ensureSolidRenderVisibilityStyle(document) {
+  if (!document || (typeof document !== "object" && typeof document !== "function")) return;
+  if (solidRenderVisibilityDocuments.has(document)) return;
+
+  try {
+    if (document.querySelector?.(`style[${SOLID_RENDER_VISIBILITY_STYLE_ATTRIBUTE}]`)) {
+      solidRenderVisibilityDocuments.add(document);
+      return;
+    }
+    if (typeof document.createElement !== "function") return;
+    const style = document.createElement("style");
+    style.setAttribute?.(SOLID_RENDER_VISIBILITY_STYLE_ATTRIBUTE, "");
+    style.textContent = [
+      `solid-render:not([${SOLID_RENDER_SHOW_UNTIL_READY_ATTRIBUTE}]):not(:defined),`,
+      `solid-render:not([${SOLID_RENDER_SHOW_UNTIL_READY_ATTRIBUTE}])[${SOLID_RENDER_STATE_ATTRIBUTE}="pending"] {`,
+      "  visibility: hidden !important;",
+      "}",
+    ].join("\n");
+    const target = document.head ?? document.documentElement ?? document.body;
+    if (typeof target?.append === "function") target.append(style);
+    else if (typeof target?.appendChild === "function") target.appendChild(style);
+    else return;
+    solidRenderVisibilityDocuments.add(document);
+  } catch {
+    // Styling is a progressive enhancement for pre-upgrade visibility. The
+    // custom element still manages pending/ready/error state in JavaScript.
+  }
+}
+
+function setSolidRenderState(element, state, nextState) {
+  state.renderState = nextState;
+  element.setAttribute?.(SOLID_RENDER_STATE_ATTRIBUTE, nextState);
+}
+
+function cloneSolidRenderFallbackNodes(state) {
+  const clone = state.childrenTemplate?.cloneNode?.(true);
+  if (!clone) return [];
+  if (clone.childNodes) return Array.from(clone.childNodes);
+  return [clone];
+}
+
+function restoreSolidRenderFallback(element, state) {
+  if (!state.childrenTemplate) {
+    element.replaceChildren?.();
+    return;
+  }
+  element.replaceChildren?.(...cloneSolidRenderFallbackNodes(state));
+}
+
+function syncSolidRenderPendingContent(element, state) {
+  if (state.renderState !== "pending" || state.mount) return;
+  if (element.hasAttribute?.(SOLID_RENDER_SHOW_UNTIL_READY_ATTRIBUTE)) {
+    restoreSolidRenderFallback(element, state);
+  } else {
+    element.replaceChildren?.();
+  }
+}
+
 function captureSolidRenderChildren(element, state) {
   if (state.captured) return;
   state.captured = true;
@@ -784,7 +878,11 @@ function startSolidRenderPropObserver(element, state) {
   if (typeof MutationObserverImpl !== "function") return;
 
   const observer = new MutationObserverImpl(records => {
-    if (!Array.from(records ?? []).some(record => String(record?.attributeName ?? "").startsWith("prop:"))) return;
+    const relevant = Array.from(records ?? []).some(record => {
+      const name = String(record?.attributeName ?? "").toLowerCase();
+      return name === "props" || name.startsWith("prop:");
+    });
+    if (!relevant) return;
     updateSolidRenderProps(element, state);
   });
   observer.observe(element, { attributes: true });
@@ -797,8 +895,10 @@ async function remountSolidRender(element, reason, options = {}) {
   const generation = ++state.generation;
   state.pendingModuleResolution = undefined;
   state.pendingCheckGeneration = undefined;
+  setSolidRenderState(element, state, "pending");
   await disposeSolidRenderMount(element, state, reason === "connect" ? "reconnect" : reason);
   if (!state.connected || generation !== state.generation) return;
+  syncSolidRenderPendingContent(element, state);
 
   let controller;
   try {
@@ -812,7 +912,7 @@ async function remountSolidRender(element, reason, options = {}) {
     }
     const componentName = nonEmpty(element.getAttribute?.("component"));
     const exportName = componentName ?? "default";
-    const props = buildSolidRenderProps(element, state);
+    const props = buildSolidRenderProps(element, state, controller);
 
     emitHTML(controller, {
       type: "render-mounting",
@@ -849,6 +949,7 @@ async function remountSolidRender(element, reason, options = {}) {
     state.mount = mount;
     state.pendingModuleResolution = undefined;
     state.pendingCheckGeneration = undefined;
+    setSolidRenderState(element, state, "ready");
     emitHTML(controller, {
       type: "render-mounted",
       element,
@@ -884,6 +985,8 @@ async function remountSolidRender(element, reason, options = {}) {
       }
     }
 
+    setSolidRenderState(element, state, "error");
+    if (!state.mount) restoreSolidRenderFallback(element, state);
     if (controller) {
       emitHTMLError(controller, "solid-render", error, {
         element,
@@ -944,20 +1047,44 @@ async function disposeSolidRenderMount(element, state, reason = "dispose") {
 
 function updateSolidRenderProps(element, state) {
   if (!state.mount?.updateProps) return;
-  state.mount.updateProps(buildSolidRenderProps(element, state));
+  let controller = state.controller;
+  try {
+    controller ??= resolveHTMLControllerForElement(element);
+    const props = buildSolidRenderProps(element, state, controller);
+    state.mount.updateProps(props);
+    setSolidRenderState(element, state, "ready");
+  } catch (error) {
+    setSolidRenderState(element, state, "error");
+    if (controller) {
+      emitHTMLError(controller, "solid-render", error, {
+        element,
+        moduleId: nonEmpty(element.getAttribute?.("module")),
+        origin: "solid-render",
+      });
+    }
+    dispatchSolidRenderError(element, error);
+  }
 }
 
-function buildSolidRenderProps(element, state) {
+function buildSolidRenderProps(element, state, controller) {
   const declarative = {};
+  const bulk = parseSolidRenderBulkProps(element, controller);
+  copyPropRecord(declarative, bulk);
+
   for (const attribute of Array.from(element.attributes ?? [])) {
-    const name = String(attribute?.name ?? "").toLowerCase();
+    const rawName = String(attribute?.name ?? "");
+    const name = rawName.toLowerCase();
     if (!name.startsWith("prop:")) continue;
     const key = kebabToCamel(name.slice(5));
     if (!key) continue;
-    declarative[key] = attribute.value === "" ? true : attribute.value;
+    declarative[key] = parseSolidRenderAttributeProp(element, controller, key, attribute.value);
   }
 
-  if (state.childrenTemplate && !("children" in (state.programmaticProps ?? {}))) {
+  if (
+    state.childrenTemplate
+    && !("children" in declarative)
+    && !("children" in (state.programmaticProps ?? {}))
+  ) {
     Object.defineProperty(declarative, "children", {
       configurable: true,
       enumerable: true,
@@ -968,14 +1095,69 @@ function buildSolidRenderProps(element, state) {
   }
 
   const merged = Object.create(null);
-  for (const key of Reflect.ownKeys(declarative)) {
-    const descriptor = Object.getOwnPropertyDescriptor(declarative, key);
-    if (descriptor) Object.defineProperty(merged, key, descriptor);
+  copyPropRecord(merged, declarative);
+  copyPropRecord(merged, state.programmaticProps ?? {});
+  return merged;
+}
+
+function copyPropRecord(target, source) {
+  for (const key of Reflect.ownKeys(source ?? {})) {
+    const descriptor = Object.getOwnPropertyDescriptor(source, key);
+    if (descriptor) Object.defineProperty(target, key, descriptor);
+  }
+  return target;
+}
+
+function parseSolidRenderBulkProps(element, controller) {
+  const source = element.getAttribute?.("props");
+  if (source == null || String(source).trim() === "") return {};
+  const value = parseSolidRenderData(controller, String(source), {
+    element,
+    kind: "props",
+    attribute: "props",
+  });
+  if (!value || typeof value !== "object" || Array.isArray(value)) {
+    throw new HTMLRenderError("<solid-render> `props` must parse to a top-level object.", { element });
   }
-  for (const key of Reflect.ownKeys(state.programmaticProps ?? {})) {
-    merged[key] = state.programmaticProps[key];
+  return value;
+}
+
+function parseSolidRenderAttributeProp(element, controller, key, source) {
+  if (source === "") return true;
+  const raw = String(source);
+  const trimmed = raw.trim();
+  if (!(trimmed.startsWith("{") && trimmed.endsWith("}"))) return raw;
+
+  const inner = trimmed.slice(1, -1).trim();
+  if (!inner) {
+    throw new HTMLRenderError(
+      `<solid-render> prop:${key} uses an outer brace pair for typed data; the inner value cannot be empty.`,
+      { element },
+    );
+  }
+  return parseSolidRenderData(controller, inner, {
+    element,
+    kind: "prop",
+    attribute: `prop:${key}`,
+    key,
+  });
+}
+
+function parseSolidRenderData(controller, source, context) {
+  try {
+    if (typeof controller?.parseProps === "function") {
+      return controller.parseProps(source, context);
+    }
+    return context.kind === "props"
+      ? parseHTMLPropsObject(source)
+      : parseHTMLDataLiteral(source);
+  } catch (cause) {
+    const label = context.kind === "props" ? "props" : context.attribute;
+    throw new HTMLRenderError(
+      `<solid-render> could not parse ${label} as declarative data: ${cause?.message ?? cause}`,
+      { element: context.element, cause },
+    );
   }
-  return merged;
 }
 
 function kebabToCamel(value) {