From 401c7f3ef95c4c5e45723968784cbbbfe51751c0 Mon Sep 17 00:00:00 2001 From: Benny Powers Date: Mon, 18 Nov 2024 17:54:41 +0200 Subject: [PATCH 1/5] fix(icon): workaround for webkit double render (ssr) --- .changeset/rude-jeans-fix.md | 4 ++++ elements/rh-icon/rh-icon.ts | 8 ++++++++ 2 files changed, 12 insertions(+) create mode 100644 .changeset/rude-jeans-fix.md diff --git a/.changeset/rude-jeans-fix.md b/.changeset/rude-jeans-fix.md new file mode 100644 index 0000000000..df1bb4c9cc --- /dev/null +++ b/.changeset/rude-jeans-fix.md @@ -0,0 +1,4 @@ +--- +"@rhds/elements": patch +--- +``: workaround for Safari which sometimes double-renders icons diff --git a/elements/rh-icon/rh-icon.ts b/elements/rh-icon/rh-icon.ts index b46a904d5d..6ee62d1c6d 100644 --- a/elements/rh-icon/rh-icon.ts +++ b/elements/rh-icon/rh-icon.ts @@ -120,6 +120,14 @@ export class RhIcon extends LitElement { `; } + updated() { + // this is a workaround for an apparent webkit / lit-ssr bug + const [, ...duplicateContainers] = this.shadowRoot?.querySelectorAll('#container') ?? []; + for (const dupe of duplicateContainers) { + dupe.remove(); + } + } + #getContent() { if (isServer) { const { set = 'standard', icon } = this; From 73d7fd2a56a9cd223d1c9050fca0a35c781fac0e Mon Sep 17 00:00:00 2001 From: Benny Powers Date: Wed, 8 Jan 2025 10:25:00 +0200 Subject: [PATCH 2/5] chore: explicitly depend on lit-ssr --- package-lock.json | 6 ++++++ package.json | 2 ++ 2 files changed, 8 insertions(+) diff --git a/package-lock.json b/package-lock.json index 4a9a7a842c..f972e5a4ca 100644 --- a/package-lock.json +++ b/package-lock.json @@ -26,6 +26,8 @@ "@commitlint/cli": "^19.5.0", "@commitlint/config-conventional": "^19.5.0", "@lit-labs/eleventy-plugin-lit": "^1.0.3", + "@lit-labs/ssr": "^3.2.2", + "@lit-labs/ssr-client": "^1.1.7", "@lit/reactive-element": "^2.0.4", "@lit/ts-transformers": "^2.0.1", "@parse5/tools": "^0.5.0", @@ -2741,6 +2743,8 @@ }, "node_modules/@lit-labs/ssr": { "version": "3.2.2", + "resolved": "https://registry.npmjs.org/@lit-labs/ssr/-/ssr-3.2.2.tgz", + "integrity": "sha512-He5TzeNPM9ECmVpgXRYmVlz0UA5YnzHlT43kyLi2Lu6mUidskqJVonk9W5K699+2DKhoXp8Ra4EJmHR6KrcW1Q==", "dev": true, "license": "BSD-3-Clause", "dependencies": { @@ -2762,6 +2766,8 @@ }, "node_modules/@lit-labs/ssr-client": { "version": "1.1.7", + "resolved": "https://registry.npmjs.org/@lit-labs/ssr-client/-/ssr-client-1.1.7.tgz", + "integrity": "sha512-VvqhY/iif3FHrlhkzEPsuX/7h/NqnfxLwVf0p8ghNIlKegRyRqgeaJevZ57s/u/LiFyKgqksRP5n+LmNvpxN+A==", "dev": true, "license": "BSD-3-Clause", "dependencies": { diff --git a/package.json b/package.json index bd28ce8079..4ce1f56656 100644 --- a/package.json +++ b/package.json @@ -301,6 +301,8 @@ "@commitlint/cli": "^19.5.0", "@commitlint/config-conventional": "^19.5.0", "@lit-labs/eleventy-plugin-lit": "^1.0.3", + "@lit-labs/ssr": "^3.2.2", + "@lit-labs/ssr-client": "^1.1.7", "@lit/reactive-element": "^2.0.4", "@lit/ts-transformers": "^2.0.1", "@parse5/tools": "^0.5.0", From 539667120974ae1165b1395719ca890b86001fc1 Mon Sep 17 00:00:00 2001 From: Benny Powers Date: Wed, 8 Jan 2025 10:25:27 +0200 Subject: [PATCH 3/5] style(cta): whitespace --- elements/rh-cta/rh-cta.ts | 29 +++++++++-------------------- 1 file changed, 9 insertions(+), 20 deletions(-) diff --git a/elements/rh-cta/rh-cta.ts b/elements/rh-cta/rh-cta.ts index b7cecf9c5e..ff431fdfbd 100644 --- a/elements/rh-cta/rh-cta.ts +++ b/elements/rh-cta/rh-cta.ts @@ -1,6 +1,7 @@ -import { LitElement, html, isServer, noChange } from 'lit'; +import { LitElement, html, isServer } from 'lit'; import { customElement } from 'lit/decorators/custom-element.js'; import { property } from 'lit/decorators/property.js'; +import { state } from 'lit/decorators/state.js'; import { classMap } from 'lit/directives/class-map.js'; import { ifDefined } from 'lit/directives/if-defined.js'; @@ -13,7 +14,6 @@ import { colorContextConsumer, type ColorTheme } from '../../lib/context/color/c import type { IconNameFor, IconSetName } from '@rhds/icons'; import style from './rh-cta.css'; -import { state } from 'lit/decorators/state.js'; function isSupportedContent(el: Element | null): el is HTMLAnchorElement | HTMLButtonElement { return el instanceof HTMLAnchorElement || el instanceof HTMLButtonElement; @@ -106,19 +106,13 @@ export class RhCta extends LitElement { /** when `href` is set, the link's `target` attribute */ @property() target?: string; - /** - * Icon name - */ + /** Icon name */ @property({ reflect: true }) icon?: IconNameFor; - /** - * Icon set - */ + /** Icon set */ @property({ attribute: 'icon-set' }) iconSet: IconSetName = 'ui'; - /** - * Sets color theme based on parent context - */ + /** Sets color theme based on parent context */ @colorContextConsumer() @state() private on?: ColorTheme; protected override async getUpdateComplete(): Promise { @@ -142,17 +136,12 @@ export class RhCta extends LitElement { const rtl = this.#dir.dir === 'rtl'; const isDefault = !variant; const svg = isDefault; - const iconOrSvg = isDefault || !!icon; const follower = - (variant !== 'brick' && icon) ? - html`` - : (variant === undefined) ? - html`` - : html``; + (variant !== 'brick' && icon) ? html`` + : (variant === undefined) ? html`` + : ''; const iconContent = - (variant === 'brick' && icon) ? - html`` - : html``; + !(variant === 'brick' && icon) ? '' : html``; const linkContent = !href ? html`${follower}` : html` Date: Wed, 8 Jan 2025 10:25:45 +0200 Subject: [PATCH 4/5] fix(cta): double ssr (webkit) --- elements/rh-cta/rh-cta.ts | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/elements/rh-cta/rh-cta.ts b/elements/rh-cta/rh-cta.ts index ff431fdfbd..dade2cc79f 100644 --- a/elements/rh-cta/rh-cta.ts +++ b/elements/rh-cta/rh-cta.ts @@ -157,10 +157,16 @@ export class RhCta extends LitElement { } override firstUpdated() { - const { href, variant } = this; + // workaround for lit-ssr bugs if (!isServer) { this.removeAttribute('defer-hydration'); + const [, ...duplicateContainers] = this.shadowRoot?.querySelectorAll('#container') ?? []; + for (const dupe of duplicateContainers) { + dupe.remove(); + } } + // TODO: remove in next major version, recommend static HTML audits instead + const { href, variant } = this; const cta = this.shadowRoot?.querySelector('a') ?? this.shadowRoot?.querySelector('slot')?.assignedElements().find(isSupportedContent) From cbf11661238a71adaaaba63b96aac332fb190d04 Mon Sep 17 00:00:00 2001 From: Benny Powers Date: Wed, 8 Jan 2025 10:26:52 +0200 Subject: [PATCH 5/5] docs(cta): changeset --- .changeset/fifty-news-knock.md | 4 ++++ 1 file changed, 4 insertions(+) create mode 100644 .changeset/fifty-news-knock.md diff --git a/.changeset/fifty-news-knock.md b/.changeset/fifty-news-knock.md new file mode 100644 index 0000000000..edad089c1e --- /dev/null +++ b/.changeset/fifty-news-knock.md @@ -0,0 +1,4 @@ +--- +"@rhds/elements": patch +--- +``: workaround for Safari which sometimes double-renders icons