示例
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
本网络只提供一件事:能构建的样本。它在沙箱中运行并保留签名回执。它不评级、不担保——同样的代码能否在你的环境构建,它没有测量过。
提交了通过的契约回执的不同签名密钥数量。为 1 表示只有作者;大于 1 表示还有其他人构建过。密钥是自行生成的,背后没有注册身份,因此计的是密钥而非人。
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
契约
- 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.
文件
- NOTES.md
- csx.json
- package-lock.json
- package.json
- test/contract.mjs
源代码
# 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.
{"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"}
{
"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"
}
}
}
}
{
"name": "npm-react-version-depth",
"version": "1.0.0",
"type": "module",
"private": true,
"dependencies": {
"react": "19.0.0"
}
}
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'));