Clojurians Log v2

Hi, does anyone use the last version of reagent 0.10.0 ? Because after this update on my tiny project, I realised that the function http://reagent.com/render doesn't do the job anymore. In the result page, the tag "app" is empty, and I wonder if I miss something... I also change the require in the beginning of my file obviously (:require [reagent.dom :as reagent])

Hi! I just created a demo project with the default lein template and changed the version to 0.10.0 and it’s working

you could use it like this :

(require [reagent.core :as r]
[reagent.dom :as rd])
(rd/render ...)

reagent .core is always needed

Thank you for the rely. Even with these indications I experience the same issue with the render function...

Thank for the effort @jplaza,as I still experiment issue with render function, I will create a small shadow-cljs based example to check this out.

do you have some code ?

Yes, I have, the time I make a commit and I send it to you 😉

I made a basic example of reagent with shadow-cljs and the render function works well 🙂

:thumbsup:

I'm generating svg hiccup node in my project, and after a quick test, I think that my code is slightly buggy. I have to check it. By the way my project is : https://github.com/frozar/roughcljs The buggy code is not commited on the repo, not yet at least

Ok, it was a silly mistake in my code. I just learn there is a difference between using '(...) or (list ...) 🙃

Also the namespace reagent.core is not required to make the render function works. The namespace reagent.dom is enough 😉

oups 🙂

thzanks

Does anyone have a working "confirm you want to leave the page?" solution in Reagent or re-frame for when they are leaving (link or back-button) a page that has data on it?

It's trivial - just start listening to the beforeunload event when there's data and stop listening to it when there's no data.

I'm not familiar with "stop listening" in js. I take it it doesn'tm atter much where you put this js?

Regarding "stop listening": https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener

It matters when that code is executed. Where it physically ends up in the JS bundle doesn't matter.

seeing weirdness on safari with reagent/re-frame + bootstrap:

[:select.form-control {:on-click #(js/alert "clicked")} ...items...]

Just a guess, and probably based on some outdated knowledge - try replacing #(js/alert ...) with (fn [] (js/alert ...) nil).

unfortunately, nope: didn't work. :)

The next guess is that WebKit browsers just don't like having :on-click on :select. Dunno.

I am trying to create formatter component for React Data Grid in Reagent: https://adazzle.github.io/react-data-grid/docs/examples/cell-formatting

Each of my columns definition looks like: ^{:key id} {:key id :name text :editable true :formatter formatter}) and I thought that simple (defn formatter [data] (str (.-value data))) will be enough

Howver, trying to use any formatter produces error: react-dom.development.js:13436 Uncaught Error: Objects are not valid as a React child (found: object with keys {key, val, __hash, cljs$lang$protocol_mask$partition0$, cljs$lang$protocol_mask$partition1$}). If you meant to render a collection of children, use an array instead.

Can you provide the rest of the code that instantiates ReactDataGrid?

Sure:

(defn formatter [data]
  [:div (str (.-value data))])

(defn- columns
  [notes tags]
  (let [number-of-columns (reduce max (map (comp count #(:note/objects %)) notes))
        columns-tags-list (columns-tags notes tags)
        column-names (seq-overlay (range 0 number-of-columns)
                                  (map #(string/join ", " %)
                                       columns-tags-list))]
    (map (fn [id text]
           ^{:key id} {:key id :name text :editable true :formatter formatter})
         (range))
    column-names))

(defn- row-getter
  [notes i]
  (when (>= i 0)
    (->> (nth notes i)
         (:note/objects)
         (zipmap (range)))))


(defn index []
  (let [notes @(rf/subscribe [:notes/notes])
        tags @(rf/subscribe [:tags/tags])]
    [:> ReactDataGrid
     {:columns (columns notes tags)
      :rowGetter (partial row-getter notes)
      :rowsCount (count notes)
      :enableCellSelect true}]))

That's everything that's important.

Your columns function just returns column-names.

Also, your row-getter returns a map of integers to the elements in :note/objects for each row. But ReactDataGrid expects it to be a JS object.

(TBH, I don't recall if Reagent converts props from CLJS to JS recursively for :> components)

Also, you don't need ^{:key id} in there since what you return is not a React child.

Start with the smallest JS example possible and convert it to CLJS as is, without anything advanced. Then, gradually make it more "CLJS-ey", while making sure that it still works.

wait, wait

Everything works fine if only I remove :formatter formatter from column map.

Fomratter is the issue here.

I just noticed that I made a mistake in this paste. There was :formatter true where it should be :formatter formatter.

second guess was correct: I changed :on-click to :on-change and it works on linux+mac/chrome+safari+firefox. thanks!

Ok - sorry for bad examples.

(defn formatter [data]
  (let [props (.-value data)]
    [:div (str props)]))

(defn- columns
  [notes tags]
  (let [number-of-columns (reduce max (map (comp count #(:note/objects %)) notes))
        columns-tags-list (columns-tags notes tags)
        column-names (seq-overlay (range 0 number-of-columns)
                                  (map #(string/join ", " %)
                                       columns-tags-list))]
    (map (fn [id text]
           {:key id :name text :editable true #_#_:formatter formatter})
         (range)
         column-names)))

(defn- row-getter
  [notes i]
  (when (>= i 0)
    (->> (nth notes i)
         (:note/objects)
         (map str)
         (zipmap (range)))))


(defn index []
  (let [notes @(rf/subscribe [:notes/notes])
        tags @(rf/subscribe [:tags/tags])]
    [:> ReactDataGrid
     {:columns (columns notes tags)
      :rowGetter (partial row-getter notes)
      :rowsCount (count notes)
      :enableCellSelect true}]))

(defn formatter [_data]
  [:div "foo"])

(defn- columns
  [notes tags]
  (let [number-of-columns (reduce max (map (comp count #(:note/objects %)) notes))
        columns-tags-list (columns-tags notes tags)
        column-names (seq-overlay (range 0 number-of-columns)
                                  (map #(string/join ", " %)
                                       columns-tags-list))]
    (map (fn [id text]
           {:key id :name text :editable true :formatter formatter})
         (range)
         column-names)))

OK, so you also fixed the columns returning just column-names. :) What you see is caused by the fact that :formatter is expected to be a function that returns a React component. But you provide it a function that returns a CLJS vector. Read this: https://github.com/reagent-project/reagent/blob/master/doc/InteropWithReact.md#creating-react-components-from-reagent-components

Ah, I see, you also want to handle situations when the HTML5 history is changed. It's this event: https://developer.mozilla.org/en-US/docs/Web/API/Window/popstate_event But I don't think you can cancel it. And even if you could, it would not be robust. E.g. consider this function:

(defn set-page [page-id]
  (reset! current-page page-id)
  (set-html5-history-state (get-page-url page-id)))

Thank you! I've expected something like that 🙂

Hmm, but somehow :value in props end up as string..

ok wait

my fault!

And everything is working. Thank you very, very much!