Clojurians Log v2

I got it to work, providing an explicit key depending on the src url fixed it, still not sure why it didn't work without one

Hey all - running into an issue with npm-deps in cljs - everything works fine until I add some npm-deps to my project, at which point reagent's local variable that's supposed to be pointing to react-dom becomes undefined. This is using figwheel

hmm that's strange, I removed :npm-deps from the compiler options and the problem is still here... maybe this is a compiler cache issue

well this is strange... I nuked the target directory entirely and the problem is still here

so much state 😭

what on earth... I removed node_modules too and it's still happening

Now I'm getting ReferenceError: $jscomp is not defined

this is so brittle...

now every time I build I get Unable to resolve symbol: import in this context 1993 without a filename

finally got everything to work by completely busting the cache and removing node_modules, but now every time I add it back I get the same error... it seems figwheel+reagent+react-dom really don't work well together at all, which is kind of baffling to me

Seems like maybe you're changing the src after it already been rendered (hitting this: https://html.spec.whatwg.org/multipage/embedded-content.html#the-source-element "Dynamically modifying a `source` element and its attribute when the element is already inserted in a `video` or `audio` element will have no effect."), while if you add the :key to it, it rerenders the entire element and reinserts it with the new src set, rendering properly.

one gotcha i've run into with reloading js code is the const keyword is not reload friendly as it will throw an error if you try to rebind something with the same name.

I’d take it to #figwheel or #figwheel-main , then 🙂 And alternatively, you could try using shadow-cljs, it seems to be pretty good for npm deps. I believe npm deps are newer to figwheel than to shadow-cljs, but I also think that Bruce is pretty active and motivated in fixing whatever npm deps problem you might be having with figwheel.

Hey everyone! Cljs beginner here. Does anyone have a solid and simple setup for clojurescript to create and export to Javascript code which I can then host as a gist

clojurescript exports to unreadable javascript code so I don't think you can use it for a gist

but I'm also a beginner maybe someone else can give you a better answer

anybody using clojurescript for backend node development? If so, what are you using to interface with sql databases?

If you don’t use any optimization, you can see the correlation if you squint a bit, but it won’t really be useful. Why do you want a gist of the generated code?

Not necessarily a gist. Just a js file that I can load via <script>. It's for a roamresearch extension

If your CLJS snippets don't require any dependencies, then you can use http://app.klipse.tech/

They do :/

if you're doing backend development, why not go straight for clojure instead of clojurescript? If you're still using clojurescript for backend (for whatever reason), maybe try using what you're already used to in JS but interop with it in CLJS, should get you up and running quickly

Ah, then I'd just follow the shadow-cljs user's guide. :) You should end up with a scaffolding that has just 2-3 files with a few lines in them.

It's a backend for my web crawler. I plan to use puppeteer js for the scraping part because puppeteer doesn't have a java client, now I just need a way to persist the scraped data. In Node land I use typeorm for this kind of stuff buts its tied heavily to typescript, guess I will try to find a light alternative (something more like next.jdbc for node). Thank you!

There's Etaoin to remote-control browsers from Clojure, I'm using it in production here for a web crawler/scraper.

Wow I didn't know about it. Thank you! May I ask have you used Puppeteer before, and if so is there any major difference between the two?

"reloading JS code" is not really the same as "reloading CLJS code", at least in the React Hot Code Reload world, as it's not all code that gets reloaded, either the component itself gets reloaded and reinserted or the entire file gets reevaluated, while in clojure land it's just updating vars with new forms, regardless

I've used both, for scraping as well 🙂 Etaoin is nice in that it's still using webdriver protocol, so easier to integrate everywhere. Mostly it's just the API itself that differ, as Etaoin is made in traditional clojure fashion (works well with repl workflow) while puppeteer as a traditional JS API (wants to evaluate and rerun the entire file on change). Of course this can be worked around, but no need when a nice API already exists. When using Etaoin for testing I also managed to get all of Chrome, Firefox and Safari to work it and I think puppeteer only works with chrome and firefox (3rd party)

(although, haven't used puppeteer from clojurescript, only vanilla js)

This is super useful, thank you guys.

true

I thought so, but another SO issue claimed that setting the src element directly, without an embedded <source> element should fix it. I am however replacing another video element with a srcObject and no src, maybe it doesn't rerender that correctly otherwise? :thinking_face:

Hm, yeah, setting src on video should update correctly indeed. Strange huh

I want to apply some function (x,y) to each (x,y) value on a 500x500 grid, in order to draw on a <canvas> with decent FPS. Should I consider more efficient storage for the numbers than Clojure vectors? In Clojure, I'd reach for tech.ml.dataset.

I would write the simplest implementation that comes to mind, measure its performance, and tweak it till it's sufficient. Hard to say anything in advance, especially without knowing the target PCs' specs and the function.

^. My backup plan would be a plain javascript array with length 500*500, then just calculate the index based on x and y.

Thanks for the advice! I like the simple sound of a plain 1d javascript array. Reminds me of https://github.com/mikera/imagez, which uses a 1d java array to store images. That was a pleasure to work with.

What kind of functions are you appointing over the data? There are various WebGL backed matrix implementations for JavaScript, even if you’re not using WebGL for rendering.

Plain math, at least to begin with. Coordinate transformations, colors

Hello, it seems that ClojureScript doesn't support BigInt literal N (at least on node). I have found a Jira issue, but it is closed. Is it a known issue? Construction via js/BigInt, works as expected. But operator ** doesn't seem to work. Does anyone manage to work it out? Thx! :)

Hey, everyone! Got a small question that's more like a general web dev question rather than specifically ClojureScript. I've written a small app in ClojureScript using a 3D WebGL library that displays a 3D model of a TV and streams an MP4 onto the screen. I can't really figure out what determines whether a link is compatible though. For https://live.gcloud mp4's it streams fine, but for others I can go to the url and download the mp4 but not stream it from my web app. At first I thought it was just that they only allowed downloads, but apparently another javascript player called JWPlayer grabs the same url that only hosts downloads and streams it from the website just fine. What's the difference?

Ah never mind, it's not a problem with implementation, it's just CORS authentication. Doesn't even matter for the final web app.

hi , I’m trying to replicate react-window example (https://codesandbox.io/s/github/bvaughn/react-window/tree/master/website/sandboxes/fixed-size-list-vertical?file=/index.js) with no luck, can someone please point me how should it be done? my take was

(defn row [index, style]
  [:div {:style style
         :background-color (when (= 1 (mod index 2)) "#F8F8F0")}
   (str "Row" index)])

(defn example []
  [:> FixedSizeList {:height 150
                     :item-count 1000
                     :item-size 35
                     :width 300
                     :border "1px solid black"}
   [row]])

(defn app []
  [:<>
   [example]]

According to that example, row is a function that has to return an element. By itself, row is not a component. Try replacing [row] with just row and wrapping the whole body of the row function in (reagent.core/as-element ...).