@lwc/ssr-runtime 8.15.1 → 8.16.0

package/dist/index.cjs.js

@@ -625,7 +625,7 @@ function normalizeTabIndex(value) {
     const shouldNormalize = value > 0 && typeof value !== 'boolean';
     return shouldNormalize ? 0 : value;
 }
-/** version: 8.15.1 */
+/** version: 8.16.0 */
 
 /*
  * Copyright (c) 2024, Salesforce, Inc.
@@ -1564,7 +1564,15 @@ function fallbackTmplNoYield(emit, shadowSlottedContent, _lightSlottedContent, _
         }
     }
 }
-async function serverSideRenderComponent(tagName, Component, props = {}, mode = DEFAULT_SSR_MODE) {
+class RenderContext {
+    constructor(styleDedupePrefix, styleDedupeIsEnabled) {
+        this.stylesheetToId = new WeakMap();
+        this.nextId = 0;
+        this.styleDedupeIsEnabled = styleDedupeIsEnabled;
+        this.styleDedupePrefix = styleDedupePrefix;
+    }
+}
+async function serverSideRenderComponent(tagName, Component, props = {}, styleDedupePrefix = '', styleDedupeIsEnabled = false, mode = DEFAULT_SSR_MODE) {
     if (typeof tagName !== 'string') {
         throw new Error(`tagName must be a string, found: ${tagName}`);
     }
@@ -1573,6 +1581,7 @@ async function serverSideRenderComponent(tagName, Component, props = {}, mode =
     const emit = (segment) => {
         markup += segment;
     };
+    emit.cxt = new RenderContext(styleDedupePrefix, styleDedupeIsEnabled);
     if (!generateMarkup) {
         // If a non-component is accidentally provided, render an empty template
         emit(`<${tagName}>`);
@@ -1700,7 +1709,11 @@ function hasScopedStaticStylesheets(Component) {
     });
     return scoped;
 }
-function renderStylesheets(defaultStylesheets, defaultScopedStylesheets, staticStylesheets, scopeToken, Component, hasScopedTemplateStyles) {
+function renderStylesheets(
+// FIXME: the `emit` function does not exist in the SSR's compiler's yield mode. If we
+// are going to use it to transport the RenderContext down the call stack, we'll need to figure out
+// how to make htat work in yield mode.
+emit, defaultStylesheets, defaultScopedStylesheets, staticStylesheets, scopeToken, Component, hasScopedTemplateStyles) {
     const hasAnyScopedStyles = hasScopedTemplateStyles || hasScopedStaticStylesheets(Component);
     const { renderMode } = Component;
     let result = '';
@@ -1709,10 +1722,25 @@ function renderStylesheets(defaultStylesheets, defaultScopedStylesheets, staticS
         const token = scoped ? scopeToken : undefined;
         const useActualHostSelector = !scoped || renderMode !== 'light';
         const useNativeDirPseudoclass = true;
-        const styleContents = stylesheet(token, useActualHostSelector, useNativeDirPseudoclass);
-        validateStyleTextContents(styleContents);
-        // TODO [#2869]: `<style>`s should not have scope token classes
-        result += `<style${hasAnyScopedStyles ? ` class="${scopeToken}"` : ''} type="text/css">${styleContents}</style>`;
+        const { styleDedupeIsEnabled, stylesheetToId, styleDedupePrefix } = emit.cxt;
+        if (!styleDedupeIsEnabled) {
+            const styleContents = stylesheet(token, useActualHostSelector, useNativeDirPseudoclass);
+            validateStyleTextContents(styleContents);
+            result += `<style${hasAnyScopedStyles ? ` class="${scopeToken}"` : ''} type="text/css">${styleContents}</style>`;
+        }
+        else if (stylesheetToId.has(stylesheet)) {
+            const styleId = stylesheetToId.get(stylesheet);
+            result += `<lwc-style style-id="lwc-style-${styleDedupePrefix}-${styleId}"></lwc-style>`;
+        }
+        else {
+            const styleId = emit.cxt.nextId++;
+            stylesheetToId.set(stylesheet, styleId.toString());
+            const styleContents = stylesheet(token, useActualHostSelector, useNativeDirPseudoclass);
+            validateStyleTextContents(styleContents);
+            // TODO [#2869]: `<style>`s should not have scope token classes
+            result += `<style${hasAnyScopedStyles ? ` class="${scopeToken}"` : ''} id="lwc-style-${styleDedupePrefix}-${styleId}" type="text/css">${styleContents}</style>`;
+            result += `<lwc-style style-id="lwc-style-${styleDedupePrefix}-${styleId}"></lwc-style>`;
+        }
     };
     traverseStylesheets(defaultStylesheets, renderStylesheet);
     traverseStylesheets(defaultScopedStylesheets, renderStylesheet);
@@ -1861,5 +1889,5 @@ exports.track = track;
 exports.unwrap = unwrap$1;
 exports.validateStyleTextContents = validateStyleTextContents;
 exports.wire = wire;
-/** version: 8.15.1 */
+/** version: 8.16.0 */
 //# sourceMappingURL=index.cjs.js.map

package/dist/index.js

@@ -621,7 +621,7 @@ function normalizeTabIndex(value) {
     const shouldNormalize = value > 0 && typeof value !== 'boolean';
     return shouldNormalize ? 0 : value;
 }
-/** version: 8.15.1 */
+/** version: 8.16.0 */
 
 /*
  * Copyright (c) 2024, Salesforce, Inc.
@@ -1560,7 +1560,15 @@ function fallbackTmplNoYield(emit, shadowSlottedContent, _lightSlottedContent, _
         }
     }
 }
-async function serverSideRenderComponent(tagName, Component, props = {}, mode = DEFAULT_SSR_MODE) {
+class RenderContext {
+    constructor(styleDedupePrefix, styleDedupeIsEnabled) {
+        this.stylesheetToId = new WeakMap();
+        this.nextId = 0;
+        this.styleDedupeIsEnabled = styleDedupeIsEnabled;
+        this.styleDedupePrefix = styleDedupePrefix;
+    }
+}
+async function serverSideRenderComponent(tagName, Component, props = {}, styleDedupePrefix = '', styleDedupeIsEnabled = false, mode = DEFAULT_SSR_MODE) {
     if (typeof tagName !== 'string') {
         throw new Error(`tagName must be a string, found: ${tagName}`);
     }
@@ -1569,6 +1577,7 @@ async function serverSideRenderComponent(tagName, Component, props = {}, mode =
     const emit = (segment) => {
         markup += segment;
     };
+    emit.cxt = new RenderContext(styleDedupePrefix, styleDedupeIsEnabled);
     if (!generateMarkup) {
         // If a non-component is accidentally provided, render an empty template
         emit(`<${tagName}>`);
@@ -1696,7 +1705,11 @@ function hasScopedStaticStylesheets(Component) {
     });
     return scoped;
 }
-function renderStylesheets(defaultStylesheets, defaultScopedStylesheets, staticStylesheets, scopeToken, Component, hasScopedTemplateStyles) {
+function renderStylesheets(
+// FIXME: the `emit` function does not exist in the SSR's compiler's yield mode. If we
+// are going to use it to transport the RenderContext down the call stack, we'll need to figure out
+// how to make htat work in yield mode.
+emit, defaultStylesheets, defaultScopedStylesheets, staticStylesheets, scopeToken, Component, hasScopedTemplateStyles) {
     const hasAnyScopedStyles = hasScopedTemplateStyles || hasScopedStaticStylesheets(Component);
     const { renderMode } = Component;
     let result = '';
@@ -1705,10 +1718,25 @@ function renderStylesheets(defaultStylesheets, defaultScopedStylesheets, staticS
         const token = scoped ? scopeToken : undefined;
         const useActualHostSelector = !scoped || renderMode !== 'light';
         const useNativeDirPseudoclass = true;
-        const styleContents = stylesheet(token, useActualHostSelector, useNativeDirPseudoclass);
-        validateStyleTextContents(styleContents);
-        // TODO [#2869]: `<style>`s should not have scope token classes
-        result += `<style${hasAnyScopedStyles ? ` class="${scopeToken}"` : ''} type="text/css">${styleContents}</style>`;
+        const { styleDedupeIsEnabled, stylesheetToId, styleDedupePrefix } = emit.cxt;
+        if (!styleDedupeIsEnabled) {
+            const styleContents = stylesheet(token, useActualHostSelector, useNativeDirPseudoclass);
+            validateStyleTextContents(styleContents);
+            result += `<style${hasAnyScopedStyles ? ` class="${scopeToken}"` : ''} type="text/css">${styleContents}</style>`;
+        }
+        else if (stylesheetToId.has(stylesheet)) {
+            const styleId = stylesheetToId.get(stylesheet);
+            result += `<lwc-style style-id="lwc-style-${styleDedupePrefix}-${styleId}"></lwc-style>`;
+        }
+        else {
+            const styleId = emit.cxt.nextId++;
+            stylesheetToId.set(stylesheet, styleId.toString());
+            const styleContents = stylesheet(token, useActualHostSelector, useNativeDirPseudoclass);
+            validateStyleTextContents(styleContents);
+            // TODO [#2869]: `<style>`s should not have scope token classes
+            result += `<style${hasAnyScopedStyles ? ` class="${scopeToken}"` : ''} id="lwc-style-${styleDedupePrefix}-${styleId}" type="text/css">${styleContents}</style>`;
+            result += `<lwc-style style-id="lwc-style-${styleDedupePrefix}-${styleId}"></lwc-style>`;
+        }
     };
     traverseStylesheets(defaultStylesheets, renderStylesheet);
     traverseStylesheets(defaultScopedStylesheets, renderStylesheet);
@@ -1811,5 +1839,5 @@ function createContextProvider(adapter) {
 }
 
 export { ClassList, LightningElement, SYMBOL__DEFAULT_TEMPLATE, SYMBOL__GENERATE_MARKUP, SYMBOL__SET_INTERNALS, api, connectContext, createContextProvider, createElement, establishContextfulRelationship, fallbackTmpl, fallbackTmplNoYield, freezeTemplate, getComponentDef, hasScopedStaticStylesheets, hot, htmlEscape, isComponentConstructor, mutationTracker, normalizeClass, normalizeTabIndex, normalizeTextContent, parseFragment, parseSVGFragment, readonly, registerComponent, registerDecorators, registerTemplate, renderAttrs, renderAttrsNoYield, serverSideRenderComponent as renderComponent, renderStylesheets, renderTextContent, renderer, sanitizeAttribute, sanitizeHtmlContent, serverSideRenderComponent, setFeatureFlag, setFeatureFlagForTest, setHooks, swapComponent, swapStyle, swapTemplate, toIteratorDirective, track, unwrap$1 as unwrap, validateStyleTextContents, wire };
-/** version: 8.15.1 */
+/** version: 8.16.0 */
 //# sourceMappingURL=index.js.map

package/dist/render.d.ts

@@ -1,3 +1,4 @@
+import { type Stylesheet } from '@lwc/shared';
 import { SYMBOL__GENERATE_MARKUP } from './lightning-element';
 import type { CompilationMode } from '@lwc/shared';
 import type { LightningElement, LightningElementConstructor } from './lightning-element';
@@ -50,6 +51,13 @@ export declare function fallbackTmplNoYield(emit: Emit, shadowSlottedContent: Sl
 interface ComponentWithGenerateMarkup extends LightningElementConstructor {
     [SYMBOL__GENERATE_MARKUP]?: GenerateMarkupVariants;
 }
-export declare function serverSideRenderComponent(tagName: string, Component: ComponentWithGenerateMarkup, props?: Properties, mode?: CompilationMode): Promise<string>;
+export declare class RenderContext {
+    styleDedupeIsEnabled: boolean;
+    stylesheetToId: WeakMap<Stylesheet, string>;
+    styleDedupePrefix: string;
+    nextId: number;
+    constructor(styleDedupePrefix: string, styleDedupeIsEnabled: boolean);
+}
+export declare function serverSideRenderComponent(tagName: string, Component: ComponentWithGenerateMarkup, props?: Properties, styleDedupePrefix?: string, styleDedupeIsEnabled?: boolean, mode?: CompilationMode): Promise<string>;
 export {};
 //# sourceMappingURL=render.d.ts.map

package/dist/styles.d.ts

@@ -1,7 +1,11 @@
 import type { LightningElementConstructor } from './lightning-element';
 import type { Stylesheets, Stylesheet } from '@lwc/shared';
+import type { RenderContext } from './render';
 type ForgivingStylesheets = Stylesheets | Stylesheet | undefined | null | Array<Stylesheets | undefined | null>;
+type EmitFn = ((strSegment: string) => void) & {
+    cxt: RenderContext;
+};
 export declare function hasScopedStaticStylesheets(Component: LightningElementConstructor): boolean;
-export declare function renderStylesheets(defaultStylesheets: ForgivingStylesheets, defaultScopedStylesheets: ForgivingStylesheets, staticStylesheets: ForgivingStylesheets, scopeToken: string, Component: LightningElementConstructor, hasScopedTemplateStyles: boolean): string;
+export declare function renderStylesheets(emit: EmitFn, defaultStylesheets: ForgivingStylesheets, defaultScopedStylesheets: ForgivingStylesheets, staticStylesheets: ForgivingStylesheets, scopeToken: string, Component: LightningElementConstructor, hasScopedTemplateStyles: boolean): string;
 export {};
 //# sourceMappingURL=styles.d.ts.map

package/package.json

@@ -4,7 +4,7 @@
         "You can safely modify dependencies, devDependencies, keywords, etc., but other props will be overwritten."
     ],
     "name": "@lwc/ssr-runtime",
-    "version": "8.15.1",
+    "version": "8.16.0",
     "description": "Runtime complement to @lwc/ssr-compiler",
     "keywords": [
         "lwc",
@@ -48,8 +48,8 @@
         }
     },
     "devDependencies": {
-        "@lwc/shared": "8.15.1",
-        "@lwc/engine-core": "8.15.1",
+        "@lwc/shared": "8.16.0",
+        "@lwc/engine-core": "8.16.0",
         "observable-membrane": "2.0.0"
     }
 }