vue-server - npm Package Compare versions

Comparing version 0.4.2 to 0.4.3

package.json

 {
   "name": "vue-server",
-  "version": "0.4.2",
+  "version": "0.4.3",
   "description": "Vue.js server side version",
@@ -5,0 +5,0 @@ "main": "index.js",

src/compiler/index.js

@@ -154,3 +154,2 @@ var htmlparser = require('htmlparser2');
 var vForValRE = /\((.+)\)/;
-var isNumber = /^-?\d+/;
 
@@ -346,10 +345,2 @@ // Converting raw HTML into special array-objects tree
 
-                                if (isNumber.test(expression)) {
-                                    element.dirs.for.value.static = [];
-
-                                    for (var i = 0; i < expression; i++) {
-                                        element.dirs.for.value.static.push(i);
-                                    }
-                                }
-
                                 repeatItems.push(element);
@@ -653,3 +644,3 @@ }
     });
-    parser.write(template);
+    parser.write(template.trim());
     parser.end();
@@ -656,0 +647,0 @@

src/renderer/builders.js

@@ -0,12 +1,6 @@
+var asset = require('./asset.js');
 var common = require('./common.js');
+var commonTagRE = /^(div|p|span|img|a|b|i|br|ul|ol|li|h1|h2|h3|h4|h5|h6|code|pre|table|th|td|tr|form|label|input|select|option|nav|article|section|header|footer)$/;
+var isNumber = /^-?\d+/;
 
-var tagsNotComponents = {
-    select: true,
-    input: true,
-    article: true,
-    main: true,
-    form: true,
-    label: true
-};
-
 var builders = {
@@ -19,46 +13,47 @@ build: function (vm, callback) {
 
-        // Case when VM rebuilding starts
-        // This option is passed through to stop building detached VMs
-        if (vm.$el.__buildingInterrupted) {
-            return;
-        }
+        process.nextTick(function () {
+            // Case when VM rebuilding starts
+            // This option is passed through to stop building detached VMs
+            if (vm.$el.__buildingInterrupted) {
+                return;
+            }
 
-        vm.$el._isReadyToBuild = true;
+            vm.$el._isReadyToBuild = true;
 
-        builders.buildElements(vm, vm.$el.inner);
+            builders.buildElements(vm, vm.$el.inner);
 
-        if (vm.__states.children.length) {
-            vm.$on('_vueServer.childVmReady', function () {
-                if (!vm.__states.children) {
-                    vm.__states.$logger.error('Something went wrong while building children VMs. Please report the error.');
-                    return;
-                }
-                vm.__states.childrenReadyCount++;
-
-                if (vm.__states.childrenReadyCount === vm.__states.children.length) {
-                    if (callback) {
-                        callback();
+            if (vm.__states.children.length) {
+                vm.$on('_vueServer.childVmReady', function () {
+                    if (!vm.__states.children) {
+                        vm.__states.$logger.error('Something went wrong while building children VMs. Please report the error.');
+                        return;
                     }
+                    vm.__states.childrenReadyCount++;
 
-                    vm.$emit('_vueServer.vmReady');
+                    if (vm.__states.childrenReadyCount === vm.__states.children.length) {
+                        if (callback) {
+                            callback();
+                        }
 
-                    if (vm.__states.parent) {
-                        vm.__states.parent.$emit('_vueServer.childVmReady');
+                        vm.$emit('_vueServer.vmReady');
+
+                        if (vm.__states.parent) {
+                            vm.__states.parent.$emit('_vueServer.childVmReady');
+                        }
+
+                        vm.$off('_vueServer.childVmReady');
                     }
-
-                    vm.$off('_vueServer.childVmReady');
+                });
+            } else {
+                if (callback) {
+                    callback();
                 }
-            });
-        } else {
-            if (callback) {
-                callback();
-            }
 
-            vm.$emit('_vueServer.vmReady');
+                vm.$emit('_vueServer.vmReady');
 
-            if (vm.__states.parent) {
-                vm.__states.parent.$emit('_vueServer.childVmReady');
+                if (vm.__states.parent) {
+                    vm.__states.parent.$emit('_vueServer.childVmReady');
+                }
             }
-        }
-
+        });
     },
@@ -97,4 +92,4 @@
                     if (name) {
-
-                        if (tagsNotComponents[element.name]) {
+                        var tag = element.name.toLowerCase();
+                        if (commonTagRE.test(tag) && tag !== 'component') {
                             vm.__states.$logger.debug(
@@ -228,9 +223,12 @@ 'Native tag "' + element.name + '" matched component name "' + name + '"', common.onLogMessage(vm)
         var array;
+        var type = typeof value;
 
         if (!value) {
             return value;
-        } else {
-            if (!Array.isArray(value)) {
-                array = [];
+        } else if (!Array.isArray(value)) {
+            array = [];
 
+            // If its an Object for iteration
+            if (type === 'object') {
+
                 for (var prop in value) {
@@ -242,5 +240,15 @@ array.push({
                 }
+            }
 
-                value = array;
+            // If its a Number
+            if (
+                (type === 'string' || type === 'number') &&
+                isNumber.test(value)
+            ) {
+                for (var i = 0; i < value; i++) {
+                    array.push(i);
+                }
             }
+
+            value = array;
         }
@@ -350,9 +358,2 @@
 
-        if (element.attribs['wait-for']) {
-            element.dirs.component.options.waitFor = element.attribs['wait-for'];
-        }
-
-        element.attribs.is = undefined;
-        element.attribs['wait-for'] = undefined;
-
         // If component exists
@@ -365,3 +366,4 @@ if (component) {
                 withReplaceData: null,
-                isComponent: true
+                isComponent: true,
+                componentName: componentName
             }, options);
@@ -372,8 +374,10 @@
 
+            var componentComposed = builders.getComponent(vm, component, componentName);
+
             // Async component
-            if (typeof component === 'function') {
+            if (!componentComposed) {
                 component(
                     function (data) {
-                        builders.getAsset(vm, 'components')[componentName] = data;
-                        builders.buildComponentContent(vm, element, options, data, componentName);
+                        options.component = builders.getComponent(vm, data, componentName);
+                        builders.buildComponentContent(vm, element, options);
                     },
@@ -385,3 +389,4 @@ function (error) {
             } else {
-                builders.buildComponentContent(vm, element, options, component, componentName);
+                options.component = componentComposed;
+                builders.buildComponentContent(vm, element, options);
             }
@@ -397,23 +402,30 @@
 
-    buildComponentContent: function (vm, element, options, component, componentName) {
-        if (!component.__composed) {
-            component.__composed = common.composeComponent(component, vm.$root.__states.mixin);
+    getComponent: function (vm, component, componentName) {
+        var composed;
+        if (typeof component === 'function') {
+            if (component.__isCtor) {
+                return component;
+            } else {
+                return false;
+            }
+        } else {
+            composed = asset.composeComponent(
+                vm.__states.$logger, component, vm.$root.__states.mixin
+            );
+            builders.getAsset(vm, 'components')[componentName] = composed;
+            return composed;
         }
+    },
 
-        options.component = {
-            rawVm: common.extend({}, component.__composed.rawVm),
-            options: component.__composed.options
-        };
-
+    buildComponentContent: function (vm, element, options, componentName) {
         // "wait-for" directive option (component waits for event before it shows)
-        if (element.dirs.component.options.waitFor) {
-            options.waitFor = element.dirs.component.options.waitFor;
+        if (element.attribs['wait-for']) {
+            options.waitFor = element.attribs['wait-for'];
+            element.attribs['wait-for'] = undefined;
         }
 
-        if (element.dirs.ref) {
-            options.ref = element.dirs.ref;
+        if (element.attribs.is) {
+            element.attribs.is = undefined;
         }
 
-        options.component.name = componentName;
-
         if (element.dirs.with) {
@@ -508,10 +520,4 @@ // If "v-with" directive value is single argument (Eg. v-with="cat") then data context
     buildForElements: function (vm, elements, element) {
-        var repeatData;
+        var repeatData = builders.getRepeatData(vm, element.dirs.for.value);
 
-        if (element.dirs.for.value.static) {
-            repeatData = element.dirs.for.value.static;
-        } else {
-            repeatData = builders.getRepeatData(vm, element.dirs.for.value);
-        }
-
         // If repeat data is exists
@@ -518,0 +524,0 @@ if (repeatData && repeatData.length) {

src/renderer/common.js

 var Path = require('./../parsers/path');
 
-var compiler = require('./../compiler');
-
-var excludeInstanceOptions = {
-    'data': true,
-    'methods': true,
-    'computed': true,
-    'props': true,
-    'el': true,
-    'elementDirective': true,
-    'parent': true,
-    'template': true,
-    'replace': true,
-    'created': true,
-    'createdBe': true,
-    'beforeCompile': true,
-    'compiled': true,
-    'compiledBe': true,
-    'activate': true,
-    'activateBe': true,
-    'ready': true,
-    'readyBe': true,
-    'attached': true,
-    'detached': true,
-    'beforeDestroy': true,
-    'destroyed': true,
-    'directives': true,
-    'filters': true,
-    'components': true,
-    'partials': true,
-    'transitions': true,
-    'inherit': true,
-    'events': true,
-    'watch': true,
-    'mixins': true,
-    'name': true
-};
-
 var common = {
@@ -48,6 +11,6 @@ getValue: function (vm, value) {
             } catch (e) {
-                vm.__states.$logger.warn('Error executing expression [begin]', common.onLogMessage(vm));
-                vm.__states.$logger.warn(e.toString());
-                vm.__states.$logger.warn(value.toString());
-                vm.__states.$logger.warn('Error executing expression [end]');
+                vm.__states.$logger.warn(
+                    'Error executing expression: ' + value.toString() + ' [' + e.toString() + ']',
+                    common.onLogMessage(vm)
+                );
             }
@@ -227,119 +190,2 @@ } else {
 
-    composeComponent: function (component, globalMixin) {
-        var options = {};
-        var rawVm = {};
-
-        options.methods = component.methods || {};
-
-        var instancePropsMap = common.getObjectPropNames(component);
-
-        // Walk through object-class properties and setting all functions to methods
-        for (var i = instancePropsMap.length - 1; i >= 0; i--) {
-            (function () {
-                var name = instancePropsMap[i],
-                    item = component[name];
-
-                if (excludeInstanceOptions[name]) {
-                    options[name] = item;
-                } else {
-                    if (typeof item === 'function') {
-                        options.methods[name] = item;
-                    } else {
-                        rawVm[name] = item;
-                    }
-                }
-            })();
-        }
-
-        // Global mixin via Vue.mixin = ...
-        if (globalMixin) {
-            options.mixins = options.mixins || [];
-            options.mixins = globalMixin.concat(options.mixins);
-        }
-
-        options.template = common.prepareTemplate(options.template, 'Component\'s template');
-
-        if (options.partials) {
-            for (var name in options.partials) {
-                options.partials[name] = common.prepareTemplate(
-                    options.partials[name],
-                    'Partial "' + name + '"'
-                );
-            }
-        }
-
-        return {options: options, rawVm: rawVm};
-    },
-
-    prepareTemplate: function (template, logName) {
-        var tplTypeof;
-
-        if (template) {
-            tplTypeof = typeof template;
-
-            if (tplTypeof === 'string') {
-                return compiler(template);
-            } else if (tplTypeof !== 'function') {
-                this.$logger.warn(logName + ' type is not valid (' + tplTypeof + ')');
-                return null;
-            }
-        } else {
-            this.$logger.debug(logName + ' is empty (' + tplTypeof + ')');
-        }
-
-        return template;
-    },
-
-    // Get ALL class properties
-    getObjectPropNames: function (object, isModern) {
-        if (isModern) {
-            return this.getObjectPropNamesModern(object);
-        } else {
-            return this.getObjectPropNamesLegacy(object);
-        }
-    },
-
-    getObjectPropNamesLegacy: function (object) {
-        var names = Object.keys(object);
-        var objectProto = Object.getPrototypeOf(object);
-
-        if (objectProto) {
-            names = names.concat(
-                this.getObjectPropNamesLegacy(objectProto)
-            );
-        }
-
-        return names;
-    },
-
-    getObjectPropNamesModern: function (object) {
-        var names = Object.keys(object).concat(gogo(object));
-
-        function gogo(obj) {
-            var objectProto = Object.getPrototypeOf(obj);
-            var protoNames;
-
-            if (objectProto && objectProto.__proto__) {
-                protoNames = Object.getOwnPropertyNames(objectProto).concat(gogo(objectProto));
-            }
-
-            if (protoNames) {
-                return protoNames;
-            } else {
-                return [];
-            }
-        }
-
-        var newNames = [];
-        for (var i = 0; i < names.length; i++) {
-            if (names[i] === 'constructor') {
-                continue;
-            }
-
-            newNames.push(names[i]);
-        }
-
-        return newNames;
-    },
-
     dashToCamelCase: function (value) {
@@ -346,0 +192,0 @@ return value.replace(/-(\w)/g, function (a, b) {

src/renderer/index.js

@@ -5,3 +5,3 @@ var log4js = require('log4js');
 
-var common = require('./common.js');
+var asset = require('./asset.js');
 var scope = require('./scope.js');
@@ -20,2 +20,44 @@ var compilers = require('./compilers.js');
 
+var initLogger = function (config, logger) {
+    return {
+        _config: config,
+        _logger: logger,
+        log: function () {
+            if (!this._config.silent) {
+                this._logger.debug.apply(this._logger, arguments);
+            }
+
+            return this;
+        },
+        debug: function () {
+            if (!this._config.silent && this._config.debug) {
+                this._logger.debug.apply(this._logger, arguments);
+            }
+
+            return this;
+        },
+        info: function () {
+            if (!this._config.silent && this._config.debug) {
+                this._logger.info.apply(this._logger, arguments);
+            }
+
+            return this;
+        },
+        warn: function () {
+            if (!this._config.silent) {
+                this._logger.warn.apply(this._logger, arguments);
+            }
+
+            return this;
+        },
+        error: function () {
+            if (!this._config.silent) {
+                this._logger.error.apply(this._logger, arguments);
+            }
+
+            return this;
+        }
+    };
+};
+
 var VueRender = function (logger) {
@@ -46,46 +88,2 @@ logger = logger || log4js.getLogger('[VueServer]');
 
-        this._initLogger = function (config, logger) {
-            return {
-                _config: config,
-                _logger: logger,
-                log: function () {
-                    if (!this._config.silent) {
-                        this._logger.debug.apply(this._logger, arguments);
-                    }
-
-                    return this;
-                },
-                debug: function () {
-                    if (!this._config.silent && this._config.debug) {
-                        this._logger.debug.apply(this._logger, arguments);
-                    }
-
-                    return this;
-                },
-                info: function () {
-                    if (!this._config.silent && this._config.debug) {
-                        this._logger.info.apply(this._logger, arguments);
-                    }
-
-                    return this;
-                },
-                warn: function () {
-                    if (!this._config.silent) {
-                        this._logger.warn.apply(this._logger, arguments);
-                    }
-
-                    return this;
-                },
-                error: function () {
-                    if (!this._config.silent) {
-                        this._logger.error.apply(this._logger, arguments);
-                    }
-
-                    return this;
-                }
-            };
-        };
-
-        this.logger = this._initLogger(this.config, this._logger);
-        common.$logger = this.logger;
         scope.$logger = this.logger;
@@ -95,9 +93,12 @@ renders.$logger = this.logger;
         if (!instance) {
-            that.logger.error('Can\'t initialize render: no root instance transmitted');
+            this.logger.error('Can\'t initialize render: no root instance transmitted');
             return this;
         }
 
+
+
         // Precompiling global partials
         for (var name in this.partials) {
-            this.partials[name] = common.prepareTemplate(
+            this.partials[name] = asset.compileTemplate(
+                this.logger,
                 this.partials[name],
@@ -136,3 +137,3 @@ 'Partial "' + name + '"'
             components: {},
-            component: common.composeComponent(instance, this.mixin),
+            component: asset.composeComponent(this.logger, instance, this.mixin),
             isComponent: true
@@ -172,5 +173,11 @@ });
 
+    VueRoot.extend = function (instance) {
+        if (instance) {
+            return asset.composeComponent(this.prototype.logger, instance, this.mixin);
+        }
+    };
+
     VueRoot.component = function (id, component) {
         if (!component) {
-            this.logger.debug('global component\'s content is empty: "' + id + '"');
+            this.prototype.logger.debug('global component\'s content is empty: "' + id + '"');
             return this;
@@ -186,3 +193,3 @@ }
         if (!filter) {
-            this.logger.debug('global filter\'s content is empty: "' + id + '"');
+            this.prototype.logger.debug('global filter\'s content is empty: "' + id + '"');
             return this;
@@ -198,3 +205,3 @@ }
         if (!partial) {
-            this.logger.debug('global partial\'s content is empty: "' + id + '"');
+            this.prototype.logger.debug('global partial\'s content is empty: "' + id + '"');
             return this;
@@ -232,2 +239,4 @@ }
 
+    VueRoot.prototype.logger = initLogger(VueRoot.config, logger);
+
     return VueRoot;
@@ -234,0 +243,0 @@ };

src/renderer/scope.js

@@ -13,7 +13,5 @@ var common = require('./common.js');
         var data = {};
-        var rawVm = {};
 
         if (contexts.isComponent) {
-            options = contexts.component.options;
-            rawVm = contexts.component.rawVm;
+            common.extend(options, new contexts.component());
 
@@ -36,3 +34,3 @@ // Inherit data to v-repeat items contexts
         // Init context
-        var vm = common.extend(rawVm, data, this.globalPrototype);
+        var vm = common.extend(data, this.globalPrototype);
         vm.__states = {};
@@ -88,2 +86,3 @@ vm.__states.parent = contexts.parent;
                 scope.setKeyElementInner(vm, tpl);
+
             // If threre are no parent, then we have root component
@@ -145,34 +144,35 @@ // Creating special container for root component
 
-        process.nextTick(function () {
+        builders.build(vm, function () {
             var isCompiledBePresent = false;
+            vm._isCompiled = true;
 
-            builders.build(vm, function () {
-                vm._isCompiled = true;
+            if (!vm.$options.activateBe && contexts.waitFor) {
+                vm.$on(contexts.waitFor, function () {
+                    scope.buildWithedData(vm, contexts);
+                    scope.pullPropsData(vm);
+                    scope.resetVmInstance(vm);
+                });
+            }
 
-                if (!vm.$options.activateBe && contexts.waitFor) {
-                    vm.$on(contexts.waitFor, function () {
-                        scope.buildWithedData(vm, contexts);
-                        scope.pullPropsData(vm);
-                        scope.resetVmInstance(vm);
-                    });
-                }
-
-                // Server Compiled mixins
-                if (vm.$options.mixins) {
-                    for (var i = 0; i < vm.$options.mixins.length; i++) {
-                        if (vm.$options.mixins[i].compiledBe) {
-                            isCompiledBePresent = true;
-                            vm.$options.mixins[i].compiledBe.call(vm);
-                        }
+            // Server Compiled mixins
+            if (vm.$options.mixins) {
+                for (var i = 0; i < vm.$options.mixins.length; i++) {
+                    if (vm.$options.mixins[i].compiledBe) {
+                        isCompiledBePresent = true;
+                        vm.$options.mixins[i].compiledBe.call(vm);
                     }
                 }
+            }
 
-                // Server Compiled hook
-                if (vm.$options.compiledBe) {
-                    isCompiledBePresent = true;
+            // Server Compiled hook
+            if (vm.$options.compiledBe) {
+                isCompiledBePresent = true;
+                process.nextTick(function () {
                     vm.$options.compiledBe.call(vm);
                     vm.$emit('hook:compiledBe');
-                }
+                });
+            }
 
-                if (vm.$options.activateBe) {
+            if (vm.$options.activateBe) {
+                process.nextTick(function () {
                     vm.$options.activateBe.call(vm, function () {
@@ -184,13 +184,13 @@ scope.buildWithedData(vm, contexts);
                     vm.$emit('hook:activateBe');
-                }
+                });
+            }
 
-                if (!contexts.waitFor && !vm.$options.activateBe) {
-                    // Experimental option
-                    if (isCompiledBePresent && vm !== vm.$root) {
-                        scope.resetVmInstance(vm);
-                    } else {
-                        vm._isReady = true;
-                    }
+            if (!contexts.waitFor && !vm.$options.activateBe) {
+                // Experimental option
+                if (isCompiledBePresent && vm !== vm.$root) {
+                    scope.resetVmInstance(vm);
+                } else {
+                    vm._isReady = true;
                 }
-            });
+            }
         });
@@ -221,4 +221,4 @@
             if (this.__states.VMsDetached && options.component && !options.repeatData) {
-                presentVm = this.__states.VMsDetached[options.element.id + options.component.name];
-                this.__states.VMsDetached[options.element.id + options.component.name] = undefined;
+                presentVm = this.__states.VMsDetached[options.element.id + options.componentName];
+                this.__states.VMsDetached[options.element.id + options.componentName] = undefined;
             }
@@ -256,5 +256,5 @@
 
-            if (options.ref) {
+            if (options.element.dirs.ref) {
                 (function () {
-                    var name = common.dashToCamelCase(options.ref.value);
+                    var name = common.dashToCamelCase(options.element.dirs.ref.value);
 
@@ -273,3 +273,3 @@ if (newVm.__states.isRepeat || newVm.__states.parent.__states.notPublic) {
                 this.__states.VMs = this.__states.VMs || {};
-                this.__states.VMs[options.element.id + options.component.name] = newVm;
+                this.__states.VMs[options.element.id + options.componentName] = newVm;
             }
@@ -327,7 +327,5 @@ };
         scope.setEventListeners(vm);
-        process.nextTick(function () {
-            builders.build(vm, function () {
-                vm._isReady = true;
-                vm.$root.$emit('_vueServer.tryBeginCompile');
-            });
+        builders.build(vm, function () {
+            vm._isReady = true;
+            vm.$root.$emit('_vueServer.tryBeginCompile');
         });
@@ -356,4 +354,2 @@ },
                     vm.$el.name = 'partial';
-                    vm.$el.attribs = {};
-                    vm.$el.dirs = {};
                     vm.$el.inner = tpl;
@@ -723,6 +719,4 @@ }
 
-        process.nextTick(function () {
-            builders.build(vm, function () {
-                vm._isReady = true;
-            });
+        builders.build(vm, function () {
+            vm._isReady = true;
         });
@@ -729,0 +723,0 @@

test/spec/globalAssets.spec.js

@@ -41,2 +41,3 @@ var cheerio = require('cheerio');
             '<div id="prototype">{{globalPrototypeValue}}</div>',
+            '<div id="extended-component"><extended></extended></div>',
         ].join(''),
@@ -47,2 +48,9 @@ data: {
 
+        components: {
+            extended: Vue.extend({
+                replace: true,
+                template: '<i>Yes it is</i>'
+            })
+        },
+
         compiledBe: function() {
@@ -79,2 +87,6 @@ this.globalPrototypeValue = this.$myMethod();
     });
+
+    it('component mounting through Vue.extend works', function () {
+        expect($('#extended-component').html()).toEqual('<i>Yes it is</i>');
+    });
 });

test/spec/replace.spec/replace.spec.js

@@ -24,2 +24,12 @@ var wrapComponent = require('./../wrapComponent.js');
             template: '<i>{{value}}</i><b>{{value}}</b>'
+        },
+
+        item: {
+            props: {
+                kk: null
+            },
+            data: function() {
+                return {val: 123}
+            },
+            template: '<div>{{val}}:{{kk}}</div><i>{{val}}:{{kk}}</i>'
         }
@@ -74,2 +84,6 @@ },
     });
+
+    it('a component should properly mount via width multiple top level elements inside its template', function () {
+        expect($('#key-els-multiple').html()).toEqual('<div>123:out</div><i>123:out</i>');
+    });
 });

test/spec/vFor.spec/vFor.spec.js

@@ -9,2 +9,3 @@ var wrapComponent = require('./../wrapComponent.js');
         return {
+            number: 3,
             vRepeat: {
@@ -273,6 +274,10 @@ parentValue: '',
 describe('v-for', function () {
-    it('on simple array to work fine', function () {
-        expect($('#simple').html()).toEqual('<i>1</i><i>3</i><i>5</i>');
+    it('on number to work fine', function () {
+        expect($('#number').html()).toEqual('<i>0</i><i>1</i>');
     });
 
+    it('on number from variable to work fine', function () {
+        expect($('#number-from-var').html()).toEqual('<i>0</i><i>1</i><i>2</i>');
+    });
+
     it('on simple array with explict index param definition to work fine', function () {
@@ -341,3 +346,3 @@ expect($('#simple-explict').html()).toEqual('<i>1</i><i>3</i><i>5</i>');
 
-    
+
 });
@@ -344,0 +349,0 @@

No alert changes

Improved metrics

Total package byte prevSize

364245

increased by0.76%

Number of package files

82

increased by5.13%

Lines of code

10170

increased by0.98%

No dependency changes