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

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;
  }
...

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 => {...})
...

(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"})

ERROR: TypeError: undefined is not an object (evaluating 'agent.newTransaction')

look at the translation table here https://shadow-cljs.github.io/docs/UsersGuide.html#_using_npm_packages

:as Auth0 is incorrect in this case

oh wait nvm you are using /default

just call the authorize maybe? (.authorize webAuth #js {:scope ...})

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 🙈

don't get the property of an object if you are supposed to just call ist

webAuth.authorize({scope:...}) translates to (.authorize webAuth #js {:scope ...})

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.

I guess I have to reread the whole docs on using NPM.

js interop can be a bit tricky at times but gets easier when you have done it a bunch 😛

project still compiles and runs.

I find when that happens, do a rm -r .shadow-cljs (the directory that starts with a . NOT shadow-cljs.edn)

Something gets out of sync like new deps or node packages it seems.

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]
    ...)

except for the element in the for none of those should have a :key

[:div {:key "children"} children] -> (-> [:div] (into children) . This behavior is little difference from those of React.

For react, special prop children is not plain array, but a react component. For cljs, & children is just a sequence. That's why its elements should be 'key'ed or should be turn into vector.