From 36c4e2544f540f8b0da21c74683c5c87fcee4839 Mon Sep 17 00:00:00 2001
From: estrattonbailey <ericstrattonbailey@gmail.com>
Date: Sat, 6 Jan 2018 19:14:04 -0500
Subject: [PATCH] initialState > init, contrib #3

---
 examples/sandbox/app/components/MyComponent.js   |  4 ++--
 examples/sandbox/app/pages/Home.js               |  4 +---
 packages/loll-component/README.md                | 16 ++++++++--------
 .../loll-component/dist/loll-component.es.js     | 10 +++++-----
 packages/loll-component/dist/loll-component.js   |  2 +-
 .../loll-component/dist/loll-component.umd.js    |  2 +-
 packages/loll-component/index.js                 | 12 ++++++------
 7 files changed, 24 insertions(+), 26 deletions(-)

diff --git a/examples/sandbox/app/components/MyComponent.js b/examples/sandbox/app/components/MyComponent.js
index c654209..85d031b 100644
--- a/examples/sandbox/app/components/MyComponent.js
+++ b/examples/sandbox/app/components/MyComponent.js
@@ -7,8 +7,8 @@ module.exports = connect(state => ({
   text: state.text
 }))(
   component({
-    initialState (props) {
-      return {
+    init (props) {
+      this.state = {
         title: 'Hello'
       }
     },
diff --git a/examples/sandbox/app/pages/Home.js b/examples/sandbox/app/pages/Home.js
index b0e6980..ea9b92a 100644
--- a/examples/sandbox/app/pages/Home.js
+++ b/examples/sandbox/app/pages/Home.js
@@ -4,8 +4,6 @@ const h = require('@loll/h')
 const MyComponent = require('../components/MyComponent.js')
 
 module.exports = function Home (props) {
-  const content = MyComponent('Hello')
-  console.log(content)
   return h`
     <div>
       <h1 css=${props === 'Home' ? {
@@ -14,7 +12,7 @@ module.exports = function Home (props) {
         color: 'palevioletred'
       }}>${props}</h1>
 
-      ${content}
+      ${MyComponent('Hello')}
     </div>
   `
 }
diff --git a/packages/loll-component/README.md b/packages/loll-component/README.md
index 5642957..e0e7fc4 100644
--- a/packages/loll-component/README.md
+++ b/packages/loll-component/README.md
@@ -26,8 +26,8 @@ Add state:
 ```javascript
 // MyComponent.js
 module.exports = component({
-  initialState (props) {
-    return {
+  init (props, state) {
+    this.state = {
       count: 0
     }
   },
@@ -44,8 +44,8 @@ Add methods:
 ```javascript
 // MyComponent.js
 module.exports = component({
-  initialState (props) {
-    return {
+  init (props, state) {
+    this.state = {
       count: 0
     }
   },
@@ -76,8 +76,8 @@ Prevent updating. Think `shouldComponentUpdate`. The below will never update:
 ```javascript
 // MyComponent.js
 module.exports = component({
-  initialState (props) {
-    return {
+  init (props, state) {
+    this.state = {
       count: 0
     }
   },
@@ -111,8 +111,8 @@ Async actions and incremental rendering:
 ```javascript
 // MyComponent.js
 module.exports = component({
-  initialState (props) {
-    return {
+  init (props, state) {
+    this.state = {
       loading: false,
       posts: props.posts
     }
diff --git a/packages/loll-component/dist/loll-component.es.js b/packages/loll-component/dist/loll-component.es.js
index 8aa6164..84c31f5 100644
--- a/packages/loll-component/dist/loll-component.es.js
+++ b/packages/loll-component/dist/loll-component.es.js
@@ -12,9 +12,8 @@ function merge(one, two) {
 module.exports = function Component(comp) {
     assert.ok(typeof comp === 'object', 'component is not an object');
     assert.ok(typeof comp.render === 'function', 'component.render() must be a function');
-    if (comp.update) {
-        assert.ok(typeof comp.update === 'function', 'component.update() must be a function');
-    }
+    if (comp.update) 
+        { assert.ok(typeof comp.update === 'function', 'component.update() must be a function'); }
     Object.assign(comp, {
         state: {},
         ref: null,
@@ -40,11 +39,12 @@ module.exports = function Component(comp) {
 
         assert.ok(typeof externalState === 'object', 'external state passed to component must be an object');
         if (!comp.ref) {
-            comp.state = Object.assign(externalState, comp.initialState ? comp.initialState(props) : {});
+            comp.init && comp.init(props, externalState);
+            comp.state = merge(externalState, comp.state);
             comp.ref = comp.render(props, comp.state);
             comp.props = props;
         }
-        if (!shouldUpdate(props, merge(comp.state, externalState))) {
+        if (!shouldUpdate(props, merge(externalState, comp.state))) {
             return comp.ref;
         }
         var newState = externalState;
diff --git a/packages/loll-component/dist/loll-component.js b/packages/loll-component/dist/loll-component.js
index 035b32a..964e412 100644
--- a/packages/loll-component/dist/loll-component.js
+++ b/packages/loll-component/dist/loll-component.js
@@ -1,2 +1,2 @@
-var t=require("nanomorph"),e=require("nanoassert");function n(t,e){var n={};for(var o in t)n[o]=t[o];for(var r in e)n[r]=e[r];return n}module.exports=function(o){e.ok("object"==typeof o,"component is not an object"),e.ok("function"==typeof o.render,"component.render() must be a function"),o.update&&e.ok("function"==typeof o.update,"component.update() must be a function"),Object.assign(o,{state:{},ref:null,setState:function(n){if(!r(o.props,o.state))return function(){};var a="function"==typeof n?n(o.state):n;return e.ok("object"==typeof a,"setState received a value that was not an object"),Object.assign(o.state,a),function(){t(o.ref,o.render(o.props,o.state))}}});function r(t,e){return!o.update||o.update(t,e)}return function(t,a){if(void 0===a&&(a={}),e.ok("object"==typeof a,"external state passed to component must be an object"),o.ref||(o.state=Object.assign(a,o.initialState?o.initialState(t):{}),o.ref=o.render(t,o.state),o.props=t),!r(t,n(o.state,a)))return o.ref;var s=a;o.props=t;for(var i in s)if(o.state[i]!==s[i]){o.setState(s)();break}return o.ref}};
+var t=require("nanomorph"),e=require("nanoassert");function n(t,e){var n={};for(var o in t)n[o]=t[o];for(var r in e)n[r]=e[r];return n}module.exports=function(o){e.ok("object"==typeof o,"component is not an object"),e.ok("function"==typeof o.render,"component.render() must be a function"),o.update&&e.ok("function"==typeof o.update,"component.update() must be a function"),Object.assign(o,{state:{},ref:null,setState:function(n){if(!r(o.props,o.state))return function(){};var a="function"==typeof n?n(o.state):n;return e.ok("object"==typeof a,"setState received a value that was not an object"),Object.assign(o.state,a),function(){t(o.ref,o.render(o.props,o.state))}}});function r(t,e){return!o.update||o.update(t,e)}return function(t,a){if(void 0===a&&(a={}),e.ok("object"==typeof a,"external state passed to component must be an object"),o.ref||(o.init&&o.init(t,a),o.state=n(a,o.state),o.ref=o.render(t,o.state),o.props=t),!r(t,n(a,o.state)))return o.ref;var s=a;o.props=t;for(var u in s)if(o.state[u]!==s[u]){o.setState(s)();break}return o.ref}};
 //# sourceMappingURL=loll-component.js.map
diff --git a/packages/loll-component/dist/loll-component.umd.js b/packages/loll-component/dist/loll-component.umd.js
index 7e1225f..37f05a3 100644
--- a/packages/loll-component/dist/loll-component.umd.js
+++ b/packages/loll-component/dist/loll-component.umd.js
@@ -1,2 +1,2 @@
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e():"function"==typeof define&&define.amd?define(e):e()}(0,function(){var t=require("nanomorph"),e=require("nanoassert");module.exports=function(n){e.ok("object"==typeof n,"component is not an object"),e.ok("function"==typeof n.render,"component.render() must be a function"),n.update&&e.ok("function"==typeof n.update,"component.update() must be a function"),Object.assign(n,{state:{},ref:null,setState:function(r){if(!o(n.props,n.state))return function(){};var a="function"==typeof r?r(n.state):r;return e.ok("object"==typeof a,"setState received a value that was not an object"),Object.assign(n.state,a),function(){t(n.ref,n.render(n.props,n.state))}}});function o(t,e){return!n.update||n.update(t,e)}return function(t,r){if(void 0===r&&(r={}),e.ok("object"==typeof r,"external state passed to component must be an object"),n.ref||(n.state=Object.assign(r,n.initialState?n.initialState(t):{}),n.ref=n.render(t,n.state),n.props=t),!o(t,function(t,e){var n={};for(var o in t)n[o]=t[o];for(var r in e)n[r]=e[r];return n}(n.state,r)))return n.ref;var a=r;n.props=t;for(var f in a)if(n.state[f]!==a[f]){n.setState(a)();break}return n.ref}}});
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e():"function"==typeof define&&define.amd?define(e):e()}(0,function(){var t=require("nanomorph"),e=require("nanoassert");function n(t,e){var n={};for(var o in t)n[o]=t[o];for(var r in e)n[r]=e[r];return n}module.exports=function(o){e.ok("object"==typeof o,"component is not an object"),e.ok("function"==typeof o.render,"component.render() must be a function"),o.update&&e.ok("function"==typeof o.update,"component.update() must be a function"),Object.assign(o,{state:{},ref:null,setState:function(n){if(!r(o.props,o.state))return function(){};var a="function"==typeof n?n(o.state):n;return e.ok("object"==typeof a,"setState received a value that was not an object"),Object.assign(o.state,a),function(){t(o.ref,o.render(o.props,o.state))}}});function r(t,e){return!o.update||o.update(t,e)}return function(t,a){if(void 0===a&&(a={}),e.ok("object"==typeof a,"external state passed to component must be an object"),o.ref||(o.init&&o.init(t,a),o.state=n(a,o.state),o.ref=o.render(t,o.state),o.props=t),!r(t,n(a,o.state)))return o.ref;var f=a;o.props=t;for(var u in f)if(o.state[u]!==f[u]){o.setState(f)();break}return o.ref}}});
 //# sourceMappingURL=loll-component.umd.js.map
diff --git a/packages/loll-component/index.js b/packages/loll-component/index.js
index 07479f3..3304a9a 100644
--- a/packages/loll-component/index.js
+++ b/packages/loll-component/index.js
@@ -11,9 +11,7 @@ function merge (one, two) {
 module.exports = function Component (comp) {
   assert.ok(typeof comp === 'object', 'component is not an object')
   assert.ok(typeof comp.render === 'function', 'component.render() must be a function')
-  if (comp.update) {
-    assert.ok(typeof comp.update === 'function', 'component.update() must be a function')
-  }
+  if (comp.update) assert.ok(typeof comp.update === 'function', 'component.update() must be a function')
 
   Object.assign(comp, {
     state: {},
@@ -43,16 +41,18 @@ module.exports = function Component (comp) {
     assert.ok(typeof externalState === 'object', 'external state passed to component must be an object')
 
     if (!comp.ref) {
-      comp.state = Object.assign(
+      comp.init && comp.init(props, externalState)
+
+      comp.state = merge(
         externalState,
-        comp.initialState ? comp.initialState(props) : {}
+        comp.state
       )
 
       comp.ref = comp.render(props, comp.state)
       comp.props = props
     }
 
-    if (!shouldUpdate(props, merge(comp.state, externalState))) {
+    if (!shouldUpdate(props, merge(externalState, comp.state))) {
       return comp.ref
     }