typo3-typescript-sources 13.4.20

package/core/tests/ajax/input-transformer-test.ts

@@ -0,0 +1,64 @@
+/*
+ * 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 { InputTransformer, type GenericKeyValue } from '@typo3/core/ajax/input-transformer.js';
+import { expect } from '@open-wc/testing';
+import type { } from 'mocha';
+
+describe('@typo3/core/ajax/input-transformer', (): void => {
+  it('converts object to FormData', (): void => {
+    const input: GenericKeyValue = { foo: 'bar', bar: 'baz', nested: { works: 'yes' } };
+    const expected = new FormData();
+    expected.set('foo', 'bar');
+    expected.set('bar', 'baz');
+    expected.set('nested[works]', 'yes');
+
+    expect(InputTransformer.toFormData(input)).to.eql(expected);
+  });
+
+  it('undefined values are removed in FormData', (): void => {
+    const input: GenericKeyValue = { foo: 'bar', bar: 'baz', removeme: undefined };
+    const expected = new FormData();
+    expected.set('foo', 'bar');
+    expected.set('bar', 'baz');
+
+    expect(InputTransformer.toFormData(input)).to.eql(expected);
+  });
+
+  it('converts object to SearchParams', (): void => {
+    const input: GenericKeyValue = { foo: 'bar', bar: 'baz', nested: { works: 'yes' } };
+    const expected = 'foo=bar&bar=baz&nested[works]=yes';
+
+    expect(InputTransformer.toSearchParams(input)).to.equal(expected);
+  });
+
+  it('merges array to SearchParams', (): void => {
+    const input: Array<string> = ['foo=bar', 'bar=baz'];
+    const expected = 'foo=bar&bar=baz';
+
+    expect(InputTransformer.toSearchParams(input)).to.equal(expected);
+  });
+
+  it('keeps string in SearchParams', (): void => {
+    const input: string = 'foo=bar&bar=baz';
+    const expected = 'foo=bar&bar=baz';
+
+    expect(InputTransformer.toSearchParams(input)).to.equal(expected);
+  });
+
+  it('undefined values are removed in SearchParams', (): void => {
+    const input: GenericKeyValue = { foo: 'bar', bar: 'baz', removeme: undefined };
+    const expected = 'foo=bar&bar=baz';
+    expect(InputTransformer.toSearchParams(input)).to.equal(expected);
+  });
+});

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

@@ -0,0 +1,152 @@
+/*
+ * 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 { DedupeAsyncTask } from '@typo3/core/cache/dedupe-async-task.js';
+import { expect } from '@open-wc/testing';
+import type { } from 'mocha';
+
+interface Cache<T> {
+  promise: Promise<T>,
+  abortController: AbortController,
+  refCount: number,
+}
+
+interface DedupeAsyncTaskPublic<T> {
+  promises: Record<string, Cache<T>>;
+}
+
+describe('@typo3/core/cache/dedupe-async-task', (): void => {
+  it('dedupes', async (): Promise<void> => {
+    let counter = 0;
+    const task = async (): Promise<number> => {
+      return ++counter;
+    };
+    const dedupe = new DedupeAsyncTask<number>();
+    const a = await dedupe.get('foo', task);
+    const b = await dedupe.get('foo', task);
+    expect(a).to.equal(1);
+    expect(b).to.equal(1);
+  });
+
+  describe('aborts requests', (): void => {
+    const boolTask = async (signal: AbortSignal): Promise<boolean> => {
+      await new Promise((resolve) => window.setTimeout(resolve, 0));
+      return !signal.aborted;
+    };
+
+    it('if all requests are aborted', async (): Promise<void> => {
+      let wasAborted: boolean;
+      const task = async (signal: AbortSignal): Promise<void> => {
+        await new Promise((resolve) => window.setTimeout(resolve, 0));
+        wasAborted = signal.aborted;
+      };
+
+      const dedupe = new DedupeAsyncTask<void>();
+
+      const abortControllerA = new AbortController();
+      const aPromise = dedupe.get('foo', task, abortControllerA.signal);
+
+      const abortControllerB = new AbortController();
+      const bPromise = dedupe.get('foo', task, abortControllerB.signal);
+
+      const internalPromise = (dedupe as unknown as DedupeAsyncTaskPublic<void>).promises.foo.promise;
+      abortControllerA.abort();
+      abortControllerB.abort();
+
+      let aHasError = false;
+      try {
+        await aPromise;
+      } catch {
+        aHasError = true;
+      }
+      let bHasError = false;
+      try {
+        await bPromise;
+      } catch {
+        bHasError = true;
+      }
+
+      expect(aHasError).to.be.true;
+      expect(bHasError).to.be.true;
+      await internalPromise;
+      expect(wasAborted).to.be.true;
+    });
+
+    it('unless only first request is aborted', async (): Promise<void> => {
+      const dedupe = new DedupeAsyncTask<boolean>();
+
+      const abortControllerA = new AbortController();
+      const aPromise = dedupe.get('foo', boolTask, abortControllerA.signal);
+
+      const abortControllerB = new AbortController();
+      const bPromise = dedupe.get('foo', boolTask, abortControllerB.signal);
+
+      abortControllerA.abort();
+
+      let error: Error;
+      try {
+        await aPromise;
+      } catch (e: unknown) {
+        error = e as Error;
+      }
+      const b = await bPromise;
+
+      expect(error.name).to.equal('AbortError');
+      expect(b).to.be.true;
+    });
+
+    it('unless only last request is aborted', async (): Promise<void> => {
+      const dedupe = new DedupeAsyncTask<boolean>();
+
+      const abortControllerA = new AbortController();
+      const aPromise = dedupe.get('foo', boolTask, abortControllerA.signal);
+
+      let a: boolean | null;
+      const aInBackground = aPromise.then((v) => a = v).catch((): void => a = null);
+
+      const abortControllerB = new AbortController();
+      const bPromise = dedupe.get('foo', boolTask, abortControllerB.signal);
+
+      abortControllerB.abort('stop b!');
+      let b: boolean|null;
+      try {
+        b = await bPromise;
+      } catch {
+        b = null;
+      }
+
+      await aInBackground;
+
+      expect(a).to.be.true;
+      expect(b).to.be.null;
+    });
+
+
+    it('if previous request already succeeded', async (): Promise<void> => {
+      const dedupe = new DedupeAsyncTask<boolean>();
+      const a = await dedupe.get('foo', boolTask);
+      const abortControllerB = new AbortController();
+      abortControllerB.abort();
+      let error: Error;
+      try {
+        await dedupe.get('foo', boolTask, abortControllerB.signal);
+      } catch (e: unknown) {
+        error = e as Error;
+      }
+
+      expect(a).to.be.true;
+      expect(error.name).to.equal('AbortError');
+    });
+
+  });
+});

package/core/tests/event/throttle-event-test.ts

@@ -0,0 +1,47 @@
+/*
+ * 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 ThrottleEvent from '@typo3/core/event/throttle-event.js';
+import { expect } from '@open-wc/testing';
+import type { } from 'mocha';
+
+describe('@typo3/core/event/throttle-event', () => {
+  it('does not duplicate events', async () => {
+    let count = 0;
+    const div = document.createElement('div');
+    new ThrottleEvent('my-event', () => count++, 1).bindTo(div);
+    div.dispatchEvent(new Event('my-event'));
+    // await some milliseconds to account for possibly broken implementation that dispatches twice
+    await new Promise<void>(resolve => setTimeout(resolve, 5));
+    expect(count).to.equal(1);
+  });
+
+  it('dispatches most recent event in interval amplitude', async () => {
+    let count = 0;
+    const seq = [] as number[];
+    const div = document.createElement('div');
+    new ThrottleEvent('my-event', (e: CustomEvent) => {
+      seq.push(e.detail.seq);
+      count++;
+    }, 10).bindTo(div);
+    div.dispatchEvent(new CustomEvent('my-event', { detail: { seq: 1 } }));
+    div.dispatchEvent(new CustomEvent('my-event', { detail: { seq: 2 } }));
+    div.dispatchEvent(new CustomEvent('my-event', { detail: { seq: 3 } }));
+    await new Promise<void>(resolve => setTimeout(resolve, 15));
+    div.dispatchEvent(new CustomEvent('my-event', { detail: { seq: 4 } }));
+    div.dispatchEvent(new CustomEvent('my-event', { detail: { seq: 5 } }));
+    await new Promise<void>(resolve => setTimeout(resolve, 10));
+    expect(count).to.equal(3);
+    expect(seq).to.eql([1,3,5]);
+  });
+});

package/core/tests/literals-test.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!
+ */
+
+import { selector } from '@typo3/core/literals.js';
+import { expect } from '@open-wc/testing';
+import type { } from 'mocha';
+
+describe('@typo3/core/literals', (): void => {
+  it('escapes values in query selectors', (): void => {
+    const name = 'abc123"#_.,xyz';
+    const value = selector`#field[name="${name}"]`;
+    expect(value).to.equal('#field[name="abc123\\"\\#_\\.\\,xyz"]');
+  });
+});

package/core/tests/security-utility-test.ts

@@ -0,0 +1,50 @@
+/*
+ * 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 SecurityUtility from '@typo3/core/security-utility.js';
+import { expect } from '@open-wc/testing';
+import type { } from 'mocha';
+
+describe('@typo3/core/security-utility', (): void => {
+  it('generates random hex value', (): void => {
+    function* validLengthDataProvider(): any {
+      yield 1;
+      yield 20;
+      yield 39;
+    }
+    for (const validLength of validLengthDataProvider()) {
+      const randomHexValue = (new SecurityUtility()).getRandomHexValue(validLength);
+      expect(randomHexValue.length).to.equal(validLength);
+    }
+  });
+
+  it('throws SyntaxError on invalid length', (): void => {
+    function* invalidLengthDataProvider(): any {
+      yield 0;
+      yield -90;
+      yield 10.3; // length is "ceiled", 10.3 => 11, 10 != 11
+    }
+    for (const invalidLength of invalidLengthDataProvider()) {
+      expect(() => (new SecurityUtility()).getRandomHexValue(invalidLength)).to.throw(SyntaxError);
+    }
+  });
+
+  it('encodes HTML', (): void => {
+    expect((new SecurityUtility).encodeHtml('<>"\'&')).to.equal('&lt;&gt;&quot;&apos;&amp;');
+  });
+
+  it('removes HTML from string', (): void => {
+    expect((new SecurityUtility).stripHtml('<img src="" onerror="alert(\'1\')">oh noes')).to.equal('oh noes');
+    expect((new SecurityUtility).encodeHtml('<>"\'&')).to.equal('&lt;&gt;&quot;&apos;&amp;');
+  });
+});

package/core/utility/types.ts

@@ -0,0 +1,9 @@
+export type IfEquals<X, Y, A, B> =
+  (<T>() => T extends X ? 1 : 2) extends
+  (<T>() => T extends Y ? 1 : 2) ? A : B;
+
+export type WritableKeysOf<T> = {
+  [P in keyof T]: IfEquals<{ [Q in P]: T[P] }, { -readonly [Q in P]: T[P] }, P, never>
+}[keyof T];
+
+export type WritablePart<T> = Pick<T, WritableKeysOf<T>>;

package/dashboard/chart-initializer.ts

@@ -0,0 +1,136 @@
+/*
+* 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!
+*/
+
+// @todo: offload import and registration of components into separated widgets in TYPO3 v13
+import { Chart,
+  ArcElement,
+  LineElement,
+  BarElement,
+  PointElement,
+  BarController,
+  BubbleController,
+  DoughnutController,
+  LineController,
+  PieController,
+  PolarAreaController,
+  RadarController,
+  ScatterController,
+  CategoryScale,
+  LinearScale,
+  LogarithmicScale,
+  RadialLinearScale,
+  TimeScale,
+  TimeSeriesScale,
+  Decimation,
+  Filler,
+  Legend,
+  Title,
+  Tooltip,
+  SubTitle } from 'chart.js';
+import RegularEvent from '@typo3/core/event/regular-event';
+import { DashboardWidgetContentRenderedEvent } from './dashboard';
+
+class ChartInitializer {
+  private readonly selector: string = '.dashboard-item';
+
+  constructor() {
+    this.initialize();
+  }
+
+  public initialize(): void {
+    // @todo: offload import and registration of components into separated widgets in TYPO3 v13
+    Chart.register(
+      ArcElement,
+      LineElement,
+      BarElement,
+      PointElement,
+      BarController,
+      BubbleController,
+      DoughnutController,
+      LineController,
+      PieController,
+      PolarAreaController,
+      RadarController,
+      ScatterController,
+      CategoryScale,
+      LinearScale,
+      LogarithmicScale,
+      RadialLinearScale,
+      TimeScale,
+      TimeSeriesScale,
+      Decimation,
+      Filler,
+      Legend,
+      Title,
+      Tooltip,
+      SubTitle
+    );
+
+    new RegularEvent(DashboardWidgetContentRenderedEvent.eventName, (e: DashboardWidgetContentRenderedEvent, htmlElement: HTMLElement): void => {
+      e.preventDefault();
+      const config: any = e.widget.eventdata;
+
+      if (undefined === config || undefined === config.graphConfig) {
+        return;
+      }
+
+      const _canvas: any = htmlElement.querySelector('canvas');
+      let context;
+
+      if (_canvas !== null) {
+        context = _canvas.getContext('2d');
+      }
+
+      if (undefined === context) {
+        return;
+      }
+
+      if (this.darkModeEnabled()) {
+        config.graphConfig.options.color = '#ccc';
+        config.graphConfig.options.borderColor = '#000';
+        Chart.defaults.borderColor = 'rgba(255,255,255,.1)';
+        Chart.defaults.color = '#ccc';
+      } else {
+        config.graphConfig.options.color = '#666';
+        config.graphConfig.options.borderColor = '#fff';
+        Chart.defaults.borderColor = 'rgba(0,0,0,.1)';
+        Chart.defaults.color = '#666';
+      }
+
+      const existingChart = Chart.getChart(context);
+      if (existingChart) {
+        existingChart.data = config.graphConfig.data;
+        existingChart.options = config.graphConfig.options;
+        existingChart.update();
+        return;
+      }
+
+      new Chart(context, config.graphConfig);
+    }).delegateTo(document, this.selector);
+  }
+
+  private darkModeEnabled(): boolean {
+    const target = document.querySelector(this.selector);
+    const computedStyle = window.getComputedStyle(target);
+    const colorScheme = computedStyle.colorScheme;
+    if (colorScheme === 'light only' || colorScheme === 'light') {
+      return false;
+    } else if (colorScheme === 'dark only' || colorScheme === 'dark') {
+      return true;
+    }
+
+    return window.matchMedia('(prefers-color-scheme: dark)').matches;
+  }
+}
+
+export default new ChartInitializer();