@revolist/revogrid 4.0.28 → 4.0.30

package/hydrate/index.js

@@ -5,6 +5,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var stream = require('stream');
+
 function hydrateFactory($stencilWindow, $stencilHydrateOpts, $stencilHydrateResults, $stencilAfterHydrate, $stencilHydrateResolve) {
   var globalThis = $stencilWindow;
   var self = $stencilWindow;
@@ -128,7 +130,7 @@ const NAMESPACE = 'revo-grid';
 const BUILD = /* revo-grid */ { allRenderFn: false, appendChildSlotFix: false, asyncLoading: true, attachStyles: true, cloneNodeFix: false, cmpDidLoad: true, cmpDidRender: true, cmpDidUnload: false, cmpDidUpdate: false, cmpShouldUpdate: false, cmpWillLoad: true, cmpWillRender: true, cmpWillUpdate: false, connectedCallback: true, constructableCSS: false, cssAnnotations: true, devTools: false, disconnectedCallback: true, element: false, event: true, experimentalScopedSlotChanges: false, experimentalSlotFixes: false, formAssociated: false, hasRenderFn: true, hostListener: true, hostListenerTarget: true, hostListenerTargetBody: false, hostListenerTargetDocument: true, hostListenerTargetParent: false, hostListenerTargetWindow: false, hotModuleReplacement: false, hydrateClientSide: true, hydrateServerSide: true, hydratedAttribute: false, hydratedClass: true, hydratedSelectorName: "hydrated", invisiblePrehydration: false, isDebug: false, isDev: false, isTesting: false, lazyLoad: true, lifecycle: true, lifecycleDOMEvents: false, member: true, method: true, mode: false, observeAttribute: true, profile: false, prop: true, propBoolean: true, propMutable: true, propNumber: true, propString: true, reflect: true, scoped: false, scopedSlotTextContentFix: false, scriptDataOpts: false, shadowDelegatesFocus: false, shadowDom: false, shadowDomShim: true, slot: true, slotChildNodesFix: false, slotRelocation: true, state: true, style: true, svg: true, taskQueue: true, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: true, vdomKey: true, vdomListener: true, vdomPropOrAttr: true, vdomRef: true, vdomRender: true, vdomStyle: true, vdomText: true, vdomXlink: true, watchCallback: true };
 
 /*
- Stencil Hydrate Platform v4.18.3 | MIT Licensed | https://stenciljs.com
+ Stencil Hydrate Platform v4.19.1 | MIT Licensed | https://stenciljs.com
  */
 var __defProp = Object.defineProperty;
 var __export = (target, all) => {
@@ -144,7 +146,6 @@ var isComplexType = (o) => {
   o = typeof o;
   return o === "object" || o === "function";
 };
-var isPromise = (v) => !!v && (typeof v === "object" || typeof v === "function") && typeof v.then === "function";
 
 // src/utils/query-nonce-meta-tag-content.ts
 function queryNonceMetaTagContent(doc2) {
@@ -556,19 +557,21 @@ var registerStyle = (scopeId2, cssText, allowCS) => {
 };
 var addStyle = (styleContainerNode, cmpMeta, mode) => {
   var _a;
+  const styleContainerDocument = styleContainerNode;
+  const styleContainerShadowRoot = styleContainerNode;
   const scopeId2 = getScopeId(cmpMeta);
   const style = styles.get(scopeId2);
   styleContainerNode = styleContainerNode.nodeType === 11 /* DocumentFragment */ ? styleContainerNode : doc;
   if (style) {
     if (typeof style === "string") {
-      styleContainerNode = styleContainerNode.head || styleContainerNode;
+      styleContainerNode = styleContainerDocument.head || styleContainerNode;
       let appliedStyles = rootAppliedStyles.get(styleContainerNode);
       let styleElm;
       if (!appliedStyles) {
         rootAppliedStyles.set(styleContainerNode, appliedStyles = /* @__PURE__ */ new Set());
       }
       if (!appliedStyles.has(scopeId2)) {
-        if (styleContainerNode.host && (styleElm = styleContainerNode.querySelector(`[${HYDRATED_STYLE_ID}="${scopeId2}"]`))) {
+        if (styleContainerShadowRoot.host && (styleElm = styleContainerNode.querySelector(`[${HYDRATED_STYLE_ID}="${scopeId2}"]`))) {
           styleElm.innerHTML = style;
         } else {
           styleElm = doc.createElement("style");
@@ -763,7 +766,7 @@ var createElm = (oldParentVNode, newParentVNode, childIndex, parentElm) => {
     }
     elm = newVNode2.$elm$ = doc.createElementNS(
       isSvgMode ? SVG_NS : HTML_NS,
-      newVNode2.$flags$ & 2 /* isSlotFallback */ ? "slot-fb" : newVNode2.$tag$
+      !useNativeShadowDom && BUILD.slotRelocation && newVNode2.$flags$ & 2 /* isSlotFallback */ ? "slot-fb" : newVNode2.$tag$
     ) ;
     if (isSvgMode && newVNode2.$tag$ === "foreignObject") {
       isSvgMode = false;
@@ -1253,7 +1256,10 @@ var dispatchHooks = (hostRef, isInitialLoad) => {
   endSchedule();
   return enqueue(maybePromise, () => updateComponent(hostRef, instance, isInitialLoad));
 };
-var enqueue = (maybePromise, fn) => isPromisey(maybePromise) ? maybePromise.then(fn) : fn();
+var enqueue = (maybePromise, fn) => isPromisey(maybePromise) ? maybePromise.then(fn).catch((err2) => {
+  console.error(err2);
+  fn();
+}) : fn();
 var isPromisey = (maybePromise) => maybePromise instanceof Promise || maybePromise && maybePromise.then && typeof maybePromise.then === "function";
 var updateComponent = async (hostRef, instance, isInitialLoad) => {
   var _a;
@@ -1441,13 +1447,13 @@ var setValue = (ref, propName, newVal, cmpMeta) => {
 
 // src/runtime/proxy-component.ts
 var proxyComponent = (Cstr, cmpMeta, flags) => {
-  var _a;
+  var _a, _b;
   const prototype = Cstr.prototype;
-  if (cmpMeta.$members$) {
-    if (Cstr.watchers) {
+  if (cmpMeta.$members$ || (cmpMeta.$watchers$ || Cstr.watchers)) {
+    if (Cstr.watchers && !cmpMeta.$watchers$) {
       cmpMeta.$watchers$ = Cstr.watchers;
     }
-    const members = Object.entries(cmpMeta.$members$);
+    const members = Object.entries((_a = cmpMeta.$members$) != null ? _a : {});
     members.map(([memberName, [memberFlags]]) => {
       if ((memberFlags & 31 /* Prop */ || (flags & 2 /* proxyState */) && memberFlags & 32 /* State */)) {
         Object.defineProperty(prototype, memberName, {
@@ -1503,7 +1509,7 @@ var proxyComponent = (Cstr, cmpMeta, flags) => {
       };
       Cstr.observedAttributes = Array.from(
         /* @__PURE__ */ new Set([
-          ...Object.keys((_a = cmpMeta.$watchers$) != null ? _a : {}),
+          ...Object.keys((_b = cmpMeta.$watchers$) != null ? _b : {}),
           ...members.filter(([_, m]) => m[0] & 15 /* HasAttribute */).map(([propName, m]) => {
             var _a2;
             const attrName = m[1] || propName;
@@ -1568,7 +1574,10 @@ var initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId) => {
       customElements.whenDefined(cmpTag).then(() => hostRef.$flags$ |= 128 /* isWatchReady */);
     }
     if (Cstr && Cstr.style) {
-      let style = Cstr.style;
+      let style;
+      if (typeof Cstr.style === "string") {
+        style = Cstr.style;
+      }
       const scopeId2 = getScopeId(cmpMeta);
       if (!styles.has(scopeId2)) {
         const endRegisterStyles = createTime("registerStyles", cmpMeta.$tagName$);
@@ -1724,6 +1733,7 @@ var insertVdomAnnotations = (doc2, staticComponents) => {
   }
 };
 var parseVNodeAnnotations = (doc2, node, docData, orgLocationNodes) => {
+  var _a;
   if (node == null) {
     return;
   }
@@ -1731,7 +1741,8 @@ var parseVNodeAnnotations = (doc2, node, docData, orgLocationNodes) => {
     orgLocationNodes.push(node);
   }
   if (node.nodeType === 1 /* ElementNode */) {
-    node.childNodes.forEach((childNode) => {
+    const childNodes = [...Array.from(node.childNodes), ...Array.from(((_a = node.shadowRoot) == null ? void 0 : _a.childNodes) || [])];
+    childNodes.forEach((childNode) => {
       const hostRef = getHostRef(childNode);
       if (hostRef != null && !docData.staticComponents.has(childNode.nodeName.toLowerCase())) {
         const cmpData = {
@@ -1812,44 +1823,53 @@ var insertChildVNodeAnnotations = (doc2, vnodeChild, cmpData, hostId, depth, ind
 var hAsync = (nodeName, vnodeData, ...children) => {
   if (Array.isArray(children) && children.length > 0) {
     const flatChildren = children.flat(Infinity);
-    if (flatChildren.some(isPromise)) {
+    if (flatChildren.some((child) => child instanceof Promise)) {
       return Promise.all(flatChildren).then((resolvedChildren) => {
         return h(nodeName, vnodeData, ...resolvedChildren);
       }).catch((err2) => {
         return h(nodeName, vnodeData);
       });
     }
-    return h(nodeName, vnodeData, ...children);
+    return h(nodeName, vnodeData, ...flatChildren);
   }
   return h(nodeName, vnodeData);
 };
-
-// src/hydrate/platform/proxy-host-element.ts
-function proxyHostElement(elm, cmpMeta) {
+function proxyHostElement(elm, cmpMeta, opts) {
   if (typeof elm.componentOnReady !== "function") {
     elm.componentOnReady = componentOnReady;
   }
   if (typeof elm.forceUpdate !== "function") {
     elm.forceUpdate = forceUpdate2;
   }
-  if (cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */) {
-    elm.shadowRoot = elm;
+  if (!elm.shadowRoot && !!(cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */)) {
+    if (opts.serializeShadowRoot) {
+      elm.attachShadow({ mode: "open" });
+    } else {
+      elm.shadowRoot = elm;
+    }
   }
   if (cmpMeta.$members$ != null) {
     const hostRef = getHostRef(elm);
     const members = Object.entries(cmpMeta.$members$);
     members.forEach(([memberName, m]) => {
+      var _a, _b;
       const memberFlags = m[0];
       if (memberFlags & 31 /* Prop */) {
         const attributeName = m[1] || memberName;
-        const attrValue = elm.getAttribute(attributeName);
+        let attrValue = elm.getAttribute(attributeName);
+        if ((attrValue == null ? void 0 : attrValue.startsWith("{")) && attrValue.endsWith("}") || (attrValue == null ? void 0 : attrValue.startsWith("[")) && attrValue.endsWith("]")) {
+          try {
+            attrValue = JSON.parse(attrValue);
+          } catch (e) {
+          }
+        }
         if (attrValue != null) {
           const parsedAttrValue = parsePropertyValue(attrValue, memberFlags);
-          hostRef.$instanceValues$.set(memberName, parsedAttrValue);
+          (_a = hostRef == null ? void 0 : hostRef.$instanceValues$) == null ? void 0 : _a.set(memberName, parsedAttrValue);
         }
         const ownValue = elm[memberName];
         if (ownValue !== void 0) {
-          hostRef.$instanceValues$.set(memberName, ownValue);
+          (_b = hostRef == null ? void 0 : hostRef.$instanceValues$) == null ? void 0 : _b.set(memberName, ownValue);
           delete elm[memberName];
         }
         Object.defineProperty(elm, memberName, {
@@ -1865,8 +1885,12 @@ function proxyHostElement(elm, cmpMeta) {
       } else if (memberFlags & 64 /* Method */) {
         Object.defineProperty(elm, memberName, {
           value(...args) {
+            var _a2;
             const ref = getHostRef(this);
-            return ref.$onInstancePromise$.then(() => ref.$lazyInstance$[memberName](...args)).catch(consoleError);
+            return (_a2 = ref == null ? void 0 : ref.$onInstancePromise$) == null ? void 0 : _a2.then(() => {
+              var _a3;
+              return (_a3 = ref == null ? void 0 : ref.$lazyInstance$) == null ? void 0 : _a3[memberName](...args);
+            }).catch(consoleError);
           }
         });
       }
@@ -1874,7 +1898,8 @@ function proxyHostElement(elm, cmpMeta) {
   }
 }
 function componentOnReady() {
-  return getHostRef(this).$onReadyPromise$;
+  var _a;
+  return (_a = getHostRef(this)) == null ? void 0 : _a.$onReadyPromise$;
 }
 function forceUpdate2() {
 }
@@ -1890,7 +1915,7 @@ function hydrateApp(win2, opts, results, afterHydrate, resolve) {
   let tmrId;
   let ranCompleted = false;
   function hydratedComplete() {
-    global.clearTimeout(tmrId);
+    globalThis.clearTimeout(tmrId);
     createdElements.clear();
     connectedElements.clear();
     if (!ranCompleted) {
@@ -1931,7 +1956,7 @@ function hydrateApp(win2, opts, results, afterHydrate, resolve) {
             createdElements.add(elm);
             elm.connectedCallback = patchedConnectedCallback2;
             registerHost(elm, Cstr.cmpMeta);
-            proxyHostElement(elm, Cstr.cmpMeta);
+            proxyHostElement(elm, Cstr.cmpMeta, opts);
           }
         }
       }
@@ -1969,7 +1994,7 @@ function hydrateApp(win2, opts, results, afterHydrate, resolve) {
       patchElement2(elm);
       return elm;
     };
-    tmrId = global.setTimeout(timeoutExceeded, opts.timeout);
+    tmrId = globalThis.setTimeout(timeoutExceeded, opts.timeout);
     plt.$resourcesUrl$ = new URL(opts.resourcesUrl || "./", doc.baseURI).href;
     patchChild2(win2.document.body);
     waitLoop2().then(hydratedComplete).catch(hydratedError);
@@ -1988,6 +2013,8 @@ async function hydrateComponent(win2, results, tagName, elm, waitingElements) {
     const cmpMeta = Cstr.cmpMeta;
     if (cmpMeta != null) {
       waitingElements.add(elm);
+      const hostRef = getHostRef(this);
+      addHostEventListeners(this, hostRef, cmpMeta.$listeners$);
       try {
         connectedCallback(elm);
         await elm.componentOnReady();
@@ -2158,7 +2185,7 @@ var registerComponents = (Cstrs) => {
 var win = window;
 var doc = win.document;
 var writeTask = (cb) => {
-  process.nextTick(() => {
+  nextTick(() => {
     try {
       cb();
     } catch (e) {
@@ -2183,7 +2210,7 @@ var plt = {
   rel: (el, eventName, listener, opts) => el.removeEventListener(eventName, listener, opts),
   ce: (eventName, opts) => new win.CustomEvent(eventName, opts)
 };
-var supportsShadow = false;
+var supportsShadow = BUILD.shadowDom;
 var hostRefs = /* @__PURE__ */ new WeakMap();
 var getHostRef = (ref) => hostRefs.get(ref);
 var registerInstance = (lazyInstance, hostRef) => hostRefs.set(hostRef.$lazyInstance$ = lazyInstance, hostRef);
@@ -2199,7 +2226,6 @@ var registerHost = (elm, cmpMeta) => {
   hostRef.$onReadyPromise$ = new Promise((r) => hostRef.$onReadyResolve$ = r);
   elm["s-p"] = [];
   elm["s-rc"] = [];
-  addHostEventListeners(elm, hostRef, cmpMeta.$listeners$);
   return hostRefs.set(elm, hostRef);
 };
 var styles = /* @__PURE__ */ new Map();
@@ -3281,197 +3307,6 @@ function isProxy(k) {
     return k === 'proxyItems';
 }
 
-const appendToMap = (map, propName, value) => {
-    const items = map.get(propName);
-    if (!items) {
-        map.set(propName, [value]);
-    }
-    else if (!items.includes(value)) {
-        items.push(value);
-    }
-};
-const debounce$1 = (fn, ms) => {
-    let timeoutId;
-    return (...args) => {
-        if (timeoutId) {
-            clearTimeout(timeoutId);
-        }
-        timeoutId = setTimeout(() => {
-            timeoutId = 0;
-            fn(...args);
-        }, ms);
-    };
-};
-
-/**
- * Check if a possible element isConnected.
- * The property might not be there, so we check for it.
- *
- * We want it to return true if isConnected is not a property,
- * otherwise we would remove these elements and would not update.
- *
- * Better leak in Edge than to be useless.
- */
-const isConnected = (maybeElement) => !('isConnected' in maybeElement) || maybeElement.isConnected;
-const cleanupElements = debounce$1((map) => {
-    for (let key of map.keys()) {
-        map.set(key, map.get(key).filter(isConnected));
-    }
-}, 2000);
-const stencilSubscription = () => {
-    if (typeof getRenderingRef !== 'function') {
-        // If we are not in a stencil project, we do nothing.
-        // This function is not really exported by @stencil/core.
-        return {};
-    }
-    const elmsToUpdate = new Map();
-    return {
-        dispose: () => elmsToUpdate.clear(),
-        get: (propName) => {
-            const elm = getRenderingRef();
-            if (elm) {
-                appendToMap(elmsToUpdate, propName, elm);
-            }
-        },
-        set: (propName) => {
-            const elements = elmsToUpdate.get(propName);
-            if (elements) {
-                elmsToUpdate.set(propName, elements.filter(forceUpdate));
-            }
-            cleanupElements(elmsToUpdate);
-        },
-        reset: () => {
-            elmsToUpdate.forEach((elms) => elms.forEach(forceUpdate));
-            cleanupElements(elmsToUpdate);
-        },
-    };
-};
-
-const unwrap = (val) => (typeof val === 'function' ? val() : val);
-const createObservableMap = (defaultState, shouldUpdate = (a, b) => a !== b) => {
-    const unwrappedState = unwrap(defaultState);
-    let states = new Map(Object.entries(unwrappedState !== null && unwrappedState !== void 0 ? unwrappedState : {}));
-    const handlers = {
-        dispose: [],
-        get: [],
-        set: [],
-        reset: [],
-    };
-    const reset = () => {
-        var _a;
-        // When resetting the state, the default state may be a function - unwrap it to invoke it.
-        // otherwise, the state won't be properly reset
-        states = new Map(Object.entries((_a = unwrap(defaultState)) !== null && _a !== void 0 ? _a : {}));
-        handlers.reset.forEach((cb) => cb());
-    };
-    const dispose = () => {
-        // Call first dispose as resetting the state would
-        // cause less updates ;)
-        handlers.dispose.forEach((cb) => cb());
-        reset();
-    };
-    const get = (propName) => {
-        handlers.get.forEach((cb) => cb(propName));
-        return states.get(propName);
-    };
-    const set = (propName, value) => {
-        const oldValue = states.get(propName);
-        if (shouldUpdate(value, oldValue, propName)) {
-            states.set(propName, value);
-            handlers.set.forEach((cb) => cb(propName, value, oldValue));
-        }
-    };
-    const state = (typeof Proxy === 'undefined'
-        ? {}
-        : new Proxy(unwrappedState, {
-            get(_, propName) {
-                return get(propName);
-            },
-            ownKeys(_) {
-                return Array.from(states.keys());
-            },
-            getOwnPropertyDescriptor() {
-                return {
-                    enumerable: true,
-                    configurable: true,
-                };
-            },
-            has(_, propName) {
-                return states.has(propName);
-            },
-            set(_, propName, value) {
-                set(propName, value);
-                return true;
-            },
-        }));
-    const on = (eventName, callback) => {
-        handlers[eventName].push(callback);
-        return () => {
-            removeFromArray(handlers[eventName], callback);
-        };
-    };
-    const onChange = (propName, cb) => {
-        const unSet = on('set', (key, newValue) => {
-            if (key === propName) {
-                cb(newValue);
-            }
-        });
-        // We need to unwrap the defaultState because it might be a function.
-        // Otherwise we might not be sending the right reset value.
-        const unReset = on('reset', () => cb(unwrap(defaultState)[propName]));
-        return () => {
-            unSet();
-            unReset();
-        };
-    };
-    const use = (...subscriptions) => {
-        const unsubs = subscriptions.reduce((unsubs, subscription) => {
-            if (subscription.set) {
-                unsubs.push(on('set', subscription.set));
-            }
-            if (subscription.get) {
-                unsubs.push(on('get', subscription.get));
-            }
-            if (subscription.reset) {
-                unsubs.push(on('reset', subscription.reset));
-            }
-            if (subscription.dispose) {
-                unsubs.push(on('dispose', subscription.dispose));
-            }
-            return unsubs;
-        }, []);
-        return () => unsubs.forEach((unsub) => unsub());
-    };
-    const forceUpdate = (key) => {
-        const oldValue = states.get(key);
-        handlers.set.forEach((cb) => cb(key, oldValue, oldValue));
-    };
-    return {
-        state,
-        get,
-        set,
-        on,
-        onChange,
-        use,
-        dispose,
-        reset,
-        forceUpdate,
-    };
-};
-const removeFromArray = (array, item) => {
-    const index = array.indexOf(item);
-    if (index >= 0) {
-        array[index] = array[array.length - 1];
-        array.length--;
-    }
-};
-
-const createStore = (defaultState, shouldUpdate) => {
-    const map = createObservableMap(defaultState, shouldUpdate);
-    map.use(stencilSubscription());
-    return map;
-};
-
 /**
  * The base implementation of `_.findIndex` and `_.findLastIndex` without
  * support for iteratee shorthands.
@@ -6667,59 +6502,250 @@ function createRange$1(fromRight) {
     } else {
       end = toFinite(end);
     }
-    step = step === undefined ? (start < end ? 1 : -1) : toFinite(step);
-    return baseRange(start, end, step, fromRight);
-  };
-}
-
-var _createRange = createRange$1;
-
-var createRange = _createRange;
-
-/**
- * Creates an array of numbers (positive and/or negative) progressing from
- * `start` up to, but not including, `end`. A step of `-1` is used if a negative
- * `start` is specified without an `end` or `step`. If `end` is not specified,
- * it's set to `start` with `start` then set to `0`.
- *
- * **Note:** JavaScript follows the IEEE-754 standard for resolving
- * floating-point values which can produce unexpected results.
- *
- * @static
- * @since 0.1.0
- * @memberOf _
- * @category Util
- * @param {number} [start=0] The start of the range.
- * @param {number} end The end of the range.
- * @param {number} [step=1] The value to increment or decrement by.
- * @returns {Array} Returns the range of numbers.
- * @see _.inRange, _.rangeRight
- * @example
- *
- * _.range(4);
- * // => [0, 1, 2, 3]
- *
- * _.range(-4);
- * // => [0, -1, -2, -3]
- *
- * _.range(1, 5);
- * // => [1, 2, 3, 4]
- *
- * _.range(0, 20, 5);
- * // => [0, 5, 10, 15]
- *
- * _.range(0, -4, -1);
- * // => [0, -1, -2, -3]
- *
- * _.range(1, 4, 0);
- * // => [1, 1, 1]
- *
- * _.range(0);
- * // => []
- */
-var range = createRange();
+    step = step === undefined ? (start < end ? 1 : -1) : toFinite(step);
+    return baseRange(start, end, step, fromRight);
+  };
+}
+
+var _createRange = createRange$1;
+
+var createRange = _createRange;
+
+/**
+ * Creates an array of numbers (positive and/or negative) progressing from
+ * `start` up to, but not including, `end`. A step of `-1` is used if a negative
+ * `start` is specified without an `end` or `step`. If `end` is not specified,
+ * it's set to `start` with `start` then set to `0`.
+ *
+ * **Note:** JavaScript follows the IEEE-754 standard for resolving
+ * floating-point values which can produce unexpected results.
+ *
+ * @static
+ * @since 0.1.0
+ * @memberOf _
+ * @category Util
+ * @param {number} [start=0] The start of the range.
+ * @param {number} end The end of the range.
+ * @param {number} [step=1] The value to increment or decrement by.
+ * @returns {Array} Returns the range of numbers.
+ * @see _.inRange, _.rangeRight
+ * @example
+ *
+ * _.range(4);
+ * // => [0, 1, 2, 3]
+ *
+ * _.range(-4);
+ * // => [0, -1, -2, -3]
+ *
+ * _.range(1, 5);
+ * // => [1, 2, 3, 4]
+ *
+ * _.range(0, 20, 5);
+ * // => [0, 5, 10, 15]
+ *
+ * _.range(0, -4, -1);
+ * // => [0, -1, -2, -3]
+ *
+ * _.range(1, 4, 0);
+ * // => [1, 1, 1]
+ *
+ * _.range(0);
+ * // => []
+ */
+var range = createRange();
+
+var range_1 = range;
+
+const appendToMap = (map, propName, value) => {
+    const items = map.get(propName);
+    if (!items) {
+        map.set(propName, [value]);
+    }
+    else if (!items.includes(value)) {
+        items.push(value);
+    }
+};
+const debounce$1 = (fn, ms) => {
+    let timeoutId;
+    return (...args) => {
+        if (timeoutId) {
+            clearTimeout(timeoutId);
+        }
+        timeoutId = setTimeout(() => {
+            timeoutId = 0;
+            fn(...args);
+        }, ms);
+    };
+};
+
+/**
+ * Check if a possible element isConnected.
+ * The property might not be there, so we check for it.
+ *
+ * We want it to return true if isConnected is not a property,
+ * otherwise we would remove these elements and would not update.
+ *
+ * Better leak in Edge than to be useless.
+ */
+const isConnected = (maybeElement) => !('isConnected' in maybeElement) || maybeElement.isConnected;
+const cleanupElements = debounce$1((map) => {
+    for (let key of map.keys()) {
+        map.set(key, map.get(key).filter(isConnected));
+    }
+}, 2000);
+const stencilSubscription = () => {
+    if (typeof getRenderingRef !== 'function') {
+        // If we are not in a stencil project, we do nothing.
+        // This function is not really exported by @stencil/core.
+        return {};
+    }
+    const elmsToUpdate = new Map();
+    return {
+        dispose: () => elmsToUpdate.clear(),
+        get: (propName) => {
+            const elm = getRenderingRef();
+            if (elm) {
+                appendToMap(elmsToUpdate, propName, elm);
+            }
+        },
+        set: (propName) => {
+            const elements = elmsToUpdate.get(propName);
+            if (elements) {
+                elmsToUpdate.set(propName, elements.filter(forceUpdate));
+            }
+            cleanupElements(elmsToUpdate);
+        },
+        reset: () => {
+            elmsToUpdate.forEach((elms) => elms.forEach(forceUpdate));
+            cleanupElements(elmsToUpdate);
+        },
+    };
+};
+
+const unwrap = (val) => (typeof val === 'function' ? val() : val);
+const createObservableMap = (defaultState, shouldUpdate = (a, b) => a !== b) => {
+    const unwrappedState = unwrap(defaultState);
+    let states = new Map(Object.entries(unwrappedState !== null && unwrappedState !== void 0 ? unwrappedState : {}));
+    const handlers = {
+        dispose: [],
+        get: [],
+        set: [],
+        reset: [],
+    };
+    const reset = () => {
+        var _a;
+        // When resetting the state, the default state may be a function - unwrap it to invoke it.
+        // otherwise, the state won't be properly reset
+        states = new Map(Object.entries((_a = unwrap(defaultState)) !== null && _a !== void 0 ? _a : {}));
+        handlers.reset.forEach((cb) => cb());
+    };
+    const dispose = () => {
+        // Call first dispose as resetting the state would
+        // cause less updates ;)
+        handlers.dispose.forEach((cb) => cb());
+        reset();
+    };
+    const get = (propName) => {
+        handlers.get.forEach((cb) => cb(propName));
+        return states.get(propName);
+    };
+    const set = (propName, value) => {
+        const oldValue = states.get(propName);
+        if (shouldUpdate(value, oldValue, propName)) {
+            states.set(propName, value);
+            handlers.set.forEach((cb) => cb(propName, value, oldValue));
+        }
+    };
+    const state = (typeof Proxy === 'undefined'
+        ? {}
+        : new Proxy(unwrappedState, {
+            get(_, propName) {
+                return get(propName);
+            },
+            ownKeys(_) {
+                return Array.from(states.keys());
+            },
+            getOwnPropertyDescriptor() {
+                return {
+                    enumerable: true,
+                    configurable: true,
+                };
+            },
+            has(_, propName) {
+                return states.has(propName);
+            },
+            set(_, propName, value) {
+                set(propName, value);
+                return true;
+            },
+        }));
+    const on = (eventName, callback) => {
+        handlers[eventName].push(callback);
+        return () => {
+            removeFromArray(handlers[eventName], callback);
+        };
+    };
+    const onChange = (propName, cb) => {
+        const unSet = on('set', (key, newValue) => {
+            if (key === propName) {
+                cb(newValue);
+            }
+        });
+        // We need to unwrap the defaultState because it might be a function.
+        // Otherwise we might not be sending the right reset value.
+        const unReset = on('reset', () => cb(unwrap(defaultState)[propName]));
+        return () => {
+            unSet();
+            unReset();
+        };
+    };
+    const use = (...subscriptions) => {
+        const unsubs = subscriptions.reduce((unsubs, subscription) => {
+            if (subscription.set) {
+                unsubs.push(on('set', subscription.set));
+            }
+            if (subscription.get) {
+                unsubs.push(on('get', subscription.get));
+            }
+            if (subscription.reset) {
+                unsubs.push(on('reset', subscription.reset));
+            }
+            if (subscription.dispose) {
+                unsubs.push(on('dispose', subscription.dispose));
+            }
+            return unsubs;
+        }, []);
+        return () => unsubs.forEach((unsub) => unsub());
+    };
+    const forceUpdate = (key) => {
+        const oldValue = states.get(key);
+        handlers.set.forEach((cb) => cb(key, oldValue, oldValue));
+    };
+    return {
+        state,
+        get,
+        set,
+        on,
+        onChange,
+        use,
+        dispose,
+        reset,
+        forceUpdate,
+    };
+};
+const removeFromArray = (array, item) => {
+    const index = array.indexOf(item);
+    if (index >= 0) {
+        array[index] = array[array.length - 1];
+        array.length--;
+    }
+};
 
-var range_1 = range;
+const createStore = (defaultState, shouldUpdate) => {
+    const map = createObservableMap(defaultState, shouldUpdate);
+    map.use(stencilSubscription());
+    return map;
+};
 
 /**
  * Hide items from main collection
@@ -14698,7 +14724,7 @@ class RevoGridComponent {
             const headerProperties = Object.assign(Object.assign({}, view.headerProp), { type: view.type, additionalData: this.additionalData, viewportCol: view.viewportCol, selectionStore: view.columnSelectionStore, canResize: this.resize, readonly: this.readonly, columnFilter: !!this.filter });
             // Column headers
             const dataViews = [
-                hAsync("revogr-header", Object.assign({ key: 'f304dcc1c0ef2bc274929ef0982152905d31f761' }, headerProperties, { slot: HEADER_SLOT })),
+                hAsync("revogr-header", Object.assign({ key: 'b3c3ccd088d6a01511b07f66f7dc937617a4786d' }, headerProperties, { slot: HEADER_SLOT })),
             ];
             // Render viewport data (vertical sections)
             view.dataPorts.forEach(data => {
@@ -14720,11 +14746,11 @@ class RevoGridComponent {
         const typeCol = 'rgCol';
         const viewports = this.viewportProvider.stores;
         const dimensions = this.dimensionProvider.stores;
-        return (hAsync(Host, { key: '5eff6aab67d669ea43e09e3e78b32523ecbfdbe0', [`${UUID}`]: this.uuid }, this.hideAttribution ? null : (hAsync("revogr-attribution", { class: "attribution" })), hAsync("div", { key: '9db44dc1504b6d03273a609f1f68e48e4dc61937', class: "main-viewport", onClick: (e) => {
+        return (hAsync(Host, { key: '6c36df93ae796fbfeee95cb5ab789a1f9b0c42f1', [`${UUID}`]: this.uuid }, this.hideAttribution ? null : (hAsync("revogr-attribution", { class: "attribution" })), hAsync("div", { key: 'e5cd68158497d79d98ce4f92f1e816b60acbf6ac', class: "main-viewport", onClick: (e) => {
                 if (e.currentTarget === e.target) {
                     this.viewport.clearEdit();
                 }
-            } }, hAsync("div", { key: 'f07fe5ec8fc46cd071429d66923267f9459888bf', class: "viewports" }, hAsync("slot", { key: 'd030f89592e4e426194e7f2a8ebc0f3c49108bfb', name: "viewport" }), viewportSections, hAsync("revogr-scroll-virtual", { key: '364951111ea2eaeccc816b4b119fe270e77b83bf', class: "vertical", dimension: typeRow, viewportStore: viewports[typeRow].store, dimensionStore: dimensions[typeRow].store, ref: el => this.scrollingService.registerElement(el, 'rowScroll'), onScrollvirtual: e => this.scrollingService.proxyScroll(e.detail) }), hAsync(OrderRenderer, { key: '7ace1eff1dc24d7250cbf1fab943a864586dd9db', ref: e => (this.orderService = e) }))), hAsync("revogr-scroll-virtual", { key: '9fd93540972906cb6b77b5fd31ddf1805e54da4b', class: "horizontal", dimension: typeCol, viewportStore: viewports[typeCol].store, dimensionStore: dimensions[typeCol].store, ref: el => this.scrollingService.registerElement(el, 'colScroll'), onScrollvirtual: e => this.scrollingService.proxyScroll(e.detail) }), this.extraElements));
+            } }, hAsync("div", { key: '9f121f8e4184f38ad0f086eeabb287434dbae101', class: "viewports" }, hAsync("slot", { key: 'e234abc3d5a6b1ddbe1fb1da4e415e754444057d', name: "viewport" }), viewportSections, hAsync("revogr-scroll-virtual", { key: 'c7b915c6117a822cea1fadce5111cd665f5a43d9', class: "vertical", dimension: typeRow, viewportStore: viewports[typeRow].store, dimensionStore: dimensions[typeRow].store, ref: el => this.scrollingService.registerElement(el, 'rowScroll'), onScrollvirtual: e => this.scrollingService.proxyScroll(e.detail) }), hAsync(OrderRenderer, { key: '5e6c259216474164247f2120eb9a16786ce03e6f', ref: e => (this.orderService = e) }))), hAsync("revogr-scroll-virtual", { key: 'ce8e46b6e7913e798b8d1bd094a4c61a54b73a0a', class: "horizontal", dimension: typeCol, viewportStore: viewports[typeCol].store, dimensionStore: dimensions[typeCol].store, ref: el => this.scrollingService.registerElement(el, 'colScroll'), onScrollvirtual: e => this.scrollingService.proxyScroll(e.detail) }), this.extraElements));
     }
     get element() { return getElement(this); }
     static get watchers() { return {
@@ -15685,8 +15711,8 @@ class RevogrHeaderComponent {
             visibleProps[colData === null || colData === void 0 ? void 0 : colData.prop] = rgCol.itemIndex;
         }
         return [
-            hAsync("div", { key: '346967e82d0d9d9f7f0310f7e5827a34c0ac4e5e', class: "group-rgRow" }, hAsync(ColumnGroupsRenderer, { key: '82a8d6ad81f6432d26a680680a8b077fea6ba3cc', canResize: this.canResize, active: this.resizeHandler, visibleProps: visibleProps, providers: this.providers, groups: this.groups, dimensionCol: this.dimensionCol.state, depth: this.groupingDepth, onResize: (changedX, startIndex, endIndex) => this.onResizeGroup(changedX, startIndex, endIndex), additionalData: this.additionalData })),
-            hAsync("div", { key: '513119463e5e51caaa79a738f856bc3c1540564f', class: `${HEADER_ROW_CLASS} ${HEADER_ACTUAL_ROW_CLASS}` }, cells),
+            hAsync("div", { key: '56559a8f28d2fc0b16aebd1e486ada1e85a09799', class: "group-rgRow" }, hAsync(ColumnGroupsRenderer, { key: 'dda50768589d80ee7246d6cbcd7284356a00e673', canResize: this.canResize, active: this.resizeHandler, visibleProps: visibleProps, providers: this.providers, groups: this.groups, dimensionCol: this.dimensionCol.state, depth: this.groupingDepth, onResize: (changedX, startIndex, endIndex) => this.onResizeGroup(changedX, startIndex, endIndex), additionalData: this.additionalData })),
+            hAsync("div", { key: 'bf99026e1bb13d1394ddbdca8185761e6642477b', class: `${HEADER_ROW_CLASS} ${HEADER_ACTUAL_ROW_CLASS}` }, cells),
         ];
     }
     get providers() {
@@ -16113,7 +16139,7 @@ class RevogrScrollVirtual {
     }
     render() {
         const sizeType = this.dimension === 'rgRow' ? 'height' : 'width';
-        return (hAsync(Host, { key: '9d672a8992b1c13814270537389142ef53d322f9', onScroll: (e) => this.onScroll(e) }, hAsync("div", { key: '250886ee28842f087d815d66cbb046b38c466ebf', style: {
+        return (hAsync(Host, { key: '1bf8d494d6d65ffd27f0a663f5c62c9b60cd35e1', onScroll: (e) => this.onScroll(e) }, hAsync("div", { key: '3f554ca3e7822c9bb20fe830fc4122a0d52919ee', style: {
                 [sizeType]: `${getContentSize(this.dimensionStore.get('realSize'), this.size, this.viewportStore.get('virtualSize'))}px`,
             } })));
     }
@@ -16750,7 +16776,7 @@ var gatherActiveObservationsAtDepth = function (depth) {
     });
 };
 
-var process$1 = function () {
+var process = function () {
     var depth = 0;
     gatherActiveObservationsAtDepth(depth);
     while (hasActiveObservations()) {
@@ -16826,7 +16852,7 @@ var Scheduler = (function () {
         queueResizeObserver(function () {
             var elementsHaveResized = false;
             try {
-                elementsHaveResized = process$1();
+                elementsHaveResized = process();
             }
             finally {
                 scheduled = false;
@@ -17020,7 +17046,7 @@ exports.hydrateApp = hydrateApp;
 }
 
 /*
- Stencil Hydrate Runner v4.18.3 | MIT Licensed | https://stenciljs.com
+ Stencil Hydrate Runner v4.19.1 | MIT Licensed | https://stenciljs.com
  */
 var __defProp = Object.defineProperty;
 var __export = (target, all) => {
@@ -27418,67 +27444,50 @@ function humanReadableList(items) {
 }
 
 // src/mock-doc/serialize-node.ts
-function serializeNodeToHtml(elm, opts = {}) {
+function normalizeSerializationOptions(opts = {}) {
+  return {
+    ...opts,
+    outerHtml: typeof opts.outerHtml !== "boolean" ? false : opts.outerHtml,
+    ...opts.prettyHtml ? {
+      indentSpaces: typeof opts.indentSpaces !== "number" ? 2 : opts.indentSpaces,
+      newLines: typeof opts.newLines !== "boolean" ? true : opts.newLines
+    } : {
+      prettyHtml: false,
+      indentSpaces: typeof opts.indentSpaces !== "number" ? 0 : opts.indentSpaces,
+      newLines: typeof opts.newLines !== "boolean" ? false : opts.newLines
+    },
+    approximateLineWidth: typeof opts.approximateLineWidth !== "number" ? -1 : opts.approximateLineWidth,
+    removeEmptyAttributes: typeof opts.removeEmptyAttributes !== "boolean" ? true : opts.removeEmptyAttributes,
+    removeAttributeQuotes: typeof opts.removeAttributeQuotes !== "boolean" ? false : opts.removeAttributeQuotes,
+    removeBooleanAttributeQuotes: typeof opts.removeBooleanAttributeQuotes !== "boolean" ? false : opts.removeBooleanAttributeQuotes,
+    removeHtmlComments: typeof opts.removeHtmlComments !== "boolean" ? false : opts.removeHtmlComments,
+    serializeShadowRoot: typeof opts.serializeShadowRoot !== "boolean" ? false : opts.serializeShadowRoot,
+    fullDocument: typeof opts.fullDocument !== "boolean" ? true : opts.fullDocument
+  };
+}
+function serializeNodeToHtml(elm, serializationOptions = {}) {
+  const opts = normalizeSerializationOptions(serializationOptions);
   const output = {
     currentLineWidth: 0,
     indent: 0,
     isWithinBody: false,
     text: []
   };
-  if (opts.prettyHtml) {
-    if (typeof opts.indentSpaces !== "number") {
-      opts.indentSpaces = 2;
-    }
-    if (typeof opts.newLines !== "boolean") {
-      opts.newLines = true;
-    }
-    opts.approximateLineWidth = -1;
-  } else {
-    opts.prettyHtml = false;
-    if (typeof opts.newLines !== "boolean") {
-      opts.newLines = false;
-    }
-    if (typeof opts.indentSpaces !== "number") {
-      opts.indentSpaces = 0;
-    }
-  }
-  if (typeof opts.approximateLineWidth !== "number") {
-    opts.approximateLineWidth = -1;
-  }
-  if (typeof opts.removeEmptyAttributes !== "boolean") {
-    opts.removeEmptyAttributes = true;
-  }
-  if (typeof opts.removeAttributeQuotes !== "boolean") {
-    opts.removeAttributeQuotes = false;
-  }
-  if (typeof opts.removeBooleanAttributeQuotes !== "boolean") {
-    opts.removeBooleanAttributeQuotes = false;
-  }
-  if (typeof opts.removeHtmlComments !== "boolean") {
-    opts.removeHtmlComments = false;
-  }
-  if (typeof opts.serializeShadowRoot !== "boolean") {
-    opts.serializeShadowRoot = false;
-  }
-  if (opts.outerHtml) {
-    serializeToHtml(elm, opts, output, false);
-  } else {
-    for (let i = 0, ii = elm.childNodes.length; i < ii; i++) {
-      serializeToHtml(elm.childNodes[i], opts, output, false);
-    }
-  }
-  if (output.text[0] === "\n") {
-    output.text.shift();
-  }
-  if (output.text[output.text.length - 1] === "\n") {
-    output.text.pop();
+  let renderedNode = "";
+  const children = !opts.fullDocument && elm.body ? Array.from(elm.body.childNodes) : opts.outerHtml ? [elm] : Array.from(elm.childNodes);
+  for (let i = 0, ii = children.length; i < ii; i++) {
+    const child = children[i];
+    const chunks = Array.from(streamToHtml(child, opts, output));
+    renderedNode += chunks.join("");
   }
-  return output.text.join("");
+  return renderedNode.trim();
 }
-function serializeToHtml(node, opts, output, isShadowRoot) {
+var shadowRootTag = "mock:shadow-root";
+function* streamToHtml(node, opts, output) {
   var _a2, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p;
+  const isShadowRoot = node.nodeType === 11 /* DOCUMENT_FRAGMENT_NODE */;
   if (node.nodeType === 1 /* ELEMENT_NODE */ || isShadowRoot) {
-    const tagName = isShadowRoot ? "mock:shadow-root" : getTagName(node);
+    const tagName = isShadowRoot ? shadowRootTag : getTagName(node);
     if (tagName === "body") {
       output.isWithinBody = true;
     }
@@ -27486,17 +27495,23 @@ function serializeToHtml(node, opts, output, isShadowRoot) {
     if (ignoreTag === false) {
       const isWithinWhitespaceSensitiveNode = opts.newLines || ((_a2 = opts.indentSpaces) != null ? _a2 : 0) > 0 ? isWithinWhitespaceSensitive(node) : false;
       if (opts.newLines && !isWithinWhitespaceSensitiveNode) {
-        output.text.push("\n");
+        yield "\n";
         output.currentLineWidth = 0;
       }
       if (((_b = opts.indentSpaces) != null ? _b : 0) > 0 && !isWithinWhitespaceSensitiveNode) {
         for (let i = 0; i < output.indent; i++) {
-          output.text.push(" ");
+          yield " ";
         }
         output.currentLineWidth += output.indent;
       }
-      output.text.push("<" + tagName);
-      output.currentLineWidth += tagName.length + 1;
+      const tag = tagName === shadowRootTag ? "template" : tagName;
+      yield "<" + tag;
+      output.currentLineWidth += tag.length + 1;
+      if (tag === "template") {
+        const mode = ` shadowrootmode="open"`;
+        yield mode;
+        output.currentLineWidth += mode.length;
+      }
       const attrsLength = node.attributes.length;
       const attributes = opts.prettyHtml && attrsLength > 1 ? cloneAttributes(node.attributes, true) : node.attributes;
       for (let i = 0; i < attrsLength; i++) {
@@ -27513,27 +27528,27 @@ function serializeToHtml(node, opts, output, isShadowRoot) {
         if (attrNamespaceURI == null) {
           output.currentLineWidth += attrName.length + 1;
           if (opts.approximateLineWidth && opts.approximateLineWidth > 0 && output.currentLineWidth > opts.approximateLineWidth) {
-            output.text.push("\n" + attrName);
+            yield "\n" + attrName;
             output.currentLineWidth = 0;
           } else {
-            output.text.push(" " + attrName);
+            yield " " + attrName;
           }
         } else if (attrNamespaceURI === "http://www.w3.org/XML/1998/namespace") {
-          output.text.push(" xml:" + attrName);
+          yield " xml:" + attrName;
           output.currentLineWidth += attrName.length + 5;
         } else if (attrNamespaceURI === "http://www.w3.org/2000/xmlns/") {
           if (attrName !== "xmlns") {
-            output.text.push(" xmlns:" + attrName);
+            yield " xmlns:" + attrName;
             output.currentLineWidth += attrName.length + 7;
           } else {
-            output.text.push(" " + attrName);
+            yield " " + attrName;
             output.currentLineWidth += attrName.length + 1;
           }
         } else if (attrNamespaceURI === XLINK_NS) {
-          output.text.push(" xlink:" + attrName);
+          yield " xlink:" + attrName;
           output.currentLineWidth += attrName.length + 7;
         } else {
-          output.text.push(" " + attrNamespaceURI + ":" + attrName);
+          yield " " + attrNamespaceURI + ":" + attrName;
           output.currentLineWidth += attrNamespaceURI.length + attrName.length + 2;
         }
         if (opts.prettyHtml && attrName === "class") {
@@ -27548,43 +27563,45 @@ function serializeToHtml(node, opts, output, isShadowRoot) {
           }
         }
         if (opts.removeAttributeQuotes && CAN_REMOVE_ATTR_QUOTES.test(attrValue)) {
-          output.text.push("=" + escapeString(attrValue, true));
+          yield "=" + escapeString(attrValue, true);
           output.currentLineWidth += attrValue.length + 1;
         } else {
-          output.text.push('="' + escapeString(attrValue, true) + '"');
+          yield '="' + escapeString(attrValue, true) + '"';
           output.currentLineWidth += attrValue.length + 3;
         }
       }
       if (node.hasAttribute("style")) {
         const cssText = node.style.cssText;
         if (opts.approximateLineWidth && opts.approximateLineWidth > 0 && output.currentLineWidth + cssText.length + 10 > opts.approximateLineWidth) {
-          output.text.push(`
-style="${cssText}">`);
+          yield `
+style="${cssText}">`;
           output.currentLineWidth = 0;
         } else {
-          output.text.push(` style="${cssText}">`);
+          yield ` style="${cssText}">`;
           output.currentLineWidth += cssText.length + 10;
         }
       } else {
-        output.text.push(">");
+        yield ">";
         output.currentLineWidth += 1;
       }
     }
     if (EMPTY_ELEMENTS.has(tagName) === false) {
-      if (opts.serializeShadowRoot && node.shadowRoot != null) {
+      const shadowRoot = node.shadowRoot;
+      if (opts.serializeShadowRoot && shadowRoot != null) {
         output.indent = output.indent + ((_c = opts.indentSpaces) != null ? _c : 0);
-        serializeToHtml(node.shadowRoot, opts, output, true);
+        yield* streamToHtml(shadowRoot, opts, output);
         output.indent = output.indent - ((_d = opts.indentSpaces) != null ? _d : 0);
         if (opts.newLines && (node.childNodes.length === 0 || node.childNodes.length === 1 && node.childNodes[0].nodeType === 3 /* TEXT_NODE */ && ((_e = node.childNodes[0].nodeValue) == null ? void 0 : _e.trim()) === "")) {
-          output.text.push("\n");
+          yield "\n";
           output.currentLineWidth = 0;
           for (let i = 0; i < output.indent; i++) {
-            output.text.push(" ");
+            yield " ";
           }
           output.currentLineWidth += output.indent;
         }
       }
       if (opts.excludeTagContent == null || opts.excludeTagContent.includes(tagName) === false) {
+        const tag = tagName === shadowRootTag ? "template" : tagName;
         const childNodes = tagName === "template" ? node.content.childNodes : node.childNodes;
         const childNodeLength = childNodes.length;
         if (childNodeLength > 0) {
@@ -27595,17 +27612,17 @@ style="${cssText}">`);
               output.indent = output.indent + ((_h = opts.indentSpaces) != null ? _h : 0);
             }
             for (let i = 0; i < childNodeLength; i++) {
-              serializeToHtml(childNodes[i], opts, output, false);
+              yield* streamToHtml(childNodes[i], opts, output);
             }
             if (ignoreTag === false) {
               if (opts.newLines && !isWithinWhitespaceSensitiveNode) {
-                output.text.push("\n");
+                yield "\n";
                 output.currentLineWidth = 0;
               }
               if (((_i = opts.indentSpaces) != null ? _i : 0) > 0 && !isWithinWhitespaceSensitiveNode) {
                 output.indent = output.indent - ((_j = opts.indentSpaces) != null ? _j : 0);
                 for (let i = 0; i < output.indent; i++) {
-                  output.text.push(" ");
+                  yield " ";
                 }
                 output.currentLineWidth += output.indent;
               }
@@ -27613,13 +27630,13 @@ style="${cssText}">`);
           }
         }
         if (ignoreTag === false) {
-          output.text.push("</" + tagName + ">");
-          output.currentLineWidth += tagName.length + 3;
+          yield "</" + tag + ">";
+          output.currentLineWidth += tag.length + 3;
         }
       }
     }
     if (((_k = opts.approximateLineWidth) != null ? _k : 0) > 0 && STRUCTURE_ELEMENTS.has(tagName)) {
-      output.text.push("\n");
+      yield "\n";
       output.currentLineWidth = 0;
     }
     if (tagName === "body") {
@@ -27631,27 +27648,27 @@ style="${cssText}">`);
       const trimmedTextContent = textContent.trim();
       if (trimmedTextContent === "") {
         if (isWithinWhitespaceSensitive(node)) {
-          output.text.push(textContent);
+          yield textContent;
           output.currentLineWidth += textContent.length;
         } else if (((_l = opts.approximateLineWidth) != null ? _l : 0) > 0 && !output.isWithinBody) {
         } else if (!opts.prettyHtml) {
           output.currentLineWidth += 1;
           if (opts.approximateLineWidth && opts.approximateLineWidth > 0 && output.currentLineWidth > opts.approximateLineWidth) {
-            output.text.push("\n");
+            yield "\n";
             output.currentLineWidth = 0;
           } else {
-            output.text.push(" ");
+            yield " ";
           }
         }
       } else {
         const isWithinWhitespaceSensitiveNode = opts.newLines || ((_m = opts.indentSpaces) != null ? _m : 0) > 0 || opts.prettyHtml ? isWithinWhitespaceSensitive(node) : false;
         if (opts.newLines && !isWithinWhitespaceSensitiveNode) {
-          output.text.push("\n");
+          yield "\n";
           output.currentLineWidth = 0;
         }
         if (((_n = opts.indentSpaces) != null ? _n : 0) > 0 && !isWithinWhitespaceSensitiveNode) {
           for (let i = 0; i < output.indent; i++) {
-            output.text.push(" ");
+            yield " ";
           }
           output.currentLineWidth += output.indent;
         }
@@ -27660,15 +27677,15 @@ style="${cssText}">`);
           const parentTagName = node.parentNode != null && node.parentNode.nodeType === 1 /* ELEMENT_NODE */ ? node.parentNode.nodeName : null;
           if (typeof parentTagName === "string" && NON_ESCAPABLE_CONTENT.has(parentTagName)) {
             if (isWithinWhitespaceSensitive(node)) {
-              output.text.push(textContent);
+              yield textContent;
             } else {
-              output.text.push(trimmedTextContent);
+              yield trimmedTextContent;
               textContentLength = trimmedTextContent.length;
             }
             output.currentLineWidth += textContentLength;
           } else {
             if (opts.prettyHtml && !isWithinWhitespaceSensitiveNode) {
-              output.text.push(escapeString(textContent.replace(/\s\s+/g, " ").trim(), false));
+              yield escapeString(textContent.replace(/\s\s+/g, " ").trim(), false);
               output.currentLineWidth += textContentLength;
             } else {
               if (isWithinWhitespaceSensitive(node)) {
@@ -27690,7 +27707,7 @@ style="${cssText}">`);
                 }
                 output.currentLineWidth += textContentLength;
               }
-              output.text.push(escapeString(textContent, false));
+              yield escapeString(textContent, false);
             }
           }
         }
@@ -27698,27 +27715,27 @@ style="${cssText}">`);
     }
   } else if (node.nodeType === 8 /* COMMENT_NODE */) {
     const nodeValue = node.nodeValue;
-    if (opts.removeHtmlComments) {
-      const isHydrateAnnotation = (nodeValue == null ? void 0 : nodeValue.startsWith(CONTENT_REF_ID + ".")) || (nodeValue == null ? void 0 : nodeValue.startsWith(ORG_LOCATION_ID + ".")) || (nodeValue == null ? void 0 : nodeValue.startsWith(SLOT_NODE_ID + ".")) || (nodeValue == null ? void 0 : nodeValue.startsWith(TEXT_NODE_ID + "."));
-      if (!isHydrateAnnotation) {
-        return;
-      }
+    const isHydrateAnnotation = (nodeValue == null ? void 0 : nodeValue.startsWith(CONTENT_REF_ID + ".")) || (nodeValue == null ? void 0 : nodeValue.startsWith(ORG_LOCATION_ID + ".")) || (nodeValue == null ? void 0 : nodeValue.startsWith(SLOT_NODE_ID + ".")) || (nodeValue == null ? void 0 : nodeValue.startsWith(TEXT_NODE_ID + "."));
+    if (opts.removeHtmlComments && !isHydrateAnnotation) {
+      return;
     }
     const isWithinWhitespaceSensitiveNode = opts.newLines || ((_o = opts.indentSpaces) != null ? _o : 0) > 0 ? isWithinWhitespaceSensitive(node) : false;
     if (opts.newLines && !isWithinWhitespaceSensitiveNode) {
-      output.text.push("\n");
+      yield "\n";
       output.currentLineWidth = 0;
     }
     if (((_p = opts.indentSpaces) != null ? _p : 0) > 0 && !isWithinWhitespaceSensitiveNode) {
       for (let i = 0; i < output.indent; i++) {
-        output.text.push(" ");
+        yield " ";
       }
       output.currentLineWidth += output.indent;
     }
-    output.text.push("<!--" + nodeValue + "-->");
-    output.currentLineWidth += nodeValue.length + 7;
+    yield "<!--" + nodeValue + "-->";
+    if (nodeValue) {
+      output.currentLineWidth += nodeValue.length + 7;
+    }
   } else if (node.nodeType === 10 /* DOCUMENT_TYPE_NODE */) {
-    output.text.push("<!doctype html>");
+    yield "<!doctype html>";
   }
 }
 var AMP_REGEX = /&/g;
@@ -27743,7 +27760,7 @@ function escapeString(str, attrMode) {
 }
 function isWithinWhitespaceSensitive(node) {
   let _node = node;
-  while (_node != null) {
+  while (_node == null ? void 0 : _node.nodeName) {
     if (WHITESPACE_SENSITIVE.has(_node.nodeName)) {
       return true;
     }
@@ -28059,6 +28076,10 @@ Testing components with ElementInternals is fully supported in e2e tests.`
   get shadowRoot() {
     return this.__shadowRoot || null;
   }
+  /**
+   * Set shadow root for element
+   * @param shadowRoot - ShadowRoot to set
+   */
   set shadowRoot(shadowRoot) {
     if (shadowRoot != null) {
       shadowRoot.host = this;
@@ -29845,14 +29866,16 @@ var WINDOW_PROPS = [
 ];
 var GLOBAL_CONSTRUCTORS = [
   ["CustomEvent", MockCustomEvent],
+  ["DocumentFragment", MockDocumentFragment],
+  ["DOMParser", MockDOMParser],
   ["Event", MockEvent],
-  ["Headers", MockHeaders],
   ["FocusEvent", MockFocusEvent],
+  ["Headers", MockHeaders],
   ["KeyboardEvent", MockKeyboardEvent],
   ["MouseEvent", MockMouseEvent],
   ["Request", MockRequest],
   ["Response", MockResponse],
-  ["DOMParser", MockDOMParser],
+  ["ShadowRoot", MockDocumentFragment],
   ["HTMLAnchorElement", MockAnchorElement],
   ["HTMLBaseElement", MockBaseElement],
   ["HTMLButtonElement", MockButtonElement],
@@ -30063,6 +30086,7 @@ var nativeClearTimeout = clearTimeout;
 var nativeSetInterval = setInterval;
 var nativeSetTimeout = setTimeout;
 var nativeURL = URL;
+var nativeWindow = globalThis.window;
 var MockWindow = class {
   constructor(html = null) {
     if (html !== false) {
@@ -30089,10 +30113,10 @@ var MockWindow = class {
   blur() {
   }
   cancelAnimationFrame(id) {
-    this.__clearTimeout(id);
+    this.__clearTimeout.call(nativeWindow || this, id);
   }
   cancelIdleCallback(id) {
-    this.__clearTimeout(id);
+    this.__clearTimeout.call(nativeWindow || this, id);
   }
   get CharacterData() {
     if (this.__charDataCstr == null) {
@@ -30110,10 +30134,10 @@ var MockWindow = class {
     this.__charDataCstr = charDataCstr;
   }
   clearInterval(id) {
-    this.__clearInterval(id);
+    this.__clearInterval.call(nativeWindow || this, id);
   }
   clearTimeout(id) {
-    this.__clearTimeout(id);
+    this.__clearTimeout.call(nativeWindow || this, id);
   }
   close() {
     resetWindow(this);
@@ -30413,20 +30437,24 @@ var MockWindow = class {
       }
       return intervalId;
     }
-    const timeoutId = this.__setTimeout(() => {
-      if (this.__timeouts) {
-        this.__timeouts.delete(timeoutId);
-        try {
-          callback(...args);
-        } catch (e) {
-          if (this.console) {
-            this.console.error(e);
-          } else {
-            console.error(e);
+    const timeoutId = this.__setTimeout.call(
+      nativeWindow || this,
+      () => {
+        if (this.__timeouts) {
+          this.__timeouts.delete(timeoutId);
+          try {
+            callback(...args);
+          } catch (e) {
+            if (this.console) {
+              this.console.error(e);
+            } else {
+              console.error(e);
+            }
           }
         }
-      }
-    }, ms);
+      },
+      ms
+    );
     if (this.__timeouts) {
       this.__timeouts.add(timeoutId);
     }
@@ -30437,20 +30465,24 @@ var MockWindow = class {
       this.__timeouts = /* @__PURE__ */ new Set();
     }
     ms = Math.min(ms, this.__maxTimeout);
-    const timeoutId = this.__setTimeout(() => {
-      if (this.__timeouts) {
-        this.__timeouts.delete(timeoutId);
-        try {
-          callback(...args);
-        } catch (e) {
-          if (this.console) {
-            this.console.error(e);
-          } else {
-            console.error(e);
+    const timeoutId = this.__setTimeout.call(
+      nativeWindow || this,
+      () => {
+        if (this.__timeouts) {
+          this.__timeouts.delete(timeoutId);
+          try {
+            callback(...args);
+          } catch (e) {
+            if (this.console) {
+              this.console.error(e);
+            } else {
+              console.error(e);
+            }
           }
         }
-      }
-    }, ms);
+      },
+      ms
+    );
     if (this.__timeouts) {
       this.__timeouts.add(timeoutId);
     }
@@ -31025,7 +31057,6 @@ function createWindowFromHtml(templateHtml, uniqueId) {
 
 // src/utils/helpers.ts
 var isString = (v) => typeof v === "string";
-var isPromise = (v) => !!v && (typeof v === "object" || typeof v === "function") && typeof v.then === "function";
 
 // src/utils/message-utils.ts
 var catchError = (diagnostics, err2, msg) => {
@@ -31116,6 +31147,7 @@ var unwrapErr = (result) => {
 
 // src/compiler/html/canonical-link.ts
 var updateCanonicalLink = (doc, href) => {
+  var _a2;
   let canonicalLinkElm = doc.head.querySelector('link[rel="canonical"]');
   if (typeof href === "string") {
     if (canonicalLinkElm == null) {
@@ -31128,7 +31160,7 @@ var updateCanonicalLink = (doc, href) => {
     if (canonicalLinkElm != null) {
       const existingHref = canonicalLinkElm.getAttribute("href");
       if (!existingHref) {
-        canonicalLinkElm.parentNode.removeChild(canonicalLinkElm);
+        (_a2 = canonicalLinkElm.parentNode) == null ? void 0 : _a2.removeChild(canonicalLinkElm);
       }
     }
   }
@@ -32162,10 +32194,10 @@ function renderBuildDiagnostic(results, level, header, msg) {
   return diagnostic;
 }
 function renderBuildError(results, msg) {
-  return renderBuildDiagnostic(results, "error", "Hydrate Error", msg);
+  return renderBuildDiagnostic(results, "error", "Hydrate Error", msg || "");
 }
 function renderCatchError(results, err2) {
-  const diagnostic = renderBuildError(results, null);
+  const diagnostic = renderBuildError(results);
   if (err2 != null) {
     if (err2.stack != null) {
       diagnostic.messageText = err2.stack.toString();
@@ -32227,10 +32259,11 @@ function runtimeLog(pathname, type, msgs) {
 
 // src/hydrate/runner/window-initialize.ts
 function initializeWindow(win, doc, opts, results) {
-  try {
-    win.location.href = opts.url;
-  } catch (e) {
-    renderCatchError(results, e);
+  if (typeof opts.url === "string") {
+    try {
+      win.location.href = opts.url;
+    } catch (e) {
+    }
   }
   if (typeof opts.userAgent === "string") {
     try {
@@ -32280,134 +32313,99 @@ function initializeWindow(win, doc, opts, results) {
 }
 
 // src/hydrate/runner/render.ts
-function renderToString(html, options) {
+var NOOP = () => {
+};
+function streamToString(html, option) {
+  return renderToString(html, option, true);
+}
+function renderToString(html, options, asStream) {
   const opts = normalizeHydrateOptions(options);
   opts.serializeToHtml = true;
-  return new Promise((resolve) => {
-    let win;
-    const results = generateHydrateResults(opts);
-    if (hasError(results.diagnostics)) {
-      resolve(results);
-    } else if (typeof html === "string") {
-      try {
-        opts.destroyWindow = true;
-        opts.destroyDocument = true;
-        win = new MockWindow(html);
-        render(win, opts, results, resolve);
-      } catch (e) {
-        if (win && win.close) {
-          win.close();
-        }
-        win = null;
-        renderCatchError(results, e);
-        resolve(results);
+  opts.fullDocument = typeof opts.fullDocument === "boolean" ? opts.fullDocument : true;
+  opts.serializeShadowRoot = Boolean(opts.serializeShadowRoot);
+  opts.constrainTimeouts = false;
+  return hydrateDocument(html, opts, asStream);
+}
+function hydrateDocument(doc, options, asStream) {
+  const opts = normalizeHydrateOptions(options);
+  let win = null;
+  const results = generateHydrateResults(opts);
+  if (hasError(results.diagnostics)) {
+    return Promise.resolve(results);
+  }
+  if (typeof doc === "string") {
+    try {
+      opts.destroyWindow = true;
+      opts.destroyDocument = true;
+      win = new MockWindow(doc);
+      if (!asStream) {
+        return render(win, opts, results).then(() => results);
       }
-    } else if (isValidDocument(html)) {
-      try {
-        opts.destroyDocument = false;
-        win = patchDomImplementation(html, opts);
-        render(win, opts, results, resolve);
-      } catch (e) {
-        if (win && win.close) {
-          win.close();
-        }
-        win = null;
-        renderCatchError(results, e);
-        resolve(results);
+      return renderStream(win, opts, results);
+    } catch (e) {
+      if (win && win.close) {
+        win.close();
       }
-    } else {
-      renderBuildError(results, `Invalid html or document. Must be either a valid "html" string, or DOM "document".`);
-      resolve(results);
+      win = null;
+      renderCatchError(results, e);
+      return Promise.resolve(results);
     }
-  });
-}
-function hydrateDocument(doc, options) {
-  const opts = normalizeHydrateOptions(options);
-  opts.serializeToHtml = false;
-  return new Promise((resolve) => {
-    let win;
-    const results = generateHydrateResults(opts);
-    if (hasError(results.diagnostics)) {
-      resolve(results);
-    } else if (typeof doc === "string") {
-      try {
-        opts.destroyWindow = true;
-        opts.destroyDocument = true;
-        win = new MockWindow(doc);
-        render(win, opts, results, resolve);
-      } catch (e) {
-        if (win && win.close) {
-          win.close();
-        }
-        win = null;
-        renderCatchError(results, e);
-        resolve(results);
+  }
+  if (isValidDocument(doc)) {
+    try {
+      opts.destroyDocument = false;
+      win = patchDomImplementation(doc, opts);
+      if (!asStream) {
+        return render(win, opts, results).then(() => results);
       }
-    } else if (isValidDocument(doc)) {
-      try {
-        opts.destroyDocument = false;
-        win = patchDomImplementation(doc, opts);
-        render(win, opts, results, resolve);
-      } catch (e) {
-        if (win && win.close) {
-          win.close();
-        }
-        win = null;
-        renderCatchError(results, e);
-        resolve(results);
+      return renderStream(win, opts, results);
+    } catch (e) {
+      if (win && win.close) {
+        win.close();
       }
-    } else {
-      renderBuildError(results, `Invalid html or document. Must be either a valid "html" string, or DOM "document".`);
-      resolve(results);
+      win = null;
+      renderCatchError(results, e);
+      return Promise.resolve(results);
     }
-  });
+  }
+  renderBuildError(results, `Invalid html or document. Must be either a valid "html" string, or DOM "document".`);
+  return Promise.resolve(results);
 }
-function render(win, opts, results, resolve) {
-  if (!process.__stencilErrors) {
+async function render(win, opts, results) {
+  if ("process" in globalThis && typeof process.on === "function" && !process.__stencilErrors) {
     process.__stencilErrors = true;
     process.on("unhandledRejection", (e) => {
       console.log("unhandledRejection", e);
     });
   }
   initializeWindow(win, win.document, opts, results);
-  if (typeof opts.beforeHydrate === "function") {
-    try {
-      const rtn = opts.beforeHydrate(win.document);
-      if (isPromise(rtn)) {
-        rtn.then(() => {
-          hydrateFactory(win, opts, results, afterHydrate, resolve);
-        });
-      } else {
-        hydrateFactory(win, opts, results, afterHydrate, resolve);
-      }
-    } catch (e) {
-      renderCatchError(results, e);
-      finalizeHydrate(win, win.document, opts, results, resolve);
-    }
-  } else {
-    hydrateFactory(win, opts, results, afterHydrate, resolve);
+  const beforeHydrateFn = typeof opts.beforeHydrate === "function" ? opts.beforeHydrate(win.document) : NOOP;
+  try {
+    await Promise.resolve(beforeHydrateFn(win.document));
+    return new Promise((resolve) => hydrateFactory(win, opts, results, afterHydrate, resolve));
+  } catch (e) {
+    renderCatchError(results, e);
+    return finalizeHydrate(win, win.document, opts, results);
   }
 }
-function afterHydrate(win, opts, results, resolve) {
-  if (typeof opts.afterHydrate === "function") {
-    try {
-      const rtn = opts.afterHydrate(win.document);
-      if (isPromise(rtn)) {
-        rtn.then(() => {
-          finalizeHydrate(win, win.document, opts, results, resolve);
-        });
-      } else {
-        finalizeHydrate(win, win.document, opts, results, resolve);
-      }
-    } catch (e) {
-      renderCatchError(results, e);
-      finalizeHydrate(win, win.document, opts, results, resolve);
-    }
-  } else {
-    finalizeHydrate(win, win.document, opts, results, resolve);
+function renderStream(win, opts, results) {
+  async function* processRender() {
+    const renderResult = await render(win, opts, results);
+    yield renderResult.html;
+  }
+  return stream.Readable.from(processRender());
+}
+async function afterHydrate(win, opts, results, resolve) {
+  const afterHydrateFn = typeof opts.afterHydrate === "function" ? opts.afterHydrate(win.document) : NOOP;
+  try {
+    await Promise.resolve(afterHydrateFn(win.document));
+    return resolve(finalizeHydrate(win, win.document, opts, results));
+  } catch (e) {
+    renderCatchError(results, e);
+    return resolve(finalizeHydrate(win, win.document, opts, results));
   }
 }
-function finalizeHydrate(win, doc, opts, results, resolve) {
+function finalizeHydrate(win, doc, opts, results) {
   try {
     inspectElement(results, doc.documentElement, 0);
     if (opts.removeUnusedStyles !== false) {
@@ -32459,20 +32457,24 @@ function finalizeHydrate(win, doc, opts, results, resolve) {
   } catch (e) {
     renderCatchError(results, e);
   }
-  if (opts.destroyWindow) {
-    try {
-      if (!opts.destroyDocument) {
-        win.document = null;
-        doc.defaultView = null;
-      }
-      if (win.close) {
-        win.close();
-      }
-    } catch (e) {
-      renderCatchError(results, e);
+  destroyWindow(win, doc, opts, results);
+  return results;
+}
+function destroyWindow(win, doc, opts, results) {
+  if (!opts.destroyWindow) {
+    return;
+  }
+  try {
+    if (!opts.destroyDocument) {
+      win.document = null;
+      doc.defaultView = null;
+    }
+    if (win.close) {
+      win.close();
     }
+  } catch (e) {
+    renderCatchError(results, e);
   }
-  resolve(results);
 }
 function serializeDocumentToString(doc, opts) {
   return serializeNodeToHtml(doc, {
@@ -32483,7 +32485,8 @@ function serializeDocumentToString(doc, opts) {
     removeBooleanAttributeQuotes: opts.removeBooleanAttributeQuotes,
     removeEmptyAttributes: opts.removeEmptyAttributes,
     removeHtmlComments: opts.removeHtmlComments,
-    serializeShadowRoot: false
+    serializeShadowRoot: opts.serializeShadowRoot,
+    fullDocument: opts.fullDocument
   });
 }
 function isValidDocument(doc) {
@@ -32504,3 +32507,4 @@ exports.createWindowFromHtml = createWindowFromHtml;
 exports.hydrateDocument = hydrateDocument;
 exports.renderToString = renderToString;
 exports.serializeDocumentToString = serializeDocumentToString;
+exports.streamToString = streamToString;