start typing

Author: jelhan

addon/-base-popper-modifier.js

@@ -0,0 +1,117 @@
+import Modifier, { type ArgsFor } from 'ember-modifier';
+import { registerDestructor } from '@ember/destroyable';
+import { isArray } from '@ember/array';
+import { isEmpty } from '@ember/utils';
+import {
+  createPopper,
+  type Instance as PopperInstance,
+  type Options as PopperOptions,
+} from '@popperjs/core';
+
+import {
+  setPopperForElement,
+  isModifier,
+  type PopperModifierDescription,
+} from './index';
+import {
+  beginRunLoopModifier as beginRunLoop,
+  endRunLoopModifier as endRunLoop,
+} from './in-runloop-modifier';
+import type Owner from '@ember/owner';
+
+export interface PopperSignature {
+  Args: {
+    Positional: [
+      HTMLElement,
+      ...(Partial<PopperOptions> | PopperModifierDescription)[],
+    ];
+    Named: Partial<PopperOptions>;
+  };
+  Element: HTMLElement;
+}
+
+function getPopperOptions(
+  positional: PopperSignature['Args']['Positional'],
+  named: PopperSignature['Args']['Named'],
+): Partial<PopperOptions> {
+  // Get an array of just positional "options"; first item is an element reference
+  const [, ...positionalArguments] = positional;
+
+  // Positional args that are not modifiers should be treated as full "options" objects
+  const allPositionalOptions = positionalArguments.filter<
+    Partial<PopperOptions>
+  >((arg): arg is Partial<PopperOptions> => !isModifier(arg));
+
+  // Positional args that are modifiers will extend the rest of the configuration
+  const allPositionalModifiers =
+    positionalArguments.filter<PopperModifierDescription>(
+      (arg): arg is PopperModifierDescription => isModifier(arg),
+    );
+
+  const { ...namedOptions } = named;
+  const options: Partial<PopperOptions> = {
+    ...allPositionalOptions.reduce((acc, curr) => {
+      return { ...acc, ...curr };
+    }, {}),
+    ...namedOptions,
+  };
+
+  // Ensure that the `modifiers` is always an array
+  const modifiers =
+    options.modifiers === undefined || isEmpty(options.modifiers)
+      ? []
+      : isArray(options.modifiers)
+        ? options.modifiers
+        : [options.modifiers];
+
+  // Add runloop integration and positional modifiers to the array of modifiers
+  options.modifiers = [
+    ...modifiers,
+    ...allPositionalModifiers,
+    beginRunLoop,
+    endRunLoop,
+  ];
+
+  return options;
+}
+
+export default abstract class PopperModifier extends Modifier<PopperSignature> {
+  popper: PopperInstance | null = null;
+  primaryElement: HTMLElement | null = null;
+  secondaryElement: HTMLElement | null = null;
+
+  abstract get tooltipElement(): HTMLElement;
+  abstract get referenceElement(): HTMLElement;
+
+  modify(
+    element: PopperSignature['Element'],
+    positionalArgs: PopperSignature['Args']['Positional'],
+    namedArgs: PopperSignature['Args']['Named'],
+  ): void {
+    this.primaryElement = element;
+    this.secondaryElement = positionalArgs[0];
+
+    const popperOptions = getPopperOptions(positionalArgs, namedArgs);
+
+    // Create the popper once all required arguments are present
+    if (!this.popper && this.referenceElement && this.tooltipElement) {
+      this.popper = createPopper(
+        this.referenceElement,
+        this.tooltipElement,
+        popperOptions,
+      );
+
+      setPopperForElement(this.primaryElement, this.popper);
+    }
+    this.popper?.setOptions(popperOptions);
+  }
+
+  constructor(owner: Owner, args: ArgsFor<PopperSignature>) {
+    super(owner, args);
+    registerDestructor(this, this.cleanup);
+  }
+
+  cleanup = () => {
+    this.popper?.destroy();
+  };
+}

addon/-base-popper-modifier.ts

@@ -0,0 +1,32 @@
+import { helper } from '@ember/component/helper';
+import { createModifier, type PopperModifierDescription } from '../index';
+import type { Modifier as PopperModifier } from '@popperjs/core';
+
+type PopperModifierOptions = Partial<
+  PopperModifier<unknown, { [key: string]: unknown }>
+>;
+
+export interface PopperSignature {
+  Args: {
+    Positional: [string, ...PopperModifierOptions[]];
+    Named: PopperModifierOptions;
+  };
+  Return: PopperModifierDescription;
+}
+
+export function buildPopperModifier(
+  [name, positionalOptions]: PopperSignature['Args']['Positional'],
+  optionsHash: PopperSignature['Args']['Named'],
+) {
+  const options = {
+    ...positionalOptions,
+    ...optionsHash,
+  };
+
+  return createModifier({
+    name,
+    options,
+  });
+}
+
+export default helper<PopperSignature>(buildPopperModifier);

addon/helpers/popper-modifier.js

@@ -2,6 +2,10 @@ import {
   begin as begingWrappingInRunLoop,
   end as endWrappingInRunLoop,
 } from '@ember/runloop';
+import {
+  type Instance as PopperInstance,
+  type Modifier as PopperModifier,
+} from '@popperjs/core';
 
 // This set keeps track of whether a particular Popper instance is currently in an update
 // loop that is tracked by the Ember Run Loop
@@ -14,16 +18,18 @@ import {
 // because the number of "starts" and "ends" of the Popper update look do not always match;
 // if we "start" again before we have "ended", then we can open an Ember run loop that is never
 // closed, which will cause our application to hang.
-const POPPER_IN_RUN_LOOP = new WeakSet();
+const POPPER_IN_RUN_LOOP: WeakSet<PopperInstance> = new WeakSet();
 
 const FIRST_PHASE = 'beforeRead';
 const LAST_PHASE = 'afterWrite';
 
-export const beginRunLoopModifier = {
+export const beginRunLoopModifier: Partial<
+  PopperModifier<'ember-runloop-begin', { [key: string]: unknown }>
+> = {
   name: 'ember-runloop-begin',
   phase: FIRST_PHASE,
   enabled: true,
-  fn({ instance }) {
+  fn({ instance }: { instance: PopperInstance }) {
     if (!POPPER_IN_RUN_LOOP.has(instance)) {
       POPPER_IN_RUN_LOOP.add(instance);
 
@@ -32,11 +38,13 @@ export const beginRunLoopModifier = {
   },
 };
 
-export const endRunLoopModifier = {
+export const endRunLoopModifier: Partial<
+  PopperModifier<'ember-runloop-end', { [key: string]: unknown }>
+> = {
   name: 'ember-runloop-end',
   phase: LAST_PHASE,
   enabled: true,
-  fn({ instance }) {
+  fn({ instance }: { instance: PopperInstance }) {
     if (POPPER_IN_RUN_LOOP.has(instance)) {
       POPPER_IN_RUN_LOOP.delete(instance);