CodeSampleX

샘플

react 19.0.0: Assert React 19.0.0 element construction, transitional symbol typing, ref-as-prop placement, self-referencing context providers, cloneElement immutability, and hierarchical Children tree traversal

검증된 샘플 — npm react 19.0.0: Assert React 19.0.0 element construction, transitional symbol typing, ref-as-prop placement, self-referencing context providers…

sha256:c8b98eea95c66b47e111cdc80a70e476f4d7403393566d55915970c58faaaf08

이 네트워크가 제공하는 것은 하나입니다. 빌드되는 샘플. 샌드박스에서 돌리고 서명된 영수증을 보관합니다. 등급을 매기지 않고 무엇도 보증하지 않습니다 — 같은 코드가 당신 환경에서 빌드되는지는 측정한 적이 없습니다. 통과한 계약 영수증을 낸 서로 다른 서명 키의 수입니다. 하나면 작성자 혼자이고, 둘 이상이면 다른 사람도 빌드했다는 뜻입니다. 키는 스스로 만드는 것이고 뒤에 등록된 신원이 없으므로, 세는 것은 사람이 아니라 키입니다. MIT-0

실행 증거

선언된 환경과 서명된 실행을 분리해 두었습니다. 이 샘플이 무엇을 어디서 실행했는지 그대로 볼 수 있습니다.

증거 기준
서명된 컨트랙트 통과
검증 영수증
2
빌드한 서명 키
2
선언된 환경 node linux x64 node node npm

검증 실행 환경

환경 컨트랙트 단계 실행일
node 22 · linux alpine/x64 · docker ed25519:d91480838ac982c9 PASS compile:SKIPPED · contract:PASS · load:PASS · resolve:PASS
CONTAINER_RUN · node-typescript@1
2026-08-17
node 22 · linux alpine/x64 · docker ed25519:2175b912ea1c23b1 PASS compile:SKIPPED · contract:PASS · load:PASS · resolve:PASS
CONTAINER_RUN · node-typescript@1
2026-08-18

케이스

HOW
목표
Assert React 19.0.0 element construction, transitional symbol typing, ref-as-prop placement, self-referencing context providers, cloneElement immutability, and hierarchical Children tree traversal
패키지
심벌
  • React.createElement
  • React.cloneElement
  • React.createContext
  • React.Children
  • React.isValidElement
  • React.createRef
  • React.memo
  • React.forwardRef
  • React.lazy
환경
node
생성일
2026-08-17T20:12:28Z

컨트랙트

  1. React 19 createElement produces elements with Symbol.for('react.transitional.element') typeof where ref is stored directly as a prop on props.ref rather than an element property.
  2. React.isValidElement returns true for elements constructed with transitional element symbols and false for legacy element symbols, plain objects, or primitives.
  3. React.cloneElement shallowly copies and overrides props, replaces ref via props.ref, and preserves the original element immutability.
  4. React.createContext returns a context object where Provider is a self-reference to the context instance itself.
  5. React.Children.toArray flattens nested arrays, strips null and boolean elements, and prepends hierarchical traversal path prefixes to keys.
  6. React.Children.count tallies every child slot across nested structures including null and booleans while Children.only asserts a single child element.
  7. React.Children.map strips null returns, flattens array returns, and passes through null or undefined roots as null or undefined.

파일

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

소스 아티팩트 내려받기 (tar.gz)

소스

NOTES.md
# Notes

## Search Results
`search_known_solution` returned existing sample `sha256:802942a98d62b825180c8f2987341180be283e9fadd47ebdd7ea909279f09ee0` (focused on `react-dom/server` and `react-dom/static` streaming exports and `react-server` condition export constraints), `sha256:059011629c7734f8ac38604635b6d097a2b80c286715c0bbcc0db022a73afa54` (focused on duplicate React instances from peer dependency mismatch), and `sha256:b585a75e10818c9c7f8c2aebc3549f5069478f6a50a1a28cfc97be27ff7f8a69` (focused on React 18 server streaming controller architecture).

This version-depth contract proves the exact runtime behavior of the core `react` package pinned at `19.0.0`.

## Pinned Release
- `react@19.0.0`

## Observed Behavior
1. **Element Representation & `ref` Prop**: In `react@19.0.0`, elements created via `createElement` carry `$$typeof: Symbol.for('react.transitional.element')`. Passed `ref` properties are stored directly on `element.props.ref` rather than as a top-level `element.ref` property.
2. **`isValidElement` Validation**: `isValidElement` validates elements matching `Symbol.for('react.transitional.element')`. Non-element objects, primitives, null, and objects with legacy symbols return `false`.
3. **`cloneElement`**: Correctly shallow-copies existing props, merges newly passed props, overrides `props.ref` when specified, and does not mutate the target element instance.
4. **Context & Self-Referential Provider**: `createContext` produces a context object whose `Provider` property directly references the context instance itself (`ThemeContext.Provider === ThemeContext`), with `$$typeof: Symbol.for('react.context')`.
5. **`Children` Tree Traversal & Transformation**:
   - `Children.toArray` recursively flattens nested child arrays, strips `null`, `undefined`, and boolean literals (`false`, `true`), and prepends indexed traversal hierarchy paths to element keys (e.g. `.$item-a`, `.4:$item-b`, `.4:1:0`).
   - `Children.count` counts all traversal slots across nested structures, including `null`, `undefined`, and booleans.
   - `Children.only` enforces a single child element, throwing an error if 0 or >1 children are provided.
   - `Children.map` flattens returned child arrays, omits returned `null` values, and preserves `null`/`undefined` roots.
csx.json
{"case":{"caseId":"case:sha256:ce051b111ff5668ecdc58d427c914377ff8d0b8929e367986e2d0ef1196acaa3","contract":["React 19 createElement produces elements with Symbol.for('react.transitional.element') typeof where ref is stored directly as a prop on props.ref rather than an element property.","React.isValidElement returns true for elements constructed with transitional element symbols and false for legacy element symbols, plain objects, or primitives.","React.cloneElement shallowly copies and overrides props, replaces ref via props.ref, and preserves the original element immutability.","React.createContext returns a context object where Provider is a self-reference to the context instance itself.","React.Children.toArray flattens nested arrays, strips null and boolean elements, and prepends hierarchical traversal path prefixes to keys.","React.Children.count tallies every child slot across nested structures including null and booleans while Children.only asserts a single child element.","React.Children.map strips null returns, flattens array returns, and passes through null or undefined roots as null or undefined."],"goal":"Assert React 19.0.0 element construction, transitional symbol typing, ref-as-prop placement, self-referencing context providers, cloneElement immutability, and hierarchical Children tree traversal","kind":"HOW","packages":["pkg:npm/react@19.0.0"],"schemaVersion":1,"symbols":["React.createElement","React.cloneElement","React.createContext","React.Children","React.isValidElement","React.createRef","React.memo","React.forwardRef","React.lazy"]},"contractCommand":["node","test/contract.mjs"],"environment":{"arch":"x64","ecosystem":"npm","executionContext":"node","language":"node","os":"linux","packageManager":"npm","runtime":"node","schemaVersion":1},"license":"MIT-0","packages":["pkg:npm/react@19.0.0"],"schemaVersion":1,"symbols":["React.createElement","React.cloneElement","React.createContext","React.Children","React.isValidElement","React.createRef","React.memo","React.forwardRef","React.lazy"],"verifierAdapter":"node-typescript@1"}
package-lock.json
{
  "name": "npm-react-version-depth",
  "version": "1.0.0",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "npm-react-version-depth",
      "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": "npm-react-version-depth",
  "version": "1.0.0",
  "type": "module",
  "private": true,
  "dependencies": {
    "react": "19.0.0"
  }
}
test/contract.mjs
import assert from 'node:assert/strict';
import React, {
  Children,
  cloneElement,
  createContext,
  createElement,
  createRef,
  forwardRef,
  isValidElement,
  lazy,
  memo,
  version
} from 'react';

// Contract 1: Version check & Element creation with transitional symbol and ref on props.ref
assert.strictEqual(version, '19.0.0');

const childA = createElement('span', { key: 'c-1' }, 'First Child');
const childB = createElement('span', { key: 'c-2' }, 'Second Child');
const element = createElement(
  'div',
  { id: 'container', className: 'box', ref: 'myTargetRef' },
  childA,
  childB
);

assert.strictEqual(element.$$typeof, Symbol.for('react.transitional.element'));
assert.strictEqual(element.type, 'div');
assert.strictEqual(element.key, null);
assert.strictEqual(element.props.id, 'container');
assert.strictEqual(element.props.className, 'box');
assert.strictEqual(element.props.ref, 'myTargetRef');
assert.strictEqual(Array.isArray(element.props.children), true);
assert.strictEqual(element.props.children.length, 2);

// Contract 2: isValidElement matches transitional element symbol
assert.strictEqual(isValidElement(element), true);
assert.strictEqual(isValidElement(childA), 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({ type: 'div', props: {} }), false);
assert.strictEqual(isValidElement('text-node'), false);
assert.strictEqual(isValidElement(123), false);

// Contract 3: cloneElement immutability and prop override
const clonedElement = cloneElement(
  element,
  { className: 'box-updated', ref: 'updatedRef' },
  'Replaced Children'
);

assert.strictEqual(clonedElement.type, 'div');
assert.strictEqual(clonedElement.props.id, 'container');
assert.strictEqual(clonedElement.props.className, 'box-updated');
assert.strictEqual(clonedElement.props.ref, 'updatedRef');
assert.strictEqual(clonedElement.props.children, 'Replaced Children');
// Original element remains unchanged
assert.strictEqual(element.props.className, 'box');
assert.strictEqual(element.props.ref, 'myTargetRef');
assert.strictEqual(element.props.children.length, 2);

// Contract 4: createContext self-referential Provider
const ThemeContext = createContext('light-theme');
assert.strictEqual(ThemeContext.$$typeof, Symbol.for('react.context'));
assert.strictEqual(ThemeContext.Provider, ThemeContext);
assert.strictEqual(ThemeContext._currentValue, 'light-theme');
assert.strictEqual(ThemeContext.Consumer.$$typeof, Symbol.for('react.consumer'));
assert.strictEqual(ThemeContext.Consumer._context, ThemeContext);

// Contract 5: Children.toArray flattening and key path prefixes
const nestedList = [
  createElement('li', { key: 'item-a' }, 'Alpha'),
  null,
  false,
  undefined,
  [
    createElement('li', { key: 'item-b' }, 'Beta'),
    [createElement('li', null, 'Gamma')]
  ]
];

const flattenedArray = Children.toArray(nestedList);
assert.strictEqual(flattenedArray.length, 3);
assert.strictEqual(flattenedArray[0].key, '.$item-a');
assert.strictEqual(flattenedArray[1].key, '.4:$item-b');
assert.strictEqual(flattenedArray[2].key, '.4:1:0');
assert.strictEqual(flattenedArray[0].props.children, 'Alpha');
assert.strictEqual(flattenedArray[1].props.children, 'Beta');
assert.strictEqual(flattenedArray[2].props.children, 'Gamma');

// Contract 6: Children.count and Children.only
assert.strictEqual(Children.count(nestedList), 6);
assert.strictEqual(Children.count(null), 0);
assert.strictEqual(Children.count(undefined), 0);
assert.strictEqual(Children.count(element), 1);

const soloElement = createElement('p', null, 'Solo Paragraph');
assert.strictEqual(Children.only(soloElement), soloElement);
assert.throws(
  () => Children.only([soloElement, soloElement]),
  {
    name: 'Error',
    message: /React\.Children\.only expected to receive a single React element child\./
  }
);
assert.throws(
  () => Children.only([]),
  {
    name: 'Error',
    message: /React\.Children\.only expected to receive a single React element child\./
  }
);

// Contract 7: Children.map filtering, flattening, and root null/undefined handling
assert.strictEqual(Children.map(null, (child) => child), null);
assert.strictEqual(Children.map(undefined, (child) => child), undefined);

const inputItems = ['first', 'omit-me', 'third'];
const mappedResult = Children.map(inputItems, (item) => {
  if (item === 'omit-me') {
    return null;
  }
  return [item, `${item}-extra`];
});

assert.deepStrictEqual(mappedResult, ['first', 'first-extra', 'third', 'third-extra']);

// Contract 8: Core component wrappers and symbols
assert.strictEqual(React.Fragment, Symbol.for('react.fragment'));
assert.strictEqual(React.StrictMode, Symbol.for('react.strict_mode'));
assert.strictEqual(React.Suspense, Symbol.for('react.suspense'));
assert.strictEqual(React.Profiler, Symbol.for('react.profiler'));

const refObject = createRef();
assert.deepStrictEqual(refObject, { current: null });

const BaseComponent = (props) => createElement('div', props);
const MemoizedComponent = memo(BaseComponent);
assert.strictEqual(MemoizedComponent.$$typeof, Symbol.for('react.memo'));
assert.strictEqual(MemoizedComponent.type, BaseComponent);

const ForwardedComponent = forwardRef((props, ref) =>
  createElement('button', { ...props, ref })
);
assert.strictEqual(ForwardedComponent.$$typeof, Symbol.for('react.forward_ref'));
assert.strictEqual(typeof ForwardedComponent.render, 'function');

const LazyComponent = lazy(() => Promise.resolve({ default: BaseComponent }));
assert.strictEqual(LazyComponent.$$typeof, Symbol.for('react.lazy'));

오리진 시더

csx-seed