feat(utils): add new utilities and mixins (#222)

Author: mimshins

src/utils.ts

@@ -0,0 +1,19 @@
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const debounce = <T extends (...args: any[]) => any>(
+  func: T,
+  delay: number,
+): ((...args: Parameters<T>) => void) => {
+  let timeoutId: ReturnType<typeof setTimeout>;
+
+  return function (this: ThisParameterType<T>, ...args: Parameters<T>) {
+    // eslint-disable-next-line @typescript-eslint/no-this-alias
+    const context = this;
+
+    clearTimeout(timeoutId);
+    timeoutId = setTimeout(() => {
+      func.apply(context, args);
+    }, delay);
+  };
+};
+
+export default debounce;

src/utils/debounce.ts

@@ -0,0 +1,17 @@
+abstract class BaseEvent<T> extends Event {
+  private _details?: T;
+
+  public get details(): T | undefined {
+    return this._details;
+  }
+
+  constructor(name: string, eventInit?: EventInit & { details?: T }) {
+    const { details, ...init } = eventInit ?? {};
+
+    super(name, init);
+
+    this._details = details;
+  }
+}
+
+export default BaseEvent;

src/utils/events/BaseEvent.ts

@@ -0,0 +1,2 @@
+export { default as BaseEvent } from "./BaseEvent";
+export { default as redispatchEvent } from "./redispatch-event";

src/utils/events/index.ts

@@ -0,0 +1,25 @@
+/**
+ * Re-dispatches an event from the provided element.
+ *
+ * cherry-picked from: https://github.com/material-components/material-web/blob/a9ee4f5bc1d6702e5dc352eefed13a1d849577e3/internal/events/redispatch-event.ts#L28
+ */
+const redispatchEvent = (element: Element, event: Event) => {
+  // For bubbling events in SSR light DOM (or composed), stop their propagation
+  // and dispatch the copy.
+  if (event.bubbles && (!element.shadowRoot || event.composed)) {
+    event.stopPropagation();
+  }
+
+  const newEvent = Reflect.construct(event.constructor, [
+    event.type,
+    event,
+  ]) as Event;
+
+  const dispatched = element.dispatchEvent(newEvent);
+
+  if (!dispatched) event.preventDefault();
+
+  return dispatched;
+};
+
+export default redispatchEvent;

src/utils/events/redispatch-event.ts

@@ -0,0 +1,5 @@
+export * from "./events";
+export * from "./mixins";
+
+export { default as debounce } from "./debounce";
+export { default as logger } from "./logger";

src/utils/index.ts

@@ -0,0 +1,20 @@
+const logger = (
+  message: string,
+  scope: string,
+  type: "error" | "default" | "warning" = "default",
+) => {
+  const typesMap: Record<typeof type, Console["log"]> = {
+    /* eslint-disable no-console */
+    error: console.error,
+    default: console.log,
+    warning: console.warn,
+    /* eslint-enable no-console */
+  };
+
+  const logFn = typesMap[type];
+  const completeMessage = `[TAPSI][${scope}]: ${message}`;
+
+  logFn(completeMessage);
+};
+
+export default logger;

src/utils/logger.ts

@@ -0,0 +1,2 @@
+export { default as withElementInternals } from "./with-element-internals";
+export { default as withFormAssociated } from "./with-form-associated";

src/utils/mixins/index.ts

@@ -0,0 +1,10 @@
+export type MixinBase<ExpectedBase = object> = abstract new (
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  ...args: any[]
+) => ExpectedBase;
+
+export type MixinReturn<MixinBase, MixinClass = object> = (abstract new (
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  ...args: any[]
+) => MixinClass) &
+  MixinBase;

src/utils/mixins/types.ts

@@ -0,0 +1,31 @@
+import { type LitElement } from "lit";
+import type { MixinBase, MixinReturn } from "./types";
+
+export const internals = Symbol("internals");
+
+export interface WithElementInternals {
+  [internals]: ElementInternals;
+}
+
+const withElementInternals = <T extends MixinBase<LitElement>>(
+  BaseClass: T,
+): MixinReturn<T, WithElementInternals> => {
+  abstract class WithElementInternalsClass
+    extends BaseClass
+    implements WithElementInternals
+  {
+    private _internals?: ElementInternals;
+
+    public get [internals](): ElementInternals {
+      if (!this._internals) {
+        this._internals = (this as HTMLElement).attachInternals();
+      }
+
+      return this._internals;
+    }
+  }
+
+  return WithElementInternalsClass;
+};
+
+export default withElementInternals;