https://github.com/lilactown/react-repl
A library for interacting with a live React application at a REPL.
https://github.com/lilactown/react-repl
clojurescript developer-tools react
Last synced: 10 months ago
JSON representation
A library for interacting with a live React application at a REPL.
- Host: GitHub
- URL: https://github.com/lilactown/react-repl
- Owner: lilactown
- License: apache-2.0
- Created: 2021-08-26T22:16:42.000Z (almost 5 years ago)
- Default Branch: main
- Last Pushed: 2021-08-28T00:12:20.000Z (almost 5 years ago)
- Last Synced: 2025-08-16T06:58:22.650Z (10 months ago)
- Topics: clojurescript, developer-tools, react
- Language: Clojure
- Homepage:
- Size: 11.7 KB
- Stars: 8
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-repl
[](https://clojars.org/town.lilac/react-repl)
A library for interacting with a live React application at a REPL.
## Intro
A \"fiber\" in React-lingo is a data representation of the current state of an
element in your application. Each element has a corresponding `type` - a
function, a class, or a built in type - that dictates how to respond to new
props or state dispatches. A fibers data also contains the props and state
last used to render it, any children or sibling fibers, as well as references
to platform objects like DOM nodes.
A \"root\" in React-lingo is the root fiber of an application in your JS
environment. These are created anytime you call e.g. `react-dom/render` or, in
React 18+, `react-dom/createRoot`. You can have multiple roots at a time, for
instance if you call `react-dom/render` multiple times to render different
parts of the page as different applications. Each root gets an associated ID,
an integer that starts at 1.
## Using
To use this library, include `react-repl.preloads` in your developer preloads.
Each time your application is re-rendered, a new tree of fibers is constructed
to represent the new state of the application. When that new fiber tree is
_committed_ - i.e changes are made to what's shown on the screen - the new
tree will be captured and placed in the `react-repl.state/roots` atom.
The functions in this namespace operate on this atom to get the root fiber and
search, display and interact with the fibers that were captured as of the last
render.
`react-repl.core/find-all` will give you the fibers of the last time a
specific component type was rendered. `react-repl.core/find` will return the
first fiber it finds for a component type. You can then use functions like
`react-repl.core/props`, `react-repl.core/children`, and
`react-repl.core/state` to inspect its properties as Clojure data.
`react-repl.core/fiber->map` will return a map corresponding to commonly
looked up information about the fiber.
Note that `state` can sometimes be a deeply nested datastructure. I find that
using `js/console.log` in a browser environment works better for me than
relying on printing at a REPL, but YMMV.