releasing 2.0.0-beta4 to clojars. Found a bug in defsc. Also expanded defsc to support react lifecycle with simple keywords in options: :shouldComponentUpdate (fn [props state] …)

live developer’s guide update coming to the website in just a min. I’m through the (second) refinement up to section G

http://fulcro.fulcrologic.com/guide.html has updated. You may need to clear cache.

http://fulcro.fulcrologic.com/guide.html#!/fulcro_devguide.G_Mutation should talk about intern’ing mutations at the very end (if you have the latest version)

I need to get better at css. Something like this is difficult:

[(gs/> :.table-header "div") {:font-weight  "normal"
                              :text-align   "left"
                              :padding      "5px 4px"
                              :border-right border}
 [:&.flex {:flex 1}]
 [(gs/& gs/last-child) {:border-right "0"}]]

Any recommendations for how to learn this stuff when you don't have great browser/web experience? That happens to be a snippet from Fulcro Inspect.

The functions are in garden…so I think gs/> is just the css > relation operator…like .table-header > div

https://github.com/noprompt/garden in the “garden.selectors” part

I did read the garden doco quickly, but it assumes too much for me to grok it all.

yeah, it’s the authority on how garden supports CSS, but you do have to know CSS

Just trying to understand every little bit of Fulcro Inspect. Lots of good stuff there. The ref thing is confusing as its always in env. Its certainly good to learn from thou...

@cjmurphy learning more about CSS can help a lot, the selector you sent has indeed some mixed features of CSS that you have to know to understand it, but I can break those down for you:

(gs/> :.table-header "div") -> .table-header > div -> this selector affects only the div tags that are direct children (first child level on tree) of the element with the classname table-header

:&.flex -> .table-header > div.flex -> for those same div from the previous selector, if it has the class flex, add the flex property

(gs/& gs/last-child) -> .table-header > div:last-child from those same div selection as before, affect only the last child on that level

So > means only direct children

yeah

<div class="table-header">
  <div>I'm affected</div>
  <div>
    Me Too
    <div>But I'm not</div>
  </div>
</div>

@cjmurphy makes sense?

Not yet, but can I come back to you, just heading out and need a rest from the screen. Thanks a lot and I'll come back...

no problem

Hello! I am learning Fulcro and I’m stuck with (I am sure) a silly issue - I have created a new project with lein new fulcro fulcro-playground and I started it from Intellij with -Dcards -Dtest -Ddev and figwheel script. The issue is that I have added :started-callback to src/main/fulcro_playground/client.cljs:

(defonce app (atom (fc/new-fulcro-client
                     {:started-callback
                      (fn [app]
                        (js/console.log "Loading data..."))})))

🙂

@piotrek

(defonce app (atom (fc/new-fulcro-client
                    :started-callback (fn [{:keys [reconciler] :as app}]
                                        (console.log "started ? ...")))))

Doh, I have just found it!

Thank you @claudiu

cool, you're welcome 🙂

@wilkerlucio do you have a pathom version that works without om.next?

@roklenarcic no, pathom uses the om.next/query->ast and om.next/ast->query quite a lot, that would have to be re-implemented in order to remove om.next dependency, that said, this is something I would like to have in Pathom on future

ah snap

@wilkerlucio could you publish a non-snapshot version of fulcro.inspect? I don’t like adding snapshot deps.

I’m trying to hook up the server interop. I get the request, I answer it but the data turns up empty on the client

how do I debug this? I’m probably doing something incorrectly

@thheller So, you can use the regular network panel in Chrome and look at the response. Transit isn’t too terrible to at least make out the basic structure.

query or mutation?

query, yeah network shows the request and response correctly (I think)

doing a (df/load app :q/builds BuildList)

returns from the server

{:q/builds
 ({:target :browser,
   :output-dir "target/dce-test",
   :compiler-options {:fn-invoke-direct true},
   :modules
   {:core {:entries [cljs.core]},
    :main {:entries [demo.dce], :depends-on #{:core}}},
   :id :dce,
   :build-id :dce}
  {:target :node-script,
   :main demo.errors/main,
   :output-to "out/demo-errors/script.js",
   :id :errors,
   :build-id :errors} ...

(defsc BuildItem [this props]
  {:initial-state (fn [p] p)
   :query [:build-id]
   :ident [:builds/by-id :build-id]}
  (html/div (pr-str props)))

(def ui-build-item (fp/factory BuildItem {:keyfn :build-id}))

(defsc BuildList [this {:keys [builds] :as props}]
  {:initial-state
   (fn [p]
     {:page :build-list
      :builds [(fp/get-initial-state BuildItem {:build-id :foo})]})
   :query
   [:page
    {:builds (fp/get-query BuildItem)}]}

  (html/for [build builds]
    (ui-build-item build)))

1. lists are not valid data in Fulcro, only vectors. 2. Your query in BuildList is not asking for what you called it

you either need to target the result, or change your top-level query

(defmethod fs/read-root :q/builds [env _ params]
  {:value
   (-> (config/load-cljs-edn)
       (get :builds)
       (vals)
       (into []))})

oh, then what you typed above is just a typo?

no, thats the code and results I have

the plumbing won’t rewrite things…it’s really your query

dunnoy where the list is coming from

I give it a vector

Add :q/ to your join in your top-level query and it should work

I tried adding {:target [:somewhere]} on the df/load but wherever I put it it ends up as an empty vector

That’s where you asked it to go. If you want it to go elsewhere, use (load :q/build BuildList {:target [:builds]})

:query [{:builds (prim/get-query BuildItem)}]

the two have to match

I love developing in devcards…the inspect-data true option shows your whole database…so you can tell the difference between what is in your database vs what you’re getting out with the query. fulcro-inspect works with 2.0 now, and will also show you this kind of stuff

I don’t really understand where the list is coming from

I guess I’m missing something on the server

I’m not using easy-server or anything

just the parser directly

Are you? Is that your read-root?

defmethod fs/read-root :q/builds [env _ params]
  {:value
   (-> (config/load-cljs-edn)
       (get :builds)
       (vals)
       (into []))})

(defn fulcro-request [{:keys [transit-read transit-str fulcro-parser ring-request] :as req}]
  (let [body (-> req :ring-request :body slurp transit-read)
        result (fulcro-parser
                 {:app req
                  :parser fulcro-parser
                  :ast body}
                 body)]

    (prn [:request body])
    (pprint result)
    {:status 200
     :header {"content-type" "application/transit+json"}
     :body (transit-str result)
     }))

fulcro-parser is (fs/parser {:read fs/server-read :mutate fs/server-mutate})

ah, no, you want handle-api-request

there is plumbing you definitely want to have in that. See the dev guide on Rolling Your own Server

http://fulcro.fulcrologic.com/guide.html#!/fulcro_devguide.I_Building_A_Server

then if you don’t want to use the macros (which separate out the traffic between entities and root) you might want to use your own parser and multimethod, or whatever, just make a new parser…

as long as you’ve read the macros, you can use the multimethods…just saying, parser is completely open and standard component.

switched to handle-api-request but AFAICT the response from the server is identical to before

are you sure the way you’re viewing it isn’t morphing it?

viewing it? pprint?

hm…yeah, that should be ok

OH….threading macro

you’re threading it wrong

you’re putting an empty vector into your list of things

hmm?

you’re left threading into into

not threading anywhere

haha indeed

(-> (config/load-cljs-edn)
       (get :builds)
       (vals)
       (into []))

yep, now its vector

still empty on the client side though

{:status 200,
 :body
 {:q/builds
  [{:target :browser,
    :output-dir "target/dce-test",
    :compiler-options {:fn-invoke-direct true},
    :modules
    {:core {:entries [cljs.core]},
     :main {:entries [demo.dce], :depends-on #{:core}}},
    :id :dce,
    :build-id :dce}
   {:target :node-script,
    :main demo.errors/main,
    :output-to "out/demo-errors/script.js",
    :id :errors,
    :build-id :errors} ...

what is empty? Are you looking at the entire database, or the result of the broken query?

let me hook up fulcro.inspect

you can also just pprint app state

your client in an atom?

figwheel REPL?

(pprint (-> app deref :reconciler (prim/app-state) deref))

should do it

or even from js console if you want to hack through the cljs name munging 🙂

oh…keywords are kinda hard at js prompt 😕

meh inspect doesn’t work but looking at the data directly looks fine now

[  0.845s] [fulcro.client] Mutation fulcro.inspect.ui.transactions/add-tx failed with exception Error: Assert failed: Path [:fulcro.inspect.ui.transactions/tx-list-id [:fulcro.inspect.core/app-id nil] :fulcro.inspect.ui.transactions/tx-list] for append must target an app-state vector.
(vector? (get-in state data-path))

not sure what that means

@wilkerlucio is doing that project…not sure either

sounds like the app ID thing in it didn’t work, and it isn’t able to put the tx on a list at the missing storage location

so, your load is working? @thheller

yes

great

guess it doesn’t get normalized properly

erm…that should not be the case

show me the data

Did you customize the client networking at all?

no, didn’t even configure it

(defn start []
  (reset! app-ref
    ;; I really don't like putting this in a defonce seems to break often
    (fc/new-fulcro-client
      :started-callback
      (fn [app]
        (js/console.log "fulcro started")
        (fdf/load app :q/builds BuildList {:target [:builds]})
        (when-let [prev-state @state-ref]
          ;; can't figure out how to restore app state otherwise
          (let [app-state (get-in app [:reconciler :config :state])]
            (swap! app-state merge prev-state))))))

  (swap! app-ref fc/mount Root "root"))

(defn stop []
  (reset! state-ref @(get-in @app-ref [:reconciler :config :state])))

oh…your query does not match your response

so normalization can’t work

I need to query the root?

no

so, the return value from your server function must match the query of the component. In your case [:page {:builds ...}]

you’re returning the bit for ...

oh wait

You want (load app :q/builds BuildItem {:target [path-to-component-field-where-builds-should-live]})

(fdf/load app :q/builds BuildList {:target [:build-list :top :builds]})

but not BuiltList

woho that works

but it isn’t normalized

you want BuildItem

https://github.com/thheller/shadow-cljs/blob/fulcro/src/main/shadow/cljs/ui/app.cljs

load is loading BuildItem instances. The default target is the keyword you provide.

I you were loading a BuildList, you’d need to return {:page :boo :builds [ ... ]}

I’m confused

Yep…this is the “hard part”…getting used to the graph semantic

the router union stuff was already pretty confusing

you did something accidental that is half-working 🙂

routing with unions is the other one that is hard, agreed

fortunately, the hard ones are very limited 😉

If you send a query for :x, you have to respond {:x value}

If you send a query for [{:person (get-query Person)}] you have to respond with {:person {:db/id ...}} OR {:person [{:db/id ...} ...]} (to-many)

they have to match

The keyword in (load :keyword ...) becomes part of the query, as a join (you don’t have to care about that part, since the parser is already taking care of that level of the response). So, you’re asking for [{:q/build (get-query BuildList)}], but you’re responding with {:q/build [ list of build items]}

this is a mis-match

but load will load it where you said to load it, and try to normalize it with the query you gave

but BuildList won’t find what it wants in that response, so…no go

So, simple rule really: Return one or to-many of what you asked for. You didn’t do either. You asked for BuildList, but returned many BuildItem

If you pull the query from the env on the server, you’ll see that what you’re being asked for does not match what you’re returning

Technically Fulcro does not require you to normalize anything…so this is why it visibly seems to work.

so when I return {:value {:builds [...]}} from the server it does get normalized

right…now you’re manually doing the “parsing” 🙂

it matches

hang on I broke something else .. nothing gets rendered anymore

yep…your db is now one level deeper, because you targeted a BuildList at BuildItems 😜

so, stop fidgeting for a moment and look at the symmetry. It’s quite simple 🙂

we have a habit of fiddling till it works, but that won’t help here

or perhaps it will…making mistakes is best teacher

I understand 1% of what data-fetch does

so that anything happens at all is a miracle 😉

😄

So I assume you did not get through the Guide yet? 🙂

I did many times

trying to do too many things at once

should not have started with the router stuff

that is probably true

or customizing a server so early

better to get the query norm/loading basics down before throwing more potential errors in the mix

BUT, you’ve done remarkably well for as many things as you’ve thrown in 🙂

yeah I can’t use easy server since I already have a whole server setup

https://www.youtube.com/watch?v=mT4jJHf929Q&t=59s&index=8&list=PLVi9lDx-4C_T_gsmBQ_2gztvk6h_Usw6R

watched that already

oh, bummer

I think you’ve mostly got it…trying to find that one last little thing

I think the router messes me up

just got back people

@thheller I'm planning making a release by today or tomorrow, most of the current things were mostly dev snapshots, that's why I kept snapshooting 😛, but yes, we will have a non-snapshot soon

the error you posted I haven't seen before, are you using Fulcro 2.0 with inspect 0.2.0?

beta4 with 0.2.0 yes

@tony.kay can I query for * somehow? just gimme all the props or do I need to list them all?

actually, '* should work (quoted symbol)

unless you need joins, in which case…you need to type them out

I don’t think they can be combined. I never tried ['* {:join ...}]

“ID property of :ident does not appear in your :query”

that might work…`db->tree` does thngs left-to-right, so the join might just overwrite the thing it pulled as a pro

?

(defsc BuildItem [this props]
  {:initial-state (fn [p] p)
   :query ['*]
   :ident [:builds/by-id :build-id]}
  (html/div (pr-str props)))

oh, use a lambda

for query

the sanity checking doesn’t understand *

ah thx, that works

I’ll open an issue…still working on adv support (unions and such)

oh, not sure if is that, but in fulcro-4 the defscmacro had a breaking change, inspect isn't up to date with that yet

not sure how you that even to compile :thinking_face:

hmm

(defsc BuildItem [this {:keys [build-id target] :as props}]
  {:initial-state (fn [p] p)
   :query
   (fn [] ['*])
   :ident [:builds/by-id :build-id]}
  (prn [:build-item/render props])
  (if-not (map? props)
    (pr-str props)
    (html/div
      (html/h2 {} (name build-id))
      (html/p {} (pr-str props)))))

[:build-item/render [:ui/fetch-state {:fulcro.history/tx-time 2, :fulcro.client.impl.data-fetch/uuid "79ae0bdc-e8f5-49da-a360-857eaad6fa5c", :fulcro.client.impl.data-fetch/parallel false, :fulcro.client.impl.data-fetch/target [:pages/builds :top :builds], :fulcro.client.impl.data-fetch/original-env {}, :fulcro.client.primitives/ident nil, :fulcro.client.primitives/remote :remote, :fulcro.client.primitives/query [{:q/builds [*]}], :fulcro.client.impl.data-fetch/refresh [[:pages/builds :top]], :fulcro.client.impl.data-fetch/type :ready, :fulcro.client.impl.data-fetch/post-mutation-params nil, :fulcro.client.impl.data-fetch/fallback nil, :fulcro.client.impl.data-fetch/marker true, :fulcro.client.impl.data-fetch/post-mutation nil, :fulcro.client.impl.data-fetch/field nil}]]

is that supposed to be a vector?

seems to be a side effect of '*

@tony.kay is there a reason you're not using the lein figwheel command in the getting started docs?

@thheller I just pushed a new snapshot to 0.2.0, with changes for fulcro 2.0.0-beta4, I think you problem seems different, but can you try that please?

ah, but question, are you using figwheel or shadow-cljs to build?

shadow-cljs of course 😉

because I remember Mitchel tried and wasn't working with shadow-cljs, but I don't understand why

are you doing any compiler tricks?

nope, pretty standard stuff

is there are difference regarding preloads?

seemed to compile fine, shouldn’t be any difference with :preloads

can you try compiling with figwheel once just to isolate if it's that?

dunno how to use figwheel 😛

is the project you are toying around public?

its shadow-cljs itself, so yeah 😉

@thheller that is a load marker your printing

@grzm better REPL integration with Cursive, and being able to start arbitrary builds via a JVM prop (also better in Cursive)

@tony.kay yes, but its a vector? should that not be a map? given that it comes in as props?

Oh…yeah

Use normalized markers

@tony.kay gotcha. Thanks. I'm trying to debug a situation where my dev/cljs/user.cljs file is only getting loaded in one of my builds. Trying to cut down what it might be.

(load app :bi BuildItem {:marker :kw}) See the new dev guide about loading indicators…just use false for now if you want to get it out of the way

@thheller I mean the fulcro example, are you writing that code directly on shadow-cljs lib code?

@wilkerlucio I think Mitchel’s issue was a regression in the compiler that got fixed

I think he said bumping shadow-cljs versions fixed it

@grzm Yeah, you can use the plugin if you want…nothing special

https://github.com/thheller/shadow-cljs/blob/fulcro/src/main/shadow/cljs/ui/app.cljs

it might be “non-standard” fc/new-fulcro-client I’m doing?

@tony.kay I'd rather not, frankly. I'm feeling there's too much magic in general in the build tools, both lein and boot. Right now I'm just trying to figure out this bug I'm seeing between different figwheel builds.

@thheller I don’t see a substantial difference there…you’re still defonce the atom to make sure it sticks around through hot code reload

the inspector is started for the app when you mount it, this initialisation should not be a problem

and I’m not sure what you’re asking….if the load marker problem is due to that? no

@tony.kay talking to @wilkerlucio about the fulcro-inspect issue. solved the load issue by just checking if props is a map

cool

@thheller how can I run that? I would like to see what you are seeing

just thought it was odd that I got a vector with two elements which looked like it wanted to be a map 😉

clone shadow-cljs, checkout fulcro branch, shadow-cljs watch ui open

its a bit weird right now to compile shadow-cljs with shadow-cljs itself so that might not work properly

@thheller ok, one thing that might be a problem it seems on your app launch, is that your start always generate a new app

you should just create one app, and re-use that if possible, just re-mounting, but not re-initializing

(I didn't finish running yet, just a guess)

yeah but that seems to require the occasional page reload for initial state and stuff

thats why I’m creating a new one after each reload

yeah, well, it's a 2 edge sword, because we can argue that you might want to keep state as you develop 😛

I do keep my state, thats what stop does

but I guess how much you want each depend on how far you project are (in beginning you usually want more of data refresh, and later less)

but then you are triggering the data fetch load every time becasue the app is getting re-initialized

yep, thats what I want for now 😉

start from scratch with each reload basically until I understand the moving parts better

I got this when I tried to compile:

[19:22:25,052] failed to inspect resource "jar:file:/Users/wilkerlucio/.m2/repository/fulcrologic/fulcro/2.0.0-beta4/fulcro-2.0.0-beta4.jar!/fulcro/client/core.cljc", it will not be available.
clojure.lang.ExceptionInfo: failed to inspect cljs file: jar:file:/Users/wilkerlucio/.m2/repository/fulcrologic/fulcro/2.0.0-beta4/fulcro-2.0.0-beta4.jar!/fulcro/client/core.cljc {:tag :shadow.build.classpath/inspect-cljs, :resource-name "fulcro/client/core.cljc", :url #object[java.net.URL 0xa58a099 "jar:file:/Users/wilkerlucio/.m2/repository/fulcrologic/fulcro/2.0.0-beta4/fulcro-2.0.0-beta4.jar!/fulcro/client/core.cljc"]}
	at clojure.core$ex_info.invokeStatic(core.clj:4739)

thats fine, there is an empty file in the jar

[:ui] Build failure:
The required JS dependency "intl-messageformat" is not available, it was required by "yahoo/intl_messageformat_with_locales.cljs".

right npm install intl-messageformat

using npm directly, not the bundled foreign-libs

might also need npm install react react-dom

we will see 🙂

I need to create a proper package.json so this gets easier 😉

it missed create-react-class on the second time

yup, that will help

I think it's running now

btw is there a fulcro/stop or shutdown or so? something I can call so it removes all traces of itself?

or just ReactDOM.unmountComponentAtNode?

not that I know, just unmount should be fine

ok, it siad it compiled, but the page is not finding hte js

oh hehe. start the compile again

bad dev tweak since normally users don’t want to load the dev ui build

@thheller seems to be working https://www.dropbox.com/s/6tx5dfa0gexiksz/Screenshot%202017-12-06%2019.38.31.png?dl=0

did you tried the latest snapshot?

what the heck?

I have it in checkouts

develop or master branch?

I noticed this on the compilation:

Failed reading cache for fulcro.inspect.ui.events: com.fasterxml.jackson.core.io.JsonEOFException: Unexpected end-of-input: expected close marker for Array (start marker at [Source: java.io.FileInputStream@1859955a; line: 1, column: 93414])
 at [Source: java.io.FileInputStream@1859955a; line: 1, column: 98851]

develop

yeah dunno why that happens but its just a cache read error, if that fails it just will recompile and not use the cache

I don’t get it 😛

thats why I don’t like snapshot deps 😛

can’t really tell which version its using

you can looking at the .m2, not ideal I agree

but you can try this: ls ~/.m2/repository/fulcrologic/fulcro-inspect/0.2.0-SNAPSHOT/

it will show all the versions, they have suffix

@thheller the latest for fulcro-inpect is 6

but its in checkouts so it should be using that

I don't trust checkouts for CLJS, they never worked properly in my experience

 "fulcro/inspect/preload.cljs")
=> #object[java.net.URL 0x56fe464c "file:/Users/zilence/code/shadow-cljs/checkouts/fulcro-inspect/src/fulcro/inspect/preload.cljs"]

so its using the checkout definitely

I don’t get why its working for you though

can you try removing the checkout and updating the snapshot?

btw which browser are you using? wonder why the flexbox isn’t working

chrome

ah, but one thing, I got that error message you got anyway

but works

just start with ctrl+f

hahaha

ok 🙂

I guess I should read the docs. I was waiting for something to appear by itself 🙂

well, Element seems broken, worth investigation

ah right you don’t have the shadow checkout. need to bump that. 😉

inspect is neat. I like it

much easier to figure out whats going on now.

can I tx something manually so it opens on start?

humm, never though of that, let me check

@thheller

(fulcro.client.primitives/transact! (:reconciler (fulcro.inspect.core/global-inspector))
  [:fulcro.inspect.core/floating-panel "main"]
  [`(fulcro.client.mutations/set-props {:ui/visible? true})])

works, thx.

I’m really starting to like this. nice work everyone. still lots to process but I’m making progress 🙂

defsc hides the ugly defui macro every well

What kind of UI are you building @thheller something for shadow-cljs?

yep

something like https://github.com/oakmac/cuttle to start with. starting/stopping/inspecting builds via web ui

so in the traditional REST style thinking I want to do a request that does some stuff and returns a response

mutations don’t return data themselves though?

so should I be using a query for that then? seems wrong.

or do a mutate and then read?