chore: "merge master"

salesforce · Dec 6, 2024 · 6e6c722 · 6e6c722
2 parents 8d6d2e4 + 7701069
commit 6e6c722
Show file tree

Hide file tree

Showing 223 changed files with 1,307 additions and 283 deletions.
diff --git a/.gitignore b/.gitignore
@@ -8,6 +8,7 @@ coverage/
 .project/
 .nx
 .nx-cache
+.eslintcache
 
 lib/
 __benchmarks_results__/

diff --git a/package.json b/package.json
@@ -9,7 +9,7 @@
     },
     "scripts": {
         "prepare": "husky && yarn build",
-        "lint": "eslint .",
+        "lint": "eslint . --cache",
         "format": "prettier --write .",
         "bundlesize": "node scripts/bundlesize/bundlesize.mjs",
         "build": "nx run-many --target=build --exclude=@lwc/perf-benchmarks,@lwc/perf-benchmarks-components,@lwc/integration-tests,lwc",
@@ -74,11 +74,11 @@
         "vitest": "^2.1.8"
     },
     "lint-staged": {
-        "*.{js,mjs,ts}": "eslint",
+        "*.{js,mjs,ts}": "eslint --cache",
         "*.{css,js,json,md,mjs,ts,yaml,yml}": "prettier --write",
         "{packages/**/package.json,scripts/tasks/check-and-rewrite-package-json.js}": "node ./scripts/tasks/check-and-rewrite-package-json.js",
         "{LICENSE-CORE.md,**/LICENSE.md,yarn.lock,scripts/tasks/generate-license-files.js,scripts/shared/bundled-dependencies.js}": "node ./scripts/tasks/generate-license-files.js",
-        "*.{only,skip}": "eslint --no-eslintrc --plugin '@lwc/eslint-plugin-lwc-internal' --rule '@lwc/lwc-internal/forbidden-filename: error'"
+        "*.{only,skip}": "eslint --cache --no-eslintrc --plugin '@lwc/eslint-plugin-lwc-internal' --rule '@lwc/lwc-internal/forbidden-filename: error'"
     },
     "workspaces": [
         "packages/@lwc/*",

diff --git a/packages/@lwc/engine-core/src/framework/hydration.ts b/packages/@lwc/engine-core/src/framework/hydration.ts
@@ -63,6 +63,11 @@ import type {
 import type { VM } from './vm';
 import type { RendererAPI } from './renderer';
 
+type Classes = Omit<Set<string>, 'add'>;
+
+// Used as a perf optimization to avoid creating and discarding sets unnecessarily.
+const EMPTY_SET: Classes = new Set<string>();
+
 // These values are the ones from Node.nodeType (https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType)
 const enum EnvNodeTypes {
     ELEMENT = 1,
@@ -618,6 +623,23 @@ function validateAttrs(
     return nodesAreCompatible;
 }
 
+function checkClassesCompatibility(first: Classes, second: Classes): boolean {
+    if (first.size !== second.size) {
+        return false;
+    }
+    for (const f of first) {
+        if (!second.has(f)) {
+            return false;
+        }
+    }
+    for (const s of second) {
+        if (!first.has(s)) {
+            return false;
+        }
+    }
+    return true;
+}
+
 function validateClassAttr(
     vnode: VBaseElement | VStatic,
     elm: Element,
@@ -634,16 +656,18 @@ function validateClassAttr(
 
     // Use a Set because we don't care to validate mismatches for 1) different ordering in SSR vs CSR, or 2)
     // duplicated class names. These don't have an effect on rendered styles.
-    const elmClasses = new Set(ArrayFrom(elm.classList));
-    let vnodeClasses: Set<string>;
+    const elmClasses = elm.classList.length ? new Set(ArrayFrom(elm.classList)) : EMPTY_SET;
+    let vnodeClasses: Classes;
 
     if (!isUndefined(className)) {
         // ignore empty spaces entirely, filter them out using `filter(..., Boolean)`
-        vnodeClasses = new Set(ArrayFilter.call(StringSplit.call(className, /\s+/), Boolean));
+        const classes = ArrayFilter.call(StringSplit.call(className, /\s+/), Boolean);
+        vnodeClasses = classes.length ? new Set(classes) : EMPTY_SET;
     } else if (!isUndefined(classMap)) {
-        vnodeClasses = new Set(keys(classMap));
+        const classes = keys(classMap);
+        vnodeClasses = classes.length ? new Set(classes) : EMPTY_SET;
     } else {
-        vnodeClasses = new Set();
+        vnodeClasses = EMPTY_SET;
     }
 
     // ---------- Step 2: handle the scope tokens
@@ -658,7 +682,11 @@ function validateClassAttr(
     // Consequently, hydration mismatches will occur if scoped CSS token classnames
     // are rendered during SSR. This needs to be accounted for when validating.
     if (!isNull(scopeToken)) {
-        vnodeClasses.add(scopeToken);
+        if (vnodeClasses === EMPTY_SET) {
+            vnodeClasses = new Set([scopeToken]);
+        } else {
+            (vnodeClasses as Set<string>).add(scopeToken);
+        }
     }
 
     // This tells us which `*-host` scope token was rendered to the element's class.
@@ -672,25 +700,10 @@ function validateClassAttr(
 
     // ---------- Step 3: check for compatibility
 
-    let nodesAreCompatible = true;
+    const classesAreCompatible = checkClassesCompatibility(vnodeClasses, elmClasses);
 
-    if (vnodeClasses.size !== elmClasses.size) {
-        nodesAreCompatible = false;
-    } else {
-        for (const vnodeClass of vnodeClasses) {
-            if (!elmClasses.has(vnodeClass)) {
-                nodesAreCompatible = false;
-            }
-        }
-        for (const elmClass of elmClasses) {
-            if (!vnodeClasses.has(elmClass)) {
-                nodesAreCompatible = false;
-            }
-        }
-    }
-
-    if (process.env.NODE_ENV !== 'production' && !nodesAreCompatible) {
-        const prettyPrint = (set: Set<string>) =>
+    if (process.env.NODE_ENV !== 'production' && !classesAreCompatible) {
+        const prettyPrint = (set: Classes) =>
             JSON.stringify(ArrayJoin.call(ArraySort.call(ArrayFrom(set)), ' '));
         logWarn(
             `Mismatch hydrating element <${getProperty(
@@ -703,7 +716,7 @@ function validateClassAttr(
         );
     }
 
-    return nodesAreCompatible;
+    return classesAreCompatible;
 }
 
 function validateStyleAttr(

diff --git a/...ests__/fixtures/context-slotted/error.txt → ...preserve-comments-on/empty copy/error.txt b/...ests__/fixtures/context-slotted/error.txt → ...preserve-comments-on/empty copy/error.txt
diff --git a/.../src/__tests__/fixtures/adjacent-text-nodes/preserve-comments-on/empty copy/expected.html b/.../src/__tests__/fixtures/adjacent-text-nodes/preserve-comments-on/empty copy/expected.html
@@ -0,0 +1,9 @@
+<x-comments-text>
+  <template shadowrootmode="open">
+    <!---->
+    ‍
+    <!---->
+    <!-- preserved comment after true -->
+    <!-- preserved comment after false -->
+  </template>
+</x-comments-text>
diff --git a/...erver/src/__tests__/fixtures/adjacent-text-nodes/preserve-comments-on/empty copy/index.js b/...erver/src/__tests__/fixtures/adjacent-text-nodes/preserve-comments-on/empty copy/index.js
@@ -0,0 +1,3 @@
+export const tagName = 'x-comments-text';
+export { default } from 'x/comments-text';
+export * from 'x/comments-text';
diff --git a/...ent-text-nodes/preserve-comments-on/empty copy/modules/x/comments-text/comments-text.html b/...ent-text-nodes/preserve-comments-on/empty copy/modules/x/comments-text/comments-text.html
@@ -0,0 +1,6 @@
+<template lwc:preserve-comments>
+    <template lwc:if={isTrue}>{foo}{bar}{baz}</template>
+    <!-- preserved comment after true -->
+    <template lwc:if={isFalse}>{foo}{bar}{baz}</template>
+    <!-- preserved comment after false -->
+</template>
diff --git a/...acent-text-nodes/preserve-comments-on/empty copy/modules/x/comments-text/comments-text.js b/...acent-text-nodes/preserve-comments-on/empty copy/modules/x/comments-text/comments-text.js
@@ -0,0 +1,9 @@
+import { LightningElement } from 'lwc';
+
+export default class extends LightningElement {
+    isTrue = true;
+    isFalse = false;
+    foo = '';
+    bar = undefined;
+    baz = null;
+}
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/attribute-aria/dynamic/expected.html b/packages/@lwc/engine-server/src/__tests__/fixtures/attribute-aria/dynamic/expected.html
@@ -14,7 +14,7 @@
       <template shadowrootmode="open">
         <div>
         </div>
-        <x-grandchild aria-activedescendant="null" aria-atomic="null" aria-autocomplete="null" aria-braillelabel="null" aria-brailleroledescription="null" aria-busy="null" aria-checked="null" aria-colcount="null" aria-colindex="null" aria-colindextext="null" aria-colspan="null" aria-controls="null" aria-current="null" aria-describedby="null" aria-description="null" aria-details="null" aria-disabled="null" aria-errormessage="null" aria-expanded="null" aria-flowto="null" aria-haspopup="null" aria-hidden="null" aria-invalid="null" aria-keyshortcuts="null" aria-label="null" aria-labelledby="null" aria-level="null" aria-live="null" aria-modal="null" aria-multiline="null" aria-multiselectable="null" aria-orientation="null" aria-owns="null" aria-placeholder="null" aria-posinset="null" aria-pressed="null" aria-readonly="null" aria-relevant="null" aria-required="null" aria-roledescription="null" aria-rowcount="null" aria-rowindex="null" aria-rowindextext="null" aria-rowspan="null" aria-selected="null" aria-setsize="null" aria-sort="null" aria-valuemax="null" aria-valuemin="null" aria-valuenow="null" aria-valuetext="null" role="null">
+        <x-grandchild>
           <template shadowrootmode="open">
           </template>
         </x-grandchild>

diff --git a/...__tests__/fixtures/attribute-class/with-scoped-styles-only-in-child/dynamic/expected.html b/...__tests__/fixtures/attribute-class/with-scoped-styles-only-in-child/dynamic/expected.html
@@ -5,7 +5,7 @@
         <style class="lwc-5h3d35cke7v" type="text/css">
           :host {background: blue;}
         </style>
-        <div class="lwc-5h3d35cke7v">
+        <div>
         </div>
         <x-grandchild class="lwc-5h3d35cke7v">
           <template shadowrootmode="open">
@@ -18,7 +18,7 @@
         <style class="lwc-5h3d35cke7v" type="text/css">
           :host {background: blue;}
         </style>
-        <div class="lwc-5h3d35cke7v">
+        <div>
         </div>
         <x-grandchild class="lwc-5h3d35cke7v">
           <template shadowrootmode="open">
@@ -31,7 +31,7 @@
         <style class="lwc-5h3d35cke7v" type="text/css">
           :host {background: blue;}
         </style>
-        <div class="lwc-5h3d35cke7v">
+        <div>
         </div>
         <x-grandchild class="lwc-5h3d35cke7v">
           <template shadowrootmode="open">
@@ -44,7 +44,7 @@
         <style class="lwc-5h3d35cke7v" type="text/css">
           :host {background: blue;}
         </style>
-        <div class="lwc-5h3d35cke7v">
+        <div>
         </div>
         <x-grandchild class="lwc-5h3d35cke7v">
           <template shadowrootmode="open">
@@ -57,7 +57,7 @@
         <style class="lwc-5h3d35cke7v" type="text/css">
           :host {background: blue;}
         </style>
-        <div class="lwc-5h3d35cke7v">
+        <div>
         </div>
         <x-grandchild class="lwc-5h3d35cke7v">
           <template shadowrootmode="open">
@@ -70,7 +70,7 @@
         <style class="lwc-5h3d35cke7v" type="text/css">
           :host {background: blue;}
         </style>
-        <div class="lwc-5h3d35cke7v">
+        <div>
         </div>
         <x-grandchild class="lwc-5h3d35cke7v">
           <template shadowrootmode="open">
@@ -83,7 +83,7 @@
         <style class="lwc-5h3d35cke7v" type="text/css">
           :host {background: blue;}
         </style>
-        <div class="lwc-5h3d35cke7v">
+        <div>
         </div>
         <x-grandchild class="lwc-5h3d35cke7v">
           <template shadowrootmode="open">
@@ -96,7 +96,7 @@
         <style class="lwc-5h3d35cke7v" type="text/css">
           :host {background: blue;}
         </style>
-        <div class="lwc-5h3d35cke7v">
+        <div>
         </div>
         <x-grandchild class="lwc-5h3d35cke7v">
           <template shadowrootmode="open">
@@ -109,7 +109,7 @@
         <style class="lwc-5h3d35cke7v" type="text/css">
           :host {background: blue;}
         </style>
-        <div class="lwc-5h3d35cke7v">
+        <div>
         </div>
         <x-grandchild class="lwc-5h3d35cke7v">
           <template shadowrootmode="open">
@@ -122,7 +122,7 @@
         <style class="lwc-5h3d35cke7v" type="text/css">
           :host {background: blue;}
         </style>
-        <div class="lwc-5h3d35cke7v">
+        <div>
         </div>
         <x-grandchild class="lwc-5h3d35cke7v">
           <template shadowrootmode="open">

diff --git a/...ne-server/src/__tests__/fixtures/attribute-class/with-scoped-styles/dynamic/expected.html b/...ne-server/src/__tests__/fixtures/attribute-class/with-scoped-styles/dynamic/expected.html
@@ -8,7 +8,7 @@
         <style class="lwc-5h3d35cke7v" type="text/css">
           :host {background: blue;}
         </style>
-        <div class="lwc-5h3d35cke7v">
+        <div>
         </div>
         <x-grandchild class="lwc-42b236sbaik-host lwc-5h3d35cke7v" data-lwc-host-scope-token="lwc-42b236sbaik-host">
           <template shadowrootmode="open">
@@ -24,7 +24,7 @@
         <style class="lwc-5h3d35cke7v" type="text/css">
           :host {background: blue;}
         </style>
-        <div class="lwc-5h3d35cke7v">
+        <div>
         </div>
         <x-grandchild class="lwc-42b236sbaik-host lwc-5h3d35cke7v" data-lwc-host-scope-token="lwc-42b236sbaik-host">
           <template shadowrootmode="open">
@@ -40,7 +40,7 @@
         <style class="lwc-5h3d35cke7v" type="text/css">
           :host {background: blue;}
         </style>
-        <div class="lwc-5h3d35cke7v">
+        <div>
         </div>
         <x-grandchild class="lwc-42b236sbaik-host lwc-5h3d35cke7v" data-lwc-host-scope-token="lwc-42b236sbaik-host">
           <template shadowrootmode="open">
@@ -56,7 +56,7 @@
         <style class="lwc-5h3d35cke7v" type="text/css">
           :host {background: blue;}
         </style>
-        <div class="lwc-5h3d35cke7v">
+        <div>
         </div>
         <x-grandchild class="lwc-42b236sbaik-host lwc-5h3d35cke7v" data-lwc-host-scope-token="lwc-42b236sbaik-host">
           <template shadowrootmode="open">
@@ -72,7 +72,7 @@
         <style class="lwc-5h3d35cke7v" type="text/css">
           :host {background: blue;}
         </style>
-        <div class="lwc-5h3d35cke7v">
+        <div>
         </div>
         <x-grandchild class="lwc-42b236sbaik-host lwc-5h3d35cke7v" data-lwc-host-scope-token="lwc-42b236sbaik-host">
           <template shadowrootmode="open">
@@ -88,7 +88,7 @@
         <style class="lwc-5h3d35cke7v" type="text/css">
           :host {background: blue;}
         </style>
-        <div class="lwc-5h3d35cke7v">
+        <div>
         </div>
         <x-grandchild class="lwc-42b236sbaik-host lwc-5h3d35cke7v" data-lwc-host-scope-token="lwc-42b236sbaik-host">
           <template shadowrootmode="open">
@@ -104,7 +104,7 @@
         <style class="lwc-5h3d35cke7v" type="text/css">
           :host {background: blue;}
         </style>
-        <div class="lwc-5h3d35cke7v">
+        <div>
         </div>
         <x-grandchild class="lwc-42b236sbaik-host lwc-5h3d35cke7v" data-lwc-host-scope-token="lwc-42b236sbaik-host">
           <template shadowrootmode="open">
@@ -120,7 +120,7 @@
         <style class="lwc-5h3d35cke7v" type="text/css">
           :host {background: blue;}
         </style>
-        <div class="lwc-5h3d35cke7v">
+        <div>
         </div>
         <x-grandchild class="lwc-42b236sbaik-host lwc-5h3d35cke7v" data-lwc-host-scope-token="lwc-42b236sbaik-host">
           <template shadowrootmode="open">
@@ -136,7 +136,7 @@
         <style class="lwc-5h3d35cke7v" type="text/css">
           :host {background: blue;}
         </style>
-        <div class="lwc-5h3d35cke7v">
+        <div>
         </div>
         <x-grandchild class="lwc-42b236sbaik-host lwc-5h3d35cke7v" data-lwc-host-scope-token="lwc-42b236sbaik-host">
           <template shadowrootmode="open">
@@ -152,7 +152,7 @@
         <style class="lwc-5h3d35cke7v" type="text/css">
           :host {background: blue;}
         </style>
-        <div class="lwc-5h3d35cke7v">
+        <div>
         </div>
         <x-grandchild class="lwc-42b236sbaik-host lwc-5h3d35cke7v" data-lwc-host-scope-token="lwc-42b236sbaik-host">
           <template shadowrootmode="open">

diff --git a/...s/@lwc/engine-server/src/__tests__/fixtures/attribute-component-global-html/expected.html b/...s/@lwc/engine-server/src/__tests__/fixtures/attribute-component-global-html/expected.html
@@ -1,6 +1,6 @@
 <x-attribute-component-global-html>
   <template shadowrootmode="open">
-    <x-child accesskey="A" class="bar foo" contenteditable="true" data-test="test" draggable="true" hidden id="foo" itemprop="foo" spellcheck="true" style="color: red; background: blue;" tabindex="-1">
+    <x-child accesskey="A" class="bar foo" data-test="test" draggable="true" hidden id="foo" spellcheck="true" style="color: red; background: blue;" tabindex="-1">
       <template shadowrootmode="open">
         Passthrough properties:
         <ul>