diff --git a/packages/moon/dist/moon.js b/packages/moon/dist/moon.js index f5f03d19..c00638dd 100644 --- a/packages/moon/dist/moon.js +++ b/packages/moon/dist/moon.js @@ -718,102 +718,29 @@ } /** - * Holds a list of transforms to execute over multiple frames. - */ - - var transforms; - /** - * Executes the list of global transforms over multiple frames. - */ - - function transformAll() { - var timeStart = performance.now(); - var transform = transforms; - - do { - // Pause execution after about eight milliseconds. - if (performance.now() - timeStart >= 8) { - break; - } - - transform(); - } while ((transform = transform.next) !== undefined); // Set all transforms to either be empty or start directly after the - // last-executed transform. - - - transforms = transform; // If all transforms weren't executed yet, yield back to the browser and - // continue in the next frame. - - if (transforms !== undefined) { - requestAnimationFrame(transformAll); - } - } - /** - * Transforms data to the required data for the view. The required data - * consists of the expressions inside of a view that are enclosed in curly - * braces. These transforms are done over multiple frames to give the browser - * time to process other events. After they are processed, the `next` function - * is called. - * - * @param {Function} next - */ - - - function transform(next) { - var _this = this; - - // `next` acts like a transform but updates the view instead. - this.view.transforms.next = function () { - _this.emit("transform"); - - next(); - }; - - if (transforms === undefined) { - // If there are no transforms, begin processing them. - transforms = this.view.transforms; - requestAnimationFrame(transformAll); - } else { - // If they are already being processed, add more to be processed. - transforms.next = this.view.transforms; - } - } - /** - * Creates a view mounted on the given root element after processing - * transforms. + * Creates a view mounted on the given root element. * * @param {Node} root */ - function create(root) { - var _this2 = this; - - this.transform(function () { - _this2.view.create(root); - - _this2.emit("create"); - }); + this.view.create(root); + this.emit("create"); } /** - * Updates data, transforms it, and then updates the view. + * Updates data and the view. * * @param {Object} data */ function update(data) { - var _this3 = this; - for (var key in data) { this[key] = data[key]; } - this.transform(function () { - _this3.view.update(); - - _this3.emit("update"); - }); + this.view.update(); + this.emit("update"); } /** * Destroys the view. @@ -898,7 +825,7 @@ * The data must have a `view` property with a string template or precompiled * functions. * - * Optional `onTransform`, `onCreate`, `onUpdate`, and `onDestroy` hooks can be + * Optional `onCreate`, `onUpdate`, and `onDestroy` hooks can be * in the data and are called when their corresponding event occurs. * * The rest of the data is custom starting state that will be modified as the @@ -910,7 +837,6 @@ * @param {string} [data.name="Root"] * @param {Node|string} [data.root] * @param {Object|string} data.view - * @param {Function} [data.onTransform] * @param {Function} [data.onCreate] * @param {Function} [data.onUpdate] * @param {Function} [data.onDestroy] @@ -935,25 +861,18 @@ // aren't required. - var onTransform = data.onTransform; var onCreate = data.onCreate; var onUpdate = data.onUpdate; var onDestroy = data.onDestroy; - delete data.onTransform; delete data.onCreate; delete data.onUpdate; delete data.onDestroy; data.events = { - transform: [], create: [], update: [], destroy: [] }; - if (onTransform !== undefined) { - data.events.transform.push(onTransform); - } - if (onCreate !== undefined) { data.events.create.push(onCreate); } @@ -972,7 +891,6 @@ } MoonComponent.prototype = data; - MoonComponent.prototype.transform = transform; MoonComponent.prototype.create = create; MoonComponent.prototype.update = update; MoonComponent.prototype.destroy = destroy; diff --git a/packages/moon/dist/moon.min.js b/packages/moon/dist/moon.min.js index 37b408b6..e0a227d7 100644 --- a/packages/moon/dist/moon.min.js +++ b/packages/moon/dist/moon.min.js @@ -4,4 +4,4 @@ * Released under the MIT License * https://kbrsh.github.io/moon */ -!function(e,t){"undefined"==typeof module?e.Moon=t():module.exports=t()}(this,function(){"use strict";var k=/<([\w\d-_]+)([^>]*?)(\/?)>/g,O=/\s*([\w\d-_]*)(?:=(?:("[\w\d-_]*"|'[\w\d-_]*')|{([\w\d-_]*)}))?/g;function t(e){e=e.trim();for(var t=[],n=0;n",n+2),a=e.slice(n+2,i);0,t.push({type:"tagClose",value:a}),n=i+1;continue}if("!"===o&&"-"===e[n+2]&&"-"===e[n+3]){var s=e.indexOf("--\x3e",n+4);0,n=s+3;continue}k.lastIndex=n;var u=k.exec(e);0;for(var l=u[0],f=u[1],c=u[2],v=u[3],m={},d=void 0;null!==(d=O.exec(c));){var p=d[0],h=d[1],y=d[2],x=d[3];0===p.length?O.lastIndex+=1:m[h]=void 0===x?y:x}t.push({type:"tagOpen",value:f,attributes:m,closed:"/"===v}),n+=l.length}else if("{"===r){var g="";for(n+=1;n]*?)(\/?)>/g,O=/\s*([\w\d-_]*)(?:=(?:("[\w\d-_]*"|'[\w\d-_]*')|{([\w\d-_]*)}))?/g;function t(e){e=e.trim();for(var t=[],n=0;n",n+2),a=e.slice(n+2,o);0,t.push({type:"tagClose",value:a}),n=o+1;continue}if("!"===i&&"-"===e[n+2]&&"-"===e[n+3]){var u=e.indexOf("--\x3e",n+4);0,n=u+3;continue}k.lastIndex=n;var l=k.exec(e);0;for(var s=l[0],c=l[1],v=l[2],f=l[3],m={},p=void 0;null!==(p=O.exec(v));){var d=p[0],h=p[1],y=p[2],x=p[3];0===d.length?O.lastIndex+=1:m[h]=void 0===x?y:x}t.push({type:"tagOpen",value:c,attributes:m,closed:"/"===f}),n+=s.length}else if("{"===r){var g="";for(n+=1;n= 8) { - break; - } - - transform(); - } while((transform = transform.next) !== undefined); - - // Set all transforms to either be empty or start directly after the - // last-executed transform. - transforms = transform; - - // If all transforms weren't executed yet, yield back to the browser and - // continue in the next frame. - if (transforms !== undefined) { - requestAnimationFrame(transformAll); - } -} - -/** - * Transforms data to the required data for the view. The required data - * consists of the expressions inside of a view that are enclosed in curly - * braces. These transforms are done over multiple frames to give the browser - * time to process other events. After they are processed, the `next` function - * is called. - * - * @param {Function} next - */ -function transform(next) { - // `next` acts like a transform but updates the view instead. - this.view.transforms.next = () => { - this.emit("transform"); - next(); - }; - - if (transforms === undefined) { - // If there are no transforms, begin processing them. - transforms = this.view.transforms; - requestAnimationFrame(transformAll); - } else { - // If they are already being processed, add more to be processed. - transforms.next = this.view.transforms; - } -} - -/** - * Creates a view mounted on the given root element after processing - * transforms. + * Creates a view mounted on the given root element. * * @param {Node} root */ function create(root) { - this.transform(() => { - this.view.create(root); - this.emit("create"); - }); + this.view.create(root); + this.emit("create"); } /** - * Updates data, transforms it, and then updates the view. + * Updates data and the view. * * @param {Object} data */ @@ -86,10 +25,8 @@ function update(data) { this[key] = data[key]; } - this.transform(() => { - this.view.update(); - this.emit("update"); - }); + this.view.update(); + this.emit("update"); } /** @@ -171,7 +108,7 @@ function emit(type, data) { * The data must have a `view` property with a string template or precompiled * functions. * - * Optional `onTransform`, `onCreate`, `onUpdate`, and `onDestroy` hooks can be + * Optional `onCreate`, `onUpdate`, and `onDestroy` hooks can be * in the data and are called when their corresponding event occurs. * * The rest of the data is custom starting state that will be modified as the @@ -183,7 +120,6 @@ function emit(type, data) { * @param {string} [data.name="Root"] * @param {Node|string} [data.root] * @param {Object|string} data.view - * @param {Function} [data.onTransform] * @param {Function} [data.onCreate] * @param {Function} [data.onUpdate] * @param {Function} [data.onDestroy] @@ -207,27 +143,20 @@ export default function Moon(data) { // Create default events at the beginning so that checks before calling them // aren't required. - const onTransform = data.onTransform; const onCreate = data.onCreate; const onUpdate = data.onUpdate; const onDestroy = data.onDestroy; - delete data.onTransform; delete data.onCreate; delete data.onUpdate; delete data.onDestroy; data.events = { - transform: [], create: [], update: [], destroy: [] }; - if (onTransform !== undefined) { - data.events.transform.push(onTransform); - } - if (onCreate !== undefined) { data.events.create.push(onCreate); } @@ -245,7 +174,6 @@ export default function Moon(data) { this.view = view(); } MoonComponent.prototype = data; - MoonComponent.prototype.transform = transform; MoonComponent.prototype.create = create; MoonComponent.prototype.update = update; MoonComponent.prototype.destroy = destroy;