clojurescript 2019-10-10

So I'm trying to render a simple unordered list with data from an api, but for some reason I'm getting this error

Error: Objects are not valid as a React child (found: object with keys {takes, dirty_takes, puts, dirty_puts, buf, closed, add_BANG_}). If you meant to render a collection of children, use an array instead.
    in coding_test.website.core.list_comp 2 react-dom.inc.js:13951:28

Which I don't understand because when I test the render function list-comp with some test data it returns the correct result

(into [:ul] (map #(bike-station (:name %)) data)) => [:ul [:li "Stortingstunellen"] [:li "Professor Aschehougs plass"] [:li "Borgenveien"] [:li "Enerhaugen"]]

skykanin00:10:07

Hmm, it seems like this is a core async problem. I tried making a render function with the test data and it works as expected, but when I (println stations) I'm getting what I expect

skykanin00:10:35

ok, I used an atom to save the data and that worked

dpsutton02:10:27

Your component returns a go block which reagent certainly can’t render

Mikko Harju13:10:50

Does someone have a clue who would be responsible for submitting this (in our case a 527kB) goog.addDepencency -evaluation to the browser when a file has been loaded with (load-file or a new connection is made to the REPL? This same information is repeated multiple times making the whole thing hang for substantially long time. I’ll try to dig this up somewhere, just thought I’d ask around if someone has an answer right away 🙂

Mikko Harju14:10:01

At least add-dep-string from the compiler seems to be doing that, so maybe I’ll start there.

Mikko Harju14:10:34

That evaled dependency JS has 919 lines of goog.addDependency(<some-file>, [<list of deps>], []);. I know this must be needed to be sent, but not multiple times, so something is triggering way too often.

Mikko Harju14:10:37

It seems that the payload is not the same, actually, but most of the content is.

thheller15:10:32

you identified the add-dep-string correctly. why it is sending so much I don't know though.

Mikko Harju17:10:57

I'll have to dig into this. We have a fairly large project, but I don't think it really should be necessary to send this much information on every load

Mikko Harju17:10:08

(not to mention the duplicate information)

Mikko Harju08:10:47

@U05224H0W this thing is due to the load-file loading the dependencies for each :require in the file that has been loaded. There’s a great deal of redundancy in this calculation, I’m currently contemplating if I can take some time to come up with a better approach and make a PR out of it.

Mikko Harju08:10:29

The “culprit” is the cljs.repl/load-dependencies:260 that just basically mapcats all deps and pushes them out one by one.

dazld18:10:05

What’s the recommended way to interact with a Uint8ClampedArray?

dazld18:10:22

I noticed that things like nth don’t appear to work

dazld18:10:41

(nth (js/Uint8ClampedArray. [0 1 2 3]) 0)
nth not supported on this type function Uint8ClampedArray() {
    [native code]
}(first (js/Uint8ClampedArray. [0 1 2 3]))
0,1,2,3 is not ISeqable(set! (js/Uint8ClampedArray. [0 1 2 3]) 4 4)
Error in phase :compilation
invalid dot form

dazld18:10:22

ah! aget

paul a18:10:15

yup, in my experience aget and aset work well enough on typed arrays

👍 4

mfikes19:10:13

Indeed, if you enable the checked array access feature in the compiler, it will not balk on things that satisfy goog/isArrayLike (it turns out Uint8ClampedArray satisfies that predicate).

👍 4

paul a19:10:19

hmm, i don't think i needed to enable such a feature in order to use aset/`aget` on typed arrays. maybe shadow-cljs did that for me? or have i misunderstood you?

mfikes19:10:29

No, I’m just saying that if you use aget and aset on Uint8ClampedArray values, the compiler & runtime will be OK with it, even if the consumer of your code enables the checked array access feature.

mfikes19:10:00

For example see https://github.com/clojure/clojurescript/blob/5ad96a8b3ae2e3616a19715ba9ba2471a36933a2/src/main/cljs/cljs/core.cljs#L456

paul a19:10:12

ah i see. reading your post on this is also informative 🙂 https://clojurescript.org/news/2017-07-14-checked-array-access

dazld21:10:13

I’m working with ImageData objects. Those arrays can be pretty big - mike, do you have any tips for working with these data structures?

dazld21:10:48

I guess cloning them into persistent data structures is going to be quite slow.

dazld21:10:58

imagedata is a strange one, as despite being a flat list, we generally want to process it in chunks of four (rgba).

dazld21:10:09

the pattern in js with for and advancing the index by 4 on each iteration, for example

dazld21:10:20

let dd = Uint8ClampedArray.from(Array(1e6).fill(0));
let vals = [];

for (let i=0;i<dd.length;i+=4) {
  let r = dd[i];
  let g = dd[i+1];
  let b = dd[i+2];
  let a = dd[i+3];
  vals.push(Math.max(r,g,b,a));
}

console.log(vals.length)

etc

2019-10-10

Channels