initialState > init, contrib #3

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'
       }
     },

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>
   `
 }

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
     }

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
     }