@vizejs/composable 0.426.3 → 0.427.0

package/registry/files/abort-signal.ts

@@ -0,0 +1,292 @@
+/**
+ * Create a signal that aborts when the first input signal aborts.
+ *
+ * The standard `AbortSignal.any()` implementation is used when available.
+ * Older runtimes receive an equivalent listener-based implementation that
+ * removes every retained listener as soon as the result aborts. The first
+ * already-aborted input wins in iteration order, and its exact reason is
+ * forwarded. An empty iterable returns a fresh signal that never aborts.
+ *
+ * This function reads runtime constructors only when called and is safe to
+ * import during server rendering. Materializing the iterable happens before
+ * listeners are attached, so an iterable that throws cannot leak a partial
+ * subscription. If a non-standard signal throws while registering, listeners
+ * already attached to earlier inputs are released before the error propagates.
+ *
+ * @param signals Abort signals to compose; consumed exactly once.
+ * @returns A new first-abort-wins signal.
+ */
+export function anyAbortSignal(signals: Iterable<AbortSignal>): AbortSignal {
+  const inputs = [...signals];
+  const nativeAny = conformantNativeAbortSignalAny();
+  if (nativeAny !== undefined) return nativeAny.call(AbortSignal, inputs);
+
+  const controller = new AbortController();
+  const listeners: Array<readonly [AbortSignal, () => void]> = [];
+  const cleanup = () => {
+    for (const [signal, listener] of listeners) {
+      signal.removeEventListener("abort", listener);
+    }
+    listeners.length = 0;
+  };
+  const abortFrom = (signal: AbortSignal) => {
+    if (controller.signal.aborted) return;
+    cleanup();
+    controller.abort(signal.reason);
+  };
+
+  for (const signal of inputs) {
+    if (signal.aborted) {
+      abortFrom(signal);
+      break;
+    }
+    const listener = () => abortFrom(signal);
+    listeners.push([signal, listener]);
+    try {
+      signal.addEventListener("abort", listener, { once: true });
+    } catch (error) {
+      cleanup();
+      throw error;
+    }
+
+    // A host adapter may change state between the preflight read and listener
+    // registration. The second read closes that race without changing native
+    // EventTarget behavior.
+    if (signal.aborted) {
+      abortFrom(signal);
+      break;
+    }
+  }
+
+  return controller.signal;
+}
+
+let probedNativeAny: unknown;
+let cachedNativeAny: typeof AbortSignal.any | undefined;
+
+/** Resolve the current native implementation only after its first-reason contract passes. */
+function conformantNativeAbortSignalAny(): typeof AbortSignal.any | undefined {
+  let candidate: typeof AbortSignal.any | undefined;
+  try {
+    candidate = Reflect.get(AbortSignal, "any") as typeof AbortSignal.any | undefined;
+  } catch {
+    return undefined;
+  }
+  if (candidate === probedNativeAny) return cachedNativeAny;
+
+  probedNativeAny = candidate;
+  cachedNativeAny =
+    typeof candidate === "function" && nativeAnyReasonIsStable(candidate) ? candidate : undefined;
+  return cachedNativeAny;
+}
+
+/**
+ * Detect runtimes whose combined reason changes when an earlier array member
+ * aborts after the winner. The probe deliberately does not read the reason
+ * until both inputs abort, catching lazy native implementations as well.
+ */
+function nativeAnyReasonIsStable(candidate: typeof AbortSignal.any): boolean {
+  try {
+    const late = new AbortController();
+    const winner = new AbortController();
+    const expected = {};
+    const combined = candidate.call(AbortSignal, [late.signal, winner.signal]);
+    winner.abort(expected);
+    late.abort({});
+    return combined.aborted && combined.reason === expected;
+  } catch {
+    return false;
+  }
+}
+
+/** Options for {@link timeoutAbortSignal}. */
+export interface TimeoutAbortSignalOptions {
+  /**
+   * Abort the returned signal early when this parent aborts.
+   *
+   * @default undefined
+   */
+  readonly signal?: AbortSignal;
+
+  /**
+   * Reason used when the timeout elapses. Parent cancellation always forwards
+   * the parent's reason instead.
+   *
+   * @default DOMException("The operation timed out.", "TimeoutError")
+   */
+  readonly reason?: unknown;
+
+  /**
+   * Deterministic or host-specific single-shot timer implementation. Supplying
+   * a scheduler selects the compatibility implementation.
+   *
+   * @default globalThis timer functions
+   */
+  readonly scheduler?: TimeoutScheduler;
+}
+
+/** Options for {@link deadlineAbortSignal}. */
+export interface DeadlineAbortSignalOptions extends TimeoutAbortSignalOptions {
+  /**
+   * Clock returning Unix epoch milliseconds.
+   *
+   * @default Date.now
+   */
+  readonly now?: () => number;
+}
+
+/**
+ * Create a signal that aborts after a portable, non-negative delay.
+ *
+ * The native `AbortSignal.timeout()` implementation is used when available
+ * and neither a custom scheduler nor a custom reason is supplied. Older
+ * runtimes use the same owned-timer path as injected schedulers. Parent
+ * cancellation is composed with first-reason-wins semantics. Compatibility
+ * scheduling owns exactly one timer and removes its parent listener whenever
+ * either source aborts. A zero delay remains asynchronous.
+ *
+ * The delay must be an integer from `0` through `2_147_483_647`; this common
+ * signed 32-bit timer ceiling avoids host-specific clamping. The function
+ * accesses timers and abort constructors only when called and is safe to
+ * import during server rendering.
+ *
+ * @param delayMs Delay in milliseconds.
+ * @param options Parent signal, timeout reason, and scheduler.
+ * @default options {}
+ * @throws {RangeError} Tagged `VIZE_COMPOSE_ABORT_TIMEOUT_INVALID_DELAY` when
+ * the delay is fractional, negative, non-finite, or exceeds the portable
+ * timer ceiling.
+ * @returns A new timeout or parent-cancelled signal.
+ */
+export function timeoutAbortSignal(
+  delayMs: number,
+  options: TimeoutAbortSignalOptions = {},
+): AbortSignal {
+  assertPortableTimeout(delayMs);
+
+  const parent = options.signal;
+  if (parent?.aborted) {
+    const controller = new AbortController();
+    controller.abort(parent.reason);
+    return controller.signal;
+  }
+
+  if (
+    options.scheduler === undefined &&
+    options.reason === undefined &&
+    typeof AbortSignal.timeout === "function"
+  ) {
+    const timeout = AbortSignal.timeout(delayMs);
+    return options.signal === undefined ? timeout : anyAbortSignal([options.signal, timeout]);
+  }
+
+  const controller = new AbortController();
+  const scheduler = options.scheduler ?? defaultTimeoutScheduler;
+
+  let handle: unknown;
+  let timerPending = true;
+  let parentListening = false;
+  const stopTimer = () => {
+    if (!timerPending) return;
+    timerPending = false;
+    scheduler.clearTimeout(handle);
+    handle = undefined;
+  };
+  const stopParent = () => {
+    if (!parentListening || parent === undefined) return;
+    parentListening = false;
+    parent.removeEventListener("abort", abortFromParent);
+  };
+  const abort = (reason: unknown) => {
+    if (controller.signal.aborted) return;
+    stopTimer();
+    stopParent();
+    controller.abort(reason);
+  };
+  const abortFromParent = () => abort(parent?.reason);
+  const timeoutReason =
+    options.reason === undefined
+      ? new DOMException("The operation timed out.", "TimeoutError")
+      : options.reason;
+
+  handle = scheduler.setTimeout(() => {
+    timerPending = false;
+    handle = undefined;
+    abort(timeoutReason);
+  }, delayMs);
+  if (controller.signal.aborted || parent === undefined) return controller.signal;
+
+  try {
+    // Assume registration may have succeeded before a non-standard adapter
+    // throws. Removing an absent listener is harmless, while delaying this
+    // ownership flag until after registration could leak a partial listener.
+    parentListening = true;
+    parent.addEventListener("abort", abortFromParent, { once: true });
+    if (controller.signal.aborted) {
+      parent.removeEventListener("abort", abortFromParent);
+      parentListening = false;
+      return controller.signal;
+    }
+    if (parent.aborted) abortFromParent();
+  } catch (error) {
+    stopParent();
+    stopTimer();
+    throw error;
+  }
+  return controller.signal;
+}
+
+/**
+ * Create a timeout signal from an absolute Unix-epoch deadline.
+ *
+ * Fractional positive differences are rounded up so cancellation never occurs
+ * before the requested deadline. Past deadlines become an asynchronous
+ * zero-delay timeout. `Date` and numeric deadlines are both accepted.
+ *
+ * @param deadline Absolute deadline as a `Date` or Unix epoch milliseconds.
+ * @param options Clock, parent signal, timeout reason, and scheduler.
+ * @default options {}
+ * @throws {RangeError} Tagged `VIZE_COMPOSE_ABORT_DEADLINE_INVALID` when the
+ * deadline, current clock value, or their positive difference is non-finite
+ * or cannot fit the portable timeout range.
+ * @returns A new deadline or parent-cancelled signal.
+ */
+export function deadlineAbortSignal(
+  deadline: Date | number,
+  options: DeadlineAbortSignalOptions = {},
+): AbortSignal {
+  const deadlineMs = deadline instanceof Date ? deadline.getTime() : deadline;
+  const nowMs = (options.now ?? Date.now)();
+  const difference = deadlineMs - nowMs;
+  if (
+    !Number.isFinite(deadlineMs) ||
+    !Number.isFinite(nowMs) ||
+    !Number.isFinite(difference) ||
+    difference > maximumPortableTimeoutMs
+  ) {
+    throw new RangeError(
+      `[VIZE_COMPOSE_ABORT_DEADLINE_INVALID] deadline and now must produce a finite delay from 0 through ${String(maximumPortableTimeoutMs)} milliseconds; received deadline=${String(deadlineMs)}, now=${String(nowMs)}`,
+    );
+  }
+
+  const { now: _now, ...timeoutOptions } = options;
+  return timeoutAbortSignal(Math.ceil(Math.max(0, difference)), timeoutOptions);
+}
+
+function assertPortableTimeout(delayMs: number): void {
+  if (!Number.isSafeInteger(delayMs) || delayMs < 0 || delayMs > maximumPortableTimeoutMs) {
+    throw new RangeError(
+      `[VIZE_COMPOSE_ABORT_TIMEOUT_INVALID_DELAY] delayMs must be an integer from 0 through ${String(maximumPortableTimeoutMs)}; received ${String(delayMs)}`,
+    );
+  }
+}
+import type { TimeoutScheduler } from "./timeout-scheduler.ts";
+
+const maximumPortableTimeoutMs = 2_147_483_647;
+
+const defaultTimeoutScheduler: TimeoutScheduler = {
+  setTimeout: (callback, delayMs) => globalThis.setTimeout(callback, delayMs),
+  clearTimeout: (handle) => {
+    globalThis.clearTimeout(handle as ReturnType<typeof setTimeout>);
+  },
+};

package/registry/files/active-element.ts

@@ -0,0 +1,93 @@
+import { hasInjectionContext, onMounted, shallowRef, toValue, watch } from "vue";
+import type { MaybeRefOrGetter, ShallowRef } from "vue";
+
+import { tryOnScopeDispose } from "./scope.ts";
+
+/** Document-like capability observed by {@link useActiveElement}. */
+export interface ActiveElementHost extends EventTarget {
+  /** Currently focused element. */
+  readonly activeElement: Element | null;
+}
+
+/** Options for {@link useActiveElement}. */
+export interface UseActiveElementOptions {
+  /**
+   * Descend into open shadow roots to report the innermost focused element.
+   *
+   * @default true
+   */
+  readonly deep?: boolean;
+
+  /**
+   * Reactive document capability for alternate runtimes and tests.
+   *
+   * @default globalThis.document when available
+   */
+  readonly host?: MaybeRefOrGetter<ActiveElementHost | null | undefined>;
+}
+
+/**
+ * Track the focused element of a document.
+ *
+ * Listens for capturing `focus`/`blur` events on the document, so focus
+ * changes anywhere (including inside shadow trees) update the ref.
+ * Server renders expose `null`. Listeners are removed with the owning scope.
+ *
+ * @param options Shadow-DOM traversal and document capability.
+ * @default options {}
+ * @returns Readonly shallow ref of the active element.
+ */
+export function useActiveElement(
+  options: UseActiveElementOptions = {},
+): Readonly<ShallowRef<Element | null>> {
+  const deep = options.deep ?? true;
+  const active = shallowRef<Element | null>(null);
+  // Inside a component the host is read once it has mounted, so a hydrating
+  // client first renders the same fallback as the server. `hasInjectionContext`
+  // also detects Vapor components (unlike `getCurrentInstance`).
+  const mounted = shallowRef(!hasInjectionContext());
+  if (!mounted.value) {
+    onMounted(() => {
+      mounted.value = true;
+    });
+  }
+
+  const stop = watch(
+    () =>
+      !mounted.value
+        ? undefined
+        : options.host === undefined
+          ? browserActiveElementHost()
+          : toValue(options.host),
+    (host, _previous, onCleanup) => {
+      if (!host) {
+        active.value = null;
+        return;
+      }
+      const update = (): void => {
+        active.value = readActive(host.activeElement, deep);
+      };
+      update();
+      host.addEventListener("focus", update, { capture: true, passive: true });
+      host.addEventListener("blur", update, { capture: true, passive: true });
+      onCleanup(() => {
+        host.removeEventListener("focus", update, { capture: true });
+        host.removeEventListener("blur", update, { capture: true });
+      });
+    },
+    { immediate: true },
+  );
+  tryOnScopeDispose(() => stop.stop());
+
+  return active;
+}
+
+function readActive(element: Element | null, deep: boolean): Element | null {
+  let current = element;
+  while (deep && current?.shadowRoot?.activeElement) current = current.shadowRoot.activeElement;
+  return current;
+}
+
+function browserActiveElementHost(): ActiveElementHost | undefined {
+  return typeof document !== "undefined" ? document : undefined;
+}

package/registry/files/animate.ts

@@ -0,0 +1,322 @@
+import { computed, readonly, ref, shallowRef, toValue, watch } from "vue";
+import type { MaybeRefOrGetter, Ref, ShallowRef, WritableComputedRef } from "vue";
+
+import { resolveElement } from "./element-target.ts";
+import type { MaybeElementTarget } from "./element-target.ts";
+import { tryOnScopeDispose } from "./scope.ts";
+
+/** CSS property names (camelCase) that accept string values on `CSSStyleDeclaration`. */
+export type AnimatableCssProperty = {
+  [Key in keyof CSSStyleDeclaration]: Key extends string
+    ? CSSStyleDeclaration[Key] extends string
+      ? Key
+      : never
+    : never;
+}[keyof CSSStyleDeclaration];
+
+type KeyframeProperty = Exclude<AnimatableCssProperty, "offset" | "cssText">;
+
+/** Keyframe whose property names are checked against `CSSStyleDeclaration`. */
+export type TypedKeyframe = {
+  readonly [Key in KeyframeProperty]?: string | number | null;
+} & {
+  /** Position of the keyframe in `[0, 1]`. */
+  readonly offset?: number | null;
+  /** Easing applied from this keyframe to the next. */
+  readonly easing?: string;
+  /** Composite operation for this keyframe. */
+  readonly composite?: CompositeOperationOrAuto;
+  /** CSS `offset` shorthand (motion path); WAAPI names it `cssOffset` to avoid the keyframe offset. */
+  readonly cssOffset?: string;
+};
+
+/** Value list of one property in property-indexed keyframes. */
+export type IndexedKeyframeValue =
+  | string
+  | number
+  | null
+  | readonly string[]
+  | readonly (number | null)[];
+
+/** Property-indexed keyframes with checked property names. */
+export type TypedPropertyIndexedKeyframes = {
+  readonly [Key in KeyframeProperty]?: IndexedKeyframeValue;
+} & {
+  /** Keyframe positions. */
+  readonly offset?: number | null | readonly (number | null)[];
+  /** Easings. */
+  readonly easing?: string | readonly string[];
+  /** Composite operations. */
+  readonly composite?: CompositeOperationOrAuto | readonly CompositeOperationOrAuto[];
+};
+
+/** Keyframes accepted by {@link useAnimate}. */
+export type AnimationKeyframes = readonly TypedKeyframe[] | TypedPropertyIndexedKeyframes;
+
+/** Frame scheduler used to keep `currentTime` in sync while running. */
+export interface AnimateFrameHost {
+  /** Schedule a callback before the next repaint. */
+  readonly requestAnimationFrame: (callback: FrameRequestCallback) => number;
+  /** Cancel a scheduled frame. */
+  readonly cancelAnimationFrame: (handle: number) => void;
+}
+
+/** Options for {@link useAnimate}. */
+export interface UseAnimateOptions extends KeyframeAnimationOptions {
+  /**
+   * Start playing as soon as the element resolves.
+   *
+   * @default true
+   */
+  readonly immediate?: boolean;
+
+  /**
+   * Commit the final computed styles to the element's `style` on finish.
+   *
+   * @default false
+   */
+  readonly commitStyles?: boolean;
+
+  /**
+   * Keep the animation from being auto-removed by the browser when it is
+   * replaced by another filling animation.
+   *
+   * @default false
+   */
+  readonly persist?: boolean;
+
+  /**
+   * Called once the animation object is created.
+   *
+   * @default undefined
+   */
+  readonly onReady?: (animation: Animation) => void;
+
+  /**
+   * Called when creating the animation throws (e.g. invalid keyframes).
+   *
+   * @default undefined
+   */
+  readonly onError?: (error: unknown) => void;
+
+  /**
+   * Frame scheduler used to sync `currentTime` while running.
+   *
+   * @default globalThis.window when available
+   */
+  readonly frameHost?: MaybeRefOrGetter<AnimateFrameHost | null | undefined>;
+}
+
+/** Reactive animation state returned by {@link useAnimate}. */
+export interface AnimateControls {
+  /** Whether the resolved element supports `animate()`. `false` during server rendering. */
+  readonly isSupported: Readonly<Ref<boolean>>;
+  /** Underlying `Animation`, once created. */
+  readonly animation: Readonly<ShallowRef<Animation | null>>;
+  /** Playback state. */
+  readonly playState: Readonly<Ref<AnimationPlayState>>;
+  /** Whether a play/pause is pending. */
+  readonly pending: Readonly<Ref<boolean>>;
+  /** Current time in milliseconds (writable to seek). */
+  readonly currentTime: WritableComputedRef<number | null>;
+  /** Playback rate (writable). */
+  readonly playbackRate: WritableComputedRef<number>;
+  /** Play (creating the animation if needed). */
+  readonly play: () => void;
+  /** Pause. */
+  readonly pause: () => void;
+  /** Reverse the playback direction. */
+  readonly reverse: () => void;
+  /** Jump to the end. */
+  readonly finish: () => void;
+  /** Cancel and clear effects. */
+  readonly cancel: () => void;
+}
+
+/**
+ * Drive the Web Animations API reactively with typed keyframes.
+ *
+ * Keyframe property names are checked against `CSSStyleDeclaration`, so typos
+ * are compile errors. Changing keyframes updates the running effect in place.
+ * Playback state is synced after every control call, on `finish`/`cancel`/
+ * `remove`, and every animation frame while running. The animation is
+ * cancelled when the owning reactive scope stops. Nothing runs during server
+ * rendering (`playState` is `"idle"`).
+ *
+ * @param target Reactive element target.
+ * @param keyframes Reactive typed keyframes (`null` to pause creation).
+ * @param options Duration in milliseconds, or timing plus lifecycle options.
+ * @returns Reactive playback state and controls.
+ */
+export function useAnimate(
+  target: MaybeElementTarget,
+  keyframes: MaybeRefOrGetter<AnimationKeyframes | null>,
+  options: number | UseAnimateOptions,
+): AnimateControls {
+  const settings: UseAnimateOptions = typeof options === "number" ? { duration: options } : options;
+  const {
+    immediate = true,
+    commitStyles = false,
+    persist = false,
+    onReady,
+    onError,
+    frameHost,
+    ...timing
+  } = settings;
+  const animation = shallowRef<Animation | null>(null);
+  const isSupported = ref(false);
+  const playState = ref<AnimationPlayState>("idle");
+  const pending = ref(false);
+  const time = ref<number | null>(null);
+  const rate = ref(timing.playbackRate ?? 1);
+  let stopFrames = (): void => undefined;
+
+  const readTime = (value: CSSNumberish | null): number | null =>
+    typeof value === "number" ? value : null;
+  const sync = (): void => {
+    const current = animation.value;
+    if (!current) return;
+    playState.value = current.playState;
+    pending.value = current.pending;
+    time.value = readTime(current.currentTime);
+    rate.value = current.playbackRate;
+    if (current.playState === "running") startFrames();
+    else stopFrames();
+  };
+  const startFrames = (): void => {
+    const frames = frameHost === undefined ? browserFrameHost() : toValue(frameHost);
+    if (!frames) return;
+    stopFrames();
+    let handle = frames.requestAnimationFrame(function tick() {
+      sync();
+      if (animation.value?.playState === "running") handle = frames.requestAnimationFrame(tick);
+    });
+    stopFrames = () => {
+      frames.cancelAnimationFrame(handle);
+      stopFrames = () => undefined;
+    };
+  };
+
+  const create = (): Animation | null => {
+    const element = resolveElement(target);
+    const frames = toValue(keyframes);
+    isSupported.value = element !== null && typeof element.animate === "function";
+    if (!element || !frames || !isSupported.value) return null;
+    try {
+      const created = element.animate(toPlatformKeyframes(frames), timing);
+      if (persist) created.persist();
+      if (commitStyles) {
+        created.addEventListener("finish", () => {
+          try {
+            created.commitStyles();
+          } catch {
+            // Committing fails for disconnected elements; the fill still applies.
+          }
+        });
+      }
+      for (const type of ["finish", "cancel", "remove"] as const) {
+        created.addEventListener(type, sync);
+      }
+      animation.value = created;
+      onReady?.(created);
+      return created;
+    } catch (error) {
+      onError?.(error);
+      return null;
+    }
+  };
+
+  const stopTarget = watch(
+    () => resolveElement(target),
+    (element, _previous, onCleanup) => {
+      if (!element) return;
+      const created = create();
+      if (created && !immediate) created.pause();
+      sync();
+      onCleanup(() => {
+        stopFrames();
+        created?.cancel();
+        if (animation.value === created) animation.value = null;
+        playState.value = "idle";
+      });
+    },
+    { immediate: true, flush: "post" },
+  );
+  const stopKeyframes = watch(
+    () => toValue(keyframes),
+    (frames) => {
+      const effect = animation.value?.effect;
+      if (frames && effect && isKeyframeEffect(effect))
+        effect.setKeyframes(toPlatformKeyframes(frames));
+    },
+    { deep: true },
+  );
+  tryOnScopeDispose(() => {
+    stopTarget.stop();
+    stopKeyframes.stop();
+    stopFrames();
+  });
+
+  const control = (action: (current: Animation) => void) => (): void => {
+    const current = animation.value ?? create();
+    if (!current) return;
+    action(current);
+    sync();
+  };
+
+  return {
+    isSupported: readonly(isSupported),
+    animation,
+    playState: readonly(playState),
+    pending: readonly(pending),
+    currentTime: computed({
+      get: () => time.value,
+      set: (value: number | null) => {
+        if (!animation.value) return;
+        animation.value.currentTime = value;
+        sync();
+      },
+    }),
+    playbackRate: computed({
+      get: () => rate.value,
+      set: (value: number) => {
+        rate.value = value;
+        if (!animation.value) return;
+        animation.value.playbackRate = value;
+        sync();
+      },
+    }),
+    play: control((current) => current.play()),
+    pause: control((current) => current.pause()),
+    reverse: control((current) => current.reverse()),
+    finish: control((current) => current.finish()),
+    cancel: control((current) => current.cancel()),
+  };
+}
+
+function toPlatformKeyframes(frames: AnimationKeyframes): Keyframe[] | PropertyIndexedKeyframes {
+  if (isKeyframeList(frames)) return frames.map((frame) => ({ ...frame }));
+  const indexed: PropertyIndexedKeyframes = {};
+  for (const [key, value] of Object.entries(frames)) {
+    if (value !== undefined) indexed[key] = copyIndexedValue(value);
+  }
+  return indexed;
+}
+
+function copyIndexedValue(
+  value: IndexedKeyframeValue,
+): string | number | null | string[] | (number | null)[] {
+  return typeof value === "object" && value !== null ? value.slice() : value;
+}
+
+function isKeyframeList(frames: AnimationKeyframes): frames is readonly TypedKeyframe[] {
+  return Array.isArray(frames);
+}
+
+function isKeyframeEffect(effect: AnimationEffect): effect is KeyframeEffect {
+  return "setKeyframes" in effect && typeof effect.setKeyframes === "function";
+}
+
+function browserFrameHost(): AnimateFrameHost | undefined {
+  return typeof window !== "undefined" ? window : undefined;
+}