feat: implement experimental support for server side rendering (SSR) (#…

…2466) This PR adds the experimental possibility to use server side rendering with `@sbb-esta/lyne-components`. Most components have been verified to work with SSR, but our testing setup is not yet complete and will be finished in a future PR. --------- Co-authored-by: Jeremias Peier <[email protected]>
sbb-design-systems · Mar 21, 2024 · 3abcc68 · 3abcc68
1 parent 6d4e9c2
commit 3abcc68
Show file tree

Hide file tree

Showing 268 changed files with 4,151 additions and 2,417 deletions.
diff --git a/config/lit-ssr-worker.js b/config/lit-ssr-worker.js
@@ -1,9 +1,11 @@
+import { createHash } from 'crypto';
 import { existsSync, mkdirSync, readFileSync, writeFileSync } from 'fs';
+import { dirname, join, relative, resolve } from 'path';
 import { parentPort, workerData } from 'worker_threads';
+
 import { render } from '@lit-labs/ssr';
-import { build } from 'vite';
-import { createHash } from 'crypto';
-import { dirname, join, relative, resolve } from 'path';
+import * as esbuild from 'esbuild';
+import { sassPlugin } from 'esbuild-sass-plugin';
 
 if (parentPort === null) {
   throw new Error('worker.js must only be run in a worker thread');
@@ -50,6 +52,28 @@ async function buildModules(buildCacheOutDir) {
     .join('\n');
   writeFileSync(entry, importStatement, 'utf8');
 
+  await esbuild.build({
+    entryPoints: [entry],
+    outdir: buildCacheOutDir.pathname,
+    bundle: true,
+    format: 'esm',
+    platform: 'node',
+    target: 'node20',
+    external: Object.keys({ ...pkg.dependencies, ...pkg.devDependencies }),
+    logLevel: 'warning',
+    plugins: [
+      sassPlugin({
+        type: 'lit-css',
+        loadPaths: [
+          new URL('../', import.meta.url).pathname,
+          new URL('../node_modules/', import.meta.url).pathname,
+        ],
+      }),
+    ],
+  });
+
+  /*
+  // Vite build config. It is slower by about a factor of 3.
   await build({
     root: new URL('..', import.meta.url).pathname,
     mode: 'development',
@@ -66,6 +90,7 @@ async function buildModules(buildCacheOutDir) {
       sourcemap: 'inline',
     },
   });
+  */
 }
 
 /** Generate a hash from the contents of the given modules and their import chain. */

diff --git a/package.json b/package.json
@@ -87,6 +87,7 @@
     "chromatic": "11.2.0",
     "custom-elements-manifest": "^2.0.0",
     "date-fns": "3.6.0",
+    "esbuild-sass-plugin": "^3.1.0",
     "eslint": "8.57.0",
     "eslint-config-prettier": "9.1.0",
     "eslint-plugin-import": "npm:eslint-plugin-i@latest",
@@ -123,6 +124,7 @@
   },
   "resolutions": {
     "@types/node": "20.11.30",
+    "@webcomponents/template-shadowroot": "0.2.1",
     "jackspeak": "2.1.1",
     "lit": "3.1.2"
   },

diff --git a/src/components/accordion/accordion.e2e.ts b/src/components/accordion/accordion.e2e.ts
@@ -2,7 +2,8 @@ import { assert, expect } from '@open-wc/testing';
 import { nothing } from 'lit';
 import { html } from 'lit/static-html.js';
 
-import { waitForCondition, waitForLitRender, EventSpy, fixture, isSsr } from '../core/testing';
+import { waitForCondition, waitForLitRender, EventSpy, isSsr } from '../core/testing';
+import { fixture } from '../core/testing/private';
 import { SbbExpansionPanelElement, type SbbExpansionPanelHeaderElement } from '../expansion-panel';
 
 import { SbbAccordionElement } from './accordion';

diff --git a/src/components/accordion/accordion.spec.ts b/src/components/accordion/accordion.spec.ts
@@ -1,14 +1,14 @@
-import { expect, fixture } from '@open-wc/testing';
+import { expect } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
 import { waitForLitRender } from '../core/testing';
-import { testA11yTreeSnapshot } from '../core/testing/a11y-tree-snapshot';
+import { fixture, testA11yTreeSnapshot } from '../core/testing/private';
 
 import type { SbbAccordionElement } from './accordion';
 import './accordion';
 import '../expansion-panel';
 
-describe('sbb-accordion', () => {
+describe(`sbb-accordion`, () => {
   let element: SbbAccordionElement;
 
   beforeEach(async () => {

diff --git a/src/components/action-group/action-group.e2e.ts b/src/components/action-group/action-group.e2e.ts
@@ -1,30 +1,35 @@
-import { assert, expect, fixture } from '@open-wc/testing';
+import { assert, expect } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
 import type { SbbSecondaryButtonElement } from '../button';
 import { waitForLitRender } from '../core/testing';
+import { fixture } from '../core/testing/private';
 import type { SbbBlockLinkElement } from '../link';
-import '../button/secondary-button';
-import '../link/block-link';
 
 import { SbbActionGroupElement } from './action-group';
 
-describe('sbb-action-group', () => {
+import '../button/secondary-button';
+import '../link/block-link';
+
+describe(`sbb-action-group with ${fixture.name}`, () => {
   let element: SbbActionGroupElement;
 
   beforeEach(async () => {
-    element = await fixture(html`
-      <sbb-action-group align-group="start" orientation="horizontal">
-        <sbb-secondary-button>Button</sbb-secondary-button>
-        <sbb-block-link
-          icon-name="chevron-small-left-small"
-          icon-placement="start"
-          href="https://github.com/lyne-design-system/lyne-components"
-        >
-          Link
-        </sbb-block-link>
-      </sbb-action-group>
-    `);
+    element = await fixture(
+      html`
+        <sbb-action-group align-group="start" orientation="horizontal">
+          <sbb-secondary-button>Button</sbb-secondary-button>
+          <sbb-block-link
+            icon-name="chevron-small-left-small"
+            icon-placement="start"
+            href="https://github.com/lyne-design-system/lyne-components"
+          >
+            Link
+          </sbb-block-link>
+        </sbb-action-group>
+      `,
+      { modules: ['./action-group.ts', '../button/index.ts', '../link/index.ts'] },
+    );
     await waitForLitRender(element);
   });
 
@@ -35,7 +40,7 @@ describe('sbb-action-group', () => {
   describe('property sync', () => {
     it('should sync default size with sbb-button', async () => {
       const buttons = Array.from(
-        document.querySelectorAll('sbb-action-group sbb-secondary-button'),
+        element.querySelectorAll('sbb-secondary-button'),
       ) as SbbSecondaryButtonElement[];
       expect(buttons.length).to.be.greaterThan(0);
       expect(buttons.every((l) => l.size === 'l')).to.be.ok;
@@ -45,7 +50,7 @@ describe('sbb-action-group', () => {
       element.setAttribute('button-size', 'm');
       await waitForLitRender(element);
       const buttons = Array.from(
-        document.querySelectorAll('sbb-action-group sbb-secondary-button'),
+        element.querySelectorAll('sbb-secondary-button'),
       ) as SbbSecondaryButtonElement[];
       expect(buttons.length).to.be.greaterThan(0);
       expect(buttons.every((l) => l.size === 'm')).to.be.ok;
@@ -54,9 +59,7 @@ describe('sbb-action-group', () => {
     it('should update attributes with link-size="s"', async () => {
       element.setAttribute('link-size', 's');
       await waitForLitRender(element);
-      const links = Array.from(
-        document.querySelectorAll('sbb-action-group sbb-block-link'),
-      ) as SbbBlockLinkElement[];
+      const links = Array.from(element.querySelectorAll('sbb-block-link')) as SbbBlockLinkElement[];
       expect(links.length).to.be.greaterThan(0);
       expect(links.every((l) => l.size === 's')).to.be.ok;
     });

diff --git a/src/components/action-group/action-group.spec.ts b/src/components/action-group/action-group.spec.ts
@@ -1,16 +1,16 @@
-import { expect, fixture } from '@open-wc/testing';
+import { expect } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
 import type { SbbSecondaryButtonElement } from '../button';
 import { waitForLitRender } from '../core/testing';
-import { testA11yTreeSnapshot } from '../core/testing/a11y-tree-snapshot';
+import { fixture, testA11yTreeSnapshot } from '../core/testing/private';
 
 import type { SbbActionGroupElement } from './action-group';
 import './action-group';
 import '../button/secondary-button';
 import '../link/block-link';
 
-describe('sbb-action-group', () => {
+describe(`sbb-action-group`, () => {
   describe('renders', () => {
     let element: SbbActionGroupElement;
 

diff --git a/src/components/alert/alert-group/alert-group.e2e.ts b/src/components/alert/alert-group/alert-group.e2e.ts
@@ -1,15 +1,16 @@
-import { expect, fixture } from '@open-wc/testing';
+import { expect } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
 import type { SbbTransparentButtonElement } from '../../button';
 import { waitForCondition, EventSpy, waitForLitRender } from '../../core/testing';
+import { fixture } from '../../core/testing/private';
 import type { SbbAlertElement } from '../alert';
 
 import { SbbAlertGroupElement } from './alert-group';
 
 import '../alert';
 
-describe('sbb-alert-group', () => {
+describe(`sbb-alert-group with ${fixture.name}`, () => {
   let element: SbbAlertGroupElement;
 
   it('should handle events ond states on interacting with alerts', async () => {
@@ -18,16 +19,19 @@ describe('sbb-alert-group', () => {
     const accessibilityTitleLevel = '3';
 
     // Given sbb-alert-group with two alerts
-    element = await fixture(html`
-      <sbb-alert-group
-        id="${alertGroupId}"
-        accessibility-title="${accessibilityTitle}"
-        accessibility-title-level="${accessibilityTitleLevel}"
-      >
-        <sbb-alert title-content="Interruption" href="www.sbb.ch">First</sbb-alert>
-        <sbb-alert title-content="Interruption" href="www.sbb.ch">Second</sbb-alert>
-      </sbb-alert-group>
-    `);
+    element = await fixture(
+      html`
+        <sbb-alert-group
+          id="${alertGroupId}"
+          accessibility-title="${accessibilityTitle}"
+          accessibility-title-level="${accessibilityTitleLevel}"
+        >
+          <sbb-alert title-content="Interruption" href="www.sbb.ch">First</sbb-alert>
+          <sbb-alert title-content="Interruption" href="www.sbb.ch">Second</sbb-alert>
+        </sbb-alert-group>
+      `,
+      { modules: ['./alert-group.ts', '../alert/index.ts'] },
+    );
     const didDismissAlertSpy = new EventSpy(SbbAlertGroupElement.events.didDismissAlert);
     const emptySpy = new EventSpy(SbbAlertGroupElement.events.empty);
 
@@ -97,6 +101,7 @@ describe('sbb-alert-group', () => {
     // Given empty sbb-alert-group
     element = await fixture(
       html`<sbb-alert-group accessibility-title="Disruptions"></sbb-alert-group>`,
+      { modules: ['./alert-group.ts'] },
     );
     const emptySpy = new EventSpy(SbbAlertGroupElement.events.empty);
 

diff --git a/src/components/alert/alert-group/alert-group.spec.ts b/src/components/alert/alert-group/alert-group.spec.ts
@@ -1,14 +1,14 @@
-import { expect, fixture } from '@open-wc/testing';
+import { expect } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
 import { waitForLitRender } from '../../core/testing';
-import { testA11yTreeSnapshot } from '../../core/testing/a11y-tree-snapshot';
+import { fixture, testA11yTreeSnapshot } from '../../core/testing/private';
 
 import type { SbbAlertGroupElement } from './alert-group';
 import './alert-group';
 import '../alert';
 
-describe('sbb-alert-group', () => {
+describe(`sbb-alert-group`, () => {
   describe('should render', () => {
     let root: SbbAlertGroupElement;
 

diff --git a/src/components/alert/alert-group/alert-group.ts b/src/components/alert/alert-group/alert-group.ts
@@ -86,7 +86,10 @@ export class SbbAlertGroupElement extends LitElement {
 
   private _slotChanged(event: Event): void {
     const hadAlerts = this._hasAlerts;
-    this._hasAlerts = (event.target as HTMLSlotElement).assignedElements().length > 0;
+    this._hasAlerts =
+      (event.target as HTMLSlotElement)
+        .assignedElements()
+        .filter((e) => e instanceof Element && e.localName === 'sbb-alert').length > 0;
     if (!this._hasAlerts && hadAlerts) {
       this._empty.emit();
     }

diff --git a/src/components/alert/alert/alert.e2e.ts b/src/components/alert/alert/alert.e2e.ts
@@ -1,23 +1,26 @@
-import { assert, expect, fixture } from '@open-wc/testing';
+import { assert, expect } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
 import { waitForCondition, EventSpy } from '../../core/testing';
+import { fixture } from '../../core/testing/private';
 
 import { SbbAlertElement } from './alert';
 
-describe('sbb-alert', () => {
+describe(`sbb-alert with ${fixture.name}`, () => {
   let alert: SbbAlertElement;
 
   it('renders', async () => {
-    alert = await fixture(html`<sbb-alert></sbb-alert>`);
+    alert = await fixture(html`<sbb-alert></sbb-alert>`, { modules: ['./alert.ts'] });
     assert.instanceOf(alert, SbbAlertElement);
   });
 
   it('should fire animation events', async () => {
     const willOpenSpy = new EventSpy(SbbAlertElement.events.willOpen);
     const didOpenSpy = new EventSpy(SbbAlertElement.events.didOpen);
 
-    await fixture(html`<sbb-alert title-content="disruption">Interruption</sbb-alert>`);
+    await fixture(html`<sbb-alert title-content="disruption">Interruption</sbb-alert>`, {
+      modules: ['./alert.ts'],
+    });
 
     await waitForCondition(() => willOpenSpy.events.length === 1);
     expect(willOpenSpy.count).to.be.equal(1);
@@ -28,6 +31,7 @@ describe('sbb-alert', () => {
   it('should hide close button in readonly mode', async () => {
     alert = await fixture(
       html`<sbb-alert title-content="Interruption" readonly>Alert content</sbb-alert>`,
+      { modules: ['./alert.ts'] },
     );
 
     expect(alert.shadowRoot!.querySelector('.sbb-alert__close-button-wrapper')).to.be.null;

diff --git a/src/components/alert/alert/alert.spec.ts b/src/components/alert/alert/alert.spec.ts
@@ -1,14 +1,14 @@
-import { expect, fixture } from '@open-wc/testing';
+import { expect } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
 import { waitForLitRender } from '../../core/testing';
-import { testA11yTreeSnapshot } from '../../core/testing/a11y-tree-snapshot';
+import { fixture, testA11yTreeSnapshot } from '../../core/testing/private';
 
 import type { SbbAlertElement } from './alert';
 
 import './alert';
 
-describe('sbb-alert', () => {
+describe(`sbb-alert`, () => {
   let element: SbbAlertElement;
 
   it('should render default properties', async () => {

diff --git a/src/components/autocomplete/autocomplete.e2e.ts b/src/components/autocomplete/autocomplete.e2e.ts
@@ -1,28 +1,32 @@
-import { assert, expect, fixture } from '@open-wc/testing';
+import { assert, expect } from '@open-wc/testing';
 import { sendKeys, sendMouse } from '@web/test-runner-commands';
 import { html } from 'lit/static-html.js';
 
 import { waitForCondition, waitForLitRender, EventSpy } from '../core/testing';
+import { fixture } from '../core/testing/private';
 import { SbbFormFieldElement } from '../form-field';
 import { SbbOptionElement } from '../option';
 
 import { SbbAutocompleteElement } from './autocomplete';
 
-describe('sbb-autocomplete', () => {
+describe(`sbb-autocomplete with ${fixture.name}`, () => {
   let element: SbbAutocompleteElement, formField: SbbFormFieldElement, input: HTMLInputElement;
 
   beforeEach(async () => {
-    formField = await fixture(html`
-      <sbb-form-field>
-        <input />
-        <sbb-autocomplete id="myAutocomplete" disable-animation>
-          <sbb-option id="option-1" value="1">1</sbb-option>
-          <sbb-option id="option-2" value="2">2</sbb-option>
-          <sbb-option id="option-3" value="3">3</sbb-option>
-        </sbb-autocomplete>
-      </sbb-form-field>
-      <button>Use this for backdrop click</button>
-    `);
+    formField = await fixture(
+      html`
+        <sbb-form-field>
+          <input />
+          <sbb-autocomplete id="myAutocomplete" disable-animation>
+            <sbb-option id="option-1" value="1">1</sbb-option>
+            <sbb-option id="option-2" value="2">2</sbb-option>
+            <sbb-option id="option-3" value="3">3</sbb-option>
+          </sbb-autocomplete>
+        </sbb-form-field>
+        <button>Use this for backdrop click</button>
+      `,
+      { modules: ['../form-field/index.ts', './autocomplete.ts', '../option/index.ts'] },
+    );
     input = formField.querySelector<HTMLInputElement>('input')!;
     element = formField.querySelector<SbbAutocompleteElement>('sbb-autocomplete')!;
   });