rum 2017-01-19 | Slack Archive

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.

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

leov12:01:18

hi all

leov12:01:25

how do I do server-side rendering?

leov12:01:51

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"}]]])

leov12:01:11

(now I need to run rum/render-html (layout))

leov12:01:57

1. I'm not sure how to attach <!DOCTYPE html> into hiccup syntax

leov12:01:42

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

leov12:01:20

https://pp.vk.me/c543107/v543107791/976e/G2Q_g-y6Y3w.jpg

leov12:01:54

aha. I guess I just insert the call inside render-static-markup with dangerouslySetInnerHTML... =/

Niki12:01:59

(str "<!DOCTYPE html>\n"
    (rum/render-static-markup
      [:html
        [:head

Niki12:01:04

that’s what I did :)

leov12:01:46

omg. thanks)

leov12:01:58

what about #2? am I correct?

leov12:01:49

I'll paste a snippet in 5 min what I'm trying to come up with

leov12:01:01

(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"}]]])

leov12:01:07

haven't tested yet

leov12:01:57

ok, turns out now I need to port cljs components to cljc 🙂

leov12:01:28

(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)

leov12:01:52

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

leov14:01:54

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?

leov14:01:08

(overwrite only this column, I am guessing)

Niki14:01:41

nothing special

Niki14:01:56

it’s ok for server and client markup to not match down to the comma

Niki14:01:39

React will correct everything when it’s done initializing on the client

Niki14:01:29

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)

Niki14:01:02

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

leov15:01:24

interesting. thanks

2017-01-19

Channels