this... works... but idk

geelen · Jul 31, 2017 · 641b638 · 641b638 · superhighfives · Jul 31, 2017
1 parent bcab1e4
commit 641b638
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 9 deletions.
diff --git a/src/index.js b/src/index.js
@@ -6,18 +6,19 @@ export const IS_REACT_SNAPSHOT = navigator.userAgent.match(/Node\.js/i) && windo
 const state = {
   requests: [],
   data: window.react_snapshot_state || {},
+  count: 0
 }
-let count = 0
 
 export const render = (rootComponent, domElement) => {
+  window.rootComponent = rootComponent
   ReactDOM.render(rootComponent, domElement)
   if (IS_REACT_SNAPSHOT) {
-    window.react_snapshot_render(domElement, state)
+    window.react_snapshot_render(domElement, state, rootComponent)
   }
 }
 
 const _snapshot = (func, repeat) => {
-  const i = count++
+  const i = state.count++
   const existing = state.data[i]
   if (existing) {
     const { success, failure } = existing

diff --git a/src/snapshot.js b/src/snapshot.js
@@ -1,7 +1,11 @@
 /* Wraps a jsdom call and returns the full page */
 
 import jsdom from 'jsdom'
-import * as ReactMarkupChecksum from 'react-dom/lib/ReactMarkupChecksum'
+//import * as ReactMarkupChecksum from 'react-dom/lib/ReactMarkupChecksum'
+//import escapeTextContentForBrowser from 'react-dom/lib/escapeTextContentForBrowser'
+//import adler32 from 'react-dom/lib/adler32'
+//const TEXT_NODE = 3
+import ReactDOMServer from 'react-dom/server'
 
 export default (protocol, host, path, delay) => {
   return new Promise((resolve, reject) => {
@@ -24,16 +28,16 @@ export default (protocol, host, path, delay) => {
       virtualConsole: jsdom.createVirtualConsole().sendTo(console),
       created: (err, window) => {
         if (err) reject(err)
-        window.react_snapshot_render = (element, state) => {
-          render_called = { element, state }
+        window.react_snapshot_render = (element, state, rootComponent) => {
+          render_called = { element, state, rootComponent }
         }
       },
       done: (err, window) => {
         if (!render_called) {
           return reject("'render' from react-snapshot was never called. Did you replace the call to ReactDOM.render()?")
         }
 
-        const { element, state } = render_called
+        const { element, state, rootComponent } = render_called
 
         const next = () => {
           const shift = state.requests.shift()
@@ -43,8 +47,29 @@ export default (protocol, host, path, delay) => {
         new Promise(res => setTimeout(res, delay))
           .then(next)
           .then(() => {
-            console.log(state.data)
-            element.outerHTML = ReactMarkupChecksum.addChecksumToMarkup(element.outerHTML)
+            // This approach is really difficult to get working reliably
+
+            //Array.from(element.querySelectorAll('*')).forEach(el => {
+            //  const instance_key = Object.keys(el).find(k => k.startsWith('__reactInternalInstance'))
+            //  if (instance_key) el.setAttribute('data-reactid', el[instance_key]._domID)
+            //  if (el.hasChildNodes()) {
+            //    for (let i = 0; i < el.childNodes.length; i++) {
+            //      const tn = el.childNodes[i]
+            //      if (tn.nodeType === TEXT_NODE) tn.data = escapeTextContentForBrowser(tn.textContent)
+            //    }
+            //  }
+            //})
+            //
+
+            //const markup = element.innerHTML
+            //console.log(adler32(markup))
+            //console.log(markup)
+            //element.innerHTML = ReactMarkupChecksum.addChecksumToMarkup(markup)
+
+            // This approach is much more reliable but is it too confusing??
+            state.count = 0
+            element.innerHTML = ReactDOMServer.renderToString(rootComponent)
+
             window.document.body.insertAdjacentHTML('afterBegin', `
               <script>window.react_snapshot_state = ${JSON.stringify(state.data)};</script>
             `)