react-refresh 0.18.0: register

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-refresh.register in pkg:npm/react-refresh@0.18.0
Kind: HOW

Use EXACTLY these public packages and versions:
  - pkg:npm/react-refresh@0.18.0
Demonstrate these symbols/APIs:
  - react-refresh.register

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:9cea8ca7435412eff60df62d5ea09b77ab4fefeda1f8013a89c83992dc8b3ac5","contract":["register registers a function component type under a unique family ID","register is idempotent when called again with the same component type","register links an updated component type to the existing family under the same family ID","register ignores non-function and non-object component types","register recursively registers forward_ref render function and memo inner type"],"goal":"verify react-refresh.register in pkg:npm/react-refresh@0.18.0","kind":"HOW","packages":["pkg:npm/react-refresh@0.18.0"],"schemaVersion":1,"symbols":["react-refresh.register"]},"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-refresh@0.18.0"],"schemaVersion":1,"subject":"pkg:npm/react-refresh@0.18.0","symbols":["react-refresh.register"],"verifierAdapter":"node-typescript@1"}

{
  "name": "sample-react-refresh-register",
  "version": "1.0.0",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "sample-react-refresh-register",
      "version": "1.0.0",
      "license": "MIT-0",
      "dependencies": {
        "react-refresh": "0.18.0"
      }
    },
    "node_modules/react-refresh": {
      "version": "0.18.0",
      "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.18.0.tgz",
      "integrity": "sha512-QgT5//D3jfjJb6Gsjxv0Slpj23ip+HtOpnNgnb2S5zU3CB26G/IDPGoy4RJB42wzFE46DRsstbW6tKHoKbhAxw==",
      "license": "MIT",
      "engines": {
        "node": ">=0.10.0"
      }
    }
  }
}

{
  "name": "sample-react-refresh-register",
  "version": "1.0.0",
  "private": true,
  "type": "module",
  "license": "MIT-0",
  "dependencies": {
    "react-refresh": "0.18.0"
  }
}

{
  "schemaVersion": 1,
  "goal": "verify react-refresh.register in pkg:npm/react-refresh@0.18.0",
  "kind": "HOW",
  "packages": [
    "pkg:npm/react-refresh@0.18.0"
  ],
  "symbols": [
    "react-refresh.register"
  ]
}

import refreshRuntimeModule from "react-refresh/runtime";

export const RefreshRuntime =
  refreshRuntimeModule && typeof refreshRuntimeModule === "object" && "default" in refreshRuntimeModule
    ? refreshRuntimeModule.default
    : refreshRuntimeModule;

/**
 * Registers a component type with the Fast Refresh runtime under an ID.
 *
 * @param {any} type Component function or exotic component object
 * @param {string} id Unique identifier for the component family
 */
export function registerComponent(type, id) {
  RefreshRuntime.register(type, id);
}

/**
 * Retrieves the component family associated with the given ID.
 *
 * @param {string} id
 * @returns {object|undefined}
 */
export function getComponentFamily(id) {
  return RefreshRuntime.getFamilyByID(id);
}

/**
 * Retrieves the component family associated with the given component type.
 *
 * @param {any} type
 * @returns {object|undefined}
 */
export function getComponentFamilyByType(type) {
  return RefreshRuntime.getFamilyByType(type);
}

/**
 * Applies pending Fast Refresh updates.
 *
 * @returns {object|null}
 */
export function applyRefresh() {
  return RefreshRuntime.performReactRefresh();
}

import assert from "node:assert/strict";
import refreshRuntimeModule from "react-refresh/runtime";
import {
  RefreshRuntime,
  registerComponent,
  getComponentFamily,
  getComponentFamilyByType,
  applyRefresh
} from "../src/index.mjs";

const rawRuntime =
  refreshRuntimeModule && typeof refreshRuntimeModule === "object" && "default" in refreshRuntimeModule
    ? refreshRuntimeModule.default
    : refreshRuntimeModule;

// Contract 1: register registers a function component type under a unique family ID
function ComponentOne() {
  return "One";
}
{
  registerComponent(ComponentOne, "ComponentOne");
  const family = getComponentFamily("ComponentOne");
  assert.ok(family, "Family must be created for registered ID");
  assert.equal(family.current, ComponentOne);
  assert.equal(getComponentFamilyByType(ComponentOne), family);
  assert.equal(rawRuntime.getFamilyByID("ComponentOne"), family);
}

// Contract 2: register is idempotent when called again with the same component type
{
  registerComponent(ComponentOne, "ComponentOneDuplicate");
  assert.equal(getComponentFamily("ComponentOneDuplicate"), undefined);
  assert.equal(getComponentFamilyByType(ComponentOne), getComponentFamily("ComponentOne"));
}

// Contract 3: register links an updated component type to the existing family under the same family ID
function ComponentOneUpdated() {
  return "One-Updated";
}
{
  const existingFamily = getComponentFamily("ComponentOne");
  registerComponent(ComponentOneUpdated, "ComponentOne");
  const updatedFamily = getComponentFamily("ComponentOne");
  assert.equal(updatedFamily, existingFamily);
  assert.equal(getComponentFamilyByType(ComponentOneUpdated), existingFamily);
  assert.equal(existingFamily.current, ComponentOne);

  const refreshResult = applyRefresh();
  assert.ok(refreshResult);
  assert.equal(existingFamily.current, ComponentOneUpdated);
}

// Contract 4: register ignores non-function and non-object component types
{
  registerComponent(null, "NullComponent");
  registerComponent(12345, "NumberComponent");
  registerComponent("string-component", "StringComponent");
  assert.equal(getComponentFamily("NullComponent"), undefined);
  assert.equal(getComponentFamily("NumberComponent"), undefined);
  assert.equal(getComponentFamily("StringComponent"), undefined);
}

// Contract 5: register recursively registers forward_ref render function and memo inner type
{
  const renderFn = (props, ref) => null;
  const forwardRefComp = {
    $$typeof: Symbol.for("react.forward_ref"),
    render: renderFn
  };
  registerComponent(forwardRefComp, "ForwardRefWrapper");
  assert.ok(getComponentFamily("ForwardRefWrapper"));
  const renderFamily = getComponentFamily("ForwardRefWrapper$render");
  assert.ok(renderFamily);
  assert.equal(getComponentFamilyByType(renderFn), renderFamily);

  const memoFn = () => null;
  const memoComp = {
    $$typeof: Symbol.for("react.memo"),
    type: memoFn
  };
  registerComponent(memoComp, "MemoWrapper");
  assert.ok(getComponentFamily("MemoWrapper"));
  const memoTypeFamily = getComponentFamily("MemoWrapper$type");
  assert.ok(memoTypeFamily);
  assert.equal(getComponentFamilyByType(memoFn), memoTypeFamily);
}

console.log("All react-refresh.register contract tests passed successfully.");