From 5347b2fa91528e730de55636e8878b7c8929910d Mon Sep 17 00:00:00 2001 From: Ben McCann <322311+benmccann@users.noreply.github.com> Date: Fri, 26 May 2023 10:25:38 -0700 Subject: [PATCH] chore: [Popper] remove process.env (#2296) Co-authored-by: atomiks --- src/createPopper.js | 82 +--------------- src/modifiers/arrow.js | 22 ----- src/modifiers/computeStyles.js | 31 +----- src/utils/computeAutoPlacement.js | 12 --- src/utils/format.js | 5 - src/utils/validateModifiers.js | 151 ------------------------------ 6 files changed, 3 insertions(+), 300 deletions(-) delete mode 100644 src/utils/format.js delete mode 100644 src/utils/validateModifiers.js diff --git a/src/createPopper.js b/src/createPopper.js index 4e6026e9c5..94b3325fba 100644 --- a/src/createPopper.js +++ b/src/createPopper.js @@ -10,21 +10,11 @@ import getCompositeRect from './dom-utils/getCompositeRect'; import getLayoutRect from './dom-utils/getLayoutRect'; import listScrollParents from './dom-utils/listScrollParents'; import getOffsetParent from './dom-utils/getOffsetParent'; -import getComputedStyle from './dom-utils/getComputedStyle'; import orderModifiers from './utils/orderModifiers'; import debounce from './utils/debounce'; -import validateModifiers from './utils/validateModifiers'; -import uniqueBy from './utils/uniqueBy'; -import getBasePlacement from './utils/getBasePlacement'; import mergeByName from './utils/mergeByName'; import detectOverflow from './utils/detectOverflow'; import { isElement } from './dom-utils/instanceOf'; -import { auto } from './enums'; - -const INVALID_ELEMENT_ERROR = - 'Popper: Invalid reference or popper argument provided. They must be either a DOM element or virtual element.'; -const INFINITE_LOOP_ERROR = - 'Popper: An infinite loop in the modifiers cycle has been detected! The cycle has been interrupted to prevent a browser crash.'; const DEFAULT_OPTIONS: OptionsGeneric = { placement: 'bottom', @@ -45,10 +35,8 @@ function areValidElements(...args: Array): boolean { } export function popperGenerator(generatorOptions: PopperGeneratorArgs = {}) { - const { - defaultModifiers = [], - defaultOptions = DEFAULT_OPTIONS, - } = generatorOptions; + const { defaultModifiers = [], defaultOptions = DEFAULT_OPTIONS } = + generatorOptions; return function createPopper>>( reference: Element | VirtualElement, @@ -106,57 +94,6 @@ export function popperGenerator(generatorOptions: PopperGeneratorArgs = {}) { // Strip out disabled modifiers state.orderedModifiers = orderedModifiers.filter((m) => m.enabled); - // Validate the provided modifiers so that the consumer will get warned - // if one of the modifiers is invalid for any reason - if (__DEV__) { - const modifiers = uniqueBy( - [...orderedModifiers, ...state.options.modifiers], - ({ name }) => name - ); - - validateModifiers(modifiers); - - if (getBasePlacement(state.options.placement) === auto) { - const flipModifier = state.orderedModifiers.find( - ({ name }) => name === 'flip' - ); - - if (!flipModifier) { - console.error( - [ - 'Popper: "auto" placements require the "flip" modifier be', - 'present and enabled to work.', - ].join(' ') - ); - } - } - - const { - marginTop, - marginRight, - marginBottom, - marginLeft, - } = getComputedStyle(popper); - - // We no longer take into account `margins` on the popper, and it can - // cause bugs with positioning, so we'll warn the consumer - if ( - [marginTop, marginRight, marginBottom, marginLeft].some((margin) => - parseFloat(margin) - ) - ) { - console.warn( - [ - 'Popper: CSS "margin" styles cannot be used to apply padding', - 'between the popper and its reference element or boundary.', - 'To replicate margin, use the `offset` modifier, as well as', - 'the `padding` option in the `preventOverflow` and `flip`', - 'modifiers.', - ].join(' ') - ); - } - } - runModifierEffects(); return instance.update(); @@ -177,9 +114,6 @@ export function popperGenerator(generatorOptions: PopperGeneratorArgs = {}) { // Don't proceed if `reference` or `popper` are not valid elements // anymore if (!areValidElements(reference, popper)) { - if (__DEV__) { - console.error(INVALID_ELEMENT_ERROR); - } return; } @@ -213,16 +147,7 @@ export function popperGenerator(generatorOptions: PopperGeneratorArgs = {}) { }) ); - let __debug_loops__ = 0; for (let index = 0; index < state.orderedModifiers.length; index++) { - if (__DEV__) { - __debug_loops__ += 1; - if (__debug_loops__ > 100) { - console.error(INFINITE_LOOP_ERROR); - break; - } - } - if (state.reset === true) { state.reset = false; index = -1; @@ -254,9 +179,6 @@ export function popperGenerator(generatorOptions: PopperGeneratorArgs = {}) { }; if (!areValidElements(reference, popper)) { - if (__DEV__) { - console.error(INVALID_ELEMENT_ERROR); - } return instance; } diff --git a/src/modifiers/arrow.js b/src/modifiers/arrow.js index a9ee71af76..5e55b50631 100644 --- a/src/modifiers/arrow.js +++ b/src/modifiers/arrow.js @@ -10,7 +10,6 @@ import { within } from '../utils/within'; import mergePaddingObject from '../utils/mergePaddingObject'; import expandToHashMap from '../utils/expandToHashMap'; import { left, right, basePlacements, top, bottom } from '../enums'; -import { isHTMLElement } from '../dom-utils/instanceOf'; // eslint-disable-next-line import/no-unused-modules export type Options = { @@ -101,28 +100,7 @@ function effect({ state, options }: ModifierArguments) { } } - if (__DEV__) { - if (!isHTMLElement(arrowElement)) { - console.error( - [ - 'Popper: "arrow" element must be an HTMLElement (not an SVGElement).', - 'To use an SVG arrow, wrap it in an HTMLElement that will be used as', - 'the arrow.', - ].join(' ') - ); - } - } - if (!contains(state.elements.popper, arrowElement)) { - if (__DEV__) { - console.error( - [ - 'Popper: "arrow" modifier\'s `element` must be a child of the popper', - 'element.', - ].join(' ') - ); - } - return; } diff --git a/src/modifiers/computeStyles.js b/src/modifiers/computeStyles.js index 362d5528ec..35ad8fb967 100644 --- a/src/modifiers/computeStyles.js +++ b/src/modifiers/computeStyles.js @@ -81,9 +81,7 @@ export function mapToStyles({ let { x = 0, y = 0 } = offsets; ({ x, y } = - typeof roundOffsets === 'function' - ? roundOffsets({ x, y }) - : { x, y }); + typeof roundOffsets === 'function' ? roundOffsets({ x, y }) : { x, y }); const hasX = offsets.hasOwnProperty('x'); const hasY = offsets.hasOwnProperty('y'); @@ -183,33 +181,6 @@ function computeStyles({ state, options }: ModifierArguments) { roundOffsets = true, } = options; - if (__DEV__) { - const transitionProperty = - getComputedStyle(state.elements.popper).transitionProperty || ''; - - if ( - adaptive && - ['transform', 'top', 'right', 'bottom', 'left'].some( - (property) => transitionProperty.indexOf(property) >= 0 - ) - ) { - console.warn( - [ - 'Popper: Detected CSS transitions on at least one of the following', - 'CSS properties: "transform", "top", "right", "bottom", "left".', - '\n\n', - 'Disable the "computeStyles" modifier\'s `adaptive` option to allow', - 'for smooth transitions, or remove these properties from the CSS', - 'transition declaration on the popper element if only transitioning', - 'opacity or background-color for example.', - '\n\n', - 'We recommend using the popper element as a wrapper around an inner', - 'element that can have any CSS property transitioned for animations.', - ].join(' ') - ); - } - } - const commonStyles = { placement: getBasePlacement(state.placement), variation: getVariation(state.placement), diff --git a/src/utils/computeAutoPlacement.js b/src/utils/computeAutoPlacement.js index 7243f9d715..2350541526 100644 --- a/src/utils/computeAutoPlacement.js +++ b/src/utils/computeAutoPlacement.js @@ -55,18 +55,6 @@ export default function computeAutoPlacement( if (allowedPlacements.length === 0) { allowedPlacements = placements; - - if (__DEV__) { - console.error( - [ - 'Popper: The `allowedAutoPlacements` option did not allow any', - 'placements. Ensure the `placement` option matches the variation', - 'of the allowed placements.', - 'For example, "auto" cannot be used to allow "bottom-start".', - 'Use "auto-start" instead.', - ].join(' ') - ); - } } // $FlowFixMe[incompatible-type]: Flow seems to have problems with two array unions... diff --git a/src/utils/format.js b/src/utils/format.js deleted file mode 100644 index 45479ac5b3..0000000000 --- a/src/utils/format.js +++ /dev/null @@ -1,5 +0,0 @@ -// @flow - -export default function format(str: string, ...args: Array) { - return [...args].reduce((p, c) => p.replace(/%s/, c), str); -} diff --git a/src/utils/validateModifiers.js b/src/utils/validateModifiers.js deleted file mode 100644 index 889e5a3374..0000000000 --- a/src/utils/validateModifiers.js +++ /dev/null @@ -1,151 +0,0 @@ -// @flow -import format from './format'; -import { modifierPhases } from '../enums'; - -const INVALID_MODIFIER_ERROR = - 'Popper: modifier "%s" provided an invalid %s property, expected %s but got %s'; -const MISSING_DEPENDENCY_ERROR = - 'Popper: modifier "%s" requires "%s", but "%s" modifier is not available'; -const VALID_PROPERTIES = [ - 'name', - 'enabled', - 'phase', - 'fn', - 'effect', - 'requires', - 'options', -]; - -export default function validateModifiers(modifiers: Array): void { - modifiers.forEach((modifier) => { - [...Object.keys(modifier), ...VALID_PROPERTIES] - // IE11-compatible replacement for `new Set(iterable)` - .filter((value, index, self) => self.indexOf(value) === index) - .forEach((key) => { - switch (key) { - case 'name': - if (typeof modifier.name !== 'string') { - console.error( - format( - INVALID_MODIFIER_ERROR, - String(modifier.name), - '"name"', - '"string"', - `"${String(modifier.name)}"` - ) - ); - } - break; - case 'enabled': - if (typeof modifier.enabled !== 'boolean') { - console.error( - format( - INVALID_MODIFIER_ERROR, - modifier.name, - '"enabled"', - '"boolean"', - `"${String(modifier.enabled)}"` - ) - ); - } - break; - case 'phase': - if (modifierPhases.indexOf(modifier.phase) < 0) { - console.error( - format( - INVALID_MODIFIER_ERROR, - modifier.name, - '"phase"', - `either ${modifierPhases.join(', ')}`, - `"${String(modifier.phase)}"` - ) - ); - } - break; - case 'fn': - if (typeof modifier.fn !== 'function') { - console.error( - format( - INVALID_MODIFIER_ERROR, - modifier.name, - '"fn"', - '"function"', - `"${String(modifier.fn)}"` - ) - ); - } - break; - case 'effect': - if ( - modifier.effect != null && - typeof modifier.effect !== 'function' - ) { - console.error( - format( - INVALID_MODIFIER_ERROR, - modifier.name, - '"effect"', - '"function"', - `"${String(modifier.fn)}"` - ) - ); - } - break; - case 'requires': - if ( - modifier.requires != null && - !Array.isArray(modifier.requires) - ) { - console.error( - format( - INVALID_MODIFIER_ERROR, - modifier.name, - '"requires"', - '"array"', - `"${String(modifier.requires)}"` - ) - ); - } - break; - case 'requiresIfExists': - if (!Array.isArray(modifier.requiresIfExists)) { - console.error( - format( - INVALID_MODIFIER_ERROR, - modifier.name, - '"requiresIfExists"', - '"array"', - `"${String(modifier.requiresIfExists)}"` - ) - ); - } - break; - case 'options': - case 'data': - break; - default: - console.error( - `PopperJS: an invalid property has been provided to the "${ - modifier.name - }" modifier, valid properties are ${VALID_PROPERTIES.map( - (s) => `"${s}"` - ).join(', ')}; but "${key}" was provided.` - ); - } - - modifier.requires && - modifier.requires.forEach((requirement) => { - if (modifiers.find((mod) => mod.name === requirement) == null) { - console.error( - format( - MISSING_DEPENDENCY_ERROR, - String(modifier.name), - requirement, - requirement - ) - ); - } - }); - }); - }); -}