[Feature] Refactor all exports to named exports

CHANGELOG.md

@@ -11,6 +11,7 @@ All notable changes to this project will be documented in this file. The format
 ### Changed
 
 - Refactor decorators to not override the name config ([#549](https://github.com/studiometa/js-toolkit/issues/549), [#550](https://github.com/studiometa/js-toolkit/pull/550), [6436ef7d](https://github.com/studiometa/js-toolkit/commit/6436ef7d))
+- Refactor all exports to be named exports ([#551](https://github.com/studiometa/js-toolkit/pull/551), [2e046016](https://github.com/studiometa/js-toolkit/commit/2e046016))
 
 ## [v3.0.0-beta.2](https://github.com/studiometa/js-toolkit/compare/3.0.0-beta.1..3.0.0-beta.2) (2024-11-21)
 

packages/js-toolkit/Base/managers/EventsManager.ts

@@ -1,5 +1,5 @@
 import type { Base, BaseProps } from '../index.js';
-import getAllProperties from '../../utils/object/getAllProperties.js';
+import { getAllProperties } from '../../utils/object/getAllProperties.js';
 import { dashCase, isArray, pascalCase } from '../../utils/index.js';
 import { getEventTarget, eventIsNative, eventIsDefinedInConfig } from '../utils.js';
 import { AbstractManager } from './AbstractManager.js';

packages/js-toolkit/helpers/createApp.ts

@@ -11,7 +11,7 @@ export type CreateAppOptions = Partial<Features> & {
  * Instantiate and mount the given component on the given root element when the page has been loaded
  * and return a function to use the app instance when it is ready.
  */
-export default function createApp<S extends BaseConstructor<Base>, T extends BaseProps = BaseProps>(
+export function createApp<S extends BaseConstructor<Base>, T extends BaseProps = BaseProps>(
   App: S,
   options: HTMLElement | CreateAppOptions = {},
 ): () => Promise<S & Base<T>> {

packages/js-toolkit/helpers/getClosestParent.ts

@@ -1,11 +1,11 @@
 import type { Base, BaseConstructor } from '../Base/index.js';
-import getInstanceFromElement from './getInstanceFromElement.js';
+import { getInstanceFromElement } from './getInstanceFromElement.js';
 import { getAncestorWhere } from '../utils/index.js';
 
 /**
  * Get the closest parent of a component.
  */
-export default function getClosestParent<T extends BaseConstructor>(
+export function getClosestParent<T extends BaseConstructor>(
   childInstance: Base,
   ParentConstructor: T,
 ) {

packages/js-toolkit/helpers/getInstanceFromElement.ts

@@ -3,7 +3,7 @@ import type { BaseConstructor, BaseEl } from '../Base/index.js';
 /**
  * Get a component instance from a DOM element.
  */
-export default function getInstanceFromElement<T extends BaseConstructor>(
+export function getInstanceFromElement<T extends BaseConstructor>(
   element: BaseEl,
   Constructor: T,
 ): InstanceType<T> | null {

packages/js-toolkit/helpers/importOnInteraction.ts

@@ -16,7 +16,7 @@ import { isString, getComponentResolver } from '../utils/index.js';
  *   The parent component.
  * @returns {Promise<InstanceType<T>>}
  */
-export default function importOnInteraction<T extends BaseConstructor = BaseConstructor>(
+export function importOnInteraction<T extends BaseConstructor = BaseConstructor>(
   fn: () => Promise<T | { default: T }>,
   nameOrSelectorOrElement: string | HTMLElement | HTMLElement[],
   events: string | string[],

packages/js-toolkit/helpers/importOnMediaQuery.ts

@@ -11,7 +11,7 @@ import { getComponentResolver } from '../utils/index.js';
  *   The media query name and value (see https://developer.mozilla.org/en-US/docs/Web/CSS/@media#media_features)
  * @returns {Promise<T>}
  */
-export default function importOnMediaQuery<T extends BaseConstructor = BaseConstructor>(
+export function importOnMediaQuery<T extends BaseConstructor = BaseConstructor>(
   fn: () => Promise<T | { default: T }>,
   media: string,
 ): Promise<T> {

packages/js-toolkit/helpers/importWhenIdle.ts

@@ -15,7 +15,7 @@ type ImportWhenIdleOptions = {
  *   The time to wait before triggering the callback if never idle.
  * @returns {Promise<T>}
  */
-export default function importWhenIdle<T extends BaseConstructor = BaseConstructor>(
+export function importWhenIdle<T extends BaseConstructor = BaseConstructor>(
   fn: () => Promise<T | { default: T }>,
   { timeout = 1 }: ImportWhenIdleOptions = {},
 ): Promise<T> {

packages/js-toolkit/helpers/importWhenPrefersMotion.ts

@@ -1,5 +1,5 @@
 import type { BaseConstructor } from '../Base/index.js';
-import importOnMediaQuery from './importOnMediaQuery.js';
+import { importOnMediaQuery } from './importOnMediaQuery.js';
 
 /**
  * Import a component if user does not reduce motion.
@@ -8,7 +8,7 @@ import importOnMediaQuery from './importOnMediaQuery.js';
  * @param {() => Promise<T|{default:T}>} fn
  * @returns {Promise<T>}
  */
-export default function importWhenPrefersMotion<T extends BaseConstructor = BaseConstructor>(
+export function importWhenPrefersMotion<T extends BaseConstructor = BaseConstructor>(
   fn: () => Promise<T | { default: T }>,
 ): Promise<T> {
   return importOnMediaQuery(fn, 'not (prefers-reduced-motion)');

packages/js-toolkit/helpers/importWhenVisible.ts

@@ -16,7 +16,7 @@ import { getComponentResolver } from '../utils/index.js';
  *   Options for the `IntersectionObserver` instance.
  * @returns {Promise<T>}
  */
-export default function importWhenVisible<T extends BaseConstructor = BaseConstructor>(
+export function importWhenVisible<T extends BaseConstructor = BaseConstructor>(
   fn: () => Promise<T | { default: T }>,
   nameOrSelectorOrElement: string | HTMLElement | HTMLElement[],
   parent?: Base,

packages/js-toolkit/helpers/index.ts

@@ -1,9 +1,9 @@
+export * from './createApp.js';
+export * from './getClosestParent.js';
 export * from './getDirectChildren.js';
-export { default as createApp } from './createApp.js';
-export { default as getClosestParent } from './getClosestParent.js';
-export { default as getInstanceFromElement } from './getInstanceFromElement.js';
-export { default as importOnInteraction } from './importOnInteraction.js';
-export { default as importWhenIdle } from './importWhenIdle.js';
-export { default as importWhenVisible } from './importWhenVisible.js';
-export { default as importOnMediaQuery } from './importOnMediaQuery.js';
-export { default as importWhenPrefersMotion } from './importWhenPrefersMotion.js';
+export * from './getInstanceFromElement.js';
+export * from './importOnInteraction.js';
+export * from './importOnMediaQuery.js';
+export * from './importWhenIdle.js';
+export * from './importWhenPrefersMotion.js';
+export * from './importWhenVisible.js';

packages/js-toolkit/services/KeyService.ts

@@ -1,6 +1,6 @@
 import type { ServiceConfig, ServiceInterface } from './AbstractService.js';
 import { AbstractService } from './AbstractService.js';
-import keyCodes from '../utils/keyCodes.js';
+import { keyCodes } from '../utils/keyCodes.js';
 
 function getInitialKeyCodes(): Record<keyof typeof keyCodes, false> {
   return Object.fromEntries(Object.keys(keyCodes).map((key) => [key, false])) as Record<

packages/js-toolkit/services/ResizeService.ts

@@ -2,7 +2,7 @@ import type { ServiceConfig, ServiceInterface } from './AbstractService.js';
 import { AbstractService } from './AbstractService.js';
 import type { Features } from '../Base/features.js';
 import { features } from '../Base/features.js';
-import debounce from '../utils/debounce.js';
+import { debounce } from '../utils/debounce.js';
 
 export interface ResizeServiceProps<U extends Features['breakpoints'] = Features['breakpoints']> {
   width: number;

packages/js-toolkit/services/ScrollService.ts

@@ -1,6 +1,6 @@
 import type { ServiceConfig, ServiceInterface } from './AbstractService.js';
 import { AbstractService } from './AbstractService.js';
-import debounce from '../utils/debounce.js';
+import { debounce } from '../utils/debounce.js';
 import { PASSIVE_CAPTURE_EVENT_OPTIONS } from './utils.js';
 
 export interface ScrollServiceProps {

packages/js-toolkit/utils/collide/boundingRectToCircle.ts

@@ -12,7 +12,7 @@
  * @param {boolean} force Force usage of non-square DOMElements
  * @returns {Circle} Circle object that can be used in collides functions
  */
-export default function boundingRectToCircle({ x, y, width, height }, force = false) {
+export function boundingRectToCircle({ x, y, width, height }, force = false) {
   if (width !== height && !force) {
     throw new Error('Initial DOMElement is not a square. Please use the force mode.');
   }

packages/js-toolkit/utils/collide/collideCircleCircle.ts

@@ -13,7 +13,7 @@
  * @param {Circle} circle2 Circle 2
  * @returns {boolean} Are the sides of one circle touching the other ?
  */
-export default function collideCircleCircle(circle1, circle2) {
+export function collideCircleCircle(circle1, circle2) {
   // get distance between the circle's centers
   // use the Pythagorean Theorem to compute the distance
   const distX = circle1.x - circle2.x;

packages/js-toolkit/utils/collide/collideCircleRect.ts

@@ -21,7 +21,7 @@
  * @param {Rect} rect Rectangle
  * @returns {boolean} Are the sides of the circle touching the rectangle ?
  */
-export default function collideCircleRect(circle, rect) {
+export function collideCircleRect(circle, rect) {
   // temporary variables to set edges for testing
   let testX = circle.x;
   let testY = circle.y;

packages/js-toolkit/utils/collide/collidePointCircle.ts

@@ -19,7 +19,7 @@
  * @param {Circle} circle Circle
  * @returns {boolean} Is the point inside the circle's bounds ?
  */
-export default function collidePointCircle(point, circle) {
+export function collidePointCircle(point, circle) {
   // get distance between the point and circle's center
   // using the Pythagorean Theorem
   const distX = point.x - circle.x;

packages/js-toolkit/utils/collide/collidePointRect.ts

@@ -20,7 +20,7 @@
  * @param {Rect} rect Rectangle
  * @returns {boolean} Is the point inside the rectangle's bounds ?
  */
-export default function collidePointRect(point, rect) {
+export function collidePointRect(point, rect) {
   return (
     point.x >= rect.x && // right of the left edge AND
     point.x <= rect.x + rect.width && // left of the right edge AND

packages/js-toolkit/utils/collide/collideRectRect.ts

@@ -14,7 +14,7 @@
  * @param {Rect} rect2 Rectangle 2
  * @returns {boolean} Are the sides of one rectangle touching the other ?
  */
-export default function collideRectRect(rect1, rect2) {
+export function collideRectRect(rect1, rect2) {
   return (
     rect1.x + rect1.width >= rect2.x && // rect1 right edge past rect2 left AND
     rect1.x <= rect2.x + rect2.width && // rect1 left edge past rect2 right AND

packages/js-toolkit/utils/collide/index.ts

@@ -1,9 +1,9 @@
 /**
  * Inspired by http://www.jeffreythompson.org/collision-detection/
  */
-export { default as boundingRectToCircle } from './boundingRectToCircle.js';
-export { default as collideCircleCircle } from './collideCircleCircle.js';
-export { default as collideCircleRect } from './collideCircleRect.js';
-export { default as collidePointCircle } from './collidePointCircle.js';
-export { default as collidePointRect } from './collidePointRect.js';
-export { default as collideRectRect } from './collideRectRect.js';
+export { boundingRectToCircle } from './boundingRectToCircle.js';
+export { collideCircleCircle } from './collideCircleCircle.js';
+export { collideCircleRect } from './collideCircleRect.js';
+export { collidePointCircle } from './collidePointCircle.js';
+export { collidePointRect } from './collidePointRect.js';
+export { collideRectRect } from './collideRectRect.js';

packages/js-toolkit/utils/css/animate.ts

@@ -3,7 +3,6 @@ import { isDefined, isFunction, isNumber } from '../is.js';
 import { transform, TRANSFORM_PROPS } from './transform.js';
 import { domScheduler as scheduler } from '../scheduler.js';
 import { tween, normalizeEase } from '../tween.js';
-// eslint-disable-next-line import/extensions
 import { eachElements } from './utils.js';
 import { startsWith } from '../string/index.js';
 import type { TransformProps } from './transform.js';

packages/js-toolkit/utils/css/getOffsetSizes.ts

@@ -1,7 +1,7 @@
 /**
  * Get a `DOMRect` like `Object` for an element, without its transforms.
  */
-export default function getOffsetSizes(element: HTMLElement) {
+export function getOffsetSizes(element: HTMLElement) {
   let parent = element;
   let x = -window.scrollX;
   let y = -window.scrollY;

packages/js-toolkit/utils/css/index.ts

@@ -1,8 +1,8 @@
 export * from './animate.js';
 export { add as addClass, remove as removeClass, toggle as toggleClass } from './classes.js';
 export { add as addStyle, remove as removeStyle } from './styles.js';
-export { default as getOffsetSizes } from './getOffsetSizes.js';
-export { default as matrix } from './matrix.js';
+export { getOffsetSizes } from './getOffsetSizes.js';
+export { matrix } from './matrix.js';
 export { transform } from './transform.js';
-export { default as transition } from './transition.js';
+export { transition } from './transition.js';
 export type { TransformProps } from './transform.js';

packages/js-toolkit/utils/css/matrix.ts

@@ -24,7 +24,7 @@ type MatrixTransform = {
  * // matrix(0.5, 0, 0, 0.5, 0, 0)
  * ```
  */
-export default function matrix(transform?: MatrixTransform): string {
+export function matrix(transform?: MatrixTransform): string {
   // eslint-disable-next-line no-param-reassign
   transform = transform || {};
   return `matrix(${transform.scaleX ?? 1}, ${transform.skewY ?? 0}, ${transform.skewX ?? 0}, ${

packages/js-toolkit/utils/css/transition.ts

@@ -183,7 +183,7 @@ async function singleTransition(
  * @param  {string}                                            endMode           Whether to remove or keep the `to` classes/styles
  * @returns {Promise<void>}                                                      A promise resolving at the end of the transition.
  */
-export default async function transition(
+export async function transition(
   elementOrElements: HTMLElement | HTMLElement[] | NodeListOf<HTMLElement>,
   name: string | TransitionStyles,
   endMode: 'keep' | 'remove' = 'remove',

packages/js-toolkit/utils/debounce.ts

@@ -7,7 +7,7 @@
  * @param   {number} [delay=300] The delay in ms to wait before calling the function.
  * @returns {(...args:unknown[]) => void} The debounced function.
  */
-export default function debounce(
+export function debounce(
   fn: (...args: unknown[]) => void,
   delay = 300,
 ): (...args: unknown[]) => void {

packages/js-toolkit/utils/getComponentResolver.ts

@@ -6,7 +6,7 @@ import { isFunction } from './is.js';
  * @param {Function} fn
  * @returns {Function}
  */
-export default function getComponentResolver(fn) {
+export function getComponentResolver(fn) {
   return (resolve, cb?: () => unknown) => {
     fn().then((module) => {
       const ResolvedClass = module.default ?? module;

packages/js-toolkit/utils/index.ts

@@ -1,13 +1,13 @@
-export { default as debounce } from './debounce.js';
+export { debounce } from './debounce.js';
 export * from './trapFocus.js';
-export { default as keyCodes } from './keyCodes.js';
-export { default as memoize } from './memoize.js';
+export { keyCodes } from './keyCodes.js';
+export { memoize } from './memoize.js';
 export { nextFrame } from './nextFrame.js';
 export { nextTick } from './nextTick.js';
 export { nextMicrotask } from './nextMicrotask.js';
-export { default as throttle } from './throttle.js';
+export { throttle } from './throttle.js';
 export { scrollTo } from './scrollTo.js';
-export { default as getComponentResolver } from './getComponentResolver.js';
+export { getComponentResolver } from './getComponentResolver.js';
 export * from './is.js';
 export * from './has.js';
 export * from './css/index.js';

packages/js-toolkit/utils/keyCodes.ts

@@ -1,4 +1,4 @@
-export default {
+export const keyCodes = {
   ENTER: 13,
   SPACE: 32,
   TAB: 9,

packages/js-toolkit/utils/math/clamp.ts

@@ -6,7 +6,7 @@
  * @param {number} max
  * @returns {number}
  */
-export default function clamp(value: number, min: number, max: number) {
+export function clamp(value: number, min: number, max: number) {
   /* eslint-disable no-nested-ternary */
   return min < max
     ? value < min

packages/js-toolkit/utils/math/clamp01.ts

@@ -1,11 +1,11 @@
-import clamp from './clamp.js';
+import { clamp } from './clamp.js';
 
 /**
  * Clamp a value in the 0–1 range.
  *
  * @param {number} value
  * @returns {number}
  */
-export default function clamp01(value: number) {
+export function clamp01(value: number) {
   return clamp(value, 0, 1);
 }

packages/js-toolkit/utils/math/damp.ts

@@ -7,7 +7,7 @@
  * @param   {number} [precision=0.01] The precision used to calculate the latest value.
  * @returns {number} The next value.
  */
-export default function damp(
+export function damp(
   targetValue: number,
   currentValue: number,
   factor = 0.5,

packages/js-toolkit/utils/math/index.ts

@@ -2,11 +2,11 @@ export * as ease from './ease.js';
 export * from './createEases.js';
 export * from './ease.js';
 export { createRange } from './createRange.js';
-export { default as clamp } from './clamp.js';
-export { default as clamp01 } from './clamp01.js';
-export { default as damp } from './damp.js';
-export { default as inertiaFinalValue } from './inertiaFinalValue.js';
-export { default as lerp } from './lerp.js';
-export { default as map } from './map.js';
-export { default as round } from './round.js';
+export { clamp } from './clamp.js';
+export { clamp01 } from './clamp01.js';
+export { damp } from './damp.js';
+export { inertiaFinalValue } from './inertiaFinalValue.js';
+export { lerp } from './lerp.js';
+export { map } from './map.js';
+export { round } from './round.js';
 export { mean } from './mean.js';

packages/js-toolkit/utils/math/inertiaFinalValue.ts

@@ -1,4 +1,4 @@
-import clamp from './clamp.js';
+import { clamp } from './clamp.js';
 
 /**
  * Get the final damped value for a given factor.
@@ -8,11 +8,7 @@ import clamp from './clamp.js';
  * @param   {number} [dampFactor=0.85] The speed to reach the target value.
  * @returns {number} The next value.
  */
-export default function inertiaFinalValue(
-  initialValue: number,
-  initialDelta: number,
-  dampFactor = 0.85,
-) {
+export function inertiaFinalValue(initialValue: number, initialDelta: number, dampFactor = 0.85) {
   // eslint-disable-next-line no-param-reassign
   dampFactor = clamp(dampFactor, 0.00001, 0.99999);
   let delta = initialDelta;

packages/js-toolkit/utils/math/lerp.ts

@@ -6,6 +6,6 @@
  * @param  {number} ratio The ratio to get.
  * @returns {number}       The value between min and max corresponding to ratio.
  */
-export default function lerp(min: number, max: number, ratio: number) {
+export function lerp(min: number, max: number, ratio: number) {
   return (1 - ratio) * min + ratio * max;
 }

packages/js-toolkit/utils/math/map.ts

@@ -8,7 +8,7 @@
  * @param  {number} outputMax The output's maximum value.
  * @returns {number}           The input value mapped to the output range.
  */
-export default function map(
+export function map(
   value: number,
   inputMin: number,
   inputMax: number,

packages/js-toolkit/utils/math/round.ts

@@ -5,6 +5,6 @@
  * @param   {number} [decimals=0] The number of decimals to keep.
  * @returns {number} A rounded number to the given decimals length.
  */
-export default function round(value: number, decimals = 0) {
+export function round(value: number, decimals = 0) {
   return Number(value.toFixed(decimals));
 }