Skip to content

fix(hotkeys): Skip the server label warning on runtimes without process - #223

Merged
KevinVandy merged 1 commit into
mainfrom
fix/ssr-labels-review-followups
Nov 1, 2026
Merged

KevinVandy merged 1 commit into
mainfrom
fix/ssr-labels-review-followups

Conversation

@KevinVandy

@KevinVandy KevinVandy commented Nov 1, 2026 •

Copy link
Copy Markdown
Member

Follow-up to #221.

  • warnServerPlatform checks typeof process before reading NODE_ENV. On runtimes without process, such as Cloudflare Workers without a bundler define, formatting a label during server rendering used to throw a ReferenceError. NODE_ENV is still checked before the server check, so production builds still drop the warning (verified with an esbuild production bundle).
  • Adds a test that formats a label on a server runtime with no process.
  • The React "Render a label only in the browser" snippet now formats inside a ShortcutLabel child. A formatForDisplay call written directly as a ClientOnly child runs in the parent, which can be a Next.js Server Component.
  • The React, Octane, Solid and Angular quick starts say to set the provider platform from the request, not only to use the formatter hook.
  • Patch changeset for @tanstack/hotkeys.

Summary by CodeRabbit

  • Bug Fixes
    • Fixed shortcut formatting in server-rendered environments without a process global, including Cloudflare Workers.
  • Documentation
    • Clarified how to configure the user’s platform for server-rendered shortcut labels across supported frameworks.
    • Updated the React example to format shortcut labels on the client, avoiding server-rendered labels that may not match the user’s platform.

- The warning checks for `process` before reading NODE_ENV, so Workers no longer throw, and production builds still drop it.
- The React client-only snippet formats inside a child component, so a Server Component parent can't pass in the server's label.
- Quick starts mention setting the provider platform from the request.
@changeset-bot

changeset-bot Bot commented Nov 1, 2026

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 21e35ef

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 18 packages
Name Type
@tanstack/hotkeys Patch
@tanstack/alpine-hotkeys Patch
@tanstack/angular-hotkeys Patch
@tanstack/ember-hotkeys Patch
@tanstack/hotkeys-devtools Patch
@tanstack/lit-hotkeys Patch
@tanstack/octane-hotkeys Patch
@tanstack/preact-hotkeys Patch
@tanstack/react-hotkeys Patch
@tanstack/solid-hotkeys Patch
@tanstack/svelte-hotkeys Patch
@tanstack/vue-hotkeys Patch
@tanstack/angular-hotkeys-devtools Patch
@tanstack/preact-hotkeys-devtools Patch
@tanstack/react-hotkeys-devtools Patch
@tanstack/solid-hotkeys-devtools Patch
@tanstack/svelte-hotkeys-devtools Patch
@tanstack/vue-hotkeys-devtools Patch

Not sure what this means? Click here to learn what changesets are.

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

@coderabbitai

coderabbitai Bot commented Nov 1, 2026 •

Copy link
Copy Markdown

Review in Change Stack →

No actionable comments were generated in the recent review.

Recent review info
Run configuration
Commits

Reviewing files that changed from the base of the PR and between ad7f4a4 and 21e35ef.

Files selected for processing: 9
  • .changeset/server-warning-workers.md
  • .intent/review-state.json
  • docs/framework/angular/quick-start.md
  • docs/framework/octane/quick-start.md
  • docs/framework/react/guides/formatting-display.md
  • docs/framework/react/quick-start.md
  • docs/framework/solid/quick-start.md
  • packages/hotkeys/src/_server.ts
  • packages/hotkeys/tests/server-platform.test.ts

Included review availability: This review used your included allowance. Your plan provides up to 4 included reviews per hour; 3 remain after this review.

Walkthrough

The server warning now checks whether process exists before reading NODE_ENV. A test covers formatForDisplay in a Cloudflare Workers runtime. Framework quick starts add provider platform guidance, and the React formatting example moves formatting into a client component.

Changes: Server-rendering and platform formatting

Layer / File(s) Summary
Worker-safe server warning
.changeset/server-warning-workers.md, .intent/review-state.json, packages/hotkeys/src/_server.ts, packages/hotkeys/tests/server-platform.test.ts
warnServerPlatform checks that process exists before reading NODE_ENV. A test verifies that formatForDisplay('Mod+S') returns Ctrl+S when process is undefined.
Provider platform guidance
.intent/review-state.json, docs/framework/angular/quick-start.md, docs/framework/octane/quick-start.md, docs/framework/react/quick-start.md, docs/framework/solid/quick-start.md
The server-rendering guidance in each quick start now says to set the provider’s platform from the request.
React formatting example
.intent/review-state.json, docs/framework/react/guides/formatting-display.md
The example formats a hotkey in ShortcutLabel inside ClientOnly. The guidance notes that a parent may be a Next.js Server Component.

Estimated code review effort: 2 (Simple) | ~10 minutes

Change: Bug fix

Possibly related PRs

  • TanStack/hotkeys#221: Adds the server-platform detection and formatter path that this change updates.
  • TanStack/hotkeys#204: Changes React Server Component package boundaries; this change updates a formatting example for that boundary.

Suggested reviewers: schiller-manuel

Merge Risk: Minimal · up to 21e35

No actionable merge-blocking risk is identified in this change.

Pre-merge checks: Passed 4 · Failed 1

Failed Failed checks: 1 warning

Check name Status Explanation Resolution
Description check Warning The description explains the implementation, test coverage, documentation updates, and changeset. It does not use the required ## 🎯 Changes, ## ✅ Checklist, and ## 🚀 Release Impact sections, and… Reformat the description with all required template sections. Complete each checklist item and explicitly select the applicable release-impact option, including the generated changeset confirmation.
Passed Passed checks: 4 passed
Check name Status Explanation
Title check Passed The title clearly identifies the main change: skipping the server label warning when process is unavailable.
Docstring Coverage Passed Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff with cyclomatic complexity of at least 2. Documentat…
Linked Issues check Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check Passed Check skipped because no linked issues were found for this pull request.
Full details: Docstring Coverage

Explanation

Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff with cyclomatic complexity of at least 2. Documentation-only edits and deletions within surviving functions are included; unchanged diff context and fully deleted functions are excluded. Analyzed 1 functions across 2 files. (7 skipped: 7 unsupported.)

Full details: Description check

Explanation

The description explains the implementation, test coverage, documentation updates, and changeset. It does not use the required ## 🎯 Changes, ## ✅ Checklist, and ## 🚀 Release Impact sections, and it omits the checklist items and explicit release-impact selection.

Resolution

Reformat the description with all required template sections. Complete each checklist item and explicitly select the applicable release-impact option, including the generated changeset confirmation.

Finishing Touches
Generate docstrings
  • Commit to this branch
  • Create a new PR
Generate unit tests (beta)
  • Commit to this branch
  • Create a new PR
  • Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

Share

A rabbit checks the server’s gate,
No process? It can still format.
“Ctrl+S,” the shortcut hops,
Through client paths and platform props.
Quick-start pages mark the way.

@github-actions

github-actions Bot commented Nov 1, 2026

Copy link
Copy Markdown
Contributor

🚀 Changeset Version Preview

1 package(s) bumped directly, 17 bumped as dependents.

🟩 Patch bumps

Package Version Reason
@tanstack/hotkeys 0.23.0 → 0.23.1 Changeset
@tanstack/alpine-hotkeys 0.11.0 → 0.11.1 Dependent
@tanstack/angular-hotkeys 0.21.0 → 0.21.1 Dependent
@tanstack/angular-hotkeys-devtools 0.5.0 → 0.5.1 Dependent
@tanstack/ember-hotkeys 0.10.0 → 0.10.1 Dependent
@tanstack/hotkeys-devtools 1.8.0 → 1.8.1 Dependent
@tanstack/lit-hotkeys 0.22.0 → 0.22.1 Dependent
@tanstack/octane-hotkeys 0.10.0 → 0.10.1 Dependent
@tanstack/preact-hotkeys 0.20.0 → 0.20.1 Dependent
@tanstack/preact-hotkeys-devtools 0.13.0 → 0.13.1 Dependent
@tanstack/react-hotkeys 0.21.0 → 0.21.1 Dependent
@tanstack/react-hotkeys-devtools 0.14.0 → 0.14.1 Dependent
@tanstack/solid-hotkeys 0.20.0 → 0.20.1 Dependent
@tanstack/solid-hotkeys-devtools 0.13.0 → 0.13.1 Dependent
@tanstack/svelte-hotkeys 0.20.0 → 0.20.1 Dependent
@tanstack/svelte-hotkeys-devtools 0.5.0 → 0.5.1 Dependent
@tanstack/vue-hotkeys 0.21.0 → 0.21.1 Dependent
@tanstack/vue-hotkeys-devtools 0.13.0 → 0.13.1 Dependent

@pkg-pr-new

pkg-pr-new Bot commented Nov 1, 2026

Copy link
Copy Markdown

Open in StackBlitz

@tanstack/alpine-hotkeys

npm i https://pkg.pr.new/@tanstack/alpine-hotkeys@223

@tanstack/angular-hotkeys

npm i https://pkg.pr.new/@tanstack/angular-hotkeys@223

@tanstack/angular-hotkeys-devtools

npm i https://pkg.pr.new/@tanstack/angular-hotkeys-devtools@223

@tanstack/ember-hotkeys

npm i https://pkg.pr.new/@tanstack/ember-hotkeys@223

@tanstack/hotkeys

npm i https://pkg.pr.new/@tanstack/hotkeys@223

@tanstack/hotkeys-devtools

npm i https://pkg.pr.new/@tanstack/hotkeys-devtools@223

@tanstack/lit-hotkeys

npm i https://pkg.pr.new/@tanstack/lit-hotkeys@223

@tanstack/octane-hotkeys

npm i https://pkg.pr.new/@tanstack/octane-hotkeys@223

@tanstack/preact-hotkeys

npm i https://pkg.pr.new/@tanstack/preact-hotkeys@223

@tanstack/preact-hotkeys-devtools

npm i https://pkg.pr.new/@tanstack/preact-hotkeys-devtools@223

@tanstack/react-hotkeys

npm i https://pkg.pr.new/@tanstack/react-hotkeys@223

@tanstack/react-hotkeys-devtools

npm i https://pkg.pr.new/@tanstack/react-hotkeys-devtools@223

@tanstack/solid-hotkeys

npm i https://pkg.pr.new/@tanstack/solid-hotkeys@223

@tanstack/solid-hotkeys-devtools

npm i https://pkg.pr.new/@tanstack/solid-hotkeys-devtools@223

@tanstack/svelte-hotkeys

npm i https://pkg.pr.new/@tanstack/svelte-hotkeys@223

@tanstack/svelte-hotkeys-devtools

npm i https://pkg.pr.new/@tanstack/svelte-hotkeys-devtools@223

@tanstack/vue-hotkeys

npm i https://pkg.pr.new/@tanstack/vue-hotkeys@223

@tanstack/vue-hotkeys-devtools

npm i https://pkg.pr.new/@tanstack/vue-hotkeys-devtools@223

commit: 21e35ef

@KevinVandy
KevinVandy merged commit 04c7445 into main Nov 1, 2026
15 checks passed
@KevinVandy
KevinVandy deleted the fix/ssr-labels-review-followups branch November 1, 2026 18:55
@github-actions github-actions Bot mentioned this pull request Nov 1, 2026
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.

1 participant