@types/react 18.3.31

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 pkg:npm/%40types/react@18.3.31
Kind: HOW

Use EXACTLY these public packages and versions:
  - pkg:npm/%40types/react@18.3.31

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:7ed1bf75eafb260dda2e2e18540a4ff23eb9ae98f7600f516bd142b85dc3ead3","contract":["package manifest specifies index.d.ts type declarations, ts5.0 typesVersions fallback, and MIT license","declares React 18 concurrent hooks useTransition and useDeferredValue","declares React 18 external store subscription hook useSyncExternalStore with optional server snapshot support","declares React 18 unique identifier hook useId and CSS-in-JS injection hook useInsertionEffect","declares standard state and reducer hooks useState and useReducer with action dispatchers","provides TypeScript 5.0 compatibility fallback declaration in ts5.0/index.d.ts"],"goal":"verify pkg:npm/%40types/react@18.3.31","kind":"HOW","packages":["pkg:npm/%40types/react@18.3.31"],"schemaVersion":1},"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/%40types/react@18.3.31"],"schemaVersion":1,"subject":"pkg:npm/%40types/react@18.3.31","verifierAdapter":"node-typescript@1"}

{
  "name": "sample-types-react",
  "version": "1.0.0",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "sample-types-react",
      "version": "1.0.0",
      "license": "MIT-0",
      "dependencies": {
        "@types/react": "18.3.31"
      }
    },
    "node_modules/@types/prop-types": {
      "version": "15.7.15",
      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.15.tgz",
      "integrity": "sha512-F6bEyamV9jKGAFBEmlQnesRPGOQqS2+Uwi0Em15xenOxHaf2hv6L8YCVn3rPdPJOiJfPiCnLIRyvwVaqMY3MIw==",
      "license": "MIT"
    },
    "node_modules/@types/react": {
      "version": "18.3.31",
      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.31.tgz",
      "integrity": "sha512-vfEqpXTvwT91yhmwdfouStN2hSKwTvyRs8qpLfADyrq/kxDw0hZM7Wk9Ug1FELj8hIby+S/+kQCSRFF32nv2Qw==",
      "license": "MIT",
      "dependencies": {
        "@types/prop-types": "*",
        "csstype": "^3.2.2"
      }
    },
    "node_modules/csstype": {
      "version": "3.2.3",
      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
      "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
      "license": "MIT"
    }
  }
}

{
  "name": "sample-types-react",
  "version": "1.0.0",
  "private": true,
  "type": "module",
  "license": "MIT-0",
  "dependencies": {
    "@types/react": "18.3.31"
  }
}

{
  "schemaVersion": 1,
  "goal": "verify pkg:npm/%40types/react@18.3.31",
  "kind": "HOW",
  "packages": [
    "pkg:npm/%40types/react@18.3.31"
  ]
}

import assert from 'node:assert/strict';
import { createRequire } from 'node:module';
import fs from 'node:fs';
import path from 'node:path';

const require = createRequire(import.meta.url);

// 1. Resolve @types/react package manifest and verify declaration entry points and metadata
const pkgPath = require.resolve('@types/react/package.json');
const pkg = JSON.parse(fs.readFileSync(pkgPath, 'utf8'));

assert.equal(pkg.name, '@types/react', 'Package name must be @types/react');
assert.equal(pkg.version, '18.3.31', 'Package version must be 18.3.31');
assert.equal(pkg.types, 'index.d.ts', 'Package types entry must point to index.d.ts');
assert.equal(pkg.license, 'MIT', 'Package license must be MIT');
assert.ok(pkg.typesVersions && pkg.typesVersions['<=5.0'], 'Package must declare typesVersions for TypeScript <= 5.0');
assert.deepEqual(pkg.typesVersions['<=5.0']['*'], ['ts5.0/*'], 'typesVersions <=5.0 fallback path must point to ts5.0/*');
assert.ok(pkg.exports && pkg.exports['.'] && pkg.exports['.']['types'], 'Package must declare exports types mapping');

const typesDir = path.dirname(pkgPath);
const indexDts = fs.readFileSync(path.join(typesDir, 'index.d.ts'), 'utf8');

// 2. Verify React 18 concurrent hooks useTransition and useDeferredValue
assert.ok(
  indexDts.includes('export function useTransition(): [boolean, TransitionStartFunction];'),
  'index.d.ts must declare useTransition hook returning [boolean, TransitionStartFunction]'
);
assert.ok(
  indexDts.includes('export function useDeferredValue<T>(value: T): T;'),
  'index.d.ts must declare generic useDeferredValue hook signature'
);

// 3. Verify React 18 external store subscription hook useSyncExternalStore
assert.ok(
  indexDts.includes('export function useSyncExternalStore<Snapshot>(') &&
  indexDts.includes('subscribe: (onStoreChange: () => void) => () => void,') &&
  indexDts.includes('getSnapshot: () => Snapshot,') &&
  indexDts.includes('getServerSnapshot?: () => Snapshot,') &&
  indexDts.includes('): Snapshot;'),
  'index.d.ts must declare useSyncExternalStore hook with optional server snapshot support'
);

// 4. Verify React 18 unique identifier hook useId and CSS-in-JS injection hook useInsertionEffect
assert.ok(
  indexDts.includes('export function useId(): string;'),
  'index.d.ts must declare useId hook returning string'
);
assert.ok(
  indexDts.includes('export function useInsertionEffect(effect: EffectCallback, deps?: DependencyList): void;'),
  'index.d.ts must declare useInsertionEffect hook signature'
);

// 5. Verify standard state and reducer hooks useState and useReducer
assert.ok(
  indexDts.includes('function useState<S>(initialState: S | (() => S)): [S, Dispatch<SetStateAction<S>>];') &&
  indexDts.includes('function useState<S = undefined>(): [S | undefined, Dispatch<SetStateAction<S | undefined>>];'),
  'index.d.ts must declare useState hook overloads'
);
assert.ok(
  indexDts.includes('function useReducer<R extends Reducer<any, any>, I>('),
  'index.d.ts must declare useReducer hook signature'
);

// 6. Verify TypeScript 5.0 compatibility fallback declaration in ts5.0/index.d.ts
const ts5IndexDts = fs.readFileSync(path.join(typesDir, 'ts5.0', 'index.d.ts'), 'utf8');
assert.ok(
  ts5IndexDts.includes('export function useTransition(): [boolean, TransitionStartFunction];') &&
  ts5IndexDts.includes('export function useId(): string;') &&
  ts5IndexDts.includes('export function useSyncExternalStore<Snapshot>('),
  'ts5.0/index.d.ts must provide compatible hook declarations for TypeScript <= 5.0'
);

console.log('Contract tests passed successfully.');