react-refresh 0.17.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.17.0
Kind: HOW

Use EXACTLY these public packages and versions:
  - pkg:npm/react-refresh@0.17.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:d92926a2c7703e1c0c2c83829089f8a074512bd2339c9114c3c707db984b1bf8","contract":["register registers a function component type under a specified identifier making it retrievable by family ID and type","register ignores non-object and non-function values without throwing","register ignores already registered types to avoid duplicate registrations","register queues a component update when re-registering an updated component under the same identifier until refreshed","register recursively registers nested inner types for forwardRef and memo component descriptors"],"goal":"verify react-refresh.register in pkg:npm/react-refresh@0.17.0","kind":"HOW","packages":["pkg:npm/react-refresh@0.17.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.17.0"],"schemaVersion":1,"subject":"pkg:npm/react-refresh@0.17.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.17.0"
      }
    },
    "node_modules/react-refresh": {
      "version": "0.17.0",
      "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.17.0.tgz",
      "integrity": "sha512-z6F7K9bV85EfseRCp2bzrpyQ0Gkw1uLoCel9XBVWPg/TjRj94SkJzUTGfOa4bs7iJvBWtQG0Wq7wnI0syw3EBQ==",
      "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.17.0"
  }
}

{
  "schemaVersion": 1,
  "goal": "verify react-refresh.register in pkg:npm/react-refresh@0.17.0",
  "kind": "HOW",
  "packages": [
    "pkg:npm/react-refresh@0.17.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 a stable identifier in the Fast Refresh runtime.
 *
 * @param {Function|object} type
 * @param {string} id
 */
export function register(type, id) {
  RefreshRuntime.register(type, id);
}

/**
 * Returns the family object associated with a given component identifier,
 * or undefined if the identifier has not been registered.
 *
 * @param {string} id
 * @returns {object|undefined}
 */
export function getFamilyByID(id) {
  return RefreshRuntime.getFamilyByID(id);
}

/**
 * Returns the family object associated with a given component type,
 * or undefined if the component type has not been registered.
 *
 * @param {Function|object} type
 * @returns {object|undefined}
 */
export function getFamilyByType(type) {
  return RefreshRuntime.getFamilyByType(type);
}

/**
 * Triggers a React Refresh update pass, resolving pending registrations
 * and updating the current pointer of registered component families.
 *
 * @returns {object|null}
 */
export function performReactRefresh() {
  return RefreshRuntime.performReactRefresh();
}

import assert from "node:assert/strict";
import refreshRuntimeModule from "react-refresh/runtime";
import {
  RefreshRuntime,
  register,
  getFamilyByID,
  getFamilyByType,
  performReactRefresh
} 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 specified identifier making it retrievable by family ID and type
function ButtonV1() {
  return "button-v1";
}
{
  register(ButtonV1, "ButtonComponent");
  const familyById = getFamilyByID("ButtonComponent");
  const familyByType = getFamilyByType(ButtonV1);

  assert.notEqual(familyById, undefined);
  assert.strictEqual(familyById, familyByType);
  assert.strictEqual(familyById.current, ButtonV1);
}

// Contract 2: register ignores non-object and non-function values without throwing
{
  assert.doesNotThrow(() => {
    register(null, "NullTarget");
    register(undefined, "UndefinedTarget");
    register("string", "StringTarget");
    register(123, "NumberTarget");
    register(true, "BooleanTarget");
  });
  assert.strictEqual(getFamilyByID("NullTarget"), undefined);
  assert.strictEqual(getFamilyByID("UndefinedTarget"), undefined);
  assert.strictEqual(getFamilyByID("StringTarget"), undefined);
  assert.strictEqual(getFamilyByID("NumberTarget"), undefined);
  assert.strictEqual(getFamilyByID("BooleanTarget"), undefined);
}

// Contract 3: register ignores already registered types to avoid duplicate registrations
{
  const initialFamily = getFamilyByID("ButtonComponent");
  register(ButtonV1, "ButtonComponentDifferentId");
  assert.strictEqual(getFamilyByID("ButtonComponentDifferentId"), undefined);
  assert.strictEqual(getFamilyByType(ButtonV1), initialFamily);
}

// Contract 4: register queues a component update when re-registering an updated component under the same identifier until refreshed
function ButtonV2() {
  return "button-v2";
}
{
  const existingFamily = getFamilyByID("ButtonComponent");
  register(ButtonV2, "ButtonComponent");

  // Before performReactRefresh is called, the family still points to ButtonV1
  assert.strictEqual(getFamilyByID("ButtonComponent"), existingFamily);
  assert.strictEqual(existingFamily.current, ButtonV1);

  // Both ButtonV1 and ButtonV2 map to the same family
  assert.strictEqual(getFamilyByType(ButtonV2), existingFamily);

  // Perform refresh applies the pending update to current
  const refreshResult = performReactRefresh();
  assert.notEqual(refreshResult, null);
  assert.strictEqual(existingFamily.current, ButtonV2);
}

// Contract 5: register recursively registers nested inner types for forwardRef and memo component descriptors
const ForwardRefComponent = {
  $$typeof: Symbol.for("react.forward_ref"),
  render: function InnerRender() {
    return "inner-render";
  }
};

const MemoComponent = {
  $$typeof: Symbol.for("react.memo"),
  type: function InnerMemo() {
    return "inner-memo";
  }
};
{
  register(ForwardRefComponent, "ForwardRefTarget");
  const forwardRefFamily = getFamilyByID("ForwardRefTarget");
  const forwardRefInnerFamily = getFamilyByID("ForwardRefTarget$render");

  assert.notEqual(forwardRefFamily, undefined);
  assert.strictEqual(forwardRefFamily.current, ForwardRefComponent);
  assert.notEqual(forwardRefInnerFamily, undefined);
  assert.strictEqual(forwardRefInnerFamily.current, ForwardRefComponent.render);

  register(MemoComponent, "MemoTarget");
  const memoFamily = getFamilyByID("MemoTarget");
  const memoInnerFamily = getFamilyByID("MemoTarget$type");

  assert.notEqual(memoFamily, undefined);
  assert.strictEqual(memoFamily.current, MemoComponent);
  assert.notEqual(memoInnerFamily, undefined);
  assert.strictEqual(memoInnerFamily.current, MemoComponent.type);
}

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