Fork me on GitHub
#clojurescript
<
2020-06-09
>
Alexander Moskvichev06:06:46

Hi. Trying to start https://github.com/shadow-cljs/examples/tree/master/babel example, but got an error Cannot read property 'createElement' of undefined... React exists in node_modules folder. I'm finding a way to add js code to a reagent project.

thheller07:06:49

you are likely importing react incorrectly, should be import * as React from "react".

thheller07:06:26

commonjs -> ESM interop is in a weird place. wouldn't really recommend it too much currently.

Alexander Moskvichev08:06:58

import * as React from 'react' did the trick, thank you. Should I create a PR on github?

Phil Hunt07:06:26

Hi. Has anyone got suggestions for introductory hands-on Clojurescript material. Recent enough that it's not going to collapse in a muddle of broken dependencies and with enough context that you don't have to be thoroughly conversant with the modern JS ecosystem to know what's going on?

schaueho08:06:33

@roman01la @lilactown Apparently I failed to convey that I'm looking for something that's slightly more XPath-like and allows for the selection of nodes (e.g. select all child nodes that are of a certain element type).

Roman Liutikov08:06:17

I'd say just do it:tm: via interop then, document.querySelector is already good and afaik there's xpath dom api

๐Ÿ‘ 3
mikethompson08:06:22

@phil634 I'm not entirely sure what you are after, but perhaps use re-frame-template to get a scaffold? We maintain it with very recent dependencies.

Phil Hunt10:06:55

Thanks Mike. That looks very helpful

mikethompson08:06:05

Is that what you are after?

Parenoid08:06:19

to try the code at https://www.learn-clojurescript.com/section-1/lesson-8-capstone-weather-forecasting-app/ I created the project with

lein new figwheel cljs-weather -- --reagent
added the code and dependencies, and then ran
yarn
then opened the project in emacs, where I ran
cider-jack-in-clj&cljs
and the project opened in my browser. I can evaluate simple forms in core.cljs like (+ 1 1) with cider-eval-defun-at-point but trying to evaluate the ns form or, trying to get data from the web with (GET <some url>) causes me to get
Caused by java.lang.RuntimeException
   Unable to resolve symbol: GET in this context
so, what do I have to do to be able to evaluate forms in my buffer as with clj in a cljs project?

Parenoid08:06:55

(posted in #cider, too)

thheller09:06:53

@patrickanium looks like you are evaling in the CLJ REPL since that is a CLJ error. I don't know how to switch your cider session to CLJS though.

delaguardo10:06:37

I got a problem with metadata attached to a function

(defn make [] ^:matcher? (fn [x] x))

(meta (make))
this code works in clojure but throws ERROR - Unexpected token 'return' in clojurescript am I missing something and this behavior is documented somewhere?

delaguardo10:06:14

(function() {
    cljs.user.make = (function cljs$user$make() {
        return cljs.core.with_meta(
            return (function(x) {
                return x;
            });, new cljs.core.PersistentArrayMap(null, 1, [new cljs.core.Keyword(null, "matcher?", "matcher?", (1159196681)), true], null));
    });
    return (
        new cljs.core.Var(function() {
            return cljs.user.make;
        }, new cljs.core.Symbol("cljs.user", "make", "cljs.user/make", (2103882579), null), cljs.core.PersistentHashMap.fromArrays([new cljs.core.Keyword(null, "ns", "ns", (441598760)), new cljs.core.Keyword(null, "name", "name", (1843675177)), new cljs.core.Keyword(null, "file", "file", (-1269645878)), new cljs.core.Keyword(null, "end-column", "end-column", (1425389514)), new cljs.core.Keyword(null, "column", "column", (2078222095)), new cljs.core.Keyword(null, "line", "line", (212345235)), new cljs.core.Keyword(null, "end-line", "end-line", (1837326455)), new cljs.core.Keyword(null, "arglists", "arglists", (1661989754)), new cljs.core.Keyword(null, "doc", "doc", (1913296891)), new cljs.core.Keyword(null, "test", "test", (577538877))], [new cljs.core.Symbol(null, "cljs.user", "cljs.user", (877795071), null), new cljs.core.Symbol(null, "make", "make", (356488202), null), null, (11), (1), (1), (1), cljs.core.list(cljs.core.PersistentVector.EMPTY), null, (cljs.core.truth_(cljs.user.make) ? cljs.user.make.cljs$lang$test : null)])));
})()
here is generate javascript. on 4th line there is extra return statement

delaguardo10:06:09

however this code works as expected

(defn make [] (with-meta (fn [x] x) {:matcher? true}))

(meta (make))

thheller10:06:01

looks like a bug, post it to https://ask.clojure.org/ so it doesn't get lost in the slack void

๐Ÿ‘ 8
kaffein12:06:52

Hi(newbie here)!! is there a lightweight json lib for cljs (frontend) like cheshire (for clj) or do people use some js-wrapped lib most of the time please?

Chris McCormick12:06:14

(js/JSON.stringify (clj->js some-data-structure)) to serialize and (js/JSON.parse some-json-string) to deserialize might be good enough for what you want to do.

kaffein12:06:18

cool thanks @chris358 do you know if there are some ways to keywordize the clj datastructure in this case ? or do i have to do it manually

kaffein12:06:21

oh yeah my bad I think there is an option...just stumbled upon it on the doc

dnolen12:06:05

@delaguardo yeah an old bug, nobody's ever offered a patch for that probably because it's not that critical of a pattern, patch+test welcome

dnolen12:06:31

(well that and some kind of workaround)

plexus14:06:37

does anyone maintain a list of react wrappers for clojurescript?

plexus14:06:49

I guess this is the best place, but it's out of date. I'm going to add Helix and Hicada. Anything else I should add? https://clojurescript.org/community/libraries

orestis16:06:14

hx is a precursor to helix (we use hx)

plexus05:06:15

I didn't add hx since it's superseded by helix. uix looks very nice! Feels like reagent but with nice support for hooks.

plexus15:06:58

what's the recommended way to emit a #js {} or #js [] from a macro? I'm guessing (cljs.core/js-obj) / (cljs.core/array)? would these compile down to literals eventually?

thheller15:06:06

@plexus cljs.tagged-literals/JSValue also works

thheller15:06:33

(defmacro thing [] (let [foo (JSValue. [1 2 3])] `(hello-world ~foo)))

plexus15:06:40

oh nice, didn't know that one

gunar16:06:12

I love the simplicity of setting up a new project with Next.js. What is the ClojureScript equivalent?

mikethompson00:06:08

ClojureScript has "templates" which will create you a scaffold. Eg. re-frame-template or Luminus.

gunar18:06:37

Thanks @U051MTYAB, this was really helpful!

lukasz16:06:15

I've used https://github.com/lambrospetrou/create-shadow-cljs-app and it was really neat. (disclaimer: I have no idea what next.js is)

๐Ÿ‘ 4
๐Ÿ‘ 4
4
Parenoid17:06:07

@dnolen you once had cljs performance demo/test thing on the web that showed a huge grid of squares updating to show dom change speed (I think)... do you remember what that was or where it is?

phronmophobic17:06:05

itโ€™s probably http://swannodette.github.io/2013/08/02/100000-dom-updates/ or one of the other links from that blog

dnolen17:06:07

@patrickanium to be clear that wasn't about dom change speed at all

dnolen17:06:14

just the number of core.async loops in the browser

Parenoid17:06:26

it was... cool.

dnolen17:06:16

oh that one sorry

dnolen17:06:40

that one was different, forgot about that one - the point of that one was different

dnolen17:06:43

still not about dom performance ๐Ÿ™‚

dnolen17:06:07

rather using core.async to batch dom updates so a text field doesn't become unresponsive

Parenoid17:06:46

haha so many posts... was looking for it but can't find it...

Parenoid17:06:16

honestly, was really just into the cool effect of the ui.

Parenoid17:06:52

but now wanting to update a grid like that with websocket data from a MIDI source, so it came to mind.

Parenoid17:06:26

I need to be at your kitchen table thing, lol.

jonas19:06:55

Is it possible to combine modules (https://clojurescript.org/reference/compiler-options#modules) and the new bundle target?

souenzzo23:06:11

I think that you will only use bundle case its a lib and only use modules case its a final app