@sme.up/ketchup 8.0.2 → 8.2.0

package/dist/cjs/{f-text-field-mdc-0e22f3e3.js → f-text-field-mdc-d38d80b5.js}

@@ -1,7 +1,6 @@
 'use strict';
 
-const tslib_es6 = require('./tslib.es6-386654de.js');
-const component = require('./component-85c2bd4d.js');
+const component = require('./component-2c7ddef7.js');
 
 /**
  * @license
@@ -55,9 +54,9 @@ var cssClasses$7 = {
  * THE SOFTWARE.
  */
 var MDCFloatingLabelFoundation = /** @class */ (function (_super) {
-    tslib_es6.__extends(MDCFloatingLabelFoundation, _super);
+    component.__extends(MDCFloatingLabelFoundation, _super);
     function MDCFloatingLabelFoundation(adapter) {
-        var _this = _super.call(this, tslib_es6.__assign(tslib_es6.__assign({}, MDCFloatingLabelFoundation.defaultAdapter), adapter)) || this;
+        var _this = _super.call(this, component.__assign(component.__assign({}, MDCFloatingLabelFoundation.defaultAdapter), adapter)) || this;
         _this.shakeAnimationEndHandler = function () {
             _this.handleShakeAnimationEnd();
         };
@@ -170,7 +169,7 @@ var MDCFloatingLabelFoundation = /** @class */ (function (_super) {
  * THE SOFTWARE.
  */
 var MDCFloatingLabel = /** @class */ (function (_super) {
-    tslib_es6.__extends(MDCFloatingLabel, _super);
+    component.__extends(MDCFloatingLabel, _super);
     function MDCFloatingLabel() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
@@ -273,9 +272,9 @@ var cssClasses$6 = {
  * THE SOFTWARE.
  */
 var MDCLineRippleFoundation = /** @class */ (function (_super) {
-    tslib_es6.__extends(MDCLineRippleFoundation, _super);
+    component.__extends(MDCLineRippleFoundation, _super);
     function MDCLineRippleFoundation(adapter) {
-        var _this = _super.call(this, tslib_es6.__assign(tslib_es6.__assign({}, MDCLineRippleFoundation.defaultAdapter), adapter)) || this;
+        var _this = _super.call(this, component.__assign(component.__assign({}, MDCLineRippleFoundation.defaultAdapter), adapter)) || this;
         _this.transitionEndHandler = function (evt) {
             _this.handleTransitionEnd(evt);
         };
@@ -360,7 +359,7 @@ var MDCLineRippleFoundation = /** @class */ (function (_super) {
  * THE SOFTWARE.
  */
 var MDCLineRipple = /** @class */ (function (_super) {
-    tslib_es6.__extends(MDCLineRipple, _super);
+    component.__extends(MDCLineRipple, _super);
     function MDCLineRipple() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
@@ -463,9 +462,9 @@ var cssClasses$5 = {
  * THE SOFTWARE.
  */
 var MDCNotchedOutlineFoundation = /** @class */ (function (_super) {
-    tslib_es6.__extends(MDCNotchedOutlineFoundation, _super);
+    component.__extends(MDCNotchedOutlineFoundation, _super);
     function MDCNotchedOutlineFoundation(adapter) {
-        return _super.call(this, tslib_es6.__assign(tslib_es6.__assign({}, MDCNotchedOutlineFoundation.defaultAdapter), adapter)) || this;
+        return _super.call(this, component.__assign(component.__assign({}, MDCNotchedOutlineFoundation.defaultAdapter), adapter)) || this;
     }
     Object.defineProperty(MDCNotchedOutlineFoundation, "strings", {
         get: function () {
@@ -550,7 +549,7 @@ var MDCNotchedOutlineFoundation = /** @class */ (function (_super) {
  * THE SOFTWARE.
  */
 var MDCNotchedOutline = /** @class */ (function (_super) {
-    tslib_es6.__extends(MDCNotchedOutline, _super);
+    component.__extends(MDCNotchedOutline, _super);
     function MDCNotchedOutline() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
@@ -658,9 +657,9 @@ var strings$4 = {
  * THE SOFTWARE.
  */
 var MDCTextFieldCharacterCounterFoundation = /** @class */ (function (_super) {
-    tslib_es6.__extends(MDCTextFieldCharacterCounterFoundation, _super);
+    component.__extends(MDCTextFieldCharacterCounterFoundation, _super);
     function MDCTextFieldCharacterCounterFoundation(adapter) {
-        return _super.call(this, tslib_es6.__assign(tslib_es6.__assign({}, MDCTextFieldCharacterCounterFoundation.defaultAdapter), adapter)) || this;
+        return _super.call(this, component.__assign(component.__assign({}, MDCTextFieldCharacterCounterFoundation.defaultAdapter), adapter)) || this;
     }
     Object.defineProperty(MDCTextFieldCharacterCounterFoundation, "cssClasses", {
         get: function () {
@@ -718,7 +717,7 @@ var MDCTextFieldCharacterCounterFoundation = /** @class */ (function (_super) {
  * THE SOFTWARE.
  */
 var MDCTextFieldCharacterCounter = /** @class */ (function (_super) {
-    tslib_es6.__extends(MDCTextFieldCharacterCounter, _super);
+    component.__extends(MDCTextFieldCharacterCounter, _super);
     function MDCTextFieldCharacterCounter() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
@@ -851,14 +850,14 @@ var ALWAYS_FLOAT_TYPES = [
 var POINTERDOWN_EVENTS = ['mousedown', 'touchstart'];
 var INTERACTION_EVENTS$1 = ['click', 'keydown'];
 var MDCTextFieldFoundation = /** @class */ (function (_super) {
-    tslib_es6.__extends(MDCTextFieldFoundation, _super);
+    component.__extends(MDCTextFieldFoundation, _super);
     /**
      * @param adapter
      * @param foundationMap Map from subcomponent names to their subfoundations.
      */
     function MDCTextFieldFoundation(adapter, foundationMap) {
         if (foundationMap === void 0) { foundationMap = {}; }
-        var _this = _super.call(this, tslib_es6.__assign(tslib_es6.__assign({}, MDCTextFieldFoundation.defaultAdapter), adapter)) || this;
+        var _this = _super.call(this, component.__assign(component.__assign({}, MDCTextFieldFoundation.defaultAdapter), adapter)) || this;
         _this.isFocused = false;
         _this.receivedUserInput = false;
         _this.valid = true;
@@ -989,7 +988,7 @@ var MDCTextFieldFoundation = /** @class */ (function (_super) {
         this.adapter.registerInputInteractionHandler('blur', this.inputBlurHandler);
         this.adapter.registerInputInteractionHandler('input', this.inputInputHandler);
         try {
-            for (var POINTERDOWN_EVENTS_1 = tslib_es6.__values(POINTERDOWN_EVENTS), POINTERDOWN_EVENTS_1_1 = POINTERDOWN_EVENTS_1.next(); !POINTERDOWN_EVENTS_1_1.done; POINTERDOWN_EVENTS_1_1 = POINTERDOWN_EVENTS_1.next()) {
+            for (var POINTERDOWN_EVENTS_1 = component.__values(POINTERDOWN_EVENTS), POINTERDOWN_EVENTS_1_1 = POINTERDOWN_EVENTS_1.next(); !POINTERDOWN_EVENTS_1_1.done; POINTERDOWN_EVENTS_1_1 = POINTERDOWN_EVENTS_1.next()) {
                 var evtType = POINTERDOWN_EVENTS_1_1.value;
                 this.adapter.registerInputInteractionHandler(evtType, this.setPointerXOffset);
             }
@@ -1002,7 +1001,7 @@ var MDCTextFieldFoundation = /** @class */ (function (_super) {
             finally { if (e_1) throw e_1.error; }
         }
         try {
-            for (var INTERACTION_EVENTS_1 = tslib_es6.__values(INTERACTION_EVENTS$1), INTERACTION_EVENTS_1_1 = INTERACTION_EVENTS_1.next(); !INTERACTION_EVENTS_1_1.done; INTERACTION_EVENTS_1_1 = INTERACTION_EVENTS_1.next()) {
+            for (var INTERACTION_EVENTS_1 = component.__values(INTERACTION_EVENTS$1), INTERACTION_EVENTS_1_1 = INTERACTION_EVENTS_1.next(); !INTERACTION_EVENTS_1_1.done; INTERACTION_EVENTS_1_1 = INTERACTION_EVENTS_1.next()) {
                 var evtType = INTERACTION_EVENTS_1_1.value;
                 this.adapter.registerTextFieldInteractionHandler(evtType, this.textFieldInteractionHandler);
             }
@@ -1024,7 +1023,7 @@ var MDCTextFieldFoundation = /** @class */ (function (_super) {
         this.adapter.deregisterInputInteractionHandler('blur', this.inputBlurHandler);
         this.adapter.deregisterInputInteractionHandler('input', this.inputInputHandler);
         try {
-            for (var POINTERDOWN_EVENTS_2 = tslib_es6.__values(POINTERDOWN_EVENTS), POINTERDOWN_EVENTS_2_1 = POINTERDOWN_EVENTS_2.next(); !POINTERDOWN_EVENTS_2_1.done; POINTERDOWN_EVENTS_2_1 = POINTERDOWN_EVENTS_2.next()) {
+            for (var POINTERDOWN_EVENTS_2 = component.__values(POINTERDOWN_EVENTS), POINTERDOWN_EVENTS_2_1 = POINTERDOWN_EVENTS_2.next(); !POINTERDOWN_EVENTS_2_1.done; POINTERDOWN_EVENTS_2_1 = POINTERDOWN_EVENTS_2.next()) {
                 var evtType = POINTERDOWN_EVENTS_2_1.value;
                 this.adapter.deregisterInputInteractionHandler(evtType, this.setPointerXOffset);
             }
@@ -1037,7 +1036,7 @@ var MDCTextFieldFoundation = /** @class */ (function (_super) {
             finally { if (e_3) throw e_3.error; }
         }
         try {
-            for (var INTERACTION_EVENTS_2 = tslib_es6.__values(INTERACTION_EVENTS$1), INTERACTION_EVENTS_2_1 = INTERACTION_EVENTS_2.next(); !INTERACTION_EVENTS_2_1.done; INTERACTION_EVENTS_2_1 = INTERACTION_EVENTS_2.next()) {
+            for (var INTERACTION_EVENTS_2 = component.__values(INTERACTION_EVENTS$1), INTERACTION_EVENTS_2_1 = INTERACTION_EVENTS_2.next(); !INTERACTION_EVENTS_2_1.done; INTERACTION_EVENTS_2_1 = INTERACTION_EVENTS_2.next()) {
                 var evtType = INTERACTION_EVENTS_2_1.value;
                 this.adapter.deregisterTextFieldInteractionHandler(evtType, this.textFieldInteractionHandler);
             }
@@ -1460,9 +1459,9 @@ var strings$2 = {
  * THE SOFTWARE.
  */
 var MDCTextFieldHelperTextFoundation = /** @class */ (function (_super) {
-    tslib_es6.__extends(MDCTextFieldHelperTextFoundation, _super);
+    component.__extends(MDCTextFieldHelperTextFoundation, _super);
     function MDCTextFieldHelperTextFoundation(adapter) {
-        return _super.call(this, tslib_es6.__assign(tslib_es6.__assign({}, MDCTextFieldHelperTextFoundation.defaultAdapter), adapter)) || this;
+        return _super.call(this, component.__assign(component.__assign({}, MDCTextFieldHelperTextFoundation.defaultAdapter), adapter)) || this;
     }
     Object.defineProperty(MDCTextFieldHelperTextFoundation, "cssClasses", {
         get: function () {
@@ -1611,7 +1610,7 @@ var MDCTextFieldHelperTextFoundation = /** @class */ (function (_super) {
  * THE SOFTWARE.
  */
 var MDCTextFieldHelperText = /** @class */ (function (_super) {
-    tslib_es6.__extends(MDCTextFieldHelperText, _super);
+    component.__extends(MDCTextFieldHelperText, _super);
     function MDCTextFieldHelperText() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
@@ -1702,9 +1701,9 @@ var cssClasses$1 = {
  */
 var INTERACTION_EVENTS = ['click', 'keydown'];
 var MDCTextFieldIconFoundation = /** @class */ (function (_super) {
-    tslib_es6.__extends(MDCTextFieldIconFoundation, _super);
+    component.__extends(MDCTextFieldIconFoundation, _super);
     function MDCTextFieldIconFoundation(adapter) {
-        var _this = _super.call(this, tslib_es6.__assign(tslib_es6.__assign({}, MDCTextFieldIconFoundation.defaultAdapter), adapter)) || this;
+        var _this = _super.call(this, component.__assign(component.__assign({}, MDCTextFieldIconFoundation.defaultAdapter), adapter)) || this;
         _this.savedTabIndex = null;
         _this.interactionHandler = function (evt) {
             _this.handleInteraction(evt);
@@ -1749,7 +1748,7 @@ var MDCTextFieldIconFoundation = /** @class */ (function (_super) {
         var e_1, _a;
         this.savedTabIndex = this.adapter.getAttr('tabindex');
         try {
-            for (var INTERACTION_EVENTS_1 = tslib_es6.__values(INTERACTION_EVENTS), INTERACTION_EVENTS_1_1 = INTERACTION_EVENTS_1.next(); !INTERACTION_EVENTS_1_1.done; INTERACTION_EVENTS_1_1 = INTERACTION_EVENTS_1.next()) {
+            for (var INTERACTION_EVENTS_1 = component.__values(INTERACTION_EVENTS), INTERACTION_EVENTS_1_1 = INTERACTION_EVENTS_1.next(); !INTERACTION_EVENTS_1_1.done; INTERACTION_EVENTS_1_1 = INTERACTION_EVENTS_1.next()) {
                 var evtType = INTERACTION_EVENTS_1_1.value;
                 this.adapter.registerInteractionHandler(evtType, this.interactionHandler);
             }
@@ -1765,7 +1764,7 @@ var MDCTextFieldIconFoundation = /** @class */ (function (_super) {
     MDCTextFieldIconFoundation.prototype.destroy = function () {
         var e_2, _a;
         try {
-            for (var INTERACTION_EVENTS_2 = tslib_es6.__values(INTERACTION_EVENTS), INTERACTION_EVENTS_2_1 = INTERACTION_EVENTS_2.next(); !INTERACTION_EVENTS_2_1.done; INTERACTION_EVENTS_2_1 = INTERACTION_EVENTS_2.next()) {
+            for (var INTERACTION_EVENTS_2 = component.__values(INTERACTION_EVENTS), INTERACTION_EVENTS_2_1 = INTERACTION_EVENTS_2.next(); !INTERACTION_EVENTS_2_1.done; INTERACTION_EVENTS_2_1 = INTERACTION_EVENTS_2.next()) {
                 var evtType = INTERACTION_EVENTS_2_1.value;
                 this.adapter.deregisterInteractionHandler(evtType, this.interactionHandler);
             }
@@ -1831,7 +1830,7 @@ var MDCTextFieldIconFoundation = /** @class */ (function (_super) {
  * THE SOFTWARE.
  */
 var MDCTextFieldIcon = /** @class */ (function (_super) {
-    tslib_es6.__extends(MDCTextFieldIcon, _super);
+    component.__extends(MDCTextFieldIcon, _super);
     function MDCTextFieldIcon() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
@@ -1891,7 +1890,7 @@ var MDCTextFieldIcon = /** @class */ (function (_super) {
  * THE SOFTWARE.
  */
 var MDCTextField = /** @class */ (function (_super) {
-    tslib_es6.__extends(MDCTextField, _super);
+    component.__extends(MDCTextField, _super);
     function MDCTextField() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
@@ -2229,7 +2228,7 @@ var MDCTextField = /** @class */ (function (_super) {
         // DO NOT INLINE this variable. For backward compatibility, foundations take a Partial<MDCFooAdapter>.
         // To ensure we don't accidentally omit any methods, we need a separate, strongly typed adapter variable.
         // tslint:disable:object-literal-sort-keys Methods should be in the same order as the adapter interface.
-        var adapter = tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign({}, this.getRootAdapterMethods()), this.getInputAdapterMethods()), this.getLabelAdapterMethods()), this.getLineRippleAdapterMethods()), this.getOutlineAdapterMethods());
+        var adapter = component.__assign(component.__assign(component.__assign(component.__assign(component.__assign({}, this.getRootAdapterMethods()), this.getInputAdapterMethods()), this.getLabelAdapterMethods()), this.getLineRippleAdapterMethods()), this.getOutlineAdapterMethods());
         // tslint:enable:object-literal-sort-keys
         return new MDCTextFieldFoundation(adapter, this.getFoundationMap());
     };
@@ -2359,7 +2358,7 @@ var MDCTextField = /** @class */ (function (_super) {
         // DO NOT INLINE this variable. For backward compatibility, foundations take a Partial<MDCFooAdapter>.
         // To ensure we don't accidentally omit any methods, we need a separate, strongly typed adapter variable.
         // tslint:disable:object-literal-sort-keys Methods should be in the same order as the adapter interface.
-        var adapter = tslib_es6.__assign(tslib_es6.__assign({}, component.MDCRipple.createAdapter(this)), { isSurfaceActive: function () { return component.matches(_this.input, ':active'); }, registerInteractionHandler: function (evtType, handler) {
+        var adapter = component.__assign(component.__assign({}, component.MDCRipple.createAdapter(this)), { isSurfaceActive: function () { return component.matches(_this.input, ':active'); }, registerInteractionHandler: function (evtType, handler) {
                 _this.input.addEventListener(evtType, handler, component.applyPassive());
             }, deregisterInteractionHandler: function (evtType, handler) {
                 _this.input.removeEventListener(evtType, handler, component.applyPassive());
@@ -2422,9 +2421,9 @@ var strings = {
  * THE SOFTWARE.
  */
 var MDCFormFieldFoundation = /** @class */ (function (_super) {
-    tslib_es6.__extends(MDCFormFieldFoundation, _super);
+    component.__extends(MDCFormFieldFoundation, _super);
     function MDCFormFieldFoundation(adapter) {
-        var _this = _super.call(this, tslib_es6.__assign(tslib_es6.__assign({}, MDCFormFieldFoundation.defaultAdapter), adapter)) || this;
+        var _this = _super.call(this, component.__assign(component.__assign({}, MDCFormFieldFoundation.defaultAdapter), adapter)) || this;
         _this.click = function () {
             _this.handleClick();
         };
@@ -2495,7 +2494,7 @@ var MDCFormFieldFoundation = /** @class */ (function (_super) {
  * THE SOFTWARE.
  */
 var MDCFormField = /** @class */ (function (_super) {
-    tslib_es6.__extends(MDCFormField, _super);
+    component.__extends(MDCFormField, _super);
     function MDCFormField() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
@@ -2539,32 +2538,32 @@ var MDCFormField = /** @class */ (function (_super) {
     return MDCFormField;
 }(component.MDCComponent));
 
-/**
- * Instantiates Material Design text field component.
- * @param el - Must be the f-component wrapper (.f-text-field)
- * @see https://material-components.github.io/material-components-web-catalog/#/component/text-field
- */
-function FTextFieldMDC(el) {
-  const component = new MDCTextField(el.querySelector('.mdc-text-field'));
-  const form = el.querySelector('.mdc-form-field');
-  const helper = el.querySelector('.mdc-text-field-helper-text');
-  const counter = el.querySelector('.mdc-text-field-character-counter');
-  const icon = el.querySelector('.mdc-text-field-icon');
-  if (form) {
-    const formField = MDCFormField.attachTo(form);
-    if (formField) {
-      formField.input = component;
-    }
-  }
-  if (helper) {
-    new MDCTextFieldHelperText(helper);
-  }
-  if (counter) {
-    new MDCTextFieldCharacterCounter(counter);
-  }
-  if (icon) {
-    new MDCTextFieldIcon(icon);
-  }
+/**
+ * Instantiates Material Design text field component.
+ * @param el - Must be the f-component wrapper (.f-text-field)
+ * @see https://material-components.github.io/material-components-web-catalog/#/component/text-field
+ */
+function FTextFieldMDC(el) {
+  const component = new MDCTextField(el.querySelector('.mdc-text-field'));
+  const form = el.querySelector('.mdc-form-field');
+  const helper = el.querySelector('.mdc-text-field-helper-text');
+  const counter = el.querySelector('.mdc-text-field-character-counter');
+  const icon = el.querySelector('.mdc-text-field-icon');
+  if (form) {
+    const formField = MDCFormField.attachTo(form);
+    if (formField) {
+      formField.input = component;
+    }
+  }
+  if (helper) {
+    new MDCTextFieldHelperText(helper);
+  }
+  if (counter) {
+    new MDCTextFieldCharacterCounter(counter);
+  }
+  if (icon) {
+    new MDCTextFieldIcon(icon);
+  }
 }
 
 exports.FTextFieldMDC = FTextFieldMDC;

package/dist/cjs/{index-1f177abc.js → index-a9a3b467.js}

@@ -675,16 +675,17 @@ const addVnodes = (parentElm, before, parentVNode, vnodes, startIdx, endIdx) =>
  * @param vnodes a list of virtual DOM nodes to remove
  * @param startIdx the index at which to start removing nodes (inclusive)
  * @param endIdx the index at which to stop removing nodes (inclusive)
- * @param vnode a VNode
- * @param elm an element
  */
-const removeVnodes = (vnodes, startIdx, endIdx, vnode, elm) => {
-    for (; startIdx <= endIdx; ++startIdx) {
-        if ((vnode = vnodes[startIdx])) {
-            elm = vnode.$elm$;
-            callNodeRefs(vnode);
-            // remove the vnode's element from the dom
-            elm.remove();
+const removeVnodes = (vnodes, startIdx, endIdx) => {
+    for (let index = startIdx; index <= endIdx; ++index) {
+        const vnode = vnodes[index];
+        if (vnode) {
+            const elm = vnode.$elm$;
+            nullifyVNodeRefs(vnode);
+            if (elm) {
+                // remove the vnode's element from the dom
+                elm.remove();
+            }
         }
     }
 };
@@ -983,10 +984,17 @@ const patch = (oldVNode, newVNode) => {
         elm.data = text;
     }
 };
-const callNodeRefs = (vNode) => {
+/**
+ * 'Nullify' any VDom `ref` callbacks on a VDom node or its children by
+ * calling them with `null`. This signals that the DOM element corresponding to
+ * the VDom node has been removed from the DOM.
+ *
+ * @param vNode a virtual DOM node
+ */
+const nullifyVNodeRefs = (vNode) => {
     {
         vNode.$attrs$ && vNode.$attrs$.ref && vNode.$attrs$.ref(null);
-        vNode.$children$ && vNode.$children$.map(callNodeRefs);
+        vNode.$children$ && vNode.$children$.map(nullifyVNodeRefs);
     }
 };
 /**
@@ -1041,35 +1049,96 @@ const scheduleUpdate = (hostRef, isInitialLoad) => {
     const dispatch = () => dispatchHooks(hostRef, isInitialLoad);
     return writeTask(dispatch) ;
 };
+/**
+ * Dispatch initial-render and update lifecycle hooks, enqueuing calls to
+ * component lifecycle methods like `componentWillLoad` as well as
+ * {@link updateComponent}, which will kick off the virtual DOM re-render.
+ *
+ * @param hostRef a reference to a host DOM node
+ * @param isInitialLoad whether we're on the initial load or not
+ * @returns an empty Promise which is used to enqueue a series of operations for
+ * the component
+ */
 const dispatchHooks = (hostRef, isInitialLoad) => {
     const endSchedule = createTime('scheduleUpdate', hostRef.$cmpMeta$.$tagName$);
     const instance = hostRef.$lazyInstance$ ;
-    let promise;
+    // We're going to use this variable together with `enqueue` to implement a
+    // little promise-based queue. We start out with it `undefined`. When we add
+    // the first function to the queue we'll set this variable to be that
+    // function's return value. When we attempt to add subsequent values to the
+    // queue we'll check that value and, if it was a `Promise`, we'll then chain
+    // the new function off of that `Promise` using `.then()`. This will give our
+    // queue two nice properties:
+    //
+    // 1. If all functions added to the queue are synchronous they'll be called
+    //    synchronously right away.
+    // 2. If all functions added to the queue are asynchronous they'll all be
+    //    called in order after `dispatchHooks` exits.
+    let maybePromise;
     if (isInitialLoad) {
         {
             hostRef.$flags$ |= 256 /* HOST_FLAGS.isListenReady */;
             if (hostRef.$queuedListeners$) {
                 hostRef.$queuedListeners$.map(([methodName, event]) => safeCall(instance, methodName, event));
-                hostRef.$queuedListeners$ = null;
+                hostRef.$queuedListeners$ = undefined;
             }
         }
         {
-            promise = safeCall(instance, 'componentWillLoad');
+            // If `componentWillLoad` returns a `Promise` then we want to wait on
+            // whatever's going on in that `Promise` before we launch into
+            // rendering the component, doing other lifecycle stuff, etc. So
+            // in that case we assign the returned promise to the variable we
+            // declared above to hold a possible 'queueing' Promise
+            maybePromise = safeCall(instance, 'componentWillLoad');
         }
     }
     else {
         {
-            promise = safeCall(instance, 'componentWillUpdate');
+            // Like `componentWillLoad` above, we allow Stencil component
+            // authors to return a `Promise` from this lifecycle callback, and
+            // we specify that our runtime will wait for that `Promise` to
+            // resolve before the component re-renders. So if the method
+            // returns a `Promise` we need to keep it around!
+            maybePromise = safeCall(instance, 'componentWillUpdate');
         }
     }
     {
-        promise = then(promise, () => safeCall(instance, 'componentWillRender'));
+        maybePromise = enqueue(maybePromise, () => safeCall(instance, 'componentWillRender'));
     }
     endSchedule();
-    return then(promise, () => updateComponent(hostRef, instance, isInitialLoad));
+    return enqueue(maybePromise, () => updateComponent(hostRef, instance, isInitialLoad));
 };
+/**
+ * This function uses a Promise to implement a simple first-in, first-out queue
+ * of functions to be called.
+ *
+ * The queue is ordered on the basis of the first argument. If it's
+ * `undefined`, then nothing is on the queue yet, so the provided function can
+ * be called synchronously (although note that this function may return a
+ * `Promise`). The idea is that then the return value of that enqueueing
+ * operation is kept around, so that if it was a `Promise` then subsequent
+ * functions can be enqueued by calling this function again with that `Promise`
+ * as the first argument.
+ *
+ * @param maybePromise either a `Promise` which should resolve before the next function is called or an 'empty' sentinel
+ * @param fn a function to enqueue
+ * @returns either a `Promise` or the return value of the provided function
+ */
+const enqueue = (maybePromise, fn) => isPromisey(maybePromise) ? maybePromise.then(fn) : fn();
+/**
+ * Check that a value is a `Promise`. To check, we first see if the value is an
+ * instance of the `Promise` global. In a few circumstances, in particular if
+ * the global has been overwritten, this is could be misleading, so we also do
+ * a little 'duck typing' check to see if the `.then` property of the value is
+ * defined and a function.
+ *
+ * @param maybePromise it might be a promise!
+ * @returns whether it is or not
+ */
+const isPromisey = (maybePromise) => maybePromise instanceof Promise ||
+    (maybePromise && maybePromise.then && typeof maybePromise.then === 'function');
 const updateComponent = async (hostRef, instance, isInitialLoad) => {
-    // updateComponent
+    var _a;
     const elm = hostRef.$hostElement$;
     const endUpdate = createTime('update', hostRef.$cmpMeta$.$tagName$);
     const rc = elm['s-rc'];
@@ -1091,7 +1160,7 @@ const updateComponent = async (hostRef, instance, isInitialLoad) => {
     endRender();
     endUpdate();
     {
-        const childrenPromises = elm['s-p'];
+        const childrenPromises = (_a = elm['s-p']) !== null && _a !== void 0 ? _a : [];
         const postUpdate = () => postUpdateComponent(hostRef);
         if (childrenPromises.length === 0) {
             postUpdate();
@@ -1210,9 +1279,6 @@ const safeCall = (instance, method, arg) => {
     }
     return undefined;
 };
-const then = (promise, thenFn) => {
-    return promise && promise.then ? promise.then(thenFn) : thenFn();
-};
 const addHydratedFlag = (elm) => elm.classList.add('hydrated')
     ;
 const getValue = (ref, propName) => getHostRef(ref).$instanceValues$.get(propName);
@@ -1376,9 +1442,9 @@ const proxyComponent = (Cstr, cmpMeta, flags) => {
 const initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId, Cstr) => {
     // initializeComponent
     if ((hostRef.$flags$ & 32 /* HOST_FLAGS.hasInitializedComponent */) === 0) {
+        // Let the runtime know that the component has been initialized
+        hostRef.$flags$ |= 32 /* HOST_FLAGS.hasInitializedComponent */;
         {
-            // we haven't initialized this element yet
-            hostRef.$flags$ |= 32 /* HOST_FLAGS.hasInitializedComponent */;
             // lazy loaded components
             // request the component's implementation to be
             // wired up with the host element
@@ -1706,6 +1772,8 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
 const styles = /*@__PURE__*/ new Map();
 const win = typeof window !== 'undefined' ? window : {};
 const doc = win.document || { head: {} };
+const H = (win.HTMLElement || class {
+});
 const plt = {
     $flags$: 0,
     $resourcesUrl$: '',
@@ -1768,6 +1836,7 @@ const flush = () => {
 const nextTick = /*@__PURE__*/ (cb) => promiseResolve().then(cb);
 const writeTask = /*@__PURE__*/ queueTask(queueDomWrites, true);
 
+exports.H = H;
 exports.Host = Host;
 exports.bootstrapLazy = bootstrapLazy;
 exports.createEvent = createEvent;