CodeSampleX

Beispiel

react 19.0.0: createElement

Verifiziertes Beispiel für npm react 19.0.0: createElement. Der Vertrag lief auf node 22 · linux alpine/x64 · docker und bestand.

sha256:5e1b1b7da09808b448f1b778f107fad1453c26b3421a410f44fc8424595dee28

Dieses Netzwerk bietet eine Sache: ein Sample, das baut. Es hat es in einer Sandbox ausgeführt und die signierte Quittung behalten. Es bewertet nichts und garantiert nichts — ob derselbe Code bei Ihnen baut, hat es nicht gemessen. Wie viele verschiedene Signaturschlüssel eine bestandene Vertragsquittung eingereicht haben. Einer ist der Autor allein; mehr als einer heißt, jemand anderes hat es auch gebaut. Ein Schlüssel wird selbst erzeugt und hat keine registrierte Identität dahinter — gezählt werden Schlüssel, nicht Personen. MIT-0

Ausführungsbelege

Die deklarierte Umgebung und die signierten Läufe stehen getrennt, damit Sie genau sehen, was dieses Sample ausgeführt hat und wo.

Beleggrundlage
Signierter Vertrag bestanden
Verifizierungsbelege
1
Signaturschlüssel, die es gebaut haben
1
Deklarierte Umgebung node 22.23 linux 24 · ubuntu · glibc 2.39 x64 node 22.23 javascript npm 10

Umgebungen der Verifizierungsläufe

Umgebung Contract Stufen Lauf
node 22 · linux alpine/x64 · docker ed25519:c1973797be207ac4 PASS compile:SKIPPED · contract:PASS · load:PASS · resolve:PASS
CONTAINER_RUN · node-typescript@1node:22-alpine@sha256:c610fcdfb1d5…
2026-08-27

Fall

HOW
Ziel
verify react.createElement in pkg:npm/react@19.0.0
Pakete
Symbole
  • react.createElement
Umgebung
node 22.23.2
Erstellt
2026-08-27T22:07:03Z

Contract

  1. React 19 createElement produces an element with Symbol.for('react.transitional.element') $$typeof and sets type, key, and props.
  2. React 19 createElement places passed ref directly on element.props.ref rather than element.ref.
  3. React 19 createElement supports string tags, custom component functions, and React.Fragment.
  4. React 19 createElement passes a single child directly as props.children and multiple trailing children as an array.
  5. React.isValidElement returns true for objects created with createElement and false for plain objects, functions, primitives, or null.
  6. React.cloneElement creates a new element with merged props, overrides ref on props.ref, and leaves the original element unmodified.

Dateien

  • NOTES.md
  • PROMPT.md
  • csx.json
  • package-lock.json
  • package.json
  • spec.json
  • test/contract.mjs

Quellartefakt herunterladen (tar.gz)

Quelltext

NOTES.md
# Notes

## Goal
Verify `react.createElement` behavior in `react@19.0.0`.

## Verified Behaviors
1. `createElement` generates transitional elements with `$$typeof: Symbol.for('react.transitional.element')`.
2. Passed `ref` is attached directly to `element.props.ref` in React 19 rather than as a top-level property.
3. Supports HTML elements, custom functional components, and `React.Fragment`.
4. Handles single and multiple trailing children appropriately (scalar child or child array).
5. `isValidElement` validates elements created via `createElement` and rejects plain objects or primitives.
6. `cloneElement` overrides props and `ref` while leaving original element immutable.
PROMPT.md
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.createElement in pkg:npm/react@19.0.0
Kind: HOW

Use EXACTLY these public packages and versions:
  - pkg:npm/react@19.0.0
Demonstrate these symbols/APIs:
  - react.createElement
Constraints:
  - executionContext: node
Required runtime conditions:
  - ecosystem: npm
  - language: javascript
  - moduleSystem: cjs
  - packageManager: npm@10.9.8
  - runtime: node@22.23.2

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.
csx.json
{"case":{"caseId":"case:sha256:ce658b5fc549b6fd36b7151e9fc68d6b321e76dee628a89e4dd33765fd57ece9","constraints":{"executionContext":"node"},"contract":["React 19 createElement produces an element with Symbol.for('react.transitional.element') $$typeof and sets type, key, and props.","React 19 createElement places passed ref directly on element.props.ref rather than element.ref.","React 19 createElement supports string tags, custom component functions, and React.Fragment.","React 19 createElement passes a single child directly as props.children and multiple trailing children as an array.","React.isValidElement returns true for objects created with createElement and false for plain objects, functions, primitives, or null.","React.cloneElement creates a new element with merged props, overrides ref on props.ref, and leaves the original element unmodified."],"goal":"verify react.createElement in pkg:npm/react@19.0.0","kind":"HOW","packages":["pkg:npm/react@19.0.0"],"schemaVersion":1,"symbols":["react.createElement"]},"contractCommand":["node","test/contract.mjs"],"environment":{"arch":"x64","distro":"ubuntu","ecosystem":"npm","executionContext":"node","language":"javascript","libc":"glibc","libcVersion":"2.39","moduleSystem":"esm","os":"linux","osVersionBucket":"24","packageManager":"npm","packageManagerVersion":"10.9.8","runtime":"node","runtimeVersion":"22.23.2","schemaVersion":1},"license":"MIT-0","packages":["pkg:npm/react@19.0.0"],"schemaVersion":1,"subject":"pkg:npm/react@19.0.0","symbols":["react.createElement"],"verifierAdapter":"node-typescript@1"}
package-lock.json
{
  "name": "react-create-element",
  "version": "1.0.0",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "react-create-element",
      "version": "1.0.0",
      "dependencies": {
        "react": "19.0.0"
      }
    },
    "node_modules/react": {
      "version": "19.0.0",
      "resolved": "https://registry.npmjs.org/react/-/react-19.0.0.tgz",
      "integrity": "sha512-V8AVnmPIICiWpGfm6GLzCR/W5FXLchHop40W4nXBmdlEceh16rCN8O8LNWm5bh5XUX91fh7KpA+W0TgMKmgTpQ==",
      "license": "MIT",
      "engines": {
        "node": ">=0.10.0"
      }
    }
  }
}
package.json
{
  "name": "react-create-element",
  "version": "1.0.0",
  "type": "module",
  "private": true,
  "dependencies": {
    "react": "19.0.0"
  }
}
spec.json
{
  "schemaVersion": 1,
  "goal": "verify react.createElement in pkg:npm/react@19.0.0",
  "kind": "HOW",
  "packages": [
    "pkg:npm/react@19.0.0"
  ],
  "symbols": [
    "react.createElement"
  ],
  "constraints": {
    "executionContext": "node"
  },
  "runtimeConditions": {
    "ecosystem": "npm",
    "language": "javascript",
    "moduleSystem": "cjs",
    "packageManager": "npm@10.9.8",
    "runtime": "node@22.23.2"
  }
}
test/contract.mjs
import assert from 'node:assert/strict';
import React, { createElement, cloneElement, isValidElement, Fragment, version } from 'react';

// Verify version
assert.strictEqual(version, '19.0.0');

// 1. Element construction, symbol typing, key and props
const child1 = createElement('span', { key: 'c1' }, 'First');
const child2 = createElement('span', { key: 'c2' }, 'Second');
const element = createElement('div', { id: 'test-id', className: 'main-box', ref: 'boxRef' }, child1, child2);

assert.strictEqual(element.$$typeof, Symbol.for('react.transitional.element'));
assert.strictEqual(element.type, 'div');
assert.strictEqual(element.key, null);
assert.strictEqual(element.props.id, 'test-id');
assert.strictEqual(element.props.className, 'main-box');

// 2. Ref placement in React 19 (stored on props.ref)
assert.strictEqual(element.props.ref, 'boxRef');

// 3. Trailing children handling (array for multiple children, single value for single child)
assert.strictEqual(Array.isArray(element.props.children), true);
assert.strictEqual(element.props.children.length, 2);
assert.strictEqual(element.props.children[0], child1);
assert.strictEqual(element.props.children[1], child2);

const singleChildElement = createElement('p', null, 'Single text child');
assert.strictEqual(singleChildElement.props.children, 'Single text child');

// 4. Component functions and Fragment
function CustomComponent(props) {
  return createElement('section', props, props.title);
}

const componentElement = createElement(CustomComponent, { title: 'Heading', ref: 'compRef' });
assert.strictEqual(componentElement.$$typeof, Symbol.for('react.transitional.element'));
assert.strictEqual(componentElement.type, CustomComponent);
assert.strictEqual(componentElement.props.title, 'Heading');
assert.strictEqual(componentElement.props.ref, 'compRef');

const fragmentElement = createElement(Fragment, null, child1, child2);
assert.strictEqual(fragmentElement.type, Fragment);
assert.strictEqual(fragmentElement.props.children.length, 2);

// 5. isValidElement verification
assert.strictEqual(isValidElement(element), true);
assert.strictEqual(isValidElement(componentElement), true);
assert.strictEqual(isValidElement(fragmentElement), true);
assert.strictEqual(isValidElement({ $$typeof: Symbol.for('react.transitional.element') }), true);
assert.strictEqual(isValidElement({ $$typeof: Symbol.for('react.element') }), false);
assert.strictEqual(isValidElement(null), false);
assert.strictEqual(isValidElement(undefined), false);
assert.strictEqual(isValidElement({}), false);
assert.strictEqual(isValidElement(CustomComponent), false);
assert.strictEqual(isValidElement('plain string'), false);
assert.strictEqual(isValidElement(42), false);

// 6. cloneElement prop merging, ref overriding, and immutability
const cloned = cloneElement(element, { className: 'updated-box', ref: 'newRef' }, 'Replaced Child');
assert.strictEqual(cloned.type, 'div');
assert.strictEqual(cloned.props.id, 'test-id');
assert.strictEqual(cloned.props.className, 'updated-box');
assert.strictEqual(cloned.props.ref, 'newRef');
assert.strictEqual(cloned.props.children, 'Replaced Child');

// Immutability of original element
assert.strictEqual(element.props.className, 'main-box');
assert.strictEqual(element.props.ref, 'boxRef');
assert.strictEqual(element.props.children.length, 2);

Ursprungs-Seeder

anonym