Clojurians Log v2
rum 2017-01-19
I usually keep two states: “dirty” state that is directly displayed in input, and cleaned value that is reported to the global model/parent component/etc. Former is kept in rum/local. Latter is not filled until validation passes. That’s the gist of it
how do I do server-side rendering?
I am trying to define a layout like so:
(rum/defc layout [ & {:keys [title head body]}]
;; <!DOCTYPE html>
[:html
[:head
[:meta {:charset "UTF-8"}]
[:meta {:name "viewport" :content "width=device-width, initial-scale=1"}]
[:link {:href "css/style.css" :rel "stylesheet" :type "text/css"}]
[:link {:href "cljsjs/semantic-ui/semantic.min.css" :rel "stylesheet" :type "text/css"}]]
[:body
[:#app]
[:script {:src "js/compiled/wlister.js" :type "text/javascript"}]]])
(now I need to run rum/render-html (layout))
1. I'm not sure how to attach <!DOCTYPE html> into hiccup syntax
2. I need somehow to combine render-static-markup for external html layout and render-html rum call for components. Not sure how to do that
aha. I guess I just insert the call inside render-static-markup with dangerouslySetInnerHTML... =/
(str "<!DOCTYPE html>\n"
(rum/render-static-markup
[:html
[:head
that’s what I did :)
omg. thanks)
what about #2? am I correct?
I'll paste a snippet in 5 min what I'm trying to come up with
(rum/defc layout [body] ;[ & {:keys [title head body]}]
[:html
[:head
[:meta {:charset "UTF-8"}]
[:meta {:name "viewport" :content "width=device-width, initial-scale=1"}]
[:link {:href "css/style.css" :rel "stylesheet" :type "text/css"}]
[:link {:href "cljsjs/semantic-ui/semantic.min.css" :rel "stylesheet" :type "text/css"}]]
[:body
[:#app {:dangerouslySetInnerHTML {:__html (rum/render-html (body))}}]
[:script {:src "js/compiled/wlister.js" :type "text/javascript"}]]])
haven't tested yet
ok, turns out now I need to port cljs components to cljc 🙂
(I don't have vim repl multiplexer for cljc - when I eval in files, it's either server or figwheel. for cljc it's always server and I guess I need to reprogram vim-fireplace somehow. yay)
yes, the layout above did work with basic components. It does produce html layout without data-react checksums and then div#app with server-side rendered react component
can I ask stupid question? ok, so suppose I have a component which is a table. with one column - date. in browser I just display it with local formatting based on browser locale. during server-side rendering, what am I supposed to do to make react overwrite this component during client-side mount?
(overwrite only this column, I am guessing)
nothing special
it’s ok for server and client markup to not match down to the comma
React will correct everything when it’s done initializing on the client
the downside, of course, is that user can see the moment when server markup will change into client one. There might me a significant gap in time (couple of seconds)
another downside is that React, when it sees checksum mismatch, will do more expensive tree walking and rebuilding, instead of just leaving dom as-is
interesting. thanks
I was loooking at reforms, and I’m not prepared to bring on a whole library for one input text field
I was able to use a combo of defcs and rum/local to hold local state for the form input.