react-refresh 0.18.0: injectIntoGlobalHook

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.injectIntoGlobalHook 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.injectIntoGlobalHook

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:6e71b0b14cc164efc71fe5f745d26c5b7087e73d1bf3256392605702ddbd1754","contract":["injectIntoGlobalHook creates and initializes __REACT_DEVTOOLS_GLOBAL_HOOK__ on target object when undefined","injectIntoGlobalHook wraps hook.inject and registers refresh handlers for injected renderers","injectIntoGlobalHook tracks mounted fiber root lifecycles via onCommitFiberRoot and updates mounted root count","injectIntoGlobalHook registers pre-existing renderers present in hook.renderers map","injectIntoGlobalHook respects isDisabled flag and does not wrap methods when hook is disabled"],"goal":"verify react-refresh.injectIntoGlobalHook in pkg:npm/react-refresh@0.18.0","kind":"HOW","packages":["pkg:npm/react-refresh@0.18.0"],"schemaVersion":1,"symbols":["react-refresh.injectIntoGlobalHook"]},"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.injectIntoGlobalHook"],"verifierAdapter":"node-typescript@1"}

{
  "name": "sample-react-refresh-inject-into-global-hook",
  "version": "1.0.0",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "sample-react-refresh-inject-into-global-hook",
      "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-inject-into-global-hook",
  "version": "1.0.0",
  "private": true,
  "type": "module",
  "license": "MIT-0",
  "dependencies": {
    "react-refresh": "0.18.0"
  }
}

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

import refreshRuntimeModule from "react-refresh/runtime";

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

/**
 * Injects React Refresh runtime into a global scope object, creating __REACT_DEVTOOLS_GLOBAL_HOOK__
 * if undefined and attaching renderer injection and commit tracking hooks.
 *
 * @param {object} globalObject
 * @returns {object} The global devtools hook
 */
export function injectGlobalHook(globalObject) {
  RefreshRuntime.injectIntoGlobalHook(globalObject);
  return globalObject.__REACT_DEVTOOLS_GLOBAL_HOOK__;
}

/**
 * Returns the number of currently mounted fiber roots tracked by React Refresh.
 *
 * @returns {number}
 */
export function getMountedRootCount() {
  return RefreshRuntime._getMountedRootCount();
}

import assert from "node:assert/strict";
import refreshRuntimeModule from "react-refresh/runtime";
import { RefreshRuntime, injectGlobalHook, getMountedRootCount } from "../src/index.mjs";

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

// Contract 1: injectIntoGlobalHook creates and initializes __REACT_DEVTOOLS_GLOBAL_HOOK__ on target object when undefined
{
  const globalObj = {};
  const hook = injectGlobalHook(globalObj);

  assert.ok(hook, "hook should be defined on target object");
  assert.equal(globalObj.__REACT_DEVTOOLS_GLOBAL_HOOK__, hook);
  assert.equal(hook.supportsFiber, true, "supportsFiber must be true");
  assert.ok(hook.renderers instanceof Map, "renderers must be an instance of Map");
  assert.equal(typeof hook.inject, "function", "hook.inject must be a function");
  assert.equal(typeof hook.onScheduleFiberRoot, "function", "hook.onScheduleFiberRoot must be a function");
  assert.equal(typeof hook.onCommitFiberRoot, "function", "hook.onCommitFiberRoot must be a function");
  assert.equal(typeof hook.onCommitFiberUnmount, "function", "hook.onCommitFiberUnmount must be a function");
}

// Contract 2: injectIntoGlobalHook wraps hook.inject and registers refresh handlers for injected renderers
{
  const globalObj = {};
  const hook = injectGlobalHook(globalObj);

  let scheduledRefreshCount = 0;
  let registeredHandler = null;

  const rendererId = hook.inject({
    scheduleRefresh: () => {
      scheduledRefreshCount++;
    },
    setRefreshHandler: (fn) => {
      registeredHandler = fn;
    }
  });

  assert.equal(typeof rendererId, "number", "rendererId should be a number");
  assert.ok(rendererId >= 0, "rendererId should be non-negative");
}

// Contract 3: injectIntoGlobalHook tracks mounted fiber root lifecycles via onCommitFiberRoot and updates mounted root count
{
  const globalObj = {};
  const hook = injectGlobalHook(globalObj);

  const rendererId = hook.inject({
    scheduleRefresh: () => {},
    setRefreshHandler: () => {}
  });

  const initialMountedCount = getMountedRootCount();
  const mockFiberRoot = {
    current: {
      alternate: null,
      memoizedState: { element: true }
    }
  };

  hook.onCommitFiberRoot(rendererId, mockFiberRoot, null, false);
  assert.equal(
    getMountedRootCount(),
    initialMountedCount + 1,
    "mounted root count should increment after onCommitFiberRoot"
  );
}

// Contract 4: injectIntoGlobalHook registers pre-existing renderers present in hook.renderers map
{
  const existingRenderers = new Map();
  let preExistingScheduled = false;

  existingRenderers.set(42, {
    scheduleRefresh: () => {
      preExistingScheduled = true;
    },
    setRefreshHandler: () => {}
  });

  const globalObj = {
    __REACT_DEVTOOLS_GLOBAL_HOOK__: {
      renderers: existingRenderers,
      supportsFiber: true,
      inject: () => 43,
      onScheduleFiberRoot: () => {},
      onCommitFiberRoot: () => {},
      onCommitFiberUnmount: () => {}
    }
  };

  injectGlobalHook(globalObj);

  const initialCount = getMountedRootCount();
  const fiberRoot = {
    current: {
      alternate: null,
      memoizedState: { element: true }
    }
  };

  globalObj.__REACT_DEVTOOLS_GLOBAL_HOOK__.onCommitFiberRoot(42, fiberRoot, null, false);
  assert.equal(
    getMountedRootCount(),
    initialCount + 1,
    "mounted root count should increment for pre-existing renderer"
  );
}

// Contract 5: injectIntoGlobalHook respects isDisabled flag and does not wrap methods when hook is disabled
{
  const sentinelInject = () => "sentinel";
  const globalObj = {
    __REACT_DEVTOOLS_GLOBAL_HOOK__: {
      isDisabled: true,
      inject: sentinelInject
    }
  };

  rawRuntime.injectIntoGlobalHook(globalObj);
  assert.equal(
    globalObj.__REACT_DEVTOOLS_GLOBAL_HOOK__.inject,
    sentinelInject,
    "disabled hook should not wrap inject method"
  );
}

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