What's the CLJS equivalent of a JS for await (const item of channel)?

I'm having trouble compiling a ClojureScript project to a React component to be used in JavaScript. The problem seems to be related with Material UI, which the project is using. When I'm trying to render the exported component on the JavaScript side, I'm getting an error, the full stack trace is in the thread. This is the kind of export I'm trying to do. Here, export1 works and export2 produces the error, as it contains a component from Material UI.

(ns testinki.core
  (:require [reagent.core :as r]
            [reagent.dom :as d]
            [reagent-material-ui.core.chip :refer [chip]]))

(defn export1 []
  (r/create-element (r/reactify-component (fn []
                                            [:div [:h2 "Hi guys"]])) #js{}))
(defn export2 []
  (r/create-element (r/reactify-component (fn []
                                            [:div [:h2 "Hi there"]
                                             [chip {:label "Hello again"}]])) #js{}))

I would like to make a reagent wrapper library for a bunch of 10-year old JS code. The JS code itself bundles like 20 twenty different JS files that it needs. Is there some way to include this all of this JS code with the compiled ClojureScript bundle?

I have lots of CLJS experience, minimal JS experience, and no experience trying to wrap JS code.

There is https://clojurescript.org/reference/packaging-foreign-deps but is that still the way to go?

Apparently there is an issue for the lack of documentation: https://github.com/clojure/clojurescript-site/issues/224

Also found this decade old resource: http://lukevanderhart.com/2011/09/30/using-javascript-and-clojurescript.html

@simongray how is the JS bundled and used now?

@thheller Using this script… https://github.com/simile-widgets/timeline/blob/master/src/webapp/api/timeline-api.js

and why do you intend to bundle it together with the CLJS code? why not just keep it as a separate script?

How would I distribute it as a library then?

And honestly, I would prefer more explicit dependencies than this automagic script

well from glancing at this code I can tell you that this is not going to be fun. the code is clearly not written in a bundler friendly style so you are going to have to make adjustments no matter what

right

My plan was to make som adjustments either way, remove as much as possible and bundle the remainder together with some CLJS to make a reagent component

so this code is really designed to be included as a separate script tag. the bundler cannot change that really your only option is rewriting the code

hm…

so the bundler you’re talking about is ClojureScripts built-in way to handle foreign libs?

The files that end up being included look like this

bundler as in generic term for bundler. be that CLJS, shadow-cljs, webpack or really anything bunlding JS

:foreign-libs will not help you here (especially since shadow-cljs doesn't support them)

hmmm

I really just need a way to load a bunch of JS code in advance

whatever is the shortest path there, I’ll take ity

I can give you shadow-cljs specific options but those will not work with regular CLJS

I was really just trying to see if there was a way to make a CLJS lib that includes some JS. I guess that is not the case?

if it’s just for my own project, I guess I can simply include the JS file that loads everything in the index.html

and then call the JS methods from ClojureScript

:foreign-libs would be the way to go for regular CLJS, after adjusting the code of course.

looks a bit different for shadow-cljs, same idea but different code adjustments 😛

there is one way to make it work generally but I'm unsure the code will actually survive :advanced so that might not work 😉

@thheller Ok. And the regular CLJS way is not supported in shadow-cljs?

:foreign-libs are not no. There is also CSS involved so honestly the best option for making this a library is given the users of the library instructions of where to put the code 😛

hm

sucks

I guess I will not be making a library then.

@thheller If you don’t mind my asking, why don’t you support :foreign-libs?

I mean, I get that it’s possibly not the ideal way to go and that shadow-cljs might do it better, but what about ecosystem cohesion?

does supporting the one preclude supporting the other?

https://shadow-cljs.github.io/docs/UsersGuide.html#_why_not_use_cljsjs

@thheller that does assume that the only JS code worth using in CLJS comes from a Node package.

I wouldn't say so - you can use any local JS file with shadow-cljs.

Namely, this: https://shadow-cljs.github.io/docs/UsersGuide.html#_requiring_js

For your own project, but you can't use it to make a distributable library.

Ah, I see, right.

as I said there is a way to make it work with all CLJS tools

@thheller is there a guide somewhere?

We had to integrate some react components bundled as a JS UMD build into our CLJS client built with leiningen. We managed to do so by using :foreign-libs and reagent.core/adapt-react-class project.clj:

:cljsbuild {:builds {:dhp-client
                       {:source-paths ["src/cljs"]
                        :compiler {:main dhp-client.core
                                   :language-in :ecmascript6
                                   :language-out :ecmascript5
                                   :foreign-libs [{:file "resources/lib/kartklient.js"
                                                   :provides ["markerMap" "routeMap" "setCoordinateMap" "setCoordinateOnRouteMap" "setMultipleCoordinatesMap" "setMultipleCoordinatesOnRouteMap"]
                                                   :global-exports '{markerMap MarkerMap
                                                                     routeMap RouteMap
                                                                     setCoordinateMap SetCoordinateMap
                                                                     setCoordinateOnRouteMap SetCoordinateOnRouteMap
                                                                     setMultipleCoordinatesMap SetMultipleCoordinatesMap
                                                                     setMultipleCoordinatesOnRouteMap SetMultipleCoordinatesOnRouteMap}}]}}

(ns dhp-client.helpers.kartklient
  (:require [reagent.core :refer [adapt-react-class]]
            [markerMap :as markerMap]
            [routeMap :as routeMap]
            [setCoordinateMap :as setCoordinateMap]
            [setCoordinateOnRouteMap :as setCoordinateOnRouteMap]
            [setMultipleCoordinatesMap :as setMultipleCoordinatesMap]
            [setMultipleCoordinatesOnRouteMap :as setMultipleCoordinatesOnRouteMap]))

(def marker-map (adapt-react-class markerMap))
(def route-map (adapt-react-class routeMap))
(def set-coordinate-map (adapt-react-class setCoordinateMap))
(def set-coordinate-on-route-map (adapt-react-class setCoordinateOnRouteMap))
(def set-multiple-coordinates-map (adapt-react-class setMultipleCoordinatesMap))
(def set-multiple-coordinates-on-route-map (adapt-react-class setMultipleCoordinatesOnRouteMap))

[kk/route-map
        {:data kartdata
         :apikey api-key}]

How can I delete a __Host-prefixed cookie with CLJS? I'm able to delete it in JS using document.cookie = "__Host-Foo=; Path=/; Expires=Thu, 01 Jan 1970 00:00:01 GMT; secure'" but neither (.remove .cookies) nor (.remove .cookies "/" nil) nor (.clear .cookies) seem to work.