perf: optimize scoped ID for light/native (#4399)

salesforce · Jul 25, 2024 · 750f557 · 750f557
1 parent d7147ce
commit 750f557
Show file tree

Hide file tree

Showing 49 changed files with 4,605 additions and 90 deletions.
diff --git a/.github/workflows/karma.yml b/.github/workflows/karma.yml
@@ -135,6 +135,7 @@ jobs:
             - run: API_VERSION=61 yarn sauce:ci
             - run: API_VERSION=61 DISABLE_SYNTHETIC=1 yarn sauce:ci
             - run: DISABLE_SYNTHETIC_SHADOW_SUPPORT_IN_COMPILER=1 DISABLE_SYNTHETIC=1 yarn sauce:ci
+            - run: DISABLE_SYNTHETIC_SHADOW_SUPPORT_IN_COMPILER=1 DISABLE_SYNTHETIC=1 DISABLE_STATIC_CONTENT_OPTIMIZATION=1 yarn sauce:ci
             - run: ENABLE_ARIA_REFLECTION_GLOBAL_POLYFILL=1 yarn sauce:ci
             - run: ENABLE_ARIA_REFLECTION_GLOBAL_POLYFILL=1 DISABLE_SYNTHETIC=1 yarn sauce:ci
             - run: DISABLE_STATIC_CONTENT_OPTIMIZATION=1 yarn sauce:ci

diff --git a/packages/@lwc/compiler/README.md b/packages/@lwc/compiler/README.md
@@ -56,7 +56,7 @@ const { code } = transformSync(source, filename, options);
     -   `customRendererConfig` (type: `object`, optional) - custom renderer config to pass to `@lwc/template-compiler`. See that package's README for details.
     -   `enableLightningWebSecurityTransforms` (type: `boolean`, default: `false`) - The configuration to enable Lighting Web Security specific transformations.
     -   `enableLwcSpread` (boolean, optional, `true` by default) - Deprecated. Ignored by compiler. `lwc:spread` is always enabled.
-    -   `disableSyntheticShadowSupport` (type: `boolean`, default: `false`) - Set to true if synthetic shadow DOM support is not needed, which can result in smaller output.
+    -   `disableSyntheticShadowSupport` (type: `boolean`, default: `false`) - Set to true if synthetic shadow DOM support is not needed, which can result in smaller/faster output.
     -   `instrumentation` (type: `InstrumentationObject`, optional) - instrumentation object to gather metrics and non-error logs for internal use. See the `@lwc/errors` package for details on the interface.
     -   `apiVersion` (type: `number`, optional) - API version to associate with the compiled module.
 

diff --git a/packages/@lwc/compiler/src/options.ts b/packages/@lwc/compiler/src/options.ts
@@ -115,7 +115,7 @@ export interface TransformOptions {
     customRendererConfig?: CustomRendererConfig;
     /** @deprecated Ignored by compiler. `lwc:spread` is always enabled. */
     enableLwcSpread?: boolean;
-    /** Set to true if synthetic shadow DOM support is not needed, which can result in smaller output. */
+    /** Set to true if synthetic shadow DOM support is not needed, which can result in smaller/faster output. */
     disableSyntheticShadowSupport?: boolean;
     /**
      * Enable transformations specific to {@link https://developer.salesforce.com/docs/platform/lwc/guide/security-lwsec-intro.html Lighting Web Security}.

diff --git a/packages/@lwc/compiler/src/transformers/template.ts b/packages/@lwc/compiler/src/transformers/template.ts
@@ -44,6 +44,7 @@ export default function templateTransform(
         namespace,
         name,
         apiVersion,
+        disableSyntheticShadowSupport,
     } = options;
     const experimentalDynamicDirective =
         deprecatedDynamicDirective ?? Boolean(experimentalDynamicComponent);
@@ -62,6 +63,7 @@ export default function templateTransform(
             enableDynamicComponents,
             instrumentation,
             apiVersion,
+            disableSyntheticShadowSupport,
         });
     } catch (e) {
         throw normalizeToCompilerError(TransformerErrors.HTML_TRANSFORMER_ERROR, e, { filename });

diff --git a/packages/@lwc/engine-core/src/framework/api.ts b/packages/@lwc/engine-core/src/framework/api.ts
@@ -564,12 +564,6 @@ function k(compilerKey: number, obj: any): string | void {
 function gid(id: string | undefined | null): string | null | undefined {
     const vmBeingRendered = getVMBeingRendered()!;
     if (isUndefined(id) || id === '') {
-        if (process.env.NODE_ENV !== 'production') {
-            logError(
-                `Invalid id value "${id}". The id attribute must contain a non-empty string.`,
-                vmBeingRendered
-            );
-        }
         return id;
     }
     // We remove attributes when they are assigned a value of null
@@ -587,14 +581,6 @@ function gid(id: string | undefined | null): string | null | undefined {
 function fid(url: string | undefined | null): string | null | undefined {
     const vmBeingRendered = getVMBeingRendered()!;
     if (isUndefined(url) || url === '') {
-        if (process.env.NODE_ENV !== 'production') {
-            if (isUndefined(url)) {
-                logError(
-                    `Undefined url value for "href" or "xlink:href" attribute. Expected a non-empty string.`,
-                    vmBeingRendered
-                );
-            }
-        }
         return url;
     }
     // We remove attributes when they are assigned a value of null

diff --git a/packages/@lwc/integration-karma/test/shadow-dom/Element-properties/Element.id.spec.js b/packages/@lwc/integration-karma/test/shadow-dom/Element-properties/Element.id.spec.js
@@ -19,23 +19,15 @@ describe('scoped-ids', () => {
         describe('custom elements', () => {
             it('should render expected id attribute value when its value is set to `undefined`', () => {
                 const elm = createElement('x-foo', { is: CustomElementIdValueUndefined });
-                expect(() => {
-                    document.body.appendChild(elm);
-                }).toLogErrorDev(
-                    /\[LWC error\]: Invalid id value "undefined". The id attribute must contain a non-empty string./
-                );
+                document.body.appendChild(elm);
                 const child = elm.shadowRoot.querySelector('x-child');
                 // #1769: The difference in behavior of id attribute is tracked with this issue
                 expect(child.getAttribute('id')).toBe('undefined');
             });
 
             it('should render the id attribute as a boolean attribute when its value is set to an empty string', () => {
                 const elm = createElement('x-foo', { is: CustomElementIdValueEmpty });
-                expect(() => {
-                    document.body.appendChild(elm);
-                }).toLogErrorDev(
-                    /\[LWC error\]: Invalid id value "". The id attribute must contain a non-empty string./
-                );
+                document.body.appendChild(elm);
                 const child = elm.shadowRoot.querySelector('x-child');
                 expect(child.getAttribute('id')).toBe('');
             });
@@ -44,22 +36,14 @@ describe('scoped-ids', () => {
         describe('native elements', () => {
             it('should not render id attribute when its value is set to null', () => {
                 const elm = createElement('x-foo', { is: IdValueUndefined });
-                expect(() => {
-                    document.body.appendChild(elm);
-                }).toLogErrorDev(
-                    /\[LWC error\]: Invalid id value "undefined". The id attribute must contain a non-empty string./
-                );
+                document.body.appendChild(elm);
                 const div = elm.shadowRoot.querySelector('div');
                 expect(div.getAttribute('id')).toBeNull();
             });
 
             it('should render the id attribute as a boolean attribute when its value is set to an empty string', () => {
                 const elm = createElement('x-foo', { is: IdValueEmpty });
-                expect(() => {
-                    document.body.appendChild(elm);
-                }).toLogErrorDev(
-                    /\[LWC error\]: Invalid id value "". The id attribute must contain a non-empty string./
-                );
+                document.body.appendChild(elm);
                 const div = elm.shadowRoot.querySelector('div');
                 expect(div.getAttribute('id')).toBe('');
             });

diff --git a/packages/@lwc/integration-karma/test/synthetic-shadow/scoped-id/aria.spec.js b/packages/@lwc/integration-karma/test/synthetic-shadow/scoped-id/aria.spec.js
@@ -1,5 +1,4 @@
 import { createElement } from 'lwc';
-import { spyConsole } from 'test-utils';
 
 import AriaStatic from 'x/ariaStatic';
 import AriaDynamic from 'x/ariaDynamic';
@@ -26,27 +25,8 @@ function testAria(type, create) {
         beforeEach(async () => {
             elm = create();
 
-            const consoleSpy = spyConsole();
-            try {
-                document.body.appendChild(elm);
-                await Promise.resolve();
-
-                // empty string (`<div id="">`) is expected to log an error, but not boolean true (`<div id>`)
-                // due to backwards compat
-                if (process.env.NODE_ENV !== 'production' && type === 'empty-string') {
-                    expect(consoleSpy.calls.error.length).toEqual(10);
-                    for (const call of consoleSpy.calls.error) {
-                        expect(call[0].message).toMatch(
-                            /The id attribute must contain a non-empty string/
-                        );
-                    }
-                } else {
-                    expect(consoleSpy.calls.error.length).toEqual(0);
-                }
-                expect(consoleSpy.calls.warn.length).toEqual(0);
-            } finally {
-                consoleSpy.reset();
-            }
+            document.body.appendChild(elm);
+            await Promise.resolve();
         });
 
         it('should transform the `for` attribute value', () => {

diff --git a/packages/@lwc/integration-karma/test/synthetic-shadow/scoped-id/href.spec.js b/packages/@lwc/integration-karma/test/synthetic-shadow/scoped-id/href.spec.js
@@ -5,6 +5,9 @@ import HrefDynamic from 'x/hrefDynamic';
 import HrefDangling from 'x/hrefDangling';
 import HrefBooleanTrue from 'x/hrefBooleanTrue';
 import HrefBooleanTrueNoId from 'x/hrefBooleanTrueNoId';
+import HrefDynamicEmptyString from 'x/hrefDynamicEmptyString';
+import HrefDynamicUndefined from 'x/hrefDynamicUndefined';
+import HrefDynamicNull from 'x/hrefDynamicNull';
 
 function testHref(type, create) {
     describe(`${type} href attribute values`, () => {
@@ -96,3 +99,30 @@ describe('boolean true', () => {
         });
     });
 });
+
+describe('dynamic empty value', () => {
+    const scenarios = [
+        {
+            name: 'empty string',
+            Ctor: HrefDynamicEmptyString,
+            tagName: 'x-href-dynamic-empty-string',
+        },
+        { name: 'undefined', Ctor: HrefDynamicUndefined, tagName: 'x-href-dynamic-undefined' },
+        { name: 'null', Ctor: HrefDynamicNull, tagName: 'x-href-dynamic-null' },
+    ];
+
+    scenarios.forEach(({ name, Ctor, tagName }) => {
+        describe(name, () => {
+            it('renders href as expected', () => {
+                const elm = createElement(tagName, { is: Ctor });
+                document.body.appendChild(elm);
+
+                const expected = name === 'empty string' ? '' : null;
+
+                expect(elm.shadowRoot.querySelector('.sanjo').getAttribute('id')).toBe(expected);
+                expect(elm.shadowRoot.querySelector('a').getAttribute('href')).toBe(expected);
+                expect(elm.shadowRoot.querySelector('area').getAttribute('href')).toBe(expected);
+            });
+        });
+    });
+});
diff --git a/...arma/test/synthetic-shadow/scoped-id/x/hrefDynamicEmptyString/hrefDynamicEmptyString.html b/...arma/test/synthetic-shadow/scoped-id/x/hrefDynamicEmptyString/hrefDynamicEmptyString.html
@@ -0,0 +1,13 @@
+<template>
+    <div class="sanjo" id={emptyString}></div>
+
+    <div>
+        <a class="anchor-empty-string" href={emptyString} data-id={emptyString}>fragment url</a>
+    </div>
+
+    <div>
+        <map name="blackdot">
+            <area class="area-empty-string" href={emptyString} data-id={emptyString} shape="circle" coords="75,75,75" />
+        </map>
+    </div>
+</template>
diff --git a/...-karma/test/synthetic-shadow/scoped-id/x/hrefDynamicEmptyString/hrefDynamicEmptyString.js b/...-karma/test/synthetic-shadow/scoped-id/x/hrefDynamicEmptyString/hrefDynamicEmptyString.js
@@ -0,0 +1,7 @@
+import { LightningElement } from 'lwc';
+
+export default class HrefDynamicEmptyString extends LightningElement {
+    get emptyString() {
+        return '';
+    }
+}
diff --git a/.../integration-karma/test/synthetic-shadow/scoped-id/x/hrefDynamicNull/hrefDynamicNull.html b/.../integration-karma/test/synthetic-shadow/scoped-id/x/hrefDynamicNull/hrefDynamicNull.html
@@ -0,0 +1,13 @@
+<template>
+    <div class="sanjo" id={nullo}></div>
+
+    <div>
+        <a class="anchor-empty-string" href={nullo} data-id={nullo}>fragment url</a>
+    </div>
+
+    <div>
+        <map name="blackdot">
+            <area class="area-empty-string" href={nullo} data-id={nullo} shape="circle" coords="75,75,75" />
+        </map>
+    </div>
+</template>
diff --git a/...wc/integration-karma/test/synthetic-shadow/scoped-id/x/hrefDynamicNull/hrefDynamicNull.js b/...wc/integration-karma/test/synthetic-shadow/scoped-id/x/hrefDynamicNull/hrefDynamicNull.js
@@ -0,0 +1,7 @@
+import { LightningElement } from 'lwc';
+
+export default class HrefDynamicNull extends LightningElement {
+    get nullo() {
+        return null;
+    }
+}
diff --git a/...on-karma/test/synthetic-shadow/scoped-id/x/hrefDynamicUndefined/hrefDynamicUndefined.html b/...on-karma/test/synthetic-shadow/scoped-id/x/hrefDynamicUndefined/hrefDynamicUndefined.html
@@ -0,0 +1,13 @@
+<template>
+    <div class="sanjo" id={undef}></div>
+
+    <div>
+        <a class="anchor-empty-string" href={undef} data-id={undef}>fragment url</a>
+    </div>
+
+    <div>
+        <map name="blackdot">
+            <area class="area-empty-string" href={undef} data-id={undef} shape="circle" coords="75,75,75" />
+        </map>
+    </div>
+</template>
diff --git a/...tion-karma/test/synthetic-shadow/scoped-id/x/hrefDynamicUndefined/hrefDynamicUndefined.js b/...tion-karma/test/synthetic-shadow/scoped-id/x/hrefDynamicUndefined/hrefDynamicUndefined.js
@@ -0,0 +1,7 @@
+import { LightningElement } from 'lwc';
+
+export default class HrefDynamicUndefined extends LightningElement {
+    get undef() {
+        return undefined;
+    }
+}
diff --git a/packages/@lwc/template-compiler/README.md b/packages/@lwc/template-compiler/README.md
@@ -62,6 +62,7 @@ const { code, warnings } = compile(`<template><h1>Hello World!</h1></template>`,
 -   `enableLwcSpread` (boolean, optional, `true` by default) - Deprecated. Ignored by template-compiler. `lwc:spread` is always enabled.
 -   `customRendererConfig` (CustomRendererConfig, optional) - specifies a configuration to use to match elements. Matched elements will get a custom renderer hook in the generated template.
 -   `instrumentation` (InstrumentationObject, optional) - instrumentation object to gather metrics and non-error logs for internal use. See the `@lwc/errors` package for details on the interface.
+-   `disableSyntheticShadowSupport` (type: `boolean`, default: `false`) - Set to true if synthetic shadow DOM support is not needed, which can result in smaller/faster output.
 
     -   Example 1: Config to match `<use>` elements under the `svg` namespace and have `href` attribute set.
 

diff --git a/packages/@lwc/template-compiler/src/__tests__/config.spec.ts b/packages/@lwc/template-compiler/src/__tests__/config.spec.ts
@@ -47,6 +47,7 @@ describe('customRendererConfig normalization', () => {
                   },
                 ],
               },
+              "disableSyntheticShadowSupport": false,
               "enableDynamicComponents": false,
               "enableLwcSpread": true,
               "enableStaticContentOptimization": true,

diff --git a/...compiler/src/__tests__/fixtures/scoped-id-optimization/static-optimized/light/actual.html b/...compiler/src/__tests__/fixtures/scoped-id-optimization/static-optimized/light/actual.html
@@ -0,0 +1,15 @@
+<template lwc:render-mode="light">
+    <!-- static values -->
+    <label for="foo">Click me:</label>
+    <input type="checkbox" id="foo">
+
+    <a href="#bar">Click to scroll</a>
+    <section id="bar">Scroll to me</section>
+
+    <!-- dynamic values -->
+    <label for={foo}>Click me:</label>
+    <input type="checkbox" id={foo}>
+
+    <a href={bar}>Click to scroll</a>
+    <section id={bar}>Scroll to me</section>
+</template>