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

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.

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

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.

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

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

Thanks. I somehow missed shadow-git-inject! I did try the :build-options {:manifest-name "manifest.json"} approach but then got a Manifest: root element must be a valid JSON object error in the browser because it's wrapped in a [ ]. Have I missed something in the dhadow-cljs config?

Don't consume the manifest in the browser. Consume it on the backend when you generate index.html to put the right path to the main JS file.

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?

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 @U0ETXRFEW is there any way to change the colors of the parens, would like to use a custom scheme if possible

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

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

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.

I am interested in a debugger too... have you tried running node inspector on the transpiled js?

Calva website says its debugger does not support clojure script

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.

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

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