clojurescript 2022-10-29

Hachmaninow13:10:41

Hi! Think my question is rather about Clojurescript interop than about Reagent. I have a component which uses Form-3: A Class With Life Cycle Methods as described https://github.com/reagent-project/reagent/blob/master/doc/CreatingReagentComponents.md. The following is my component-did-mount function:

(defn make-sortable [this]
  (.create js/Sortable (rd/dom-node this) (clj->js {:onUpdate on-resort-browser-tree})))

This makes my component sortable via Sortable.js, which seems to work fine. The issue is in my OnUpdate event handler:

(defn on-resort-browser-tree [event]
  (.info js/console (str "resort: " (js->clj event)))
  (.info js/console (str "resort 2: " event)))

Why does this print out rather unhelpful in the console?

resort: [object CustomEvent] browser.cljs:47:9
resort 2: [object CustomEvent]

What kind of object is this parameter? How can I find out about the structure?

skylize14:10:22

That message is the result of info calling the .toString method of the Event instance. And relatively speaking, the output is actually pretty helpful. JS is infamous for logging nearly everything as [object Object], giving no insight whatsoever. In your case, even though it doesn't list properties or anything else, it at least tells you exactly what it is: a CustomEvent. https://developer.mozilla.org/en-US/docs/Web/API/Event https://developer.mozilla.org/en-US/docs/Web/Events/Creating_and_triggering_events

Hachmaninow18:10:53

Thank you. Interesting perspective and very helpful links! Actually I realized now that logging the event directly:

(.info js/console event)

emits the information I was looking for (source and target element of the drag/drop operation). But honestly, I still don’t fully get the difference between:

(.info js/console event)

and

(.info js/console (str event)))

I assume the first version prints some kind of “reflection-based” representation of the event object, right?

skylize19:10:28

Everything in JS is an Object with a toString method (the default if not otherwise implemented is [object Object]). So everything can be coerced to a string by calling that. str in Cljs needs to coerce everything to a string to work, so implies toString on everything. is provided by the environment (e.g. v8), not the language. Not that many years ago, info would have just called toString. But that doesn't make for very nice debugging. So part of the battle for market share included adding better introspection in consoles. If you don't force the call to toString, the console has a chance to try being smarter about the output.

👍 1

steveb8n22:10:31

Q: I am using typescript react components in a re-frame app. when passing props via interop, it would be great to have the types from the TS components checked (either by IDE or a linter). Does anyone know how to enable this?

valtteri07:10:54

AFAIK such a thing doesn’t exist yet but it should be doable. clj-kondo already supports type checking to some extent and the type information can be generated from malli schemas (and clojure spec if I remember right). I guess it should be possible to use something like this https://github.com/vega/ts-json-schema-generator to acquire type information from .ts files and instead of emitting json-schema you would emit clj-kondo compatible type information. :thinking_face:

steveb8n07:10:34

Thanks. I'll give that a try

tvaisanen10:10:02

Please let us know how it works out 🙂

steveb8n11:10:00

Will do. Probably won't be soon as my to-do list is growing

2022-10-29

Channels