Fork me on GitHub
#clojurescript
<
2020-11-10
>
zhuxun207:11:03

Is there a way to know if a value if a function or not?

zhuxun207:11:38

(type #()) gives #object[Function]

zhuxun207:11:17

is (= (type f) (type #())) the idiomatic way of determining it?

zhuxun207:11:16

Seems rather expensive needing to create a temp function

lassemaatta08:11:46

also note the presence of ifn?, which returns true for anything that can be invoked like a function (e.g. many datastructures or keywords), not just actual functions

(begin learningClosure)09:11:07

Have just started clojurescript with very basic setups, just to get the syntax. I am using Atom as text editor. Just wanted to ask what's the best setup as a beginner to get hands on clojurescript. I see many options if searched online and get confused. text editors emacs, vim, visual studio, atom. and what is basically fig-wheel, is it necessary right away at beginning!

paulbutcher09:11:43

I would appreciate help debugging a js interop issue I’m having. I’m clearly misunderstanding something pretty basic. I am using the https://vega.github.io/vega/ library within my app. I’m compiling with Figwheel Main with NPM via :auto-bundle. Everything works just fine in dev, but I get an error in my production build when calling Vega methods. Vega is in my package.json and I’m importing it into my ClojureScript source with: [vega :refer [parse View]] . The code that causes the problem is:

(let [view (View. (parse (clj->js spec)) #js {:container (dom-node this)})]
        (.runAsync view)))
Creating a View object and calling the parse function both work fine, but when I try to call the runAsync method on the view, I get an error suggesting that advanced optimisations have chosen to rename it. Everything works just fine if I switch the last line to:
(js-invoke view "runAsync")))
Clearly I’m missing something I should be doing to tell the Closure compiler to leave the name of runAsync alone, but I’ve no idea what that might be?

p-himik10:11:25

Use (.runAsync ^js view).

paulbutcher11:11:02

Ah! Thank you - I knew I had to be missing something basic!

borkdude10:11:17

Btw, the spec issue I was having above wasn't solved after all. @lilactown fwiw, the specs were in the same namespace, so it's unlikely that this is a namespace ordering problem

😵 3
Andrei Stan11:11:43

hi, how can i write this into clojurescript?

{({getRootProps, getInputProps}) => (
    <section>
      <div {...getRootProps()}>
        <input {...getInputProps()} />
        <p>Drag 'n' drop some files here, or click to select files</p>
      </div>
    </section>
  )}

thheller12:11:57

using what? reagent?

Andrei Stan12:11:45

yes, sorry, Reagent

thheller12:11:25

roughly translated its a function definition that destructures an object argument. we can't do that in CLJS but (fn [^js arg] [:section [:div (.getRootProps arg) ...]]) should do it

Andrei Stan12:11:31

i`m trying to implement react-dropzone https://react-dropzone.js.org/: what i want to translate into cjls with reagent:

import React from 'react'
import Dropzone from 'react-dropzone'

<Dropzone onDrop={acceptedFiles => console.log(acceptedFiles)}>
  {({getRootProps, getInputProps}) => (
    <section>
      <div {...getRootProps()}>
        <input {...getInputProps()} />
        <p>Drag 'n' drop some files here, or click to select files</p>
      </div>
    </section>
  )}
</Dropzone>
my code:
[:> Dropzone {} (fn [^js arg] [:section [:div (.getRootProps arg) ...]])]
if i console.log Dropzone i receive
{$$typeof: Symbol(react.forward_ref), displayName: "Dropzone", defaultProps: {…}, propTypes: {…}, render: ƒ}
Errors:

Andrei Stan12:11:31

216 |      [convert-btn app-state]
 217 |      [:> Dropzone {} (fn [^js arg] [:section [:div (.getRootProps arg) ...]])]
----------------------------^---------------------------------------------------
null
IllegalArgumentException: no conversion to symbol
	clojure.core/symbol (core.clj:596)
	clojure.core/symbol (core.clj:589)
	cljs.analyzer/confirm-var-exists (analyzer.cljc:860)
	cljs.analyzer/confirm-var-exists (analyzer.cljc:848)
	cljs.analyzer/confirm-var-exists (analyzer.cljc:851)
	cljs.analyzer/confirm-var-exists (analyzer.cljc:848)
	shadow.build.cljs-hacks/shadow-resolve-var (cljs_hacks.cljc:370)
	shadow.build.cljs-hacks/shadow-resolve-var (cljs_hacks.cljc:148)
	cljs.analyzer/resolve-existing-var (analyzer.cljc:1298)
	cljs.analyzer/resolve-existing-var (analyzer.cljc:1293)
	cljs.analyzer/analyze-symbol (analyzer.cljc:3795)
	cljs.analyzer/analyze-symbol (analyzer.cljc:3759)
	cljs.analyzer/analyze-form (analyzer.cljc:4189)
	cljs.analyzer/analyze-form (analyzer.cljc:4187)
	cljs.analyzer/analyze* (analyzer.cljc:4243)
	cljs.analyzer/analyze* (analyzer.cljc:4235)
	cljs.analyzer/analyze (analyzer.cljc:4263)
	cljs.analyzer/analyze (analyzer.cljc:4246)
	cljs.analyzer/analyze (analyzer.cljc:4256)
	cljs.analyzer/analyze (analyzer.cljc:4246)
	cljs.analyzer/analyze (analyzer.cljc:4254)
	cljs.analyzer/analyze (analyzer.cljc:4246)
	cljs.analyzer/analyze-vector/fn--2648/fn--2649 (analyzer.cljc:4027)
	clojure.core/mapv/fn--8445 (core.clj:6912)
	clojure.lang.PersistentVector.reduce (PersistentVector.java:343)
	clojure.core/reduce (core.clj:6827)
	clojure.core/mapv (core.clj:6903)
	clojure.core/mapv (core.clj:6903)
	cljs.analyzer/analyze-vector/fn--2648 (analyzer.cljc:4027)
	cljs.analyzer/analyze-vector (analyzer.cljc:4027)
	cljs.analyzer/analyze-vector (analyzer.cljc:4024)
	cljs.analyzer/analyze-form (analyzer.cljc:4193)
	cljs.analyzer/analyze-form (analyzer.cljc:4187)
	cljs.analyzer/analyze* (analyzer.cljc:4243)
	cljs.analyzer/analyze* (analyzer.cljc:4235)
	cljs.analyzer/analyze (analyzer.cljc:4263)
	cljs.analyzer/analyze (analyzer.cljc:4246)
	cljs.analyzer/analyze (analyzer.cljc:4256)
	cljs.analyzer/analyze (analyzer.cljc:4246)
	cljs.analyzer/analyze (analyzer.cljc:4254)
	cljs.analyzer/analyze (analyzer.cljc:4246)
	cljs.analyzer/analyze-vector/fn--2648/fn--2649 (analyzer.cljc:4027)
	clojure.core/mapv/fn--8445 (core.clj:6912)
	clojure.lang.PersistentVector.reduce (PersistentVector.java:343)
	clojure.core/reduce (core.clj:6827)
	clojure.core/mapv (core.clj:6903)
	clojure.core/mapv (core.clj:6903)
	cljs.analyzer/analyze-vector/fn--2648 (analyzer.cljc:4027)
	cljs.analyzer/analyze-vector (analyzer.cljc:4027)
	cljs.analyzer/analyze-vector (analyzer.cljc:4024)
	cljs.analyzer/analyze-form (analyzer.cljc:4193)
	cljs.analyzer/analyze-form (analyzer.cljc:4187)
	cljs.analyzer/analyze* (analyzer.cljc:4243)
	cljs.analyzer/analyze* (analyzer.cljc:4235)
	cljs.analyzer/analyze (analyzer.cljc:4263)
	cljs.analyzer/analyze (analyzer.cljc:4246)
	cljs.analyzer/analyze (analyzer.cljc:4256)
	cljs.analyzer/analyze (analyzer.cljc:4246)
	cljs.analyzer/analyze (analyzer.cljc:4254)
	cljs.analyzer/analyze (analyzer.cljc:4246)
	cljs.analyzer/fn--2025 (analyzer.cljc:2276)
	cljs.analyzer/fn--2025 (analyzer.cljc:2272)
	clojure.lang.MultiFn.invoke (MultiFn.java:252)
	cljs.analyzer/analyze-seq* (analyzer.cljc:3974)
	cljs.analyzer/analyze-seq* (analyzer.cljc:3972)
	cljs.analyzer/analyze-seq*-wrap (analyzer.cljc:3979)
	cljs.analyzer/analyze-seq*-wrap (analyzer.cljc:3977)
	cljs.analyzer/analyze-seq (analyzer.cljc:4003)
	cljs.analyzer/analyze-seq (analyzer.cljc:3981)
	cljs.analyzer/analyze-form (analyzer.cljc:4190)
	cljs.analyzer/analyze-form (analyzer.cljc:4187)
	cljs.analyzer/analyze* (analyzer.cljc:4243)
	cljs.analyzer/analyze* (analyzer.cljc:4235)
	cljs.analyzer/analyze (analyzer.cljc:4263)
	cljs.analyzer/analyze (analyzer.cljc:4246)
	cljs.analyzer/analyze (analyzer.cljc:4256)
	cljs.analyzer/analyze (analyzer.cljc:4246)
	cljs.analyzer/analyze (analyzer.cljc:4254)
	cljs.analyzer/analyze (analyzer.cljc:4246)
	cljs.analyzer/analyze-fn-method-body (analyzer.cljc:2065)

thheller12:11:19

you left the ... in. need to translate the rest.

Andrei Stan12:11:18

Code:

[:> Dropzone {} (fn [^js arg] [:section [:div (.getRootProps arg) [:input (.getInputProps arg)] [:p "drag'n drop"]]])]
Error:

Andrei Stan12:11:18

react-dom.development.js:17118 The above error occurred in the <Dropzone> component:
    in Dropzone (created by netdava.homebank.app.converter.converter)
    in div (created by netdava.homebank.app.converter.converter)
    in div (created by netdava.homebank.app.converter.converter)
    in netdava.homebank.app.converter.converter

Consider adding an error boundary to your tree to customize error handling behavior.
Visit  to learn more about error boundaries.
logCapturedError @ react-dom.development.js:17118
logError @ react-dom.development.js:17154
expirationTime.callback @ react-dom.development.js:18066
commitUpdateEffects @ react-dom.development.js:16434
commitUpdateQueue @ react-dom.development.js:16464
commitAllLifeCycles @ react-dom.development.js:17384
callCallback @ react-dom.development.js:150
invokeGuardedCallbackImpl @ react-dom.development.js:200
invokeGuardedCallback @ react-dom.development.js:257
commitRoot @ react-dom.development.js:18949
eval @ react-dom.development.js:20419
exports.unstable_runWithPriority @ scheduler.development.js:256
completeRoot @ react-dom.development.js:20418
performWorkOnRoot @ react-dom.development.js:20347
performWork @ react-dom.development.js:20255
requestWork @ react-dom.development.js:20229
scheduleWork @ react-dom.development.js:19912
updateContainerAtExpirationTime @ react-dom.development.js:20573
updateContainer @ react-dom.development.js:20658
ReactRoot.render @ react-dom.development.js:20954
eval @ react-dom.development.js:21091
unbatchedUpdates @ react-dom.development.js:20460
legacyRenderSubtreeIntoContainer @ react-dom.development.js:21087
render @ react-dom.development.js:21156
reagent$dom$render_comp @ dom.cljs:17
eval @ dom.cljs:41
eval @ dom.cljs:36
netdava$homebank$app$core$render @ core.cljs:26
netdava$homebank$app$core$main @ core.cljs:31
eval @ shadow.module.main.append.js:4
goog.globalEval @ main.js:577
env.evalLoad @ main.js:1670
(anonymous) @ main.js:2485
Show 3 more frames
shadow.module.main.append.js:4 An error occurred when calling (netdava.homebank.app.core/main)
eval @ shadow.module.main.append.js:4
goog.globalEval @ main.js:577
env.evalLoad @ main.js:1670
(anonymous) @ main.js:2485
main.js:1672 An error occurred when loading shadow.module.main.append.js
env.evalLoad @ main.js:1672
(anonymous) @ main.js:2485
main.js:1673 Invariant Violation: Objects are not valid as a React child (found: object with keys {ns, name, fqn, _hash, cljs$lang$protocol_mask$partition0$, cljs$lang$protocol_mask$partition1$}). If you meant to render a collection of children, use an array instead.
    in Dropzone (created by netdava.homebank.app.converter.converter)
    in div (created by netdava.homebank.app.converter.converter)
    in div (created by netdava.homebank.app.converter.converter)
    in netdava.homebank.app.converter.converter
    at invariant ()
    at throwOnInvalidObjectType ()
    at createChild ()
    at reconcileChildrenIterator ()
    at eval ()
    at reconcileChildren ()
    at updateForwardRef ()
    at beginWork ()
    at performUnitOfWork ()
    at workLoop ()

thheller12:11:51

looks like you are passing a CLJS map when a JS object is expected?

thheller12:11:14

maybe [:> Dropzone #js {} ...] instead of just the {}

Andrei Stan12:11:51

checkPropTypes.js:21 Warning: Failed prop type: Invalid prop `children` of type `array` supplied to `Dropzone`, expected `function`.
    in Dropzone (created by netdava.homebank.app.converter.converter)
    in netdava.homebank.app.converter.converter
printWarning @ checkPropTypes.js:21
checkPropTypes @ checkPropTypes.js:83
validatePropTypes @ react.development.js:1667
createElementWithValidation @ react.development.js:1756
reagent$impl$template$make_element @ template.cljs:425
reagent$impl$template$native_element @ template.cljs:334
reagent$impl$template$vec_to_elem @ template.cljs:366
reagent$impl$template$as_element @ template.cljs:385
eval @ template.cljs:427
eval @ core.cljs:5666
eval @ core.cljs:5666
eval @ core.cljs:5670
cljs$core$_kv_reduce @ core.cljs:713
cljs$core$reduce_kv @ core.cljs:2578
reagent$impl$template$make_element @ template.cljs:425
reagent$impl$template$native_element @ template.cljs:334
reagent$impl$template$vec_to_elem @ template.cljs:362
reagent$impl$template$as_element @ template.cljs:385
reagent$impl$template$make_element @ template.cljs:422
reagent$impl$template$native_element @ template.cljs:334
reagent$impl$template$vec_to_elem @ template.cljs:362
reagent$impl$template$as_element @ template.cljs:385
reagent$impl$template$make_element @ template.cljs:422
reagent$impl$template$fragment_element @ template.cljs:305
reagent$impl$template$vec_to_elem @ template.cljs:356
reagent$impl$template$as_element @ template.cljs:385
reagent$impl$component$wrap_render @ component.cljs:114
reagent$impl$component$do_render @ component.cljs:141
eval @ component.cljs:164
reagent$ratom$in_context @ ratom.cljs:42
reagent$ratom$deref_capture @ ratom.cljs:55
reagent$ratom$run_in_reaction @ ratom.cljs:537
reagent$impl$component$render @ component.cljs:164
finishClassComponent @ react-dom.development.js:14742
updateClassComponent @ react-dom.development.js:14697
beginWork @ react-dom.development.js:15645
performUnitOfWork @ react-dom.development.js:19313
workLoop @ react-dom.development.js:19353
renderRoot @ react-dom.development.js:19436
performWorkOnRoot @ react-dom.development.js:20343
performWork @ react-dom.development.js:20255
requestWork @ react-dom.development.js:20229
scheduleWork @ react-dom.development.js:19912
updateContainerAtExpirationTime @ react-dom.development.js:20573
updateContainer @ react-dom.development.js:20658
ReactRoot.render @ react-dom.development.js:20954
eval @ react-dom.development.js:21091
unbatchedUpdates @ react-dom.development.js:20460
legacyRenderSubtreeIntoContainer @ react-dom.development.js:21087
render @ react-dom.development.js:21156
reagent$dom$render_comp @ dom.cljs:17
eval @ dom.cljs:41
eval @ dom.cljs:36
netdava$homebank$app$core$render @ core.cljs:26
netdava$homebank$app$core$main @ core.cljs:31
eval @ shadow.module.main.append.js:4
goog.globalEval @ main.js:577
env.evalLoad @ main.js:1670
(anonymous) @ main.js:2485
Show 29 more frames
index.js:2 Uncaught TypeError: n is not a function
    at eval (index.js:2)
    at renderWithHooks (react-dom.development.js:12939)
    at updateForwardRef (react-dom.development.js:14458)
    at beginWork (react-dom.development.js:15662)
    at performUnitOfWork (react-dom.development.js:19313)
    at workLoop (react-dom.development.js:19353)
    at HTMLUnknownElement.callCallback (react-dom.development.js:150)
    at Object.invokeGuardedCallbackImpl (react-dom.development.js:200)
    at invokeGuardedCallback (react-dom.development.js:257)
    at replayUnitOfWork (react-dom.development.js:18579)
eval @ index.js:2
renderWithHooks @ react-dom.development.js:12939
updateForwardRef @ react-dom.development.js:14458
beginWork @ react-dom.development.js:15662
performUnitOfWork @ react-dom.development.js:19313
workLoop @ react-dom.development.js:19353
callCallback @ react-dom.development.js:150
invokeGuardedCallbackImpl @ react-dom.development.js:200
invokeGuardedCallback @ react-dom.development.js:257
replayUnitOfWork @ react-dom.development.js:18579
renderRoot @ react-dom.development.js:19469
performWorkOnRoot @ react-dom.development.js:20343
performWork @ react-dom.development.js:20255
requestWork @ react-dom.development.js:20229
scheduleWork @ react-dom.development.js:19912
updateContainerAtExpirationTime @ react-dom.development.js:20573
updateContainer @ react-dom.development.js:20658
ReactRoot.render @ react-dom.development.js:20954
eval @ react-dom.development.js:21091
unbatchedUpdates @ react-dom.development.js:20460
legacyRenderSubtreeIntoContainer @ react-dom.development.js:21087
render @ react-dom.development.js:21156
reagent$dom$render_comp @ dom.cljs:17
eval @ dom.cljs:41
eval @ dom.cljs:36
netdava$homebank$app$core$render @ core.cljs:26
netdava$homebank$app$core$main @ core.cljs:31
eval @ shadow.module.main.append.js:4
goog.globalEval @ main.js:577
env.evalLoad @ main.js:1670
(anonymous) @ main.js:2485
react-dom.development.js:17118 The above error occurred in the <Dropzone> component:
    in Dropzone (created by netdava.homebank.app.converter.converter)
    in div (created by netdava.homebank.app.converter.converter)
    in div (created by netdava.homebank.app.converter.converter)
    in netdava.homebank.app.converter.converter

Consider adding an error boundary to your tree to customize error handling behavior.
Visit  to learn more about error boundaries.
logCapturedError @ react-dom.development.js:17118
logError @ react-dom.development.js:17154
expirationTime.callback @ react-dom.development.js:18066
commitUpdateEffects @ react-dom.development.js:16434
commitUpdateQueue @ react-dom.development.js:16464
commitAllLifeCycles @ react-dom.development.js:17384
callCallback @ react-dom.development.js:150
invokeGuardedCallbackImpl @ react-dom.development.js:200
invokeGuardedCallback @ react-dom.development.js:257
commitRoot @ react-dom.development.js:18949
eval @ react-dom.development.js:20419
exports.unstable_runWithPriority @ scheduler.development.js:256
completeRoot @ react-dom.development.js:20418
performWorkOnRoot @ react-dom.development.js:20347
performWork @ react-dom.development.js:20255
requestWork @ react-dom.development.js:20229
scheduleWork @ react-dom.development.js:19912
updateContainerAtExpirationTime @ react-dom.development.js:20573
updateContainer @ react-dom.development.js:20658
ReactRoot.render @ react-dom.development.js:20954
eval @ react-dom.development.js:21091
unbatchedUpdates @ react-dom.development.js:20460
legacyRenderSubtreeIntoContainer @ react-dom.development.js:21087
render @ react-dom.development.js:21156
reagent$dom$render_comp @ dom.cljs:17
eval @ dom.cljs:41
eval @ dom.cljs:36
netdava$homebank$app$core$render @ core.cljs:26
netdava$homebank$app$core$main @ core.cljs:31
eval @ shadow.module.main.append.js:4
goog.globalEval @ main.js:577
env.evalLoad @ main.js:1670
(anonymous) @ main.js:2485
Show 3 more frames
shadow.module.main.append.js:4 An error occurred when calling (netdava.homebank.app.core/main)
eval @ shadow.module.main.append.js:4
goog.globalEval @ main.js:577
env.evalLoad @ main.js:1670
(anonymous) @ main.js:2485
main.js:1672 An error occurred when loading shadow.module.main.append.js
env.evalLoad @ main.js:1672
(anonymous) @ main.js:2485
main.js:1673 TypeError: n is not a function
    at eval (index.js:2)
    at renderWithHooks (react-dom.development.js:12939)
    at updateForwardRef (react-dom.development.js:14458)
    at beginWork (react-dom.development.js:15662)
    at performUnitOfWork (react-dom.development.js:19313)
    at workLoop (react-dom.development.js:19353)
    at renderRoot (react-dom.development.js:19436)
    at performWorkOnRoot (react-dom.development.js:20343)
    at performWork (react-dom.development.js:20255)
    at requestWork (react-dom.development.js:20229)

thheller12:11:17

it expected a function which you didn't provide? don't know what. maybe the onDrop?

thheller12:11:43

or maybe its reagent messing up

thheller12:11:03

you can try (react/createElement Dropzone nil (fn [^js arg] ...)) instead?

thheller12:11:38

react being (:require ["react" :as react]) in the ns of course

Andrei Stan12:11:18

react-dom.development.js:56 Uncaught Invariant Violation: Objects are not valid as a React child (found: object with keys {ns, name, fqn, _hash, cljs$lang$protocol_mask$partition0$, cljs$lang$protocol_mask$partition1$}). If you meant to render a collection of children, use an array instead.
    in Dropzone (created by netdava.homebank.app.converter.converter)
    in div (created by netdava.homebank.app.converter.converter)
    in div (created by netdava.homebank.app.converter.converter)
    in netdava.homebank.app.converter.converter
    at invariant ()
    at throwOnInvalidObjectType ()
    at createChild ()
    at reconcileChildrenIterator ()
    at eval ()
    at reconcileChildren ()
    at updateForwardRef ()
    at beginWork ()
    at performUnitOfWork ()
    at workLoop ()
invariant @ react-dom.development.js:56
throwOnInvalidObjectType @ react-dom.development.js:11834
createChild @ react-dom.development.js:12045
reconcileChildrenIterator @ react-dom.development.js:12428
eval @ react-dom.development.js:12604
reconcileChildren @ react-dom.development.js:14403
updateForwardRef @ react-dom.development.js:14475
beginWork @ react-dom.development.js:15662
performUnitOfWork @ react-dom.development.js:19313
workLoop @ react-dom.development.js:19353
callCallback @ react-dom.development.js:150
invokeGuardedCallbackImpl @ react-dom.development.js:200
invokeGuardedCallback @ react-dom.development.js:257
replayUnitOfWork @ react-dom.development.js:18579
renderRoot @ react-dom.development.js:19469
performWorkOnRoot @ react-dom.development.js:20343
performWork @ react-dom.development.js:20255
requestWork @ react-dom.development.js:20229
scheduleWork @ react-dom.development.js:19912
updateContainerAtExpirationTime @ react-dom.development.js:20573
updateContainer @ react-dom.development.js:20658
ReactRoot.render @ react-dom.development.js:20954
eval @ react-dom.development.js:21091
unbatchedUpdates @ react-dom.development.js:20460
legacyRenderSubtreeIntoContainer @ react-dom.development.js:21087
render @ react-dom.development.js:21156
reagent$dom$render_comp @ dom.cljs:17
eval @ dom.cljs:41
eval @ dom.cljs:36
netdava$homebank$app$core$render @ core.cljs:26
netdava$homebank$app$core$main @ core.cljs:31
eval @ shadow.module.main.append.js:4
goog.globalEval @ main.js:577
env.evalLoad @ main.js:1670
(anonymous) @ main.js:2485
Show 5 more frames
react-dom.development.js:17118 The above error occurred in the <Dropzone> component:
    in Dropzone (created by netdava.homebank.app.converter.converter)
    in div (created by netdava.homebank.app.converter.converter)
    in div (created by netdava.homebank.app.converter.converter)
    in netdava.homebank.app.converter.converter

Consider adding an error boundary to your tree to customize error handling behavior.
Visit  to learn more about error boundaries.
logCapturedError @ react-dom.development.js:17118
logError @ react-dom.development.js:17154
expirationTime.callback @ react-dom.development.js:18066
commitUpdateEffects @ react-dom.development.js:16434
commitUpdateQueue @ react-dom.development.js:16464
commitAllLifeCycles @ react-dom.development.js:17384
callCallback @ react-dom.development.js:150
invokeGuardedCallbackImpl @ react-dom.development.js:200
invokeGuardedCallback @ react-dom.development.js:257
commitRoot @ react-dom.development.js:18949
eval @ react-dom.development.js:20419
exports.unstable_runWithPriority @ scheduler.development.js:256
completeRoot @ react-dom.development.js:20418
performWorkOnRoot @ react-dom.development.js:20347
performWork @ react-dom.development.js:20255
requestWork @ react-dom.development.js:20229
scheduleWork @ react-dom.development.js:19912
updateContainerAtExpirationTime @ react-dom.development.js:20573
updateContainer @ react-dom.development.js:20658
ReactRoot.render @ react-dom.development.js:20954
eval @ react-dom.development.js:21091
unbatchedUpdates @ react-dom.development.js:20460
legacyRenderSubtreeIntoContainer @ react-dom.development.js:21087
render @ react-dom.development.js:21156
reagent$dom$render_comp @ dom.cljs:17
eval @ dom.cljs:41
eval @ dom.cljs:36
netdava$homebank$app$core$render @ core.cljs:26
netdava$homebank$app$core$main @ core.cljs:31
eval @ shadow.module.main.append.js:4
goog.globalEval @ main.js:577
env.evalLoad @ main.js:1670
(anonymous) @ main.js:2485
Show 3 more frames
shadow.module.main.append.js:4 An error occurred when calling (netdava.homebank.app.core/main)
eval @ shadow.module.main.append.js:4
goog.globalEval @ main.js:577
env.evalLoad @ main.js:1670
(anonymous) @ main.js:2485
main.js:1672 An error occurred when loading shadow.module.main.append.js
env.evalLoad @ main.js:1672
(anonymous) @ main.js:2485
main.js:1673 Invariant Violation: Objects are not valid as a React child (found: object with keys {ns, name, fqn, _hash, cljs$lang$protocol_mask$partition0$, cljs$lang$protocol_mask$partition1$}). If you meant to render a collection of children, use an array instead.
    in Dropzone (created by netdava.homebank.app.converter.converter)
    in div (created by netdava.homebank.app.converter.converter)
    in div (created by netdava.homebank.app.converter.converter)
    in netdava.homebank.app.converter.converter
    at invariant ()
    at throwOnInvalidObjectType ()
    at createChild ()
    at reconcileChildrenIterator ()
    at eval ()
    at reconcileChildren ()
    at updateForwardRef ()
    at beginWork ()
    at performUnitOfWork ()
    at workLoop ()
env.evalLoad @ main.js:1673
(anonymous) @ main.js:2485

Andrei Stan12:11:40

i am using reagent 0.10.0

thheller12:11:11

suppose it might be the return value of the function

thheller12:11:33

so try (fn [arg] (reagent/as-element [:section ...]))

Andrei Stan12:11:10

react-dom.development.js:56 Uncaught Invariant Violation: Objects are not valid as a React child (found: object with keys {onKeyDown, onFocus, onBlur, onClick, onDragEnter, onDragOver, onDragLeave, onDrop, ref, tabIndex}). If you meant to render a collection of children, use an array instead.
    in div (created by Dropzone)
    in section (created by Dropzone)
    in Dropzone (created by netdava.homebank.app.converter.converter)
    in div (created by netdava.homebank.app.converter.converter)
    in div (created by netdava.homebank.app.converter.converter)
    in netdava.homebank.app.converter.converter
    at invariant ()
    at throwOnInvalidObjectType ()
    at createChild ()
    at reconcileChildrenArray ()
    at eval ()
    at reconcileChildren ()
    at beginWork ()
    at performUnitOfWork ()
    at workLoop ()
    at HTMLUnknownElement.callCallback ()
invariant @ react-dom.development.js:56
throwOnInvalidObjectType @ react-dom.development.js:11834
createChild @ react-dom.development.js:12045
reconcileChildrenArray @ react-dom.development.js:12277
eval @ react-dom.development.js:12600
reconcileChildren @ react-dom.development.js:14403
beginWork @ react-dom.development.js:14864
performUnitOfWork @ react-dom.development.js:19313
workLoop @ react-dom.development.js:19353
callCallback @ react-dom.development.js:150
invokeGuardedCallbackImpl @ react-dom.development.js:200
invokeGuardedCallback @ react-dom.development.js:257
replayUnitOfWork @ react-dom.development.js:18579
renderRoot @ react-dom.development.js:19469
performWorkOnRoot @ react-dom.development.js:20343
performWork @ react-dom.development.js:20255
requestWork @ react-dom.development.js:20229
scheduleWork @ react-dom.development.js:19912
updateContainerAtExpirationTime @ react-dom.development.js:20573
updateContainer @ react-dom.development.js:20658
ReactRoot.render @ react-dom.development.js:20954
eval @ react-dom.development.js:21091
unbatchedUpdates @ react-dom.development.js:20460
legacyRenderSubtreeIntoContainer @ react-dom.development.js:21087
render @ react-dom.development.js:21156
reagent$dom$render_comp @ dom.cljs:17
eval @ dom.cljs:41
eval @ dom.cljs:36
netdava$homebank$app$core$render @ core.cljs:26
netdava$homebank$app$core$main @ core.cljs:31
eval @ shadow.module.main.append.js:4
goog.globalEval @ main.js:577
env.evalLoad @ main.js:1670
(anonymous) @ main.js:2485
Show 4 more frames
react-dom.development.js:17118 The above error occurred in the <div> component:
    in div (created by Dropzone)
    in section (created by Dropzone)
    in Dropzone (created by netdava.homebank.app.converter.converter)
    in div (created by netdava.homebank.app.converter.converter)
    in div (created by netdava.homebank.app.converter.converter)
    in netdava.homebank.app.converter.converter

Consider adding an error boundary to your tree to customize error handling behavior.
Visit  to learn more about error boundaries.
logCapturedError @ react-dom.development.js:17118
logError @ react-dom.development.js:17154
expirationTime.callback @ react-dom.development.js:18066
commitUpdateEffects @ react-dom.development.js:16434
commitUpdateQueue @ react-dom.development.js:16464
commitAllLifeCycles @ react-dom.development.js:17384
callCallback @ react-dom.development.js:150
invokeGuardedCallbackImpl @ react-dom.development.js:200
invokeGuardedCallback @ react-dom.development.js:257
commitRoot @ react-dom.development.js:18949
eval @ react-dom.development.js:20419
exports.unstable_runWithPriority @ scheduler.development.js:256
completeRoot @ react-dom.development.js:20418
performWorkOnRoot @ react-dom.development.js:20347
performWork @ react-dom.development.js:20255
requestWork @ react-dom.development.js:20229
scheduleWork @ react-dom.development.js:19912
updateContainerAtExpirationTime @ react-dom.development.js:20573
updateContainer @ react-dom.development.js:20658
ReactRoot.render @ react-dom.development.js:20954
eval @ react-dom.development.js:21091
unbatchedUpdates @ react-dom.development.js:20460
legacyRenderSubtreeIntoContainer @ react-dom.development.js:21087
render @ react-dom.development.js:21156
reagent$dom$render_comp @ dom.cljs:17
eval @ dom.cljs:41
eval @ dom.cljs:36
netdava$homebank$app$core$render @ core.cljs:26
netdava$homebank$app$core$main @ core.cljs:31
eval @ shadow.module.main.append.js:4
goog.globalEval @ main.js:577
env.evalLoad @ main.js:1670
(anonymous) @ main.js:2485
Show 3 more frames
shadow.module.main.append.js:4 An error occurred when calling (netdava.homebank.app.core/main)
eval @ shadow.module.main.append.js:4
goog.globalEval @ main.js:577
env.evalLoad @ main.js:1670
(anonymous) @ main.js:2485
main.js:1672 An error occurred when loading shadow.module.main.append.js
env.evalLoad @ main.js:1672
(anonymous) @ main.js:2485
main.js:1673 Invariant Violation: Objects are not valid as a React child (found: object with keys {onKeyDown, onFocus, onBlur, onClick, onDragEnter, onDragOver, onDragLeave, onDrop, ref, tabIndex}). If you meant to render a collection of children, use an array instead.
    in div (created by Dropzone)
    in section (created by Dropzone)
    in Dropzone (created by netdava.homebank.app.converter.converter)
    in div (created by netdava.homebank.app.converter.converter)
    in div (created by netdava.homebank.app.converter.converter)
    in netdava.homebank.app.converter.converter
    at invariant ()
    at throwOnInvalidObjectType ()
    at createChild ()
    at reconcileChildrenArray ()
    at eval ()
    at reconcileChildren ()
    at beginWork ()
    at performUnitOfWork ()
    at workLoop ()
    at renderRoot ()
env.evalLoad @ main.js:1673
(anonymous) @ main.js:2485

thheller12:11:39

hmm looks like reagent doesn't treat the props as props but as a child

thheller12:11:49

whats the code you have now?

Andrei Stan12:11:10

(defn converter [app-state] [:<> [:div.ui.centered.grid.container [:div.column {:style {:max-width 450}} [:h1 "Homebank-OFX"] (js/console.log Dropzone) [:> ui/Form [csv-file-input app-state] [select-iban app-state] [select-currency app-state] [remember-data-checkbox app-state]] [convert-btn app-state] (react/createElement Dropzone nil (fn [^js arg] (r/as-element [:section [:div (.getRootProps arg) [:input (.getInputProps arg)] [:p "drag'n drop"]]]))) ]]])

Andrei Stan12:11:45

i copy-paste the entire wrapper, to see where i create Dropzone

thheller12:11:10

try [:> "div" (.getRootProps arg) ...] instead of the [:div ...].

thheller12:11:40

(and again for the [:> "input" ...] in case the error changes)

Andrei Stan12:11:54

react-dom.development.js:56 Uncaught Invariant Violation: Objects are not valid as a React child (found: object with keys {onKeyDown, onFocus, onBlur, onClick, onDragEnter, onDragOver, onDragLeave, onDrop, ref, tabIndex}). If you meant to render a collection of children, use an array instead.
    in div (created by Dropzone)
    in section (created by Dropzone).....

thheller12:11:56

yeah that goes beyond my reagent knowledge. I don't know how to make it use the object as props instead of a child. you can always just use react/createElement

thheller12:11:05

(react/createElement Dropzone nil
       (fn [^js arg]
         (react/createElement "section" nil
           (react/createElement "div"
             (.getRootProps arg)
             (react/createElement "input" (.getInputProps arg))
             (react/createElement "p" nil "drag'n drop")))))

thheller12:11:29

not exactly pretty but should work

Andrei Stan12:11:02

thank you very much 🙂 for the help and your time

thheller12:11:41

I'm sure there is a way to do this via reagent too. might be worth looking into to make it less ugly 🙂

Andrei Stan12:11:19

i like it as it is now, but i also want to learn reagent too, so i will try to find out what's the problem

👍 3
p-himik23:11:25

If you need to pass some Hiccup to a React component, wrap in in reagent.core/as-element.

p-himik23:11:48

Reagent documentation has a lot of React docs and examples.

rberger21:12:30

I got a first pass (a rough direct translation from react/JS to reagent/cljs) of React Beautiful Drag and Drop working in https://github.com/omnyway-labs/simple-list-dnd

borkdude15:11:49

I'm getting a warning for:

(- (ocall js/d3 "bisect" r x) 1)
WARNING: cljs.core/-, all arguments must be numbers, got [#{js/clj-nil clj-nil} number]
Doesn't seem legit to me?

borkdude16:11:25

unless the CLJS analyzer knows the return type of d3.bisect statically, which would seem advanced to me

borkdude16:11:49

ocall is from [oops.core :refer [oget ocall]]

borkdude16:11:40

What are your best tricks to cut out spec from production builds? Right now I'm refactoring all the specs into their own source folder and excluding that in prod

dnolen17:11:21

managing via the classpath or by separate project seems fine

👍 3
leif17:11:09

Does anyone have any experience on how to get the doo plugin to work with :target :bundle?

leif17:11:35

Like, it seems to try to run the output in :output-to, but I'd like to tell it to run the output of the npx webpack command.

leif17:11:17

(Alternatively, does anyone have any recommendations for running tests defined with deftest?/

andy.fingerhut18:11:46

I have worked on a library that has both a Clojure/Java and ClojureScript flavor of it, with tests written using deftest forms, and run in an automated fashion from the command line, for both flavors. The library is core.rrb-vector, and has no dependence upon running in a browser, so the automated tests are all run in a browser-less JavaScript runtime. Is that of interest to you?

leif18:11:10

Yes it is.

andy.fingerhut18:11:08

If you clone it on a Linux or Mac, change to its root directory, and run ./script/sdo test, it should run a short version of the ClojureScript test suite.

leif18:11:41

Okay cool, thanks.

andy.fingerhut18:11:52

It requires Node.js to be installed for the JavaScript runtime (not sure whether I have hooks in there to pick a different one or not).

andy.fingerhut18:11:37

It is I think the only Clojure project I have worked on that has a ClojureScript part to it, so I make no claims that it is a clean/beautiful/recommended/etc. way to execute such tests.

borkdude18:11:16

@U050G2TQJ I also have a couple of projects using the cljs-test-runner for deps.edn which uses doo under the hood

leif18:11:41

OH, I'd also be interested in looking at that.

leif18:11:06

And it looks like cljs-opts.edn is where you're using doo?

leif18:11:32

Ah, okay, I get it now.