react-dom 18.3.1: renderToStaticMarkup

Clean-room public code sample — generation instructions

Write a brand-new, minimal, self-contained code sample in this clean-room directory.
Do not copy, paraphrase, or reference any existing project source. Work only from this spec.

A csx.json manifest scaffold already exists. Do not recreate it from memory. Preserve its case.goal, packages and symbols; fill its empty case.contract with exact assertions and correct its environment, commands and verifierAdapter for the files you generate.

Goal: verify react-dom.renderToStaticMarkup in pkg:npm/react-dom@18.3.1
Kind: HOW

Use EXACTLY these public packages and versions:
  - pkg:npm/react-dom@18.3.1
Demonstrate these symbols/APIs:
  - react-dom.renderToStaticMarkup

Rules:
  - One focused purpose; the smallest project that proves the goal.
  - Include a contract test (test/contract.*) that runs OFFLINE and exits 0 exactly when the goal behavior works.
  - Pin every dependency with a lockfile so resolution is reproducible.
  - No secrets, credentials, or tokens. No real URLs (only example.com or localhost). No absolute paths.
  - No personal names, emails, company names, or project identifiers of any kind.
  - No binaries and no generated output (node_modules, dist, target, venv, .git, .env).
  - Keep it under 200 files and 256KB packed.

{"case":{"caseId":"case:sha256:4185f4847e58970a8f241b3fd0b3d50a07a93a32d7378dd3260194d2d799c741","contract":["renderToStaticMarkup renders React elements into static HTML strings without React ID markers or hydration comments","renderToStaticMarkup resolves nested components and React fragments into flat HTML hierarchy","renderToStaticMarkup automatically escapes unsafe HTML characters in text and attribute values","renderToStaticMarkup preserves raw HTML when dangerouslySetInnerHTML is explicitly provided","renderToStaticMarkup formats inline style objects and serializes boolean attributes according to HTML5 standards"],"goal":"verify react-dom.renderToStaticMarkup in pkg:npm/react-dom@18.3.1","kind":"HOW","packages":["pkg:npm/react-dom@18.3.1"],"schemaVersion":1,"symbols":["react-dom.renderToStaticMarkup"]},"contractCommand":["node","test/contract.mjs"],"environment":{"arch":"x64","distro":"ubuntu","ecosystem":"npm","libc":"glibc","libcVersion":"2.39","os":"linux","osVersionBucket":"24","packageManager":"npm","schemaVersion":1},"license":"MIT-0","packages":["pkg:npm/react-dom@18.3.1"],"schemaVersion":1,"subject":"pkg:npm/react-dom@18.3.1","symbols":["react-dom.renderToStaticMarkup"],"verifierAdapter":"node-typescript@1"}

{
  "name": "react-dom-render-to-static-markup-sample",
  "version": "1.0.0",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "react-dom-render-to-static-markup-sample",
      "version": "1.0.0",
      "license": "MIT-0",
      "dependencies": {
        "react": "18.3.1",
        "react-dom": "18.3.1"
      }
    },
    "node_modules/js-tokens": {
      "version": "4.0.0",
      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
      "license": "MIT"
    },
    "node_modules/loose-envify": {
      "version": "1.4.0",
      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
      "license": "MIT",
      "dependencies": {
        "js-tokens": "^3.0.0 || ^4.0.0"
      },
      "bin": {
        "loose-envify": "cli.js"
      }
    },
    "node_modules/react": {
      "version": "18.3.1",
      "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
      "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
      "license": "MIT",
      "dependencies": {
        "loose-envify": "^1.1.0"
      },
      "engines": {
        "node": ">=0.10.0"
      }
    },
    "node_modules/react-dom": {
      "version": "18.3.1",
      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
      "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
      "license": "MIT",
      "dependencies": {
        "loose-envify": "^1.1.0",
        "scheduler": "^0.23.2"
      },
      "peerDependencies": {
        "react": "^18.3.1"
      }
    },
    "node_modules/scheduler": {
      "version": "0.23.2",
      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz",
      "integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==",
      "license": "MIT",
      "dependencies": {
        "loose-envify": "^1.1.0"
      }
    }
  }
}

{
  "name": "react-dom-render-to-static-markup-sample",
  "version": "1.0.0",
  "description": "verify react-dom.renderToStaticMarkup in pkg:npm/react-dom@18.3.1",
  "type": "module",
  "main": "src/index.mjs",
  "scripts": {
    "test": "node test/contract.mjs"
  },
  "dependencies": {
    "react": "18.3.1",
    "react-dom": "18.3.1"
  },
  "license": "MIT-0"
}

{
  "schemaVersion": 1,
  "goal": "verify react-dom.renderToStaticMarkup in pkg:npm/react-dom@18.3.1",
  "kind": "HOW",
  "packages": [
    "pkg:npm/react-dom@18.3.1"
  ],
  "symbols": [
    "react-dom.renderToStaticMarkup"
  ]
}

import React from 'react';
import { renderToStaticMarkup } from 'react-dom/server';

/**
 * Renders a React element to static HTML markup without React-specific attributes.
 *
 * @param {import('react').ReactNode} element - The React node or element to render.
 * @returns {string} The rendered static HTML markup string.
 */
export function renderStatic(element) {
  return renderToStaticMarkup(element);
}

/**
 * Renders a React component with given props to static HTML markup.
 *
 * @param {import('react').ComponentType<any>} Component - The component to render.
 * @param {object} [props={}] - Props to pass to the component.
 * @returns {string} The rendered static HTML markup string.
 */
export function renderComponent(Component, props = {}) {
  return renderToStaticMarkup(React.createElement(Component, props));
}

/**
 * Renders an element with dangerouslySetInnerHTML for raw unescaped HTML content.
 *
 * @param {string} tag - The HTML tag name (e.g. 'div', 'span').
 * @param {string} rawHtml - Unescaped HTML string to inject.
 * @param {object} [attributes={}] - Additional attributes to apply.
 * @returns {string} The rendered static HTML string.
 */
export function renderWithRawHtml(tag, rawHtml, attributes = {}) {
  return renderToStaticMarkup(
    React.createElement(tag, {
      ...attributes,
      dangerouslySetInnerHTML: { __html: rawHtml },
    })
  );
}

/**
 * Renders a complete HTML document template with head and body elements.
 *
 * @param {object} options
 * @param {string} options.title - Document title.
 * @param {import('react').ReactNode} options.content - Main body content.
 * @param {string} [options.lang='en'] - Document language attribute.
 * @returns {string} Full HTML document string prefixed with doctype.
 */
export function renderDocument({ title, content, lang = 'en' }) {
  const markup = renderToStaticMarkup(
    React.createElement(
      'html',
      { lang },
      React.createElement(
        'head',
        null,
        React.createElement('meta', { charSet: 'utf-8' }),
        React.createElement('title', null, title)
      ),
      React.createElement('body', null, content)
    )
  );
  return `<!DOCTYPE html>${markup}`;
}

/**
 * Renders an element with inline styles and boolean attributes.
 *
 * @param {string} tag - The HTML tag name.
 * @param {object} style - React style object.
 * @param {object} attributes - HTML attributes including boolean properties.
 * @param {import('react').ReactNode} [children] - Child elements or text.
 * @returns {string} The rendered static HTML string.
 */
export function renderStyled(tag, style, attributes = {}, children = null) {
  return renderToStaticMarkup(
    React.createElement(tag, { ...attributes, style }, children)
  );
}

import assert from 'node:assert/strict';
import React from 'react';
import {
  renderStatic,
  renderComponent,
  renderWithRawHtml,
  renderDocument,
  renderStyled,
} from '../src/index.mjs';

// Contract 1: renderToStaticMarkup renders React elements into static HTML strings without React ID markers or hydration comments
{
  const element = React.createElement('div', { id: 'container', className: 'main' }, 'Hello Static World');
  const html = renderStatic(element);
  assert.strictEqual(html, '<div id="container" class="main">Hello Static World</div>');
  assert.ok(!html.includes('data-reactroot'), 'Output should not contain data-reactroot');
  assert.ok(!html.includes('<!--'), 'Output should not contain React hydration comment markers');
}

// Contract 2: renderToStaticMarkup resolves nested components and React fragments into flat HTML hierarchy
{
  function CardHeader({ title }) {
    return React.createElement('h2', { className: 'card-title' }, title);
  }

  function CardBody({ items }) {
    return React.createElement(
      React.Fragment,
      null,
      items.map((item, idx) =>
        React.createElement('p', { key: idx, 'data-index': idx }, item)
      )
    );
  }

  function Card({ title, items }) {
    return React.createElement(
      'section',
      { className: 'card' },
      React.createElement(CardHeader, { title }),
      React.createElement(CardBody, { items })
    );
  }

  const html = renderComponent(Card, {
    title: 'Sample Card',
    items: ['First item', 'Second item'],
  });

  const expected =
    '<section class="card"><h2 class="card-title">Sample Card</h2><p data-index="0">First item</p><p data-index="1">Second item</p></section>';
  assert.strictEqual(html, expected, 'Nested components and fragments should render as clean flat HTML structure');
}

// Contract 3: renderToStaticMarkup automatically escapes unsafe HTML characters in text and attribute values
{
  const unsafeText = '<script>alert("xss")</script> & "quotes" \'single\'';
  const element = React.createElement(
    'div',
    { title: unsafeText },
    unsafeText
  );
  const html = renderStatic(element);

  assert.ok(!html.includes('<script>'), 'Unsafe script tags must be escaped in body');
  assert.ok(html.includes('&lt;script&gt;alert(&quot;xss&quot;)&lt;/script&gt; &amp; &quot;quotes&quot; &#x27;single&#x27;'));
  assert.ok(html.includes('title="&lt;script&gt;alert(&quot;xss&quot;)&lt;/script&gt; &amp; &quot;quotes&quot; &#x27;single&#x27;"'));
}

// Contract 4: renderToStaticMarkup preserves raw HTML when dangerouslySetInnerHTML is explicitly provided
{
  const rawSvg = '<svg width="24" height="24"><circle cx="12" cy="12" r="10"/></svg>';
  const html = renderWithRawHtml('div', rawSvg, { className: 'icon-wrapper' });

  assert.strictEqual(
    html,
    '<div class="icon-wrapper"><svg width="24" height="24"><circle cx="12" cy="12" r="10"/></svg></div>',
    'Raw HTML inside dangerouslySetInnerHTML should be emitted unescaped'
  );
}

// Contract 5: renderToStaticMarkup formats inline style objects and serializes boolean attributes according to HTML5 standards
{
  const style = {
    color: 'red',
    fontSize: '16px',
    backgroundColor: 'transparent',
    lineHeight: 1.5,
  };
  const attributes = {
    disabled: true,
    hidden: false,
    'aria-disabled': 'true',
    'data-testid': 'action-button',
  };

  const html = renderStyled('button', style, attributes, 'Submit');
  assert.strictEqual(
    html,
    '<button disabled="" aria-disabled="true" data-testid="action-button" style="color:red;font-size:16px;background-color:transparent;line-height:1.5">Submit</button>'
  );

  const docHtml = renderDocument({
    title: 'Test Page',
    content: React.createElement('h1', null, 'Heading'),
    lang: 'en',
  });
  assert.strictEqual(
    docHtml,
    '<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><title>Test Page</title></head><body><h1>Heading</h1></body></html>'
  );
}

console.log('All contract tests passed successfully.');