@bbss here is the first step: https://github.com/fulcrologic/fulcro/pull/378

it is on branch feature/hooks

You can clone that, and then do the following:

yarn install
shadow-cljs server

and start the “hooks” build, then navigate to: http://localhost:9001/hooks.html

This is a working demo that creates Fulcro components that can use hooks, WITHOUT integration into the defsc macro…that’s the work that remains.

The macro is going to need to detect the :use-hooks? option, and just generate the code differently.

https://github.com/fulcrologic/fulcro/pull/378/files#diff-af3a2210946f382213242b513d5c15b3R26

is the primary comment to read. The demo creates a Hook component. The :render option is just a plain function, and inside of that function you can use normal react hooks stuff.

The current macro is able to error check and morph the options map; however, it builds render for classes, so that’ll need to change…that’s most of the work

then, of course, testing and debugging

meh…just a min, I can probably just do that part

I’m trying out https://github.com/fulcrologic/fulcro-garden-css. What’s the proper way to include CSS from a utility component (that doesn’t have an ident or query of its own)? I.e.:

(defsc B [this _props comp-props]
  {:css [[:.b {…}]]}
  (div :.b …))

(def ui-b …)

(defsc A [this {:a/keys [id …]}]
  {:query [:a/id 
           …]
   :ident :a/id
   :css [[:.a {…}]]}
  (div :.a
    (ui-b (comp/computed {…}))))

(def ui-a …)

@henrik you cannot use auto-scan if you do that. Read the docstrings

you have to use :include-children (I think it is called)

docstrings of upsert-css and style-element, I htink

@bbss Hooks support integrated with defsc on that branch

looks like it works from my simple demo, including hot code reload working properly

you’ll need to tell me if it integrates with things

Fulcro 3.1.17-SNAPSHOT has the experimental hooks support. Just add :use-hooks? true to the component options (and do NOT use component lifecycles…no error checking yet to tell you when you screw that up, it just won’t work)

Great I will give it a spin later in the week and let you know. Thanks!

I'm trying to use https://github.com/metabase/toucan in a Fulcro project. It gives me an error like this:

The required namespace "toucan.db" is not available, it was required by "sheluchin/client.cljs".
"toucan/db.clj" was found on the classpath. Should this be a .cljs file?

@alex.sheluchin this is a #shadow-cljs thing, shadow doesn't use cljsjs, so you have to pull JS dependencies using node/npm

@wilkerlucio I don't understand. Toucan is a CLJ library. What JS dependencies are you referring to? The issue I'm having is that I'm trying to make use of Toucan, a CLJ library, inside of client.cljs. I don't understand the fullstack model of Fulcro yet, but I think it's possible to use CLJ stuff in a project. Ultimately, I just want to make some calls to a 3rd party REST API, save the results into a Postgres DB, and display the stored data on the frontend.

@alex.sheluchin humm, I'm was guessing that the library required that, but seems "sheluchin/client.cljs" is the culprid of trying to require something that's, sorry, my confusion, now I'm guessing you are trying ot require something thatls clj on a cljc file

if that's the case, you need to use some reader conditionals to only do those parts in clj land

No worries, appreciate the help anyhow. I'm not familiar with how reader conditionals work, going to give https://clojure.org/guides/reader_conditionals a good look.

oh, I see its a cljs file, so, you can't require clj things on cljs file

they are different environments (JVM vs JS)

By default Fulcro is running in the JVM and doing server-side DOM rendering, right?

I'm not sure on the template, I would guess SSR is not enabled by default, but someone else may have a more accurate response

you need to be aware about what code is running where, because that dictates what you can use (for example, seems like you can't use toucan on the CLJS side)

Yes, that part is a little unclear to me. My thinking is that I need to set up the server (as detailed here http://book.fulcrologic.com/#_setting_up_a_server) and use toucan in that code, and then query it from the CLJS side of things. Does that sound about right?

Hey

(defsc TextObject [_this {:text-object/keys [text editable]}]
  {:query [:text-object/id :text-object/text :text-object/editable]
   :ident :text-object/id }
  (if editable
    (str "EDIT: " text)
    (dom/p {:onClick #(js/alert "foo")}
           (str text))))

I've got such component. :text-object/{id,text} are provided by remote. However, I'd like :text-object/editable to be UI-only.

(it will be keeping UI-only state)

But it obviously have value :text-object/editable :com.wsscode.pathom.core/not-found

How should I deal with case like that? It seems invalid to add editable to "backend" while it's UI-local state only.

How should I deal with such situation?

@slawek098 for UI only values you can use keywords with the :ui namespace, example: :ui/editable or :ui.text-object/editable

those are automatically removed from when there is integration with the network layer