Fork me on GitHub

@wilkerlucio I’m currently digging into fulcro-inspect and trying to understand how building devtools like this work. Have you got any good resources you can point me at to bootstrap my knowledge in this area?


the main resource for me is the browser extension docs, the trick part is that is like a distributed system, so in terms of architecture is about the message passing and maintaining the state around


for example, for fulcro inspect, to get a message from a page to the devtools, you gotta flow it though: - page use postMessage to itself - content-script captures message, send it to background process of extension - background process is a single script, and has to manage all connected tabs - then the background should route from the current tab to the devtools there

👍 4

I’ve been working on a hello world for this. Because getting up and running is not super clear. I was just digging in to fulcro-inspect and trying to extract the baseline necessities.


another question. Can fulcro-inspect detect fulcro apps in the wild? If so is there any examples that I could look at? @wilkerlucio


what you mean by detect apps in the wild?


like React devtools does


fulcro inspect does that


the icon highlights when it detects a fulcro app


in this case, the detection is part of the init process, the browser sends a message telling us he wants fulcro inspect (from the content script), and then we activate the icon


cool thanks for the info!


BUT, a production app won’t have Inspect turned on, so it cannot detect those. You’d only be able to detect apps that were released in “development” mode, which is much slower, and therefore unlikely. Inspect adds quite a bit of overhead to the app (it has to encode states, remember history, etc.)

👍 3

Thanks @U0CKQ19AQ this is the nuances I expected actually.


Can anyone point me to a publicly available project that uses fulcro-garden-css ? I’m also interested if anyone is using it together with Fulcro’s semantic-ui-wrapper Thanks!

Luis Santos21:03:04

Hi everyone, I recently started learning Fulcro and although I understand the basic concepts and how the EDN queries work with entities and trees of entities. I'm struggling to understand how does one go about modeling something like a search with multiple input parameters or pagination. I would appreciate if someone could point me to some examples or reading materials. Thanks


hi @UK00KCK6D Have you seen the section at the end of the Fulcro book that talks about paginating large lists? It may be helpful:

Luis Santos21:03:01

I didn't. I'm still going through the book. There is a lot of content to digest. Thanks.


I would recommend spending as much time as you need playing with the core of Fulcro. Getting a really solid understanding of defsc :query :ident and :initial-state and load! is important. Without a good understanding of those concepts, it will be confusing to go onto the more advanced interactions like pagination, auto-complete etc.

Luis Santos21:03:38

Thanks for the advice. As far as my understanding goes load! is also a mutation in the sense that it triggers a network call (side effect). Being it a side effect, should we call load! directly from the ui?


Hey Luis, yep you generally should trigger mutations when an event occurs (user event like click or touch event, or some timer firing, or a router change state)


If you take a look at the internals of RAD defsc-form and defsc-report (the UI state machine, in particular), I’d consider those good examples of how you handle quite a few concerns like that. But as @U0G3C3USJ said: don’t try to run too fast. If you don’t understand the core basics, those internals will probably be a bit much.

Luis Santos11:03:31

@U0522TWDA Thanks. I was not aware of this tutorial. I've been following the fulcro book. This tutorial feels like a better starting point. Although I'm getting a lot of value from fulcro book.

👍 3
Jakub Holý (HolyJak)11:03:32

The book is invaluable but little too much at start :) Don't worry, I'll be coming back to it constantly :)


Hi! I am trying to pass a React component in a callback function of another component. The (comp/factory TaskScreen) element is incorrect, and when I try to use TaskScreen directly, I get the following error:

TypeError: null is not an object (evaluating 'drop_component_BANG_.cljs$core$IFn$_invoke$arity$1')

This error is located at:
    in (created by SceneComponent)
    in SceneComponent (created by SceneView)
    in RCTView (at View.js:34)...
I don't know how to remediate this error. Does anyone know how I can pass a React component around ? Thanks! I solved my own problem. Need to use:
(comp/with-parent-context this (ui-task-screen {})
in the callback to ensure the parent's context is passed on to the child.

🎉 3