Skip to content

internal(website): Type React jsx-runtime, path-to-regexp and bignumber.js in playgrounds - #4137

Merged
ntucker merged 1 commit into
claude/project-thread-ynhl0cfrom
claude/project-thread-lkvlr1
Oct 4, 2026
Merged

ntucker merged 1 commit into
claude/project-thread-ynhl0cfrom
claude/project-thread-lkvlr1

Conversation

@ntucker

@ntucker ntucker commented Oct 4, 2026 •

Copy link
Copy Markdown
Collaborator

Requested by Nathaniel · project thread

Stacked on #4136 (base is its branch; retarget to master once #4104 and #4136 merge). Follow-up for the pre-existing module-typing gaps noted there.

Motivation

Before: the playground editor mounted react/jsx-runtime as declare module "react/jsx-runtime" { import './'; }, which exports nothing (TS2439 inside the lib), so the @data-client/react libs' react_jsx_runtime.JSX references errored and jsx/jsxs imports failed. path-to-regexp was never mounted, so @data-client/rest's PathFunction/ParamData were unresolved. editor-types/bignumber.d.ts was a stale v9 stub pointing at a types.d.ts that was never mounted, so bignumber.js was any, and BigNumber (provided by the preview scope) was "Cannot find name" without an import.

After:

import BigNumber from 'bignumber.js';
const price = new BigNumber('1.5'); // was any, now BigNumber
import { jsx } from 'react/jsx-runtime'; // was "has no exported member 'jsx'"

// no import, in any playground
const total = BigNumber.sum(1, 2); // was "Cannot find name 'BigNumber'"
type V = BigNumber.Value;

Solution

  • copywebsitetypes.sh now copies @types/react/jsx-runtime.d.ts (with "./" rewritten to "react", since ambient modules can't use relative imports), path-to-regexp/dist/index.d.ts, and bignumber.js/dist/bignumber.d.mts (v11 moved its types to dist/, so the old copy path no longer existed). The generated copies are committed like the other editor types.
  • MODULE_LIBS entries now name their mount file instead of a directory, so react/jsx-runtime mounts at @types/react/jsx-runtime.d.ts alongside the new path-to-regexp entry. The hand-written jsx-runtime stub is gone.
  • globalScopeLib() adds export import BigNumber = _BigNumber, so the global is a value, type and namespace like the import.

Verification

  • Offline harness (Monaco 0.56's own tsWorker + TS 5.9.3 running the real fetchTypeLibs/addTypeLibs) over 119 playgrounds (281 files) in docs/, blog, pages and homepage demos: no playground diagnostics changed. In the libs, the TS2439/TS2694 jsx-runtime errors, both Cannot find module 'path-to-regexp' errors and the bignumber stub errors are gone; the only new lib diagnostics are TS1038 (declare inside declare module), which every existing lib already has and skipLibCheck hides.
  • Real browser (docs dev server, jsdelivr CDN routed to node_modules/monaco-editor): Monaco markers on 10 pages (homepage, network-transform, computed-properties, RestEndpoint, resource, Collection, …) are identical before and after. A probe model confirms BigNumber global and import are typed, jsx resolves, and unknown names still error.
  • yarn workspace rdc-website typecheck and lint clean.

🤖 Generated with Claude Code

https://claude.ai/code/session_01W5R8xxJwz7dAy3Uk2v5eH5


Generated by Claude Code


Note

Low Risk
Changes are limited to playground editor type vendoring and Monaco wiring; no runtime app or package API behavior.

Overview
Improves Monaco intellisense in the docs playground by mounting real type definitions for modules that @data-client libs already reference.

copywebsitetypes.sh now vendors @types/react/jsx-runtime (with ./ imports rewritten to react), path-to-regexp from dist/, and bignumber.js v11 types from dist/bignumber.d.mts instead of the broken v9 stub path.

typeLibs.ts registers react/jsx-runtime and path-to-regexp, mounts each lib at an explicit node_modules/... file path (not always index.d.ts), drops the empty hand-written jsx-runtime shim, and exposes BigNumber as a typed global in globalScopeLib() alongside the preview scope.

Reviewed by Cursor Bugbot for commit 8a9b608. Bugbot is set up for automated code reviews on this repo. Configure here.

…er.js in playgrounds

Mount real declarations for `react/jsx-runtime` (was an empty stub),
`path-to-regexp` (never mounted, so @data-client/rest's PathFunction and
ParamData were unresolved) and `bignumber.js` (stub whose types were never
mounted), and declare `BigNumber` as a playground global since the preview
scope provides it.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01W5R8xxJwz7dAy3Uk2v5eH5
@changeset-bot

changeset-bot Bot commented Oct 4, 2026

Copy link
Copy Markdown

⚠️ No Changeset found

Latest commit: 8a9b608

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

vercel Bot commented Oct 4, 2026 •

Copy link
Copy Markdown

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

Project Deployment Actions Updated
docs-site Ready Ready Preview Oct 4, 2026 2:27am UTC

Request Review

@codecov

codecov Bot commented Oct 4, 2026

Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 97.95%. Comparing base (bc2c840) to head (8a9b608).

Additional details and impacted files
@@                      Coverage Diff                      @@
##           claude/project-thread-ynhl0c    #4137   +/-   ##
=============================================================
  Coverage                         97.95%   97.95%           
=============================================================
  Files                               158      158           
  Lines                              3088     3088           
  Branches                            615      615           
=============================================================
  Hits                               3025     3025           
  Misses                               18       18           
  Partials                             45       45           

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

@ntucker
ntucker merged commit 2b1c92d into claude/project-thread-ynhl0c Oct 4, 2026
22 checks passed
@ntucker
ntucker deleted the claude/project-thread-lkvlr1 branch October 4, 2026 03:18
ntucker added a commit that referenced this pull request Oct 5, 2026
…cript (#4136)

* internal(website): Reorganize Playground into editor/monaco/preview

Split the 362-line monaco-init into focused modules (setup, typeLibs,
theme, navigation, modelPath), group preview execution under preview/,
and replace forwarding modules with direct imports. Behavior is
unchanged; the new README documents the SSR, incremental-loading,
mobile/bot and hidden-tab invariants a future change must keep.

- monaco/: setup side effect, table-driven type libs (same chunks and
  order), cross-tab navigation, `/<id>/<path>` model URI helpers
- editor/: InteractiveEditor (Monaco or mobile react-live) and
  StaticEditor (SSR/crawler/loading markup)
- userAgent.ts: one source for bot/mobile regexes (isGoogleBot → isBot)
- Remove PlaygroundEditor, PlaygroundLiveEditor, DiffEditorChooser
  aliases, the unused readOnly prop, and unreferenced resources/
- Unit tests for highlight selections and model paths

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_015H36Yk4WBpytw9L7RRVCTK

* internal(website): Keep highlightSelections free of website-only deps

CI runs Playground unit tests without website dependencies installed,
so parse the highlight range in InteractiveEditor and pass line numbers.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_015H36Yk4WBpytw9L7RRVCTK

* internal(website): Cover useModelId and empty highlight ranges

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_015H36Yk4WBpytw9L7RRVCTK

* internal(website): Restore PlaygroundEditor, PlaygroundLiveEditor, DiffEditorChooser, readOnly and resources

Keep these entry points and the readOnly option available for future
use; they now point at the reorganized editor modules.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_015H36Yk4WBpytw9L7RRVCTK

* internal(website): Restore deletions Staff already accepted

cf2de88 brought the dead files and the unused editor prop back.
This commit restores the deletions Staff already accepted.

Review: #4104 (review)

Co-authored-by: Nathaniel Tucker <me@ntucker.me>

* internal(website): Keep restored Playground files and readOnly prop

Reverts 82bf2d0 per Nathaniel's choice to keep PlaygroundEditor,
DiffEditorChooser, the readOnly prop and Playground/resources for now.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_015H36Yk4WBpytw9L7RRVCTK

* internal(website): Correct useModelId comment and DiffEditor README chain

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_015H36Yk4WBpytw9L7RRVCTK

* internal(website): Scope import completions per playground, accept bare path= metastrings

Import completions for relative paths now list only files from the same
playground instead of every Monaco model on the page. Fence metastrings
accept unquoted path=a.ts (used in docs/rest/api/RestEndpoint.md). Also
prettier-formats the Playground README.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_015H36Yk4WBpytw9L7RRVCTK

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

`declare globals { … }` is not TypeScript; the playground globals only typed
because parser error recovery leaked the wrapped declarations into global
scope, and DateTimeFormat silently became `any`.

Mount editor-types/globals.d.ts as a module and alias its exports, React,
JSX, NumberFlow, Temporal, DateTimeFormat and Manager into `declare global`.
Also type TextInput/TextArea/Formatted props that referenced unresolved names.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01TkVym3YjjuSjBKhLLwvZm6

* internal(website): Type use and mockFetch playground globals

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01TkVym3YjjuSjBKhLLwvZm6

* internal(website): Type React jsx-runtime, path-to-regexp and bignumber.js in playgrounds (#4137)

Mount real declarations for `react/jsx-runtime` (was an empty stub),
`path-to-regexp` (never mounted, so @data-client/rest's PathFunction and
ParamData were unresolved) and `bignumber.js` (stub whose types were never
mounted), and declare `BigNumber` as a playground global since the preview
scope provides it.


Claude-Session: https://claude.ai/code/session_01W5R8xxJwz7dAy3Uk2v5eH5

Co-authored-by: Claude <noreply@anthropic.com>

* internal(website): Type csstype and number-flow in playgrounds (#4139)

* internal(website): Type React jsx-runtime, path-to-regexp and bignumber.js in playgrounds

Mount real declarations for `react/jsx-runtime` (was an empty stub),
`path-to-regexp` (never mounted, so @data-client/rest's PathFunction and
ParamData were unresolved) and `bignumber.js` (stub whose types were never
mounted), and declare `BigNumber` as a playground global since the preview
scope provides it.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01W5R8xxJwz7dAy3Uk2v5eH5

* internal(website): Type csstype and number-flow in playgrounds

React's CSSProperties and NumberFlow's props resolved through unmounted
modules, so style values and NumberFlow format/trend/plugins were any.
Mount csstype (comments stripped, 85KB -> 31KB gzipped) and a bundled
number-flow/lite; number-flow/plugins re-exports from it.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01SP4rqYKdew65uNyP8xeJ9m

* internal(website): Bundle @number-flow/react types with number-flow

Bundle @number-flow/react's .d.ts with its number-flow/lite and
number-flow/plugins imports inlined, instead of mounting those as
separate modules with a hand-written plugins stub. uuid and number-flow
now share one editor-types rollup config and resolver.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01SP4rqYKdew65uNyP8xeJ9m

---------

Co-authored-by: Claude <noreply@anthropic.com>

* internal(website): Simplify Playground metastring, model path and type-lib helpers

- One metaValue() parser for title= and path= (quotes optional for both)
- One anchored model-id regex; stripModelId is a replace
- Mark preview-scope global libs in MODULE_LIBS instead of modules[0]
- language is required on InteractiveEditor (codeModel always sets it)
- Drop unused return from Monaco setup

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_015H36Yk4WBpytw9L7RRVCTK

* internal(website): Simplify playground globals parsing

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01TkVym3YjjuSjBKhLLwvZm6

* internal(website): Simplify playground editor-types build

Bundle globals.d.ts from the editor-types rollup config (one rollup run,
identical output), make mockFetch generic to match its editor declaration,
and trim the README note.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01TkVym3YjjuSjBKhLLwvZm6

---------

Co-authored-by: Claude <noreply@anthropic.com>
Co-authored-by: Cursor Agent <cursoragent@cursor.com>

This branch was successfully deployed

1 active deployment
Preview — 8a9b6081 Deployed Oct 4, 2026 by vercel[bot]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants