Fork me on GitHub
#fulcro
<
2020-03-04
>
tony.kay15:03:24

it is on branch feature/hooks

tony.kay15:03:54

You can clone that, and then do the following:

yarn install
shadow-cljs server

tony.kay15:03:23

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

tony.kay15:03:00

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.

tony.kay15:03:27

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

tony.kay15:03:57

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.

tony.kay15:03:00

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

tony.kay15:03:06

then, of course, testing and debugging

tony.kay15:03:36

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

henrik15:03:39

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 …)

tony.kay15:03:09

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

tony.kay15:03:21

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

👍 4
tony.kay15:03:41

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

henrik16:03:55

Some docstrings reference :include-children , but it must have been refactored to :css-include at some point:

(defn get-includes
  "Returns the list of components from the include-children method of a component"
  [component]
  (let [includes (some-> component comp/component-options :css-include)]
    (if (fn? includes)
      (includes)
      (or includes []))))

henrik16:03:37

Anyway, :css-include works, so thanks for that! 👍

tony.kay16:03:11

PR to fix docstrings is appreciated if you have time

henrik16:03:41

PR submitted 👍

tony.kay15:03:54

@bbss Hooks support integrated with defsc on that branch

bananadance 8
tony.kay15:03:12

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

tony.kay15:03:29

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

tony.kay15:03:59

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)

🙌 12
bbss16:03:19

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

sheluchin20:03:46

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?
How do I make use of that?

wilkerlucio20:03:26

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

sheluchin20:03:34

@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.

wilkerlucio20:03:17

@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

wilkerlucio20:03:33

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

sheluchin20:03:19

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.

wilkerlucio20:03:27

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

wilkerlucio20:03:41

they are different environments (JVM vs JS)

sheluchin20:03:20

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

wilkerlucio20:03:48

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

wilkerlucio20:03:44

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)

sheluchin20:03:15

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?

thosmos22:03:02

If you want the data to be dynamic during runtime, then yes you would need to make a server-side resolver for your query and then query that from the client across the wire. If it’s enough to run it once during compilation of the client, then you could just inline the result into the CLJS code

wilkerlucio22:03:45

I suggest you check the video series, it covers all of this we are discussing https://www.youtube.com/playlist?list=PLVi9lDx-4C_T7jkihlQflyqGqU4xVtsfi

👍 4
otwieracz21:03:19

(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))))

otwieracz21:03:31

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

otwieracz21:03:42

(it will be keeping UI-only state)

otwieracz21:03:01

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

otwieracz21:03:02

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

otwieracz21:03:15

How should I deal with such situation?

wilkerlucio22:03:40

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

pithyless08:03:30

Unless I'm mistaken :ui.text-object/editable will not work by default. @slawek098 - the default logic is here: https://github.com/fulcrologic/fulcro/blob/c69d475996fe1341b24a330af045f3cb0fe6696d/src/main/com/fulcrologic/fulcro/application.cljc#L192-L217 You can also customize it, by passing in your own :global-eql-transform function to application/fulcro-app: https://github.com/fulcrologic/fulcro/blob/c69d475996fe1341b24a330af045f3cb0fe6696d/src/main/com/fulcrologic/fulcro/application.cljc#L237-L238

otwieracz09:03:37

Thanks, I will have a look.

wilkerlucio22:03:03

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