This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2021-11-02
Channels
- # announcements (11)
- # aws (2)
- # babashka (42)
- # beginners (26)
- # calva (17)
- # cider (1)
- # clara (2)
- # clj-kondo (44)
- # clojars (30)
- # clojure (43)
- # clojure-australia (6)
- # clojure-europe (29)
- # clojure-gamedev (4)
- # clojure-greece (1)
- # clojure-nl (4)
- # clojure-spec (4)
- # clojure-uk (6)
- # clojurescript (28)
- # cursive (16)
- # data-science (1)
- # datahike (4)
- # datomic (26)
- # emacs (6)
- # events (3)
- # fulcro (11)
- # graalvm (7)
- # holy-lambda (118)
- # java (9)
- # jobs (1)
- # leiningen (3)
- # lsp (21)
- # luminus (2)
- # malli (13)
- # membrane-term (1)
- # music (1)
- # nrepl (3)
- # off-topic (38)
- # pedestal (2)
- # polylith (39)
- # re-frame (33)
- # reagent (7)
- # releases (1)
- # remote-jobs (4)
- # rewrite-clj (28)
- # ring (21)
- # sql (2)
- # tools-deps (23)
- # vim (4)
- # xtdb (15)
Any recommendations for how to approach WebGL stuff with cljs? I've seen a couple examples using Three js via cljs->js interop. Is there a cleaner way to do it?
I would recommend looking into react-three-fiber, It is doable, I ported a couple of their demos under cljs here: https://github.com/binaryage/cljs-react-three-fiber
some other prior art: https://github.com/thi-ng/geom https://github.com/DougHamil/threeagent
I’m struggling using a JS library in context of a react-native app using shadow-cljs. The library is https://github.com/auth0/react-native-auth0. I can call into the library from pure JavaScript but translating these calls to ClojureScript does not work. Probably I’m missing something. Never had any trouble with using JS libraries from CLJS in this context. What makes the library different is that it exports a JS class and I suppose there is a difference regarding this
when I call into the library?
The library:
export default class Auth0 {
/**
* Creates an instance of Auth0.
* @param {Object} options your Auth0 application information
* @param {String} options.domain your Auth0 domain
* @param {String} options.clientId your Auth0 application client identifier
*
* @memberof Auth0
*/
constructor(options = {}) {
const { domain, clientId, ...extras } = options;
this.auth = new Auth({baseUrl: domain, clientId, ...extras});
this.webAuth = new WebAuth(this.auth);
this.options = options;
}
...
and this is the call in JS:
import Auth0 from 'react-native-auth0';
...
const credentials = require('./auth0-configuration');
const auth0 = new Auth0(credentials);
...
let webAuth = auth0.webAuth;
console.log('webAuth: ' + webAuth);
webAuth.authorize({scope: 'openid profile email'})
.then(someCredentials => {...})
...
My attempt to call the same authorize function/method in CLJS:
(ns auth0.core
(:require ["react-native-auth0" :as Auth0]))
(defn create [config]
(new Auth0/default (clj->js config)))
…
(ns
(:require
[auth0.core :as auth0]))
...
(def config {:clientId "...."
:domain ""})
(def auth0 (auth0/create config))
(def webAuth (.-webAuth auth0))
(def authorize (.-authorize webAuth))
(authorize #js {:scope "openid"})
This fails with:
ERROR: TypeError: undefined is not an object (evaluating 'agent.newTransaction')
where agent
is undefined.look at the translation table here https://shadow-cljs.github.io/docs/UsersGuide.html#_using_npm_packages
To be honest, I was poking around in the repl and was wondering why there is default
but it returned some structure that appeared to be useful 🙈
the .-
would be let authorize = webAuth.authorize; authorize(...)
and that likely won't work either
I’m pretty sure I tried that at first hand… but obviously not since it seems to work now.
Thank you very much @U05224H0W.
js interop can be a bit tricky at times but gets easier when you have done it a bunch 😛
I find when that happens, do a rm -r .shadow-cljs
(the directory that starts with a .
NOT shadow-cljs.edn)
which shadow-cljs version do you use? this issue should have been fixed a while ago?
The fix was that
(defn premium-block-blur [& children]
...)
Should be without &
. Must have something to do with the fact that there are no other props.
The error is quite misleading though.
Hope this helps someone else stumbling upon the same issue 🙂[:div {:key "children"} children]
-> (-> [:div] (into children)
. This behavior is little difference from those of React.