@lwc/engine-core 3.1.3 → 3.3.0

package/README.md

@@ -96,11 +96,6 @@ This experimental API enables the identification of LWC constructors.
 This experimental API enables the creation of a reactive readonly membrane around any object
 value.
 
-### register()
-
-This experimental API enables the registration of 'services' in LWC by exposing hooks into the
-component life-cycle.
-
 ### setHooks()
 
 This experimental API allows setting overridable hooks with an application specific implementation.

package/dist/framework/base-lightning-element.d.ts

@@ -20,7 +20,7 @@ export interface LightningElementConstructor {
     shadowSupportMode?: ShadowSupportMode;
     stylesheets: TemplateStylesheetFactories;
 }
-type HTMLElementTheGoodParts = Pick<Object, 'toString'> & Pick<HTMLElement, 'accessKey' | 'addEventListener' | 'children' | 'childNodes' | 'classList' | 'dir' | 'dispatchEvent' | 'draggable' | 'firstChild' | 'firstElementChild' | 'getAttribute' | 'getAttributeNS' | 'getBoundingClientRect' | 'getElementsByClassName' | 'getElementsByTagName' | 'hasAttribute' | 'hasAttributeNS' | 'hidden' | 'id' | 'isConnected' | 'lang' | 'lastChild' | 'lastElementChild' | 'ownerDocument' | 'querySelector' | 'querySelectorAll' | 'removeAttribute' | 'removeAttributeNS' | 'removeEventListener' | 'setAttribute' | 'setAttributeNS' | 'spellcheck' | 'tabIndex' | 'tagName' | 'title'>;
+type HTMLElementTheGoodParts = Pick<Object, 'toString'> & Pick<HTMLElement, 'accessKey' | 'addEventListener' | 'attachInternals' | 'children' | 'childNodes' | 'classList' | 'dir' | 'dispatchEvent' | 'draggable' | 'firstChild' | 'firstElementChild' | 'getAttribute' | 'getAttributeNS' | 'getBoundingClientRect' | 'getElementsByClassName' | 'getElementsByTagName' | 'hasAttribute' | 'hasAttributeNS' | 'hidden' | 'id' | 'isConnected' | 'lang' | 'lastChild' | 'lastElementChild' | 'ownerDocument' | 'querySelector' | 'querySelectorAll' | 'removeAttribute' | 'removeAttributeNS' | 'removeEventListener' | 'setAttribute' | 'setAttributeNS' | 'spellcheck' | 'tabIndex' | 'tagName' | 'title'>;
 type RefNodes = {
     [name: string]: Element;
 };

package/dist/framework/main.d.ts

@@ -1,5 +1,5 @@
 export { getComponentHtmlPrototype } from './def';
-export { createVM, connectRootElement, disconnectRootElement, getAssociatedVMIfPresent, } from './vm';
+export { RenderMode, ShadowMode, connectRootElement, createVM, disconnectRootElement, getAssociatedVMIfPresent, computeShadowAndRenderMode, } from './vm';
 export { createContextProviderWithRegister } from './wiring';
 export { parseFragment, parseSVGFragment } from './template';
 export { hydrateRoot } from './hydration';
@@ -18,7 +18,6 @@ export { getComponentConstructor } from './get-component-constructor';
 export type { RendererAPI, LifecycleCallback } from './renderer';
 export type { ConfigValue as WireConfigValue, ContextValue as WireContextValue, DataCallback, WireAdapter, WireAdapterConstructor, WireAdapterSchemaValue, WireContextSubscriptionPayload, WireContextSubscriptionCallback, } from './wiring';
 export { LightningElement } from './base-lightning-element';
-export { register } from './services';
 export { default as api } from './decorators/api';
 export { default as track } from './decorators/track';
 export { default as wire } from './decorators/wire';

package/dist/framework/renderer.d.ts

@@ -44,5 +44,6 @@ export interface RendererAPI {
     createCustomElement: (tagName: string, upgradeCallback: LifecycleCallback, connectedCallback?: LifecycleCallback, disconnectedCallback?: LifecycleCallback) => E;
     ownerDocument(elm: E): Document;
     registerContextConsumer: (element: E, adapterContextToken: string, subscriptionPayload: WireContextSubscriptionPayload) => void;
+    attachInternals: (elm: E) => ElementInternals;
 }
 export {};

package/dist/framework/vm.d.ts

@@ -147,6 +147,10 @@ export declare function createVM<HostNode, HostElement>(elm: HostElement, ctor:
     tagName: string;
     hydrated?: boolean;
 }): VM;
+export declare function computeShadowAndRenderMode(Ctor: LightningElementConstructor, renderer: RendererAPI): {
+    renderMode: RenderMode;
+    shadowMode: ShadowMode;
+};
 export declare function associateVM(obj: VMAssociable, vm: VM): void;
 export declare function getAssociatedVM(obj: VMAssociable): VM;
 export declare function getAssociatedVMIfPresent(obj: VMAssociable): VM | undefined;

package/dist/index.cjs.js

@@ -1458,6 +1458,7 @@ function warnIfInvokedDuringConstruction(vm, methodOrPropName) {
         logError(`this.${methodOrPropName} should not be called during the construction of the custom element for ${getComponentTag(vm)} because the element is not yet in the DOM or has no children yet.`);
     }
 }
+const supportsElementInternals = typeof ElementInternals !== 'undefined';
 // @ts-ignore
 LightningElement.prototype = {
     constructor: LightningElement,
@@ -1549,6 +1550,18 @@ LightningElement.prototype = {
         }
         return getBoundingClientRect(elm);
     },
+    attachInternals() {
+        const vm = getAssociatedVM(this);
+        const { elm, renderer: { attachInternals }, } = vm;
+        if (shared.isFalse(supportsElementInternals)) {
+            // Browsers that don't support attachInternals will need to be polyfilled before LWC is loaded.
+            throw new Error('attachInternals API is not supported in this browser environment.');
+        }
+        if (vm.renderMode === 0 /* RenderMode.Light */ || vm.shadowMode === 1 /* ShadowMode.Synthetic */) {
+            throw new Error('attachInternals API is not supported in light DOM or synthetic shadow.');
+        }
+        return attachInternals(elm);
+    },
     get isConnected() {
         const vm = getAssociatedVM(this);
         const { elm, renderer: { isConnected }, } = vm;
@@ -2590,6 +2603,14 @@ function HTMLBridgeElementFactory(SuperClass, props, methods) {
     descriptors.attributeChangedCallback = {
         value: createAttributeChangedCallback(attributeToPropMap, superAttributeChangedCallback),
     };
+    // To avoid leaking private component details, accessing internals from outside a component is not allowed.
+    descriptors.attachInternals = {
+        get() {
+            if (process.env.NODE_ENV !== 'production') {
+                logError('attachInternals cannot be accessed outside of a component. Use this.attachInternals instead.');
+            }
+        },
+    };
     // Specify attributes for which we want to reflect changes back to their corresponding
     // properties via attributeChangedCallback.
     shared.defineProperty(HTMLBridgeElement, 'observedAttributes', {
@@ -5315,44 +5336,6 @@ function getWrappedComponentsListener(vm, listener) {
     return wrappedListener;
 }
 
-/*
- * Copyright (c) 2018, salesforce.com, inc.
- * All rights reserved.
- * SPDX-License-Identifier: MIT
- * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
- */
-const Services = shared.create(null);
-const hooks = ['rendered', 'connected', 'disconnected'];
-/**
- * EXPERIMENTAL: This function allows for the registration of "services"
- * in LWC by exposing hooks into the component life-cycle. This API is
- * subject to change or being removed.
- */
-function register(service) {
-    if (process.env.NODE_ENV !== 'production') {
-        shared.assert.isTrue(shared.isObject(service), `Invalid service declaration, ${service}: service must be an object`);
-    }
-    for (let i = 0; i < hooks.length; ++i) {
-        const hookName = hooks[i];
-        if (hookName in service) {
-            let l = Services[hookName];
-            if (shared.isUndefined(l)) {
-                Services[hookName] = l = [];
-            }
-            shared.ArrayPush.call(l, service[hookName]);
-        }
-    }
-}
-function invokeServiceHook(vm, cbs) {
-    if (process.env.NODE_ENV !== 'production') {
-        shared.assert.isTrue(shared.isArray(cbs) && cbs.length > 0, `Optimize invokeServiceHook() to be invoked only when needed`);
-    }
-    const { component, def, context } = vm;
-    for (let i = 0, len = cbs.length; i < len; ++i) {
-        cbs[i].call(undefined, component, {}, def, context);
-    }
-}
-
 /*
  * Copyright (c) 2023, Salesforce.com, inc.
  * All rights reserved.
@@ -5411,12 +5394,18 @@ function resetComponentStateWhenRemoved(vm) {
 // old vnode.children is removed from the DOM.
 function removeVM(vm) {
     if (process.env.NODE_ENV !== 'production') {
-        shared.assert.isTrue(vm.state === 1 /* VMState.connected */ || vm.state === 2 /* VMState.disconnected */, `${vm} must have been connected.`);
+        if (!lwcRuntimeFlags.ENABLE_NATIVE_CUSTOM_ELEMENT_LIFECYCLE) {
+            // With native lifecycle, we cannot be certain that connectedCallback was called before a component
+            // was removed from the VDOM. If the component is disconnected, then connectedCallback will not fire
+            // in native mode, although it will fire in synthetic mode due to appendChild triggering it.
+            // See: W-14037619 for details
+            shared.assert.isTrue(vm.state === 1 /* VMState.connected */ || vm.state === 2 /* VMState.disconnected */, `${vm} must have been connected.`);
+        }
     }
     resetComponentStateWhenRemoved(vm);
 }
-function getNearestShadowAncestor(vm) {
-    let ancestor = vm.owner;
+function getNearestShadowAncestor(owner) {
+    let ancestor = owner;
     while (!shared.isNull(ancestor) && ancestor.renderMode === 0 /* RenderMode.Light */) {
         ancestor = ancestor.owner;
     }
@@ -5472,15 +5461,12 @@ function createVM(elm, ctor, renderer, options) {
         vm.debugInfo = shared.create(null);
     }
     vm.stylesheets = computeStylesheets(vm, def.ctor);
-    vm.shadowMode = computeShadowMode(vm, renderer);
+    vm.shadowMode = computeShadowMode(def, vm.owner, renderer);
     vm.tro = getTemplateReactiveObserver(vm);
     if (process.env.NODE_ENV !== 'production') {
         vm.toString = () => {
             return `[object:vm ${def.name} (${vm.idx})]`;
         };
-        if (lwcRuntimeFlags.ENABLE_FORCE_NATIVE_SHADOW_MODE_FOR_TEST) {
-            vm.shadowMode = 0 /* ShadowMode.Native */;
-        }
     }
     // Create component instance associated to the vm and the element.
     invokeComponentConstructor(vm, def.ctor);
@@ -5543,8 +5529,21 @@ function warnOnStylesheetsMutation(ctor) {
         });
     }
 }
-function computeShadowMode(vm, renderer) {
-    const { def } = vm;
+// Compute the shadowMode/renderMode without creating a VM. This is used in some scenarios like hydration.
+function computeShadowAndRenderMode(Ctor, renderer) {
+    const def = getComponentInternalDef(Ctor);
+    const { renderMode } = def;
+    // Assume null `owner` - this is what happens in hydration cases anyway
+    const shadowMode = computeShadowMode(def, /* owner */ null, renderer);
+    return { renderMode, shadowMode };
+}
+function computeShadowMode(def, owner, renderer) {
+    // Force the shadow mode to always be native. Used for running tests with synthetic shadow patches
+    // on, but components running in actual native shadow mode
+    if (process.env.NODE_ENV !== 'production' &&
+        lwcRuntimeFlags.ENABLE_FORCE_NATIVE_SHADOW_MODE_FOR_TEST) {
+        return 0 /* ShadowMode.Native */;
+    }
     const { isSyntheticShadowDefined } = renderer;
     let shadowMode;
     if (isSyntheticShadowDefined) {
@@ -5558,7 +5557,7 @@ function computeShadowMode(vm, renderer) {
                 shadowMode = 0 /* ShadowMode.Native */;
             }
             else {
-                const shadowAncestor = getNearestShadowAncestor(vm);
+                const shadowAncestor = getNearestShadowAncestor(owner);
                 if (!shared.isNull(shadowAncestor) && shadowAncestor.shadowMode === 0 /* ShadowMode.Native */) {
                     // Transitive support for native Shadow DOM. A component in native mode
                     // transitively opts all of its descendants into native.
@@ -5644,10 +5643,6 @@ function runRenderedCallback(vm) {
     if (!process.env.IS_BROWSER) {
         return;
     }
-    const { rendered } = Services;
-    if (rendered) {
-        invokeServiceHook(vm, rendered);
-    }
     if (!shared.isUndefined(renderedCallback)) {
         logOperationStart(4 /* OperationId.RenderedCallback */, vm);
         invokeComponentCallback(vm, renderedCallback);
@@ -5690,11 +5685,6 @@ function runConnectedCallback(vm) {
         return; // nothing to do since it was already connected
     }
     vm.state = 1 /* VMState.connected */;
-    // reporting connection
-    const { connected } = Services;
-    if (connected) {
-        invokeServiceHook(vm, connected);
-    }
     if (hasWireAdapters(vm)) {
         connectWireAdapters(vm);
     }
@@ -5720,11 +5710,6 @@ function runDisconnectedCallback(vm) {
         vm.isDirty = true;
     }
     vm.state = 2 /* VMState.disconnected */;
-    // reporting disconnection
-    const { disconnected } = Services;
-    if (disconnected) {
-        invokeServiceHook(vm, disconnected);
-    }
     if (hasWireAdapters(vm)) {
         disconnectWireAdapters(vm);
     }
@@ -6894,6 +6879,7 @@ exports.LightningElement = LightningElement;
 exports.__unstable__ProfilerControl = profilerControl;
 exports.__unstable__ReportingControl = reportingControl;
 exports.api = api$1;
+exports.computeShadowAndRenderMode = computeShadowAndRenderMode;
 exports.connectRootElement = connectRootElement;
 exports.createContextProviderWithRegister = createContextProviderWithRegister;
 exports.createVM = createVM;
@@ -6909,7 +6895,6 @@ exports.isComponentConstructor = isComponentConstructor;
 exports.parseFragment = parseFragment;
 exports.parseSVGFragment = parseSVGFragment;
 exports.readonly = readonly;
-exports.register = register;
 exports.registerComponent = registerComponent;
 exports.registerDecorators = registerDecorators;
 exports.registerTemplate = registerTemplate;
@@ -6921,5 +6906,5 @@ exports.swapTemplate = swapTemplate;
 exports.track = track;
 exports.unwrap = unwrap;
 exports.wire = wire;
-/** version: 3.1.3 */
+/** version: 3.3.0 */
 //# sourceMappingURL=index.cjs.js.map