@uwo, what I've done in the past is to store only serializable values in my state atom

and use local state (a closure-bound ratom) for ephemeral resources like timers, dom nodes etc.

Is it possible to eval code in ClojureScript? Searching has brought conflicting and confusing answers.

@tech_hutch no, unless you are running self-hosted clojurescript

https://github.com/clojure/clojurescript/wiki/Optional-Self-hosting

I am. I'm running in node.

I doubt it, running in node does not automatically mean using self-hosted clojurescript

Oh? Then I'm not sure what you mean.

are you using lumo?

No.

(I don't know what that is.)

self hosted means you bake in a verison of the clojurescript compiler runnable in javascript in your app, very few apps do this

Oh. I would like to do that.

for most apps it is basically a dev dependency, not a runtime dependency

this article might be helpful: http://nbeloglazov.com/2016/03/05/getting-started-with-self-hosted-cljs-part-1.html

Okay, thanks.

(This is just a personal project.)

In lumo you can do

(require 'lumo.repl) (lumo.repl/execute "text" "(js/console.log \"hello\")")

https://github.com/anmonteiro/lumo

^ which is a private API and may break eventually 🙂

you should use the officially supported cljs.js API

or use replumb

depends on your goals, it is fine for greenfield projects or toy examples, but be aware that in self-hosted mode macros have to be written in a way which does not expect JVM under the hood, which could limit possible set of 3rd party libraries available

actually these days a lot of stuff just works

That's okay. I'm not planning on messing with macros.

Does anyone have a link to the docs? The links in the article don't work.

@tech_hutch you should be aware that the self-hosted API is for advanced users and I wouldn’t recommend using it if you’re just starting out

I'm just looking for simple evaling of strings.

that said, I don’t think there are official docs, but you can read the docstrings? https://github.com/clojure/clojurescript/blob/master/src/main/cljs/cljs/js.cljs

freebie example for evaluating a string:

(require '[cljs.js :as cljs])

(def st (cljs/empty-state))

(cljs/eval-str st "(+ 1 2)" prn)

ClojureScript doesn’t have eval like Clojure

Okay, thanks.

@anmonteiro is there a reason why cljs.js doesn't have separate read and eval phases?

It has?

@pesterhazy there is cljs.js/analyze-str and cljs.js/compile-str

oh I though that's waht you meant by "ClojureScript doesn’t have eval like Clojure"

no I meant that there’s no cljs.core/eval like there is clojure.core/eval

simply because ClojureScript’s compilation model will never support it

@anmonteiro I'm getting {:error #error {:message "ERROR", :data {:tag :cljs/analysis-error}, :cause #object[Error Error: No *eval-fn* set]}}. Do I need to, e.g., pass an eval function as an option?

ooops

yes

(cljs/eval-str st "(+ 1 2)" nil {:eval #(js/eval (:source %))} prn)

^ I revised the last line of my snippet above

Is it necessary or beneficial to wrap js/eval in a lambda, like that?

Thanks, by the way

Also, that worked! Thanks!

well, there are other ways to make it work without a lambda

(cljs/eval-str st "(+ 1 2)" nil {:eval (comp js/eval :source )} prn)

but you ultimately need to extract the :source from the map that the eval-fn is passed

I only asked because the article above just passed js/eval directly.

I don’t think js/eval can understand the ClojureScript map that is passed to it?

you’ll get a very weird result if you do that

^ fear not, it's in the works 🙂 http://dev.clojure.org/jira/browse/CLJS-1952

How do I write the equivalent of <Input value={this.state.name} onChange={this.handleChange.bind(this, 'name')} /> in ClojureScript/Reagent? Specially, the onChange part.

@pupeno something along [:input {:value stuff :on-change (fn [event] ...)}] ?

@iku000888 yes, I got that part, the on-change is what I'm missing in a way that works properly.

Ah, sorry about that.

What is supposed to happen in this.handleChange.bind(this, 'name') ?

Update the state without triggering a re-rendering of the element that will cause the cursor to jump to the end of the text.

You can see it in action here: http://react-toolbox.com/#/components/input

Hm, so updating an atom somewhere won't do?

Updating the atom triggers a re-rendering.

Right...

Can't figure out, sorry. But please do let me know if you happen to get a clue. I also have some problems trying to fine tune re-rendering.

https://github.com/react-toolbox/react-toolbox/blob/dev/components/input/Input.js

That component does seem to do a lot...

Yes, it does.

Perhaps use it directly with reagent's create-element? (Never done it my self...)

current-component

Will apparently give you access to 'this'

I'm not entirely sure what you mean.

I mean, that creates a react element, when I'm trying to use a react element. I'm actually writing the library to make it usable for everybody.

https://github.com/dashmantech/reagent-toolbox

Oh that is cool!

Here's the input component: https://github.com/dashmantech/reagent-toolbox/blob/master/src/cljs/reagent_toolbox/core.cljs#L64-L68

Sorry I know too little to be of any help, but that is a great cause...

Thanks anyway.

Will make use of those one day...!

I do have some pain points controlling re-rendering too, but has been on the bottom of the TODO for ever...

With the latest Reagent in plain inputs, it seems to work ok. At least with my Free-from library there are no issues that I know of.

Anyway, I have to run now, so, I posted to SO http://stackoverflow.com/questions/42433324/how-to-have-proper-bidirectional-binding-on-clojurescript-with-reagent

Good idea!

@pupeno you're running into the classic problem with reagent and input elements

Reagent has special logic to prevent the jumping cursor when you use a [:input]

I know. But I though 0.6.0 helped with this.

but if you use a 3rd party library that wraps inputs, Reagent has no way of knowing it's dealing with an input field

What about when I don't use an html input? How do I apply said magic?

the same issue arose a while ago for the semantic-ui React library

and also I think in React Native

i.e. it arises whenever a controlled input field is used, which is not using Reagent's code

@pupeno: is re-com an option? I've had great experience with their UI lib

so I think the first step would be to discover the root cause of the jumping

I think (but am not 100% sure) the reason is that Reagent (but not React) works asynchronously and batches updates

that's a performance optimization but in this case it causes the input field not to be updated quickly enough

one thing to try is to force updates on every on-change event

there's a flush function in reagent

another thing to try would be to use component-local state (manually accessing .-state this, not through Reagent's helpers), which should trigger immediate updates

but in that case I'm not sure how you would sync with a ratom

finally you could look into Reagent's magic, but it's unfortunately a bit opaque

https://github.com/reagent-project/reagent/blob/b65afde4d7ac4864d7e355acdc16977cb92afa3c/src/reagent/impl/template.cljs#L99

qqq: no, I wouldn't be making my own if I find something I liked already 😉

@pesterhazy I thought the issue was plain re rendering of the component. Why would batches updates cause an issue?

@pesterhazy thabks for the link.

well go forth and find out! 🙂

I'll do. Thanks a lot for the info.

please report back, this is a hard-ish problem that has bitten many people before so it'd be great to have a recipe for solving this

Good to know. Maybe I'll blog it.

@pupeno @iku000888 @pesterhazy I had the similar problem with inputs while using react-bootstrap+`Reagent`, here's the fix I use: https://gist.github.com/metametadata/3b4e9d5d767dfdfe85ad7f3773696a60

@metametadata what's the key change in the snippet? force-update?

@pesterhazy yes. So that - in my understanding - React's virtual DOM is immediately aware of the current DOM value and on next frame doesn't try to render the stale input value (which will lead to cursor jump on the frame after that).

ok that's what I thought

great solution btw ! the only thing I wondered about is if updating the atom in should-component-update may be dangerous (it should be free of side-effects)

@pesterhazy it just changes a local atom so I guess it shouldn't be dangerous

Yeah, maybe it is more correct to reset the local atom in componentWillReceiveProps. I don't remember why I preferred the current solution. Maybe it's less code this way )

🙂

I'm wondering if there could be a general Higher Order Component for this type of thing

I think yes

but I didn't have time to extract it and test with different libs

I think all that is required is passing the "input" component (such component must have value and on-change props) as a parameter instead of using hardcoded react-bootstrap/FormControl

still it's interesting that the Reagent source contains significantly more complicated logic

it probably takes in account IE issues which I haven't encountered

@thheller ...follow ups to yesterday's Object.freeze issue, I received comment that they use Object.defineProperty(My.prototype, 'toString', { value: function () {return 'My'}}) to set toString properly when they use Object.freeze(Object.prototype). I guess I can never make Google write code in that way. 😂

@jiyinyiyong you can write a closure compiler pass that just rewrites the one form to the other for you

no idea how that would work with :advanced compilation but it should just work

doesn't have to be a closure pass, could use babel for it as well

anything that can rewrite JS code really

what about (js* “some js code here”) ?

@darwin it isn't CLJS, it is the closure library itself

ah, ok

@jiyinyiyong if you write a function that takes a string of JS code and returns the modified version the rest will be very simple

It can be as complicated as AST rewriting...

I don't think a regex is enough for this case

yeah definitely no regex

but AST rewriting is really simple

no.. giving up

hehe

Hi guys, trying to follow https://github.com/bhauman/lein-figwheel/wiki/Node.js-development-with-figwheel#nodejs-standalone-application-development-with-figwheel after running

$ node target/server_out/figwheel4node_server_with_figwheel.js          
Hello from the Node!
Figwheel: Can't start Figwheel!! Please make sure ws is installed
 do -> 'npm install ws'

If I have a reagent component and I don't know if it's form 1, 2 or 3. How can I wrap it so that I can preprocess arguments passed to it?

@jaimeagudo which directory did you run it in? make sure the node_modules directory it created is somewhere node can find it

I ran it on the root folder (the same project.clj lives in)

node and then require("ws") works I guess?

many thanks, I haven't tried but I am in the middle of upgrading node to 7.6.0, will keep you posted 🙂

I was in 5.8.0

cool! it works on 7.6.0 😄

thanks @thheller ! 🙂

@pupeno users always invoke the component as [my-component arg1 arg2 ...], so why would you care which form is used for component implementation?

There are ways of wrapping a component with a function that only works for fomr-1 or form-2 but not both.

I think I figured out a generic way.

not sure what you mean @pupeno?

What do I mean why what?

"ways of wrapping a component with a function that only works for fomr-1 or form-2 but not both"

my bad, sorry

🤐

Just checking, but JS still doesn’t have a do like construct except for an anonymous function that you call once right?

@borkdude http://es6-features.org/#BlockScopedFunctions

not sure if it's an expression or a statement though.

@borkdude there’s a proposal for do expressions

@val_waeselynck That looks only like new scoping rules. I was thinking of using something like this in JSX: { console.log(‘foo’); return 1; } which only works when you wrap it in a anon fun

https://ponyfoo.com/articles/proposal-statements-as-expressions-using-do

Hmm, you can do it right now with comma’s?

Not sure if that works

but yeah, that proposal looks good

yeah, lispy JS with commas would work 🙂

@roman01la x = console.log('foo'), 1 this doesn’t yield x = 1 in my browser?

@borkdude bc you assigned result of logging to x which is undefined

Ah, x = (console.log('foo'), 1) works.

so I could use that in JSX I guess

(1,2,3) == 3, interesting

yeah, returns the last value always

how is that construct called?

hmmm, basically converting everything to expression

nothing I can google?

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comma_Operator

So that basically is already do. Then what is the point of adding do to the language?

@borkdude why are you trying to do this in the first place? JS really isn't meant for this 🙂 (1,if (foo) ... nevermind ...)

@thheller debugging JSX

debugMe(<Foo>...) doesn't work?

so things like {(console.log(x), x)}

function debugMe(x) { console.log(x); return x; }

yeah, possible. I just wondered why JS didn’t have anything like do, but turns out it does

I guess because wrapping statements into parens won't work

well that isn't exactly do, but as long as your issue is solved who cares 😉

@roman01la @thheller true, it’s more limited.

if I’m now using cljsjs to use React Virtualized, but I want to be able to step through its code (which the UMD build is not so suited for), what’s my best option? Basically I want to be able to step through this function: https://github.com/bvaughn/react-virtualized/blob/ad6200c15844a5585032e2848b8fd90af3e66143/source/InfiniteLoader/InfiniteLoader.js#L106 I could download it and add the files to resources, but I’m not sure how to add it as a foreign library that way...

Has anyone used bidi and pushy together? I’m having trouble setting things up

Never mind, I think I got it!

Ah unpacking the jar into the resource folder allows me to override and edit the file 🙂

Hey all: Is there a reason I cannot iterate through a javascript object using for or map? I get the following error: Uncaught Error: [object Object] is not ISeqable

@petr can't really tell you why other than it probably wouldn't be a good idea, as it would iterate over the objects toString method

but there are utility functions in goog.object like getKeys and getValues

those return arrays which you can iterate over

Thank you!

ClojureScript 1.9.493 released https://groups.google.com/d/msg/clojurescript/cw3bQL-FsUA/CWICRwKyAAAJ

Anyone use any clojurescript testing libs for react apps, particularly for functional testing? I’ve only seen https://github.com/bensu/cljs-react-test

@cldwalker I normally just use React’s ShallowRenderer from test utils

here’s an example https://github.com/compassus/compassus/blob/master/src/test/compassus/tests.cljc#L830-L849

@anmonteiro Nice!

does cljs support exact integers? I read that all cljs numbers map to js doubles -- which are not BigInts

@qqq numbers are native JS numbers yes, so yes they are not ints

@thheller: so I need arbitrary precision Ints; any recommened libraries?

@piotr2b I would use an older version of ClojureScript for now