E.g. let’s say I want to render a spinner when a statechart is in a certain state or has a certain property in data. I’d love to refer directly to that. I know there’s a way where statechart modifies state of a fulcro component but that replicates state between statechart and the components
any component can query for the current config of a chart…seems to me it’s just that (contains? current-config :state-of-interest)
So I add a query for {[::statecharts/session-id :chart-id] [::statecharts/configuration]} to my component query vector?
Not as a join…the two top-level tables as link idents is easiest. See the first two of: https://fulcrologic.github.io/statecharts/#_functions
ok so I added this join to a component query to grab states of a statemachine into the component:
{[:com.fulcrologic.statecharts/session-id sroute/session-id]
[:com.fulcrologic.statecharts/configuration]}
I thought that grabbing the whole link ident table (so grabbing data about every state machine) would mean there would be much more rerendering triggered. Bad news is that when I am using istate the chart started has a random ID so I cannot construct this sort of a queryI'm getting back into a Fulcro v3.5.24 codebase that hasn't been touched in a few years. Everything is working, but unfortunately the Fulcro Inspect devtools extension (`v4.1.0`) is not recognizing the app as a Fulcro app. I haven't changed anything with the shadow-cljs.edn but I did update some dep versions in deps.edn to get things to build. I'm unable to upgrade Fulcro at the moment because I'm getting an error about com.fulcrologic.fulcro.rendering.multiple-roots-renderer missing in newer versions. I have a complicated autocomplete component that's using that. I'm curious if you have any suggestions for getting Inspect working with this older code base or tips on how to upgrade this complicated component to something else: https://github.com/thosmos/riverdb/blob/master/src/rad/riverdb/rad/ui/controls/autocomplete.cljc
The console is showing that Fulcro Inspect 3.x is loading so I'm guessing that's not compatible with the latest Inspect browser extension?
main.js:451 Installing CLJS DevTools 1.0.7 and enabling features :formatters :hints :async
main.js:451 2026-03-18T19:59:42.785Z INFO [com.fulcrologic.fulcro.inspect.inspect-client:325] - Installing Fulcro 3.x Inspect {} what the “state of art” way of developer tooling now? Fulcro Inspect in the chrome?
inspect now has statechart display…
and I’ve got an alpha level statechart sim that works for both CLJ and CLJS
electron version still ok?
pretty sure I released that latest as chrome and electron.
You can download the older version of Inspect Chrome from the github report in releases, and install it via developer mode in Chrome (I think) or use the older version of Fulcro Inspect Electron, which will definitely work.
In terms of moving away from the multi-root rendering, you can use the more recent hooks stuff…like use-component etc
is’t in the react.hooks ns.
Sorry about that. I try really hard to never remove things from the library…I don’t even remember why I removed it to be honest…I’m sure there was a very good reason. I think React itself removed something I needed to make that work well…
when they reworked to the fiber stuff
Same reason I had to drop support for older versions of React…the internal API changed too much to support both in a sane way.
I am using Fulcro Inspect as a chrome plugin, and I have this in my project:
com.fulcrologic/fulcro-inspect {:mvn/version "1.0.5"}
and shadow-cljs has a preload:
:devtools {:preloads [com.fulcrologic.devtools.chrome-preload]
:watch-dir "resources/public" }
The problem is that both parts here complain that they cannot see each other but the Fulcro Inspect tab is present in the browser console and it works as far as I can tell. But the fulcro plugin icon next to nav bar is gray and if I click it it says “Fulcro App not detected”, and in console I have these logs:
2026-03-18T00:29:12.584Z DEBUG [com.fulcrologic.devtools.common.connection:84] - Request to devtool timed out (no devtool open?)
over and over again. But it seems to all be working?One thing I am not clear about: should I ever be reading statechart data (stored data) in element render methods? Seems there’s a risk there since I don’t know if changes to statechart data would trigger rerender as appropriate. Or should I be changing the statechart data and then have scripts mutate some properties that are the basis for a render?
Nothing new here…you can add it to your component’s query using a link ident…the fact that the statechart changed it means you’ll get a refresh because you queried it. [::sc/local-data '_]
something like that
The intention is that rendering is never (rarely) a concern other than making sure a component queries for what it need to see changes for. Of course Fulcro doesn’t watch atom swaps, so the changes need to run through the system (which the event queue processing of sc handles). If you need to see configuration or data changes you just add those normalized tables from fulcro state to your component’s query
The issue I am running into a bit is that I start duplicating information between the components and statecharts. In components I end up with a lot of :ui/…. properties. The most common and the most trivial example of this is mutating :ui/busy? into a component, when chart enters :state/loading . This pattern repeats. Btw loads have markers, but I don’t think that mutations have that out of the box? I repeatedly write the same action and ok-action.
Mutations don’t have load markers because they are not loads…if you want to invent a pattern for busy around those there are a number of ways to do it…statecharts make this better because you can just use the (contains? config :state/loading) as the source of truth. There is also a global state for “active remotes” if you just want the “globally busy” status
Root key
:com.fulcrologic.fulcro.application/active-remotes
query as [:com.fulcrologic.fulcro.application/active-remotes '_]I should probably be more specific than that. But what is (contains? config :state/loading)` config here? I know I can get config with *current-configuration`* on the statechart, but the issue is that this cannot drive UI updates by itself. I can run transactions that will sync the state into the component, but this is the code I’d rather avoid, it’s not adding any new functionality.
So yea, I can run (contains? config :state/loading)` but where do I run that and how do I make it update UI without too much code?