nullstack · Mortaro · Feb 27, 2022 · Feb 24, 2022 · Feb 24, 2022 · Feb 25, 2022
diff --git a/client/rerender.js b/client/rerender.js
@@ -122,7 +122,11 @@ export default function rerender(selector, current, next) {
     } else {
       for (let i = limit - 1; i > -1; i--) {
         if (typeof selector.childNodes[i] === 'undefined') {
-          throw new Error(`Virtual DOM does not match the DOM. Expected tag ${current.type} but instead found undefined. This error usually happens because of an invalid HTML hierarchy like nested forms or tables without tr.`);
+          console.error(
+            `${current.type.toUpperCase()} expected tag ${current.children[i].type.toUpperCase()} to be child at index ${i} but instead found undefined. This error usually happens because of an invalid HTML hierarchy or changes in comparisons after serialization.`,
+            selector
+          )
+          throw new Error('Virtual DOM does not match the DOM.')
           return;
         }
         rerender(selector.childNodes[i], current.children[i], next.children[i]);

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "nullstack",
-  "version": "0.14.1",
+  "version": "0.14.2",
   "description": "Full-stack Javascript Components for one-dev armies",
   "main": "nullstack.js",
   "author": "Mortaro",
@@ -35,6 +35,7 @@
     "ignore-loader": "^0.1.2",
     "mini-css-extract-plugin": "^2.4.5",
     "node-fetch": "2.6.7",
+    "node-polyfill-webpack-plugin": "^1.1.4",
     "nodemon-webpack-plugin": "^4.3.1",
     "purgecss-webpack-plugin": "^4.1.3",
     "raw-loader": "^4.0.2",

diff --git a/scripts/index.js b/scripts/index.js
@@ -22,7 +22,9 @@ function logCompiling(showCompiling) {
 
 function logTrace(stats, showCompiling) {
   if (stats.hasErrors()) {
-    const { moduleName: file, message } = stats.toJson('errors-only', { colors: true }).children[0].errors[0];
+    const response = stats.toJson('errors-only', { colors: true })
+    const error = response.errors[0] || response.children[0].errors[0];
+    const { moduleName: file, message } = error
     const [loader, ...trace] = message.split('\n');
     if (loader.indexOf('/nullstack/loaders') === -1) trace.unshift(loader)
     const currentTrace = trace.join(' ');

diff --git a/tests/src/Application.css b/tests/src/Application.css
@@ -1,7 +1,15 @@
+body {
+  background: url(favicon-96x96.png) no-repeat bottom right;
+}
+
 #application * {
   display: block;
 }
 
+:root {
+  --custom-var-value: red;
+}
+
 .class-\[custom\] {
   background: red;
 }
@@ -20,4 +28,8 @@
 
 .should-be-removed {
   background: yellow;
+}
+
+.\[color\:var\(--custom-var-value\)\] {
+  color: var(--custom-var-value);
 }
diff --git a/tests/src/Application.njs b/tests/src/Application.njs
@@ -27,6 +27,7 @@ import NestedProxy from './NestedProxy';
 import ParentComponent from './ParentComponent';
 import PersistentComponent from './PersistentComponent';
 import PluginAttributes from './PluginAttributes';
+import Polyfill from './Polyfill';
 import PublicServerFunctions from './PublicServerFunctions.njs';
 import PureComponents from './PureComponents';
 import Purge from './Purge';
@@ -109,6 +110,7 @@ class Application extends Nullstack {
         <Purge route="/purge" />
         <ComponentTernary route="/component-ternary" />
         <AnchorModifiers route="/anchor-modifiers" />
+        <Polyfill route="/polyfill" />
         <ErrorPage route="*" />
       </main>
     )

diff --git a/tests/src/ErrorOnChildNode.njs b/tests/src/ErrorOnChildNode.njs
@@ -1,35 +1,71 @@
 import Nullstack from 'nullstack';
 
+class ObjectId {
+
+  constructor(id) {
+    this.id = id
+  }
+
+  toJSON() {
+    return this.id;
+  }
+
+}
+
 class ErrorOnChildNode extends Nullstack {
+
   testValue = 'initial Value';
+
+  records = [
+    { _id: new ObjectId('a') },
+  ]
+
   testClick() {
     this.testValue = 'Changed Value';
   }
-  render() {
+
+  renderSerializationError() {
+    const records = this.records.filter((r) => r._id === 'a')
+    if (!records.length) return false;
+    return (
+      <div>
+        {records.map((record) => <div>{record._id}</div>)}
+      </div>
+    )
+  }
+
+  renderDOMError() {
+    return (
+      <table>
+        <thead>
+          <th>No.</th>
+          <th>Fisrt Name</th>
+          <th>Last Name</th>
+        </thead>
+        <tbody>
+          <tr>
+            <td>1</td>
+            <td>Jeanette</td>
+            <td>Penddreth</td>
+          </tr>
+          <tr>
+            <td>2</td>
+            <td>Giavani</td>
+            <td>Frediani</td>
+          </tr>
+        </tbody>
+      </table>
+    )
+  }
+
+  render({ params }) {
     return (
       <>
         <h1> Table Error </h1>
-        <table>
-          <thead>
-            <th>No.</th>
-            <th>Fisrt Name</th>
-            <th>Last Name</th>
-          </thead>
-          <tbody>
-            <tr>
-              <td>1</td>
-              <td>Jeanette</td>
-              <td>Penddreth</td>
-            </tr>
-            <tr>
-              <td>2</td>
-              <td>Giavani</td>
-              <td>Frediani</td>
-            </tr>
-          </tbody>
-        </table>
+        {params.serialization && <SerializationError />}
+        {params.dom && <DOMError />}
         <div id="text">
-        {this.testValue}
+          {this.testValue}
         </div>
         <button id="buttonTest" onclick={this.testClick}> Change Value </button>
       </>

diff --git a/tests/src/ErrorOnChildNode.test.js b/tests/src/ErrorOnChildNode.test.js
@@ -1,14 +1,32 @@
-beforeAll(async () => {
-  await page.goto('http://localhost:6969/error-on-child-node');
-});
+describe('ErrorOnChildNode dom', () => {
 
-describe('Error when ChildNode is undefined', () => {
+  let error;
 
-  test('Should be able to click on button', async () => {
-    page.on("console", async (msg) => {
-      expect(msg.text()).toMatch('Virtual DOM does not match the DOM. Expected tag thead but instead found undefined. This error usually happens because of an invalid HTML hierarchy like nested forms or tables without tr.');
-      await page.click('[id=buttonTest]');
-      await page.waitForSelector('[id=text]');
+  beforeAll(async () => {
+    jest.spyOn(console, 'error').mockImplementation((message) => error = message);
+    await page.goto('http://localhost:6969/error-on-child-node?dom=true');
+  });
+
+  test('should log that the dom is invalid', async () => {
+    page.on("console", async () => {
+      expect(error).toMatch('THEAD expected tag TH to be child at index 2 but instead found undefined. This error usually happens because of an invalid HTML hierarchy or changes in comparisons after serialization.');
+    })
+  });
+
+})
+
+describe('ErrorOnChildNode serialization', () => {
+
+  let error;
+
+  beforeAll(async () => {
+    jest.spyOn(console, 'error').mockImplementation((message) => error = message);
+    await page.goto('http://localhost:6969/error-on-child-node?serialization=true');
+  });
+
+  test('Should log that the serialization missmatches the server dom', async () => {
+    page.on("console", async () => {
+      expect(error).toMatch('DIV expected tag DIV to be child at index 0 but instead found undefined. This error usually happens because of an invalid HTML hierarchy or changes in comparisons after serialization.');
     })
   });
 

diff --git a/tests/src/Polyfill.njs b/tests/src/Polyfill.njs
@@ -0,0 +1,65 @@
+import assert from 'assert';
+import buffer from 'buffer';
+import console from 'console';
+import constants from 'constants';
+import crypto from 'crypto';
+import domain from 'domain';
+import events from 'events';
+import http from 'http';
+import https from 'https';
+import Nullstack from 'nullstack';
+import os from 'os';
+import path from 'path';
+import process from 'process';
+import punycode from 'punycode';
+import querystring from 'querystring';
+import stream from 'stream';
+import stringDecoder from 'string_decoder';
+import sys from 'sys';
+import timers from 'timers';
+import tty from 'tty';
+import url from 'url';
+import util from 'util';
+import vm from 'vm';
+import zlib from 'zlib';
+
+class Polyfill extends Nullstack {
+
+  async hydrate() {
+    this.buffer = Buffer.from("nullstack").toString()
+  }
+
+  render() {
+    return (
+      <div
+        data-buffer-global={this.buffer}
+        data-assert={typeof assert}
+        data-buffer={typeof buffer}
+        data-console={typeof console}
+        data-constants={typeof constants}
+        data-crypto={typeof crypto}
+        data-domain={typeof domain}
+        data-events={typeof events}
+        data-http={typeof http}
+        data-https={typeof https}
+        data-os={typeof os}
+        data-path={typeof path}
+        data-punycode={typeof punycode}
+        data-process={typeof process}
+        data-querystring={typeof querystring}
+        data-stream={typeof stream}
+        data-string-decoder={typeof stringDecoder}
+        data-sys={typeof sys}
+        data-timers={typeof timers}
+        data-tty={typeof tty}
+        data-url={typeof url}
+        data-util={typeof util}
+        data-vm={typeof vm}
+        data-zlib={typeof zlib}
+      > Polyfill </div>
+    )
+  }
+
+}
+
+export default Polyfill;