This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2020-03-13
Channels
- # aleph (16)
- # announcements (8)
- # aws (5)
- # babashka (54)
- # beginners (48)
- # calva (7)
- # cider (7)
- # clojure (209)
- # clojure-brasil (4)
- # clojure-europe (20)
- # clojure-italy (12)
- # clojure-nl (21)
- # clojure-uk (69)
- # clojurescript (24)
- # cursive (11)
- # datascript (7)
- # datomic (47)
- # emacs (14)
- # graphql (20)
- # hoplon (25)
- # jobs (1)
- # kaocha (1)
- # leiningen (14)
- # meander (7)
- # off-topic (44)
- # other-languages (1)
- # pathom (20)
- # re-frame (2)
- # reagent (51)
- # reitit (3)
- # remote-jobs (1)
- # shadow-cljs (46)
- # spacemacs (5)
- # sql (65)
- # tools-deps (86)
- # vim (11)
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])
you could use it like this :
(require [reagent.core :as r]
[reagent.dom :as rd])
(rd/render ...)
Thank you for the rely. Even with these indications I experience the same issue with the render function...
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 😉
Hi! I just created a demo project with the default lein template and changed the version to 0.10.0 and it’s working
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.
I made a basic example of reagent with shadow-cljs and the render function works well 🙂
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.
I tried this before asking my question and took your suggestion as a sanity check and tried again. Unfortunately, the beforeunload event doesn't seem to fire when navigating SPAs; I could only get it to fire when I hit "refresh".
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)))
With this example, even if you were able to cancel the event, the current-page
would now be in an inconsistent state.
A robust approach is to do it at your application's level and not with JS events.seeing weirdness on safari with reagent/re-frame + bootstrap:
[:select.form-control {:on-click #(js/alert "clicked")} ...items...]
works on linux chrome and firefox but doesn't work on safari. (this is just a debugging on-click handler, the real one gets the id and does something useful.) is there a known issue with bootstrap/react/reagent on mac?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.
second guess was correct: I changed :on-click
to :on-change
and it works on linux+mac/chrome+safari+firefox. thanks!
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.
(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}]))
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)
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.
I just noticed that I made a mistake in this paste. There was :formatter true
where it should be :formatter formatter
.
(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}]))
this works fine, while this:
(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)))
fails with: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
I tried this before asking my question and took your suggestion as a sanity check and tried again. Unfortunately, the beforeunload event doesn't seem to fire when navigating SPAs; I could only get it to fire when I hit "refresh".