helix

https://github.com/Lokeh/helix
Luis C. Arbildo 2020-02-26T13:56:04.031300Z

Work with :as

Luis C. Arbildo 2020-02-26T13:56:29.031500Z

thank you

jaime 2020-02-26T21:14:19.032600Z

Hello. Have you guys tried using reitit routing in helix? What am I missing on this code?

(defnc root []
  (let [[match on-navigate] (hooks/use-state nil)
        view (when match (get-in match [:data :view]))]
    (hooks/use-effect (fn [] (rfe/start!
                              router
                              (fn [m] (on-navigate m))
                              {:use-fragment true})) [])
    (d/div {:class ""}
     (d/a {:href (rfe/href :limeray.web.routes/home)} "back")
       (when view ($ view match)))))
I'm getting this error
//cljs-runtime/cljs.core.js:4346 Uncaught Error: function (){
return reitit.frontend.easy.start_BANG_(limeray.web.routes.router,(function (m){
return (on_navigate.cljs$core$IFn$_invoke$arity$1 ? on_navigate.cljs$core$IFn$_invoke$arity$1(m) : on_navigate.call(null,m));
}),new cljs.core.PersistentArrayMap(null, 1, [new cljs.core.Keyword(null,"use-fragment","use-fragment",-1617737154),true], null));
} is not ISeqable
    at Object.cljs$core$seq [as seq] (//cljs-runtime/cljs.core.js:4346)
    at Object.cljs$core$to_array [as to_array] (//cljs-runtime/cljs.core.js:11850)
    at Object.helix$hooks$determine_deps [as determine_deps] (//cljs-runtime/helix.hooks.js:236)
    at <http://limeray.web.app/root|limeray.web.app/root> (//cljs-runtime/limeray.web.app.js:19)
    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)

lilactown 2020-02-26T21:17:56.034400Z

hey @jaime.sangcap it looks like you might be calling use-effect similar to the React API. currently in helix, the API is a bit different. You put the dependencies first and the body of the effect does not need to be wrapped in a zero-arity function. You can also use keywords :once or :always

lilactown 2020-02-26T21:18:35.035100Z

(hooks/use-effect
 :once
 (rfe/start! router (fn [m] (on-navigate m)) {:use-fragment true}))

jaime 2020-02-26T21:23:34.036600Z

oh cool! I like it. It's explicitly mentioning :once or :always 🙂 Thanks a lot!

lilactown 2020-02-26T21:26:39.037Z

sure thing. other differences can be found here: https://github.com/Lokeh/helix/blob/master/docs/hooks.md

❤️ 1
jaime 2020-02-26T21:29:23.038900Z

If I require a react component from npm module. Can I use it directly like below?

(:require ["some-module" :as CompFromNpmModule])
($ CompFromNpmModule props)

lilactown 2020-02-26T21:31:22.039400Z

yep, just check the section for creating elements: https://github.com/Lokeh/helix/blob/master/docs/creating-elements.md

jaime 2020-02-26T21:32:42.040700Z

thank you. I think I need to do more reading.