Added notes for the v4 release

CHANGELOG.md

@@ -3,6 +3,112 @@ CHANGELOG
 
 # Upgrade Guide
 
+## v3 to v4
+
+### Breaking changes
+
+- `Widget.prototype.render = function(input, out) { ... }` is no longer allowed. Use `Widget.prototype.rerender = function(input, out) { ... }` or `defineComponent(...)` instead (recommended).
+- NOTE: `this.widgets.foo` has been removed since `marko-widgets@^3`
+
+### New features
+
+- Simpler syntax for defining widget types:
+
+___Old:___
+
+```javascript
+function Widget() {
+    this.doSomething();
+}
+
+Widget.prototype = {
+    doSomething: function() {
+
+    }
+};
+
+module.exports = Widget;
+```
+
+___New:___
+
+```javascript
+module.exports = require('marko-widgets').defineWidget({
+    init: function() {
+        this.doSomething();
+    },
+
+    doSomething: function() {
+
+    }
+});
+```
+
+- Ability to define the _widget_ and the _renderer_ in the same JavaScript file:
+
+```javascript
+module.exports = require('marko-widgets').defineComponent({
+    template: require.resolve('./template.marko'),
+
+    getTemplateData: function(state, input) {
+        return {
+            hello: 'world'
+        };
+    },
+
+    init: function() {
+        this.doSomething();
+    },
+
+    doSomething: function() {
+
+    }
+});
+```
+
+- Support for stateful widgets (changing widget state causes a widget to be rerendered)
+
+```javascript
+module.exports = require('marko-widgets').defineComponent({
+    template: require.resolve('./template.marko'),
+
+    getInitialState: function(input) {
+        return {
+            size: input.size || 'normal'
+        };
+    },
+
+    getInitialBody: function(input) {
+        return input.label || input.renderBody;
+    },
+    getTemplateData: function(state, input) {
+        var rootAttrs = {};
+
+        var classParts = ['app-button'];
+
+        var type = 'button';
+
+        var size = state.size;
+        if (size !== 'normal') {
+            classParts.push('app-button-' + size);
+        }
+
+        rootAttrs['class'] = classParts.join(' ');
+
+        return {
+            type: type,
+            rootAttrs: rootAttrs
+        };
+    },
+    setSize: function(size) {
+        this.setState('size', size);
+    },
+    getSize: function() {
+        return this.state.size;
+    }
+});
+```
+
 ## v2 to v3
 
 With marko-widgets, `this.widgets.foo` is no longer support and `this.widgets` will be `null`. Instead, you should `this.getWidget('foo')`.
@@ -57,6 +163,21 @@ exports.renderer = function(input, out) {
 }
 ```
 
+# 4.x
+
+## 4.0.x
+
+### 4.0.1
+
+- Stateful widgets
+- New attributes: `w-preserve`, `w-preserve-body` and `w-body`
+- New Widget methods:
+    - `setState(name, value)`
+    - `setState(newState)`
+    - `replaceState(newState)`
+    - `setProps(newProps)`
+    - `setStateDirty(name)`
+
 # 3.x
 
 ## 3.0.x