This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2020-05-21
Channels
- # announcements (3)
- # babashka (26)
- # beginners (45)
- # calva (10)
- # chlorine-clover (9)
- # cider (4)
- # clj-kondo (7)
- # cljs-dev (10)
- # clojure (95)
- # clojure-europe (33)
- # clojure-france (5)
- # clojure-nl (3)
- # clojure-spec (2)
- # clojure-sweden (3)
- # clojure-uk (33)
- # clojurescript (54)
- # conjure (101)
- # core-async (14)
- # cursive (1)
- # data-science (91)
- # datascript (3)
- # datomic (16)
- # figwheel (3)
- # figwheel-main (15)
- # fulcro (35)
- # ghostwheel (5)
- # graalvm (13)
- # helix (29)
- # java (5)
- # jobs (6)
- # kaocha (6)
- # leiningen (1)
- # meander (12)
- # off-topic (54)
- # pathom (13)
- # re-frame (16)
- # reagent (8)
- # reitit (4)
- # rum (3)
- # shadow-cljs (49)
- # spacemacs (2)
- # sql (5)
- # tools-deps (10)
- # xtdb (8)
- # yada (3)
I’m messing around with three.js and the new bundle target. I can get (require '[three])
to work through figwheel + webpack, with /node_modules/three
and all’s well … I have a three
ns and can call (three/AmbientLight. 0x202020)
etc. Where I’m hoping for a little guidance is how to reach into other stuff in the node module.
Eg. there’s a collada/dae model loader class, and I can’t quite figure out how to phrase my (require ,,,)
to get at it, eg. https://github.com/mrdoob/three.js/blob/master/examples/webgl_loader_collada.html#L21-L23
(The file is sitting at /projectroot/node_modules/three/examples/jsm/loaders/ColladaLoader.js
… I can cat it, but … how do I tell cljs about it in a require?)
I think your example is an ES6 import. The bundle target will generate NodeJS require from the Clojure require macro. I'm still new to all of it, so that's all I can think of. But basically it be you need to follow what NodeJS would do.
Maybe you need to install this: https://www.npmjs.com/package/three-collada-loader
And good thought: guess I can just experiment and watch what shows up in the npm_deps.js after cljs compile but before it goes into webpack
Like is this a valid NodeJS require? Or would a NodeJS package needing to require something like that need to use the ESM module and use ES6 import on it?
shadow-cljs has different rules for classpath-js. meaning that all the files you require from the classpath will be processed by it and will eventually even go through :advanced
node will never see that file, it will already be written and be like the CLJS output as far as node is concerned
nope, failure to compile with [Figwheel:WARNING] Could not Analyze: /_SLASH_example_SLASH_jsm_SLASH_loaders_SLASH_ColladaLoader.cljs is not a relative path src/frontend/rgm/browser/three.cljs
… looks like it heads through clojure.core/munge
someplace
hm, weird. There’s a more recent third-party packaging of that loader that takes the form var collada = require('three-loaders-collada')(THREE);
. Pretty sure I’d need to use a :foreign_libs
and that JS stub re-publishing trick to disentangle that.
this translates to
(ns
(:require
["three" :as THREE]
["three-loaders-collada" :as collada-init]))
(def collada (collada-init THREE))
no need for special compiler hacks, custom packages or anything of that kindThanks Thomas! Seems to work. I had no idea I could just call the kinda-sorta-namespace node-provided ns as a function. It confuses clj-kondo, but I can live with that.
clojure
(ns rgm.browser.three
(:require
[reagent.core :as r]
[three]
[three-loaders-collada :as loader-init]))
(loader-init three)
(def *loaded-scene (atom nil))
(def scene (three/Scene.))
(def loading-manager (three/LoadingManager. #(.add scene @*loaded-scene)))
(def collada-loader (three/ColladaLoader. loading-manager))
(defn load-model
[]
(.load collada-loader
"/path/to/model.dae"
(fn [model]
(reset! *loaded-scene (.scene model)))))
I still have a broader (though now academic) question: this loader does sit in the main three.js npm module. Is it strictly necessary to re-package it to its own manual, or is there a way to require/refer to it in the main npm module? (Though I guess this was enough of a problem outside of CLJS that there are 4 (!) separate third-party re-packagings on npm).
I don't know the three package. if the file is part of the actual npm package then you might be able to directly require it via (:require ["three/wherever/the/file-is.js" :as x])
clojurescript this:
clojurescript
(ns rgm.browser.three
(:require
[three]
["three/examples/jsm/loaders/ColladaLoader.js" :as loader]))
turns into :target :bundle js that (via target/…/npm_deps.js)
js
module.exports = {
npmDeps: {
"three": require('three'),
"three/examples/jsm/loaders/ColladaLoader.js": require('three/examples/jsm/loaders/ColladaLoader.js') }
};
and since ColladaLoader.js
ends with export { ColladaLoader };
, the loader becomes available to cljs as loader/ColladaLoader
.
or rather, do the injection of the base THREE
lib so that it can futz with enhancing its prototype. Ugh. Whyyy.
Hey 👋 , does anyone know where I can find an example of an app that uses reitit frontend and code splitting at the same time? one that I can look at on github just to see how it should/can be done. Thanks
Is there a way to set goog.DEBUG to false when using optimizations none (nodejs build)?
Can't get it working with optimizations simple, so staying with none is my best option at the moment.
@danielstockton whats the issue? :simple
should really just work as it doesn't do any of the problematic optimizations.
Kept getting this error coming from react: https://github.com/reactjs/reactjs.org/issues/1603
Tried installing react/react-dom the same version as reagent with npm, clearing compiled files etc.. but couldn't get around it
It includes reagent.dom.server to render-to-string
for server side rendering
And i think reagent.dom.server requires react-dom
No, just using lein cljsbuild to compile the node build and lein dependencies
If you are using cljs devtools in chrome, please it let it be known here: https://twitter.com/ChromeDevTools/status/1263421789671239681
I still have a broader (though now academic) question: this loader does sit in the main three.js npm module. Is it strictly necessary to re-package it to its own manual, or is there a way to require/refer to it in the main npm module? (Though I guess this was enough of a problem outside of CLJS that there are 4 (!) separate third-party re-packagings on npm).
I did try poking at this a little, but I'm curious if anyone else has experienced this issue at all? I'm using fipp's pretty printer in CLJS and in Cursive's REPL I see the below -- in the browser, I get one js/console.log line per entry. It looks like fipp is running a single println per token...
@tekacs what version of fipp are you using? do you have this problem with a repl outside of Cursive?
@bbloom 0.6.23 (the latest, I believe) and fipp.edn/pprint does the same thing in the browser REPL, without Cursive connected
where this is the line where the js/console.log is coming from... I guess print may have different (one line per call) behaviour when enable-console-print! has been run (presumably by something in my environment)?
So I'm able to work around this, given fipp's writer behaviour, by going with:
(println (with-out-str (fipp.edn/pprint object-to-print)))
for the time being
which isn't ideal (not sure how it handles large objects, etc.), but certainly can work