fix: type withLive's live prop, and type-check the stories - #421
Merged
Merged
Conversation
`live` was `Record<string, unknown>`, so wrapped components saw `unknown` for every key; it now uses the context's own type. Narrowing, so: major. Stories become `*.stories.tsx` and name their component, typing `args` as its props, so bad props fail `npm run typecheck`.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
There was a problem hiding this comment.
Copilot review overview
🟢 Approval recommended
No unresolved comments were supplied, and all approval-readiness assessments indicate approval readiness.
Review effort: Lite
Findings: None
What changed in this PR
This PR improves withLive typing and migrates the story harness to type-checked TypeScript.
Changes:
- Uses
LiveContextValuefor the injectedliveprop. - Adds typed stories, shared discovery, and browser smoke testing.
- Updates documentation, configuration, and changeset behavior.
| File | Description |
|---|---|
packages/react-live/tsconfig.stories.json |
Configures story type-checking. |
packages/react-live/stories/vite-env.d.ts |
Adds Vite typings. |
packages/react-live/stories/theme.ts |
Defines story harness styling. |
packages/react-live/stories/story.ts |
Adds typed story helpers. |
packages/react-live/stories/stories.browser.test.tsx |
Tests loaded stories. |
packages/react-live/stories/main.tsx |
Uses the shared loader. |
packages/react-live/stories/load.ts |
Centralizes story discovery. |
packages/react-live/stories/live.stories.tsx |
Migrates Live stories to typed TSX. |
packages/react-live/stories/index.html |
Loads the TypeScript entrypoint. |
packages/react-live/stories/editor.stories.tsx |
Migrates Editor stories to typed TSX. |
packages/react-live/src/hoc/withLive.tsx |
Applies the typed context value. |
packages/react-live/src/components/Live/LiveContext.ts |
Exports the context value type. |
packages/react-live/package.json |
Includes stories in type-checking. |
CONTRIBUTING.md |
Documents the typed story workflow. |
.changeset/olive-otters-listen.md |
Records the public typing change. |
.changeset/config.json |
Disables changelog thanks text. |
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
ilteoood
approved these changes
Sep 23, 2026
Merged
ryan-roemer
pushed a commit
that referenced
this pull request
Sep 23, 2026
# Releases ## react-live@5.0.0 ### Major Changes - [#418](#418) [`be53ccd`](be53ccd) - Support React 19 type definitions, add an `exports` map, drop `engines`, and raise the output target. `LivePreview`'s overloads referenced the global `JSX` namespace, which `@types/react@19` removed. Because those types are emitted into the published declarations, consumers on React 19 types failed to compile. They now use `React.JSX`, which resolves under both `@types/react@18` and `@types/react@19`. The package also gains an `exports` map with separate types for the ESM and CJS conditions. Filenames are unchanged from 4.1.x (`dist/index.js`, `dist/index.mjs`, `dist/index.d.ts`), so `main`, `module`, and `types` resolve exactly as before. Subpaths other than `./package.json` are no longer importable; only the package root was ever documented. Output is now built for `es2022` rather than `es6`, so the bundle may contain syntax such as optional chaining that previous releases transpiled away. The `engines` field is gone, along with the `node: ">= 0.12.0"` and `npm: ">= 2.0.0"` it declared. Both were years out of date, and neither constrained anything real: this is browser code, so the Node version that installs it has no bearing on whether it runs. npm will no longer print an engine warning against those bounds. None of this changes the public API -- same exports, same props, same `react >=18` peer range -- but the `exports` map and the raised output target are enough that a major release is the honest way to ship them. - [#421](#421) [`004b007`](004b007) - Type the `live` prop that `withLive` injects, instead of `Record<string, unknown>`. Wrapped components saw `unknown` for every key, so `live.element` could not be rendered and `live.error` could not be read without casting first. The prop now uses the same type the context is created with, which is the shape [the docs](https://github.com/FormidableLabs/react-live/blob/main/docs/api.md) have always described: `code`, `error`, `element`, `onError`, `onChange`. ```tsx const Panel = withLive(({ live }) => { const Result = live.element; // was `unknown`, now a component return Result ? <Result /> : <pre>{live.error}</pre>; }); ``` Types only, with no runtime change. It is a narrowing, so a wrapped component that reads a key outside that shape off `live` will now fail to compile. ### Patch Changes - [#418](#418) [`be53ccd`](be53ccd) - Forward the `Editor` `prism` prop to `prism-react-renderer`. It was typed but never passed through, so a custom Prism instance was silently ignored. - [#418](#418) [`be53ccd`](be53ccd) - Stop emitting React's `__self` and `__source` debug props from transpiled code. Sucrase adds these props to every element it compiles. They describe a source file, and there is no source file here -- the code comes from a live editor rather than from disk, so the filename sucrase emitted was always the empty string. React ignores both props, and React 19 additionally treats `__self` as the signature of an outdated JSX transform, logging "Your app (or one of its dependencies) is using an outdated JSX transform" to the console of every page rendering a `LiveProvider`. Transpiling with sucrase's `production` option drops both props, and with them the `_jsxFileName` constant that the transform pipeline used to splice out and re-add solely to keep `__source` resolvable. - [#418](#418) [`be53ccd`](be53ccd) - Add `getDerivedStateFromError` to the internal error boundary, so a runtime error in live code no longer logs a React warning about it. Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
This branch was successfully deployed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
livewasRecord<string, unknown>, so wrapped components sawunknownfor every key; it now uses the context's own type. Narrowing, so: major.*.stories.tsxand name their component, typingargsas its props, so bad props failnpm run typecheck.