Clojurians Log v2

why is undefined?

why when scientist is passed through openData apparently isn't the same object?

:face_palm: my bad, I have used defnc instead defn

aha, I didn’t notice that either 😂 I was going down a rabbit hole thinking it was something to do with lazy evaluation and side effects

lol

FYI It might be a little more readable to use for here:

(for [[index scientist] (map-indexed vector scientists)]
  ($ Overly ,,,))

eh I guess it’s not that much more readable than what you have

interesting!

work in the same way, But what is vector?

me a little before

vector creates a vector from it’s arguments. so doing (map-indexed vector scientists) will produce a seq that looks like: ([0 {,,,}] [1 {,,,}])

oh very nice!

thank you, I'm learning a lot

sure thing

@lilactown, how can I made destructuring like ...props or style={...props.style}?

you should be able to do

(d/div {:style (:style props)})

(d/div {& props})

oh, I understand

Very nice

and if I want replace some keys of props like style={...props.style, height: 10}

and how I can extended this {& props} like {& props :style {:height 10}}

I thought something like that but don't work

hmm, what doesn’t work? is there an error?

I want to do something like style={...props.style, height: 10}

and <div ...props style={height: 20}

if I do

this error throw

yes, the one you posted in the channel looks good

(merge (:style props) {:height 42 ,,,})

I’m not sure what the compilation error is, it looks like it might be something else

Is strange cuz the error is in other function

If I move the function over

How to translate this react version into helix?

React Version:
<DayPickerInput component={props => <input {...props} />} /> ;; using native component "input"
<DayPickerInput component={props => <MyCustomInput {...props} />} /> ;; using custom component "MyCustomInput"

($ DayPickerInput {:component #(YourInputComponent %)})

(defnc YourInputComponent [{:keys [props]}] ...)

oh! The $ is not needed here? #($ YourInputComponent %)

you should use $, it is needed

otherwise it’s correct

what version of helix are you using?

let me check

we need to destructure the params to get the props?

(defnc YourInputComponent [{:keys [props]}] ...)

And not like?

(defnc YourInputComponent [props] ...)

{:paths ["src"]
 :deps {lilactown/helix {:git/url "<https://github.com/Lokeh/helix.git>"
                         :sha "376a68da794c6051f6fe103a79fec7314df67eb7"}
        ;; {:local/root "../helix"}
        binaryage/devtools {:mvn/version "0.9.7"}
        thheller/shadow-cljs {:mvn/version "2.8.74"}}}

I think the last?

I fork the todo app example

oops, no, it does not require desctructuring

😅

This does not seem to work?

(defnc date-picker-input [props]
  (js/console.log props)
  (d/input {:class "mb-2 p-2 border border-gray-400 w-full" & props}))

(defnc date-picker [{:keys [id]}]
  (let [date-format "MM-dd-yyyy"]
    ($ DayPickerInput
       {:id id
        :component #($ date-picker-input %)
        :format date-format
        :format-date #(format %1 %2 #js {:locale %3})
        :parse-date #(parse %1 %2 (js/Date.) #js {:locale %3})
        :placeholder (format (js/Date.) date-format)})))

(defnc your-input-component
  [props]
  ,,,)

($ DayPickerInput {:component #($ your-input-component {& %})})

{& %}

haha

this document explains it: https://github.com/Lokeh/helix/blob/master/docs/creating-elements.md#dynamic-props

ah no that is old

oh ...

use the latest release, {:mvn/version "0.9.0"}

updating ...

and it todo should be updated

II don't know how update the version

😭

gah I just can’t type

0.0.9

https://github.com/Lokeh/helix#installation

the README has the latest version, if you click on the badge it will take you to a page with the latest version

@lilactown Is the above code applicable if DayPickerInput is imported from a npm library?

yes

ok cool! 🙂

Hello. Anyone have idea about this error? I'm trying to use react-day-picker react library. I want to customize the input component (library docs https://react-day-picker.js.org/api/DayPickerInput#component) But I'm getting this issue when having this code.

(ns limeray.web.components
  (:require
   [helix.core :refer [defnc $ factory]]
   [helix.dom :as d]
   [helix.hooks :as hooks]
   ["react-day-picker/DayPickerInput" :default DayPickerInput]
   ["date-fns" :refer [parse format]]))

(defnc date-picker-input [props]
  (js/console.log "props " props)
  (d/input {:class "mb-2 p-2 border border-gray-400 w-full" & props}))

(defnc date-picker [{:keys [id]}]
  (let [date-format "MM-dd-yyyy"]
    ($ DayPickerInput
       {:id id
        :component #($ date-picker-input %)
        :format date-format
        :format-date #(format %1 %2 #js {:locale %3})
        :parse-date #(parse %1 %2 (js/Date.) #js {:locale %3})
        :placeholder (format (js/Date.) date-format)})))

{
   "meta": null,
   "obj": {
      "children": {
         "placeholder": "02-27-2020",
         "value": ""
      }
   },
   "recursive_QMARK_": false,
   "__arr": [
      "children"
   ],
   "__cnt": null,
   "__hash": null,
   "cljs$lang$protocol_mask$partition0$": 2164131599,
   "cljs$lang$protocol_mask$partition1$": 139268
}

//cljs-runtime/module$node_modules$react_dom$cjs$react_dom_development.js:188 Uncaught Error: Objects are not valid as a React child (found: object with keys {placeholder, value, onChange, onFocus, onBlur, onKeyDown, onKeyUp, onClick}). If you meant to render a collection of children, use an array instead.
    in input (created by limeray.web.components/date-picker-input)
    in limeray.web.components/date-picker-input (created by component)
    in component (created by DayPickerInput)
    in div (created by DayPickerInput)
    in DayPickerInput (created by limeray.web.components/date-picker)
    in limeray.web.components/date-picker (created by limeray.web.routes/add-goal-view)
    in div (created by limeray.web.components/field)
    in limeray.web.components/field (created by limeray.web.routes/add-goal-view)
    in form (created by limeray.web.routes/add-goal-view)
    in div (created by limeray.web.routes/add-goal-view)
    in limeray.web.routes/add-goal-view (created by <http://limeray.web.app/root|limeray.web.app/root>)
    in div (created by <http://limeray.web.app/root|limeray.web.app/root>)
    in div (created by <http://limeray.web.app/root|limeray.web.app/root>)
    in <http://limeray.web.app/root|limeray.web.app/root>
    at throwOnInvalidObjectType (//cljs-runtime/module$node_modules$react_dom$cjs$react_dom_development.js:188)
    at eval (//cljs-runtime/module$node_modules$react_dom$cjs$react_dom_development.js:219)
    at reconcileChildren (//cljs-runtime/module$node_modules$react_dom$cjs$react_dom_development.js:266)
    at beginWork$1 (//cljs-runtime/module$node_modules$react_dom$cjs$react_dom_development.js:340)
    at HTMLUnknownElement.callCallback (//cljs-runtime/module$node_modules$react_dom$cjs$react_dom_development.js:559)
    at Object.invokeGuardedCallbackImpl (//cljs-runtime/module$node_modules$react_dom$cjs$react_dom_development.js:560)
    at invokeGuardedCallback (//cljs-runtime/module$node_modules$react_dom$cjs$react_dom_development.js:5)
    at beginWork$$1 (//cljs-runtime/module$node_modules$react_dom$cjs$react_dom_development.js:772)
    at performUnitOfWork (//cljs-runtime/module$node_modules$react_dom$cjs$react_dom_development.js:467)
    at workLoopSync (//cljs-runtime/module$node_modules$react_dom$cjs$react_dom_development.js:467)

Error looks straightforward. But I have no idea 😅

adding the screenshot of console. just in case it might help

@lilactown nice!, work with the last version

@jaime.sangcap you’re passing in the props for date-picker-input as a child

you need to use spread props, so that helix’s $ macro will respect it as a dynamic props map

:component #($ date-picker-input {& %})

see https://github.com/Lokeh/helix/blob/master/docs/creating-elements.md#dynamic-props

notice in the console.log, you’re essentially getting {:children #js {:placeholder …}}

I'm getting this error when doing :component #($ date-picker-input {& %})

//cljs-runtime/helix.impl.props.js:189 Uncaught TypeError: m.call is not a function
    at eval (//cljs-runtime/helix.impl.props.js:189)
    at Function.eval [as cljs$core$IFn$_invoke$arity$1] (//cljs-runtime/helix.impl.props.js:190)
    at component (//cljs-runtime/limeray.web.components.js:115)
    at renderWithHooks (//cljs-runtime/module$node_modules$react_dom$cjs$react_dom_development.js:230)
    at beginWork$1 (//cljs-runtime/module$node_modules$react_dom$cjs$react_dom_development.js:327)
    at HTMLUnknownElement.callCallback (//cljs-runtime/module$node_modules$react_dom$cjs$react_dom_development.js:559)
    at Object.invokeGuardedCallbackImpl (//cljs-runtime/module$node_modules$react_dom$cjs$react_dom_development.js:560)
    at invokeGuardedCallback (//cljs-runtime/module$node_modules$react_dom$cjs$react_dom_development.js:5)
    at beginWork$$1 (//cljs-runtime/module$node_modules$react_dom$cjs$react_dom_development.js:772)
    at performUnitOfWork (//cljs-runtime/module$node_modules$react_dom$cjs$react_dom_development.js:467)


//cljs-runtime/module$node_modules$react_dom$cjs$react_dom_development.js:398 The above error occurred in the <component> component:
    in component (created by DayPickerInput)
    in div (created by DayPickerInput)
    in DayPickerInput (created by limeray.web.components/date-picker)
    in limeray.web.components/date-picker (created by limeray.web.routes/add-goal-view)
    in div (created by limeray.web.components/field)
    in limeray.web.components/field (created by limeray.web.routes/add-goal-view)
    in form (created by limeray.web.routes/add-goal-view)
    in div (created by limeray.web.routes/add-goal-view)
    in limeray.web.routes/add-goal-view (created by <http://limeray.web.app/root|limeray.web.app/root>)
    in div (created by <http://limeray.web.app/root|limeray.web.app/root>)
    in div (created by <http://limeray.web.app/root|limeray.web.app/root>)
    in <http://limeray.web.app/root|limeray.web.app/root>

Consider adding an error boundary to your tree to customize error handling behavior.
Visit <https://fb.me/react-error-boundaries> to learn more about error boundaries.

ah

props is a JS object that gets passed back, yes?

you’ll need to convert it to an associative object like a map. cljs-bean can do this very efficiently

in your requires, add [cljs-bean.core :as b] then :component #($ date-picker-input {& (b/bean %)})

it isn't equivalent to this 😕 @lilactown any suggestion?

@luis.cairampoma119 the syntax is wrong

oh

where 😧

$ and the helix.dom divs expect props to usually be written literally {:foo "bar" :baz 42}

all props need to be passed into the one map

similar to how in JSX, props always appear in the element <div foo="bar" baz={42}>

I don't using $

it’it’s the same with helix.dom

what you pasted above is the equivalent of doing:

<div {...props}>
 {{style: merge(props.style, { ... })}}
</div>

you see why it won’t work?

:face_palm: my bad

it worked! 🙂 thanks a lot for your patience 😆 I think I missed the options keywordize-keys on js->cljwhen I tried it. THats why it did not worked.

:component #($ date-picker-input {& (js->clj % :keywordize-keys true)})

aha!

yay! glad it’s working now

I will check cljs-bean next. Thanks a lot for your time

you’re welcome. cljs-bean can often be faster if the structure you are converting is very large. not a huge different it looks like in this case

cool! helix is awesome, I feel like I had enough knowledge within 2days. I can apply my react skills already. Just to be more cautious about interops 😆

Do you have suggestion about the error messaeg? Right now I don't see the actual code thats causing the error

Is there something like source maps?

you can turn on source maps. if you’re using shadow-cljs you can check out their user guide for how to do that

https://shadow-cljs.github.io/docs/UsersGuide.html

oh, I'm using shadow-cljs, AFAIK source map is enabled by default. I need to double check my setup

@lilactown Please, Can you do a code-review of my code? https://github.com/f1729/map-science/blob/master/src/map_science/core.cljs I would appreciate any suggestions

oof, the React range library involves a lot of JS interop

@lilactown which would be the correct equivalent?