From 36c4e2544f540f8b0da21c74683c5c87fcee4839 Mon Sep 17 00:00:00 2001 From: estrattonbailey 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`

${props}

- ${content} + ${MyComponent('Hello')}
` } 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 }