Fork me on GitHub
#clojurescript
<
2020-10-23
>
datran03:10:49

I'm currently using re-frame for an SPA but I'm finding the React Query library really appealing. Is there a good way to use hooks in cljs? https://react-query.tanstack.com/docs/overview

wcalderipe05:10:17

if your project consumes a GraphQL API you might want to take a look at https://github.com/oliyh/re-graph

ianchow04:10:27

Hi, I'm getting the error TypeError: Class constructor _o cannot be invoked without 'new' when trying to use this npm library with shadow-cljs https://www.npmjs.com/package/@tonejs/piano . I've tried setting {:output-feature-set :es6} and {:optimizations :none} but no luck. Not sure how to go about debugging this. Any help appreciated.

(require ["@tonejs/piano" :refer (Piano)]) ; works
(Piano.) ; or (new Piano) throws error

phronmophobic04:10:18

it seems weird that it would be complaining about a variable named _o with optimizations turned off. Some things to try: • follow the tips from https://clojurescript.org/reference/advanced-compilation#fixing-advanced-compilation-issues. ie. use two additional options :pseudo-names true and :pretty-print true • there's been people that have had trouble copy and pasting code. since your error is having issues with _o, I'm wondering if there's a strange character before the "o" letter? • do you have source maps enabled? • what's the full .js file that is being produced from that namespace? • I'm also wondering if the cljs file isn't being recompiled or the new build optimizations aren't being updated for some reason

p-himik04:10:03

I can't even use "@tonejs/piano" with shadow-cljs:

Closure compilation failed with 1 errors
--- node_modules/tone/build/Tone.js:2
This code cannot be converted from ES6. class expression that cannot be extracted

p-himik04:10:41

Ah, :compiler-options {:output-feature-set :es6} does fix that.

p-himik04:10:17

The error seems to be a result of some incompatibility between ES5, ES6, and maybe shadow-cljs. Despite the above compiler option, this

super(optionsFromArguments(Piano.getDefaults(), arguments));
gets turned into this:
[...]
_this = _possibleConstructorReturn(this, _getPrototypeOf(Piano).call(this, (0, _tone.optionsFromArguments)(Piano.getDefaults(), arguments)));
[...]
And ES6 constructors, if I understand correctly, always require new and cannot be used withh .call. @U05224H0W I've seen your old comment on SO at https://stackoverflow.com/questions/61040644/clojurscript-extend-a-javascript-class mentioning that you've never seen it before. Do you have any idea what's going on or how to fix it?

thheller08:10:02

the problem here is actually babel

thheller08:10:20

babel is unused to transform ESM code in node_modules. I don't know why it converts the class though. it is only supposed to convert import/export

thheller08:10:58

@U072GK534 try

:compiler-options {:output-feature-set :es6}
        :js-options {:babel-preset-config {:modules "commonjs"
                                           :targets "chrome > 70"}}

thheller08:10:11

not sure why this is necessary but it seems to work

ianchow08:10:12

adding @U05224H0W’s :js-options worked! thanks also @U2FRKM4TW and @U7RJTCH6J for the help :)

p-himik07:10:38

Is it expected that

(this-as this
  (js/console.log this))
and
(let [_ (this-as this
          (js/console.log this))])
may print different things when used in the same context?

p-himik07:10:17

Corresponding transpiled JS:

var this_24 = this;
console.log(this_24);
var __25 = (function (){var this$ = this;
                        return console.log(this$);
                       })();

thheller08:10:02

yes, expected.

thheller08:10:26

really always need to do this-as as the first thing in a function

👍 3
Rafał Wyszomirski09:10:48

Hey hello. Sorry if this question was asked before but how can I get the whole response using day8.re-frame/http-fx? :on-success returns response data only; I would be interested in response headers and status also.

victorb09:10:15

Hmm, not sure there is a built-in way of getting that. You might be able to use :on-request handler to get the full request and it's response

Rafał Wyszomirski10:10:03

Thank you for your response. Okay, so that would be for the request, but no such thing exists for response, right? I am wondering what is the cljs & re-frame way of handling xhr requests then 🙂 Should use cljs-http and built on top of it instead of using http-fx/cljs-ajax?

victorb10:10:05

If I remember correctly, you'll get back a Xhrio object from :on-request, which after :on-success you can call getResponse or getHeaders on. Hacky workaround but think I did something like that when I wanted the status code for some requests

Rafał Wyszomirski10:10:22

@UEJ5FMR6K that would mean that it has to be stored as a ref/atom first, right?

victorb10:10:04

Sorry for the delay. Yeah, either that or store the request in your app-state that you're using for re-frame

Rafał Wyszomirski21:10:31

Thanks for the response. I have managed to solve this issue with help from the community here 🙂 And the answer is using ring-response-format :

:response-format (ajax/ring-response-format {:format (ajax/json-response-format)})

code star 820:10:23

Anyone recommend using CLJS with React? For prototyping? I am also working on trying Figma wireframing to React components.

orestis07:10:55

Check out #helix for a library that works with plain react. We’re using hx which is the ancestor, pretty happy with it.

uosl11:10:36

Personally I'd recommend it over JS for using with React.