react-repl.core
react-repl.core
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.
# react-repl.core 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.
all-fiberscljs
(all-fibers)(all-fibers id)Returns a seq of all the fibers. Optionally provide a root ID in the case that you have multiple React roots in the environment.
Returns a seq of all the fibers. Optionally provide a root ID in the case that you have multiple React roots in the environment.
child-fibercljs
(child-fiber fiber)Returns the direct child of the fiber.
Returns the direct child of the fiber.
childrencljs
(children fiber)Returns all of the direct children of this fiber.
Returns all of the direct children of this fiber.
current-fibercljs
(current-fiber)(current-fiber id)Gets the current fiber rendered at the root.
If no root-id is passed in, assumes that it is 1, which is standard if
only a single React root exists in the JS environment.
Gets the current fiber rendered at the root. If no root-id is passed in, assumes that it is `1`, which is standard if only a single React root exists in the JS environment.
display-typecljs
(display-type fiber)Returns a human-readable version of the fiber type.
Returns a human-readable version of the fiber type.
fiber->mapcljs
(fiber->map fiber)Returns the fiber as a map for display.
Returns the fiber as a map for display.
fiber?cljs
(fiber? x)Returns true or false whether x is a React fiber.
Returns true or false whether `x` is a React fiber.
findcljs
(find type)(find type root-id)Find the first fiber currently rendered that use a component type.
Find the first fiber currently rendered that use a component type.
find-allcljs
(find-all type)(find-all type root-id)Find all currently rendered fibers that use a component type.
Find all currently rendered fibers that use a component type.
has-child?cljs
(has-child? fiber)Returns true or false whether the fiber has a child
Returns true or false whether the fiber has a child
hook-depscljs
(hook-deps hook)Returns the last rendered deps of a hook, if applicable.
Returns the last rendered deps of a hook, if applicable.
hook-dispatchcljs
(hook-dispatch {:keys [dispatch] :as _hook} & args)Dispatches a change with a useState or useReducer hook.
Dispatches a change with a useState or useReducer hook.
parentcljs
(parent fiber)Returns the direct parent of the fiber.
Returns the direct parent of the fiber.
propscljs
(props fiber)Returns the current props of the fiber.
Returns the current props of the fiber.
set-statecljs
(set-state fiber f)Tries to set the state of a fiber constructed out of a class component.
Returns true if fiber is of a valid class component and nil if not.
Tries to set the state of a fiber constructed out of a class component. Returns `true` if fiber is of a valid class component and `nil` if not.
sibling-fibercljs
(sibling-fiber fiber)Returns the sibling to the right of the fiber.
Returns the sibling to the right of the fiber.
siblingscljs
(siblings fiber)Returns all siblings to hte right of the fiber.
Returns all siblings to hte right of the fiber.
statecljs
(state fiber)Returns the current state (hooks or class component state) of the fiber.
Returns the current state (hooks or class component state) of the fiber.
typecljs
(type fiber)Returns the element type (class, function component, etc.) used to construct the fiber.
Returns the element type (class, function component, etc.) used to construct the fiber.
cljdoc is a website building & hosting documentation for Clojure/Script libraries
× close