@lwc/engine-core 4.0.0 → 5.0.0

package/dist/framework/reporting.d.ts

@@ -3,7 +3,8 @@ export declare const enum ReportingEventId {
     CompilerRuntimeVersionMismatch = "CompilerRuntimeVersionMismatch",
     NonStandardAriaReflection = "NonStandardAriaReflection",
     TemplateMutation = "TemplateMutation",
-    StylesheetMutation = "StylesheetMutation"
+    StylesheetMutation = "StylesheetMutation",
+    ConnectedCallbackWhileDisconnected = "ConnectedCallbackWhileDisconnected"
 }
 export interface BasePayload {
     tagName?: string;
@@ -26,12 +27,15 @@ export interface TemplateMutationPayload extends BasePayload {
 export interface StylesheetMutationPayload extends BasePayload {
     propertyName: string;
 }
+export interface ConnectedCallbackWhileDisconnectedPayload extends BasePayload {
+}
 export type ReportingPayloadMapping = {
     [ReportingEventId.CrossRootAriaInSyntheticShadow]: CrossRootAriaInSyntheticShadowPayload;
     [ReportingEventId.CompilerRuntimeVersionMismatch]: CompilerRuntimeVersionMismatchPayload;
     [ReportingEventId.NonStandardAriaReflection]: NonStandardAriaReflectionPayload;
     [ReportingEventId.TemplateMutation]: TemplateMutationPayload;
     [ReportingEventId.StylesheetMutation]: StylesheetMutationPayload;
+    [ReportingEventId.ConnectedCallbackWhileDisconnected]: ConnectedCallbackWhileDisconnectedPayload;
 };
 export type ReportingDispatcher<T extends ReportingEventId = ReportingEventId> = (reportingEventId: T, payload: ReportingPayloadMapping[T]) => void;
 /** Callbacks to invoke when reporting is enabled **/
@@ -60,4 +64,8 @@ export declare function onReportingEnabled(callback: OnReportingEnabledCallback)
  * @param payload - data to report
  */
 export declare function report<T extends ReportingEventId>(reportingEventId: T, payload: ReportingPayloadMapping[T]): void;
+/**
+ * Return true if reporting is enabled
+ */
+export declare function isReportingEnabled(): boolean;
 export {};

package/dist/framework/vnodes.d.ts

@@ -45,8 +45,8 @@ export interface VFragment extends BaseVNode, BaseVParent {
     sel: undefined;
     type: VNodeType.Fragment;
     stable: 0 | 1;
-    leading: VText;
-    trailing: VText;
+    leading: VText | VComment;
+    trailing: VText | VComment;
 }
 export interface VText extends BaseVNode {
     type: VNodeType.Text;

package/dist/index.cjs.js

@@ -78,6 +78,12 @@ function report(reportingEventId, payload) {
         currentDispatcher$1(reportingEventId, payload);
     }
 }
+/**
+ * Return true if reporting is enabled
+ */
+function isReportingEnabled() {
+    return enabled$1;
+}
 
 /*
  * Copyright (c) 2018, salesforce.com, inc.
@@ -4161,17 +4167,16 @@ function unmount(vnode, parent, renderer, doRemove = false) {
     const { type, elm, sel } = vnode;
     // When unmounting a VNode subtree not all the elements have to removed from the DOM. The
     // subtree root, is the only element worth unmounting from the subtree.
-    if (doRemove) {
-        if (type === 5 /* VNodeType.Fragment */) {
-            unmountVNodes(vnode.children, parent, renderer, doRemove);
-        }
-        else {
-            // The vnode might or might not have a data.renderer associated to it
-            // but the removal used here is from the owner instead.
-            removeNode(elm, parent, renderer);
-        }
+    if (doRemove && type !== 5 /* VNodeType.Fragment */) {
+        // The vnode might or might not have a data.renderer associated to it
+        // but the removal used here is from the owner instead.
+        removeNode(elm, parent, renderer);
     }
     switch (type) {
+        case 5 /* VNodeType.Fragment */: {
+            unmountVNodes(vnode.children, parent, renderer, doRemove);
+            break;
+        }
         case 2 /* VNodeType.Element */: {
             // Slot content is removed to trigger slotchange event when removing slot.
             // Only required for synthetic shadow.
@@ -4710,8 +4715,10 @@ function st(fragment, key, parts) {
 }
 // [fr]agment node
 function fr(key, children, stable) {
-    const leading = t('');
-    const trailing = t('');
+    const owner = getVMBeingRendered();
+    const useCommentNodes = shared.isAPIFeatureEnabled(5 /* APIFeature.USE_COMMENTS_FOR_FRAGMENT_BOOKENDS */, owner.apiVersion);
+    const leading = useCommentNodes ? co('') : t('');
+    const trailing = useCommentNodes ? co('') : t('');
     return {
         type: 5 /* VNodeType.Fragment */,
         sel: undefined,
@@ -4719,7 +4726,7 @@ function fr(key, children, stable) {
         elm: undefined,
         children: [leading, ...children, trailing],
         stable,
-        owner: getVMBeingRendered(),
+        owner,
         leading,
         trailing,
     };
@@ -6038,6 +6045,24 @@ function runConnectedCallback(vm) {
         invokeComponentCallback(vm, connectedCallback);
         logOperationEnd(3 /* OperationId.ConnectedCallback */, vm);
     }
+    // This test only makes sense in the browser, with synthetic lifecycle, and when reporting is enabled or
+    // we're in dev mode. This is to detect a particular issue with synthetic lifecycle.
+    if (process.env.IS_BROWSER &&
+        !lwcRuntimeFlags.ENABLE_NATIVE_CUSTOM_ELEMENT_LIFECYCLE &&
+        (process.env.NODE_ENV !== 'production' || isReportingEnabled())) {
+        if (!vm.renderer.isConnected(vm.elm)) {
+            if (process.env.NODE_ENV !== 'production') {
+                logWarnOnce(`Element <${vm.tagName}> ` +
+                    `fired a \`connectedCallback\` and rendered, but was not connected to the DOM. ` +
+                    `Please ensure all components are actually connected to the DOM, e.g. using ` +
+                    `\`document.body.appendChild(element)\`. This will not be supported in future versions of ` +
+                    `LWC and could cause component errors. For details, see: https://sfdc.co/synthetic-lifecycle`);
+            }
+            report("ConnectedCallbackWhileDisconnected" /* ReportingEventId.ConnectedCallbackWhileDisconnected */, {
+                tagName: vm.tagName,
+            });
+        }
+    }
 }
 function hasWireAdapters(vm) {
     return shared.getOwnPropertyNames(vm.def.wire).length > 0;
@@ -6547,7 +6572,7 @@ function hydrateVM(vm) {
     // reset the refs; they will be set during `hydrateChildren`
     resetRefVNodes(vm);
     const { renderRoot: parentNode, renderer: { getFirstChild }, } = vm;
-    hydrateChildren(getFirstChild(parentNode), children, parentNode, vm);
+    hydrateChildren(getFirstChild(parentNode), children, parentNode, vm, false);
     runRenderedCallback(vm);
 }
 function hydrateNode(node, vnode, renderer) {
@@ -6659,7 +6684,7 @@ function hydrateStaticElement(elm, vnode, renderer) {
 }
 function hydrateFragment(elm, vnode, renderer) {
     const { children, owner } = vnode;
-    hydrateChildren(elm, children, renderer.getProperty(elm, 'parentNode'), owner);
+    hydrateChildren(elm, children, renderer.getProperty(elm, 'parentNode'), owner, true);
     return (vnode.elm = children[children.length - 1].elm);
 }
 function hydrateElement(elm, vnode, renderer) {
@@ -6691,7 +6716,7 @@ function hydrateElement(elm, vnode, renderer) {
     patchElementPropsAndAttrsAndRefs(vnode, renderer);
     if (!isDomManual) {
         const { getFirstChild } = renderer;
-        hydrateChildren(getFirstChild(elm), vnode.children, elm, owner);
+        hydrateChildren(getFirstChild(elm), vnode.children, elm, owner, false);
     }
     return elm;
 }
@@ -6733,12 +6758,16 @@ function hydrateCustomElement(elm, vnode, renderer) {
         const { getFirstChild } = renderer;
         // VM is not rendering in Light DOM, we can proceed and hydrate the slotted content.
         // Note: for Light DOM, this is handled while hydrating the VM
-        hydrateChildren(getFirstChild(elm), vnode.children, elm, vm);
+        hydrateChildren(getFirstChild(elm), vnode.children, elm, vm, false);
     }
     hydrateVM(vm);
     return elm;
 }
-function hydrateChildren(node, children, parentNode, owner) {
+function hydrateChildren(node, children, parentNode, owner, 
+// When rendering the children of a VFragment, additional siblings may follow the
+// last node of the fragment. Hydration should not fail if a trailing sibling is
+// found in this case.
+expectAddlSiblings) {
     let hasWarned = false;
     let nextNode = node;
     const { renderer } = owner;
@@ -6761,7 +6790,17 @@ function hydrateChildren(node, children, parentNode, owner) {
             }
         }
     }
-    if (nextNode) {
+    const useCommentsForBookends = shared.isAPIFeatureEnabled(5 /* APIFeature.USE_COMMENTS_FOR_FRAGMENT_BOOKENDS */, owner.apiVersion);
+    if (
+    // If 1) comments are used for bookends, and 2) we're not expecting additional siblings,
+    // and 3) there exists an additional sibling, that's a hydration failure.
+    //
+    // This preserves the previous behavior for text-node bookends where mismatches
+    // would incorrectly occur but which is unfortunately baked into the SSR hydration
+    // contract. It also preserves the behavior of valid hydration failures where the server
+    // rendered more nodes than the client.
+    (!useCommentsForBookends || !expectAddlSiblings) &&
+        nextNode) {
         hasMismatch = true;
         if (process.env.NODE_ENV !== 'production') {
             if (!hasWarned) {
@@ -7313,5 +7352,5 @@ exports.swapTemplate = swapTemplate;
 exports.track = track;
 exports.unwrap = unwrap;
 exports.wire = wire;
-/** version: 4.0.0 */
+/** version: 5.0.0 */
 //# sourceMappingURL=index.cjs.js.map