Add doctype to server side rendering

easafe · easafe · commit 8394ba65dea2 · 2022-08-28T18:47:24.000+04:00
diff --git a/src/Flame/Html/Attribute/Event.js b/src/Flame/Html/Attribute/Event.js
@@ -1,5 +1,3 @@
-'use strict';
-
 let messageEventData = 5,
     rawEventData = 6;
 
diff --git a/src/Flame/Html/Attribute/Internal.js b/src/Flame/Html/Attribute/Internal.js
@@ -1,5 +1,3 @@
-'use strict';
-
 let styleData = 1,
     classData = 2,
     propertyData = 3,
diff --git a/src/Flame/Renderer/Internal/Dom.js b/src/Flame/Renderer/Internal/Dom.js
@@ -1,5 +1,3 @@
-'use strict';
-
 let namespace = 'http://www.w3.org/2000/svg',
     eventPrefix = '__flame_',
     eventPostfix = 'updater';
diff --git a/src/Flame/Renderer/String.js b/src/Flame/Renderer/String.js
@@ -1,6 +1,5 @@
-'use strict';
-
 let textNode = 1,
+    elementNode = 2,
     svgNode = 3,
     fragmentNode = 4,
     lazyNode = 5,
@@ -110,7 +109,15 @@ let booleanAttributes = new Set([
 ]);
 
 /** String rendering adapted from https://github.com/snabbdom/snabbdom-to-html */
-export {stringify as render_};
+export function render_(html) {
+    let docType = '<!DOCTYPE html>',
+        rendered = stringify(html);
+
+    if (html.nodeType === elementNode && html.tag === 'html')
+        rendered = docType + rendered;
+
+    return rendered;
+}
 
 function stringify(html) {
     switch (html.nodeType) {
diff --git a/src/Flame/Renderer/String.purs b/src/Flame/Renderer/String.purs
@@ -8,5 +8,7 @@ import Flame.Types (Html)
 foreign import render_ :: forall message. EffectFn1 (Html message) String
 
 -- | Render markup into a string, useful for server-side rendering
+-- |
+-- | If the root tag is `html`, doctype is automatically added
 render :: forall message. Html message -> Effect String
 render = EU.runEffectFn1 render_
diff --git a/test/Main.purs b/test/Main.purs
@@ -213,7 +213,7 @@ main = AF.launchAff_ $ TSR.runSpec [consoleReporter] do
                         ]
                   ]
                   html' <- liftEffect $ FRS.render html
-                  TSA.shouldEqual """<html><head><title>title</title></head><body><main><button>-</button><br>Test<button>+</button><svg viewBox="0 0 23 0"><path d="234" /></svg><div><div><span><a>here</a></span></div></div></main></body></html>""" html'
+                  TSA.shouldEqual """<!DOCTYPE html><html><head><title>title</title></head><body><main><button>-</button><br>Test<button>+</button><svg viewBox="0 0 23 0"><path d="234" /></svg><div><div><span><a>here</a></span></div></div></main></body></html>""" html'
 
             TS.it "nested nodes with attributes" do
                   let html = HE.html [HA.lang "en"] [
@@ -232,7 +232,7 @@ main = AF.launchAff_ $ TSR.runSpec [consoleReporter] do
                         ]
                   ]
                   html' <- liftEffect $ FRS.render html
-                  TSA.shouldEqual """<html lang="en"><head><title>title</title></head><body id="content"><main><button style="display: block; width: 20px">-</button><br>Test<button my-attribute="myValue">+</button><hr style="border: 200px solid blue"><div><div><span><a>here</a></span></div></div></main></body></html>""" html'
+                  TSA.shouldEqual """<!DOCTYPE html><html lang="en"><head><title>title</title></head><body id="content"><main><button style="display: block; width: 20px">-</button><br>Test<button my-attribute="myValue">+</button><hr style="border: 200px solid blue"><div><div><span><a>here</a></span></div></div></main></body></html>""" html'
 
             TS.it "nested nodes with properties and attributes" do
                   let html = HE.html [HA.lang "en"] [
@@ -252,13 +252,13 @@ main = AF.launchAff_ $ TSR.runSpec [consoleReporter] do
                         ]
                   ]
                   html' <- liftEffect $ FRS.render html
-                  TSA.shouldEqual """<html lang="en"><head disabled="disabled"><title>title</title></head><body id="content"><main><button style="display: block; width: 20px">-</button><br>Test<button my-attribute="myValue">+</button><hr style="border: 200px solid blue" autocomplete="off"><div><div><span><a autofocus="autofocus">here</a></span></div></div></main></body></html>""" html'
+                  TSA.shouldEqual """<!DOCTYPE html><html lang="en"><head disabled="disabled"><title>title</title></head><body id="content"><main><button style="display: block; width: 20px">-</button><br>Test<button my-attribute="myValue">+</button><hr style="border: 200px solid blue" autocomplete="off"><div><div><span><a autofocus="autofocus">here</a></span></div></div></main></body></html>""" html'
 
       TS.describe "root node" do
             TS.it "root node is unchanged" do
                   liftEffect unsafeCreateEnviroment
                   let html = HE.div "test-div" $ HE.input [HA.id "t", HA.value "a"]
-                  state <- mountHtml' html
+                  void $ mountHtml' html
                   rootNode <- liftEffect $ FAD.querySelector "#mount-point"
                   TSA.shouldSatisfy rootNode DM.isJust
 

Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,3 @@`
`1`		`-'use strict';`
`2`		`-`
`3`	`1`	`let messageEventData = 5,`
`4`	`2`	`rawEventData = 6;`
`5`	`3`
Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,3 @@`
`1`		`-'use strict';`
`2`		`-`
`3`	`1`	`let styleData = 1,`
`4`	`2`	`classData = 2,`
`5`	`3`	`propertyData = 3,`
Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,3 @@`
`1`		`-'use strict';`
`2`		`-`
`3`	`1`	`let namespace = 'http://www.w3.org/2000/svg',`
`4`	`2`	`eventPrefix = '__flame_',`
`5`	`3`	`eventPostfix = 'updater';`
Original file line number	Diff line number	Diff line change
`@@ -213,7 +213,7 @@ main = AF.launchAff_ $ TSR.runSpec [consoleReporter] do`
`213`	`213`	`]`
`214`	`214`	`]`
`215`	`215`	`html' <- liftEffect $ FRS.render html`
`216`		`- TSA.shouldEqual """<html><head><title>title</title></head><body><main><button>-</button><br>Test<button>+</button><svg viewBox="0 0 23 0"><path d="234" /></svg><div><div><span><a>here</a></span></div></div></main></body></html>""" html'`
	`216`	`+ TSA.shouldEqual """<!DOCTYPE html><html><head><title>title</title></head><body><main><button>-</button><br>Test<button>+</button><svg viewBox="0 0 23 0"><path d="234" /></svg><div><div><span><a>here</a></span></div></div></main></body></html>""" html'`
`217`	`217`
`218`	`218`	`TS.it "nested nodes with attributes" do`
`219`	`219`	`let html = HE.html [HA.lang "en"] [`
`@@ -232,7 +232,7 @@ main = AF.launchAff_ $ TSR.runSpec [consoleReporter] do`
`232`	`232`	`]`
`233`	`233`	`]`
`234`	`234`	`html' <- liftEffect $ FRS.render html`
`235`		`- TSA.shouldEqual """<html lang="en"><head><title>title</title></head><body id="content"><main><button style="display: block; width: 20px">-</button><br>Test<button my-attribute="myValue">+</button><hr style="border: 200px solid blue"><div><div><span><a>here</a></span></div></div></main></body></html>""" html'`
	`235`	`+ TSA.shouldEqual """<!DOCTYPE html><html lang="en"><head><title>title</title></head><body id="content"><main><button style="display: block; width: 20px">-</button><br>Test<button my-attribute="myValue">+</button><hr style="border: 200px solid blue"><div><div><span><a>here</a></span></div></div></main></body></html>""" html'`
`236`	`236`
`237`	`237`	`TS.it "nested nodes with properties and attributes" do`
`238`	`238`	`let html = HE.html [HA.lang "en"] [`
`@@ -252,13 +252,13 @@ main = AF.launchAff_ $ TSR.runSpec [consoleReporter] do`
`252`	`252`	`]`
`253`	`253`	`]`
`254`	`254`	`html' <- liftEffect $ FRS.render html`
`255`		`- TSA.shouldEqual """<html lang="en"><head disabled="disabled"><title>title</title></head><body id="content"><main><button style="display: block; width: 20px">-</button><br>Test<button my-attribute="myValue">+</button><hr style="border: 200px solid blue" autocomplete="off"><div><div><span><a autofocus="autofocus">here</a></span></div></div></main></body></html>""" html'`
	`255`	`+ TSA.shouldEqual """<!DOCTYPE html><html lang="en"><head disabled="disabled"><title>title</title></head><body id="content"><main><button style="display: block; width: 20px">-</button><br>Test<button my-attribute="myValue">+</button><hr style="border: 200px solid blue" autocomplete="off"><div><div><span><a autofocus="autofocus">here</a></span></div></div></main></body></html>""" html'`
`256`	`256`
`257`	`257`	`TS.describe "root node" do`
`258`	`258`	`TS.it "root node is unchanged" do`
`259`	`259`	`liftEffect unsafeCreateEnviroment`
`260`	`260`	`let html = HE.div "test-div" $ HE.input [HA.id "t", HA.value "a"]`
`261`		`- state <- mountHtml' html`
	`261`	`+ void $ mountHtml' html`
`262`	`262`	`rootNode <- liftEffect $ FAD.querySelector "#mount-point"`
`263`	`263`	`TSA.shouldSatisfy rootNode DM.isJust`
`264`	`264`