Keep component state immutable when using setState

1. Updated how setState works when using a callback.
2. The prevState is now a copy of the original component state.
3. This means that callback must return prevState for component state to be updated.
4. This, of course, will also trigger a re-render of the component, if state did change.
5. Refactored component update method to throttle updates at intervals of 16.66 milliseconds (60 frames per second).
6. Updated component.html test for setState changes.

Author: Wobbabits

dist/composi.js

@@ -1,4 +1,4 @@
-import { isObject, isSameNode, mixin } from './utils'
+import { isObject, EMPTY_OBJECT, EMPTY_ARRAY, isSameNode, mixin } from './utils'
 import { patch } from './vdom'
 
 /**
@@ -216,7 +216,7 @@ export class Component {
    */
   set state(data) {
     this[dataStore] = data
-    setTimeout(() => this.update())
+    setTimeout(() => this.update(), 1000 / 60)
   }
 
   /**
@@ -232,11 +232,19 @@ export class Component {
    */
   setState(data) {
     if (typeof data === 'function') {
-      const state = data.call(this, this.state)
-      if (state) this.state = state
+      let copyOfState
+      if (isObject(this.state)) {
+        copyOfState = mixin(EMPTY_OBJECT, this.state)
+      } else if (Array.isArray(this.state)) {
+        copyOfState = EMPTY_ARRAY.concat(EMPTY_ARRAY, this.state)
+      } else {
+        copyOfState = this.state
+      }
+      const newState = data.call(this, copyOfState)
+      if (newState) this.state = newState
     } else if (isObject(this.state) && isObject(data)) {
-      const state = this.state
-      this.state = mixin(state, data)
+      const newState = mixin(this.state, data)
+      this.state = newState
     } else {
       this.state = data
     }

dist/composi.js.gzip

@@ -16,6 +16,12 @@ export const SVG_NS = 'http://www.w3.org/2000/svg'
  */
 export const EMPTY_OBJECT = {}
 
+/**
+ * An empty array. Used for access to array methods.
+ * @type {any[]} EMPTY_ARRAY
+ */
+export const EMPTY_ARRAY = []
+
 /**
  * Combine two objects, merging the second into the first. Any properties already existing in the first will be replaced by those of the second. Any properties in the second not in the first will be added to it.
  * @param {Object.<string, any>} firstObject

dist/composi.js.map

@@ -1,6 +1,6 @@
 {
   "name": "composi",
-  "version": "2.6.4",
+  "version": "2.6.5",
   "description": "A JavaScript library for creating websites, PWAs and hybrid apps.",
   "main": "index.js",
   "scripts": {

lib/component.js

@@ -1,5 +1,12 @@
 /* Bootstrap 4 Reset */
 
+/*!
+ * Bootstrap Reboot v4.1.3 (https://getbootstrap.com/)
+ * Copyright 2011-2018 The Bootstrap Authors
+ * Copyright 2011-2018 Twitter, Inc.
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
+ * Forked from Normalize.css, licensed MIT (https://github.com/necolas/normalize.css/blob/master/LICENSE.md)
+ */
 *,
 *::before,
 *::after {
@@ -12,31 +19,30 @@ html {
   -webkit-text-size-adjust: 100%;
   -ms-text-size-adjust: 100%;
   -ms-overflow-style: scrollbar;
-  -webkit-tap-highlight-color: transparent;
-  font-size: 62.5%;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
 
 @-ms-viewport {
   width: device-width;
 }
 
-article, aside, dialog, figcaption, figure, footer, header, hgroup, main, nav, section {
+article, aside, figcaption, figure, footer, header, hgroup, main, nav, section {
   display: block;
 }
 
 body {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-  font-size: 1.4rem;
-  font-weight: normal;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  font-size: 1rem;
+  font-weight: 400;
   line-height: 1.5;
   color: #212529;
   text-align: left;
   background-color: #fff;
 }
 
 [tabindex="-1"]:focus {
-  outline: none !important;
+  outline: 0 !important;
 }
 
 hr {
@@ -47,7 +53,7 @@ hr {
 
 h1, h2, h3, h4, h5, h6 {
   margin-top: 0;
-  margin-bottom: .5rem;
+  margin-bottom: 0.5rem;
 }
 
 p {
@@ -59,7 +65,7 @@ abbr[title],
 abbr[data-original-title] {
   text-decoration: underline;
   -webkit-text-decoration: underline dotted;
-          text-decoration: underline dotted;
+  text-decoration: underline dotted;
   cursor: help;
   border-bottom: 0;
 }
@@ -85,7 +91,7 @@ ul ol {
 }
 
 dt {
-  font-weight: bold;
+  font-weight: 700;
 }
 
 dd {
@@ -143,7 +149,7 @@ a:not([href]):not([tabindex]) {
   text-decoration: none;
 }
 
-a:not([href]):not([tabindex]):focus, a:not([href]):not([tabindex]):hover {
+a:not([href]):not([tabindex]):hover, a:not([href]):not([tabindex]):focus {
   color: inherit;
   text-decoration: none;
 }
@@ -156,7 +162,7 @@ pre,
 code,
 kbd,
 samp {
-  font-family: monospace, monospace;
+  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
   font-size: 1em;
 }
 
@@ -176,21 +182,9 @@ img {
   border-style: none;
 }
 
-svg:not(:root) {
+svg {
   overflow: hidden;
-}
-
-a,
-area,
-button,
-[role="button"],
-input:not([type=range]),
-label,
-select,
-summary,
-textarea {
-  -ms-touch-action: manipulation;
-  touch-action: manipulation;
+  vertical-align: middle;
 }
 
 table {
@@ -200,7 +194,7 @@ table {
 caption {
   padding-top: 0.75rem;
   padding-bottom: 0.75rem;
-  color: #868e96;
+  color: #6c757d;
   text-align: left;
   caption-side: bottom;
 }
@@ -211,14 +205,11 @@ th {
 
 label {
   display: inline-block;
-  margin-bottom: .5rem;
+  margin-bottom: 0.5rem;
 }
 
 button {
   border-radius: 0;
-  border: solid 1px #ccc;
-  background-color: #ccc;
-  overflow: hidden;
 }
 
 button:focus {
@@ -274,6 +265,10 @@ input[type="datetime-local"],
 input[type="month"] {
   -webkit-appearance: listbox;
 }
+input[type='text'],
+input[type='number'] {
+  border: solid 1px #ccc;
+}
 
 textarea {
   overflow: auto;
@@ -329,6 +324,7 @@ output {
 
 summary {
   display: list-item;
+  cursor: pointer;
 }
 
 template {
@@ -339,16 +335,6 @@ template {
   display: none !important;
 }
 
-html, body, h1, h2, h3, h4, h5, h6, p, ol, ul, li, dl,
-dt, dd, blockquote, address, table {
-  margin: 0;
-  padding: 0;
-}
-
-* {
-  font-weight: 100;
-}
-
 
 /****************/
 /* Local Styles */

lib/utils.js

@@ -35,8 +35,8 @@ <h1>Mocha Tests - Composi Component Class</h1>
   <script>
 
     const {h, Component} = composi
-    let should = chai.should()
-    let expect = chai.expect
+    const should = chai.should()
+    const expect = chai.expect
 
     describe('Create Component Instance', function() {
       let componentDidMount = false;
@@ -302,7 +302,7 @@ <h1>Mocha Tests - Composi Component Class</h1>
       })
 
 
-      it('On update, list should have four children', function(done) {
+      it('After setting state, list should have four children', function(done) {
         setTimeout(function() {
           list2.setState(prevState => {
             prevState.push('Onions')
@@ -312,13 +312,30 @@ <h1>Mocha Tests - Composi Component Class</h1>
         }, 300)
         done()
       })
-      it('On update, last list item should contain "Onions"', function(done) {
+      it('After setting state, last list item should contain "Onions"', function(done) {
         setTimeout(function() {
           expect(listEl.children[4].textContent.trim()).to.equal('Onions')
         }, 400)
         done()
       })
 
+      it('When setting state, original state should remain immutable.', function(done) {
+        setTimeout(function() {
+          // prevState should be a copy of the component's state.
+          // That means changes to it should not affect the component's state.
+          // Here we do not return prevState, preventing it from updating original state with changes.
+          let newState = []
+          list2.setState(prevState => {
+            prevState.push('new stuff')
+            newState = prevState
+          })
+          // Since we never returned prevState above, the component's original state should remain unchanged:
+          expect(JSON.stringify(list2.state)).to.equal(JSON.stringify(['Potatoes', 'Tomatoes', 'Carrots', 'Peas', 'Onions']))
+          // But the changes to prevState should be as follows:
+          expect(JSON.stringify(newState)).to.equal(JSON.stringify(['Potatoes', 'Tomatoes', 'Carrots', 'Peas', 'Onions', 'new stuff']))
+        }, 600)
+        done()
+      })
 
 
       it('Component lifecycle methods "componentWillUpdate" and "componentDidUpdate" should run when component state is updated', function(done) {