From 8e201dcf46d77b08ad95a247b8b7844b51034264 Mon Sep 17 00:00:00 2001 From: Benny Powers Date: Wed, 20 Nov 2024 15:10:21 +0200 Subject: [PATCH 1/5] feat: LightdomCSSController --- lib/LightdomCSSController.ts | 50 ++++++++++++++++++++++++++++++++++++ 1 file changed, 50 insertions(+) create mode 100644 lib/LightdomCSSController.ts diff --git a/lib/LightdomCSSController.ts b/lib/LightdomCSSController.ts new file mode 100644 index 0000000000..30cd9c331b --- /dev/null +++ b/lib/LightdomCSSController.ts @@ -0,0 +1,50 @@ +import type { ReactiveController, ReactiveElement } from 'lit'; + +import { Logger } from '@patternfly/pfe-core/controllers/logger.js'; +import type { RHDSSSRController } from './ssr-controller.js'; + +const handleAsText = (r: Response) => r.text(); + +export class LightdomCSSController implements ReactiveController, RHDSSSRController { + isRHDSSSRController = true; + + host: ReactiveElement; + + #tagName: string; + + /** URL to lightdom sheet, by convention it must be the tagName, with `-lightdom.css` suffix */ + #url: URL; + + #logger: Logger; + + #computedStyles?: CSSStyleDeclaration; + + constructor( + host: ReactiveElement, + /** import.meta.url from the element definition module */ + url: string, + ) { + this.host = host; + this.#tagName = host.localName; + this.#url = new URL(`${this.#tagName}-lightdom.css`, url); + this.#logger = new Logger(host); + host.addController(this); + } + + async hostConnected(): Promise { + this.#computedStyles ??= getComputedStyle(this.host); + if (this.#computedStyles.getPropertyValue('--_rhds-lightdom') !== this.#tagName) { + const root = this.host.getRootNode(); + if (root instanceof Document || root instanceof ShadowRoot) { + try { + const sheet = new CSSStyleSheet(); + const css = await fetch(this.#url).then(handleAsText); + sheet.replaceSync(css); + root.adoptedStyleSheets = [...root.adoptedStyleSheets, sheet]; + } catch (error) { + this.#logger.error(error); + } + } + } + }; +} From 1c31a5d6f79951d94babb0c4f9e6b15ee28767f1 Mon Sep 17 00:00:00 2001 From: Benny Powers Date: Wed, 20 Nov 2024 15:10:43 +0200 Subject: [PATCH 2/5] feat(table): auto-load lightdom CSS --- elements/rh-table/rh-table-lightdom.css | 2 ++ elements/rh-table/rh-table.ts | 7 ++++++- 2 files changed, 8 insertions(+), 1 deletion(-) diff --git a/elements/rh-table/rh-table-lightdom.css b/elements/rh-table/rh-table-lightdom.css index 088078147b..73b157ed10 100644 --- a/elements/rh-table/rh-table-lightdom.css +++ b/elements/rh-table/rh-table-lightdom.css @@ -1,4 +1,6 @@ rh-table { + --_rhds-lightdom: rh-table; + container: host / inline-size; & thead { diff --git a/elements/rh-table/rh-table.ts b/elements/rh-table/rh-table.ts index d157a4d9c8..976ee53a46 100644 --- a/elements/rh-table/rh-table.ts +++ b/elements/rh-table/rh-table.ts @@ -1,3 +1,5 @@ +import type { ColorTheme } from '@rhds/elements/lib/context/color/consumer.js'; + import { LitElement, html, isServer } from 'lit'; import { customElement } from 'lit/decorators/custom-element.js'; import { classMap } from 'lit/directives/class-map.js'; @@ -6,7 +8,8 @@ import { Logger } from '@patternfly/pfe-core/controllers/logger.js'; import { RequestSortEvent, RhSortButton } from './rh-sort-button.js'; -import { colorContextConsumer, type ColorTheme } from '../../lib/context/color/consumer.js'; +import { colorContextConsumer } from '@rhds/elements/lib/context/color/consumer.js'; +import { LightdomCSSController } from '@rhds/elements/lib/LightdomCSSController.js'; import styles from './rh-table.css'; @@ -68,6 +71,8 @@ export class RhTable extends LitElement { return this.querySelector('[slot="summary"]') as HTMLElement | undefined; } + #lightdom = new LightdomCSSController(this, import.meta.url); + #internalColorPalette?: string | null; #logger = new Logger(this); From c664b40d6543a3211c98f44798a59e35898723d2 Mon Sep 17 00:00:00 2001 From: Benny Powers Date: Wed, 20 Nov 2024 15:10:50 +0200 Subject: [PATCH 3/5] docs: don't autoload table css --- docs/_includes/layouts/pages/element.11ty.ts | 5 ++--- uxdot/uxdot-repo-status-checklist.ts | 2 -- uxdot/uxdot-repo-status-list.ts | 2 -- uxdot/uxdot-repo-status-table.ts | 2 -- uxdot/uxdot-spacer-tokens-table.ts | 2 -- 5 files changed, 2 insertions(+), 11 deletions(-) diff --git a/docs/_includes/layouts/pages/element.11ty.ts b/docs/_includes/layouts/pages/element.11ty.ts index f39bb287f5..ca2a753e59 100644 --- a/docs/_includes/layouts/pages/element.11ty.ts +++ b/docs/_includes/layouts/pages/element.11ty.ts @@ -71,9 +71,9 @@ export default class ElementsPage extends Renderer { } = doc; const content = fileExists ? await this.renderFile(filePath, ctx) : ''; const stylesheets = [ - '/assets/packages/@rhds/elements/elements/rh-table/rh-table-lightdom.css', + // '/assets/packages/@rhds/elements/elements/rh-table/rh-table-lightdom.css', '/styles/samp.css', - ctx.doc.hasLightdom && `/assets/packages/@rhds/elements/elements/${tagName}/${tagName}-lightdom.css`, + // ctx.doc.hasLightdom && `/assets/packages/@rhds/elements/elements/${tagName}/${tagName}-lightdom.css`, isCodePage && '/styles/pages/code.css', ].filter(Boolean); @@ -961,4 +961,3 @@ export default class ElementsPage extends Renderer { } } }; - diff --git a/uxdot/uxdot-repo-status-checklist.ts b/uxdot/uxdot-repo-status-checklist.ts index e2dae4d717..a565d8f0cc 100644 --- a/uxdot/uxdot-repo-status-checklist.ts +++ b/uxdot/uxdot-repo-status-checklist.ts @@ -17,8 +17,6 @@ export class UxdotRepoStatusChecklist extends UxdotRepoElement { render() { const status = this.getStatus(this.element!); return html` - -
diff --git a/uxdot/uxdot-repo-status-list.ts b/uxdot/uxdot-repo-status-list.ts index b05d072430..10eecf3937 100644 --- a/uxdot/uxdot-repo-status-list.ts +++ b/uxdot/uxdot-repo-status-list.ts @@ -15,8 +15,6 @@ export class UxdotRepoStatusList extends UxdotRepoElement { render() { const status = this.getStatus(this.element!); return html` - -
What do these mean?
diff --git a/uxdot/uxdot-repo-status-table.ts b/uxdot/uxdot-repo-status-table.ts index 3ce72bcec8..f1abc83e39 100644 --- a/uxdot/uxdot-repo-status-table.ts +++ b/uxdot/uxdot-repo-status-table.ts @@ -17,8 +17,6 @@ export class UxdotRepoStatusTable extends UxdotRepoElement { render() { const status = this.getStatus(); return html` - -
diff --git a/uxdot/uxdot-spacer-tokens-table.ts b/uxdot/uxdot-spacer-tokens-table.ts index 91daad43fd..8f104a625a 100644 --- a/uxdot/uxdot-spacer-tokens-table.ts +++ b/uxdot/uxdot-spacer-tokens-table.ts @@ -48,8 +48,6 @@ export class UxdotSpacerTokensTable extends LitElement { .filter(Boolean); return html` - -
From 024bb57e628c3265e0e9314b313814f67062190d Mon Sep 17 00:00:00 2001 From: Benny Powers Date: Thu, 21 Nov 2024 11:37:44 +0200 Subject: [PATCH 4/5] style: lint --- elements/rh-table/rh-table.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/elements/rh-table/rh-table.ts b/elements/rh-table/rh-table.ts index 976ee53a46..5d628eb877 100644 --- a/elements/rh-table/rh-table.ts +++ b/elements/rh-table/rh-table.ts @@ -71,6 +71,7 @@ export class RhTable extends LitElement { return this.querySelector('[slot="summary"]') as HTMLElement | undefined; } + // eslint-disable-next-line no-unused-private-class-members #lightdom = new LightdomCSSController(this, import.meta.url); #internalColorPalette?: string | null; From bb6b66ef399cdf1031c925ce6e275a110f241b63 Mon Sep 17 00:00:00 2001 From: Benny Powers Date: Wed, 20 Nov 2024 17:21:39 +0200 Subject: [PATCH 5/5] perf: wip experimental ssr with lightdom css --- docs/_plugins/lit-ssr/worker.ts | 9 ++++++++- elements/rh-table/demo/rh-table.html | 2 -- elements/rh-table/rh-sort-button.ts | 6 +++--- elements/rh-table/rh-table-lightdom.css | 5 +++++ 4 files changed, 16 insertions(+), 6 deletions(-) diff --git a/docs/_plugins/lit-ssr/worker.ts b/docs/_plugins/lit-ssr/worker.ts index d073e7e64c..1e9a7d10d0 100644 --- a/docs/_plugins/lit-ssr/worker.ts +++ b/docs/_plugins/lit-ssr/worker.ts @@ -60,6 +60,14 @@ class RHDSSSRableRenderer extends LitElementRenderer { } yield* super.renderShadow(renderInfo); } + + override* renderLight(renderInfo: RenderInfo): RenderResult { + if (this.tagName === 'rh-table') { + console.log(renderInfo.customElementHostStack); + console.log(this.element); + } + yield* super.renderLight(renderInfo); + } } const elementRenderers = [ @@ -93,4 +101,3 @@ export default async function renderPage({ const end = performance.now(); return { page, rendered, durationMs: end - start }; } - diff --git a/elements/rh-table/demo/rh-table.html b/elements/rh-table/demo/rh-table.html index 31523bb0b8..4c3f0ab67f 100644 --- a/elements/rh-table/demo/rh-table.html +++ b/elements/rh-table/demo/rh-table.html @@ -38,8 +38,6 @@ Dates and venues subject to change. - - diff --git a/elements/rh-table/rh-sort-button.ts b/elements/rh-table/rh-sort-button.ts index 4686c61625..500ca9fd85 100644 --- a/elements/rh-table/rh-sort-button.ts +++ b/elements/rh-table/rh-sort-button.ts @@ -3,17 +3,17 @@ import { customElement } from 'lit/decorators/custom-element.js'; import { property } from 'lit/decorators/property.js'; import { classMap } from 'lit/directives/class-map.js'; -import { ComposedEvent } from '@patternfly/pfe-core'; - import { colorContextConsumer, type ColorTheme } from '../../lib/context/color/consumer.js'; import styles from './rh-sort-button.css'; const DIRECTIONS_OPPOSITES = { asc: 'desc', desc: 'asc' } as const; -export class RequestSortEvent extends ComposedEvent { +export class RequestSortEvent extends Event { constructor(public direction: 'asc' | 'desc') { super('request-sort', { + bubbles: true, + composed: true, cancelable: true, }); } diff --git a/elements/rh-table/rh-table-lightdom.css b/elements/rh-table/rh-table-lightdom.css index 73b157ed10..1b10897c24 100644 --- a/elements/rh-table/rh-table-lightdom.css +++ b/elements/rh-table/rh-table-lightdom.css @@ -1,3 +1,8 @@ +@property --_rhds-lightdom { + inherits: false; + syntax: string; +} + rh-table { --_rhds-lightdom: rh-table;
${this.caption}