clojurescript 2023-05-26

I'm looking for resources on how to call clojurescript code from javascript but my google fu is failing me. Any tips?

^:export meta will expose a car to global scope and prevent it from renaming when compiled with advanced optimisations

So if you have e.g.

(ns )

(defn ^:export foo [])

you'll be able to call it from JS using my.app.foo(). Assuming the compiled CLJS bundle is loaded.

emilaasa11:05:45

Thanks!

Dar15:05:11

If I'm looking to use CLJS to replace some basic JS for interactivity(things like toggling classes, hooking into events, etc., not building an entire SPA front-end), is shadow-cljs the appropriate tool? It seems pretty heavy.

thheller15:05:00

shadow-cljs is a build tool. it builds CLJS code to JS. there is nothing heavy about it.

p-himik15:05:22

Not to discourage you, but it sounds like something I wouldn't do. If it already works and is trivial and won't be expanded much further, I'd stick with JS instead of rewriting it in CLJS.

p-himik15:05:51

There's not much difference between JS and CLJS if the vast majority of your code will be JS interop.

Dar15:05:33

@U05224H0W my bad! I was looking at the development build output which was 4MiB for a hello world... using the release mode got that down to 173 bytes lol.

Dar15:05:31

@U2FRKM4TW obviously I left out the main draw for me in my original question: I would like to reuse specs in front & back end

👍 2

Dar15:05:57

Current project isn't that big, could definitely get away with server-side validation only. But I thought it would be cool to handle it in the clientside as well, as long as it doesn't require much effort.

skylize15:05:29

shadow-clsj is very-roughly equivalent to using WebPack to build JS projects. Doesn't have much or anything to do with your own project code or how your app runs. Shadow's primary job is to automate running your CLJS code through the compiler and placing the resulting JS files into (an) appropriate folder(s). Plus it adds benefits like hot reloading and simplifying access to npm deps. You will almost certainly want to use either Shadow or FigWheel for a pleasant dev experience, and I think the current trend is most people preferring Shadow.

Dar19:05:16

@U90R0EPHA thanks for the explanation 🙂

skylize19:05:44

> I was looking at the development build output which was 4MiB for a hello world... using the release mode got that down to 173 bytes > Development mode disables Advanced Compilation features of the Google Closure Compiler. So the build is expected to be a lot larger.

skylize19:05:25

Probably worth noting that npm modules don't go through advanced compilation either way. Shrinking build size, in that case, requires either minimizing your use of npm modules or running further build steps afterward (probably using WebPack) to hopefully get some dead code elimination on the included JS modules.

Danny17:05:35

I’m really struggling with some of the interop between reagent and JavaScript libraries in the wild. I’m using shadow-cljs, and can use things like the material library very easily. The ‘:>’ macro in reagent is really sweet. However, it’s only working on class based exports from these js libraries. The long and short of it is I’m attempting to utilize react-force-graph to build a simulation, but the react bindings are exported as React Functional Components and I cannot figure out how to interop this into a reagent app. How would you all go about doing something like this? I’d like to keep my access to cljs simply to manipulate all the data going into the visualization

p-himik17:05:59

https://github.com/reagent-project/reagent/blob/master/doc/ReactFeatures.md#function-components

p-himik17:05:42

tl;dr: use :f> instead of :> for function components. Also, a slight nitpick - those aren't macros but shortcuts.

Danny17:05:35

Thank you for such a speedy response! Also, thanks for the nitpick. Language is important. I tried the :f> but this particular implementation of react bindings returns null when I’m trying to import. So, the “shortcut” fails to operate it throwing an error. Honestly, it feels like the library isn’t installed, but I’ve triple checked and reinstalled on a clean test project. I think most of my difficulty is coming from exactly how this author exported their react bindings, which makes it all the rougher. I’ll include a link to their library code, in a few minutes

Danny17:05:33

https://github.com/vasturiano/react-force-graph/blob/master/src/packages/react-force-graph-2d/index.js and what fromKapsule does is create a functional react component. However, if you go to import this (which is successful) into a cljs file, you get {"ForceGraph2D" nil, "ForceGraph3D" nil, "ForceGraphAR" nil, "ForceGraphVR" nil} So, calling any of the named imports and passing them to the aforementioned shortcuts causes errors. In the time since I posted this message I think I may have made some progress using r/create-element but that seems to simply be wishful thinking so far. (This is because the type is nil)

Danny17:05:29

Would there instead be a way to create this component in a jsx or tsx file in the project, then export it to be found and used by the cljs file?

p-himik18:05:59

> but this particular implementation of react bindings returns null when I’m trying to import It means that you're probably importing it wrong, or the configuration of the NPM package is... unpleasant. Have you tried importing it as ["react-force-graph-2d$default" :as ForceGraph2D]?

p-himik18:05:39

> Would there instead be a way to create this component in a jsx or tsx file in the project, then export it to be found and used by the cljs file? There is, but you'd have to also use Webpack. I'd try figuring out the import issue first.

p-himik19:05:01

Importing it as

["react-force-graph-2d/dist/react-force-graph-2d.js" :as rfg]

seems to work.

p-himik19:05:37

Tried using the whole bundle - didn't work, multiple errors. Tried using just "react-force-graph-2d" but that uses MJS which doesn't seem to be working properly.

Danny19:05:15

This is incredible sleuthing! Thank you so much. I'll try this out later this afternoon. I'll report back when I can

👍 2

Danny22:05:00

It worked like a charm. The key was realizing there was an npm package for "react-force-graph-2d" as well. Onto my next hurdle which is trying to read in a large JSON file (193k lines)

Benjamin17:05:02

how would you do some canvas rendering nowadays? I want to do simple shapes and simulate them moving around like animals, 2d.

p-himik18:05:31

I'd use http://www.quil.info/.

👍 2

Somi Cho07:05:32

If you're familiar with P5, it's easy to use it in CLJS. Here's a template: https://github.com/somecho/p5cljs-template

👍 2

2023-05-26

Channels