@lwc/engine-core 2.14.2 → 2.15.0

package/dist/engine-core.cjs.js

@@ -3182,6 +3182,9 @@ function patch(n1, n2, renderer) {
             // VComment has no special capability, fallback to the owner's renderer
             patchComment(n1, n2, renderer);
             break;
+        case 4 /* Static */:
+            n2.elm = n1.elm;
+            break;
         case 2 /* Element */:
             patchElement(n1, n2, (_a = n2.data.renderer) !== null && _a !== void 0 ? _a : renderer);
             break;
@@ -3201,6 +3204,10 @@ function mount(node, parent, renderer, anchor) {
             // VComment has no special capability, fallback to the owner's renderer
             mountComment(node, parent, anchor, renderer);
             break;
+        case 4 /* Static */:
+            // VStatic cannot have a custom renderer associated to them, using owner's renderer
+            mountStatic(node, parent, anchor, renderer);
+            break;
         case 2 /* Element */:
             // If the vnode data has a renderer override use it, else fallback to owner's renderer
             mountElement(node, parent, anchor, (_a = node.data.renderer) !== null && _a !== void 0 ? _a : renderer);
@@ -3256,6 +3263,24 @@ function patchElement(n1, n2, renderer) {
     patchElementPropsAndAttrs$1(n1, n2, renderer);
     patchChildren(n1.children, n2.children, elm, renderer);
 }
+function mountStatic(vnode, parent, anchor, renderer) {
+    const { owner } = vnode;
+    const { cloneNode, isSyntheticShadowDefined } = renderer;
+    const elm = (vnode.elm = cloneNode(vnode.fragment, true));
+    linkNodeToShadow(elm, owner, renderer);
+    // Marks this node as Static to propagate the shadow resolver. must happen after elm is assigned to the proper shadow
+    const { renderMode, shadowMode } = owner;
+    if (isSyntheticShadowDefined) {
+        if (shadowMode === 1 /* Synthetic */ || renderMode === 0 /* Light */) {
+            elm[shared.KEY__SHADOW_STATIC] = true;
+        }
+    }
+    if (process.env.NODE_ENV !== 'production') {
+        const isLight = renderMode === 0 /* Light */;
+        patchElementWithRestrictions(elm, { isPortal: false, isLight });
+    }
+    insertNode(elm, parent, anchor, renderer);
+}
 function mountCustomElement(vnode, parent, anchor, renderer) {
     const { sel, owner } = vnode;
     const UpgradableConstructor = getUpgradableConstructor(sel, renderer);
@@ -3724,6 +3749,17 @@ const SymbolIterator = Symbol.iterator;
 function addVNodeToChildLWC(vnode) {
     shared.ArrayPush.call(getVMBeingRendered().velements, vnode);
 }
+// [st]atic node
+function st(fragment, key) {
+    return {
+        type: 4 /* Static */,
+        sel: undefined,
+        key,
+        elm: undefined,
+        fragment,
+        owner: getVMBeingRendered(),
+    };
+}
 // [h]tml node
 function h(sel, data, children = EmptyArray) {
     const vmBeingRendered = getVMBeingRendered();
@@ -4113,6 +4149,7 @@ const api = shared.freeze({
     co,
     dc,
     ti,
+    st,
     gid,
     fid,
     shc,
@@ -4264,8 +4301,7 @@ function createStylesheet(vm, stylesheets) {
         //       This works in the client, because the stylesheets are created, and cached in the VM
         //       the first time the VM renders.
         // native shadow or light DOM, SSR
-        const combinedStylesheetContent = shared.ArrayJoin.call(stylesheets, '\n');
-        return createInlineStyleVNode(combinedStylesheetContent);
+        return shared.ArrayMap.call(stylesheets, createInlineStyleVNode);
     }
     else {
         // native shadow or light DOM, DOM renderer
@@ -4433,6 +4469,59 @@ function validateLightDomTemplate(template, vm) {
         shared.assert.isTrue(shared.isUndefined(template.renderMode), `Shadow DOM components template can't render light DOM templates. Either remove the 'lwc:render-mode' directive from ${getComponentTag(vm)} or set it to 'lwc:render-mode="shadow"`);
     }
 }
+function buildParseFragmentFn(createFragmentFn) {
+    return (strings, ...keys) => {
+        const cache = shared.create(null);
+        return function () {
+            const { context: { hasScopedStyles, stylesheetToken }, shadowMode, renderer, } = getVMBeingRendered();
+            const hasStyleToken = !shared.isUndefined(stylesheetToken);
+            const isSyntheticShadow = shadowMode === 1 /* Synthetic */;
+            let cacheKey = 0;
+            if (hasStyleToken && hasScopedStyles) {
+                cacheKey |= 1 /* HAS_SCOPED_STYLE */;
+            }
+            if (hasStyleToken && isSyntheticShadow) {
+                cacheKey |= 2 /* SHADOW_MODE_SYNTHETIC */;
+            }
+            if (!shared.isUndefined(cache[cacheKey])) {
+                return cache[cacheKey];
+            }
+            const classToken = hasScopedStyles && hasStyleToken ? ' ' + stylesheetToken : '';
+            const classAttrToken = hasScopedStyles && hasStyleToken ? ` class="${stylesheetToken}"` : '';
+            const attrToken = hasStyleToken && isSyntheticShadow ? ' ' + stylesheetToken : '';
+            let htmlFragment = '';
+            for (let i = 0, n = keys.length; i < n; i++) {
+                switch (keys[i]) {
+                    case 0: // styleToken in existing class attr
+                        htmlFragment += strings[i] + classToken;
+                        break;
+                    case 1: // styleToken for added class attr
+                        htmlFragment += strings[i] + classAttrToken;
+                        break;
+                    case 2: // styleToken as attr
+                        htmlFragment += strings[i] + attrToken;
+                        break;
+                    case 3: // ${1}${2}
+                        htmlFragment += strings[i] + classAttrToken + attrToken;
+                        break;
+                }
+            }
+            htmlFragment += strings[strings.length - 1];
+            cache[cacheKey] = createFragmentFn(htmlFragment, renderer);
+            return cache[cacheKey];
+        };
+    };
+}
+// Note: at the moment this code executes, we don't have a renderer yet.
+const parseFragment = buildParseFragmentFn((html, renderer) => {
+    const { createFragment } = renderer;
+    return createFragment(html);
+});
+const parseSVGFragment = buildParseFragmentFn((html, renderer) => {
+    const { createFragment, getFirstChild } = renderer;
+    const fragment = createFragment('<svg>' + html + '</svg>');
+    return getFirstChild(fragment);
+});
 function evaluateTemplate(vm, html) {
     if (process.env.NODE_ENV !== 'production') {
         shared.assert.isTrue(shared.isFunction(html), `evaluateTemplate() second argument must be an imported template instead of ${shared.toString(html)}`);
@@ -4479,7 +4568,7 @@ function evaluateTemplate(vm, html) {
                 // Evaluate, create stylesheet and cache the produced VNode for future
                 // re-rendering.
                 const stylesheetsContent = getStylesheetsContent(vm, html);
-                context.styleVNode =
+                context.styleVNodes =
                     stylesheetsContent.length === 0
                         ? null
                         : createStylesheet(vm, stylesheetsContent);
@@ -4496,9 +4585,9 @@ function evaluateTemplate(vm, html) {
             // Set the global flag that template is being updated
             isUpdatingTemplate = true;
             vnodes = html.call(undefined, api, component, cmpSlots, context.tplCache);
-            const { styleVNode } = context;
-            if (!shared.isNull(styleVNode)) {
-                shared.ArrayUnshift.call(vnodes, styleVNode);
+            const { styleVNodes } = context;
+            if (!shared.isNull(styleVNodes)) {
+                shared.ArrayUnshift.apply(vnodes, styleVNodes);
             }
         });
     }, () => {
@@ -4863,7 +4952,7 @@ function createVM(elm, ctor, renderer, options) {
       hasTokenInClass: undefined,
       hasTokenInAttribute: undefined,
       hasScopedStyles: undefined,
-      styleVNode: null,
+      styleVNodes: null,
       tplCache: EmptyObject,
       wiredConnecting: EmptyArray,
       wiredDisconnecting: EmptyArray
@@ -5787,6 +5876,10 @@ function hydrateNode(node, vnode, renderer) {
             // VComment has no special capability, fallback to the owner's renderer
             hydratedNode = hydrateComment(node, vnode, renderer);
             break;
+        case 4 /* Static */:
+            // VStatic are cacheable and cannot have custom renderer associated to them
+            hydratedNode = hydrateStaticElement(node, vnode, renderer);
+            break;
         case 2 /* Element */:
             hydratedNode = hydrateElement(node, vnode, (_a = vnode.data.renderer) !== null && _a !== void 0 ? _a : renderer);
             break;
@@ -5830,6 +5923,13 @@ function hydrateComment(node, vnode, renderer) {
     vnode.elm = node;
     return node;
 }
+function hydrateStaticElement(elm, vnode, renderer) {
+    if (!areCompatibleNodes(vnode.fragment, elm, vnode, renderer)) {
+        return handleMismatch(elm, vnode, renderer);
+    }
+    vnode.elm = elm;
+    return elm;
+}
 function hydrateElement(elm, vnode, renderer) {
     if (!hasCorrectNodeType(vnode, elm, 1 /* ELEMENT */, renderer) ||
         !isMatchingElement(vnode, elm, renderer)) {
@@ -6065,6 +6165,39 @@ function validateStyleAttr(vnode, elm, renderer) {
     }
     return nodesAreCompatible;
 }
+function areCompatibleNodes(client, ssr, vnode, renderer) {
+    const { getProperty, getAttribute } = renderer;
+    if (getProperty(client, 'nodeType') === 3 /* TEXT */) {
+        if (!hasCorrectNodeType(vnode, ssr, 3 /* TEXT */, renderer)) {
+            return false;
+        }
+        return getProperty(client, 'nodeValue') === getProperty(ssr, 'nodeValue');
+    }
+    if (getProperty(client, 'nodeType') === 8 /* COMMENT */) {
+        if (!hasCorrectNodeType(vnode, ssr, 8 /* COMMENT */, renderer)) {
+            return false;
+        }
+        return getProperty(client, 'nodeValue') === getProperty(ssr, 'nodeValue');
+    }
+    if (!hasCorrectNodeType(vnode, ssr, 1 /* ELEMENT */, renderer)) {
+        return false;
+    }
+    let isCompatibleElements = true;
+    if (getProperty(client, 'tagName') !== getProperty(ssr, 'tagName')) {
+        if (process.env.NODE_ENV !== 'production') {
+            logError(`Hydration mismatch: expecting element with tag "${getProperty(client, 'tagName').toLowerCase()}" but found "${getProperty(ssr, 'tagName').toLowerCase()}".`, vnode.owner);
+        }
+        return false;
+    }
+    const clientAttrsNames = getProperty(client, 'getAttributeNames').call(client);
+    clientAttrsNames.forEach((attrName) => {
+        if (getAttribute(client, attrName) !== getAttribute(ssr, attrName)) {
+            logError(`Mismatch hydrating element <${getProperty(client, 'tagName').toLowerCase()}>: attribute "${attrName}" has different values, expected "${getAttribute(client, attrName)}" but found "${getAttribute(ssr, attrName)}"`, vnode.owner);
+            isCompatibleElements = false;
+        }
+    });
+    return isCompatibleElements;
+}
 
 /*
  * Copyright (c) 2018, salesforce.com, inc.
@@ -6224,6 +6357,8 @@ exports.getComponentHtmlPrototype = getComponentHtmlPrototype;
 exports.getUpgradableConstructor = getUpgradableConstructor;
 exports.hydrateRoot = hydrateRoot;
 exports.isComponentConstructor = isComponentConstructor;
+exports.parseFragment = parseFragment;
+exports.parseSVGFragment = parseSVGFragment;
 exports.readonly = readonly;
 exports.register = register;
 exports.registerComponent = registerComponent;
@@ -6237,4 +6372,4 @@ exports.swapTemplate = swapTemplate;
 exports.track = track;
 exports.unwrap = unwrap;
 exports.wire = wire;
-/* version: 2.14.2 */
+/* version: 2.15.0 */

package/dist/engine-core.js

@@ -1,7 +1,7 @@
 /* proxy-compat-disable */
 import { runtimeFlags } from '@lwc/features';
 export { setFeatureFlag, setFeatureFlagForTest } from '@lwc/features';
-import { seal, create, isFunction as isFunction$1, ArrayPush as ArrayPush$1, isUndefined as isUndefined$1, ArrayIndexOf, ArraySplice, StringToLowerCase, ArrayJoin, isNull, isFrozen, defineProperty, hasOwnProperty as hasOwnProperty$1, assign, forEach, keys, AriaPropNameToAttrNameMap, getPropertyDescriptor, defineProperties, getOwnPropertyNames as getOwnPropertyNames$1, getPrototypeOf as getPrototypeOf$1, setPrototypeOf, isObject, assert, KEY__SYNTHETIC_MODE, toString as toString$1, isFalse, isTrue, getOwnPropertyDescriptor as getOwnPropertyDescriptor$1, LWC_VERSION_COMMENT_REGEX, LWC_VERSION, freeze, htmlPropertyToAttribute, ArraySlice, StringCharCodeAt, XML_NAMESPACE, XLINK_NAMESPACE, isString, StringSlice, SVG_NAMESPACE, KEY__SHADOW_RESOLVER, isArray as isArray$1, isNumber, StringReplace, KEY__SCOPED_CSS, noop, ArrayUnshift, ArrayCopyWithin, ArrayFill, ArraySort, ArrayReverse, ArrayShift, ArrayPop } from '@lwc/shared';
+import { seal, create, isFunction as isFunction$1, ArrayPush as ArrayPush$1, isUndefined as isUndefined$1, ArrayIndexOf, ArraySplice, StringToLowerCase, ArrayJoin, isNull, isFrozen, defineProperty, hasOwnProperty as hasOwnProperty$1, assign, forEach, keys, AriaPropNameToAttrNameMap, getPropertyDescriptor, defineProperties, getOwnPropertyNames as getOwnPropertyNames$1, getPrototypeOf as getPrototypeOf$1, setPrototypeOf, isObject, assert, KEY__SYNTHETIC_MODE, toString as toString$1, isFalse, isTrue, getOwnPropertyDescriptor as getOwnPropertyDescriptor$1, LWC_VERSION_COMMENT_REGEX, LWC_VERSION, freeze, htmlPropertyToAttribute, ArraySlice, StringCharCodeAt, XML_NAMESPACE, XLINK_NAMESPACE, isString, StringSlice, SVG_NAMESPACE, KEY__SHADOW_STATIC, KEY__SHADOW_RESOLVER, isArray as isArray$1, isNumber, StringReplace, ArrayMap, KEY__SCOPED_CSS, noop, ArrayUnshift, ArrayCopyWithin, ArrayFill, ArraySort, ArrayReverse, ArrayShift, ArrayPop } from '@lwc/shared';
 
 /*
  * Copyright (c) 2018, salesforce.com, inc.
@@ -3179,6 +3179,9 @@ function patch(n1, n2, renderer) {
             // VComment has no special capability, fallback to the owner's renderer
             patchComment(n1, n2, renderer);
             break;
+        case 4 /* Static */:
+            n2.elm = n1.elm;
+            break;
         case 2 /* Element */:
             patchElement(n1, n2, (_a = n2.data.renderer) !== null && _a !== void 0 ? _a : renderer);
             break;
@@ -3198,6 +3201,10 @@ function mount(node, parent, renderer, anchor) {
             // VComment has no special capability, fallback to the owner's renderer
             mountComment(node, parent, anchor, renderer);
             break;
+        case 4 /* Static */:
+            // VStatic cannot have a custom renderer associated to them, using owner's renderer
+            mountStatic(node, parent, anchor, renderer);
+            break;
         case 2 /* Element */:
             // If the vnode data has a renderer override use it, else fallback to owner's renderer
             mountElement(node, parent, anchor, (_a = node.data.renderer) !== null && _a !== void 0 ? _a : renderer);
@@ -3253,6 +3260,24 @@ function patchElement(n1, n2, renderer) {
     patchElementPropsAndAttrs$1(n1, n2, renderer);
     patchChildren(n1.children, n2.children, elm, renderer);
 }
+function mountStatic(vnode, parent, anchor, renderer) {
+    const { owner } = vnode;
+    const { cloneNode, isSyntheticShadowDefined } = renderer;
+    const elm = (vnode.elm = cloneNode(vnode.fragment, true));
+    linkNodeToShadow(elm, owner, renderer);
+    // Marks this node as Static to propagate the shadow resolver. must happen after elm is assigned to the proper shadow
+    const { renderMode, shadowMode } = owner;
+    if (isSyntheticShadowDefined) {
+        if (shadowMode === 1 /* Synthetic */ || renderMode === 0 /* Light */) {
+            elm[KEY__SHADOW_STATIC] = true;
+        }
+    }
+    if (process.env.NODE_ENV !== 'production') {
+        const isLight = renderMode === 0 /* Light */;
+        patchElementWithRestrictions(elm, { isPortal: false, isLight });
+    }
+    insertNode(elm, parent, anchor, renderer);
+}
 function mountCustomElement(vnode, parent, anchor, renderer) {
     const { sel, owner } = vnode;
     const UpgradableConstructor = getUpgradableConstructor(sel, renderer);
@@ -3721,6 +3746,17 @@ const SymbolIterator = Symbol.iterator;
 function addVNodeToChildLWC(vnode) {
     ArrayPush$1.call(getVMBeingRendered().velements, vnode);
 }
+// [st]atic node
+function st(fragment, key) {
+    return {
+        type: 4 /* Static */,
+        sel: undefined,
+        key,
+        elm: undefined,
+        fragment,
+        owner: getVMBeingRendered(),
+    };
+}
 // [h]tml node
 function h(sel, data, children = EmptyArray) {
     const vmBeingRendered = getVMBeingRendered();
@@ -4110,6 +4146,7 @@ const api = freeze({
     co,
     dc,
     ti,
+    st,
     gid,
     fid,
     shc,
@@ -4261,8 +4298,7 @@ function createStylesheet(vm, stylesheets) {
         //       This works in the client, because the stylesheets are created, and cached in the VM
         //       the first time the VM renders.
         // native shadow or light DOM, SSR
-        const combinedStylesheetContent = ArrayJoin.call(stylesheets, '\n');
-        return createInlineStyleVNode(combinedStylesheetContent);
+        return ArrayMap.call(stylesheets, createInlineStyleVNode);
     }
     else {
         // native shadow or light DOM, DOM renderer
@@ -4430,6 +4466,59 @@ function validateLightDomTemplate(template, vm) {
         assert.isTrue(isUndefined$1(template.renderMode), `Shadow DOM components template can't render light DOM templates. Either remove the 'lwc:render-mode' directive from ${getComponentTag(vm)} or set it to 'lwc:render-mode="shadow"`);
     }
 }
+function buildParseFragmentFn(createFragmentFn) {
+    return (strings, ...keys) => {
+        const cache = create(null);
+        return function () {
+            const { context: { hasScopedStyles, stylesheetToken }, shadowMode, renderer, } = getVMBeingRendered();
+            const hasStyleToken = !isUndefined$1(stylesheetToken);
+            const isSyntheticShadow = shadowMode === 1 /* Synthetic */;
+            let cacheKey = 0;
+            if (hasStyleToken && hasScopedStyles) {
+                cacheKey |= 1 /* HAS_SCOPED_STYLE */;
+            }
+            if (hasStyleToken && isSyntheticShadow) {
+                cacheKey |= 2 /* SHADOW_MODE_SYNTHETIC */;
+            }
+            if (!isUndefined$1(cache[cacheKey])) {
+                return cache[cacheKey];
+            }
+            const classToken = hasScopedStyles && hasStyleToken ? ' ' + stylesheetToken : '';
+            const classAttrToken = hasScopedStyles && hasStyleToken ? ` class="${stylesheetToken}"` : '';
+            const attrToken = hasStyleToken && isSyntheticShadow ? ' ' + stylesheetToken : '';
+            let htmlFragment = '';
+            for (let i = 0, n = keys.length; i < n; i++) {
+                switch (keys[i]) {
+                    case 0: // styleToken in existing class attr
+                        htmlFragment += strings[i] + classToken;
+                        break;
+                    case 1: // styleToken for added class attr
+                        htmlFragment += strings[i] + classAttrToken;
+                        break;
+                    case 2: // styleToken as attr
+                        htmlFragment += strings[i] + attrToken;
+                        break;
+                    case 3: // ${1}${2}
+                        htmlFragment += strings[i] + classAttrToken + attrToken;
+                        break;
+                }
+            }
+            htmlFragment += strings[strings.length - 1];
+            cache[cacheKey] = createFragmentFn(htmlFragment, renderer);
+            return cache[cacheKey];
+        };
+    };
+}
+// Note: at the moment this code executes, we don't have a renderer yet.
+const parseFragment = buildParseFragmentFn((html, renderer) => {
+    const { createFragment } = renderer;
+    return createFragment(html);
+});
+const parseSVGFragment = buildParseFragmentFn((html, renderer) => {
+    const { createFragment, getFirstChild } = renderer;
+    const fragment = createFragment('<svg>' + html + '</svg>');
+    return getFirstChild(fragment);
+});
 function evaluateTemplate(vm, html) {
     if (process.env.NODE_ENV !== 'production') {
         assert.isTrue(isFunction$1(html), `evaluateTemplate() second argument must be an imported template instead of ${toString$1(html)}`);
@@ -4476,7 +4565,7 @@ function evaluateTemplate(vm, html) {
                 // Evaluate, create stylesheet and cache the produced VNode for future
                 // re-rendering.
                 const stylesheetsContent = getStylesheetsContent(vm, html);
-                context.styleVNode =
+                context.styleVNodes =
                     stylesheetsContent.length === 0
                         ? null
                         : createStylesheet(vm, stylesheetsContent);
@@ -4493,9 +4582,9 @@ function evaluateTemplate(vm, html) {
             // Set the global flag that template is being updated
             isUpdatingTemplate = true;
             vnodes = html.call(undefined, api, component, cmpSlots, context.tplCache);
-            const { styleVNode } = context;
-            if (!isNull(styleVNode)) {
-                ArrayUnshift.call(vnodes, styleVNode);
+            const { styleVNodes } = context;
+            if (!isNull(styleVNodes)) {
+                ArrayUnshift.apply(vnodes, styleVNodes);
             }
         });
     }, () => {
@@ -4860,7 +4949,7 @@ function createVM(elm, ctor, renderer, options) {
       hasTokenInClass: undefined,
       hasTokenInAttribute: undefined,
       hasScopedStyles: undefined,
-      styleVNode: null,
+      styleVNodes: null,
       tplCache: EmptyObject,
       wiredConnecting: EmptyArray,
       wiredDisconnecting: EmptyArray
@@ -5784,6 +5873,10 @@ function hydrateNode(node, vnode, renderer) {
             // VComment has no special capability, fallback to the owner's renderer
             hydratedNode = hydrateComment(node, vnode, renderer);
             break;
+        case 4 /* Static */:
+            // VStatic are cacheable and cannot have custom renderer associated to them
+            hydratedNode = hydrateStaticElement(node, vnode, renderer);
+            break;
         case 2 /* Element */:
             hydratedNode = hydrateElement(node, vnode, (_a = vnode.data.renderer) !== null && _a !== void 0 ? _a : renderer);
             break;
@@ -5827,6 +5920,13 @@ function hydrateComment(node, vnode, renderer) {
     vnode.elm = node;
     return node;
 }
+function hydrateStaticElement(elm, vnode, renderer) {
+    if (!areCompatibleNodes(vnode.fragment, elm, vnode, renderer)) {
+        return handleMismatch(elm, vnode, renderer);
+    }
+    vnode.elm = elm;
+    return elm;
+}
 function hydrateElement(elm, vnode, renderer) {
     if (!hasCorrectNodeType(vnode, elm, 1 /* ELEMENT */, renderer) ||
         !isMatchingElement(vnode, elm, renderer)) {
@@ -6062,6 +6162,39 @@ function validateStyleAttr(vnode, elm, renderer) {
     }
     return nodesAreCompatible;
 }
+function areCompatibleNodes(client, ssr, vnode, renderer) {
+    const { getProperty, getAttribute } = renderer;
+    if (getProperty(client, 'nodeType') === 3 /* TEXT */) {
+        if (!hasCorrectNodeType(vnode, ssr, 3 /* TEXT */, renderer)) {
+            return false;
+        }
+        return getProperty(client, 'nodeValue') === getProperty(ssr, 'nodeValue');
+    }
+    if (getProperty(client, 'nodeType') === 8 /* COMMENT */) {
+        if (!hasCorrectNodeType(vnode, ssr, 8 /* COMMENT */, renderer)) {
+            return false;
+        }
+        return getProperty(client, 'nodeValue') === getProperty(ssr, 'nodeValue');
+    }
+    if (!hasCorrectNodeType(vnode, ssr, 1 /* ELEMENT */, renderer)) {
+        return false;
+    }
+    let isCompatibleElements = true;
+    if (getProperty(client, 'tagName') !== getProperty(ssr, 'tagName')) {
+        if (process.env.NODE_ENV !== 'production') {
+            logError(`Hydration mismatch: expecting element with tag "${getProperty(client, 'tagName').toLowerCase()}" but found "${getProperty(ssr, 'tagName').toLowerCase()}".`, vnode.owner);
+        }
+        return false;
+    }
+    const clientAttrsNames = getProperty(client, 'getAttributeNames').call(client);
+    clientAttrsNames.forEach((attrName) => {
+        if (getAttribute(client, attrName) !== getAttribute(ssr, attrName)) {
+            logError(`Mismatch hydrating element <${getProperty(client, 'tagName').toLowerCase()}>: attribute "${attrName}" has different values, expected "${getAttribute(client, attrName)}" but found "${getAttribute(ssr, attrName)}"`, vnode.owner);
+            isCompatibleElements = false;
+        }
+    });
+    return isCompatibleElements;
+}
 
 /*
  * Copyright (c) 2018, salesforce.com, inc.
@@ -6198,5 +6331,5 @@ function getComponentConstructor(elm) {
     return ctor;
 }
 
-export { LightningElement, profilerControl as __unstable__ProfilerControl, api$1 as api, connectRootElement, createContextProvider, createVM, disconnectRootElement, freezeTemplate, getAssociatedVMIfPresent, getComponentConstructor, getComponentDef, getComponentHtmlPrototype, getUpgradableConstructor, hydrateRoot, isComponentConstructor, readonly, register, registerComponent, registerDecorators, registerTemplate, sanitizeAttribute, setHooks, swapComponent, swapStyle, swapTemplate, track, unwrap, wire };
-/* version: 2.14.2 */
+export { LightningElement, profilerControl as __unstable__ProfilerControl, api$1 as api, connectRootElement, createContextProvider, createVM, disconnectRootElement, freezeTemplate, getAssociatedVMIfPresent, getComponentConstructor, getComponentDef, getComponentHtmlPrototype, getUpgradableConstructor, hydrateRoot, isComponentConstructor, parseFragment, parseSVGFragment, readonly, register, registerComponent, registerDecorators, registerTemplate, sanitizeAttribute, setHooks, swapComponent, swapStyle, swapTemplate, track, unwrap, wire };
+/* version: 2.15.0 */

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@lwc/engine-core",
-    "version": "2.14.2",
+    "version": "2.15.0",
     "description": "Core LWC engine APIs.",
     "homepage": "https://lwc.dev/",
     "repository": {
@@ -25,8 +25,8 @@
         "types/"
     ],
     "dependencies": {
-        "@lwc/features": "2.14.2",
-        "@lwc/shared": "2.14.2"
+        "@lwc/features": "2.15.0",
+        "@lwc/shared": "2.15.0"
     },
     "devDependencies": {
         "observable-membrane": "2.0.0"

package/types/framework/api.d.ts

@@ -1,6 +1,7 @@
 import { SlotSet } from './vm';
 import { LightningElementConstructor } from './base-lightning-element';
-import { VNode, VNodes, VElement, VText, VCustomElement, VComment, VElementData } from './vnodes';
+import { VNode, VNodes, VElement, VText, VCustomElement, VComment, VElementData, VStatic, Key } from './vnodes';
+declare function st(fragment: Element, key: Key): VStatic;
 declare function h(sel: string, data: VElementData, children?: VNodes): VElement;
 declare function ti(value: any): number;
 declare function s(slotName: string, data: VElementData, children: VNodes, slotset: SlotSet | undefined): VElement | VNodes;
@@ -40,6 +41,7 @@ declare const api: Readonly<{
     co: typeof co;
     dc: typeof dc;
     ti: typeof ti;
+    st: typeof st;
     gid: typeof gid;
     fid: typeof fid;
     shc: typeof shc;

package/types/framework/main.d.ts

@@ -8,6 +8,7 @@ export { readonly } from './readonly';
 export { setFeatureFlag, setFeatureFlagForTest } from '@lwc/features';
 export { getComponentHtmlPrototype } from './def';
 export { createVM, connectRootElement, disconnectRootElement, getAssociatedVMIfPresent, } from './vm';
+export { parseFragment, parseSVGFragment } from './template';
 export { hydrateRoot } from './hydration';
 export { registerComponent } from './component';
 export { registerTemplate } from './secure-template';

package/types/framework/renderer.d.ts

@@ -10,6 +10,8 @@ export interface RendererAPI {
     isHydrating: () => boolean;
     insert: (node: N, parent: E, anchor: N | null) => void;
     remove: (node: N, parent: E) => void;
+    cloneNode: (node: N, deep: boolean) => N;
+    createFragment: (html: string) => N | null;
     createElement: (tagName: string, namespace?: string) => E;
     createText: (content: string) => N;
     createComment: (content: string) => N;

package/types/framework/stylesheet.d.ts

@@ -14,4 +14,4 @@ export declare type StylesheetFactory = (stylesheetToken: string | undefined, us
 export declare type TemplateStylesheetFactories = Array<StylesheetFactory | TemplateStylesheetFactories>;
 export declare function updateStylesheetToken(vm: VM, template: Template): void;
 export declare function getStylesheetsContent(vm: VM, template: Template): string[];
-export declare function createStylesheet(vm: VM, stylesheets: string[]): VNode | null;
+export declare function createStylesheet(vm: VM, stylesheets: string[]): VNode[] | null;

package/types/framework/template.d.ts

@@ -16,4 +16,6 @@ export interface Template {
 export declare let isUpdatingTemplate: boolean;
 export declare function getVMBeingRendered(): VM | null;
 export declare function setVMBeingRendered(vm: VM | null): void;
+export declare const parseFragment: (strings: string[], ...keys: number[]) => () => Element;
+export declare const parseSVGFragment: (strings: string[], ...keys: number[]) => () => Element;
 export declare function evaluateTemplate(vm: VM, html: Template): VNodes;

package/types/framework/vm.d.ts

@@ -41,8 +41,8 @@ export interface Context {
     hasTokenInAttribute: boolean | undefined;
     /** Whether or not light DOM scoped styles are present in the stylesheets. */
     hasScopedStyles: boolean | undefined;
-    /** The VNode injected in all the shadow trees to apply the associated component stylesheets. */
-    styleVNode: VNode | null;
+    /** The VNodes injected in all the shadow trees to apply the associated component stylesheets. */
+    styleVNodes: VNode[] | null;
     /** Object used by the template function to store information that can be reused between
      *  different render cycle of the same template. */
     tplCache: TemplateCache;

package/types/framework/vnodes.d.ts

@@ -5,9 +5,10 @@ export declare const enum VNodeType {
     Text = 0,
     Comment = 1,
     Element = 2,
-    CustomElement = 3
+    CustomElement = 3,
+    Static = 4
 }
-export declare type VNode = VText | VComment | VElement | VCustomElement;
+export declare type VNode = VText | VComment | VElement | VCustomElement | VStatic;
 export declare type VParentElement = VElement | VCustomElement;
 export declare type VNodes = Readonly<Array<VNode | null>>;
 export interface BaseVNode {
@@ -17,6 +18,12 @@ export interface BaseVNode {
     key: Key | undefined;
     owner: VM;
 }
+export interface VStatic extends BaseVNode {
+    type: VNodeType.Static;
+    sel: undefined;
+    key: Key;
+    fragment: Element;
+}
 export interface VText extends BaseVNode {
     type: VNodeType.Text;
     sel: undefined;