Fixed SSR of text sequences, test for static markup too

This commit is contained in:
Nikita Prokopov
2018-01-29 17:57:36 +03:00
parent 26d1849568
commit 07caa4c716
4 changed files with 69 additions and 51 deletions

View File

@ -40,12 +40,12 @@
<div class=example>
<div class=example-title>Controls</div>
<div id=controls><dl data-reactroot=""><dt>Color: </dt><dd><input type="text" value="#FA8D97" style="width:100px"/></dd><dt>Clone: </dt><dd><input type="text" value="#FA8D97" style="width:100px"/></dd><dt>Color: </dt><dd><span>0</span><!-- --> watches</dd><dt>Tick: </dt><dd><input type="text" value="167" style="width:100px"/> ms</dd><dt>Time:</dt><dd><span>0</span><!-- --> watches</dd></dl></div>
<div id=controls><dl data-reactroot=""><dt>Color: </dt><dd><input type="text" value="#FA8D97" style="width:100px"/></dd><dt>Clone: </dt><dd><input type="text" value="#FA8D97" style="width:100px"/></dd><dt>Color: </dt><dd><span>0</span> watches</dd><dt>Tick: </dt><dd><input type="text" value="167" style="width:100px"/> ms</dd><dt>Time:</dt><dd><span>0</span> watches</dd></dl></div>
</div>
<div class=example>
<div class=example-title>Reactive binary clock</div>
<div id=binary-clock><table class="bclock" data-reactroot=""><tbody><tr><td></td><td class="bclock-bit"></td><th></th><td></td><td class="bclock-bit"></td><th></th><td></td><td class="bclock-bit"></td><th></th><td class="bclock-bit"></td><td class="bclock-bit"></td><td class="bclock-bit"></td></tr><tr><td></td><td class="bclock-bit"></td><th></th><td class="bclock-bit"></td><td class="bclock-bit"></td><th></th><td class="bclock-bit"></td><td class="bclock-bit"></td><th></th><td class="bclock-bit"></td><td class="bclock-bit"></td><td class="bclock-bit"></td></tr><tr><td class="bclock-bit"></td><td class="bclock-bit"></td><th></th><td class="bclock-bit"></td><td class="bclock-bit"></td><th></th><td class="bclock-bit"></td><td class="bclock-bit"></td><th></th><td class="bclock-bit"></td><td class="bclock-bit"></td><td class="bclock-bit"></td></tr><tr><td class="bclock-bit"></td><td class="bclock-bit"></td><th></th><td class="bclock-bit"></td><td class="bclock-bit"></td><th></th><td class="bclock-bit"></td><td class="bclock-bit"></td><th></th><td class="bclock-bit"></td><td class="bclock-bit"></td><td class="bclock-bit"></td></tr><tr><th>0</th><th>0</th><th></th><th>0</th><th>0</th><th></th><th>0</th><th>0</th><th></th><th>0</th><th>0</th><th>0</th></tr><tr><th colspan="8"><div class="stats">Renders: <!-- -->32</div></th></tr></tbody></table></div>
<div id=binary-clock><table class="bclock" data-reactroot=""><tbody><tr><td></td><td class="bclock-bit"></td><th></th><td></td><td class="bclock-bit"></td><th></th><td></td><td class="bclock-bit"></td><th></th><td class="bclock-bit"></td><td class="bclock-bit"></td><td class="bclock-bit"></td></tr><tr><td></td><td class="bclock-bit"></td><th></th><td class="bclock-bit"></td><td class="bclock-bit"></td><th></th><td class="bclock-bit"></td><td class="bclock-bit"></td><th></th><td class="bclock-bit"></td><td class="bclock-bit"></td><td class="bclock-bit"></td></tr><tr><td class="bclock-bit"></td><td class="bclock-bit"></td><th></th><td class="bclock-bit"></td><td class="bclock-bit"></td><th></th><td class="bclock-bit"></td><td class="bclock-bit"></td><th></th><td class="bclock-bit"></td><td class="bclock-bit"></td><td class="bclock-bit"></td></tr><tr><td class="bclock-bit"></td><td class="bclock-bit"></td><th></th><td class="bclock-bit"></td><td class="bclock-bit"></td><th></th><td class="bclock-bit"></td><td class="bclock-bit"></td><th></th><td class="bclock-bit"></td><td class="bclock-bit"></td><td class="bclock-bit"></td></tr><tr><th>0</th><th>0</th><th></th><th>0</th><th>0</th><th></th><th>0</th><th>0</th><th></th><th>0</th><th>0</th><th>0</th></tr><tr><th colSpan="8"><div class="stats">Renders: <!-- -->32</div></th></tr></tbody></table></div>
</div>
<div class=example>

View File

@ -360,7 +360,7 @@
(defprotocol HtmlRenderer
(-render-html [this parent *mode sb]
(-render-html [this *state sb]
"Turn a Clojure data type into a string of HTML with react ids."))
@ -381,7 +381,7 @@
true)))
(defn render-content! [tag attrs children *mode sb]
(defn render-content! [tag attrs children *state sb]
(if (and (nil? children)
(contains? void-tags tag))
(append! sb "/>")
@ -389,14 +389,16 @@
(append! sb ">")
(or (render-textarea-value! tag attrs sb)
(render-inner-html! attrs children sb)
(doseq [element children]
(-render-html element children *mode sb)))
(append! sb "</" tag ">"))))
(doseq [child children]
(-render-html child *state sb)))
(append! sb "</" tag ">")))
(when (not= :state/static @*state)
(vreset! *state :state/tag-close)))
(defn render-element!
"Render an element vector as a HTML element."
[element *mode sb]
[element *state sb]
(when-not (nothing? element)
(let [[tag id classes attrs children] (normalize-element element)]
(append! sb "<" tag)
@ -415,46 +417,44 @@
(render-classes! classes sb)
(when (= @*mode nil)
(when (= :state/root @*state)
(append! sb " data-reactroot=\"\""))
(vreset! *mode tag)
(when (not= :state/static @*state)
(vreset! *state :state/tag-open))
(if (= "select" tag)
(binding [*select-value* (get-value attrs)]
(render-content! tag attrs children *mode sb))
(render-content! tag attrs children *mode sb)))))
(render-content! tag attrs children *state sb))
(render-content! tag attrs children *state sb)))))
(extend-protocol HtmlRenderer
IPersistentVector
(-render-html [this parent *mode sb]
(render-element! this *mode sb))
(-render-html [this *state sb]
(render-element! this *state sb))
ISeq
(-render-html [this parent *mode sb]
(-render-html [this *state sb]
(when (= :state/root @*state)
(vreset! *state :state/root-seq))
(doseq [element this]
(-render-html element parent *mode sb))
(vreset! *mode :seq))
Named
(-render-html [this parent *mode sb]
(append! sb (name this))
(vreset! *mode :named))
(-render-html element *state sb)))
String
(-render-html [this parent *mode sb]
(if (= @*mode :string)
(-render-html [this *state sb]
(when (= @*state :state/text)
(append! sb "<!-- -->"))
(append! sb (escape-html this))
(vreset! *mode :string))
(when (not= :state/static @*state)
(vreset! *state :state/text)))
Object
(-render-html [this parent *mode sb]
(-render-html (str this) parent *mode sb))
(-render-html [this *state sb]
(-render-html (str this) *state sb))
nil
(-render-html [this parent *mode sb]
(-render-html [this *state sb]
:nop))
@ -462,11 +462,11 @@
([src] (render-html src nil))
([src opts]
(let [sb (StringBuilder.)]
(-render-html src nil (volatile! nil) sb)
(-render-html src (volatile! :state/root) sb)
(str sb))))
(defn render-static-markup [src]
(let [sb (StringBuilder.)]
(-render-html src nil (volatile! nil) sb)
(-render-html src (volatile! :state/static) sb)
(str sb)))

View File

@ -360,7 +360,7 @@ e,h,f,k,l,m,n,p,q,w,z);B=C(D);var G=N(D);if(null==G)return a.Ca?a.Ca(b,c,d,e,h,f
q,w,z,B,D,G,E);S=C(ia);var Ga=N(ia);if(null==Ga)return a.Ga?a.Ga(b,c,d,e,h,f,k,l,m,n,p,q,w,z,B,D,G,E,S):a.call(a,b,c,d,e,h,f,k,l,m,n,p,q,w,z,B,D,G,E,S);ia=C(Ga);Ga=N(Ga);if(null==Ga)return a.Ha?a.Ha(b,c,d,e,h,f,k,l,m,n,p,q,w,z,B,D,G,E,S,ia):a.call(a,b,c,d,e,h,f,k,l,m,n,p,q,w,z,B,D,G,E,S,ia);b=[b,c,d,e,h,f,k,l,m,n,p,q,w,z,B,D,G,E,S,ia];for(c=Ga;;)if(c)b.push(C(c)),c=N(c);else break;return a.apply(a,b)}
function be(a,b){if(a.D){var c=a.F,d=Sd(c+1,b);return d<=c?Wd(a,d,b):a.D(b)}c=I(b);return null==c?a.v?a.v():a.call(a):Xd(a,C(c),N(c))}function ce(a,b,c){if(a.D){b=R(b,c);var d=a.F;c=Sd(d,c)+1;return c<=d?Wd(a,c,b):a.D(b)}return Xd(a,b,I(c))}function de(a,b,c,d){return a.D?(b=R(b,R(c,d)),c=a.F,d=2+Sd(c-1,d),d<=c?Wd(a,d,b):a.D(b)):Yd(a,b,c,I(d))}function ee(a,b,c,d,e){return a.D?(b=R(b,R(c,R(d,e))),c=a.F,e=3+Sd(c-2,e),e<=c?Wd(a,e,b):a.D(b)):Zd(a,b,c,d,I(e))}
function ed(a,b,c,d,e,f){return a.D?(f=Td(f),b=R(b,R(c,R(d,R(e,f)))),c=a.F,f=4+Sd(c-3,f),f<=c?Wd(a,f,b):a.D(b)):ae(a,b,c,d,e,Td(f))}
function fe(){"undefined"===typeof Ma&&(Ma=function(a){this.mc=a;this.m=393216;this.C=0},Ma.prototype.U=function(a,b){return new Ma(b)},Ma.prototype.R=function(){return this.mc},Ma.prototype.Z=function(){return!1},Ma.prototype.next=function(){return Error("No such element")},Ma.prototype.remove=function(){return Error("Unsupported operation")},Ma.Fc=function(){return new W(null,1,5,X,[ge],null)},Ma.Tb=!0,Ma.wb="cljs.core/t_cljs$core14571",Ma.ic=function(a){return Ub(a,"cljs.core/t_cljs$core14571")});
function fe(){"undefined"===typeof Ma&&(Ma=function(a){this.mc=a;this.m=393216;this.C=0},Ma.prototype.U=function(a,b){return new Ma(b)},Ma.prototype.R=function(){return this.mc},Ma.prototype.Z=function(){return!1},Ma.prototype.next=function(){return Error("No such element")},Ma.prototype.remove=function(){return Error("Unsupported operation")},Ma.Fc=function(){return new W(null,1,5,X,[ge],null)},Ma.Tb=!0,Ma.wb="cljs.core/t_cljs$core14631",Ma.ic=function(a){return Ub(a,"cljs.core/t_cljs$core14631")});
return new Ma(he)}function ie(a,b){for(;;){if(null==I(b))return!0;var c=L(b);c=a.f?a.f(c):a.call(null,c);if(v(c)){c=a;var d=N(b);a=c;b=d}else return!1}}function je(a,b){for(;;)if(I(b)){var c=L(b);c=a.f?a.f(c):a.call(null,c);if(v(c))return c;c=a;var d=N(b);a=c;b=d}else return null}
function ke(a){return function(){function b(b,c){return $a(a.c?a.c(b,c):a.call(null,b,c))}function c(b){return $a(a.f?a.f(b):a.call(null,b))}function d(){return $a(a.v?a.v():a.call(null))}var e=null,f=function(){function b(a,b,d){var e=null;if(2<arguments.length){e=0;for(var f=Array(arguments.length-2);e<f.length;)f[e]=arguments[e+2],++e;e=new J(f,0,null)}return c.call(this,a,b,e)}function c(b,c,d){return $a(de(a,b,c,d))}b.F=2;b.D=function(a){var b=L(a);a=N(a);var d=L(a);a=zc(a);return c(b,d,a)};
b.w=c;return b}();e=function(a,e,l){switch(arguments.length){case 0:return d.call(this);case 1:return c.call(this,a);case 2:return b.call(this,a,e);default:var h=null;if(2<arguments.length){h=0;for(var k=Array(arguments.length-2);h<k.length;)k[h]=arguments[h+2],++h;h=new J(k,0,null)}return f.w(a,e,h)}throw Error("Invalid arity: "+(arguments.length-1));};e.F=2;e.D=f.D;e.v=d;e.f=c;e.c=b;e.w=f.w;return e}()}
@ -514,11 +514,11 @@ function og(a,b,c){var d=Error(a);this.message=a;this.data=b;this.Ib=c;this.name
og.prototype.M=function(a,b,c){Ub(b,"#error {:message ");Zf(this.message,b,c);v(this.data)&&(Ub(b,", :data "),Zf(this.data,b,c));v(this.Ib)&&(Ub(b,", :cause "),Zf(this.Ib,b,c));return Ub(b,"}")};og.prototype.toString=function(){return lc(this)};function pg(a,b){return new og(a,b,null)};var qg=new V("rum","react-component","rum/react-component",-1879897248),rg=new V(null,"did-mount","did-mount",918232960),sg=new V(null,"min","min",444991522),tg=new V(null,"will-unmount","will-unmount",-808051550),ug=new V(null,"email","email",1415816706),vg=new V("rum.examples.errors","error","rum.examples.errors/error",1819457764),Va=new V(null,"meta","meta",1499536964),wg=new V(null,"age","age",-604307804),xg=new V(null,"did-remount","did-remount",1362550500),yg=new V(null,"color","color",1011675173),
Wa=new V(null,"dup","dup",556298533),zg=new V("rum","class","rum/class",-2030775258),Ag=new V(null,"init","init",-1875481434),Bg=new V("rum.examples.portals","*clicks","rum.examples.portals/*clicks",840774855),Cg=new V(null,"childContextTypes","childContextTypes",578717991),Dg=new V(null,"phone","phone",-763596057),Eg=new V(null,"content","content",15833224),Fg=new V(null,"msgData","msgData",345907944),Gg=new V(null,"did-catch","did-catch",2139522313),Hg=new V(null,"child-context","child-context",
-1375270295),Ig=new V(null,"margin-left","margin-left",2015598377),Jg=new V(null,"value","value",305978217),Kg=new V("rum.reactive","key","rum.reactive/key",-803425142),Lg=new V(null,"contextTypes","contextTypes",-2023853910),Mg=new V("rum","args","rum/args",1315791754),Ng=new V(null,"width","width",-384071477),fg=new V(null,"val","val",128701612),Og=new V(null,"cursor","cursor",1011937484),Pg=new V(null,"type","type",1174270348),Qg=new V(null,"timer-static","timer-static",1373464428),bg=new V(null,
"fallback-impl","fallback-impl",-1501286995),Rg=new V(null,"before-render","before-render",71256781),Ta=new V(null,"flush-on-newline","flush-on-newline",-151457939),Sg=new V(null,"e","e",1381269198),Tg=new V(null,"className","className",-1983287057),Ee=new V(null,"style","style",-496642736),Ug=new V(null,"div","div",1057191632),Vg=new V(null,"did-update","did-update",-2143702256),Ua=new V(null,"readably","readably",1129599760),ge=new xc(null,"meta14572","meta14572",532420496,null),Tf=new V(null,"more-marker",
"more-marker",-14717935),Wg=new V(null,"key-fn","key-fn",-636154479),Xg=new V(null,"g","g",1738089905),Yg=new V(null,"will-mount","will-mount",-434633071),Zg=new V(null,"c","c",-1763192079),$g=new V(null,"for","for",-1323786319),ah=new V(null,"weight","weight",-1262796205),Xa=new V(null,"print-length","print-length",1931866356),bh=new V(null,"max","max",61366548),ch=new V(null,"id","id",-1388402092),dh=new V(null,"class","class",-2030961996),eh=new V(null,"bmi","bmi",1421979636),hh=new V(null,"will-update",
"will-update",328062998),ih=new V(null,"on-mouse-move","on-mouse-move",-1386320874),jh=new V(null,"class-properties","class-properties",1351279702),kh=new V("rum","local","rum/local",-1497916586),lh=new V(null,"b","b",1482224470),mh=new V(null,"d","d",1972142424),nh=new V(null,"htmlFor","htmlFor",-1050291720),oh=new V("rum.examples.core","interval","rum.examples.core/interval",-891109255),ph=new V(null,"after-render","after-render",1997533433),qh=new V(null,"static-properties","static-properties",
-577838503),rh=new V(null,"tag","tag",-1290361223),sh=new V(null,"input","input",556931961),th=new V(null,"msgMethod","msgMethod",523741434),uh=new V(null,"wrap-render","wrap-render",1782000986),vh=new V(null,"on-change","on-change",-732046149),wh=new V("rum.reactive","refs","rum.reactive/refs",-814076325),ag=new V(null,"alt-impl","alt-impl",670969595),xh=new V(null,"backgroundColor","backgroundColor",1738438491),yh=new V(null,"should-update","should-update",-1292781795),zh=new V(null,"a","a",-2123407586),
Ah=new V(null,"height","height",1025178622);function Bh(a,b,c){this.ref=a;this.path=b;this.meta=c;this.m=2153938944;this.C=114690}g=Bh.prototype;g.equiv=function(a){return this.B(null,a)};g.M=function(a,b,c){Ub(b,"#object [rum.cursor.Cursor ");Zf(new u(null,1,[fg,this.va(null)],null),b,c);return Ub(b,"]")};g.R=function(){return this.meta};g.O=function(){return this[ba]||(this[ba]=++ca)};g.B=function(a,b){return this===b};g.bb=function(a,b){pe.G(this.ref,Be,this.path,b);return b};
"fallback-impl","fallback-impl",-1501286995),Rg=new V(null,"before-render","before-render",71256781),Ta=new V(null,"flush-on-newline","flush-on-newline",-151457939),Sg=new V(null,"e","e",1381269198),Tg=new V(null,"className","className",-1983287057),Ee=new V(null,"style","style",-496642736),Ug=new V(null,"div","div",1057191632),Vg=new V(null,"did-update","did-update",-2143702256),Ua=new V(null,"readably","readably",1129599760),Tf=new V(null,"more-marker","more-marker",-14717935),Wg=new V(null,"key-fn",
"key-fn",-636154479),Xg=new V(null,"g","g",1738089905),Yg=new V(null,"will-mount","will-mount",-434633071),Zg=new V(null,"c","c",-1763192079),$g=new V(null,"for","for",-1323786319),ah=new V(null,"weight","weight",-1262796205),Xa=new V(null,"print-length","print-length",1931866356),bh=new V(null,"max","max",61366548),ch=new V(null,"id","id",-1388402092),dh=new V(null,"class","class",-2030961996),eh=new V(null,"bmi","bmi",1421979636),hh=new V(null,"will-update","will-update",328062998),ih=new V(null,
"on-mouse-move","on-mouse-move",-1386320874),jh=new V(null,"class-properties","class-properties",1351279702),kh=new V("rum","local","rum/local",-1497916586),lh=new V(null,"b","b",1482224470),mh=new V(null,"d","d",1972142424),nh=new V(null,"htmlFor","htmlFor",-1050291720),oh=new V("rum.examples.core","interval","rum.examples.core/interval",-891109255),ph=new V(null,"after-render","after-render",1997533433),qh=new V(null,"static-properties","static-properties",-577838503),rh=new V(null,"tag","tag",
-1290361223),sh=new V(null,"input","input",556931961),th=new V(null,"msgMethod","msgMethod",523741434),uh=new V(null,"wrap-render","wrap-render",1782000986),vh=new V(null,"on-change","on-change",-732046149),wh=new V("rum.reactive","refs","rum.reactive/refs",-814076325),ag=new V(null,"alt-impl","alt-impl",670969595),xh=new V(null,"backgroundColor","backgroundColor",1738438491),yh=new V(null,"should-update","should-update",-1292781795),zh=new V(null,"a","a",-2123407586),Ah=new V(null,"height","height",
1025178622),ge=new xc(null,"meta14632","meta14632",475936799,null);function Bh(a,b,c){this.ref=a;this.path=b;this.meta=c;this.m=2153938944;this.C=114690}g=Bh.prototype;g.equiv=function(a){return this.B(null,a)};g.M=function(a,b,c){Ub(b,"#object [rum.cursor.Cursor ");Zf(new u(null,1,[fg,this.va(null)],null),b,c);return Ub(b,"]")};g.R=function(){return this.meta};g.O=function(){return this[ba]||(this[ba]=++ca)};g.B=function(a,b){return this===b};g.bb=function(a,b){pe.G(this.ref,Be,this.path,b);return b};
g.Mb=function(a,b){var c=this;return c.bb(0,function(){var a=c.va(null);return b.f?b.f(a):b.call(null,a)}())};g.Nb=function(a,b,c){var d=this;return d.bb(0,function(){var a=d.va(null);return b.c?b.c(a,c):b.call(null,a,c)}())};g.Ob=function(a,b,c,d){var e=this;return e.bb(0,function(){var a=e.va(null);return b.j?b.j(a,c,d):b.call(null,a,c,d)}())};g.Pb=function(a,b,c,d,e){return this.bb(0,ee(b,this.va(null),c,d,e))};
g.Db=function(a,b,c){var d=this;gg(d.ref,kb(kb(M,b),this),function(a){return function(e,h,k,l){e=fb(H,k,d.path);l=fb(H,l,d.path);return Ac.c(e,l)?null:c.G?c.G(b,a,e,l):c.call(null,b,a,e,l)}}(this));return this};g.Eb=function(a,b){var c=kb(kb(M,b),this);Xb(this.ref,c);return this};g.va=function(){var a=F(this.ref);return fb(H,a,this.path)};var Ch;a:{var Dh=aa.navigator;if(Dh){var Eh=Dh.userAgent;if(Eh){Ch=Eh;break a}}Ch=""}function Fh(a){return-1!=Ch.indexOf(a)};function Gh(){return Fh("iPhone")&&!Fh("iPod")&&!Fh("iPad")};var Hh=Fh("Opera"),Ih=Fh("Trident")||Fh("MSIE"),Jh=Fh("Edge"),Kh=Fh("Gecko")&&!(-1!=Ch.toLowerCase().indexOf("webkit")&&!Fh("Edge"))&&!(Fh("Trident")||Fh("MSIE"))&&!Fh("Edge"),Lh=-1!=Ch.toLowerCase().indexOf("webkit")&&!Fh("Edge");Lh&&Fh("Mobile");Fh("Macintosh");Fh("Windows");Fh("Linux")||Fh("CrOS");var Mh=aa.navigator||null;Mh&&(Mh.appVersion||"").indexOf("X11");Fh("Android");Gh();Fh("iPad");Fh("iPod");Gh()||Fh("iPad")||Fh("iPod");function Nh(){var a=aa.document;return a?a.documentMode:void 0}var Oh;
a:{var Ph="",Qh=function(){var a=Ch;if(Kh)return/rv\:([^\);]+)(\)|;)/.exec(a);if(Jh)return/Edge\/([\d\.]+)/.exec(a);if(Ih)return/\b(?:MSIE|rv)[: ]([^\);]+)(\)|;)/.exec(a);if(Lh)return/WebKit\/(\S+)/.exec(a);if(Hh)return/(?:Version)[ \/]?(\S+)/.exec(a)}();Qh&&(Ph=Qh?Qh[1]:"");if(Ih){var Rh=Nh();if(null!=Rh&&Rh>parseFloat(Ph)){Oh=String(Rh);break a}}Oh=Ph}var Ka={};

View File

@ -38,6 +38,13 @@
[:.f "g" (list [:.h]) "i"]])
(rum/defc comp-root-array []
(list
[:.a "A"]
[:.b "B"]
[:.c "C"]))
(rum/defc comp-header []
[:ul.nav__content
(list [:li.menu-item {:key "F"} "Женщинам"]
@ -77,9 +84,15 @@
(rum/defc comp-span []
[:div
"test"
"passed"])
[:span
"a" "b"
"a" [:tag "b"] "c"
"a" (list "b" "c") "d"
"a" (list "b" "c") (list "d" "e") "f"
(list "a" "b") [:tag "c"] (list "d" "e")
"a" nil "b"
"a" (comp-nothing) "b"
"a" (list nil) "b"])
(rum/defc comp-campaign []
@ -197,11 +210,6 @@
[:.c1.c2 { :class [:c2 :c3]}]]) ;; not removing duplicates
(rum/defc comp-reactid [] ;; check for proper reactid allocation
[:div
(map (fn [i] [:div (str i)]) (range 100))])
(rum/defc comp-html []
[:div {:dangerouslySetInnerHTML {:__html "<span>test</span>"}}])
@ -246,6 +254,7 @@
"tag" comp-tag
"list" comp-list
"lists" comp-lists
"root-array" comp-root-array
"header" comp-header
"nil1" comp-nil1
"nil2" comp-nil2
@ -258,7 +267,6 @@
"attrs-cap" comp-attrs-capitalization
"attrs-order" comp-attrs-order
"classes" comp-classes
"reactid" comp-reactid
"html" comp-html
"inputs" comp-inputs
"svg" comp-svg
@ -274,11 +282,15 @@
and saves them to render-dir"
[write-fn]
(enable-console-print!)
(doseq [[name ctor] components
:let [html (js/ReactDOMServer.renderToString (ctor))
path (str render-dir "/" name ".html")]]
(println " writing" path)
(write-fn path html))))
(doseq [[name ctor] components]
(let [html (js/ReactDOMServer.renderToString (ctor))
path (str render-dir "/html/" name ".html")]
(println " writing" path)
(write-fn path html))
(let [html (js/ReactDOMServer.renderToStaticMarkup (ctor))
path (str render-dir "/markup/" name ".html")]
(println " writing" path)
(write-fn path html)))))
#?(:clj
@ -293,6 +305,7 @@
(when-not (str/blank? out)
(println out))))))
#?(:clj
(defn diff [s1 s2]
(->>
@ -312,12 +325,17 @@
(doseq [f (reverse (file-seq (io/file render-dir)))]
(.delete ^java.io.File f))
(.mkdir (io/file render-dir))
(.mkdir (io/file render-dir "html"))
(.mkdir (io/file render-dir "markup"))
;; run react_render_html using node
(exec "node" "test/rum/test/react_render_html.js")
(doseq [[name ctor] components]
(testing name
;; compare html rendered with react
;; to html rendered with rum/render-html
(let [react-html (slurp (str render-dir "/" name ".html"))
(let [react-html (slurp (str render-dir "/html/" name ".html"))
rum-html (rum/render-html (ctor))]
(is (= react-html rum-html) (diff react-html rum-html)))
(let [react-html (slurp (str render-dir "/markup/" name ".html"))
rum-html (rum/render-static-markup (ctor))]
(is (= react-html rum-html) (diff react-html rum-html)))))))