@ukic/web-components 2.3.0 → 2.4.0

package/dist/esm/{index-fd30b77e.js → index-14c9f375.js}

@@ -118,13 +118,13 @@ const h = (nodeName, vnodeData, ...children) => {
     };
     walk(children);
     if (vnodeData) {
-        // normalize class / classname attributes
         if (vnodeData.key) {
             key = vnodeData.key;
         }
         if (vnodeData.name) {
             slotName = vnodeData.name;
         }
+        // normalize class / className attributes
         {
             const classData = vnodeData.className || vnodeData.class;
             if (classData) {
@@ -370,7 +370,7 @@ const clientHydrate = (parentVNode, childRenderNodes, slotNodes, shadowRootNodes
                 }
             }
             else if (childVNode.$hostId$ === hostId) {
-                // this comment node is specifcally for this host id
+                // this comment node is specifically for this host id
                 if (childNodeType === SLOT_NODE_ID) {
                     // `${SLOT_NODE_ID}.${hostId}.${nodeId}.${depth}.${index}.${slotName}`;
                     childVNode.$tag$ = 'slot';
@@ -537,9 +537,9 @@ const registerStyle = (scopeId, cssText, allowCS) => {
     }
     styles.set(scopeId, style);
 };
-const addStyle = (styleContainerNode, cmpMeta, mode, hostElm) => {
+const addStyle = (styleContainerNode, cmpMeta, mode) => {
     var _a;
-    let scopeId = getScopeId(cmpMeta);
+    const scopeId = getScopeId(cmpMeta);
     const style = styles.get(scopeId);
     // if an element is NOT connected then getRootNode() will return the wrong root node
     // so the fallback is to always use the document for the root node in those cases
@@ -559,11 +559,8 @@ const addStyle = (styleContainerNode, cmpMeta, mode, hostElm) => {
                     styleElm.innerHTML = style;
                 }
                 else {
-                    // TODO(STENCIL-659): Remove code implementing the CSS variable shim
-                    {
-                        styleElm = doc.createElement('style');
-                        styleElm.innerHTML = style;
-                    }
+                    styleElm = doc.createElement('style');
+                    styleElm.innerHTML = style;
                     // Apply CSP nonce to the style tag if it exists
                     const nonce = (_a = plt.$nonce$) !== null && _a !== void 0 ? _a : queryNonceMetaTagContent(doc);
                     if (nonce != null) {
@@ -588,7 +585,6 @@ const attachStyles = (hostRef) => {
     const flags = cmpMeta.$flags$;
     const endAttachStyles = createTime('attachStyles', cmpMeta.$tagName$);
     const scopeId = addStyle(elm.shadowRoot ? elm.shadowRoot : elm.getRootNode(), cmpMeta);
-    // TODO(STENCIL-662): Remove code related to deprecated shadowDomShim field
     if (flags & 10 /* CMP_FLAGS.needsScopedEncapsulation */) {
         // only required when we're NOT using native shadow dom (slot)
         // or this browser doesn't support native shadow dom
@@ -615,6 +611,21 @@ const convertScopedToShadow = (css) => css.replace(/\/\*!@([^\/]+)\*\/[^\{]+\{/g
  *
  * Modified for Stencil's compiler and vdom
  */
+/**
+ * When running a VDom render set properties present on a VDom node onto the
+ * corresponding HTML element.
+ *
+ * Note that this function has special functionality for the `class`,
+ * `style`, `key`, and `ref` attributes, as well as event handlers (like
+ * `onClick`, etc). All others are just passed through as-is.
+ *
+ * @param elm the HTMLElement onto which attributes should be set
+ * @param memberName the name of the attribute to set
+ * @param oldValue the old value for the attribute
+ * @param newValue the new value for the attribute
+ * @param isSvg whether we're in an svg context or not
+ * @param flags bitflags for Vdom variables
+ */
 const setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
     if (oldValue !== newValue) {
         let isProp = isMemberInElement(elm, memberName);
@@ -1477,17 +1488,44 @@ const nullifyVNodeRefs = (vNode) => {
  * @param hostRef data needed to root and render the virtual DOM tree, such as
  * the DOM node into which it should be rendered.
  * @param renderFnResults the virtual DOM nodes to be rendered
+ * @param isInitialLoad whether or not this is the first call after page load
  */
-const renderVdom = (hostRef, renderFnResults) => {
+const renderVdom = (hostRef, renderFnResults, isInitialLoad = false) => {
     const hostElm = hostRef.$hostElement$;
     const cmpMeta = hostRef.$cmpMeta$;
     const oldVNode = hostRef.$vnode$ || newVNode(null, null);
+    // if `renderFnResults` is a Host node then we can use it directly. If not,
+    // we need to call `h` again to wrap the children of our component in a
+    // 'dummy' Host node (well, an empty vnode) since `renderVdom` assumes
+    // implicitly that the top-level vdom node is 1) an only child and 2)
+    // contains attrs that need to be set on the host element.
     const rootVnode = isHost(renderFnResults) ? renderFnResults : h(null, null, renderFnResults);
     hostTagName = hostElm.tagName;
     if (cmpMeta.$attrsToReflect$) {
         rootVnode.$attrs$ = rootVnode.$attrs$ || {};
         cmpMeta.$attrsToReflect$.map(([propName, attribute]) => (rootVnode.$attrs$[attribute] = hostElm[propName]));
     }
+    // On the first render and *only* on the first render we want to check for
+    // any attributes set on the host element which are also set on the vdom
+    // node. If we find them, we override the value on the VDom node attrs with
+    // the value from the host element, which allows developers building apps
+    // with Stencil components to override e.g. the `role` attribute on a
+    // component even if it's already set on the `Host`.
+    if (isInitialLoad && rootVnode.$attrs$) {
+        for (const key of Object.keys(rootVnode.$attrs$)) {
+            // We have a special implementation in `setAccessor` for `style` and
+            // `class` which reconciles values coming from the VDom with values
+            // already present on the DOM element, so we don't want to override those
+            // attributes on the VDom tree with values from the host element if they
+            // are present.
+            //
+            // Likewise, `ref` and `key` are special internal values for the Stencil
+            // runtime and we don't want to override those either.
+            if (hostElm.hasAttribute(key) && !['key', 'ref', 'style', 'class'].includes(key)) {
+                rootVnode.$attrs$[key] = hostElm[key];
+            }
+        }
+    }
     rootVnode.$tag$ = null;
     rootVnode.$flags$ |= 4 /* VNODE_FLAGS.isHost */;
     hostRef.$vnode$ = rootVnode;
@@ -1554,7 +1592,7 @@ const renderVdom = (hostRef, renderFnResults) => {
                         // has a different next sibling or parent relocated
                         if (nodeToRelocate !== insertBeforeNode) {
                             if (!nodeToRelocate['s-hn'] && nodeToRelocate['s-ol']) {
-                                // probably a component in the index.html that doesn't have it's hostname set
+                                // probably a component in the index.html that doesn't have its hostname set
                                 nodeToRelocate['s-hn'] = nodeToRelocate['s-ol'].parentNode.nodeName;
                             }
                             // add it back to the dom but in its new home
@@ -1688,6 +1726,16 @@ const enqueue = (maybePromise, fn) => isPromisey(maybePromise) ? maybePromise.th
  */
 const isPromisey = (maybePromise) => maybePromise instanceof Promise ||
     (maybePromise && maybePromise.then && typeof maybePromise.then === 'function');
+/**
+ * Update a component given reference to its host elements and so on.
+ *
+ * @param hostRef an object containing references to the element's host node,
+ * VDom nodes, and other metadata
+ * @param instance a reference to the underlying host element where it will be
+ * rendered
+ * @param isInitialLoad whether or not this function is being called as part of
+ * the first render cycle
+ */
 const updateComponent = async (hostRef, instance, isInitialLoad) => {
     var _a;
     const elm = hostRef.$hostElement$;
@@ -1699,7 +1747,7 @@ const updateComponent = async (hostRef, instance, isInitialLoad) => {
     }
     const endRender = createTime('render', hostRef.$cmpMeta$.$tagName$);
     {
-        callRender(hostRef, instance);
+        callRender(hostRef, instance, elm, isInitialLoad);
     }
     if (rc) {
         // ok, so turns out there are some child host elements
@@ -1723,7 +1771,19 @@ const updateComponent = async (hostRef, instance, isInitialLoad) => {
         }
     }
 };
-const callRender = (hostRef, instance, elm) => {
+/**
+ * Handle making the call to the VDom renderer with the proper context given
+ * various build variables
+ *
+ * @param hostRef an object containing references to the element's host node,
+ * VDom nodes, and other metadata
+ * @param instance a reference to the underlying host element where it will be
+ * rendered
+ * @param elm the Host element for the component
+ * @param isInitialLoad whether or not this function is being called as part of
+ * @returns an empty promise
+ */
+const callRender = (hostRef, instance, elm, isInitialLoad) => {
     try {
         instance = instance.render() ;
         {
@@ -1738,7 +1798,7 @@ const callRender = (hostRef, instance, elm) => {
                 // or we need to update the css class/attrs on the host element
                 // DOM WRITE!
                 {
-                    renderVdom(hostRef, instance);
+                    renderVdom(hostRef, instance, isInitialLoad);
                 }
             }
         }
@@ -1934,12 +1994,12 @@ const proxyComponent = (Cstr, cmpMeta, flags) => {
                     //      customElements.define('my-component', MyComponent);
                     //    </script>
                     //  ```
-                    //  In this case if we do not unshadow here and use the value of the shadowing property, attributeChangedCallback
+                    //  In this case if we do not un-shadow here and use the value of the shadowing property, attributeChangedCallback
                     //  will be called with `newValue = "some-value"` and will set the shadowed property (this.someAttribute = "another-value")
                     //  to the value that was set inline i.e. "some-value" from above example. When
-                    //  the connectedCallback attempts to unshadow it will use "some-value" as the initial value rather than "another-value"
+                    //  the connectedCallback attempts to un-shadow it will use "some-value" as the initial value rather than "another-value"
                     //
-                    //  The case where the attribute was NOT set inline but was not set programmatically shall be handled/unshadowed
+                    //  The case where the attribute was NOT set inline but was not set programmatically shall be handled/un-shadowed
                     //  by connectedCallback as this attributeChangedCallback will not fire.
                     //
                     //  https://developers.google.com/web/fundamentals/web-components/best-practices#lazy-properties
@@ -2086,7 +2146,7 @@ const connectedCallback = (elm) => {
                 // if the slot polyfill is required we'll need to put some nodes
                 // in here to act as original content anchors as we move nodes around
                 // host element has been connected to the DOM
-                if ((// TODO(STENCIL-662): Remove code related to deprecated shadowDomShim field
+                if ((// TODO(STENCIL-854): Remove code related to legacy shadowDomShim field
                         cmpMeta.$flags$ & (4 /* CMP_FLAGS.hasSlotRelocation */ | 8 /* CMP_FLAGS.needsShadowDomShim */))) {
                     setContentReference(elm);
                 }
@@ -2130,7 +2190,12 @@ const connectedCallback = (elm) => {
             // since they would have been removed when disconnected
             addHostEventListeners(elm, hostRef, cmpMeta.$listeners$);
             // fire off connectedCallback() on component instance
-            fireConnectedCallback(hostRef.$lazyInstance$);
+            if (hostRef === null || hostRef === void 0 ? void 0 : hostRef.$lazyInstance$) {
+                fireConnectedCallback(hostRef.$lazyInstance$);
+            }
+            else if (hostRef === null || hostRef === void 0 ? void 0 : hostRef.$onReadyPromise$) {
+                hostRef.$onReadyPromise$.then(() => fireConnectedCallback(hostRef.$lazyInstance$));
+            }
         }
         endConnected();
     }
@@ -2146,18 +2211,25 @@ const setContentReference = (elm) => {
     contentRefElm['s-cn'] = true;
     elm.insertBefore(contentRefElm, elm.firstChild);
 };
-const disconnectedCallback = (elm) => {
+const disconnectInstance = (instance) => {
+    {
+        safeCall(instance, 'disconnectedCallback');
+    }
+};
+const disconnectedCallback = async (elm) => {
     if ((plt.$flags$ & 1 /* PLATFORM_FLAGS.isTmpDisconnected */) === 0) {
         const hostRef = getHostRef(elm);
-        const instance = hostRef.$lazyInstance$ ;
         {
             if (hostRef.$rmListeners$) {
                 hostRef.$rmListeners$.map((rmListener) => rmListener());
                 hostRef.$rmListeners$ = undefined;
             }
         }
-        {
-            safeCall(instance, 'disconnectedCallback');
+        if (hostRef === null || hostRef === void 0 ? void 0 : hostRef.$lazyInstance$) {
+            disconnectInstance(hostRef.$lazyInstance$);
+        }
+        else if (hostRef === null || hostRef === void 0 ? void 0 : hostRef.$onReadyPromise$) {
+            hostRef.$onReadyPromise$.then(() => disconnectInstance(hostRef.$lazyInstance$));
         }
     }
 };
@@ -2605,7 +2677,7 @@ const plt = {
     ce: (eventName, opts) => new CustomEvent(eventName, opts),
 };
 const supportsShadow = 
-// TODO(STENCIL-662): Remove code related to deprecated shadowDomShim field
+// TODO(STENCIL-854): Remove code related to legacy shadowDomShim field
 true;
 const promiseResolve = (v) => Promise.resolve(v);
 const supportsConstructableStylesheets = /*@__PURE__*/ (() => {
@@ -2662,4 +2734,4 @@ const writeTask = /*@__PURE__*/ queueTask(queueDomWrites, true);
 
 export { Fragment as F, Host as H, bootstrapLazy as b, createEvent as c, getElement as g, h, promiseResolve as p, registerInstance as r, setNonce as s };
 
-//# sourceMappingURL=index-fd30b77e.js.map
+//# sourceMappingURL=index-14c9f375.js.map