melody-runtime - npm Package Compare versions

Comparing version 1.2.0-commit.6a9d8668 to 1.2.0-commit.82e60495

lib/index.esm.js

@@ -13,2 +13,3 @@ import _isString from 'lodash/isString';
 import _isNumber from 'lodash/isNumber';
+import { enqueueComponent, link } from 'melody-idom';
 
@@ -894,2 +895,112 @@ /**
 
+var classCallCheck = function (instance, Constructor) {
+  if (!(instance instanceof Constructor)) {
+    throw new TypeError("Cannot call a class as a function");
+  }
+};
+
+var createClass = function () {
+  function defineProperties(target, props) {
+    for (var i = 0; i < props.length; i++) {
+      var descriptor = props[i];
+      descriptor.enumerable = descriptor.enumerable || false;
+      descriptor.configurable = true;
+      if ("value" in descriptor) descriptor.writable = true;
+      Object.defineProperty(target, descriptor.key, descriptor);
+    }
+  }
+
+  return function (Constructor, protoProps, staticProps) {
+    if (protoProps) defineProperties(Constructor.prototype, protoProps);
+    if (staticProps) defineProperties(Constructor, staticProps);
+    return Constructor;
+  };
+}();
+
+var AsyncComponent = function () {
+    function AsyncComponent() {
+        classCallCheck(this, AsyncComponent);
+
+        this.promisedComponent = null;
+        this._el = null;
+        this.refs = Object.create(null);
+        this.props = null;
+        this.resolvedComponent = null;
+        this.alreadyUnmounted = false;
+        this.isLoading = false;
+        this.loadingError = null;
+    }
+
+    AsyncComponent.prototype.apply = function apply(props) {
+        var _this = this;
+
+        this.props = props;
+        var promisedComponent = props.promisedComponent;
+        // if we already have resolved the component, just pass the data forward
+
+        if (this.resolvedComponent) {
+            this.resolvedComponent.apply(this.props.data);
+        }
+        // otherwise
+        if (!this.isLoading) {
+            this.isLoading = true;
+            promisedComponent().then(function (Component) {
+                if (_this.alreadyUnmounted) {
+                    return;
+                }
+                _this.resolvedComponent = new Component();
+                link(_this, _this.resolvedComponent);
+                _this.resolvedComponent.el = _this._el;
+                _this.resolvedComponent.apply(_this.props.data);
+            }, function (err) {
+                // fail early
+                _this.loadingError = err;
+                enqueueComponent(_this);
+            }).catch(function (err) {
+                // just in case something went wrong while initialising the component
+                _this.loadingError = err;
+                enqueueComponent(_this);
+            });
+            if (this.props.delayLoadingAnimation) {
+                setTimeout(function () {
+                    return enqueueComponent(_this);
+                }, this.props.delayLoadingAnimation);
+            } else {
+                enqueueComponent(this);
+            }
+        }
+    };
+
+    AsyncComponent.prototype.notify = function notify() {};
+
+    AsyncComponent.prototype.componentWillUnmount = function componentWillUnmount() {
+        this.alreadyUnmounted = true;
+    };
+
+    AsyncComponent.prototype.render = function render() {
+        if (!this.resolvedComponent) {
+            if (this.loadingError && this.props.onError) {
+                this.props.onError(this.loadingError);
+            } else {
+                this.props.whileLoading();
+            }
+        }
+    };
+
+    createClass(AsyncComponent, [{
+        key: 'el',
+        set: function set$$1(el) {
+            if (this.resolvedComponent) {
+                this.resolvedComponent.el = el;
+            }
+            this._el = el;
+            return el;
+        },
+        get: function get$$1() {
+            return this.resolvedComponent ? this.resolvedComponent.el : this._el;
+        }
+    }]);
+    return AsyncComponent;
+}();
+
 /**
@@ -911,2 +1022,2 @@ * Copyright 2017 trivago N.V.
 
-export { createSubContext, batch, attrs, styles, classes, merge, replace, reverse, round, striptags, number_format, format, title, url_encode, strtotime, trim, random, min, max, cycle, attribute, isEmpty, inheritBlocks };
+export { AsyncComponent, createSubContext, batch, attrs, styles, classes, merge, replace, reverse, round, striptags, number_format, format, title, url_encode, strtotime, trim, random, min, max, cycle, attribute, isEmpty, inheritBlocks };

lib/index.js

@@ -19,2 +19,3 @@ 'use strict';
 var _isNumber = _interopDefault(require('lodash/isNumber'));
+var melodyIdom = require('melody-idom');
 
@@ -900,2 +901,112 @@ /**
 
+var classCallCheck = function (instance, Constructor) {
+  if (!(instance instanceof Constructor)) {
+    throw new TypeError("Cannot call a class as a function");
+  }
+};
+
+var createClass = function () {
+  function defineProperties(target, props) {
+    for (var i = 0; i < props.length; i++) {
+      var descriptor = props[i];
+      descriptor.enumerable = descriptor.enumerable || false;
+      descriptor.configurable = true;
+      if ("value" in descriptor) descriptor.writable = true;
+      Object.defineProperty(target, descriptor.key, descriptor);
+    }
+  }
+
+  return function (Constructor, protoProps, staticProps) {
+    if (protoProps) defineProperties(Constructor.prototype, protoProps);
+    if (staticProps) defineProperties(Constructor, staticProps);
+    return Constructor;
+  };
+}();
+
+var AsyncComponent = function () {
+    function AsyncComponent() {
+        classCallCheck(this, AsyncComponent);
+
+        this.promisedComponent = null;
+        this._el = null;
+        this.refs = Object.create(null);
+        this.props = null;
+        this.resolvedComponent = null;
+        this.alreadyUnmounted = false;
+        this.isLoading = false;
+        this.loadingError = null;
+    }
+
+    AsyncComponent.prototype.apply = function apply(props) {
+        var _this = this;
+
+        this.props = props;
+        var promisedComponent = props.promisedComponent;
+        // if we already have resolved the component, just pass the data forward
+
+        if (this.resolvedComponent) {
+            this.resolvedComponent.apply(this.props.data);
+        }
+        // otherwise
+        if (!this.isLoading) {
+            this.isLoading = true;
+            promisedComponent().then(function (Component) {
+                if (_this.alreadyUnmounted) {
+                    return;
+                }
+                _this.resolvedComponent = new Component();
+                melodyIdom.link(_this, _this.resolvedComponent);
+                _this.resolvedComponent.el = _this._el;
+                _this.resolvedComponent.apply(_this.props.data);
+            }, function (err) {
+                // fail early
+                _this.loadingError = err;
+                melodyIdom.enqueueComponent(_this);
+            }).catch(function (err) {
+                // just in case something went wrong while initialising the component
+                _this.loadingError = err;
+                melodyIdom.enqueueComponent(_this);
+            });
+            if (this.props.delayLoadingAnimation) {
+                setTimeout(function () {
+                    return melodyIdom.enqueueComponent(_this);
+                }, this.props.delayLoadingAnimation);
+            } else {
+                melodyIdom.enqueueComponent(this);
+            }
+        }
+    };
+
+    AsyncComponent.prototype.notify = function notify() {};
+
+    AsyncComponent.prototype.componentWillUnmount = function componentWillUnmount() {
+        this.alreadyUnmounted = true;
+    };
+
+    AsyncComponent.prototype.render = function render() {
+        if (!this.resolvedComponent) {
+            if (this.loadingError && this.props.onError) {
+                this.props.onError(this.loadingError);
+            } else {
+                this.props.whileLoading();
+            }
+        }
+    };
+
+    createClass(AsyncComponent, [{
+        key: 'el',
+        set: function set$$1(el) {
+            if (this.resolvedComponent) {
+                this.resolvedComponent.el = el;
+            }
+            this._el = el;
+            return el;
+        },
+        get: function get$$1() {
+            return this.resolvedComponent ? this.resolvedComponent.el : this._el;
+        }
+    }]);
+    return AsyncComponent;
+}();
+
 /**
@@ -917,2 +1028,3 @@ * Copyright 2017 trivago N.V.
 
+exports.AsyncComponent = AsyncComponent;
 exports.createSubContext = createSubContext;
@@ -919,0 +1031,0 @@ exports.batch = batch;

package.json

 {
   "name": "melody-runtime",
-  "version": "1.2.0-commit.6a9d8668",
+  "version": "1.2.0-commit.82e60495",
   "description": "",
@@ -15,2 +15,5 @@ "main": "./lib/index.js",
   },
+  "peerDependencies": {
+    "melody-idom": "^1.2.0"
+  },
   "devDependencies": {
@@ -17,0 +20,0 @@ "rollup-plugin-babel": "^2.6.1"

src/index.js

@@ -36,1 +36,4 @@ /**
 export { isEmpty, inheritBlocks } from './helpers';
+
+import AsyncComponent from './async';
+export { AsyncComponent };

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

114178

increased by9.74%

Number of package files

9

increased by12.5%

Lines of code

3042

increased by10.1%

Worsened metrics

Dependency count

2

increased by100%

No dependency changes