vaadin · Lodin · Oct 15, 2024 · Oct 18, 2024 · Oct 22, 2024 · Oct 28, 2024
diff --git a/.editorconfig b/.editorconfig
@@ -0,0 +1,18 @@
+# http://editorconfig.org
+
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.{java,xml}]
+indent_size = 4
+
+[*.md]
+insert_final_newline = false
+trim_trailing_whitespace = false
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -2,9 +2,9 @@
   "extends": [
     "vaadin/typescript-requiring-type-checking",
     "vaadin/imports-typescript",
+    "vaadin/lit",
     "vaadin/prettier",
-    "vaadin/testing",
-    "plugin:oxlint/recommended"
+    "vaadin/testing"
   ],
   "parserOptions": {
     "project": "./tsconfig.json"

diff --git a/demo/.eslintrc.json b/demo/.eslintrc.json
@@ -1,15 +1,10 @@
 {
-  "rules": {
-  },
-  "globals": {
-    "ElementDemo": false,
-    "DemoReadyEventEmitter": false,
-    "Router": false
+  "extends": ["../.eslintrc.json"],
+  "root": true,
+  "parserOptions": {
+    "project": "./tsconfig.json"
   },
-  "overrides": [{
-    "files": ["vaadin-router-code-splitting-demos.html"],
-    "parserOptions": {
-      "ecmaVersion": 2017
-    }
-  }]
+  "rules": {
+    "@typescript-eslint/unbound-method": "off"
+  }
 }
diff --git a/demo/@debug/index.html b/demo/@debug/index.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <title>Debug</title>
+    <script async type="module" src="./index.ts"></script>
+  </head>
+  <body>
+    <vaadin-demo-layout app-title="Debug">
+      <vaadin-demo-debug></vaadin-demo-debug>
+    </vaadin-demo-layout>
+  </body>
+</html>
diff --git a/demo/@debug/index.ts b/demo/@debug/index.ts
@@ -0,0 +1,22 @@
+/* eslint-disable import/no-duplicates, import/default */
+import '@helpers/common.js';
+import '@helpers/vaadin-presentation.js';
+import { html, LitElement, type TemplateResult } from 'lit';
+import { customElement } from 'lit/decorators.js';
+
+// An URL of the iframe to debug
+// eslint-disable-next-line import/order
+import url1 from '../url-generation/d4/iframe.html?url';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'vaadin-demo-debug': DemoDebug;
+  }
+}
+
+@customElement('vaadin-demo-debug')
+export default class DemoDebug extends LitElement {
+  override render(): TemplateResult {
+    return html`<vaadin-presentation src=${url1}></vaadin-presentation>`;
+  }
+}
diff --git a/demo/@helpers/common.css b/demo/@helpers/common.css
@@ -0,0 +1,3 @@
+:host {
+  display: block;
+}
diff --git a/demo/@helpers/common.ts b/demo/@helpers/common.ts
@@ -0,0 +1,3 @@
+import '@vaadin/vaadin-lumo-styles/badge-global.js';
+import '@vaadin/vaadin-lumo-styles/color-global.js';
+import '@vaadin/vaadin-lumo-styles/typography-global.js';
diff --git a/demo/@helpers/iframe.script.ts b/demo/@helpers/iframe.script.ts
@@ -0,0 +1,33 @@
+import './common.css';
+import './common.js';
+
+import { Router } from '@vaadin/router';
+
+history.replaceState(null, '', '/');
+
+type MessageData = Readonly<{ url: string }>;
+
+type ParentData = {
+  source: MessageEventSource | null;
+  origin: string;
+};
+
+let parentData: ParentData | undefined;
+
+function updateParentUrl() {
+  if (parentData?.source) {
+    parentData.source.postMessage({ url: location.href }, { targetOrigin: location.origin });
+  }
+}
+
+addEventListener('message', ({ data, origin, source }: MessageEvent<MessageData | null>) => {
+  if (data != null) {
+    Router.go(new URL(data.url, location.origin).href);
+  } else {
+    parentData = { source, origin };
+  }
+
+  updateParentUrl();
+});
+
+addEventListener('vaadin-router-location-changed', updateParentUrl);
diff --git a/demo/@helpers/nested-styles.css b/demo/@helpers/nested-styles.css
@@ -0,0 +1,15 @@
+:host {
+  display: flex;
+  flex-direction: column;
+  background: #ddd;
+  padding: 5px;
+  min-height: 100vh;
+}
+
+main {
+  margin-top: 10px;
+  padding: 5px;
+  background: #fff;
+  flex: 1 0 auto;
+  min-height: 80px;
+}
diff --git a/demo/@helpers/page.css b/demo/@helpers/page.css
@@ -0,0 +1,4 @@
+code {
+  background: var(--code-background);
+  padding: 0.2em 0.4em;
+}
diff --git a/demo/@helpers/shared-styles.css b/demo/@helpers/shared-styles.css
@@ -0,0 +1,6 @@
+.note {
+  background-color: #24c0ea;
+  padding: 1em;
+  color: white;
+  border-radius: 4px;
+}
diff --git a/demo/@helpers/theme-controller.ts b/demo/@helpers/theme-controller.ts
@@ -0,0 +1,23 @@
+import type { ReactiveController, ReactiveControllerHost } from 'lit';
+
+export default class ThemeController implements ReactiveController {
+  readonly #host: ReactiveControllerHost;
+  #controller?: AbortController;
+
+  constructor(host: ReactiveControllerHost) {
+    (this.#host = host).addController(this);
+  }
+
+  get value(): string {
+    return document.documentElement.getAttribute('theme') ?? 'light';
+  }
+
+  hostConnected(): void {
+    this.#controller = new AbortController();
+    addEventListener('theme-changed', () => this.#host.requestUpdate(), { signal: this.#controller.signal });
+  }
+
+  hostDisconnected(): void {
+    this.#controller?.abort();
+  }
+}
diff --git a/demo/@helpers/vaadin-demo-code-snippet-file.css b/demo/@helpers/vaadin-demo-code-snippet-file.css
@@ -0,0 +1,39 @@
+header {
+  padding: 0.3rem 0.3rem;
+  font-size: 0.8rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background: var(--code-file-background);
+}
+
+section {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.title {
+  font-family: monospace;
+}
+
+.buttons {
+  display: flex;
+  gap: 1rem;
+}
+
+/* ======= Highlight.js styles ======= */
+
+:host([theme~='dark']) {
+  @nested-import 'highlight.js/styles/atom-one-dark.css';
+}
+
+:host([theme~='light']) {
+  @nested-import 'highlight.js/styles/vs.css';
+}
+
+pre {
+  margin: 0;
+  padding: 0.5rem 1rem;
+  background: var(--code-background);
+}
diff --git a/demo/@helpers/vaadin-demo-code-snippet-file.ts b/demo/@helpers/vaadin-demo-code-snippet-file.ts
@@ -0,0 +1,69 @@
+/* eslint-disable @typescript-eslint/unbound-method */
+import '@vaadin/button/src/vaadin-button';
+import '@vaadin/icon/src/vaadin-icon';
+import { type TemplateResult, LitElement, html, nothing } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { map } from 'lit/directives/map.js';
+import ThemeController from './theme-controller.js';
+import css from './vaadin-demo-code-snippet-file.css?ctr';
+
+export type CodeSnippet = Readonly<{
+  id?: string;
+  code: [original: string, full: TemplateResult, ...rest: TemplateResult[]];
+  title?: string;
+}>;
+
+@customElement('vaadin-demo-code-snippet-file')
+export default class DemoCodeSnippetFile extends LitElement {
+  static override styles = [css];
+
+  @property({ attribute: false }) accessor file: CodeSnippet | undefined;
+
+  @state() accessor #expanded = false;
+
+  readonly #theme = new ThemeController(this);
+
+  override updated(): void {
+    this.setAttribute('theme', this.#theme.value);
+  }
+
+  override render(): TemplateResult | typeof nothing {
+    if (!this.file) {
+      return nothing;
+    }
+
+    const [_, full, ...snippets] = this.file.code;
+
+    return html`
+      <header>
+        <div class="title">${this.file.title}</div>
+        <div class="buttons">
+          <vaadin-icon icon="vaadin:expand" @click=${this.#toggleExpanded}></vaadin-icon>
+          <vaadin-icon icon="vaadin:copy" @click=${this.#copyToClipboard}></vaadin-icon>
+        </div>
+      </header>
+      <section>
+        ${this.#expanded
+          ? html`<pre><code>${full}</code></pre>`
+          : map(snippets, (snippet) => html`<pre><code>${snippet}</code></pre>`)}
+      </section>
+    `;
+  }
+
+  #toggleExpanded(): void {
+    this.#expanded = !this.#expanded;
+  }
+
+  async #copyToClipboard(): Promise<void> {
+    const [original] = this.file?.code ?? [];
+    if (original) {
+      await navigator.clipboard.writeText(original);
+    }
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'vaadin-demo-code-snippet-file': DemoCodeSnippetFile;
+  }
+}
diff --git a/demo/@helpers/vaadin-demo-code-snippet.css b/demo/@helpers/vaadin-demo-code-snippet.css
@@ -0,0 +1,5 @@
+:host {
+  display: block;
+  max-height: 20rem;
+  overflow-y: auto;
+}
diff --git a/demo/@helpers/vaadin-demo-code-snippet.ts b/demo/@helpers/vaadin-demo-code-snippet.ts
@@ -0,0 +1,41 @@
+/* eslint-disable import/no-duplicates */
+import { html, LitElement, type TemplateResult } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { repeat } from 'lit/directives/repeat.js';
+import type { CodeSnippet } from './vaadin-demo-code-snippet-file.js';
+import './vaadin-demo-code-snippet-file.js';
+import css from './vaadin-demo-code-snippet.css?ctr';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'vaadin-demo-code-snippet': DemoCodeSnippet;
+  }
+
+  interface WindowEventMap {
+    'theme-changed': Event;
+  }
+}
+
+export type { CodeSnippet };
+
+function renderFile(file: CodeSnippet): TemplateResult {
+  return html`<vaadin-demo-code-snippet-file .file=${file}></vaadin-demo-code-snippet-file>`;
+}
+
+@customElement('vaadin-demo-code-snippet')
+export default class DemoCodeSnippet extends LitElement {
+  static override styles = [css];
+
+  @property({ attribute: false }) accessor files: readonly CodeSnippet[] = [];
+
+  override render(): TemplateResult {
+    switch (this.files.length) {
+      case 0:
+        return html``;
+      case 1:
+        return renderFile(this.files[0]);
+      default:
+        return html` ${repeat(this.files, ({ id }) => id, renderFile)} `;
+    }
+  }
+}
diff --git a/demo/@helpers/vaadin-demo-layout.css b/demo/@helpers/vaadin-demo-layout.css
@@ -0,0 +1,34 @@
+:host {
+  --code-background-light: hsl(35, 83%, 91%);
+  --code-file-background-light: hsl(35, 83%, 85%);
+  --code-background-dark: hsl(0, 0%, 17%);
+  --code-file-background-dark: hsl(0, 0%, 23%);
+}
+
+:host([theme~='dark']) {
+  --code-background: var(--code-background-dark);
+  --code-file-background: var(--code-file-background-dark);
+}
+
+:host([theme~='light']) {
+  --code-background: var(--code-background-light);
+  --code-file-background: var(--code-file-background-light);
+}
+
+@media (max-width: 767px) {
+  main {
+    padding: 0;
+  }
+}
+
+main {
+  padding: 0 20%;
+}
+
+.navbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  padding: 0 1rem;
+}