internal(website): Declare playground editor globals with valid TypeScript

[ntucker]

Requested by Nathaniel · project thread

Follow-up from the Staff review on #4104.

Motivation

Before: typeLibs.ts registered four libs as declare globals { … }, which is not TypeScript. Playground globals still typed only because TS parser error recovery turns that into an expression plus a block in a script file, leaking everything inside to global scope. DateTimeFormat (not an export of the temporal lib) silently became any, use and mockFetch (both in the preview scope) were "Cannot find name", and TextInput/TextArea/Formatted props referenced unresolved names (InputHTMLAttributes, Formatter), so they were any.

After: every extra lib is valid TS with zero lib diagnostics. The same globals type-check, and the missing ones are now typed:

// no imports, in any playground
const [n] = React.useState(0);
const todos = useSuspense(TodoResource.getList);
DateTimeFormat('en-US', { dateStyle: 'medium' }).format(Temporal.Now.instant()); // was any, now typed
const user = use(promise); // was "Cannot find name 'use'"
const fetchTodos = mockFetch(() => todos, 'getTodos'); // was "Cannot find name 'mockFetch'"
<NumberFlow value={n} />;
<strike>x</strike>;

Solution

• editor-types/globals.d.ts is mounted as an ambient module (playground-globals), with type dropped from its export list. Then one module-file lib aliases each export into declare global with export import X = _globals.X, alongside React, JSX (= React.JSX), use, NumberFlow, Temporal, DateTimeFormat, BigNumber and Manager. Array/Object stay built-in (they would redeclare lib globals; schema.Array works).
• The <strike> JSX augmentation now targets declare module 'react'.
• Preview-scope declarations add mockFetch, and TextInput/TextArea/Formatted use React.* types. TextArea uses TextareaHTMLAttributes (in the component too), since InputHTMLAttributes lacks rows and would have flagged docs/core/shared/_useLoading.mdx.
• Includes internal(website): Type React jsx-runtime, path-to-regexp and bignumber.js in playgrounds #4137 and internal(website): Type csstype and number-flow in playgrounds #4139 (module typing follow-ups: react/jsx-runtime, path-to-regexp, bignumber.js), merged into this branch.

Verification

• Real browser (docs dev server, Monaco 0.56 / TS 5.9.3): recorded Monaco markers on 39 docs pages with playgrounds before and after. They are identical. A probe model confirms React, Temporal, NumberFlow, data-client exports, JSX.Element and <strike> resolve as before, DateTimeFormat/use are now typed, and unknown names still error.
• Offline TS 5.9.3 harness running the real addTypeLibs over all 143 playgrounds (348 files across docs/ incl. Vue, blog and homepage demos): 0 files with changed diagnostics.
• yarn workspace rdc-website typecheck, yarn lint and Playground tests clean.

Notes

Names only typed before through the leak (e.g. Controller, State, internal $1 helpers) are no longer global. No docs playground uses them without importing. A global Intl is not redeclared since it would clash with the lib's Intl.

🤖 Generated with Claude Code

https://claude.ai/code/session_01TkVym3YjjuSjBKhLLwvZm6

---

Note

Low Risk
Changes are limited to docs playground Monaco typings and editor-types build scripts; runtime preview behavior is unchanged aside from stricter TypeScript on design-system props.

Overview
Replaces invalid declare globals { … } Monaco extra libs with proper module mounting and a globalScopeLib() that aliases preview-scope exports (from rollup globals.d.ts via playground-globals) into declare global using export import, alongside React, use, NumberFlow, Temporal, DateTimeFormat, and BigNumber. Array/Object are skipped so built-in types stay intact.

Editor-types pipeline: copywebsitetypes.sh now strips csstype comments, fixes react/jsx-runtime imports, copies path-to-regexp and updated bignumber.js typings, and runs a single editor-types.rollup.config.js (replacing separate uuid/globals rollups) to bundle uuid, inlined @number-flow/react, and globals.

typeLibs.ts adds csstype, react/jsx-runtime, and path-to-regexp module libs; moves the <strike> JSX augmentation to declare module 'react'; and extends preview-scope declarations (mockFetch, React.* prop types). TextArea and mockFetch in scope.ts get matching type fixes (TextareaHTMLAttributes, generics).

^{Reviewed by Cursor Bugbot for commit 67c0524. Bugbot is set up for automated code reviews on this repo. Configure here.}

[changeset-bot]

⚠️ No Changeset found

Latest commit: 67c0524

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated
docs-site	Ready	Preview	Oct 5, 2026 3:29am UTC

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 98.06%. Comparing base (74e67fa) to head (60c44b2).
⚠️ Report is 3 commits behind head on master.

Additional details and impacted files

@@           Coverage Diff           @@
##           master    #4136   +/-   ##
=======================================
  Coverage   98.06%   98.06%           
=======================================
  Files         163      163           
  Lines        3095     3095           
  Branches      616      616           
=======================================
  Hits         3035     3035           
  Misses         18       18           
  Partials       42       42           

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.