@lwc/template-compiler 2.47.0 → 2.49.0

package/dist/codegen/codegen.d.ts

@@ -1,5 +1,5 @@
 import * as t from '../shared/estree';
-import { ChildNode, Element, Expression, ComplexExpression, Literal, LWCDirectiveRenderMode, Root, EventListener } from '../shared/types';
+import { ChildNode, Element, Expression, ComplexExpression, Literal, LWCDirectiveRenderMode, Root, EventListener, RefDirective } from '../shared/types';
 import State from '../state';
 export default class CodeGen {
     /** The AST root. */
@@ -76,7 +76,8 @@ export default class CodeGen {
     genTabIndex(children: [t.Expression]): import("estree").CallExpression;
     getMemorizationId(): import("estree").Identifier;
     genBooleanAttributeExpr(bindExpr: t.Expression): import("estree").ConditionalExpression;
-    genEventListeners(listeners: EventListener[]): import("estree").ObjectExpression;
+    genEventListeners(listeners: EventListener[]): import("estree").Property;
+    genRef(ref: RefDirective): import("estree").Property;
     /**
      * This routine generates an expression that avoids
      * computing the sanitized html of a raw html if it does not change
@@ -101,5 +102,5 @@ export default class CodeGen {
      * - {value[index]} --> {$cmp.value[$cmp.index]}
      */
     bindExpression(expression: Expression | Literal | ComplexExpression): t.Expression;
-    genHoistedElement(element: Element, slotParentName?: string): t.Expression;
+    genStaticElement(element: Element, slotParentName?: string): t.Expression;
 }

package/dist/index.cjs.js

@@ -58,12 +58,6 @@ class State {
     }
 }
 
-/*
- * 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 SECURE_REGISTER_TEMPLATE_METHOD_NAME = 'registerTemplate';
 const PARSE_FRAGMENT_METHOD_NAME = 'parseFragment';
 const PARSE_SVG_FRAGMENT_METHOD_NAME = 'parseSVGFragment';
@@ -86,6 +80,8 @@ const DASHED_TAGNAME_ELEMENT_SET = new Set([
     'font-face-name',
     'missing-glyph',
 ]);
+// Subset of LWC template directives that can safely be statically optimized
+const STATIC_SAFE_DIRECTIVES = new Set(['Ref']);
 
 /*
  * Copyright (c) 2018, salesforce.com, inc.
@@ -3799,8 +3795,12 @@ function isInIteratorElement(ctx) {
     return !!(getForOfParent(ctx) || getForEachParent(ctx));
 }
 
-function checkElement(element, state) {
-    // Custom elements are not allowed to have a custom renderer hook.
+function shouldAddCustomRenderer(element, state) {
+    // Elements of type `ExternalComponent` (e.g., elements with the lwc:external directive)
+    if (state.crDirectives.has('lwc:external') && element.type === 'ExternalComponent') {
+        return true;
+    }
+    // Elements of type `Component` are not allowed to have custom renderer hooks.
     // The renderer is cascaded down from the owner(custom element) to all its child nodes who
     // do not have a renderer specified.
     // lwc:component will resolve to a custom element at runtime.
@@ -3842,7 +3842,7 @@ function isCustomRendererHookRequired(element, state) {
             return cachedResult;
         }
         else {
-            addCustomRenderer = checkElement(element, state);
+            addCustomRenderer = shouldAddCustomRenderer(element, state);
             state.crCheckedElements.set(element, addCustomRenderer);
         }
     }
@@ -3982,8 +3982,9 @@ function isStaticNode(node) {
         // TODO [#3313]: re-enable static optimization for SVGs once scope token is always lowercase
         return false;
     }
+    // it is an element
     result && (result = isElement(node));
-    // it is an element.
+    // all attrs are static-safe
     result && (result = attributes.every(({ name, value }) => {
         return (isLiteral(value) &&
             name !== 'slot' &&
@@ -3996,11 +3997,22 @@ function isStaticNode(node) {
             // Check for ScopedFragId
             !(isAllowedFragOnlyUrlsXHTML(nodeName, name, namespace) &&
                 isFragmentOnlyUrl(value.value)));
-    })); // all attrs are static
-    result && (result = directives.length === 0); // do not have any directive
-    result && (result = properties.every((prop) => isLiteral(prop.value))); // all properties are static
+    }));
+    // all directives are static-safe
+    result && (result = !directives.some((directive) => !STATIC_SAFE_DIRECTIVES.has(directive.name)));
+    // all properties are static
+    result && (result = properties.every((prop) => isLiteral(prop.value)));
     return result;
 }
+function isSafeStaticChild(childNode) {
+    if (!isBaseElement(childNode)) {
+        // don't need to check non-base-element nodes, because they don't have listeners/directives
+        return true;
+    }
+    // Bail out if any children have event listeners or directives. These are only allowed at the top level of a
+    // static fragment, because the engine currently cannot set listeners/refs/etc. on nodes inside a static fragment.
+    return childNode.listeners.length === 0 && childNode.directives.length === 0;
+}
 function collectStaticNodes(node, staticNodes, state) {
     let childrenAreStatic = true;
     let nodeIsStatic;
@@ -4015,9 +4027,7 @@ function collectStaticNodes(node, staticNodes, state) {
         node.children.forEach((childNode) => {
             collectStaticNodes(childNode, staticNodes, state);
             childrenAreStatic && (childrenAreStatic = staticNodes.has(childNode));
-            // Bail out if any children have event listeners. Event listeners are only allowed at the top level of a
-            // static fragment, because the engine currently cannot attach listeners to nodes inside a static fragment.
-            childrenAreStatic && (childrenAreStatic = !isBaseElement(childNode) || childNode.listeners.length === 0);
+            childrenAreStatic && (childrenAreStatic = isSafeStaticChild(childNode));
         });
         // for IfBlock and ElseifBlock, traverse down the else branch
         if (isConditionalParentBlock(node) && node.else) {
@@ -4464,11 +4474,16 @@ class CodeGen {
     }
     genEventListeners(listeners) {
         const listenerObj = Object.fromEntries(listeners.map((listener) => [listener.name, listener]));
-        return objectToAST(listenerObj, (key) => {
+        const listenerObjectAST = objectToAST(listenerObj, (key) => {
             const componentHandler = this.bindExpression(listenerObj[key].handler);
             const handler = this.genBind(componentHandler);
             return memorizeHandler(this, componentHandler, handler);
         });
+        return property$1(identifier('on'), listenerObjectAST);
+    }
+    genRef(ref) {
+        this.hasRefs = true;
+        return property$1(identifier('ref'), ref.value);
     }
     /**
      * This routine generates an expression that avoids
@@ -4569,7 +4584,7 @@ class CodeGen {
         });
         return expression;
     }
-    genHoistedElement(element, slotParentName) {
+    genStaticElement(element, slotParentName) {
         const key = slotParentName !== undefined
             ? `@${slotParentName}:${this.generateKey()}`
             : this.generateKey();
@@ -4595,9 +4610,20 @@ class CodeGen {
             expr,
         });
         const args = [callExpression(identifier$1, []), literal$1(key)];
-        if (element.listeners.length) {
-            const listenerObjectAST = this.genEventListeners(element.listeners);
-            args.push(objectExpression([property$1(identifier('on'), listenerObjectAST)]));
+        // Only add the third argument (databag) if this element needs it
+        if (element.listeners.length || element.directives.length) {
+            const databagProperties = [];
+            // has event listeners
+            if (element.listeners.length) {
+                databagProperties.push(this.genEventListeners(element.listeners));
+            }
+            // see STATIC_SAFE_DIRECTIVES for what's allowed here
+            for (const directive of element.directives) {
+                if (directive.name === 'Ref') {
+                    databagProperties.push(this.genRef(directive));
+                }
+            }
+            args.push(objectExpression(databagProperties));
         }
         return this._renderApiCall(RENDER_APIS.staticFragment, args);
     }
@@ -4792,7 +4818,7 @@ function transform(codeGen) {
         let res;
         if (codeGen.staticNodes.has(element) && isElement(element)) {
             // do not process children of static nodes.
-            return codeGen.genHoistedElement(element, slotParentName);
+            return codeGen.genStaticElement(element, slotParentName);
         }
         const children = transformChildren(element);
         const { name } = element;
@@ -5186,8 +5212,7 @@ function transform(codeGen) {
         }
         // Properties: lwc:ref directive
         if (ref) {
-            data.push(property$1(identifier('ref'), ref.value));
-            codeGen.hasRefs = true;
+            data.push(codeGen.genRef(ref));
         }
         if (propsObj.properties.length) {
             data.push(property$1(identifier('props'), propsObj));
@@ -5227,8 +5252,7 @@ function transform(codeGen) {
         }
         // Event handler
         if (listeners.length) {
-            const listenerObjAST = codeGen.genEventListeners(listeners);
-            data.push(property$1(identifier('on'), listenerObjAST));
+            data.push(codeGen.genEventListeners(listeners));
         }
         // SVG handling
         if (element.namespace === shared.SVG_NAMESPACE) {
@@ -5327,5 +5351,5 @@ function compile(source, config) {
 exports.compile = compile;
 exports.default = compile;
 exports.parse = parse;
-/** version: 2.47.0 */
+/** version: 2.49.0 */
 //# sourceMappingURL=index.cjs.js.map