I’m inclined to call the “aset js/window etc” version or just insert the same JS into the html scripts earlier but was hoping I could invoke (.polyfill js/something).

apparently there is js* which takes a string to “eval”. okay

one thing to note there is that it’s explicitly documented that aset is designed for arrays and only accidentally works for fields on objects - goog.object is the proper way to do arbitrary object operations on objects

thanks; good point!

I found out that the (require [cljsjs.smoothscroll-polyfill]) clause was sufficient to activate the plugin because of how require interacts with those modules.

:thumbsup:

any pointers on experience using https://github.com/aws/aws-amplify in clojurescript projects?

hi, I have a problem with javascript interop, given following piece of ClojureScript code ((aget (Object.) "lol")) I get this JavaScript: ((new cljs.user.Object())[“lol”]).call(null);

this is fine in many cases but not when function context matters, ClojureScript passes null as context which essentially now breaks my code

the reason why I need to do it like this is because the library I’m using does not have a full set of externs definitions in place and thus :advanced compilation munges the function name reference

so I would appreciate some ideas on how to bypass this problem

Is this what this-as is for?

seems very promising!

Hrm. Experimenting with (let [x (goog.object/get o "lol")] (this-as x (x)))

still generates the .call(null)

Right... I think that's the wrong path

which effectively forces the context to be null

What JavaScript would you like generated?

in short, I’m using CodeMirror

need to call cm.getCursor() in my code

((new cljs.user.Object())["lol"])()?

using (.getCursor cm) gets munged

so, tried all kinds of things

Yeah... I see the problem you are faced with.

I’m kinda running out of ideas

using CodeMirror from cljsjs so it has externs definitions in place, just not comprehensive enough (or is it even possible to define externs for .getCursor since it is actually dynamically applied within CodeMirror?)

or to be more exact: .getCursor is there in the code but my calls to it get munged and since the function call goes through prototype chain I’m betting closure doesn’t see .getCursor and you can’t really define externs properly for it

@niklas.collin goog.bind seems promising for this

need to check

Here are the docs for it https://google.github.io/closure-library/api/goog.html#bind

compiling… Let’s see how it goes

yes! Worked!

cheers @mfikes, saved my day 🙂

really did not like the almost 2 meg footprints of :simple compilation 😛

So you end up with something like ((let [o [1 2 3]] (goog.bind (goog.object/get o "indexOf") o 2)))

(defn binded-call [obj fn-name & args]
  (apply (goog.bind (aget obj fn-name) obj) args))

...
(binded-call cm "getCursor")

Cool. I'd recommend using goog.object/get over aget. The former is for objects, the later for primitive arrays.

If you enabled checked-arrays, you would get something like this for the aget call:

cljs.user=> (defn binded-call [obj fn-name & args]
       #_=>   (apply (goog.bind (aget obj fn-name) obj) args))
#'cljs.user/binded-call
cljs.user=> (binded-call [1 2 3] "indexOf" 2)
Assert failed: (or (array? array) (js/goog.isArrayLike array))
	checked-aget' (cljs/core.cljs:469:8)

https://clojurescript.org/reference/compiler-options#checked-arrays

@niklas.collin I think you can also use js-invoke

Which looks pretty similar to your binded-call fn 🙂

well damn

looks like perfect match yeah

and exactly what I was looking for

Hah! I forgot about js-invoke

never needed it before

I was expecting that there would be a function for this in core considering it is not that rare case

just couldn’t find it

and yes, js-invoke works beautifully :thumbsup:

The nice thing about js-invoke is it safely uses what would otherwise be an incorrect call to aget, so it is likely much more performant than going through goog.bind. 🙂

yeah

this was pain to debug in overall, took some time to even find where the problem was

If perf matters, then both of them are "improvable"

I'm a little embarrased, given I made that change 🙂 Heh.

but finally my app is working with :advanced mode

@mfikes lol

There's lot of cool stuff listed under (apropos "js-") that I don't appreciate 🙂

@rauh As a faster alternative to js-invoke would you cache the result of goog.object/get and then perhaps also optimize the call to .apply by passing a JavaScript array literal for your arguments?

@mfikes Yeah I also see js-in underappreciated. 🙂 I'd probably pluck the array out of the passed IndexedSeq directly, just like some fns in core do it. Then passing that array to apply.

Fun fact: bind will soon be faster in v8: https://v8project.blogspot.de/

Cool. It looks like js-invoke is not even used in ClojureScript itself anywhere.

Yeah I never used it either. I'm guessing it's super old 🙂

If curious: https://github.com/clojure/clojurescript/commit/2e7c39649b4365624462315bb06700590f53a0bc

And js-invoke could be made multi arity and then efficiently invoked for low arity with (js* ...)

FWIW, fn-invoke-direct would also properly call it, just not in dev mode.

Indeed

heh, I forgot about js-invoke, I think I added that years ago?

yeah for "@@iterator", 3 years ago

I've got an error compiling cljs with node dependencies: node_modules/firebaseui/dist/firebaseui.css: Unexpected token, expected ( (1:8) Anybody knows what to do with this?

@okilimnik that reads like it’s trying to parse CSS as JS maybe?

FirebaseAuth.js from react-firebaseui module has this code: require('firebaseui/dist/firebaseui.css')

i think it is a common react code

@okilimnik FirebaseUI depends on webpack to bundle CSS. Closure-compiler doesn't support that.

just use shadow-cljs, it already filters css requires.

although you’d need to somehow link them into your your css manually then, so its not perfect either 😉

@thheller It just ignores these requires? I could probably implement same in Cljs compiler

@juhoteperi it depends but most of the time they are safe to ignore since they are blank require statements and their return value is ignored

basically just telling webpack to include the css

but it is not parsed as JS or anything

you could maybe hand the closure compiler a fake empty firebaseui/dist/firebaseui.css.js to make it happy

it is not very common for “dist” files to have these css requires

Yeah, I think using empty files would solve this

Got it, thanks.

https://github.com/firebase/firebaseui-web-react/blob/master/src/FirebaseAuth.jsx#L47

its a horrible pattern 😞

Huh, ES6 module using require on runtime..

its really just for webpack, nothing more.

well, I guess const firebaseui = require('firebaseui'); is even worse

closure is going to hate that 😛

It might be able to hoist the requires to top-level, and then just get the exported value later

from their comments I guess they do this so SSR doesn’t load these requires since import can’t be conditional anymore

I think that it is better just to remove css requiring and to add a link in index.html. But how to force cljsbuild do not reload dependencies? It rolls back my changes

@okilimnik If you don't use :install-deps but manually install Node packages, the changes shouldn't be lost. But this is not very clean solution.

Yeah, I've just tried it and it has compiled

thanks

I think a clean solution will be when clojurescript will support these cases from the box 🙂

FWIW the react-firebaseui doesn’t seem to do anything useful. you can probably write that in 5 lines of CLJS yourself

And I think firebaseui is implemented as Closure library, so using it as such instead of through Module processing will probably work lot better

@juhoteperi unfortunately firebase is only published as an :advanced compiled bundle. no sources available.

at least I couldn’t find any

FirebaseUI has some sources available: https://github.com/firebase/firebaseui-web/blob/master/javascript/ui/mdl.js

oh, ok cool

assumed that was part of firebase itself, guess its not

hmm nope, the firebaseui package again doesn’t contain any sources only the dist file 😞 (which is :advanced)

@okilimnik You could try this ClojureScript patch: https://dev.clojure.org/jira/browse/CLJS-2447

Hello!

could you please help me?

I'm trying to use pouchdb with reframe, so I'm doing exactly what manual says and keep getting Uncaught ReferenceError: cljsjs is not defined

I have [cljsjs/pouchdb "6.3.4-0"] in my dependencies in project.clj

(ns frontend-boilerplate.db
  (:require cljsjs.pouchdb)) 

(println cljsjs.pouchdb)

what should I do?

@melvoloskov (println js/PouchDB)

#object[PouchDB$5]

That looks correct. This package doesn't support :global-exports feature which would allow accessing the JS object using namespace name or alias, so you need to access it using the JS global.

but there is a package https://github.com/cljsjs/packages/tree/master/pouchdb

it feels like i'm just missing something very basic

im using cljsls for the first time

yep, https://github.com/cljsjs/packages/issues/14 is labeled externs missing

thanks!

Missing externs won't affect dev builds at all. What's the problem? If it compiles and println prints the object, it seems to be working?

Also the issue is closed and externs have been added.

but how do I use it properly, without that js/ thing?

just like the other packages

or should I use js/PouchDB instead?

now on my macbook it works, but I had to uninstall Java 9 and install jdk 1.8 (I use a machine with Fedora installed as a main one recently and it still doesn’t work there)

Part of my confusion as to what is going on is that I’m using jenv to swap out java versions. 😱

Could someone please help me understand some behavior I'm seeing? I'm not sure where to look for the source of the problem: I'm developing with figwheel and trying to add an npm-dep to a namespace. I've got the project.clj set up to pull in the dep (apollo-client). When I add the dep to the namespace with (:require [apollo-client :as apollo]), figwheel tries to compile but throws this error: "Undefined nameToPath for apollo_client". This points to a failure of mine to understand how to use npm-deps, but that's not the big problem I'm seeing. If I then remove that require from the namespace, figwheel continues to recompile on changes to the namespace, but begins printing not required: ('path/to/file' nil), and no future changes to the file are picked up unless I kill and restart the figwheel process. Any ideas?

This was reported so many times already. Probably a bug in cljs. For me it worked well without Figwheel

i remember i came across a ticket the other day where someone else ran into an issue using that same library https://dev.clojure.org/jira/browse/CLJS-2369

here's another ticket for the other issue i've seen "Reference error: require is not defined."

https://dev.clojure.org/jira/browse/CLJS-2412

this one's got some patches against the google closure compiler to address the underlying issue https://github.com/google/closure-compiler/pull/2622 https://github.com/google/closure-compiler/pull/2627

which is just to say that the npm-deps feature is being actively worked on and some of the issues people are encountering are resolved by patching google closure compiler and it seems getting patches accepted into that project can take a while

in the meantime you could just try shadow-cljs which doesn’t have any of these issues 😉