typo3-typescript-sources 13.4.20

package/core/authentication/mfa-provider/totp.ts

@@ -0,0 +1,54 @@
+/*
+ * This file is part of the TYPO3 CMS project.
+ *
+ * It is free software; you can redistribute it and/or modify it under
+ * the terms of the GNU General Public License, either version 2
+ * of the License, or any later version.
+ *
+ * For the full copyright and license information, please read the
+ * LICENSE.txt file that was distributed with this source code.
+ *
+ * The TYPO3 project - inspiring people to share!
+ */
+
+import { html } from 'lit';
+import { customElement, property } from 'lit/decorators';
+import { PseudoButtonLitElement } from '@typo3/backend/element/pseudo-button';
+import Modal from '@typo3/backend/modal';
+
+@customElement('typo3-mfa-totp-url-info-button')
+export class MfaTotpUrlButton extends PseudoButtonLitElement {
+  @property({ type: String, attribute: 'data-url' }) modalUrl: string;
+  @property({ type: String, attribute: 'data-title' }) modalTitle: string;
+  @property({ type: String, attribute: 'data-description' }) modalDescription: string;
+  @property({ type: String, attribute: 'data-button-ok' }) buttonOk: string;
+
+  protected override buttonActivated(): void {
+    this.showTotpAuthUrlModal();
+  }
+
+  private showTotpAuthUrlModal(): void {
+    Modal.advanced({
+      title: this.modalTitle,
+      content: html`
+        <p>${this.modalDescription}</p>
+        <pre>${this.modalUrl}</pre>
+      `,
+      buttons: [
+        {
+          trigger: (): void => Modal.dismiss(),
+          text: this.buttonOk || 'OK',
+          active: true,
+          btnClass: 'btn-default',
+          name: 'ok'
+        }
+      ]
+    });
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'typo3-mfa-totp-url-info-button': MfaTotpUrlButton;
+  }
+}

package/core/cache/dedupe-async-task.ts

@@ -0,0 +1,95 @@
+interface Cache<T> {
+  promise: Promise<T>,
+  abortController: AbortController,
+  refCount: number,
+}
+
+/**
+ * (abortable) deduping caching strategy for promises
+ */
+export class DedupeAsyncTask<T> {
+  private promises: Record<string, Cache<T>> = {};
+  private results: Record<string, T> = {};
+
+  public async get(
+    key: string,
+    task: (signal: AbortSignal) => Promise<T>,
+    signal?: AbortSignal | null,
+  ): Promise<T> {
+    if (signal?.aborted) {
+      signal.throwIfAborted();
+    }
+
+    if (key in this.results) {
+      return this.results[key];
+    }
+
+    const promise = this.getPromise(key, task);
+    if (signal) {
+      return await this.getAbortablePromise(key, promise, signal);
+    }
+
+    return await promise;
+  }
+
+  private getPromise(
+    key: string,
+    task: (signal: AbortSignal) => Promise<T>,
+  ): Promise<T> {
+    if (key in this.promises) {
+      this.promises[key].refCount++;
+      return this.promises[key].promise;
+    }
+
+    const abortController = new AbortController();
+    const refCount = 1;
+    const promise = task(abortController.signal)
+      .then((value: T): T => {
+        this.results[key] = value;
+        return value;
+      })
+      .finally(() => {
+        if (key in this.promises) {
+          delete this.promises[key];
+        }
+      });
+
+    this.promises[key] = { promise, abortController, refCount };
+
+    return promise;
+  }
+
+  private getAbortablePromise(
+    key: string,
+    promise: Promise<T>,
+    signal: AbortSignal,
+  ): Promise<T> {
+    return new Promise<T>((resolve, reject) => {
+      const abortListener = () => {
+        if (key in this.promises && --this.promises[key].refCount < 1) {
+          this.promises[key].abortController.abort();
+          delete this.promises[key];
+        }
+        try {
+          signal.throwIfAborted();
+        } catch (e) {
+          reject(e);
+        }
+      };
+
+      signal.addEventListener('abort', abortListener, { once: true });
+      promise.then(
+        (value: T) => {
+          signal.removeEventListener('abort', abortListener);
+          if (!signal.aborted) {
+            resolve(value);
+          }
+        },
+        (e: unknown) => {
+          signal.removeEventListener('abort', abortListener);
+          reject(e);
+        }
+      );
+    });
+  }
+}

package/core/directive/markdown.ts

@@ -0,0 +1,82 @@
+import { marked, type MarkedOptions } from 'marked';
+import dompurify, { type Config as DOMPurifyConfig } from 'dompurify';
+import { html, type TemplateResult } from 'lit';
+import { until } from 'lit/directives/until';
+import { unsafeHTML } from 'lit/directives/unsafe-html';
+
+export type ProfileType = 'minimal' | 'default';
+
+interface ProfileConfig {
+  markdown: MarkedOptions,
+  dompurify: DOMPurifyConfig,
+}
+
+/**
+ * Parse `markdown` as markdown and render as lit HTML.
+ *
+ * @example
+ *
+ * ```
+ *   html`<div class="description">${markdown(myDescription, 'minimal')}</div>`
+ * ```
+ *
+ * @internal
+ */
+export const markdown = (
+  markdown: string,
+  profile: ProfileType = 'default'
+): TemplateResult =>
+  html`${until(render(markdown, profiles[profile]), markdown)}`;
+
+dompurify.addHook('afterSanitizeAttributes', (node) => {
+  if ('target' in node && !node.hasAttribute('target')) {
+    node.setAttribute('target', '_blank');
+  }
+});
+
+const profiles: Record<ProfileType, ProfileConfig> = {
+  minimal: {
+    markdown: {
+      gfm: true,
+      pedantic: false,
+    },
+    dompurify: {
+      ALLOWED_TAGS: ['a', 'blockquote', 'br', 'code', 'kbd', 'li', 'p', 'pre', 'strong', 'ul', 'ol'],
+      ALLOWED_ATTR: ['href', 'target', 'title', 'role'],
+    },
+  },
+  default: {
+    markdown: {
+      gfm: true,
+      pedantic: false,
+    },
+    dompurify: {
+      USE_PROFILES: {
+        html: true,
+      },
+    },
+  },
+};
+
+async function render(markdown: string, config: ProfileConfig) {
+  let parsed, sanitized: string;
+  try {
+    parsed = await marked.parse(markdown, {
+      async: true,
+      ...config.markdown,
+    });
+  } catch (e) {
+    console.error('Invalid Markdown', markdown, e);
+    return markdown;
+  }
+  try {
+    sanitized = dompurify.sanitize(
+      parsed,
+      config.dompurify,
+    );
+  } catch (e) {
+    console.error('Invalid HTML', parsed, e);
+    return markdown;
+  }
+  return unsafeHTML(sanitized);
+}

package/core/directive/nl2br.ts

@@ -0,0 +1,16 @@
+import { html, type TemplateResult } from 'lit';
+
+/**
+ * Render a multiline string by replacing \n with <br> as lit HTML.
+ *
+ * @example
+ *
+ * ```
+ *   html`<div class="description">${nl2br(myDescription)}</div>`
+ * ```
+ *
+ * @internal
+ */
+export const nl2br = (text: string): TemplateResult => html`${
+  text.split('\n').map((line, index) => index === 0 ? line : html`<br>${line}`)
+}`;

package/core/document-service.ts

@@ -0,0 +1,35 @@
+/*
+ * This file is part of the TYPO3 CMS project.
+ *
+ * It is free software; you can redistribute it and/or modify it under
+ * the terms of the GNU General Public License, either version 2
+ * of the License, or any later version.
+ *
+ * For the full copyright and license information, please read the
+ * LICENSE.txt file that was distributed with this source code.
+ *
+ * The TYPO3 project - inspiring people to share!
+ */
+
+/**
+ * Module: @typo3/core/document-service
+ * @exports @typo3/core/document-service
+ */
+class DocumentService {
+  private promise: Promise<Document> = null;
+
+  public ready(): Promise<Document> {
+    return this.promise ?? (this.promise = this.createPromise());
+  }
+
+  private async createPromise(): Promise<Document> {
+    if (document.readyState !== 'loading') {
+      return document;
+    }
+    await new Promise<void>(resolve => document.addEventListener('DOMContentLoaded', () => resolve(), { once: true }));
+    return document;
+  }
+}
+
+const documentService = new DocumentService();
+export default documentService;

package/core/event/debounce-event.ts

@@ -0,0 +1,40 @@
+/*
+ * This file is part of the TYPO3 CMS project.
+ *
+ * It is free software; you can redistribute it and/or modify it under
+ * the terms of the GNU General Public License, either version 2
+ * of the License, or any later version.
+ *
+ * For the full copyright and license information, please read the
+ * LICENSE.txt file that was distributed with this source code.
+ *
+ * The TYPO3 project - inspiring people to share!
+*/
+
+import RegularEvent from './regular-event';
+import type { Listener } from './event-interface';
+
+/**
+ * Debounces an event listener that is executed after the event happened.
+ * A debounced event listener is not executed again until a certain amount of time has passed without it being called.
+ */
+class DebounceEvent extends RegularEvent {
+  constructor(eventName: string, callback: Listener, wait: number = 250) {
+    super(eventName, callback);
+    this.callback = this.debounce(this.callback, wait);
+  }
+
+  private debounce(callback: Listener, wait: number): Listener {
+    let timeout: number = null;
+
+    return function (this: Node, ...args: unknown[]): void {
+      clearTimeout(timeout);
+      timeout = setTimeout((): void => {
+        timeout = null;
+        callback.apply(this, args);
+      }, wait);
+    };
+  }
+}
+
+export default DebounceEvent;

package/core/event/event-interface.ts

@@ -0,0 +1,24 @@
+/*
+ * This file is part of the TYPO3 CMS project.
+ *
+ * It is free software; you can redistribute it and/or modify it under
+ * the terms of the GNU General Public License, either version 2
+ * of the License, or any later version.
+ *
+ * For the full copyright and license information, please read the
+ * LICENSE.txt file that was distributed with this source code.
+ *
+ * The TYPO3 project - inspiring people to share!
+ */
+
+export type Listener = EventListenerWithTarget | EventListener;
+
+export interface EventListenerWithTarget {
+  (evt: Event, target?: Element): void;
+}
+
+export interface EventInterface {
+  bindTo(element: EventTarget): void;
+  delegateTo(element: EventTarget, selector: string): void;
+  release(): void;
+}

package/core/event/regular-event.ts

@@ -0,0 +1,58 @@
+/*
+ * This file is part of the TYPO3 CMS project.
+ *
+ * It is free software; you can redistribute it and/or modify it under
+ * the terms of the GNU General Public License, either version 2
+ * of the License, or any later version.
+ *
+ * For the full copyright and license information, please read the
+ * LICENSE.txt file that was distributed with this source code.
+ *
+ * The TYPO3 project - inspiring people to share!
+*/
+
+import type { EventInterface, Listener } from './event-interface';
+
+class RegularEvent implements EventInterface {
+  protected eventName: string;
+  protected callback: Listener;
+  protected options: AddEventListenerOptions | boolean;
+  private boundElement: EventTarget;
+
+  constructor(eventName: string, callback: Listener, options: AddEventListenerOptions | boolean = false) {
+    this.eventName = eventName;
+    this.callback = callback;
+    this.options = options;
+  }
+
+  public bindTo(element: EventTarget): void {
+    if (!element) {
+      console.warn(`Binding event ${this.eventName} failed, element was not found.`);
+      return;
+    }
+    this.boundElement = element;
+    element.addEventListener(this.eventName, this.callback, this.options);
+  }
+
+  public delegateTo(element: EventTarget, selector: string): void {
+    if (!element) {
+      console.warn(`Delegating event ${this.eventName} failed, element was not found.`);
+      return;
+    }
+    this.boundElement = element;
+    element.addEventListener(this.eventName, (e: Event): void => {
+      for (let targetElement = <HTMLElement>e.target; targetElement && targetElement !== this.boundElement; targetElement = targetElement.parentElement) {
+        if (targetElement.matches(selector)) {
+          this.callback.call(targetElement, e, targetElement);
+          break;
+        }
+      }
+    }, this.options);
+  }
+
+  public release(): void {
+    this.boundElement.removeEventListener(this.eventName, this.callback);
+  }
+}
+
+export default RegularEvent;

package/core/event/request-animation-frame-event.ts

@@ -0,0 +1,42 @@
+/*
+ * This file is part of the TYPO3 CMS project.
+ *
+ * It is free software; you can redistribute it and/or modify it under
+ * the terms of the GNU General Public License, either version 2
+ * of the License, or any later version.
+ *
+ * For the full copyright and license information, please read the
+ * LICENSE.txt file that was distributed with this source code.
+ *
+ * The TYPO3 project - inspiring people to share!
+*/
+
+import RegularEvent from './regular-event';
+import type { Listener } from './event-interface';
+
+/**
+ * Creates a event aimed for high performance visual operations
+ */
+class RequestAnimationFrameEvent extends RegularEvent {
+  constructor(eventName: string, callback: Listener) {
+    super(eventName, callback);
+    this.callback = this.req(this.callback);
+  }
+
+  private req(callback: Listener): Listener {
+    let timeout: number = null;
+
+    return (...args: unknown[]) => {
+      if (timeout) {
+        window.cancelAnimationFrame(timeout);
+      }
+
+      timeout = window.requestAnimationFrame(() => {
+        // Run our scroll functions
+        callback.apply(this, args);
+      });
+    };
+  }
+}
+
+export default RequestAnimationFrameEvent;

package/core/event/throttle-event.ts

@@ -0,0 +1,54 @@
+/*
+ * This file is part of the TYPO3 CMS project.
+ *
+ * It is free software; you can redistribute it and/or modify it under
+ * the terms of the GNU General Public License, either version 2
+ * of the License, or any later version.
+ *
+ * For the full copyright and license information, please read the
+ * LICENSE.txt file that was distributed with this source code.
+ *
+ * The TYPO3 project - inspiring people to share!
+*/
+
+import RegularEvent from './regular-event';
+import type { Listener } from './event-interface';
+
+/**
+ * Throttles the event listener to be called only after a defined time during the event's execution over time.
+ */
+class ThrottleEvent extends RegularEvent {
+  constructor(eventName: string, callback: Listener, limit: number) {
+    super(eventName, callback);
+    this.callback = this.throttle(callback, limit);
+  }
+
+  private throttle(callback: Listener, limit: number): Listener {
+    let eventData: unknown[] | null = null;
+    let intervalId: number | null = null;
+
+    return function (this: Node, ...args: unknown[]): void {
+      eventData = args;
+      if (intervalId !== null) {
+        // Bail out, a previous call to dispatch invoked an interval
+        // that will pick up eventData once the timeout occured.
+        return;
+      }
+      const dispatch = () => {
+        if (eventData === null) {
+          // No event since the last immediate dispatch, start a new fresh interval-phase
+          clearInterval(intervalId);
+          intervalId = null;
+          return;
+        }
+        callback.apply(this, eventData);
+        eventData = null;
+      };
+      // immediate dispatch, no need to wait as no timer is active
+      dispatch();
+      intervalId = setInterval(dispatch, limit);
+    };
+  }
+}
+
+export default ThrottleEvent;

package/core/java-script-item-handler.ts

@@ -0,0 +1,29 @@
+/*
+ * This file is part of the TYPO3 CMS project.
+ *
+ * It is free software; you can redistribute it and/or modify it under
+ * the terms of the GNU General Public License, either version 2
+ * of the License, or any later version.
+ *
+ * For the full copyright and license information, please read the
+ * LICENSE.txt file that was distributed with this source code.
+ *
+ * The TYPO3 project - inspiring people to share!
+ */
+/**
+ * This handler is used as client-side counterpart of `\TYPO3\CMS\Core\Page\JavaScriptRenderer`.
+ *
+ * @module @typo3/core/java-script-item-handler
+ * @internal Use in TYPO3 core only, API can change at any time!
+ */
+if (document.currentScript) {
+  const scriptElement = document.currentScript;
+  // extracts JSON payload from `/* [JSON] */` content
+  const textContent = scriptElement.textContent.replace(/^\s*\/\*\s*|\s*\*\/\s*/g, '');
+  const items = JSON.parse(textContent);
+
+  import('@typo3/core/java-script-item-processor').then(({ JavaScriptItemProcessor }) => {
+    const processor = new JavaScriptItemProcessor();
+    processor.processItems(items);
+  });
+}