For whatever it's worth, I had issues with CLJS tooling from emacs myself that was quite frustrating and I moved to VSCode and have since had no problems at all. Mine originated with figwheel and not shadow-cljs but in both cases they've been good from vscode

as a Common Lisp guy, I'd rather stay with emacs... I don't want too many tools.

#cider channel might be a good place to ask.

By "objects" you mean plain JS objects? If so, there surely is a solution somewhere on NPM.

good point!

Another to consider: https://clojuredocs.org/clojure.data/diff

Another: https://github.com/juji-io/editscript

Those aren't suitable for JS objects though, AFAIK.

I ended up using clojure.data/diff and simplified my use case

Looking at the three.js github repo I'm noticing the example they give there is an even simpler rotating cube. The above example was written by gpt-3 as an interesting tidbit. I'll try the repo example and see if I get anything.

In the JS case, animate is a plain function. In the CLJS case, animate is a higher order function that returns another function.

Ok, I took out the (fn [] part from my animate function and a whole bunch of errors cascade down the console, including some infinite loop action lol.

it's a Uncaught TypeError: Cannot set properties of undefined (setting 'x') error.

If I take out the cube rotation stuff I get the same error but for (reading 'render') so I am definitely doing something fundamentally wrong here. Let me try the simpler repo example.

Yeah, trying a simpler case makes sense. I just took a very superficial look at those two code samples.

This is the part that confuses me from the repo (https://github.com/mrdoob/three.js/) example:

renderer.setAnimationLoop( animation );
document.body.appendChild( renderer.domElement );

// animation

function animation( time ) {

	mesh.rotation.x = time / 2000;
	mesh.rotation.y = time / 1000;

	renderer.render( scene, camera );

}

how do I even translate that top line to cljs? (.setAnimationLoop renderer #(animation))? Or without the #?

The latter, you just pass the function itself - by name or by value. But in CLJS, you gotta define that function before you pass it somewhere. Not sure whether just declaring it would do the trick - probably won't given how it's not a real name but rather a field within an NS object.

And what would you advise about that whole time thing?

Hmm? It's just an argument to the function, no?

maybe time is a field within the renderer object? Because I have to pass that renderer object to the animation function anyways so I can call that render method. I'll try that

(defn animation [time]
  ...)

(.setAnimationLoop renderer animation)

animation is a closure over renderer since you create renderer before (defn animation ...).

Hmmm, ok. But that animation function needs to also see scene and camera objects I create earlier. It's all so imperative. It's frustrating getting this translated.

Heh, yeh. But sometimes it helps to use higher order functions that you can to create closures dynamically. Not sure whether it's worth it in this case, but you can experiment with that.

Trying it as just a straight imperative translation gives me an: `three.js:19559 WARNING: Too many active WebGL contexts. Oldest context will be lost. three.js:19850 THREE.WebGLRenderer: Context Lost.` warning.

Not being able to translate 16 simple lines of JS to CLJS does not bode well for my hoped for future as a full stack Clojure developer. lol! Interop was supposed to be seemless. haha

That warning sounds like an artifact of hot code reloading. Does it work? Are the warnings still there if you just refresh the page?

I had a cube for a second and then made some changes and it's gone. Then my undo didn't work correctly and I can't get back to the old state. Can't figure out why. Here is the full code of the example:

import * as THREE from 'three';

// init

const camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 10 );
camera.position.z = 1;

const scene = new THREE.Scene();

const geometry = new THREE.BoxGeometry( 0.2, 0.2, 0.2 );
const material = new THREE.MeshNormalMaterial();

const mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );

const renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setAnimationLoop( animation );
document.body.appendChild( renderer.domElement );

// animation

function animation( time ) {

	mesh.rotation.x = time / 2000;
	mesh.rotation.y = time / 1000;

	renderer.render( scene, camera );

}

I don't know what to return from my cube function now.

> and then made some changes and it's gone This means that the code is not hot-code-reloading-friendly. No idea how to make it friendly though - depends on the three.js library and might even be impossible.

Not sure what you mean by "what to return". It's perfectly fine not to return anything.

(.setAnimationLoop renderer (animation renderer mesh scene camera)) Here, you're calling the animation function and pass its result to .setAnimationLoop. In JS, the animation function itself is passed to that method - because that method calls it.

Ahh ok. So I'll just pass in (.setAnimationLoop renderer animation) like you told me before. And then maybe at the end of cube (thanks for clarifying I don't need to return anything) I was thinking of doing the whole (animation renderer mesh scene camera) because I don't know how or when else to feed all those objects to the animation function.

With that though I'm getting another uncaught typeerror, this time on "rotation" in my animation function.

In the JS code, the animation function accepts just one argument. In your variant, it accepts many.

That's what I meant by dynamically creating closures:

(defn make-animation-fn [renderer mesh scene camera]
  (fn animation [time]
    ...))

(.setAnimationLoop renderer (make-animation-fn renderer mesh scene camera))

that worked!

interesting solution. I did not grasp what you had meant when you originally said "dynamically creating closures"

I'm still not understanding how animation knows what time is. I don't know what time is. lol

It is passed as a parameter.

Something inside tree.js calls it as (animation current-time).

Ok. Yeah, I'll admit I hadn't actually dug into the three.js docs yet. I didn't anticipate the short example kicking my butt so hard. Thanks again for your patience and help.

No problem. :) I don't know tree.js either. I'm just judging by that function animation( time ) { ... }

Just looking at this one bit of your question:

renderer.setAnimationLoop( animation );
...
function animation( time ) { ... }

Yes, thanks for that clarification. It took a while for my brain to wrap itself around what was happening there. I got frustrated but in hindsight the interop really was quite straightforward.

And without looking into three.js code myself, I would predict that it uses requestAnimationFrame under the hood, which on each "frame" provides a DOMHighResTimeStamp, which it will then pass along to your animation function as time. https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame

I'll check this out, I love the MDN docs. Another thing I need to go review again is how to inspect these objects in the developer console. I was getting minimal error support or anything telling me where I was going wrong.

What is the exact error?

The required namespace "traintime.core" is not available.
; "traintime/core.clj" was found on the classpath. Should this be a .cljs file?

I just found that namespace in manifest.edn is it ok to take it out? bc it's not in classpath.edn where I expected it might be from that message

What about this part of the error? Should this be a .cljs file?

Those .edn files are supposed to be autogenerated - no need to edit them by hand.

It shouldn't be. traintime.core is the namespace of one of my .clj files but its for backend stuff. but I don't think I can use Clojure namespaces in CLJS files right? and I did require said namespace bc I forgot about said (possible) restriction

> but I don't think I can use Clojure namespaces in CLJS files right? Right. You can, but only for macros. And that has to be handled in a somewhat special way.

Would that at least go some way toward explaining this error? And if so, how could I undo it?

Ehm, it could. And no clue without knowing what you're doing exactly. Seems like you're requiring traintime.core from a CLJS namespace, but traintime.core is a CLJ namespace. So just stop requiring it if you don't need it. Or make it into a .cljc file if you need that functionality to be available in both CLJ and CLJS contexts. Or require it as a macro namespace if you need just a macro from it - but better yet, read how to create .cljs and .clj files together for macros so that requiring macros becomes easier.

my shadow-cljs.edn had the incorrect namespace for the :init-fn key

Heheh, happens.