Clojurians Log v2

Suppose I have a route called “/creators”. This is a reagent app and not a static page, so the javascript does the rendering in the browser and the /creators route sends the boilerplate html to the browser. However, the content to be shown at creators route also depends on values from the database, so not only do I want to send the boilerplate html, but also data from the database. How can I do both simultaneously? Follow up: Suppose that I have other microservices that produce values that need to be rendered in the /creators route, but since those have a higher latency, I would prefer to send what I can as soon as possible and wait for the other microservices to produce the result in the browser when they are done producing the result, kind of how in twitter, the menus load before the tweets do. How will I integrate those microservices with the main server that receives the request? The static response to be sent is:

(layout/render request "home.html")

(r/response (get creators- (-> :req :query-params :id)))

> I would prefer to send what I can as soon as possible Make / and /creators serve the exact same HTML and make only the frontend initiate data loading upon navigating to /creators. If you're also using re-frame, it's rather easy to do with kee-frame's controllers.

I’m sending sequence of maps to the client:

({":db/id" 17592186045425, ":creator/id" "2hhae235", ":creator/name" "Carla Wonder"} {":db/id" 17592186045426, ":creator/id" "23we35", ":creator/name" "Killer Reapers"} {":db/id" 17592186045427, ":creator/id" "234w345", ":creator/name" "Autonomy Band", ":creator/img-src" "<https://c8.alamy.com/comp/BDB71Y/nervous-breakdown-the-rolling-stones-cover-band-from-halle-germany-BDB71Y.jpg>", ":creator/description" "A great band that has rocked the listeners since the 1990s. They released their latest album in 2021 and have only increased their fanfare since their inception with the album Blushes, which was released in 1992 to wide critical acclaim."} {":db/id" 17592186045420, ":creator/id" "23422344", ":creator/name" "Alpatoons"} {":db/id" 17592186045421, ":creator/id" "23ahjqg35", ":creator/name" "Head One Thousand"} {":db/id" 17592186045422, ":creator/id" "23aasg235", ":creator/name" "Purely Black"} {":db/id" 17592186045423, ":creator/id" "asgasg35", ":creator/name" "Headhead"} {":db/id" 17592186045424, ":creator/id" "23agha35", ":creator/name" "Head Fighters"})

[{::db/id 17592186045425, ::creator/id "2hhae235", ::creator/name "Carla Wonder"} {::db/id 17592186045426, ::creator/id "23we35", ::creator/name "Killer Reapers"} {::db/id 17592186045427, ::creator/id "234w345", ::creator/name "Autonomy Band", ::creator/img-src "<https://c8.alamy.com/comp/BDB71Y/nervous-breakdown-the-rolling-stones-cover-band-from-halle-germany-BDB71Y.jpg>", ::creator/description "A great band that has rocked the listeners since the 1990s. They released their latest album in 2021 and have only increased their fanfare since their inception with the album Blushes, which was released in 1992 to wide critical acclaim."} {::db/id 17592186045420, ::creator/id "23422344", ::creator/name "Alpatoons"} {::db/id 17592186045421, ::creator/id "23ahjqg35", ::creator/name "Head One Thousand"} {::db/id 17592186045422, ::creator/id "23aasg235", ::creator/name "Purely Black"} {::db/id 17592186045423, ::creator/id "asgasg35", ::creator/name "Headhead"} {::db/id 17592186045424, ::creator/id "23agha35", ::creator/name "Head Fighters"}]

Impossible to tell for sure without all the code that serializes the data and deserializes it.

Perhaps, you have something like :keywords? true set on the deserialization side. Calling (keyword ":db/id") will return ::db/id.

I’m getting an error “require not defined” when trying to build a single output file using figwheel.main build-once + webpack. The line in the compiled js giving the error is require("react") I’m guessing it’s somehow not bundling the node modules but I don’t know where to start figuring out how to fix it. Any pointers very welcome!! I don’t get the error in normal figwheel operation (with optimizations none)

Is it possible to get shadow-cljs to release an app with a versioned name using something like lein-git-inject and lein shadow? I've got a full-stack clojure/clojurescript app and am trying to streamline the release process to add a version string in the .js file to overcome browser caching when pushing out a new version.

There's also #shadow-cljs Shadow-cljs can generate output manifest specifically to tackle that issue: https://shadow-cljs.github.io/docs/UsersGuide.html#BrowserManifest It's not a version, but it's a sufficient mechanism to overcome browser caching.

instead of making changes in the server, is it possible to use two colon keyworeds in the client?

Yes, but don't do it. Three proper ways to tackle it: • Change the backend, if you have control over it - either to use a different format for keys or to use something other than JSON that preserves data type, like Transit • Do not convert data keys into keywords - just use strings. It makes sense because you seem to be sending strings in the first place. Keep keywords keywords and strings strings • Traverse the received data structure and convert all string keys that start with : to a keyword yourself

or, use transit on top of json instead of just json

that will serialize/deserialize keywords correctly

I am mapping a sequence of maps like so across @(rf/subscribe [:creators]), however, I’m still getting the react unique key error in the console, while each creator does have a unique id with (:creator/id creator)

(defn creator-view [creator]
  [:a {:key (:creator/id creator) :href (str "/creator-page?id=" (:creator/id creator)) :style {:cursor :pointer}} (:creator/name creator)])

(defn creators []
  [:div {:style {:display :flex :flex-direction :column}}
   (map (fn [creator]
          (prn "creator id " (:creator/id creator))
          [creator-view creator]) @(rf/subscribe [:creators]))
   ])

Your [:a ...] elements have unique keys. React complains about the [creator-view ...] elements. Even if it doesn't result in a separate HTML node for creator-view, it's still a React element.

so the best bet is wrapping creator-view in div and putting a key there?

Either use into with your map or add the key as metadata

(into [:div {:style {:display :flex :flex-direction :column}}] (map (fn [creator]
          (prn "creator id " (:creator/id creator))
          [creator-view creator]) @(rf/subscribe [:creators])))

something like that

how does the metadata thing work?

Reagent reads the metadata and sets the key when creating the corresponding React element.

And with into above, you don't need :key at all since all the laziness is removed. But I've seen such a method being discouraged because, depending on the circumstances, the performance might suffer.

how to set the key in the metadata exactly?

^{:key (:creator/id creator)}
[creator-view creator]

Are you sure :creator/id is always set and is unique across all records? Are you sure it's the creators component and not something else? - ah, right, the error mentions it explicitly. Unless there are multiple components named like this. Does the error disappear if you use the into method above?

I’ve made a minimal repro of my figwheel.main “require not defined” error, can anyone spot what dumb mistake / misunderstanding I’m making? https://github.com/danielneal/figwheel-webpack

^ The issue was that webpack wasn’t running, I’m guessing the bundle-cmd is a map of optimisation level to bundle cmd, I’d completely overlooked that I only had :none <bundle-cmd> in there and nothing for :default (or :advanced)

😅

https://github.com/day8/shadow-git-inject

but yeah the manifest is the intended solution for this when combined with :module-hash-names true

hello, wanted to share my feedback with cljs so far and see how I can improve further. I have gotten used to the syntax and all that, the language itself is well designed and easy to use, in these respects i am having no issues. the issue i am having is in regards to tooling, specifically on the IDE side of things. Im currently using vscode with the calva extension, and can connect to a repl, so can get feedback quickly and the repl works well. but, I currently dont know of any extensions that provide linting, autocompletion for NPM modules, and debugging. I could probably live without these features, but I think they are very useful to have and want to see what's available for vscode that might do these things. Anyone know of any tools for this?

Calva should give you linting. Doesn't it?

As far as debugging goes, that is not really available afaik. I seldom lack it, though. Especially since I'm often using shadow-cljs and it's excellent inspector.

i see source formatting but don't see linting for anything like missing function name, For example, if i write a function but never use it the editor doesnt catch it

It should work. If your code is public I can have a look.

im trying again with a simple hello world example. I have a function

(defn hello-world "hello world")

maybe its an issue with my machine, I see Initializning Clojure Language Features via clojure-lsp in the bottom left corner of the editor. Maybe that's why im not getting having issues?

I can connect to the repl fine

also, regarding debugging, is there no way to use the source maps with a debugger? im not familiar with shadow-cljs, how does the inspector work with it? Im primarily trying to use clojurescript through node and not in the browser

i did some testing, it seems that when I have a deps.edn file, on my installation calva is not able to initialize the clojure-lsp for proper linting, but without deps.edn I cant connect to the repl

any idea on what may be the issue here?

Might be something to ask about in #lsp

yes, this should work right out of the box

I asked in the #lsp channel. It does appear to be working probably when I don't have a deps.edn file in my workspace. not sure what is causing the issue here

got it working, turns out it was a configuration issue on my end. thanks for the help yall

also amazing stuff with this extension, thanks for all the hard work yall put in on making this

one last thing @pez is there any way to change the colors of the parens, would like to use a custom scheme if possible

Hey all, trying to port this fragment from js to cljs: this.map = this.add.tilemap("tilemap"); The RHS is

(ocall this [:add :tilemap] "tilemap")

(aset this "map" (ocall this [:add :tilemap] "tilemap"))

I can also just store all desired created objects in an atom. This may be more Clojuric, but I also want to understand the js->cljs translation as well.

There is! https://calva.io/customizing/

awesome, will definitely check out the customization options! thanks for all the help

aset is most definitely wrong because it's for arrays, not objects. You don't need cljs-oops either. oset! can work if you add ! to the non-existing key: :!map. This would be a 1-to-1 translation from JS to CLJS:

(this-as this
  (let [add (.-add this)
        tilemap (.bind (.-tilemap add) add)]
    (set! this -map (tilemap "tilemap"))))

About source maps. I’ve had some limited luck with using the Chrome debugger, but the source maps seem to be a bit lacking, so it hasn’t been worth the fiddling.

shadow-cljs starts a console at http://localhost:9630 where, amongst other things, you find an inspector that will show you things that you tap> from the REPL. And Calva has some commands for making tapping extra convenient. Shadow works great for node work as well as for the browser.

Actually, I'm probably wrong about the need for bind - this should be sufficient:

(this-as ^js this
  (set! this -map (.. this -add (tilemap "tilemap"))))